mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-06-28 03:30:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Add:Experimental collapse series for library option #322

Browse source
This commit is contained in:
advplyr 2022-01-24 18:03:54 -06:00
parent 5bd6c8f553
commit d8cc0b57a5
8 changed files with 96 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
<template>
<label class="flex justify-start items-start">
<div class="bg-white border-2 rounded border-gray-400 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500" :class="wrapperClass">
<input v-model="selected" type="checkbox" class="opacity-0 absolute" />
<svg v-if="selected" class="fill-current text-green-500 pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
<label class="flex justify-start items-center cursor-pointer">
<div class="border-2 rounded border-gray-400 flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
<input v-model="selected" type="checkbox" class="opacity-0 absolute cursor-pointer" />
<svg v-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
</div>
<div v-if="label" class="select-none">{{ label }}</div>
<div v-if="label" class="select-none pl-1 text-gray-100" :class="labelClass">{{ label }}</div>
</label>
</template>
@ -12,8 +12,16 @@
export default {
props: {
value: Boolean,
label: Boolean,
small: Boolean
label: String,
small: Boolean,
checkboxBg: {
type: String,
default: 'white'
},
checkColor: {
type: String,
default: 'green-500'
}
},
data() {
return {}
@ -28,12 +36,22 @@ export default {
}
},
wrapperClass() {
if (this.small) return 'w-4 h-4'
return 'w-6 h-6'
var classes = [`bg-${this.checkboxBg}`]
if (this.small) classes.push('w-4 h-4')
else classes.push('w-6 h-6')
return classes.join(' ')
},
labelClass() {
if (this.small) return 'text-sm'
return ''
},
svgClass() {
if (this.small) return 'w-3 h-3'
return 'w-4 h-4'
var classes = [`text-${this.checkColor}`]
if (this.small) classes.push('w-3 h-3')
else classes.push('w-4 h-4')
return classes.join(' ')
}
},
methods: {},