@d-mok/quasar-app-extension-quasar-axe 2.0.3 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "2.0.3",
+    "version": "2.0.6",
     "description": "A Quasar App Extension",
     "author": "d-mok <49301824+d-mok@users.noreply.github.com>",
     "license": "MIT",
@@ -16,11 +16,13 @@
     "dependencies": {
         "@handsontable/vue3": "^12.1.0",
         "@supabase/supabase-js": "^1.35.4",
+        "@types/lodash": "^4.14.182",
         "@types/papaparse": "^5.3.2",
         "@types/webpack-env": "^1.17.0",
         "@vueuse/core": "^9.1.0",
         "handsontable": "^12.1.0",
         "jszip": "^3.9.0",
+        "lodash": "^4.17.21",
         "papaparse": "^5.3.2",
         "sapphire-js": "^1.0.67",
         "vuedraggable": "^4.1.0"

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

@@ -0,0 +1,60 @@
+<template>
+    <q-select
+        v-model="selected"
+        :options="options"
+        :option-label="optionLabel"
+        v-bind="$attrs"
+    />
+</template>
+
+<script
+    lang="ts"
+    setup
+>
+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: $ => String($),
+        ticker: 0,
+    }
+)
+const emits = defineEmits(['update:modelValue'])
+
+const selected = useVModel(props, 'modelValue', emits)
+
+function select(i: number) {
+    i = _.clamp(i, 0, props.options.length - 1)
+    selected.value = props.options[i]
+}
+
+function rePick() {
+    if (props.options.length === 0) return
+    if (!props.options.includes(selected.value)) select(0)
+}
+
+rePick()
+watch(() => props.options, rePick)
+
+function getCurrentIndex(): number {
+    return props.options.findIndex($ => $ === selected.value)
+}
+
+watch(
+    () => props.ticker,
+    (now, old) => {
+        let i = getCurrentIndex()
+        if (i === -1) return
+        if (now > old) select(i + 1)
+        if (now < old) select(i - 1)
+    }
+)
+</script>

package/src/templates/src/utils/puppets/core/db.ts

@@ -1,19 +1,11 @@
-import { supabase, HANDLE_ERROR, PostgrestFilterBuilder, PostgrestSingleResponse } from '../../supabase'
+import {
+    supabase,
+    HANDLE_ERROR,
+    PostgrestFilterBuilder,
+    PostgrestSingleResponse,
+} from '../../supabase'
 import { Filter } from '../type'
-
-
-
-
-function chunk<T>(arr: T[], size: number): T[][] {
-    if (size <= 0) return []
-    let newArr = []
-    for (let i = 0; i < arr.length; i += size) {
-        newArr.push(arr.slice(i, i + size))
-    }
-    return newArr
-}
-
-
+import _ from 'lodash'
 
 async function send<R>(q: PostgrestFilterBuilder<R>): Promise<R[]> {
     let { data, error } = await q
@@ -21,73 +13,67 @@ async function send<R>(q: PostgrestFilterBuilder<R>): Promise<R[]> {
     return data
 }
 
-
-async function sendSingle<R>(q: PromiseLike<PostgrestSingleResponse<R>>): Promise<R[]> {
+async function sendSingle<R>(
+    q: PromiseLike<PostgrestSingleResponse<R>>
+): Promise<R[]> {
     let { data, error } = await q
     HANDLE_ERROR(data, error)
     return [data]
 }
 
-
-
-
-function parseFilter<R>(q: PostgrestFilterBuilder<R>, filter: Filter<R>): PostgrestFilterBuilder<R> {
+function parseFilter<R>(
+    q: PostgrestFilterBuilder<R>,
+    filter: Filter<R>
+): PostgrestFilterBuilder<R> {
     if (filter.type === 'eq') q = q.eq(filter.payload.key, filter.payload.val)
     if (filter.type === 'in') q = q.in(filter.payload.key, filter.payload.vals)
-    if (filter.type === 'like') q = q.like(filter.payload.key, filter.payload.pattern)
+    if (filter.type === 'like')
+        q = q.like(filter.payload.key, filter.payload.pattern)
     return q
 }
 
-
-function parseLimit<R>(q: PostgrestFilterBuilder<R>, filter: Filter<R>): PostgrestFilterBuilder<R> {
-    if (filter.type === 'limit')
-        q = q.limit(filter.payload)
+function parseLimit<R>(
+    q: PostgrestFilterBuilder<R>,
+    filter: Filter<R>
+): PostgrestFilterBuilder<R> {
+    if (filter.type === 'limit') q = q.limit(filter.payload)
     return q
 }
 
-
-function parseOrder<R>(q: PostgrestFilterBuilder<R>, filter: Filter<R>): PostgrestFilterBuilder<R> {
+function parseOrder<R>(
+    q: PostgrestFilterBuilder<R>,
+    filter: Filter<R>
+): PostgrestFilterBuilder<R> {
     if (filter.type === 'order')
         q = q.order(filter.payload.key, { ascending: filter.payload.asc })
     return q
 }
 
-
 function parseFilters<R>(
     q: PostgrestFilterBuilder<R>,
     filters: Filter<R>[]
 ): PostgrestFilterBuilder<R> {
-    for (const filter of filters)
-        q = parseFilter(q, filter)
-    for (const filter of filters)
-        q = parseOrder(q, filter)
-    for (const filter of filters)
-        q = parseLimit(q, filter)
+    for (const filter of filters) q = parseFilter(q, filter)
+    for (const filter of filters) q = parseOrder(q, filter)
+    for (const filter of filters) q = parseLimit(q, filter)
     return q
 }
 
-
-
-
 /**
  * I am responsible for providing database operation.
  * Purely functional.
  */
 class DB {
-
     async select<R>(
         table: string,
         fields: (keyof R)[],
         filters: Filter<R>[]
     ): Promise<R[]> {
-        let q = supabase
-            .from<R>(table)
-            .select(fields.join(','))
+        let q = supabase.from<R>(table).select(fields.join(','))
         q = parseFilters(q, filters)
         return send(q)
     }
 
-
     async selectIn<R, K extends keyof R>(
         table: string,
         fields: (keyof R)[],
@@ -103,78 +89,57 @@ class DB {
             q = parseFilters(q, filters)
             return send(q)
         }
-        let promises = chunk(vals, 100).map(getRows)
+        let promises = _.chunk(vals, 100).map(getRows)
         let result = await Promise.all(promises)
         return result.flat()
     }
 
-
     async rpc<R>(
         fn: string,
         param: object,
         filters: Filter<R>[]
     ): Promise<R[]> {
-        let q = supabase
-            .rpc<R>(fn, param)
+        let q = supabase.rpc<R>(fn, param)
         q = parseFilters(q, filters)
         return send(q)
     }
 
-
-
-    async insert<R>(
-        table: string,
-        rows: Partial<R>[]
-    ): Promise<R[]> {
-        let q = supabase
-            .from<R>(table)
-            .insert(rows)
+    async insert<R>(table: string, rows: Partial<R>[]): Promise<R[]> {
+        let q = supabase.from<R>(table).insert(rows)
         return send(q)
     }
 
-
     async update<R, K extends keyof R>(
         table: string,
         idKey: K,
         idVal: R[K],
         row: Partial<R>
     ): Promise<R[]> {
-        let q = supabase
-            .from<R>(table)
-            .update(row)
-            .eq(idKey, idVal)
-            .single()
+        let q = supabase.from<R>(table).update(row).eq(idKey, idVal).single()
         return sendSingle(q)
     }
 
-
     async delete<R, K extends keyof R>(
         table: string,
         idKey: K,
         idVal: R[K]
     ): Promise<R[]> {
-        let q = supabase
-            .from<R>(table)
-            .delete()
-            .eq(idKey, idVal)
-            .single()
+        let q = supabase.from<R>(table).delete().eq(idKey, idVal).single()
         return sendSingle(q)
     }
 
-
     async upsert<R, K extends keyof R>(
         table: string,
         idKey: K,
         row: Partial<R>,
         conflictKeys: (keyof R)[]
     ): Promise<R[]> {
-
         let conflict: any = {}
         for (let f of conflictKeys) {
             conflict[f] = row[f]
         }
 
-        let q = supabase.from<R>(table).select("*").match(conflict)
+        let q = supabase.from<R>(table).select('*').match(conflict)
         let data = await send(q)
 
         if (data.length > 1)
@@ -186,11 +151,7 @@ class DB {
         } else {
             return await this.insert(table, [row])
         }
-
     }
-
-
 }
 
-
-export const db = new DB()
+export const db = new DB()

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

@@ -1,63 +0,0 @@
-<template>
-    <q-select
-        :model-value="modelValue"
-        @update:model-value="e => emits('update:modelValue', e)"
-        :options="options"
-        :option-label="optionLabel"
-        v-bind="$attrs"
-    >
-    </q-select>
-</template>
-
-<script
-    lang="ts"
-    setup
->
-import { watch } from 'vue'
-
-type Props = {
-    options: any[]
-    modelValue: any
-    optionLabel: string
-    ticker?: number
-}
-
-const props = withDefaults(defineProps<Props>(), { ticker: 0 })
-
-const emits = defineEmits(['update:modelValue'])
-
-function rePick() {
-    if (props.options.length === 0) return
-
-    if (!props.options.includes(props.modelValue))
-        emits('update:modelValue', props.options[0])
-}
-
-rePick()
-watch(
-    () => props.options,
-    () => {
-        rePick()
-    }
-)
-
-function getCurrentIndex(): number {
-    return props.options.findIndex($ => $ === props.modelValue)
-}
-
-watch(
-    () => props.ticker,
-    (now, old) => {
-        let i = getCurrentIndex()
-        if (i === -1) return
-        if (now > old) {
-            let j = Math.min(i + 1, props.options.length - 1)
-            emits('update:modelValue', props.options[j])
-        }
-        if (now < old) {
-            let j = Math.max(i - 1, 0)
-            emits('update:modelValue', props.options[j])
-        }
-    }
-)
-</script>

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

@@ -1,35 +0,0 @@
-<template>
-    <q-select
-        v-model="selected"
-        :options="options"
-        v-bind="$attrs"
-    >
-    </q-select>
-</template>
-
-<script
-    lang="ts"
-    setup
->
-import { watch } from 'vue'
-import { useVModel } from '@vueuse/core'
-
-const props = defineProps<{
-    options: string[]
-    modelValue: string
-}>()
-
-const emits = defineEmits(['update:modelValue'])
-
-const selected = useVModel(props, 'modelValue', emits)
-
-function rePick() {
-    if (props.options.length === 0) return
-
-    if (!props.options.includes(selected.value))
-        selected.value = props.options[0]
-}
-
-rePick()
-watch(() => props.options, rePick)
-</script>