Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-10-27 11:18:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update using keyboard controls to toggle checkboxes and show outline when buttons are focused #4140

Browse Source
This commit is contained in:
advplyr 2025-03-20 18:02:33 -05:00
parent 92bb3527de
commit 89d0257a76
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/ui/Btn.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<nuxt-link v-if="to" :to="to" class="abs-btn outline-none rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList" @click.native="click"> <nuxt-link v-if="to" :to="to" class="abs-btn rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList" @click.native="click">
<slot /> <slot />
<div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100"> <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
<svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24"> <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
@ -7,7 +7,7 @@
</svg> </svg>
</div> </div>
</nuxt-link> </nuxt-link>
<button v-else class="abs-btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click"> <button v-else class="abs-btn rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
<slot /> <slot />
<div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100"> <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
<span v-if="progress">{{ progress }}</span> <span v-if="progress">{{ progress }}</span>

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

@ -1,7 +1,7 @@
<template> <template>
<label class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''"> <label tabindex="0" ref="labelRef" class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''" @keydown.enter="enterKeydown">
<div class="border-2 rounded flex flex-shrink-0 justify-center items-center" :class="wrapperClass"> <div class="border-2 rounded flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
<input v-model="selected" :disabled="disabled" type="checkbox" :aria-label="ariaLabel" class="opacity-0 absolute" :class="!disabled ? 'cursor-pointer' : ''" /> <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> <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> <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>
@ -76,7 +76,17 @@ export default {
return classes.join(' ') return classes.join(' ')
} }
}, },
methods: {}, 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() {} mounted() {}
} }
</script> </script>