live search

components/NavSearch.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   #navsearch.mt-2.mt-sm-4
-    v-text-field.mx-2(outlined dense hide-details :placeholder='$t("common.search")' :append-icon='mdiMagnify')
+    v-text-field.mx-2(outlined dense hide-details :placeholder='$t("common.search")' :append-icon='mdiMagnify' @input='search' clearable :clear-icon='mdiClose')
       template(v-slot:prepend-inner)
         Calendar(v-if='!settings.hide_calendar')
     v-btn.ml-2.mt-2.gap-2(small outlined v-for='collection in collections' color='primary' :key='collection.id' :to='`/collection/${encodeURIComponent(collection.name)}`') {{collection.name}}
@@ -8,18 +8,23 @@
 <script>
 import { mapState } from 'vuex'
 import Calendar from '@/components/Calendar'
-import { mdiMagnify } from '@mdi/js'
+import { mdiMagnify, mdiClose } from '@mdi/js'
 
 export default {
   data: () => ({
-    mdiMagnify,
+    mdiMagnify, mdiClose,
     collections: []
   }),
   async fetch () {
     this.collections = await this.$axios.$get('collections').catch(_e => [])
   },
   components: { Calendar },
-  computed: mapState(['settings'])
+  computed: mapState(['settings']),
+  methods: {
+    search (ev) {
+      this.$root.$emit('search', ev)
+    }
+  }
 }
 </script>
 <style>