@hostlink/nuxt-light 1.51.2 → 1.52.1

package/dist/runtime/pages/System/menu/index.vue

@@ -176,13 +176,13 @@ const menusOnly = computed(() => {
         <q-dialog v-model="showMove">
             <l-card>
                 <q-card-section>
-                    <q-tree :nodes="menus" :selected-color="$light.color" default-expand-all
-                        v-model:selected="moveTarget" node-key="uuid" ref="tree2" />
+                    <q-tree :nodes="menus" default-expand-all v-model:selected="moveTarget" node-key="uuid"
+                        ref="tree2" />
                 </q-card-section>
 
                 <q-card-actions align="right">
-                    <q-btn flat label="Cancel" :color="$light.color" v-close-popup />
-                    <q-btn flat label="Move" :color="$light.color" @click="onMoveConfirm" />
+                    <q-btn flat label="Cancel" color="primary" v-close-popup />
+                    <q-btn flat label="Move" color="primary" @click="onMoveConfirm" />
                     <!-- q-btn flat label="Move to root" color="primary" @click="onMoveToRoot" /-->
                 </q-card-actions>
             </l-card>
@@ -201,7 +201,8 @@ const menusOnly = computed(() => {
                         <l-btn @click="onAddSeparator(selectedNode)" label="Add Separator" icon="sym_o_add" />
                     </template>
                     <template v-else>
-                        <q-btn-dropdown v-bind="$light.getButtonProps({ label: 'Add' })" icon="sym_o_add">
+                        <q-btn-dropdown v-bind="$light.getButtonProps({ label: 'Add' })" icon="sym_o_add"
+                            color="primary">
                             <q-list>
                                 <q-item clickable v-close-popup @click="onAddChild(selectedNode)">
                                     <q-item-section>
@@ -232,7 +233,8 @@ const menusOnly = computed(() => {
                         <l-btn @click="onMoveDown(selectedNode)" label="Down" icon="sym_o_arrow_downward" />
 
 
-                        <q-btn-dropdown v-bind="$light.getButtonProps({ label: 'Add menus' })" icon="sym_o_add">
+                        <q-btn-dropdown v-bind="$light.getButtonProps({ label: 'Add menus' })" icon="sym_o_add"
+                            color="primary">
                             <q-list>
                                 <q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'list')">
                                     <q-item-section>
@@ -254,8 +256,7 @@ const menusOnly = computed(() => {
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
 
-                    <q-tree :nodes="menus" :selected-color="$light.color" default-expand-all v-model:selected="selected"
-                        node-key="uuid" ref="tree1" />
+                    <q-tree :nodes="menus" default-expand-all v-model:selected="selected" node-key="uuid" ref="tree1" />
                 </template>
 
                 <template #after v-if="selected">

package/dist/runtime/pages/System/setting.vue

@@ -44,7 +44,7 @@ const onSubmit = async (d) => {
         <l-card>
             <q-splitter unit="px" :model-value="145">
                 <template #before>
-                    <q-tabs v-model="tab" vertical :active-color="$light.color">
+                    <q-tabs v-model="tab" vertical>
                         <q-tab name="general" icon="sym_o_info" :label="$t('General')" />
                         <q-tab name="security" icon="sym_o_security" :label="$t('Security')" />
                         <q-tab name="Modules" icon="sym_o_apps" :label="$t('Modules')" />
@@ -63,8 +63,8 @@ const onSubmit = async (d) => {
                     <l-system-setting-forget-password v-if="tab == 'forget-password'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-authentication v-if="tab == 'authentication'" v-bind="obj" @submit="onSubmit" />
 
-                    
-                    
+
+
                 </template>
             </q-splitter>
         </l-card>

package/dist/runtime/pages/User/_user_id/view.vue

@@ -49,7 +49,7 @@ const reset2fa = async () => {
         </template>
 
         <q-card flat bordered>
-            <l-tabs :active-color="$light.color" inline-label align="justify">
+            <l-tabs inline-label align="justify">
                 <l-tab name="overview" icon="sym_o_person" :label="$t('Overview')">
                     <l-user-overview :id="id" />
                 </l-tab>

package/dist/runtime/pages/User/profile.vue

@@ -63,7 +63,7 @@ eventLogCols.forEach((col) => {
                     </q-card-section>
 
                     <q-card-section class="text-center text-center q-pt-none">
-                        <q-chip v-for="role in my.roles" :key="role" :label="role" :color="$light.color"
+                        <q-chip v-for="role in my.roles" :key="role" :label="role" color="primary"
                             text-color="white" class="q-ma-xs" />
                     </q-card-section>
 

package/dist/runtime/pages/User/setting/menu.vue

@@ -258,12 +258,11 @@ const resetMenus = () => {
             <l-card>
                 <q-card-section>
                     <div class="text-h6">Select Move Target</div>
-                    <q-tree :nodes="userMenus" :selected-color="$light.color" default-expand-all
-                        v-model:selected="moveTarget" node-key="uuid" />
+                    <q-tree :nodes="userMenus" default-expand-all v-model:selected="moveTarget" node-key="uuid" />
                 </q-card-section>
                 <q-card-actions align="right">
-                    <q-btn flat label="Cancel" :color="$light.color" v-close-popup />
-                    <q-btn flat label="Move" :color="$light.color" @click="confirmMove" />
+                    <q-btn flat label="Cancel" color="primary" v-close-popup />
+                    <q-btn flat label="Move" color="primary" @click="confirmMove" />
                 </q-card-actions>
             </l-card>
         </q-dialog>
@@ -278,8 +277,7 @@ const resetMenus = () => {
                 <template #before>
                     <div class="q-pa-md">
                         <div class="text-h6 q-mb-md">Available Menu Items</div>
-                        <q-tree :nodes="availableMenus" :selected-color="$light.color" default-expand-all
-                            node-key="uuid">
+                        <q-tree :nodes="availableMenus" default-expand-all node-key="uuid">
                             <template v-slot:default-header="prop">
                                 <div class="row items-center full-width">
                                     <q-icon :name="prop.node.icon || 'sym_o_menu'" class="q-mr-sm" size="sm" />
@@ -304,7 +302,7 @@ const resetMenus = () => {
                         <q-card-actions class="q-mb-md q-gutter-xs" v-if="currentNodeDetail">
                             <template v-if="currentNodeDetail.type === 'root'">
                                 <q-btn-dropdown v-bind="$light.getButtonProps({ label: 'Add' })" icon="sym_o_add"
-                                    size="sm">
+                                    size="sm" color="primary">
                                     <q-list>
                                         <q-item clickable v-close-popup @click="createNewFolder">
                                             <q-item-section avatar>
@@ -335,7 +333,7 @@ const resetMenus = () => {
                             </template>
                             <template v-else>
                                 <q-btn-dropdown v-bind="$light.getButtonProps({ label: 'Add' })" icon="sym_o_add"
-                                    size="sm">
+                                    size="sm" color="primary">
                                     <q-list>
                                         <q-item clickable v-close-popup @click="createNewFolder">
                                             <q-item-section avatar>
@@ -368,15 +366,15 @@ const resetMenus = () => {
                                     size="sm" color="negative" />
                                 <l-btn @click="moveUp(currentNodeDetail)" label="Move Up" icon="sym_o_arrow_upward"
                                     size="sm" />
-                                <l-btn @click="moveDown(currentNodeDetail)" label="Move Down" icon="sym_o_arrow_downward"
-                                    size="sm" />
+                                <l-btn @click="moveDown(currentNodeDetail)" label="Move Down"
+                                    icon="sym_o_arrow_downward" size="sm" />
                                 <l-btn @click="moveToGroup" label="Move to..." icon="sym_o_drive_file_move" size="sm" />
                             </template>
                         </q-card-actions>
 
                         <!-- Menu tree -->
-                        <q-tree :nodes="userMenus" :selected-color="$light.color" default-expand-all
-                            v-model:selected="selectedNode" node-key="uuid" ref="userMenuTree">
+                        <q-tree :nodes="userMenus" default-expand-all v-model:selected="selectedNode" node-key="uuid"
+                            ref="userMenuTree">
                             <template v-slot:default-header="prop">
                                 <div class="row items-center full-width">
                                     <q-icon :name="prop.node.type === 'separator' ? 'sym_o_more_horiz' :

package/dist/runtime/pages/User/setting/style.vue

@@ -85,18 +85,18 @@ const inputDesign = computed({
             <l-col md="6">
                 <l-card title="Table" minimizable class="col-12">
                     <q-card-section>
-                        <q-toggle v-model="styles.table.dense" label="Dense" :color="$light.color" />
-                        <q-toggle v-model="styles.table.flat" label="Flat" :color="$light.color" />
-                        <q-toggle v-model="styles.table.bordered" label="Bordered" :color="$light.color" />
-                        <q-toggle v-model="styles.table.square" label="Square" :color="$light.color" />
+                        <q-toggle v-model="styles.table.dense" label="Dense" />
+                        <q-toggle v-model="styles.table.flat" label="Flat" />
+                        <q-toggle v-model="styles.table.bordered" label="Bordered" />
+                        <q-toggle v-model="styles.table.square" label="Square" />
 
-                        <q-field :label="`Separator`" stack-label :color="$light.color">
+                        <q-field :label="`Separator`" stack-label>
                             <q-option-group v-model="styles.table.separator" inline :options="[
                                 { label: 'Horizontal', value: 'horizontal' },
                                 { label: 'Vertical', value: 'vertical' },
                                 { label: 'Cell', value: 'cell' },
                                 { label: 'None', value: 'none' },
-                            ]" :color="$light.color" />
+                            ]" />
                         </q-field>
 
                     </q-card-section>
@@ -104,22 +104,22 @@ const inputDesign = computed({
 
                 <l-card title="Card" minimizable>
                     <q-card-section>
-                        <q-toggle v-model="styles.card.flat" label="Flat" :color="$light.color" />
-                        <q-toggle v-model="styles.card.bordered" label="Bordered" :color="$light.color" />
-                        <q-toggle v-model="styles.card.square" label="Square" :color="$light.color" />
+                        <q-toggle v-model="styles.card.flat" label="Flat" />
+                        <q-toggle v-model="styles.card.bordered" label="Bordered" />
+                        <q-toggle v-model="styles.card.square" label="Square" />
                     </q-card-section>
                 </l-card>
 
                 <l-card title="Button" minimizable>
                     <q-card-section>
-                        <q-toggle v-model="styles.button.outline" label="Outline" :color="$light.color" />
-                        <q-toggle v-model="styles.button.flat" label="Flat" :color="$light.color" />
-                        <q-toggle v-model="styles.button.unelevated" label="Unelevated" :color="$light.color" />
-                        <q-toggle v-model="styles.button.rounded" label="Rounded" :color="$light.color" />
-                        <q-toggle v-model="styles.button.push" label="Push" :color="$light.color" />
-                        <q-toggle v-model="styles.button.square" label="Square" :color="$light.color" />
-                        <q-toggle v-model="styles.button.glossy" label="Glossy" :color="$light.color" />
-                        <q-toggle v-model="styles.button.dense" label="Dense" :color="$light.color" />
+                        <q-toggle v-model="styles.button.outline" label="Outline" />
+                        <q-toggle v-model="styles.button.flat" label="Flat" />
+                        <q-toggle v-model="styles.button.unelevated" label="Unelevated" />
+                        <q-toggle v-model="styles.button.rounded" label="Rounded" />
+                        <q-toggle v-model="styles.button.push" label="Push" />
+                        <q-toggle v-model="styles.button.square" label="Square" />
+                        <q-toggle v-model="styles.button.glossy" label="Glossy" />
+                        <q-toggle v-model="styles.button.dense" label="Dense" />
 
                     </q-card-section>
                 </l-card>
@@ -133,14 +133,14 @@ const inputDesign = computed({
                             { label: 'Outlined', value: 'outlined' },
                             { label: 'Standout', value: 'standout' },
                             { label: 'Borderless', value: 'borderless' },
-                        ]" :color="$light.color" />
+                        ]" />
 
 
 
-                        <q-toggle v-model="styles.input.rounded" label="Rounded" :color="$light.color" />
-                        <q-toggle v-model="styles.input.dense" label="Dense" :color="$light.color" />
-                        <q-toggle v-model="styles.input.square" label="Square" :color="$light.color" />
-                        <q-toggle v-model="styles.input.stackLabel" label="Stack label" :color="$light.color" />
+                        <q-toggle v-model="styles.input.rounded" label="Rounded" />
+                        <q-toggle v-model="styles.input.dense" label="Dense" />
+                        <q-toggle v-model="styles.input.square" label="Square" />
+                        <q-toggle v-model="styles.input.stackLabel" label="Stack label" />
                     </q-card-section>
                 </l-card>
 
@@ -155,11 +155,11 @@ const inputDesign = computed({
                     </q-toolbar>
                     <q-card-section class="q-gutter-md">
 
-                        <q-btn :color="$light.color" icon="sym_o_person" label="Button" v-bind="styles.button"></q-btn>
+                        <q-btn color="primary" icon="sym_o_person" label="Button" v-bind="styles.button"></q-btn>
 
-                        <q-input :color="$light.color" label="Input" v-bind="styles.input" />
+                        <q-input label="Input" v-bind="styles.input" />
 
-                        <q-select :color="$light.color" label="Select" v-bind="styles.input" :options="[
+                        <q-select label="Select" v-bind="styles.input" :options="[
                             { label: 'A', value: 'a' },
                             { label: 'B', value: 'b' },
                             { label: 'C', value: 'c' }

package/dist/runtime/pages/User/setting.vue

@@ -10,7 +10,7 @@ const route = useRoute();
         <l-card>
             <q-splitter unit="px" :model-value="120">
                 <template #before>
-                    <q-tabs v-model="tab" vertical :active-color="$light.color">
+                    <q-tabs v-model="tab" vertical active-color="primary">
                         <q-route-tab name="general" icon="sym_o_info" :label="$t('General')" to="/User/setting" exact />
                         <q-route-tab name="information" icon="sym_o_info" :label="$t('Information')"
                             to="/User/setting/information" exact />
@@ -27,8 +27,7 @@ const route = useRoute();
                         <q-route-tab name="fav" icon="sym_o_favorite" :label="$t('Favorite')"
                             to="/User/setting/favorite" exact />
 
-                        <q-route-tab name="menu" icon="sym_o_menu" :label="$t('Menu')"
-                            to="/User/setting/menu" exact />
+                        <q-route-tab name="menu" icon="sym_o_menu" :label="$t('Menu')" to="/User/setting/menu" exact />
                     </q-tabs>
                 </template>
 

package/dist/runtime/plugin.js

@@ -21,7 +21,10 @@ import TypeMailLog from "./models/MailLog.js";
 import TypeEventLog from "./models/EventLog.js";
 import TypeCustomerField from "./models/CustomField.js";
 import { zhTW } from "@formkit/i18n";
+import { useQuasar } from "quasar";
 export default defineNuxtPlugin((nuxtApp) => {
+  const $q = useQuasar();
+  console.log($q);
   addRouteMiddleware("auth", async (to, from) => {
     if (to.path == "/") {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.51.2",
+  "version": "1.52.1",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",