mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-10 01:15:06 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Add:Ereader device setting to set users that have access #1982

Browse source
This commit is contained in:
advplyr 2023-10-29 11:28:34 -05:00
parent 94fd3841aa
commit 27497451d9
23 changed files with 267 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

40
client/components/ui/MultiSelectDropdown.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="w-full" v-click-outside="closeMenu">
<div class="w-full" v-click-outside="clickOutsideObj">
<p class="px-1 text-sm font-semibold">{{ label }}</p>
<div ref="wrapper" class="relative">
<div ref="inputWrapper" style="min-height: 40px" class="flex-wrap relative w-full shadow-sm flex items-center bg-primary border border-gray-600 rounded-md px-2 py-1 cursor-pointer" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
@ -11,23 +11,24 @@
</div>
</div>
<ul ref="menu" v-show="showMenu" class="absolute z-60 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
<template v-for="item in items">
<li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
<div class="flex items-center">
<span class="font-normal ml-3 block truncate">{{ item.text }}</span>
<transition name="menu">
<ul ref="menu" v-show="showMenu" class="absolute z-60 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
<template v-for="item in items">
<li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
<p class="font-normal ml-3 block truncate">{{ item.text }}</p>
<div v-if="selected.includes(item.value)" class="text-yellow-400 absolute inset-y-0 right-0 my-auto w-5 h-5 mr-3 overflow-hidden">
<span class="material-icons text-xl">checkmark</span>
</div>
</li>
</template>
<li v-if="!items.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
<div class="flex items-center justify-center">
<span class="font-normal">{{ $strings.MessageNoItems }}</span>
</div>
<span v-if="selected.includes(item.value)" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
<span class="material-icons text-xl">checkmark</span>
</span>
</li>
</template>
<li v-if="!items.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
<div class="flex items-center justify-center">
<span class="font-normal">{{ $strings.MessageNoItems }}</span>
</div>
</li>
</ul>
</ul>
</transition>
</div>
</div>
</template>
@ -48,7 +49,12 @@ export default {
data() {
return {
showMenu: false,
menu: null
menu: null,
clickOutsideObj: {
handler: this.closeMenu,
events: ['mousedown'],
isActive: true
}
}
},
computed: {