@d-mok/quasar-app-extension-quasar-axe 4.0.12 → 4.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "4.0.12",
+    "version": "4.1.2",
     "description": "A Quasar App Extension",
     "main": "src/index.js",
     "scripts": {

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

@@ -1,5 +1,10 @@
 import { boot } from 'quasar/wrappers'
-import { LocationQuery, LocationQueryValue, RouteRecordRaw } from 'vue-router'
+import {
+    LocationQuery,
+    LocationQueryValue,
+    RouteLocationNormalizedGeneric,
+    RouteRecordRaw,
+} from 'vue-router'
 
 if (!process.env.HOME_ROUTE) throw 'Missing HOME_ROUTE in process.env!'
 
@@ -7,33 +12,57 @@ const HOME_ROUTE = process.env.HOME_ROUTE ?? '/'
 
 console.log('[QuasarAxe] Run Boot AutoRoute')
 
-const pages = import.meta.glob<any>('src/**/pages/**/*.vue', { eager: true })
+function parse(glob: Record<string, { default: any }>) {
+    return Object.entries(glob).map(([filepath, val]) => {
+        const filename = filepath
+            .split('/')
+            .at(-1)!
+            .replace(/\.\w+$/, '')
+        const name = filename.toLowerCase().replace('_', '') // for underscore pages
+        return {
+            filepath,
+            filename,
+            // for raw route record
+            component: val.default,
+            path: '/' + name, // absolute path
+            name: name,
+            props: (route: RouteLocationNormalizedGeneric) =>
+                castQuery(route.query),
+            children: [] as RouteRecordRaw[],
+        }
+    })
+}
 
-const routes: RouteRecordRaw[] = Object.keys(pages).map(path => ({
-    path: pascal(path).toLowerCase(),
-    name: pascal(path).toLowerCase(),
-    component: pages[path].default,
-    props: route => castQuery(route.query),
-}))
+const [layoutMaster] = parse(
+    import.meta.glob('src/boot/axe/LayoutMaster.vue', { eager: true })
+)
+const layouts = parse(import.meta.glob('src/layouts/*.vue', { eager: true }))
+const pages = parse(import.meta.glob('src/pages/**/*.vue', { eager: true }))
 
-const _pages = import.meta.glob<any>('src/**/_*.vue', { eager: true })
+for (const layout of layouts) {
+    layout.children = pages.filter($ =>
+        $.filepath.includes('pages/' + layout.filename)
+    )
+}
 
-const _routes: RouteRecordRaw[] = Object.keys(_pages).map(path => ({
-    path: pascal(path).toLowerCase().replace('_', ''),
-    name: pascal(path).toLowerCase().replace('_', ''),
-    component: _pages[path].default,
-    props: route => castQuery(route.query),
-}))
+console.dev('[QuasarAxe] Routes:')
+console.dev(layouts)
 
 export default boot(({ app, router }) => {
     router.addRoute({
+        component: layoutMaster?.component,
         path: '/',
-        component: () => import('src/layouts/Layout.vue'),
-        children: [...routes, ..._routes, { path: '/', redirect: HOME_ROUTE }],
-    })
-    router.addRoute({
-        path: '/:catchAll(.*)*',
-        redirect: HOME_ROUTE,
+        children: [
+            ...layouts,
+            {
+                path: '/:catchAll(.*)*',
+                redirect: HOME_ROUTE,
+            },
+            {
+                path: '/',
+                redirect: HOME_ROUTE,
+            },
+        ],
     })
 })
 
@@ -41,13 +70,6 @@ export default boot(({ app, router }) => {
  * HELPER FUNCTIONS
  */
 
-function pascal(s: string): string {
-    return s
-        .split('/')
-        .pop()!
-        .replace(/\.\w+$/, '')
-}
-
 type QueryValueBasicType = string | number | boolean | undefined
 type QueryValueType = QueryValueBasicType | QueryValueBasicType[]
 

package/src/templates/src/boot/axe/LayoutMaster.vue

@@ -0,0 +1,12 @@
+<template>
+    <router-view v-slot="{ Component }">
+        <suspense>
+            <template #default>
+                <component :is="Component" />
+            </template>
+            <template #fallback>
+                <div></div>
+            </template>
+        </suspense>
+    </router-view>
+</template>

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

@@ -104,6 +104,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { setCssVar } from 'quasar'
 
 type item = {
     title?: string
@@ -128,6 +129,8 @@ let {
     noMenu = false,
     onSignOut,
     account,
+    primaryColor,
+    positiveColor,
 } = defineProps<{
     title: string
     appendix?: string
@@ -141,6 +144,8 @@ let {
     noMenu?: boolean
     onSignOut?: () => void
     account?: string
+    primaryColor?: string
+    positiveColor?: string
 }>()
 
 let open = ref(false)
@@ -152,6 +157,15 @@ const currentRouteItem = computed(() => {
         $ => $.link.replace('/', '') === route.path.replace('/', '')
     )
 })
+
+if (primaryColor) {
+    setCssVar('primary', primaryColor)
+    setCssVar('positive', primaryColor)
+}
+
+if (positiveColor) {
+    setCssVar('positive', positiveColor)
+}
 </script>
 
 <style scoped>

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

@@ -1,16 +0,0 @@
-<template>
-    <q-btn
-        v-bind="$attrs"
-        label="Sign Out"
-        @click="signOut"
-    />
-</template>
-
-<script lang="ts" setup>
-import { supabase } from '../../../utils'
-
-function signOut() {
-    supabase.auth.signOut()
-    supabase.signIn()
-}
-</script>