@d-mok/quasar-app-extension-quasar-axe 2.1.50 → 2.1.52

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "2.1.50",
+    "version": "2.1.52",
     "description": "A Quasar App Extension",
     "author": "d-mok <49301824+d-mok@users.noreply.github.com>",
     "license": "MIT",
@@ -34,7 +34,8 @@
         "core-js": "^3.30.2",
         "quasar": "^2.12.0",
         "typescript": "^5.0.4",
-        "vite": "^4.3.9"
+        "vite": "^4.3.9",
+        "vue": "^3.3.4"
     },
     "prettier": {
         "tabWidth": 4,

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

@@ -67,13 +67,21 @@
                     :key="$route.fullPath"
                 >
                     <transition
-                        enter-active-class="animated fadeIn"
-                        leave-active-class="animated fadeOut"
+                        enterActiveClass="animated fadeIn"
+                        leaveActiveClass="animated fadeOut"
                         appear
                         mode="out-in"
                         :duration="200"
                     >
-                        <component :is="Component" />
+                        <q-page
+                            padding
+                            class="q-mx-auto q-gutter-md"
+                        >
+                            <component
+                                :is="Component"
+                                style="margin: auto"
+                            />
+                        </q-page>
                     </transition>
                 </router-view>
             </q-page-container>

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

@@ -1,54 +1,66 @@
 <template>
     <q-select
-        v-model="selected"
+        v-model="modelValue"
         :options="options"
-        :option-label="optionLabel"
+        :option-label="optionLabel ?? ($ => String($))"
+        :option-value="optionValue ?? ($ => $)"
+        emit-value
+        map-options
         v-bind="$attrs"
     />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="T,R">
 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
-    }>(),
-    {
-        optionLabel: ($: any) => String($),
-        ticker: 0,
-    }
-)
-const emits = defineEmits(['update:modelValue'])
+const modelValue = defineModel<R>({ required: true })
+
+let {
+    options,
+    optionLabel,
+    optionValue,
+    ticker = 0,
+} = defineProps<{
+    options: T[]
+    optionLabel?: string | ((_: T) => string)
+    optionValue?: string | ((_: T) => R)
+    ticker?: number
+}>()
 
-const selected = useVModel(props, 'modelValue', emits)
+function getValue(opt: T): R {
+    if (optionValue === undefined) {
+        return opt as any
+    } else if (typeof optionValue === 'string') {
+        return opt[optionValue as keyof T] as any
+    } else {
+        return optionValue(opt) as any
+    }
+}
 
 function select(i: number) {
-    i = _.clamp(i, 0, props.options.length - 1)
-    selected.value = props.options[i]
+    i = _.clamp(i, 0, options.length - 1)
+    modelValue.value = getValue(options[i])
 }
 
 function rePick() {
-    if (props.options.length === 0) return
-    if (!props.options.includes(selected.value)) select(0)
+    const missingSelected = !options.map(getValue).includes(modelValue.value)
+    if (options.length > 0 && missingSelected) select(0)
 }
 
 rePick()
-watch(() => props.options, rePick)
-
-function getCurrentIndex(): number {
-    return props.options.findIndex($ => $ === selected.value)
-}
+watch(
+    () => options,
+    (now, old) => {
+        if (!_.isEqual(now, old)) rePick()
+    }
+)
 
 watch(
-    () => props.ticker,
+    () => ticker,
     (now, old) => {
-        let i = getCurrentIndex()
+        // i = current index
+        let i = options.findIndex($ => getValue($) === modelValue.value)
         if (i === -1) return
         if (now > old) select(i + 1)
         if (now < old) select(i - 1)