mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-10-31 18:37:00 -04:00
93 lines
2.6 KiB
Vue
93 lines
2.6 KiB
Vue
<template>
|
|
<label tabindex="0" ref="labelRef" class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''" @keydown.enter="enterKeydown">
|
|
<div class="border-2 rounded-sm flex shrink-0 justify-center items-center" :class="wrapperClass">
|
|
<input v-model="selected" tabindex="-1" :disabled="disabled" type="checkbox" :aria-label="ariaLabel" class="opacity-0 absolute" :class="!disabled ? 'cursor-pointer' : ''" />
|
|
<span v-if="partial" class="material-symbols text-base leading-none text-gray-400">remove</span>
|
|
<svg v-else-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" :class="[labelClassname, disabled ? 'text-gray-400' : 'text-gray-100']">{{ label }}</div>
|
|
</label>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: Boolean,
|
|
label: String,
|
|
small: Boolean,
|
|
medium: Boolean,
|
|
checkboxBg: {
|
|
type: String,
|
|
default: 'white'
|
|
},
|
|
borderColor: {
|
|
type: String,
|
|
default: 'gray-400'
|
|
},
|
|
checkColor: {
|
|
type: String,
|
|
default: 'green-500'
|
|
},
|
|
labelClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: Boolean,
|
|
partial: Boolean,
|
|
ariaLabel: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
computed: {
|
|
selected: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', !!val)
|
|
}
|
|
},
|
|
wrapperClass() {
|
|
var classes = [`bg-${this.checkboxBg} border-${this.borderColor}`]
|
|
if (this.small) classes.push('w-4 h-4')
|
|
else if (this.medium) classes.push('w-5 h-5')
|
|
else classes.push('w-6 h-6')
|
|
|
|
return classes.join(' ')
|
|
},
|
|
labelClassname() {
|
|
if (this.labelClass) return this.labelClass
|
|
var classes = []
|
|
if (this.small) classes.push('text-xs md:text-sm pl-1')
|
|
else if (this.medium) classes.push('text-base md:text-lg pl-2')
|
|
else classes.push('pl-2')
|
|
return classes.join(' ')
|
|
},
|
|
svgClass() {
|
|
var classes = [`text-${this.checkColor}`]
|
|
if (this.small) classes.push('w-3 h-3')
|
|
else if (this.medium) classes.push('w-3.5 h-3.5')
|
|
else classes.push('w-4 h-4')
|
|
|
|
return classes.join(' ')
|
|
}
|
|
},
|
|
methods: {
|
|
enterKeydown() {
|
|
// Only toggle checkbox if label is focused (from tabbing)
|
|
if (document.activeElement === this.$refs.labelRef) {
|
|
this.toggleCheckbox()
|
|
}
|
|
},
|
|
toggleCheckbox() {
|
|
if (!this.disabled) this.selected = !this.selected
|
|
}
|
|
},
|
|
mounted() {}
|
|
}
|
|
</script>
|