@d-mok/quasar-app-extension-quasar-axe 3.1.64 → 3.1.67

package/package.json

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

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

@@ -19,8 +19,11 @@ type PropType<C extends VueComponent> = Omit<
 >
 type OkType<C extends VueComponent> = Parameters<InstanceType<C>['$emit']>[1]
 
-export async function base(component: Component, props: any) {
-    return new Promise<any>((resolve, reject) =>
+export async function custom<C extends VueComponent>(
+    component: C,
+    props?: PropType<C>
+): Promise<OkType<C>> {
+    return new Promise<OkType<C>>((resolve, reject) =>
         Dialog.create({
             component,
             componentProps: {
@@ -28,18 +31,11 @@ export async function base(component: Component, props: any) {
                 ...props,
             },
         })
-            .onOk((data: any) => resolve(data))
+            .onOk(resolve)
             .onCancel(() => reject('dialog cancelled by user.'))
     )
 }
 
-export async function custom<C extends VueComponent>(
-    component: C,
-    props?: PropType<C>
-): Promise<OkType<C>> {
-    return await base(component, props ?? {})
-}
-
 /**
  * Ask for a string by a text area. Allow empty.
  */
@@ -49,7 +45,7 @@ export async function askTextarea(
     prefill: string = '',
     isValid: Predicate<string> = $ => true
 ): Promise<string> {
-    return await base(dialogTextarea, {
+    return await custom(dialogTextarea, {
         title,
         message,
         prefill,
@@ -67,12 +63,11 @@ export async function askBtn<T>(
     items: T[],
     label?: (string & keyof T) | Mapper<T, string>
 ): Promise<T> {
-    return await base(dialogBtn, {
+    return await custom(dialogBtn, {
         title,
         message,
         items,
         labelFunc: ($: T) => Object.print($, label),
-        cancel: true,
     })
 }
 
@@ -94,7 +89,9 @@ export async function askFn(
  * The first non-empty prefill will be used.
  * The last non-empty prefill will be the spec.
  */
-export async function askTable<T extends object>(
+export async function askTable<
+    T extends Record<string, string | number | boolean>
+>(
     title: string,
     message: string = '',
     prefills: T[][],
@@ -102,43 +99,17 @@ export async function askTable<T extends object>(
     arrayValidators: [(_: T[]) => boolean, string][] = [[$ => true, '']],
     headersMap: Record<string, string> = {}
 ): Promise<T[]> {
-    if (prefills.flat().length === 0)
-        throwError('Error', 'All prefills are empty array.')
-    return await base(dialogTable, {
+    const ps = prefills.unmatch($ => $.length === 0)
+    if (ps.length === 0) throwError('Error', 'All prefills are empty array.')
+    return await custom(dialogTable, {
         title,
         message,
-        content: prefills.find($ => $.length > 0),
-        sample: [...prefills].reverse().find($ => $.length > 0)![0],
-        validators,
-        arrayValidators,
+        content: ps[0]!,
+        sample: ps.at(-1)![0]!,
+        validators: validators as any,
+        arrayValidators: arrayValidators as any,
         headersMap,
         cancel: true,
-        allowAddRow: true,
-    })
-}
-
-/**
- * Edit an array of objects by table.
- */
-export async function editTable<T extends object>(
-    title: string,
-    message: string = '',
-    prefill: T[],
-    validators: [(_: 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, {
-        title,
-        message,
-        content: prefill,
-        sample: prefill[0],
-        validators,
-        arrayValidators,
-        headersMap,
-        cancel: true,
-        allowAddRow: false,
     })
 }
 
@@ -170,7 +141,7 @@ export async function showTextarea(
     message: string = '',
     content: string = ''
 ): Promise<void> {
-    await base(dialogTextarea, {
+    await custom(dialogTextarea, {
         title,
         message,
         prefill: content,
@@ -185,21 +156,20 @@ export async function showTextarea(
 export async function showTable(
     title: string,
     message: string,
-    content: object[]
+    content: Record<string, string | number | boolean>[]
 ): Promise<void> {
     if (content.length === 0) {
         content = [{ empty: '' }]
     }
-    await base(dialogTable, {
+    await custom(dialogTable, {
         title,
         message,
         content,
-        sample: content[0],
+        sample: content[0]!,
         validators: [[($: any) => true, '']],
         arrayValidators: [[($: any) => true, '']],
         headersMap: {},
         cancel: false,
-        allowAddRow: false,
     })
 }
 
@@ -209,7 +179,7 @@ export async function showTable(
 export async function showArray(
     title: string,
     message: string = '',
-    content: unknown[] = []
+    content: (string | number)[] = []
 ): Promise<void> {
     await showTable(
         title,
@@ -225,7 +195,7 @@ export async function askFile(
     title: string,
     message: string = ''
 ): Promise<File> {
-    return await base(dialogFile, {
+    return await custom(dialogFile, {
         title,
         message,
         multiple: false,
@@ -240,7 +210,7 @@ export async function askFiles(
     title: string,
     message: string = ''
 ): Promise<File[]> {
-    return await base(dialogFile, {
+    return await custom(dialogFile, {
         title,
         message,
         multiple: true,
@@ -259,14 +229,13 @@ export async function askRadioText(
     newPlaceholder: string = '',
     isValid: Predicate<string> = $ => true
 ): Promise<string> {
-    return await base(dialogRadioText, {
+    return await custom(dialogRadioText, {
         title,
         message,
         items,
         prefill,
         newPlaceholder,
         isValid,
-        cancel: true,
     })
 }
 
@@ -281,14 +250,13 @@ export async function askCheckboxText(
     newPlaceholder: string = '',
     isValid: Predicate<string[]> = $ => true
 ): Promise<string[]> {
-    return await base(dialogCheckboxText, {
+    return await custom(dialogCheckboxText, {
         title,
         message,
         items,
         prefill,
         newPlaceholder,
         isValid,
-        cancel: true,
     })
 }
 
@@ -360,11 +328,15 @@ export async function askForm<T extends FormPrefill>(
         return $
     })
 
-    return await base(dialogForm, {
+    const output = await custom(dialogForm, {
         title,
         message,
-        prefill: standardPrefill,
-        validators,
-        onChange,
+        prefill: standardPrefill as any,
+        validators: validators as any,
+        onChange: onChange as any,
     })
+
+    return Object.mapValues(output, v =>
+        typeof v === 'string' ? v.trim() : v
+    ) as any
 }

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

@@ -24,16 +24,14 @@
                     <handson
                         v-model="dummy"
                         :sample="sample"
-                        :allowAddRow="allowAddRow"
                         :headersMap="headersMap"
                         v-if="exist"
                     ></handson>
                 </q-card>
                 <div
-                    v-show="err()"
+                    v-if="err"
                     class="text-red"
-                    style="text-align: right"
-                    v-html="err()"
+                    v-html="err.join('<br/>')"
                 />
             </q-card-section>
 
@@ -53,7 +51,7 @@
                     label="OK"
                     flat
                     @click="onDialogOK(filterBlank(dummy))"
-                    :disable="cancel && err() !== false"
+                    :disable="cancel && err !== false"
                 />
             </q-card-actions>
         </q-card>
@@ -63,7 +61,7 @@
 <script lang="ts" setup>
 import handson from './handson.vue'
 import { useDialogPluginComponent } from 'quasar'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { clone } from './schema'
 import { copyToClipboard } from 'quasar'
 import * as v from 'valibot'
@@ -83,7 +81,6 @@ const {
     validators,
     arrayValidators,
     cancel,
-    allowAddRow,
     headersMap,
 } = defineProps<{
     title: string
@@ -93,7 +90,6 @@ const {
     validators: [(_: row) => boolean, string][]
     arrayValidators: [(_: row[]) => boolean, string][]
     cancel: boolean
-    allowAddRow: boolean
     headersMap: Record<string, string>
 }>()
 
@@ -125,40 +121,39 @@ const EmptySchema = v.strictObject(
     })
 )
 
-function err(): string | false {
+const err = computed(() => {
     let rows = dummy.value
 
-    for (let i = 0; i < rows.length; i++) {
-        let row = rows[i]!
+    for (let i = 1; i <= rows.length; i++) {
+        let row = rows[i - 1]!
         if (v.is(EmptySchema, row)) continue
 
         if (!v.is(StandardSchema, row)) {
             if (Object.keys(row).length > Object.keys(sample).length) {
-                return `row ${i + 1} has extra column`
+                return [`#${i} has extra column`]
             }
-            return (
-                `row ${i + 1} required format:<br/>` +
-                Object.entries(sample)
-                    .map(([k, v]) => `${k}: ${v}`)
-                    .join('<br/>')
-            )
+            return [
+                `#${i} require format:`,
+                ...Object.entries(sample).map(
+                    ([k, v]) => `${headersMap[k] ?? k}: ${v}`
+                ),
+            ]
         }
 
         for (let [f, msg] of validators) {
-            if (!f(row)) return `row ${i + 1}:<br/>` + msg
+            if (!f(row)) return [`#${i}:`, msg]
         }
     }
 
     for (let [f, msg] of arrayValidators) {
         if (!f(filterBlank(rows))) {
-            return msg
+            return [msg]
         }
     }
     return false
-}
+})
 
 function filterBlank(rows: row[]): row[] {
-    if (!allowAddRow) return rows
     return rows.unmatch(r => v.is(EmptySchema, r))
 }
 
@@ -172,7 +167,7 @@ function copy() {
 const TOTAL_WIDTH =
     200 +
     Object.values(
-        [...content, Object.mapValues(sample, (v, k) => k)]
+        [...content, Object.mapValues(sample, (v, k) => headersMap[k] ?? k)]
             .map(r => Object.mapValues(r, v => v.toString().length))
             .reduce((acc, obj) => {
                 for (const key in acc) {

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

@@ -7,16 +7,24 @@
         width="100%"
         stretchH="all"
         :data="content"
+        :dataSchema="
+            Object.mapValues(sample, val =>
+                typeof val === 'boolean'
+                    ? false
+                    : typeof val === 'number'
+                    ? NaN
+                    : ''
+            )
+        "
         :colHeaders="Object.keys(sample).map($ => headersMap[$] ?? $)"
         :columns="columns()"
         :rowHeaders="true"
+        :rowHeaderWidth="50"
         :afterChange="shake"
-        :afterRemoveRow="afterRemoveRow"
         :afterCreateRow="shake"
+        :afterRemoveRow="shake"
         :afterCopy="afterCopy"
-        :contextMenu="
-            allowAddRow ? ['row_above', 'row_below', 'remove_row'] : []
-        "
+        :contextMenu="['row_above', 'row_below', 'remove_row']"
     />
 </template>
 
@@ -24,7 +32,9 @@
 import { ref } from 'vue'
 import { HotTable } from '@handsontable/vue3'
 import { registerAllModules } from 'handsontable/registry'
-import type Handsontable from 'handsontable'
+import Handsontable from 'handsontable'
+
+type row = Record<string, string | number | boolean>
 
 registerAllModules()
 
@@ -32,20 +42,45 @@ registerAllModules()
 
 let hotTableComponent = ref<InstanceType<typeof HotTable> | null>(null)
 
-function getInstance(): Handsontable {
+function hot(): Handsontable {
     return hotTableComponent.value.hotInstance
 }
 
-const content = defineModel<Record<string, string | number | boolean>[]>({
-    required: true,
-})
+const content = defineModel<row[]>({ required: true })
 
-const { sample, allowAddRow, headersMap } = defineProps<{
-    sample: Record<string, string | number | boolean>
-    allowAddRow: boolean
+const { sample, headersMap } = defineProps<{
+    sample: row
     headersMap: Record<string, string>
 }>()
 
+function numericRenderer(
+    instance: Handsontable.Core,
+    td: HTMLTableCellElement,
+    row: number,
+    col: number,
+    prop: string | number,
+    value: any,
+    cellProperties: Handsontable.CellProperties
+) {
+    Handsontable.renderers.NumericRenderer(
+        instance,
+        td,
+        row,
+        col,
+        prop,
+        value,
+        cellProperties
+    )
+
+    const isInvalid = value === null || value === undefined || isNaN(value)
+
+    if (isInvalid) {
+        td.innerText = ''
+        const isBlankRow = instance.getDataAtRow(row).belongs(['', false, NaN])
+        if (!isBlankRow) td.style.backgroundColor = '#ffbeba'
+    }
+}
+
 function columns() {
     return Object.entries(sample).map(([field, val]) => ({
         data: field,
@@ -56,30 +91,29 @@ function columns() {
                 ? 'numeric'
                 : 'text',
         allowEmpty: false,
+        renderer: typeof val === 'number' ? numericRenderer : undefined,
     }))
 }
 
-function coerceString(x: any): string {
-    if (x === null) return ''
-    if (x === undefined) return ''
-    return String(x).replaceAll(String.fromCodePoint(0x00a0), ' ')
-}
+function shake(): void {
+    function coerceString(x: any): string {
+        if (x === null) return ''
+        if (x === undefined) return ''
+        return String(x).replaceAll(String.fromCodePoint(0x00a0), ' ').trim()
+    }
 
-function coerceNumber(x: any): number {
-    if (typeof x !== 'number') return NaN
-    return Number(x)
-}
+    function coerceNumber(x: any): number {
+        if (typeof x !== 'number') return NaN
+        return Number(x)
+    }
 
-function coerceBoolean(x: any): boolean {
-    if (typeof x === 'boolean') return x
-    if (x === 'true') return true
-    if (x === 'false') return false
-    if (x === 'TRUE') return true
-    if (x === 'FALSE') return false
-    return false
-}
+    function coerceBoolean(x: any): boolean {
+        if (typeof x === 'boolean') return x
+        if (x === 'true') return true
+        if (x === 'TRUE') return true
+        return false
+    }
 
-function shake(): void {
     const keys = Object.keys(sample)
     for (let row of content.value) {
         for (let [k, v] of Object.entries(row)) {
@@ -90,18 +124,15 @@ function shake(): void {
             if (!keys.includes(k)) delete row[k]
         }
     }
-}
 
-function afterRemoveRow() {
-    // avoid no row
-    let hot = getInstance()
-    if (hot.countRows() === 0) {
-        hot.alter('insert_row_above', 1)
+    const lastRow = content.value.at(-1)
+
+    if (!lastRow || !Object.values(lastRow).belongs(['', false, NaN])) {
+        const h = hot()
+        h.alter('insert_row_below', null as any, 1)
     }
 }
 
-// aftercopy
-
 async function afterCopy(data: (string | number | boolean)[][], coords: any) {
     // fix pasting space as non break space problem
     let text = data.map(r => r.join('\t')).join('\n')