@d-mok/quasar-app-extension-quasar-axe 3.0.1 → 3.1.2

package/.gitattributes

@@ -1,2 +1,2 @@
-# Auto detect text files and perform LF normalization
-* text=auto
+# Auto detect text files and perform LF normalization
+* text=auto

package/package.json

@@ -1,46 +1,43 @@
-{
-    "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "3.0.1",
-    "description": "A Quasar App Extension",
-    "author": "d-mok <49301824+d-mok@users.noreply.github.com>",
-    "license": "MIT",
-    "main": "src/index.js",
-    "scripts": {
-        "publish-package": "npm version patch --no-git-tag-version && npm publish --access public"
-    },
-    "engines": {
-        "node": ">= 8.9.0",
-        "npm": ">= 5.6.0",
-        "yarn": ">= 1.6.0"
-    },
-    "dependencies": {
-        "@handsontable/vue3": "^12.1.0",
-        "@supabase/supabase-js": "^2.24.0",
-        "@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": "^2.0.4",
-        "vuedraggable": "^4.1.0"
-    },
-    "devDependencies": {
-        "@quasar/app": "^3.3.3",
-        "@quasar/extras": "^1.14.2",
-        "@types/node": "^17.0.45",
-        "core-js": "^3.23.3",
-        "quasar": "^2.7.3",
-        "typescript": "^4.7.4",
-        "vite": "^2.9.12"
-    },
-    "prettier": {
-        "tabWidth": 4,
-        "semi": false,
-        "singleQuote": true,
-        "arrowParens": "avoid",
-        "singleAttributePerLine": true
-    }
-}
+{
+    "name": "@d-mok/quasar-app-extension-quasar-axe",
+    "version": "3.1.2",
+    "description": "A Quasar App Extension",
+    "main": "src/index.js",
+    "scripts": {
+        "publish-package": "npm version patch --no-git-tag-version && npm publish --access public"
+    },
+    "dependencies": {
+        "@handsontable/vue3": "^14.0.0",
+        "@supabase/supabase-js": "^2.39.1",
+        "@types/lodash": "^4.14.195",
+        "@types/papaparse": "^5.3.7",
+        "@types/webpack-env": "^1.18.1",
+        "@vueuse/core": "^10.7.0",
+        "@vueuse/integrations": "^10.7.0",
+        "@vueuse/router": "^10.7.0",
+        "handsontable": "^14.0.0",
+        "jszip": "^3.10.1",
+        "lodash": "^4.17.21",
+        "mime-types": "^2.1.35",
+        "papaparse": "^5.4.1",
+        "sapphire-js": "^2.1.21",
+        "sortablejs": "^1.15.0"
+    },
+    "devDependencies": {
+        "@quasar/app-vite": "^2.0.5",
+        "@quasar/extras": "^1.16.12 ",
+        "@types/mime-types": "^2.1.1",
+        "@types/node": "^20.2.5",
+        "core-js": "^3.38.1",
+        "quasar": "^2.17.1",
+        "typescript": "^5.6.3",
+        "vue": "^3.5.12"
+    },
+    "prettier": {
+        "tabWidth": 4,
+        "semi": false,
+        "singleQuote": true,
+        "arrowParens": "avoid",
+        "singleAttributePerLine": true
+    }
+}

package/shims-vue.d.ts

@@ -1,5 +1,5 @@
-declare module '*.vue' {
-    import { ComponentOptions } from 'vue'
-    const component: ComponentOptions
-    export default component
-}
+declare module '*.vue' {
+    import { ComponentOptions } from 'vue'
+    const component: ComponentOptions
+    export default component
+}

package/src/index.js

@@ -1,31 +1,41 @@
-function extendQuasarConf(conf, prompts) {
-    for (let b of ['AutoRoute', 'AutoReg', 'Interceptor'])
-        conf.boot.unshift(`axe/${b}`)
-    console.log('[QuasarAxe] Config pushed Boots')
-
-    conf.framework.plugins.push(
-        'AppVisibility',
-        'Notify',
-        'Dialog',
-        'LoadingBar'
-    )
-    console.log('[QuasarAxe] Config pushed framework.plugins')
-
-    conf.framework.config.loadingBar = {
-        position: 'top',
-        color: 'white',
-        size: '5px',
-        skipHijack: true,
-    }
-    conf.framework.config.notify = {}
-    console.log('[QuasarAxe] Config pushed framework.config')
-
-    conf.animations.push('fadeIn', 'fadeOut', 'zoomIn', 'zoomOut')
-    console.log('[QuasarAxe] Config pushed animations')
-}
-
-module.exports = function (api) {
-    api.compatibleWith('quasar', '^2.0.0')
-    api.compatibleWith('@quasar/app-vite', '^1.0.0')
-    api.extendQuasarConf(conf => extendQuasarConf(conf, api.prompts))
-}
+function extendQuasarConf(conf, prompts) {
+    for (let b of ['AutoRoute', 'AutoReg', 'Interceptor', 'SetPrimaryColor'])
+        conf.boot.unshift(`axe/${b}`)
+    console.log('[QuasarAxe] Config pushed Boots')
+    conf.boot.unshift('axe/LoadStart')
+    conf.boot.push('axe/LoadEnd')
+
+    conf.framework.plugins.push(
+        'AppVisibility',
+        'Notify',
+        'Dialog',
+        'LoadingBar'
+    )
+    console.log('[QuasarAxe] Config pushed framework.plugins')
+
+    conf.framework.config.loadingBar = {
+        position: 'top',
+        color: 'white',
+        size: '5px',
+        skipHijack: true,
+    }
+    conf.framework.config.notify = {}
+    console.log('[QuasarAxe] Config pushed framework.config')
+
+    conf.animations.push('fadeIn', 'fadeOut', 'zoomIn', 'zoomOut')
+    console.log('[QuasarAxe] Config pushed animations')
+
+    conf.build.viteVuePluginOptions = {
+        script: {
+            defineModel: true,
+            propsDestructure: true,
+        },
+    }
+    console.log('[QuasarAxe] Config pushed viteVuePluginOptions')
+}
+
+module.exports = function (api) {
+    api.compatibleWith('quasar', '^2.0.0')
+    api.compatibleWith('@quasar/app-vite', '^1.0.0 || ^2.0.0')
+    api.extendQuasarConf(conf => extendQuasarConf(conf, api.prompts))
+}

package/src/install.js

@@ -1,6 +1,6 @@
-module.exports = function (api) {
-    api.compatibleWith('quasar', '^2.0.0')
-    api.compatibleWith('@quasar/app-vite', '^1.0.0')
-    api.render('./templates')
-    api.onExitLog('Thanks for installing quasar-axe!')
-}
+module.exports = function (api) {
+    api.compatibleWith('quasar', '^2.0.0')
+    api.compatibleWith('@quasar/app-vite', '^1.0.0 || ^2.0.0')
+    api.render('./templates')
+    api.onExitLog('Thanks for installing quasar-axe!')
+}

package/src/prompts.js

@@ -1,3 +1,3 @@
-module.exports = function () {
-  return [];
-};
+module.exports = function () {
+  return [];
+};

package/src/templates/src/boot/axe/AutoReg.ts

@@ -1,18 +1,18 @@
-import { boot } from 'quasar/wrappers'
-
-function pascal(s: string): string {
-    return s
-        .split('/')
-        .pop()!
-        .replace(/\.\w+$/, '')
-}
-
-console.log('[QuasarAxe] Run Boot AutoReg')
-
-const components = import.meta.globEager('src/**/*.vue')
-
-export default boot(({ app }) => {
-    for (let path in components) {
-        app.component(pascal(path), components[path].default)
-    }
-})
+import { boot } from 'quasar/wrappers'
+
+function pascal(s: string): string {
+    return s
+        .split('/')
+        .pop()!
+        .replace(/\.\w+$/, '')
+}
+
+console.log('[QuasarAxe] Run Boot AutoReg')
+
+const components = import.meta.glob<any>('src/**/*.vue', { eager: true })
+
+export default boot(({ app }) => {
+    for (let path in components) {
+        app.component(pascal(path), components[path].default)
+    }
+})

package/src/templates/src/boot/axe/AutoRoute.ts

@@ -1,40 +1,40 @@
-import { boot } from 'quasar/wrappers'
-
-function pascal(s: string): string {
-    return s
-        .split('/')
-        .pop()!
-        .replace(/\.\w+$/, '')
-}
-
-if (!process.env.HOME_ROUTE) throw 'Missing HOME_ROUTE in process.env!'
-
-const HOME_ROUTE = process.env.HOME_ROUTE ?? '/'
-
-console.log('[QuasarAxe] Run Boot AutoRoute')
-
-const pages = import.meta.globEager('src/**/pages/**/*.vue')
-
-const routes = Object.keys(pages).map(path => ({
-    path: pascal(path).toLowerCase(),
-    component: pages[path].default,
-}))
-
-const _pages = import.meta.globEager('src/**/_*.vue')
-
-const _routes = Object.keys(_pages).map(path => ({
-    path: pascal(path).toLowerCase().replace('_', ''),
-    component: _pages[path].default,
-}))
-
-export default boot(({ app, router }) => {
-    router.addRoute({
-        path: '/',
-        component: () => import('src/layouts/Layout.vue'),
-        children: [...routes, ..._routes, { path: '/', redirect: HOME_ROUTE }],
-    })
-    router.addRoute({
-        path: '/:catchAll(.*)*',
-        redirect: HOME_ROUTE,
-    })
-})
+import { boot } from 'quasar/wrappers'
+
+function pascal(s: string): string {
+    return s
+        .split('/')
+        .pop()!
+        .replace(/\.\w+$/, '')
+}
+
+if (!process.env.HOME_ROUTE) throw 'Missing HOME_ROUTE in process.env!'
+
+const HOME_ROUTE = process.env.HOME_ROUTE ?? '/'
+
+console.log('[QuasarAxe] Run Boot AutoRoute')
+
+const pages = import.meta.glob<any>('src/**/pages/**/*.vue', { eager: true })
+
+const routes = Object.keys(pages).map(path => ({
+    path: pascal(path).toLowerCase(),
+    component: pages[path].default,
+}))
+
+const _pages = import.meta.glob<any>('src/**/_*.vue', { eager: true })
+
+const _routes = Object.keys(_pages).map(path => ({
+    path: pascal(path).toLowerCase().replace('_', ''),
+    component: _pages[path].default,
+}))
+
+export default boot(({ app, router }) => {
+    router.addRoute({
+        path: '/',
+        component: () => import('src/layouts/Layout.vue'),
+        children: [...routes, ..._routes, { path: '/', redirect: HOME_ROUTE }],
+    })
+    router.addRoute({
+        path: '/:catchAll(.*)*',
+        redirect: HOME_ROUTE,
+    })
+})

package/src/templates/src/boot/axe/Interceptor.ts

@@ -1,86 +1,86 @@
-import { boot } from 'quasar/wrappers'
-import { LoadingBar } from 'quasar'
-
-console.log('[QuasarAxe] Run Boot Interceptor')
-
-declare global {
-    interface XMLHttpRequest {
-        _url: string
-    }
-}
-
-export function setAjaxInterceptor(
-    onStart: (_: XMLHttpRequest) => void,
-    onEnd: (_: XMLHttpRequest) => void
-) {
-    var open = window.XMLHttpRequest.prototype.open
-    var send = window.XMLHttpRequest.prototype.send
-
-    window.XMLHttpRequest.prototype.open = function (...args: any) {
-        this._url = args[1] ?? ''
-        open.apply(this, args)
-    }
-
-    window.XMLHttpRequest.prototype.send = function (...args: any) {
-        var request = this
-        onStart(request)
-
-        var intervalId = window.setInterval(function () {
-            if (request.readyState != 4) return
-            onEnd(request)
-            clearInterval(intervalId)
-        }, 10)
-
-        return send.apply(this, args)
-    }
-}
-
-export function setFetchInterceptor(
-    onStart: (..._: Parameters<typeof window.fetch>) => void,
-    onEnd: (..._: Parameters<typeof window.fetch>) => void
-) {
-    const oldFetch = window.fetch
-
-    window.fetch = async (...args) => {
-        onStart(...args)
-
-        const response = await oldFetch(...args)
-
-        onEnd(...args)
-
-        // /* work with the cloned response in a separate promise
-        //    chain -- could use the same chain with `await`. */
-        // response
-        //     .clone()
-        //     .json()
-        //     .then(body => console.log("intercepted response:", body))
-        //     .catch(err => console.error(err))
-
-        /* the original response can be resolved unmodified: */
-        return response
-    }
-}
-
-function isLogRocket(request: XMLHttpRequest): boolean {
-    return request._url.startsWith('https://r.lr-ingest.io')
-}
-
-setAjaxInterceptor(
-    request => {
-        if (!isLogRocket(request)) {
-            LoadingBar.start()
-        }
-    },
-    request => {
-        if (!isLogRocket(request)) {
-            LoadingBar.stop()
-        }
-    }
-)
-
-setFetchInterceptor(
-    () => LoadingBar.start(),
-    () => LoadingBar.stop()
-)
-
-export default boot(({ app, router }) => {})
+import { boot } from 'quasar/wrappers'
+import { LoadingBar } from 'quasar'
+
+console.log('[QuasarAxe] Run Boot Interceptor')
+
+declare global {
+    interface XMLHttpRequest {
+        _url: string
+    }
+}
+
+export function setAjaxInterceptor(
+    onStart: (_: XMLHttpRequest) => void,
+    onEnd: (_: XMLHttpRequest) => void
+) {
+    var open = window.XMLHttpRequest.prototype.open
+    var send = window.XMLHttpRequest.prototype.send
+
+    window.XMLHttpRequest.prototype.open = function (...args: any) {
+        this._url = args[1] ?? ''
+        open.apply(this, args)
+    }
+
+    window.XMLHttpRequest.prototype.send = function (...args: any) {
+        var request = this
+        onStart(request)
+
+        var intervalId = window.setInterval(function () {
+            if (request.readyState != 4) return
+            onEnd(request)
+            clearInterval(intervalId)
+        }, 10)
+
+        return send.apply(this, args)
+    }
+}
+
+export function setFetchInterceptor(
+    onStart: (..._: Parameters<typeof window.fetch>) => void,
+    onEnd: (..._: Parameters<typeof window.fetch>) => void
+) {
+    const oldFetch = window.fetch
+
+    window.fetch = async (...args) => {
+        onStart(...args)
+
+        const response = await oldFetch(...args)
+
+        onEnd(...args)
+
+        // /* work with the cloned response in a separate promise
+        //    chain -- could use the same chain with `await`. */
+        // response
+        //     .clone()
+        //     .json()
+        //     .then(body => console.log("intercepted response:", body))
+        //     .catch(err => console.error(err))
+
+        /* the original response can be resolved unmodified: */
+        return response
+    }
+}
+
+function isLogRocket(request: XMLHttpRequest): boolean {
+    return request._url.startsWith('https://r.lr-ingest.io')
+}
+
+setAjaxInterceptor(
+    request => {
+        if (!isLogRocket(request)) {
+            LoadingBar.start()
+        }
+    },
+    request => {
+        if (!isLogRocket(request)) {
+            LoadingBar.stop()
+        }
+    }
+)
+
+setFetchInterceptor(
+    () => LoadingBar.start(),
+    () => LoadingBar.stop()
+)
+
+export default boot(({ app, router }) => {})

package/src/templates/src/boot/axe/LoadEnd.ts

@@ -0,0 +1,8 @@
+import { boot } from 'quasar/wrappers'
+import { qNotify } from '../../utils'
+
+console.log('[QuasarAxe] Run Boot LoadEnd')
+
+export default boot(({ app }) => {
+    qNotify.unload()
+})

package/src/templates/src/boot/axe/LoadStart.ts

@@ -0,0 +1,8 @@
+import { boot } from 'quasar/wrappers'
+import { qNotify } from '../../utils'
+
+console.log('[QuasarAxe] Run Boot LoadStart')
+
+export default boot(({ app }) => {
+    qNotify.load()
+})

package/src/templates/src/boot/axe/SetPrimaryColor.ts

@@ -0,0 +1,10 @@
+import { boot } from 'quasar/wrappers'
+import { setCssVar } from 'quasar'
+
+console.log('[QuasarAxe] Run Boot SetPrimaryColor')
+
+export default boot(({ app }) => {
+    if (process.env.PRIMARY_COLOR) {
+        setCssVar('primary', process.env.PRIMARY_COLOR)
+    }
+})

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

@@ -1,30 +1,26 @@
-<template>
-    <q-btn v-bind="$attrs">
-        <q-tooltip
-            class="text-body1"
-            v-if="tooltip"
-            :delay="150"
-            >{{ tooltip }}</q-tooltip
-        >
-        <q-badge
-            v-if="badge !== undefined"
-            floating
-            rounded
-            :color="badgeColor"
-            >{{ badge }}</q-badge
-        >
-    </q-btn>
-</template>
-
-<script lang="ts" setup>
-const props = withDefaults(
-    defineProps<{
-        tooltip?: string
-        badge?: string | number
-        badgeColor?: string
-    }>(),
-    {
-        badgeColor: 'red',
-    }
-)
-</script>
+<template>
+    <q-btn v-bind="$attrs">
+        <q-tooltip
+            class="text-body1"
+            style="white-space: break-spaces"
+            v-if="tooltip"
+            :delay="150"
+            >{{ tooltip }}</q-tooltip
+        >
+        <q-badge
+            v-if="badge !== undefined"
+            floating
+            rounded
+            :color="badgeColor ?? 'red'"
+            >{{ badge }}</q-badge
+        >
+    </q-btn>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+    tooltip?: string
+    badge?: string | number
+    badgeColor?: string
+}>()
+</script>

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

@@ -1,11 +1,11 @@
-<template>
-    <qx-btn
-        v-bind="$attrs"
-        flat
-        dense
-    />
-</template>
-
-<script lang="ts" setup>
-// this component follow qx-btn, with default flat and dense
-</script>
+<template>
+    <qx-btn
+        v-bind="$attrs"
+        flat
+        dense
+    />
+</template>
+
+<script lang="ts" setup>
+// this component follow qx-btn, with default flat and dense
+</script>