extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-06-30 14:30:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add: Experimental list view #149

Browse Source
This commit is contained in:
advplyr
2021-10-30 18:50:49 -05:00
parent 6fd3317454
commit 729654f5b2
9 changed files with 393 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/components/ui/Checkbox.vue
View File

@ -1,8 +1,8 @@
<template>
<label class="flex justify-start items-start">
<div class="bg-white border-2 rounded border-gray-400 w-6 h-6 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500">
<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 w-4 h-4 text-green-500 pointer-events-none" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
<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>
</div>
<div v-if="label" class="select-none">{{ label }}</div>
</label>
@ -12,7 +12,8 @@
export default {
props: {
value: Boolean,
label: Boolean
label: Boolean,
small: Boolean
},
data() {
return {}
@ -25,6 +26,14 @@ export default {
set(val) {
this.$emit('input', !!val)
}
},
wrapperClass() {
if (this.small) return 'w-4 h-4'
return 'w-6 h-6'
},
svgClass() {
if (this.small) return 'w-3 h-3'
return 'w-4 h-4'
}
},
methods: {},