@d-mok/quasar-app-extension-quasar-axe 2.0.20 → 2.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "2.0.20",
+    "version": "2.0.21",
     "description": "A Quasar App Extension",
     "author": "d-mok <49301824+d-mok@users.noreply.github.com>",
     "license": "MIT",

package/src/templates/src/boot/axe/components/QxInputAutocomplete.vue

@@ -1,13 +1,14 @@
 <template>
     <q-select
-        v-model="text"
-        :use-input="text === null"
+        :model-value="text"
+        use-input
+        hide-selected
+        fill-input
         input-debounce="0"
         :options="options"
         @filter="filterFn"
-        new-value-mode="add-unique"
+        @input-value="setModel"
         v-bind="$attrs"
-        clearable
     >
     </q-select>
 </template>
@@ -15,7 +16,7 @@
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
 import _ from 'lodash'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = defineProps<{
     autocomplete: string[]
@@ -27,20 +28,23 @@ const emits = defineEmits(['update:modelValue'])
 const text = useVModel(props, 'modelValue', emits)
 if (!text.value) text.value = null
 
-let options = ref<string[]>(props.autocomplete)
+let options = ref<string[]>([])
 
 function filterFn(val: any, update: any) {
-    if (val === '') {
-        update(() => {
-            options.value = props.autocomplete
-        })
-    } else {
-        update(() => {
-            const needle = val.toLowerCase()
-            options.value = props.autocomplete.filter(
-                v => v.toLowerCase().indexOf(needle) > -1
-            )
-        })
-    }
+    if (!val) val = text.value
+    update(() => {
+        if (!val) {
+            options.value = []
+            return
+        }
+        const needle = val.toLowerCase()
+        options.value = props.autocomplete.filter(
+            v => v.toLowerCase().indexOf(needle) > -1
+        )
+    })
+}
+
+function setModel(val: string) {
+    text.value = val
 }
 </script>