@d-mok/quasar-app-extension-quasar-axe 3.1.46 → 3.1.48

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "3.1.46",
+    "version": "3.1.48",
     "description": "A Quasar App Extension",
     "main": "src/index.js",
     "scripts": {

package/src/templates/src/utils/dialog/advanced.ts

@@ -1,33 +1,28 @@
-import { Dialog, QDialogOptions } from 'quasar'
 import dialogTextarea from './custom/dialogTextarea.vue'
 import dialogTable from './custom/dialogTable.vue'
-import dialogForm from './custom/dialogForm.vue'
 import dialogBtn from './custom/dialogBtn.vue'
 import dialogFile from './custom/dialogFile.vue'
+import dialogRadioText from './custom/dialogRadioText.vue'
+import dialogCheckboxText from './custom/dialogCheckboxText.vue'
 import { throwError } from './basic'
+import type { Component } from 'vue'
+import { base } from './custom_base'
 
 type Predicate<T> = (_: T) => boolean
 type Mapper<T, S> = (_: T) => S
 
-async function base(component: QDialogOptions['component'], props: any) {
-    return new Promise<any>((resolve, reject) =>
-        Dialog.create({
-            component,
-            componentProps: {
-                persistent: true,
-                ...props,
-            },
-        })
-            .onOk((data: any) => resolve(data))
-            .onCancel(() => reject('dialog cancelled by user.'))
-    )
-}
+type VueComponent = Component & (new (...args: any) => any)
+type PropType<C extends VueComponent> = Omit<
+    InstanceType<C>['$props'],
+    'onOk' | 'onHide' | `onVnode${string}` | `ref_${string}`
+>
+type OkType<C extends VueComponent> = Parameters<InstanceType<C>['$emit']>[1]
 
-export async function custom(
-    component: QDialogOptions['component'],
-    props: any = {}
-) {
-    return await base(component, props)
+export async function custom<C extends VueComponent>(
+    component: C,
+    props?: PropType<C>
+): Promise<OkType<C>> {
+    return await base(component, props ?? {})
 }
 
 /**
@@ -75,7 +70,7 @@ export async function askFn(
     funcs: Record<string, () => any>
 ): Promise<string> {
     let key = await askBtn(title, message, Object.keys(funcs))
-    await funcs[key]()
+    await funcs[key]?.()
     return key
 }
 
@@ -89,7 +84,8 @@ export async function askTable<T extends object>(
     message: string = '',
     prefills: T[][],
     validators: [(_: T) => boolean, string][] = [[$ => true, '']],
-    arrayValidators: [(_: T[]) => boolean, string][] = [[$ => true, '']]
+    arrayValidators: [(_: T[]) => boolean, string][] = [[$ => true, '']],
+    headersMap: Record<string, string> = {}
 ): Promise<T[]> {
     if (prefills.flat().length === 0)
         throwError('Error', 'All prefills are empty array.')
@@ -100,6 +96,7 @@ export async function askTable<T extends object>(
         sample: [...prefills].reverse().find($ => $.length > 0)![0],
         validators,
         arrayValidators,
+        headersMap,
         cancel: true,
         allowAddRow: true,
     })
@@ -113,7 +110,8 @@ export async function editTable<T extends object>(
     message: string = '',
     prefill: T[],
     validators: [(_: T) => boolean, string][] = [[$ => true, '']],
-    arrayValidators: [(_: T[]) => boolean, string][] = [[$ => true, '']]
+    arrayValidators: [(_: T[]) => boolean, string][] = [[$ => true, '']],
+    headersMap: Record<string, string> = {}
 ): Promise<T[]> {
     if (prefill.length === 0) throwError('Error', 'prefill is empty array.')
     return await base(dialogTable, {
@@ -123,6 +121,7 @@ export async function editTable<T extends object>(
         sample: prefill[0],
         validators,
         arrayValidators,
+        headersMap,
         cancel: true,
         allowAddRow: false,
     })
@@ -148,43 +147,6 @@ export async function askArray(
     return result.pluck('value').unmatch([''])
 }
 
-type FormPrefill = Record<
-    string,
-    | string
-    | number
-    | boolean
-    | { type: 'select'; value: string; options: string[] }
-    | { type: 'autocomplete'; value: string; options: string[] }
->
-
-type FormFlat<T extends FormPrefill> = {
-    [P in keyof T]: T[P] extends object ? T[P]['value'] : T[P]
-}
-
-/**
- * Ask for an objects.
- */
-export async function askForm<T extends FormPrefill>(
-    title: string,
-    message: string,
-    prefill: T,
-    validators: [(_: FormFlat<T>) => boolean, string][] = [[$ => true, '']]
-): Promise<FormFlat<T>> {
-    const standardPrefill = Object.mapValues(prefill, $ => {
-        if (typeof $ === 'string') return { type: 'string', value: $ }
-        if (typeof $ === 'number') return { type: 'number', value: $ }
-        if (typeof $ === 'boolean') return { type: 'boolean', value: $ }
-        return $
-    })
-
-    return await base(dialogForm, {
-        title,
-        message,
-        prefill: standardPrefill,
-        validators,
-    })
-}
-
 /**
  * Show a dialog with text area display.
  */
@@ -269,3 +231,47 @@ export async function askFiles(
         cancel: true,
     })
 }
+
+/**
+ * Ask to select one text by a radio button.
+ */
+export async function askRadioText(
+    title: string,
+    message: string = '',
+    items: string[],
+    prefill: string = items[0]!,
+    newLabel: string = '',
+    isValid: Predicate<string> = $ => true
+): Promise<string> {
+    return await base(dialogRadioText, {
+        title,
+        message,
+        items,
+        prefill,
+        newLabel,
+        isValid,
+        cancel: true,
+    })
+}
+
+/**
+ * Ask to select multiple text by checkboxs.
+ */
+export async function askCheckboxText(
+    title: string,
+    message: string = '',
+    items: string[],
+    prefill: string[] = [],
+    newLabel: string = '',
+    isValid: Predicate<string[]> = $ => true
+): Promise<string[]> {
+    return await base(dialogCheckboxText, {
+        title,
+        message,
+        items,
+        prefill,
+        newLabel,
+        isValid,
+        cancel: true,
+    })
+}

package/src/templates/src/utils/dialog/basic.ts

@@ -143,7 +143,7 @@ export async function askRadio<T>(
     title: string,
     message: string = '',
     items: T[],
-    prefill: T = items[0],
+    prefill: T = items[0]!,
     label?: (string & keyof T) | Mapper<T, string>
 ): Promise<T> {
     let labelFunc = ($: T) => Object.print($, label)

package/src/templates/src/utils/dialog/custom/dialogCheckboxText.vue

@@ -0,0 +1,97 @@
+<template>
+    <q-dialog
+        ref="dialogRef"
+        @hide="onDialogHide"
+    >
+        <q-card style="width: 400px">
+            <q-card-section>
+                <p class="text-h6">{{ title }}</p>
+                <p v-html="message" />
+                <div style="max-height: 340px; overflow-y: auto">
+                    <div v-for="item in items">
+                        <q-checkbox
+                            v-model="select"
+                            :val="item"
+                            :label="item"
+                        />
+                    </div>
+                    <div v-for="item in newItems">
+                        <div class="row q-pr-md">
+                            <q-checkbox
+                                class="col-auto"
+                                v-model="item.checked"
+                                :val="item.val"
+                            />
+                            <q-input
+                                class="col"
+                                v-model="item.val"
+                                :label="newLabel"
+                                dense
+                            />
+                        </div>
+                    </div>
+                </div>
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <q-btn
+                    label="Cancel"
+                    flat
+                    @click="onDialogCancel"
+                />
+                <q-btn
+                    label="OK"
+                    flat
+                    @click="onDialogOK(final)"
+                    :disable="
+                        ![...items, ...newItems.pluck('val')].includesEvery(
+                            final
+                        ) || !isValid(final)
+                    "
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useDialogPluginComponent } from 'quasar'
+import { computed, ref, watch } from 'vue'
+
+defineEmits([...useDialogPluginComponent.emits])
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+    useDialogPluginComponent()
+
+const props = defineProps<{
+    title: string
+    message: string
+    items: string[]
+    prefill: string[]
+    newLabel: string
+    isValid: (_: string[]) => boolean
+}>()
+
+let select = ref([...props.prefill.match(props.items)])
+
+let newItems = ref<{ val: string; checked: boolean }[]>([
+    { val: '', checked: false },
+])
+
+let final = computed(() => {
+    return [
+        ...select.value.sortedBy(props.items),
+        ...newItems.value.match('checked').pluck('val'),
+    ]
+})
+
+watch(
+    newItems,
+    () => {
+        if (newItems.value.at(-1)?.val !== '') {
+            newItems.value.push({ val: '', checked: false })
+        }
+    },
+    { deep: true }
+)
+</script>

package/src/templates/src/utils/dialog/custom/dialogForm.vue

@@ -3,7 +3,7 @@
         ref="dialogRef"
         @hide="onDialogHide"
     >
-        <q-card style="min-width: 300px; max-width: 600px">
+        <q-card style="width: 400px; max-width: 600px">
             <q-card-section class="q-pb-xs">
                 <p class="text-h6">{{ title }}</p>
                 <p v-html="message" />
@@ -14,30 +14,50 @@
                     <q-input
                         v-if="spec.type === 'string'"
                         v-model="spec.value"
-                        :label="field"
+                        :label="spec.label ?? field"
+                        :hint="spec.hint"
                     />
                     <q-input
                         v-if="spec.type === 'number'"
                         v-model.number="spec.value"
-                        :label="field"
+                        :label="spec.label ?? field"
                         type="number"
+                        :hint="spec.hint"
                     />
                     <q-checkbox
                         v-if="spec.type === 'boolean'"
                         v-model="spec.value"
-                        :label="field"
+                        :label="spec.label ?? field"
+                    />
+                    <q-input
+                        v-if="spec.type === 'date'"
+                        v-model="spec.value"
+                        :label="spec.label ?? field"
+                        type="date"
+                        :hint="spec.hint"
+                    />
+                    <q-input
+                        v-if="spec.type === 'time'"
+                        v-model="spec.value"
+                        :label="spec.label ?? field"
+                        type="time"
+                        :hint="spec.hint"
                     />
                     <q-select
                         v-if="spec.type === 'select'"
                         v-model="spec.value"
                         :options="spec.options"
-                        :label="field"
+                        :label="spec.label ?? field"
+                        :hint="spec.hint"
                     />
                     <qx-input-autocomplete
                         v-if="spec.type === 'autocomplete'"
                         v-model="spec.value"
                         :autocomplete="spec.options"
-                        :label="field"
+                        :label="spec.label ?? field"
+                        :hint="spec.hint"
+                        :no-filter="spec.noFilter"
+                        :immediate="spec.immediate"
                     />
                 </div>
                 <div
@@ -68,7 +88,7 @@
 
 <script lang="ts" setup>
 import { useDialogPluginComponent } from 'quasar'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 
 defineEmits([...useDialogPluginComponent.emits])
 
@@ -77,20 +97,37 @@ const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
 
 type row = Record<string, string | number | boolean>
 
-type prefill = Record<
+export type prefill = Record<
     string,
-    | { type: 'string'; value: string }
-    | { type: 'number'; value: number }
-    | { type: 'boolean'; value: boolean }
-    | { type: 'select'; value: string; options: string[] }
-    | { type: 'autocomplete'; value: string; options: string[] }
+    | { type: 'string'; value: string; label?: string; hint?: string }
+    | { type: 'number'; value: number; label?: string; hint?: string }
+    | { type: 'boolean'; value: boolean; label?: string }
+    | { type: 'date'; value: string; label?: string; hint?: string }
+    | { type: 'time'; value: string; label?: string; hint?: string }
+    | {
+          type: 'select'
+          value: string
+          options: string[]
+          label?: string
+          hint?: string
+      }
+    | {
+          type: 'autocomplete'
+          value: string
+          options: string[]
+          label?: string
+          hint?: string
+          noFilter?: boolean
+          immediate?: boolean
+      }
 >
 
-const { title, message, prefill, validators } = defineProps<{
+const { title, message, prefill, validators, onChange } = defineProps<{
     title: string
     message: string
     prefill: prefill
     validators: [(_: row) => boolean, string][]
+    onChange: (current: prefill, old: prefill) => void
 }>()
 
 const content = reactive(JSON.clone(prefill))
@@ -103,4 +140,9 @@ function err(): false | string {
     }
     return false
 }
+
+watch(
+    () => JSON.stringify(content),
+    (newbie, oldie) => onChange(content, JSON.parse(oldie))
+)
 </script>

package/src/templates/src/utils/dialog/custom/dialogRadioText.vue

@@ -0,0 +1,77 @@
+<template>
+    <q-dialog
+        ref="dialogRef"
+        @hide="onDialogHide"
+    >
+        <q-card style="width: 400px">
+            <q-card-section>
+                <p class="text-h6">{{ title }}</p>
+                <p v-html="message" />
+                <div style="max-height: 340px; overflow-y: auto">
+                    <div v-for="item in items">
+                        <q-radio
+                            v-model="select"
+                            :val="item"
+                            :label="item"
+                        />
+                    </div>
+                    <div class="row q-pr-md">
+                        <q-radio
+                            class="col-auto"
+                            v-model="select"
+                            :val="add"
+                        />
+                        <q-input
+                            class="col"
+                            v-model="add"
+                            :label="newLabel"
+                            dense
+                        />
+                    </div>
+                </div>
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <q-btn
+                    label="Cancel"
+                    flat
+                    @click="onDialogCancel"
+                />
+                <q-btn
+                    label="OK"
+                    flat
+                    @click="onDialogOK(select)"
+                    :disable="
+                        ![...items, add].includes(select) || !isValid(select)
+                    "
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useDialogPluginComponent } from 'quasar'
+import { ref, watch } from 'vue'
+
+defineEmits([...useDialogPluginComponent.emits])
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+    useDialogPluginComponent()
+
+const props = defineProps<{
+    title: string
+    message: string
+    items: string[]
+    prefill: string
+    newLabel: string
+    isValid: (_: string) => boolean
+}>()
+
+let select = ref(props.prefill)
+let add = ref('')
+
+watch(add, () => {
+    select.value = add.value
+})
+</script>

package/src/templates/src/utils/dialog/custom/dialogTable.vue

@@ -25,6 +25,7 @@
                         v-model="dummy"
                         :sample="sample"
                         :allowAddRow="allowAddRow"
+                        :headersMap="headersMap"
                         v-if="exist"
                     ></handson>
                 </q-card>
@@ -83,6 +84,7 @@ const {
     arrayValidators,
     cancel,
     allowAddRow,
+    headersMap,
 } = defineProps<{
     title: string
     message: string
@@ -92,6 +94,7 @@ const {
     arrayValidators: [(_: row[]) => boolean, string][]
     cancel: boolean
     allowAddRow: boolean
+    headersMap: Record<string, string>
 }>()
 
 // delay render

package/src/templates/src/utils/dialog/custom/handson.vue

@@ -7,7 +7,7 @@
         width="100%"
         stretchH="all"
         :data="content"
-        :colHeaders="Object.keys(sample)"
+        :colHeaders="Object.keys(sample).map($ => headersMap[$] ?? $)"
         :columns="columns()"
         :rowHeaders="true"
         :afterChange="shake"
@@ -40,9 +40,10 @@ const content = defineModel<Record<string, string | number | boolean>[]>({
     required: true,
 })
 
-const { sample, allowAddRow } = defineProps<{
+const { sample, allowAddRow, headersMap } = defineProps<{
     sample: Record<string, string | number | boolean>
     allowAddRow: boolean
+    headersMap: Record<string, string>
 }>()
 
 function columns() {

package/src/templates/src/utils/dialog/custom_base.ts

@@ -0,0 +1,16 @@
+import { Dialog, QDialogOptions } from 'quasar'
+import type { Component } from 'vue'
+
+export async function base(component: Component, props: any) {
+    return new Promise<any>((resolve, reject) =>
+        Dialog.create({
+            component,
+            componentProps: {
+                persistent: true,
+                ...props,
+            },
+        })
+            .onOk((data: any) => resolve(data))
+            .onCancel(() => reject('dialog cancelled by user.'))
+    )
+}

package/src/templates/src/utils/dialog/form.ts

@@ -0,0 +1,75 @@
+import dialogForm from './custom/dialogForm.vue'
+import { base } from './custom_base'
+
+type FormPrefill = Record<
+    string,
+    | string
+    | number
+    | boolean
+    | { type: 'string'; value: string; label?: string; hint?: string }
+    | { type: 'number'; value: number; label?: string; hint?: string }
+    | { type: 'boolean'; value: boolean; label?: string }
+    | { type: 'date'; value: string; label?: string; hint?: string }
+    | { type: 'time'; value: string; label?: string; hint?: string }
+    | {
+          type: 'select'
+          value: string
+          options: string[]
+          label?: string
+          hint?: string
+      }
+    | {
+          type: 'autocomplete'
+          value: string
+          options: string[]
+          label?: string
+          hint?: string
+          noFilter?: boolean
+          immediate?: boolean
+      }
+>
+
+type FormPrefillStandard<T extends FormPrefill> = {
+    [P in keyof T]: T[P] extends object
+        ? T[P]
+        : T[P] extends string
+        ? { type: 'string'; value: string; label?: string; hint?: string }
+        : T[P] extends number
+        ? { type: 'number'; value: number; label?: string; hint?: string }
+        : T[P] extends boolean
+        ? { type: 'boolean'; value: boolean; label?: string }
+        : never
+}
+
+type FormFlat<T extends FormPrefill> = {
+    [P in keyof T]: T[P] extends object ? T[P]['value'] : T[P]
+}
+
+/**
+ * Ask for an objects.
+ */
+export async function askForm<T extends FormPrefill>(
+    title: string,
+    message: string,
+    prefill: T,
+    validators: [(_: FormFlat<T>) => boolean, string][] = [[$ => true, '']],
+    onChange: (
+        current: FormPrefillStandard<T>,
+        old: FormPrefillStandard<T>
+    ) => void = (c, o) => {}
+): Promise<FormFlat<T>> {
+    const standardPrefill = Object.mapValues(prefill, $ => {
+        if (typeof $ === 'string') return { type: 'string', value: $ }
+        if (typeof $ === 'number') return { type: 'number', value: $ }
+        if (typeof $ === 'boolean') return { type: 'boolean', value: $ }
+        return $
+    })
+
+    return await base(dialogForm, {
+        title,
+        message,
+        prefill: standardPrefill,
+        validators,
+        onChange,
+    })
+}

package/src/templates/src/utils/dialog/index.ts

@@ -1,4 +1,5 @@
 import * as basic from './basic'
 import * as advanced from './advanced'
+import * as form from './form'
 
-export const qDialog = { ...basic, ...advanced }
+export const qDialog = { ...basic, ...advanced, ...form }