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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "1.0.155",
+    "version": "2.0.2",
     "description": "A Quasar App Extension",
     "author": "d-mok <49301824+d-mok@users.noreply.github.com>",
     "license": "MIT",

package/src/index.js

@@ -1,27 +1,8 @@
-function extendQuasarConf(conf, prompts, isVite) {
-    if (isVite) {
-        let boots = ['AutoRoute', 'AutoReg', 'Interceptor']
-
-        for (let b of boots) conf.boot.unshift(`axe/${b}`)
-    } else {
-        let boots = [
-            'LoadUtils',
-            'AutoRoute',
-            'RegComp',
-            'AutoReg',
-            'Interceptor',
-        ]
-
-        for (let b of boots) conf.boot.unshift(`axe/${b}`)
-    }
-
+function extendQuasarConf(conf, prompts) {
+    for (let b of ['AutoRoute', 'AutoReg', 'Interceptor'])
+        conf.boot.unshift(`axe/${b}`)
     console.log('[QuasarAxe] Config pushed Boots')
 
-    if (!isVite)
-        conf.build.transpileDependencies.push(
-            /\@d-mok\/quasar-app-extension-quasar-axe[\\/]src/
-        )
-
     conf.framework.plugins.push(
         'AppVisibility',
         'Notify',
@@ -45,8 +26,6 @@ function extendQuasarConf(conf, prompts, isVite) {
 
 module.exports = function (api) {
     api.compatibleWith('quasar', '^2.0.0')
-    // api.compatibleWith('@quasar/app', '^3.0.0')
-    api.extendQuasarConf(conf =>
-        extendQuasarConf(conf, api.prompts, api.hasVite)
-    )
+    api.compatibleWith('@quasar/app-vite', '^1.0.0')
+    api.extendQuasarConf(conf => extendQuasarConf(conf, api.prompts))
 }

package/src/install.js

@@ -1,14 +1,6 @@
 module.exports = function (api) {
     api.compatibleWith('quasar', '^2.0.0')
-    // api.compatibleWith('@quasar/app', '^3.0.0');
-
-
-
-    if (api.hasVite) {
-        api.render('./templates_vite')
-    } else {
-        api.render('./templates_webpack')
-    }
-
+    api.compatibleWith('@quasar/app-vite', '^1.0.0')
+    api.render('./templates')
     api.onExitLog('Thanks for installing quasar-axe!')
 }

package/src/{templates_vite → templates}/src/boot/axe/components/QxPlate.vue

@@ -27,6 +27,7 @@ interface Props {
     data: any // me
     modelValue: object | string | number | null // the selected one
     clickToSelect?: boolean // if selected is null, onClick will select me
+    clickToReselect?: boolean // if selected something else, onClick will select me
     clickToDeselect?: boolean // if selected is me, onClick will deselect
     hoverPale?: boolean
     hoverOutline?: boolean
@@ -41,6 +42,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
     data: {},
     clickToSelect: false,
+    clickToReselect: false,
     clickToDeselect: false,
     hoverPale: false,
     hoverOutline: false,
@@ -67,7 +69,6 @@ function onClick() {
     let selected = props.modelValue
     if (selected === null) {
         emits('clickSelectNull')
-        // if selected is empty, select me
         if (props.clickToSelect) emits('update:model-value', props.data)
     } else if (selected === props.data) {
         emits('clickSelecting')
@@ -76,6 +77,7 @@ function onClick() {
     } else {
         emits('clickSelecting')
         emits('clickSelectOther')
+        if (props.clickToReselect) emits('update:model-value', props.data)
     }
     emits('click')
 }

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

@@ -0,0 +1,205 @@
+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 { throwError } from './basic'
+import { getLabelFunc } from './tool'
+
+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.'))
+    )
+}
+
+/**
+ * Ask for a string by a text area. Allow empty.
+ */
+export async function askTextarea(
+    title: string,
+    message: string = '',
+    prefill: string = '',
+    isValid: Predicate<string> = $ => true
+): Promise<string> {
+    return await base(dialogTextarea, {
+        title,
+        message,
+        prefill,
+        isValid,
+        cancel: true,
+    })
+}
+
+/**
+ * Ask to select one object by a button group.
+ */
+export async function askBtn<T>(
+    title: string,
+    message: string = '',
+    items: T[],
+    label?: (string & keyof T) | Mapper<T, string>
+): Promise<T> {
+    return await base(dialogBtn, {
+        title,
+        message,
+        items,
+        labelFunc: getLabelFunc(label),
+        cancel: true,
+    })
+}
+
+/**
+ * Ask to select a function to run.
+ */
+export async function askFn(
+    title: string,
+    message: string,
+    funcs: Record<string, () => any>
+): Promise<string> {
+    let key = await askBtn(title, message, Object.keys(funcs))
+    await funcs[key]()
+    return key
+}
+
+/**
+ * Ask for an array of objects by table.
+ * 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,
+    message: string = '',
+    prefills: T[][],
+    isValid: Predicate<T> = $ => true
+): Promise<T[]> {
+    if (prefills.flat().length === 0)
+        throwError('Error', 'All prefills are empty array.')
+    return await base(dialogTable, {
+        title,
+        message,
+        content: prefills.find($ => $.length > 0),
+        sample: [...prefills].reverse().find($ => $.length > 0)![0],
+        isValid,
+        cancel: true,
+    })
+}
+
+/**
+ * Ask for an array of strings. Omit all empty strings.
+ */
+export async function askArray(
+    title: string,
+    message: string = '',
+    prefill: string[] = [],
+    isValid: Predicate<string> = $ => true
+): Promise<string[]> {
+    function split(s: string): string[] {
+        return s.split('\n').filter($ => $.trim() !== '')
+    }
+
+    let str: string = await base(dialogTextarea, {
+        title,
+        message,
+        prefill: prefill.join('\n'),
+        isValid: (s: string) => split(s).every(isValid),
+        cancel: true,
+    })
+
+    return split(str)
+}
+
+type FormPrefill = Record<
+    string,
+    | string
+    | number
+    | boolean
+    | { type: 'select'; 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 array of objects by CSV.
+ * Input object must have the same keys as sample.
+ */
+export async function askForm<T extends FormPrefill>(
+    title: string,
+    message: string,
+    prefill: T,
+    validator: (_: FormFlat<T>) => true | string = $ => true
+): Promise<FormFlat<T>> {
+    return await base(dialogForm, {
+        title,
+        message,
+        prefill,
+        validator,
+    })
+}
+
+/**
+ * Show a dialog with text area display.
+ */
+export async function showTextarea(
+    title: string,
+    message: string = '',
+    content: string = ''
+): Promise<void> {
+    await base(dialogTextarea, {
+        title,
+        message,
+        prefill: content,
+        isValid: ($: string) => true,
+        cancel: false,
+    })
+}
+
+/**
+ * Show a dialog with table display.
+ */
+export async function showTable(
+    title: string,
+    message: string,
+    content: object[]
+): Promise<void> {
+    if (content.length === 0) {
+        content = [{ empty: '' }]
+    }
+    await base(dialogTable, {
+        title,
+        message,
+        content,
+        sample: content[0],
+        isValid: ($: any) => true,
+        cancel: false,
+    })
+}
+
+/**
+ * Show a dialog with array display.
+ */
+export async function showArray(
+    title: string,
+    message: string = '',
+    content: unknown[] = []
+): Promise<void> {
+    await base(dialogTextarea, {
+        title,
+        message,
+        prefill: content.map($ => String($)).join('\n'),
+        isValid: ($: string) => true,
+        cancel: false,
+    })
+}

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

@@ -0,0 +1,164 @@
+import { Dialog, QDialogOptions } from 'quasar'
+import { getLabelFunc } from './tool'
+
+type Predicate<T> = (_: T) => boolean
+type Mapper<T, S> = (_: T) => S
+
+async function base(options: QDialogOptions): Promise<string> {
+    let { prompt, ...rest } = options
+
+    let opt: QDialogOptions = {
+        persistent: true,
+        cancel: true,
+        ok: true,
+        html: true,
+        prompt: {
+            model: '',
+            outlined: true,
+            ...prompt,
+        },
+        ...rest,
+    }
+
+    if (options.prompt === undefined) delete opt.prompt
+
+    return new Promise<string>((resolve, reject) =>
+        Dialog.create(opt)
+            .onOk((data: unknown) => resolve(String(data)))
+            .onCancel(() => reject('dialog cancelled by user.'))
+    )
+}
+
+/**
+ * Show a dialog with only the OK button.
+ */
+export async function info(title: string, message: string = ''): Promise<void> {
+    await base({
+        title,
+        message,
+        cancel: false,
+    })
+}
+
+/**
+ * Show a confirm dialog.
+ * If OK, continue. If cancel, throw error.
+ */
+export async function confirm(
+    title: string,
+    message: string = ''
+): Promise<void> {
+    await base({
+        title,
+        message,
+    })
+}
+
+/**
+ * Show an error dialog with only the OK button.
+ */
+export async function error(
+    title: string,
+    message: string = ''
+): Promise<void> {
+    await base({
+        title,
+        message,
+        color: 'red',
+        cancel: false,
+    })
+}
+
+/**
+ * Show an error dialog with only the OK button.
+ * Throw an error at the same time.
+ */
+export function throwError(title: string, message: string = ''): never {
+    error(title, message)
+    throw 'dialog throw an intended error.'
+}
+
+/**
+ * Ask for a string by a simple text field. Allow empty input.
+ */
+export async function ask(
+    title: string,
+    message: string = '',
+    prefill: string = '',
+    isValid: Predicate<string> = $ => true
+): Promise<string> {
+    return base({
+        title,
+        message,
+        prompt: {
+            model: prefill,
+            type: 'text',
+            isValid,
+        },
+    })
+}
+
+/**
+ * Ask for a string by a simple text field. Not accept empty input.
+ */
+export async function askText(
+    title: string,
+    message: string = '',
+    prefill: string = '',
+    isValid: Predicate<string> = $ => true
+): Promise<string> {
+    return await ask(title, message, prefill, $ => isValid($) && $.length > 0)
+}
+
+/**
+ * Ask for a number by a simple text field. Not allow empty input.
+ */
+export async function askNum(
+    title: string,
+    message: string = '',
+    prefill: number = 0,
+    isValid: Predicate<number> = $ => true
+): Promise<number> {
+    let str = await base({
+        title,
+        message,
+        prompt: {
+            model: String(prefill),
+            type: 'number',
+            isValid: $ =>
+                $.length > 0 &&
+                Number.isFinite(Number($)) &&
+                isValid(Number($)),
+        },
+    })
+    return Number(str)
+}
+
+/**
+ * Ask to select one object by a radio button group. Must select exactly one object.
+ */
+export async function askRadio<T>(
+    title: string,
+    message: string = '',
+    items: T[],
+    label?: (string & keyof T) | Mapper<T, string>
+): Promise<T> {
+    let labelFunc = getLabelFunc(label)
+    let values = items.map(labelFunc)
+
+    let value = await base({
+        title,
+        message,
+        options: {
+            model: '',
+            type: 'radio',
+            items: items.map($ => ({
+                label: labelFunc($),
+                value: labelFunc($),
+            })),
+            isValid: $ => typeof $ === 'string' && values.includes($),
+        },
+    })
+
+    return items.find($ => labelFunc($) === value)!
+}

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

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

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

@@ -0,0 +1,11 @@
+type Labeler<T> = (string & keyof T) | ((_: T) => string)
+
+export function getLabelFunc<T>(labeler?: Labeler<T>) {
+    if (typeof labeler === 'string') {
+        return ($: T) => String($[labeler])
+    }
+    if (typeof labeler === 'function') {
+        return labeler
+    }
+    return ($: T) => String($)
+}

package/src/{templates_vite → templates}/src/utils/index.ts

@@ -1,5 +1,5 @@
 export { qDialog } from './dialog'
-export { qNotify } from './notify'
+export * as qNotify from './notify'
 
 export { Sheet, List } from 'sapphire-js'
 

package/src/templates/src/utils/notify.ts

@@ -0,0 +1,35 @@
+import { Notify } from 'quasar'
+
+function base(
+    message: string,
+    type: 'positive' | 'negative' | 'warning' | 'info' | 'ongoing'
+) {
+    Notify.create({
+        message: message,
+        progress: true,
+        type: type,
+    })
+}
+
+export function toast(message: string): void {
+    base(message, 'positive')
+}
+
+export function error(message: string): void {
+    base(message, 'negative')
+}
+
+export function warn(message: string): void {
+    base(message, 'warning')
+}
+
+export function info(message: string): void {
+    base(message, 'info')
+}
+
+export function load(loadingMsg = 'Loading...'): () => void {
+    return Notify.create({
+        type: 'ongoing',
+        message: loadingMsg,
+    }) as () => void
+}

package/src/{templates_vite → templates}/src/utils/puppets/builder/ui.ts

@@ -1,5 +1,5 @@
-import { qDialog } from '../../dialog'
-import { qNotify } from '../../notify'
+import { qDialog } from '../..'
+import { qNotify } from '../..'
 import { LoadingBar } from 'quasar'
 
 

package/src/{templates_vite → templates}/src/utils/settings.ts

@@ -1,15 +1,14 @@
-
 import { reactive, effect } from '@vue/reactivity'
 
-
-
 function getFromLocal<T extends object>(key: string): T {
     let val = localStorage.getItem(key)
     return val === null ? {} : JSON.parse(val)
 }
 
-
-export function localSettings<T extends object>(preset: T, localStorageKey = 'settings'): T {
+export function localSettings<T extends object>(
+    preset: T,
+    localStorageKey = 'settings'
+): T {
     let ss = reactive({ ...preset, ...getFromLocal<T>(localStorageKey) })
     effect(() => {
         localStorage.setItem('settings', JSON.stringify(ss))
@@ -19,4 +18,3 @@ export function localSettings<T extends object>(preset: T, localStorageKey = 'se
     })
     return ss as T
 }
-