mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-31 16:14:59 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update:Search input clearable #509

Browse source
This commit is contained in:
advplyr 2023-01-16 17:44:32 -06:00
parent eb552170e3
commit 56fe350104
2 changed files with 9 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/ui/TextInput.vue
View file

@ -4,6 +4,9 @@
<div v-if="prependIcon" class="absolute top-0 left-0 h-full px-2 flex items-center justify-center"> <div v-if="prependIcon" class="absolute top-0 left-0 h-full px-2 flex items-center justify-center">
<span class="material-icons text-lg">{{ prependIcon }}</span> <span class="material-icons text-lg">{{ prependIcon }}</span>
</div> </div>
<div v-if="clearable && input" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center" @click.stop="clear">
<span class="material-icons text-lg">close</span>
</div>
</div> </div>
</template> </template>
@ -26,7 +29,8 @@ export default {
prependIcon: { prependIcon: {
type: String, type: String,
default: null default: null
} },
clearable: Boolean
}, },
data() { data() {
return {} return {}
@ -53,6 +57,9 @@ export default {
} }
}, },
methods: { methods: {
clear() {
this.input = ''
},
focus() { focus() {
if (this.$refs.input) { if (this.$refs.input) {
this.$refs.input.focus() this.$refs.input.focus()

2
pages/search.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="w-full h-full"> <div class="w-full h-full">
<div class="px-4 py-6"> <div class="px-4 py-6">
<ui-text-input ref="input" v-model="search" @input="updateSearch" borderless placeholder="Search" bg="white bg-opacity-5" rounded="md" prepend-icon="search" text-size="base" class="w-full text-lg" /> <ui-text-input ref="input" v-model="search" @input="updateSearch" borderless placeholder="Search" bg="white bg-opacity-10" rounded="md" prepend-icon="search" text-size="base" clearable class="w-full text-lg" />
</div> </div>
<div class="w-full overflow-x-hidden overflow-y-auto search-content px-4" @click.stop> <div class="w-full overflow-x-hidden overflow-y-auto search-content px-4" @click.stop>
<div v-show="isFetching" class="w-full py-8 flex justify-center"> <div v-show="isFetching" class="w-full py-8 flex justify-center">