@d-mok/quasar-app-extension-quasar-axe 3.1.68 → 3.1.71

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "3.1.68",
+    "version": "3.1.71",
     "description": "A Quasar App Extension",
     "main": "src/index.js",
     "scripts": {
@@ -8,25 +8,25 @@
     },
     "dependencies": {
         "@handsontable/vue3": "^15.2.0",
-        "@supabase/supabase-js": "^2.74.0",
+        "@supabase/supabase-js": "^2.89.0",
         "@types/lodash": "^4.17.20",
         "@types/webpack-env": "^1.18.8",
-        "@vueuse/core": "^13.7.0",
-        "@vueuse/integrations": "^13.7.0",
-        "@vueuse/router": "^13.7.0",
+        "@vueuse/core": "^14.1.0",
+        "@vueuse/integrations": "^14.1.0",
+        "@vueuse/router": "^14.1.0",
         "handsontable": "^15.2.0",
         "jszip": "^3.10.1",
         "lodash": "^4.17.21",
-        "sapphire-js": "^2.1.49",
+        "sapphire-js": "^2.1.50",
         "sortablejs": "^1.15.6",
-        "valibot": "^1.1.0"
+        "valibot": "^1.2.0"
     },
     "devDependencies": {
-        "@quasar/app-vite": "^2.3.0",
+        "@quasar/app-vite": "^2.4.0",
         "@quasar/extras": "^1.17.0 ",
-        "@types/node": "^24.3.0",
-        "core-js": "^3.45.0",
-        "quasar": "^2.18.2",
+        "@types/node": "^25.0.3",
+        "core-js": "^3.47.0",
+        "quasar": "^2.18.6",
         "typescript": "^5.9.2",
         "vue": "^3.5.18"
     },

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

@@ -4,7 +4,7 @@ import './extension'
 export { qDialog } from './dialog'
 export * as qNotify from './notify'
 
-export { HANDLE_ERROR, handleThrow, supabase } from './supabase'
+export { handleError, supabase } from './supabase'
 
 export { ORM } from './puppets'
 

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

@@ -1,20 +1,23 @@
-import {
-    DeleteBuilder,
-    InsertBuilder,
-    SelectBuilder,
-    SelectInBuilder,
-    SelectRPCBuilder,
-    UpdateBuilder,
-    UpsertBuilder,
-} from './builder'
-import { Constructor, Key, BooleanKeys } from './type'
-import { Core } from './core'
 import { reactive } from 'vue'
+import { supabase, handleError } from '../supabase'
+import { qDialog, qNotify } from '..'
+import { LoadingBar } from 'quasar'
+
+import type { PostgrestFilterBuilder } from '@supabase/postgrest-js'
+
+type Constructor<T extends object = {}> = new (...args: any[]) => T
+
+type BooleanKeys<T> = {
+    [k in keyof T]: T[k] extends boolean ? k : never
+}[keyof T]
+// type OnlyBoolean<T> = { [k in BooleanKeys<T>]: boolean }
+
+type Key<R> = string & keyof R
 
 export function ORM<
     RBase extends Constructor,
-    K extends Key<InstanceType<RBase>>
->(RClass: RBase, tableName: string, idKey: K) {
+    IdK extends Key<InstanceType<RBase>>
+>(RClass: RBase, tableName: string, idKey: IdK) {
     type R = InstanceType<RBase>
 
     class E extends RClass {
@@ -27,18 +30,26 @@ export function ORM<
             this._hostTable = hostTable
         }
 
-        update(this: E & R, row: Partial<R>) {
-            return this._hostTable!.update(this[idKey], row)
+        async update(
+            this: E & R,
+            row: Partial<R>,
+            options?: uiOptions
+        ): Promise<void> {
+            this._hostTable!.update(this[idKey], row, options)
         }
 
-        delete(this: E & R) {
-            return this._hostTable!.delete(this[idKey])
+        async delete(this: E & R, options?: uiOptions): Promise<void> {
+            this._hostTable!.delete(this[idKey], options)
         }
 
-        toggle(this: E & R, key: BooleanKeys<R>) {
-            let val = !this[key]
-            let obj = { [key]: val } as Partial<R>
-            return this._hostTable!.update(this[idKey], obj)
+        async toggle(
+            this: E & R,
+            key: BooleanKeys<R>,
+            options?: uiOptions
+        ): Promise<void> {
+            const val = !this[key]
+            const obj = { [key]: val } as Partial<R>
+            this._hostTable!.update(this[idKey], obj, options)
         }
 
         toPlain(): R {
@@ -51,21 +62,11 @@ export function ORM<
     function getTable<EBase extends RBase>(EClass: EBase) {
         type T = InstanceType<EBase>
 
-        function convertor(host: TableClass) {
-            return ($: R) => new EClass($, host) as T
-        }
+        const fields = Object.keys(new RClass()).join(',') as '*'
 
-        function core(host: TableClass) {
-            return new Core<T, R>(
-                tableName,
-                idKey,
-                Object.keys(new RClass()) as Key<R>[],
-                convertor(host)
-            )
-        }
+        type Filter = PostgrestFilterBuilder<any, any, R, any>
 
         class TableClass extends Array<InstanceType<EBase>> {
-            /** make reactive */
             reactive(): this {
                 const rec = reactive(this) as this
                 if (process.env.DEBUGGING) {
@@ -77,130 +78,205 @@ export function ORM<
 
             protected onChange(): void {}
             protected onEdit(): void {}
-            protected onSanitize(row: Partial<R>): Partial<R> {
+            protected onSanitize<P extends Partial<R>>(row: P): P {
                 return row
             }
 
-            select() {
-                let callback = ($: T[]) => {
-                    this.set($)
-                    this.onChange()
-                }
-                return new SelectBuilder(core(this), callback)
+            private convert(R: R): T {
+                return new EClass(R, this) as T
             }
 
-            patch() {
-                let callback = ($: T[]) => {
-                    this.absorb($, idKey)
-                    this.onChange()
-                }
-                return new SelectBuilder(core(this), callback)
+            private convertAll(Rs: R[]): T[] {
+                return Rs.map(r => this.convert(r))
             }
 
-            selectIn<K extends Key<R>>(key: K, vals: R[K][]) {
-                let callback = ($: T[]) => {
-                    this.set($)
-                    this.sortBy($ => vals.indexOf($[key]))
-                    this.onChange()
+            private async wrapper<X>(
+                logType: 'select' | 'insert' | 'update' | 'delete',
+                options: uiOptions | undefined,
+                fn: () => Promise<X>
+            ): Promise<X> {
+                const { confirm, notify, loading } = options ?? {}
+
+                if (confirm) {
+                    await qDialog.confirm(...confirm)
                 }
-                return new SelectInBuilder(key, vals, core(this), callback)
-            }
 
-            patchIn<K extends Key<R>>(key: K, vals: R[K][]) {
-                let callback = ($: T[]) => {
-                    this.absorb($, idKey)
-                    this.sortBy($ => vals.indexOf($[key]))
-                    this.onChange()
+                if (loading === false) {
+                    LoadingBar.setDefaults({ size: '0px' })
                 }
-                return new SelectInBuilder(key, vals, core(this), callback)
+
+                const entities = await fn()
+
+                if (loading === false) {
+                    setTimeout(
+                        () => LoadingBar.setDefaults({ size: '5px' }),
+                        3000
+                    )
+                }
+
+                const n =
+                    notify ??
+                    {
+                        select: false as const,
+                        insert: 'Created!',
+                        update: 'Updated!',
+                        delete: 'Deleted!',
+                    }[logType]
+
+                if (n !== false) {
+                    qNotify.toast(n)
+                }
+
+                console.dev(`[${tableName}] ${logType}`, entities)
+
+                return entities
             }
 
-            selectRPC(param: object = {}) {
-                let callback = ($: T[]) => {
-                    this.set($)
+            async read(query: (q: Filter) => Filter = q => q): Promise<R[]> {
+                const q = supabase.from(tableName).select(fields)
+                return await query(q).then(handleError)
+            }
+
+            async select(
+                query: (q: Filter) => Filter = q => q,
+                options?: selectOptions
+            ): Promise<void> {
+                await this.wrapper('select', options, async () => {
+                    const data = await this.read(query)
+                    const entities = this.convertAll(data)
+
+                    options?.patch === true
+                        ? this.absorb(entities, idKey)
+                        : this.set(entities)
+
                     this.onChange()
-                }
-                return new SelectRPCBuilder(param, core(this), callback)
+                })
             }
 
-            patchRPC(param: object = {}) {
-                let callback = ($: T[]) => {
-                    this.absorb($, idKey)
+            async selectIn<K extends Key<R>>(
+                key: K,
+                vals: R[K][],
+                options?: uiOptions & { patch?: true }
+            ): Promise<void> {
+                await this.wrapper('select', options, async () => {
+                    const promises = vals.chunk(100).map(async chunkPiece => {
+                        return await supabase
+                            .from(tableName)
+                            .select(fields)
+                            .in(key, chunkPiece as any)
+                            .then(handleError)
+                    })
+                    const data: R[] = (await Promise.all(promises)).flat()
+
+                    const entities = this.convertAll(data)
+
+                    options?.patch === true
+                        ? this.absorb(entities, idKey)
+                        : this.set(entities)
+
+                    this.sortBy($ => vals.indexOf($[key]))
                     this.onChange()
-                }
-                return new SelectRPCBuilder(param, core(this), callback)
+                })
             }
 
-            selectCustom(rows: R[]) {
-                let convert = core(this).convertor
-                let entities = rows.map(convert)
-                this.set(entities)
+            selectCustom(rows: R[], options?: { patch?: true }): void {
+                const entities = this.convertAll(rows)
+                options?.patch === true
+                    ? this.absorb(entities, idKey)
+                    : this.set(entities)
                 this.onChange()
             }
 
-            insert(row: Partial<R>) {
-                row = this.onSanitize(row)
-                let callback = ($: T[]) => {
-                    this.push(...$)
+            async insertMany(
+                rows: Partial<R>[],
+                options?: uiOptions
+            ): Promise<T[]> {
+                return await this.wrapper('insert', options, async () => {
+                    const data: R[] = await supabase
+                        .from(tableName)
+                        .insert(rows.map($ => this.onSanitize($)))
+                        .select(fields)
+                        .then(handleError)
+
+                    const entities = this.convertAll(data)
+
+                    this.push(...entities)
                     this.onChange()
                     this.onEdit()
-                }
-                return new InsertBuilder([row], core(this), callback).notify(
-                    'Created!'
-                )
+
+                    return entities
+                })
             }
 
-            insertMany(rows: Partial<R>[]) {
-                rows = rows.map(this.onSanitize)
-                let callback = ($: T[]) => {
-                    this.push(...$)
-                    this.onChange()
-                    this.onEdit()
-                }
-                return new InsertBuilder(rows, core(this), callback).notify(
-                    'Created!'
-                )
+            async insert(row: Partial<R>, options?: uiOptions): Promise<T> {
+                let entities = await this.insertMany([row], options)
+                return entities[0]!
             }
 
-            update(idVal: R[K], row: Partial<R>) {
-                row = this.onSanitize(row)
-                let callback = ($: T[]) => {
-                    this.merge($, idKey)
+            async update(
+                idVal: R[IdK],
+                row: Partial<R>,
+                options?: uiOptions
+            ): Promise<T> {
+                return await this.wrapper('update', options, async () => {
+                    const data: R = await supabase
+                        .from(tableName)
+                        .update(this.onSanitize(row))
+                        .eq(idKey, idVal as any)
+                        .select(fields)
+                        .single()
+                        .then(handleError)
+
+                    const entity = this.convert(data)
+
+                    this.merge([entity], idKey)
                     this.onChange()
                     this.onEdit()
-                }
-                return new UpdateBuilder(
-                    idVal,
-                    row,
-                    core(this),
-                    callback
-                ).notify('Updated!')
+
+                    return entity
+                })
             }
 
-            delete(idVal: R[K]) {
-                let callback = ($: T[]) => {
+            async delete(idVal: R[IdK], options?: uiOptions): Promise<void> {
+                await this.wrapper('delete', options, async () => {
+                    await supabase
+                        .from(tableName)
+                        .delete()
+                        .eq(idKey, idVal as any)
+                        .single()
+                        .then(handleError)
+
                     this.remove($ => $[idKey] === idVal)
                     this.onChange()
                     this.onEdit()
-                }
-                return new DeleteBuilder(idVal, core(this), callback).notify(
-                    'Deleted!'
-                )
+                })
             }
 
-            upsert(row: Partial<R>, conflictKeys: Key<R>[]) {
+            async upsert<P extends Partial<R>>(
+                row: P,
+                conflictKeys: Key<P>[],
+                options?: uiOptions
+            ): Promise<T> {
                 row = this.onSanitize(row)
-                let callback = ($: T[]) => {
-                    this.absorb($, idKey)
-                    this.onChange()
-                    this.onEdit()
+
+                let found: R[] = await this.read(q =>
+                    q.match(Object.pick(row, conflictKeys))
+                )
+
+                if (found.length > 1) {
+                    await qDialog.error(
+                        'Fail to upsert',
+                        'More than 1 rows matching the conflictKeys are found!'
+                    )
+                    throw 'Fail to upsert! More than 1 rows matching the conflictKeys are found!'
+                }
+
+                if (found[0]) {
+                    let id = found[0][idKey]
+                    return await this.update(id, row, options)
+                } else {
+                    return await this.insert(row, options)
                 }
-                return new UpsertBuilder(
-                    row,
-                    conflictKeys,
-                    core(this),
-                    callback
-                ).notify('Updated!')
             }
         }
 
@@ -218,3 +294,14 @@ if (process.env.DEBUGGING) {
     // @ts-ignore
     globalThis.TABLES = []
 }
+
+type uiOptions = {
+    confirm?: [string, string]
+    notify?: string | false
+    loading?: boolean
+}
+
+type selectOptions = {
+    loading?: boolean
+    patch?: true
+}

package/src/templates/src/utils/puppets/test.ts

@@ -55,21 +55,23 @@ class StudentTable extends Table(Student) {
 
 let ss = new StudentTable()
 
-ss.select().eq('name', 'a')
+let x1 = await ss.read()
+
+ss.select(q => q.eq('name', 'a').eq('num', 3).limit(100).order('class'))
 // @ts-expect-error
-ss.select().eq('full', 'a')
+ss.select(q => q.eq('isPrefect', 'a'))
 ss.selectIn('num', [1, 2, 3])
 // @ts-expect-error
 ss.selectIn('name', [1, 2, 3])
 // @ts-expect-error
 ss.selectIn('full', [1, 2, 3])
-ss.insert({ name: 'a' })
+let x2 = await ss.insert({ name: 'a' })
 // @ts-expect-error
 ss.insert({ name: 0 })
 ss.delete('')
 // @ts-expect-error
 ss.delete(1)
-ss.update('', { name: 'a' })
+let x3 = await ss.update('', { name: 'a' })
 // @ts-expect-error
 ss.update('', { name: 0 })
 // @ts-expect-error
@@ -77,6 +79,6 @@ ss.update('', { full: 'a' })
 // @ts-expect-error
 ss.update(0, { name: 'a' })
 
-let st = ss[0]
+let st = ss[0]!
 st.name
 st.full

package/src/templates/src/utils/storage.ts

@@ -1,4 +1,4 @@
-import { supabase, handleThrow } from '.'
+import { supabase, handleError } from '.'
 import { reactive } from 'vue'
 import { FileOptions } from '@supabase/storage-js'
 import { mimeTypesToExt } from './mimeTypesToExt'
@@ -13,7 +13,7 @@ export class SupabaseBucket extends Map<string, string> {
         const data = await supabase.storage
             .from(this.bucketName)
             .list(undefined, { limit: 10000 })
-            .then(handleThrow)
+            .then(handleError)
         return data.pluck('name')
     }
 
@@ -21,7 +21,7 @@ export class SupabaseBucket extends Map<string, string> {
         const data = await supabase.storage
             .from(this.bucketName)
             .createSignedUrl(path, 60 * 60 * 24)
-            .then(handleThrow)
+            .then(handleError)
         return data.signedUrl
     }
 
@@ -31,7 +31,7 @@ export class SupabaseBucket extends Map<string, string> {
         const data = await supabase.storage
             .from(this.bucketName)
             .createSignedUrls(paths, 60 * 60 * 24)
-            .then(handleThrow)
+            .then(handleError)
         return data
     }
 
@@ -58,7 +58,7 @@ export class SupabaseBucket extends Map<string, string> {
         const data = await supabase.storage
             .from(this.bucketName)
             .upload(path, file, fileOptions)
-            .then(handleThrow)
+            .then(handleError)
         await this.load(path)
     }
 
@@ -70,7 +70,7 @@ export class SupabaseBucket extends Map<string, string> {
         const data = await supabase.storage
             .from(this.bucketName)
             .update(path, file, fileOptions)
-            .then(handleThrow)
+            .then(handleError)
         await this.load(path)
     }
 
@@ -82,7 +82,7 @@ export class SupabaseBucket extends Map<string, string> {
         const data = await supabase.storage
             .from(this.bucketName)
             .upload(path, file, { ...fileOptions, upsert: true })
-            .then(handleThrow)
+            .then(handleError)
         await this.load(path)
     }
 
@@ -90,7 +90,7 @@ export class SupabaseBucket extends Map<string, string> {
         const data = await supabase.storage
             .from(this.bucketName)
             .remove([path])
-            .then(handleThrow)
+            .then(handleError)
         this.delete(path)
     }
 
@@ -98,7 +98,7 @@ export class SupabaseBucket extends Map<string, string> {
         const data = await supabase.storage
             .from(this.bucketName)
             .copy(fromPath, toPath)
-            .then(handleThrow)
+            .then(handleError)
         await this.load(toPath)
     }
 
@@ -106,7 +106,7 @@ export class SupabaseBucket extends Map<string, string> {
         const data = await supabase.storage
             .from(this.bucketName)
             .move(fromPath, toPath)
-            .then(handleThrow)
+            .then(handleError)
         await this.load(toPath)
         this.delete(fromPath)
     }

package/src/templates/src/utils/supabase.ts

@@ -1,22 +1,11 @@
-import {
-    createClient,
-    PostgrestError,
-    SupabaseClient,
-    Session,
-} from '@supabase/supabase-js'
+import { PostgrestError, SupabaseClient } from '@supabase/supabase-js'
 import { qDialog } from './dialog'
 
-export type {
-    PostgrestFilterBuilder,
-    PostgrestSingleResponse,
-} from '@supabase/postgrest-js'
-
 let SUPABASE_URL = process.env.SUPABASE_URL ?? ''
 let SUPABASE_KEY = process.env.SUPABASE_KEY ?? ''
 
 export class MySupabaseClient extends SupabaseClient {
     email: string = 'unauthenticated'
-    // session: Session | null = null
 
     constructor() {
         super(SUPABASE_URL, SUPABASE_KEY, {
@@ -24,15 +13,9 @@ export class MySupabaseClient extends SupabaseClient {
                 // @ts-ignore
                 schema: process.env.SUPABASE_SCHEMA ?? 'public',
             },
-            // auth: {
-            //     autoRefreshToken: true,
-            //     persistSession: true,
-            //     detectSessionInUrl: true,
-            // },
         })
         this.auth.onAuthStateChange((event, session) => {
             console.log('[SUPABASE AUTH]', event, session?.user?.email)
-            // this.session = session
             this.email = session?.user?.email ?? 'unauthenticated'
         })
     }
@@ -51,41 +34,10 @@ export class MySupabaseClient extends SupabaseClient {
         })
     }
 
-    async call<T>(fn: string, params?: object | undefined): Promise<T[]> {
-        return await this.rpc<string, any>(fn, params).then(handleThrow)
-    }
-
-    async callSingle<T>(fn: string, params?: object | undefined): Promise<T> {
-        return (await this.rpc<string, any>(fn, params)
-            .single()
-            .then(handleThrow)) as T
-    }
-
-    // private async tryRefreshSession() {
-    //     try {
-    //         await this.auth.refreshSession()
-    //     } catch (e) {
-    //         console.error('[Supabase] Refresh session failed', e)
-    //     }
-    // }
-
     async waitForSignin(): Promise<void> {
-        // await this.tryRefreshSession()
         await this.auth.initialize()
         const { data } = await this.auth.getClaims()
         if (data === null) this.signIn()
-        // setInterval(async () => {
-        //     if (this.session === null) await this.tryRefreshSession()
-        //     if (this.session === null) this.signIn()
-        // }, 1000)
-        // setInterval(async () => {
-        //     await this.auth.refreshSession()
-        // }, 1000 * 60 * 30 * 0.99)
-        // await waitFor(
-        //     () => this.session !== null,
-        //     '[Wait for SignIn] waiting...',
-        //     '[Wait for SignIn] DONE!'
-        // )
     }
 }
 
@@ -93,7 +45,7 @@ export let supabase: MySupabaseClient
 if (SUPABASE_URL !== '' && SUPABASE_KEY !== '')
     supabase = new MySupabaseClient()
 
-export function HANDLE_ERROR<T>(
+function HANDLE_ERROR<T>(
     data: T[] | T | null,
     error: PostgrestError | Error | null
 ): asserts data {
@@ -119,7 +71,7 @@ export function HANDLE_ERROR<T>(
     }
 }
 
-export function handleThrow<D>({
+export function handleError<D>({
     data,
     error,
 }: {
@@ -129,22 +81,3 @@ export function handleThrow<D>({
     HANDLE_ERROR(data, error)
     return data
 }
-
-// async function waitFor(
-//     predicate: () => boolean,
-//     waitingMsg: string,
-//     doneMsg: string
-// ) {
-//     return new Promise(resolve => {
-//         async function checker() {
-//             if (predicate()) {
-//                 console.log(doneMsg)
-//                 resolve(true)
-//             } else {
-//                 console.log(waitingMsg)
-//                 setTimeout(checker, 50)
-//             }
-//         }
-//         checker()
-//     })
-// }

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

@@ -1,34 +0,0 @@
-<template>
-    <div
-        v-bind="$attrs"
-        :class="{
-            'text-caption': caption,
-            'text-subtitle1': subtitle1,
-            'text-subtitle2': subtitle2,
-            'text-body1': body1,
-            'text-body2': body2,
-            'text-h6': h6,
-            'text-h5': h5,
-            'text-h4': h4,
-            'text-weight-bold': bold,
-            'text-weight-bolder': bolder,
-        }"
-    >
-        <slot></slot>
-    </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-    bold?: boolean
-    bolder?: boolean
-    caption?: boolean
-    subtitle1?: boolean
-    subtitle2?: boolean
-    body1?: boolean
-    body2?: boolean
-    h6?: boolean
-    h5?: boolean
-    h4?: boolean
-}>()
-</script>

package/src/templates/src/utils/puppets/builder/index.ts

@@ -1,235 +0,0 @@
-import { Core } from '../core'
-import { Filter, Key } from '../type'
-import { ui } from './ui'
-
-type Promisable<T> = T | PromiseLike<T>
-
-type onfulfilled<T, U> = ((value: T) => Promisable<U>) | undefined | null
-
-type onrejected<U> = ((reason: any) => Promisable<U>) | undefined | null
-
-abstract class BuilderUI {
-    private isSilence: boolean = false
-    private isConfirm: boolean = false
-    private confirmContent: { title: string; msg: string } = {
-        title: '',
-        msg: '',
-    }
-    private isNotify: boolean = false
-    private notifyContent: string = ''
-
-    protected abstract dataLogic(): Promise<void>
-
-    protected async run() {
-        if (this.isSilence) ui.loadingOff()
-
-        if (this.isConfirm) {
-            let { title, msg } = this.confirmContent
-            await ui.onConfirm(title, msg)
-        }
-
-        await this.dataLogic()
-
-        if (this.isNotify) ui.onNotify(this.notifyContent)
-
-        if (this.isSilence) ui.loadingOn()
-    }
-
-    confirm(title: string, ...msgs: string[]): this {
-        this.isConfirm = true
-        this.confirmContent = { title, msg: msgs.join('<br/>') }
-        return this
-    }
-
-    notify(msg: string): this {
-        this.isNotify = true
-        this.notifyContent = msg
-        return this
-    }
-
-    mute(): this {
-        this.isNotify = false
-        return this
-    }
-
-    /**
-     * @deprecated
-     */
-    slience(): this {
-        this.isSilence = true
-        this.isNotify = false
-        return this
-    }
-
-    silence(): this {
-        this.isSilence = true
-        this.isNotify = false
-        return this
-    }
-}
-
-abstract class Builder<T, R> extends BuilderUI implements PromiseLike<void> {
-    constructor(
-        protected core: Core<T, R>,
-        private callback: (objs: T[]) => void
-    ) {
-        super()
-    }
-
-    protected abstract logType: string
-
-    protected abstract fetch(): Promise<R[]>
-
-    protected override async dataLogic(): Promise<void> {
-        let data = await this.fetch()
-        let entities = data.map($ => this.core.convertor($))
-        this.callback(entities)
-        ui.log(this.core.tableName, this.logType, entities)
-    }
-
-    async then<Y, N>(
-        onfulfilled?: onfulfilled<void, Y>,
-        onrejected?: onrejected<N>
-    ): Promise<Y | N> {
-        return this.run().then(onfulfilled, onrejected)
-    }
-}
-
-abstract class FilterBuilder<T, R> extends Builder<T, R> {
-    protected filters: Filter<R>[] = []
-
-    eq<K extends Key<R>>(key: K, val: R[K]): this {
-        this.filters.push({ type: 'eq', payload: { key, val } })
-        return this
-    }
-
-    in<K extends Key<R>>(key: K, vals: R[K][]): this {
-        this.filters.push({ type: 'in', payload: { key, vals } })
-        return this
-    }
-
-    like<K extends Key<R>>(key: K, pattern: string): this {
-        this.filters.push({ type: 'like', payload: { key, pattern } })
-        return this
-    }
-
-    limit(count: number): this {
-        this.filters.push({ type: 'limit', payload: count })
-        return this
-    }
-
-    order<K extends Key<R>>(key: K, ascending: boolean = true): this {
-        this.filters.push({ type: 'order', payload: { key, asc: ascending } })
-        return this
-    }
-}
-
-export class SelectBuilder<T, R> extends FilterBuilder<T, R> {
-    protected logType = 'select'
-
-    protected override async fetch() {
-        return this.core.fetchSelect(this.filters)
-    }
-}
-
-export class SelectInBuilder<T, R, K extends Key<R>> extends FilterBuilder<
-    T,
-    R
-> {
-    protected logType = 'selectIn'
-
-    constructor(
-        private key: K,
-        private vals: R[K][],
-        core: Core<T, R>,
-        callback: (objs: T[]) => void
-    ) {
-        super(core, callback)
-    }
-
-    protected override async fetch() {
-        return this.core.fetchSelectIn(this.key, this.vals, this.filters)
-    }
-}
-
-export class SelectRPCBuilder<T, R> extends FilterBuilder<T, R> {
-    protected logType = 'rpc'
-
-    constructor(
-        private param: object,
-        core: Core<T, R>,
-        callback: (objs: T[]) => void
-    ) {
-        super(core, callback)
-    }
-
-    protected override async fetch() {
-        return this.core.fetchRPC(this.param, this.filters)
-    }
-}
-
-export class InsertBuilder<T, R> extends Builder<T, R> {
-    protected logType = 'insert'
-
-    constructor(
-        private rows: Partial<R>[],
-        core: Core<T, R>,
-        callback: (objs: T[]) => void
-    ) {
-        super(core, callback)
-    }
-
-    protected override async fetch() {
-        return this.core.fetchInsert(this.rows)
-    }
-}
-
-export class UpdateBuilder<T, R> extends Builder<T, R> {
-    protected logType = 'update'
-
-    constructor(
-        private idVal: R[keyof R],
-        private row: Partial<R>,
-        core: Core<T, R>,
-        callback: (objs: T[]) => void
-    ) {
-        super(core, callback)
-    }
-
-    protected override async fetch() {
-        return this.core.fetchUpdate(this.idVal, this.row)
-    }
-}
-
-export class DeleteBuilder<T, R> extends Builder<T, R> {
-    protected logType = 'delete'
-
-    constructor(
-        private idVal: R[keyof R],
-        core: Core<T, R>,
-        callback: (objs: T[]) => void
-    ) {
-        super(core, callback)
-    }
-
-    protected override async fetch() {
-        return this.core.fetchDelete(this.idVal)
-    }
-}
-
-export class UpsertBuilder<T, R> extends Builder<T, R> {
-    protected logType = 'upsert'
-
-    constructor(
-        private row: Partial<R>,
-        private conflictKeys: Key<R>[],
-        core: Core<T, R>,
-        callback: (objs: T[]) => void
-    ) {
-        super(core, callback)
-    }
-
-    protected override async fetch() {
-        return this.core.fetchUpsert(this.row, this.conflictKeys)
-    }
-}

package/src/templates/src/utils/puppets/builder/ui.ts

@@ -1,31 +0,0 @@
-import { qDialog } from '../../dialog'
-import * as qNotify from '../../notify'
-import { LoadingBar } from 'quasar'
-
-/**
- * I am responsible for providing UI interaction functions using Quasar.
- * Purely functional.
- */
-class UI {
-    loadingOff(): void {
-        LoadingBar.setDefaults({ size: '0px' })
-    }
-
-    loadingOn(): void {
-        setTimeout(() => LoadingBar.setDefaults({ size: '5px' }), 3000)
-    }
-
-    onConfirm(title: string, msg: string): Promise<void> {
-        return qDialog.confirm(title, msg)
-    }
-
-    onNotify(msg: string): void {
-        qNotify.toast(msg)
-    }
-
-    log(table: string, type: string, data: any[]): void {
-        console.dev(`[${table}] ${type}`, data)
-    }
-}
-
-export const ui = new UI()

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

@@ -1,122 +0,0 @@
-import { supabase, handleThrow, PostgrestFilterBuilder } from '../../supabase'
-import { Filter } from '../type'
-
-type FilterBuilder = PostgrestFilterBuilder<any, any, any, any>
-
-async function send(q: any): Promise<any[]> {
-    let data = await q.then(handleThrow)
-    return Array.isArray(data) ? data : [data]
-}
-
-function parseFilters(q: FilterBuilder, filters: Filter[]): FilterBuilder {
-    let sortedFilters = filters.sortedBy(f =>
-        ['eq', 'in', 'like', 'limit', 'order'].indexOf(f.type)
-    )
-    for (const { type: t, payload: p } of sortedFilters) {
-        if (t === 'eq') q = q.eq(p.key, p.val)
-        if (t === 'in') q = q.in(p.key, p.vals)
-        if (t === 'like') q = q.like(p.key, p.pattern)
-        if (t === 'limit') q = q.limit(p)
-        if (t === 'order') q = q.order(p.key, { ascending: p.asc })
-    }
-    return q
-}
-
-/**
- * I am responsible for providing database operation.
- * Purely functional.
- */
-class DB {
-    async select(
-        table: string,
-        fields: string[],
-        filters: Filter[]
-    ): Promise<any[]> {
-        let q = supabase.from(table).select(fields.join(','))
-        q = parseFilters(q, filters)
-        return send(q)
-    }
-
-    async selectIn(
-        table: string,
-        fields: string[],
-        key: string,
-        vals: any[],
-        filters: Filter[]
-    ): Promise<any[]> {
-        let getRows = (chunkPiece: any[]): Promise<any[]> => {
-            let q = supabase
-                .from(table)
-                .select(fields.join(','))
-                .in(key, chunkPiece)
-            q = parseFilters(q, filters)
-            return send(q)
-        }
-        let promises = vals.chunk(100).map(getRows)
-        let result = await Promise.all(promises)
-        return result.flat()
-    }
-
-    async rpc(fn: string, param: any, filters: Filter[]): Promise<any[]> {
-        let q = supabase.rpc(fn, param)
-        q = parseFilters(q, filters)
-        return send(q)
-    }
-
-    async insert(table: string, rows: any[]): Promise<any[]> {
-        let q = supabase.from(table).insert(rows).select('*')
-        return send(q)
-    }
-
-    async update(
-        table: string,
-        idKey: string,
-        idVal: any,
-        row: any
-    ): Promise<any[]> {
-        let q = supabase
-            .from(table)
-            .update(row)
-            .eq(idKey, idVal)
-            .select('*')
-            .single()
-        return send(q)
-    }
-
-    async delete(table: string, idKey: string, idVal: any): Promise<any[]> {
-        let q = supabase
-            .from(table)
-            .delete()
-            .eq(idKey, idVal)
-            .select('*')
-            .single()
-        return send(q)
-    }
-
-    async upsert(
-        table: string,
-        idKey: string,
-        row: any,
-        conflictKeys: (string & keyof typeof row)[]
-    ): Promise<any[]> {
-        let conflict: any = {}
-        for (let f of conflictKeys) {
-            conflict[f] = row[f]
-        }
-
-        let q = supabase.from(table).select('*').match(conflict)
-        let data = await send(q)
-
-        if (data.length > 1)
-            throw 'Fail to upsert! More than 1 rows matching the conflictKeys are found!'
-
-        if (data.length === 1) {
-            let id = data[0][idKey as keyof (typeof data)[0]]
-            return await this.update(table, idKey, id, row)
-        } else {
-            return await this.insert(table, [row])
-        }
-    }
-}
-
-export const db = new DB()

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

@@ -1,44 +0,0 @@
-import { Filter, Key } from '../type'
-import { db } from './db'
-
-/** I am responsible for transfering the state from Table to Builders.*/
-export class Core<T, R> {
-    constructor(
-        public tableName: string,
-        public idKey: Key<R>,
-        public fields: Key<R>[],
-        public convertor: ($: R) => T
-    ) {}
-
-    async fetchSelect(filters: Filter<R>[]): Promise<R[]> {
-        return db.select(this.tableName, this.fields, filters)
-    }
-
-    async fetchSelectIn<K extends Key<R>>(
-        key: K,
-        vals: R[K][],
-        filters: Filter<R>[]
-    ): Promise<R[]> {
-        return db.selectIn(this.tableName, this.fields, key, vals, filters)
-    }
-
-    async fetchRPC(param: object, filters: Filter<R>[]): Promise<R[]> {
-        return db.rpc(this.tableName, param, filters)
-    }
-
-    async fetchInsert(rows: Partial<R>[]): Promise<R[]> {
-        return db.insert(this.tableName, rows)
-    }
-
-    async fetchUpdate(idVal: R[keyof R], row: Partial<R>): Promise<R[]> {
-        return db.update(this.tableName, this.idKey, idVal, row)
-    }
-
-    async fetchDelete(idVal: R[keyof R]): Promise<R[]> {
-        return db.delete(this.tableName, this.idKey, idVal)
-    }
-
-    async fetchUpsert(row: Partial<R>, conflictKeys: Key<R>[]): Promise<R[]> {
-        return db.upsert(this.tableName, this.idKey, row, conflictKeys)
-    }
-}

package/src/templates/src/utils/puppets/type.ts

@@ -1,15 +0,0 @@
-export type Filter<R = any> =
-    | { type: 'eq'; payload: { key: Key<R>; val: any } }
-    | { type: 'in'; payload: { key: Key<R>; vals: any[] } }
-    | { type: 'like'; payload: { key: Key<R>; pattern: string } }
-    | { type: 'limit'; payload: number }
-    | { type: 'order'; payload: { key: Key<R>; asc: boolean } }
-
-export type Constructor<T extends object = {}> = new (...args: any[]) => T
-
-export type BooleanKeys<T> = {
-    [k in keyof T]: T[k] extends boolean ? k : never
-}[keyof T]
-// type OnlyBoolean<T> = { [k in BooleanKeys<T>]: boolean }
-
-export type Key<R> = string & keyof R