@d-mok/quasar-app-extension-quasar-axe 2.0.1 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "2.0.1",
+    "version": "2.0.4",
     "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/QxSelectObject.vue

@@ -1,12 +1,10 @@
 <template>
     <q-select
-        :model-value="modelValue"
-        @update:model-value="e => emits('update:modelValue', e)"
+        v-model="selected"
         :options="options"
         :option-label="optionLabel"
         v-bind="$attrs"
-    >
-    </q-select>
+    />
 </template>
 
 <script
@@ -14,6 +12,8 @@
     setup
 >
 import { watch } from 'vue'
+import { useVModel } from '@vueuse/core'
+import _ from 'lodash'
 
 type Props = {
     options: any[]
@@ -23,26 +23,25 @@ type Props = {
 }
 
 const props = withDefaults(defineProps<Props>(), { ticker: 0 })
-
 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(props.modelValue))
-        emits('update:modelValue', props.options[0])
+    if (!props.options.includes(selected.value)) select(0)
 }
 
 rePick()
-watch(
-    () => props.options,
-    () => {
-        rePick()
-    }
-)
+watch(() => props.options, rePick)
 
 function getCurrentIndex(): number {
-    return props.options.findIndex($ => $ === props.modelValue)
+    return props.options.findIndex($ => $ === selected.value)
 }
 
 watch(
@@ -50,14 +49,8 @@ watch(
     (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])
-        }
+        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/utils/dialog/advanced.ts

@@ -74,7 +74,8 @@ export async function askFn(
 
 /**
  * Ask for an array of objects by table.
- * Input object must have the same keys as sample.
+ * The first non-empty prefill will be used.
+ * The last non-empty prefill will be the spec.
  */
 export async function askTable<T extends object>(
     title: string,
@@ -82,15 +83,13 @@ export async function askTable<T extends object>(
     prefills: T[][],
     isValid: Predicate<T> = $ => true
 ): Promise<T[]> {
-    let content = prefills.find($ => $.length > 0)
-    if (content === undefined) {
+    if (prefills.flat().length === 0)
         throwError('Error', 'All prefills are empty array.')
-    }
     return await base(dialogTable, {
         title,
         message,
-        content,
-        sample: content[0],
+        content: prefills.find($ => $.length > 0),
+        sample: [...prefills].reverse().find($ => $.length > 0)![0],
         isValid,
         cancel: true,
     })