@d-mok/quasar-app-extension-quasar-axe 2.0.2 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "2.0.2",
+    "version": "2.0.5",
     "description": "A Quasar App Extension",
     "author": "d-mok <49301824+d-mok@users.noreply.github.com>",
     "license": "MIT",
@@ -16,10 +16,13 @@
     "dependencies": {
         "@handsontable/vue3": "^12.1.0",
         "@supabase/supabase-js": "^1.35.4",
+        "@types/lodash": "^4.14.182",
         "@types/papaparse": "^5.3.2",
         "@types/webpack-env": "^1.17.0",
+        "@vueuse/core": "^9.1.0",
         "handsontable": "^12.1.0",
         "jszip": "^3.9.0",
+        "lodash": "^4.17.21",
         "papaparse": "^5.3.2",
         "sapphire-js": "^1.0.67",
         "vuedraggable": "^4.1.0"

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

@@ -0,0 +1,60 @@
+<template>
+    <q-select
+        v-model="selected"
+        :options="options"
+        :option-label="optionLabel"
+        v-bind="$attrs"
+    />
+</template>
+
+<script
+    lang="ts"
+    setup
+>
+import { watch } from 'vue'
+import { useVModel } from '@vueuse/core'
+import _ from 'lodash'
+
+const props = withDefaults(
+    defineProps<{
+        options: any[]
+        modelValue: any
+        optionLabel: string | ((_: any) => string)
+        ticker?: number
+    }>(),
+    {
+        ticker: 0,
+        optionLabel: $ => String($),
+    }
+)
+const emits = defineEmits(['update:modelValue'])
+
+const selected = useVModel(props, 'modelValue', emits)
+
+function select(i: number) {
+    i = _.clamp(i, 0, props.options.length - 1)
+    selected.value = props.options[i]
+}
+
+function rePick() {
+    if (props.options.length === 0) return
+    if (!props.options.includes(selected.value)) select(0)
+}
+
+rePick()
+watch(() => props.options, rePick)
+
+function getCurrentIndex(): number {
+    return props.options.findIndex($ => $ === selected.value)
+}
+
+watch(
+    () => props.ticker,
+    (now, old) => {
+        let i = getCurrentIndex()
+        if (i === -1) return
+        if (now > old) select(i + 1)
+        if (now < old) select(i - 1)
+    }
+)
+</script>

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

@@ -1,11 +1,9 @@
 <template>
     <q-select
-        :model-value="modelValue"
-        @update:model-value="e => emits('update:modelValue', e)"
+        v-model="selected"
         :options="options"
         v-bind="$attrs"
-    >
-    </q-select>
+    />
 </template>
 
 <script
@@ -13,6 +11,7 @@
     setup
 >
 import { watch } from 'vue'
+import { useVModel } from '@vueuse/core'
 
 const props = defineProps<{
     options: string[]
@@ -21,18 +20,15 @@ const props = defineProps<{
 
 const emits = defineEmits(['update:modelValue'])
 
+const selected = useVModel(props, 'modelValue', emits)
+
 function rePick() {
     if (props.options.length === 0) return
 
-    if (!props.options.includes(props.modelValue))
-        emits('update:modelValue', props.options[0])
+    if (!props.options.includes(selected.value))
+        selected.value = props.options[0]
 }
 
 rePick()
-watch(
-    () => props.options,
-    () => {
-        rePick()
-    }
-)
+watch(() => props.options, rePick)
 </script>

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

@@ -1,63 +0,0 @@
-<template>
-    <q-select
-        :model-value="modelValue"
-        @update:model-value="e => emits('update:modelValue', e)"
-        :options="options"
-        :option-label="optionLabel"
-        v-bind="$attrs"
-    >
-    </q-select>
-</template>
-
-<script
-    lang="ts"
-    setup
->
-import { watch } from 'vue'
-
-type Props = {
-    options: any[]
-    modelValue: any
-    optionLabel: string
-    ticker?: number
-}
-
-const props = withDefaults(defineProps<Props>(), { ticker: 0 })
-
-const emits = defineEmits(['update:modelValue'])
-
-function rePick() {
-    if (props.options.length === 0) return
-
-    if (!props.options.includes(props.modelValue))
-        emits('update:modelValue', props.options[0])
-}
-
-rePick()
-watch(
-    () => props.options,
-    () => {
-        rePick()
-    }
-)
-
-function getCurrentIndex(): number {
-    return props.options.findIndex($ => $ === props.modelValue)
-}
-
-watch(
-    () => props.ticker,
-    (now, old) => {
-        let i = getCurrentIndex()
-        if (i === -1) return
-        if (now > old) {
-            let j = Math.min(i + 1, props.options.length - 1)
-            emits('update:modelValue', props.options[j])
-        }
-        if (now < old) {
-            let j = Math.max(i - 1, 0)
-            emits('update:modelValue', props.options[j])
-        }
-    }
-)
-</script>