mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-31 15:19:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace advanced options with presets/advanced card

Browse source
This commit is contained in:
advplyr 2025-05-02 17:24:46 -05:00
parent e0b90c6813
commit 342d100f3e
5 changed files with 246 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/components/ui/ToggleBtns.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="inline-flex toggle-btn-wrapper shadow-md">
<button v-for="item in items" :key="item.value" type="button" class="toggle-btn outline-hidden relative border border-gray-600 px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
<button v-for="item in items" :key="item.value" type="button" :disabled="disabled" class="toggle-btn outline-hidden relative border border-gray-600 px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
{{ item.text }}
</button>
</div>
@ -9,13 +9,17 @@
<script>
export default {
props: {
value: String,
value: [String, Number],
/**
* [{ "text", "", "value": "" }]
*/
items: {
type: Array,
default: Object
},
disabled: {
type: Boolean,
default: false
}
},
data() {
@ -76,10 +80,19 @@ export default {
.toggle-btn.selected {
color: white;
}
.toggle-btn.selected:disabled {
color: white;
}
.toggle-btn.selected::before {
background-color: rgba(255, 255, 255, 0.1);
}
button.toggle-btn.selected:disabled::before {
background-color: rgba(255, 255, 255, 0.05);
}
button.toggle-btn:disabled::before {
background-color: rgba(0, 0, 0, 0.2);
}
button.toggle-btn:disabled {
cursor: not-allowed;
}
</style>