mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2025-07-24 20:54:43 +02:00
Add:Progress for comics #738
This commit is contained in:
parent
c8b5cefeb5
commit
543ac209e4
7 changed files with 236 additions and 51 deletions
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<modals-modal v-model="show" :width="300" height="100%">
|
||||
<modals-modal v-model="show" :width="width" height="100%">
|
||||
<template #outer>
|
||||
<div v-if="title" class="absolute top-8 left-4 z-40" style="max-width: 80%">
|
||||
<p class="text-white text-xl truncate">{{ title }}</p>
|
||||
|
@ -9,9 +9,9 @@
|
|||
<div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
|
||||
<div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20 p-2" style="max-height: 75%" @click.stop>
|
||||
<ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
|
||||
<template v-for="item in items">
|
||||
<template v-for="item in itemsToShow">
|
||||
<slot :name="item.value" :item="item" :selected="item.value === selected">
|
||||
<li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" role="option" @click="clickedOption(item.value)">
|
||||
<li :key="item.value" :ref="`item-${item.value}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" :style="{ paddingTop: itemPaddingY, paddingBottom: itemPaddingY }" role="option" @click="clickedOption(item.value)">
|
||||
<div class="relative flex items-center px-3">
|
||||
<span v-if="item.icon" class="material-icons-outlined text-xl mr-2 text-white text-opacity-80">{{ item.icon }}</span>
|
||||
<p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
|
||||
|
@ -34,11 +34,27 @@ export default {
|
|||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
selected: String // optional
|
||||
selected: [String, Number], // optional
|
||||
itemPaddingY: {
|
||||
type: String,
|
||||
default: '16px'
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 300
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (newVal) this.$nextTick(this.init)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
show: {
|
||||
get() {
|
||||
|
@ -47,11 +63,32 @@ export default {
|
|||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
},
|
||||
itemsToShow() {
|
||||
return this.items.map((i) => {
|
||||
if (typeof i === 'string') {
|
||||
return {
|
||||
text: i,
|
||||
value: i
|
||||
}
|
||||
}
|
||||
return i
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickedOption(action) {
|
||||
this.$emit('action', action)
|
||||
},
|
||||
init() {
|
||||
if (this.selected && this.$refs[`item-${this.selected}`]?.[0]) {
|
||||
// Set scroll position so that selected item is in the center
|
||||
const containerOffset = this.$refs.container.offsetTop + this.$refs.container.clientHeight / 2
|
||||
const scrollAmount = this.$refs[`item-${this.selected}`][0].offsetTop - containerOffset
|
||||
this.$refs.container.scrollTo({
|
||||
top: scrollAmount
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue