@d-mok/quasar-app-extension-quasar-axe 2.1.96 → 2.1.98

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "2.1.96",
+    "version": "2.1.98",
     "description": "A Quasar App Extension",
     "author": "d-mok <49301824+d-mok@users.noreply.github.com>",
     "license": "MIT",
@@ -28,8 +28,7 @@
         "mime-types": "^2.1.35",
         "papaparse": "^5.4.1",
         "sapphire-js": "^2.1.9",
-        "sortablejs": "^1.15.0",
-        "vuedraggable": "^4.1.0"
+        "sortablejs": "^1.15.0"
     },
     "devDependencies": {
         "@quasar/app-vite": "^1.7.1",

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

@@ -24,7 +24,10 @@ async function base(options: QDialogOptions): Promise<string> {
 
     return new Promise<string>((resolve, reject) =>
         Dialog.create(opt)
-            .onOk((data: unknown) => resolve(String(data)))
+            .onOk((data: unknown) => {
+                if (Array.isArray(data)) resolve(JSON.stringify(data))
+                resolve(String(data))
+            })
             .onCancel(() => reject('dialog cancelled by user.'))
     )
 }
@@ -141,7 +144,8 @@ export async function askRadio<T>(
     title: string,
     message: string = '',
     items: T[],
-    label: (string & keyof T) | Mapper<T, string> = $ => String($)
+    prefill: T = items[0],
+    label?: (string & keyof T) | Mapper<T, string>
 ): Promise<T> {
     let labelFunc = ($: any) => getLabelFunc(label)($)
     let values = items.map(labelFunc)
@@ -150,7 +154,7 @@ export async function askRadio<T>(
         title,
         message,
         options: {
-            model: '',
+            model: labelFunc(prefill),
             type: 'radio',
             items: values.map($ => ({ label: $, value: $ })),
             isValid: $ => typeof $ === 'string' && values.includes($),
@@ -159,3 +163,31 @@ export async function askRadio<T>(
 
     return items.find($ => labelFunc($) === value)!
 }
+
+/**
+ * Ask to select multiple object by a checkbox button group.
+ */
+export async function askCheckbox<T>(
+    title: string,
+    message: string = '',
+    items: T[],
+    prefill: T[] = [],
+    label?: (string & keyof T) | Mapper<T, string>
+): Promise<T[]> {
+    let labelFunc = ($: any) => getLabelFunc(label)($)
+    let values = items.map(labelFunc)
+
+    let value = await base({
+        title,
+        message,
+        options: {
+            model: prefill.map(labelFunc),
+            type: 'checkbox',
+            items: values.map($ => ({ label: $, value: $ })),
+            // isValid: $ => typeof $ === 'string' && values.includes($),
+        },
+    })
+
+    let selected: string[] = JSON.parse(value)
+    return items.filter($ => selected.includes(labelFunc($)))
+}

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

@@ -66,7 +66,6 @@ import { ref } from 'vue'
 import { toSchema, isMatchSchema, isPrimitive, clone } from './schema'
 import { unparseCSV } from '../../csv'
 import { copyToClipboard } from 'quasar'
-import { validate } from 'json-schema'
 
 defineEmits([...useDialogPluginComponent.emits])
 

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

@@ -1,66 +0,0 @@
-<template>
-    <q-markup-table
-        bordered
-        flat
-        :dense="dense"
-    >
-        <thead>
-            <tr>
-                <th style="width: 50px">#</th>
-                <th>{{ header }}</th>
-            </tr>
-        </thead>
-        <draggable
-            tag="tbody"
-            :modelValue="modelValue"
-            @update:modelValue="e => (modelValue = e)"
-            :item-key="identity"
-            :animation="200"
-            ghostClass="sortable-ghost"
-        >
-            <template #item="{ element, index }">
-                <tr style="cursor: move">
-                    <td>{{ index + 1 }}</td>
-                    <td>
-                        <b>{{ labeler(element) }}</b>
-                    </td>
-                </tr>
-            </template>
-        </draggable>
-    </q-markup-table>
-</template>
-
-<script lang="ts" setup generic="T extends Object">
-import draggable from 'vuedraggable'
-import { getLabelFunc } from '../../../utils/tool'
-
-let modelValue = defineModel<T[]>()
-
-const {
-    header,
-    label,
-    dense = false,
-} = defineProps<{
-    header: string
-    label?: (string & keyof T) | ((_: T) => string)
-    dense?: boolean
-}>()
-
-function identity($: any) {
-    return $
-}
-
-function labeler(v: any) {
-    return getLabelFunc(label)(v)
-}
-</script>
-
-<style scoped>
-.sortable-ghost {
-    opacity: 0.5;
-    background: #cbc4ff;
-}
-th {
-    text-align: left;
-}
-</style>