@hostlink/nuxt-light 1.3.1 → 1.4.1

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.3.1"
+  "version": "1.4.1"
 }

package/dist/runtime/components/l-app-main.vue

@@ -3,7 +3,7 @@ import { useRoute } from 'vue-router';
 import { useLight, q, m } from "#imports";
 import { useQuasar, Loading, Dialog } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { ref, computed, reactive, provide, watch, toRaw } from 'vue';
+import { ref, computed, reactive, provide, watch, toRaw, inject } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
 Loading.show()
@@ -17,7 +17,7 @@ const appVersion = config.public.appVersion ?? '0.0.1';
 
 const quasar = useQuasar();
 const tt = await q({
-    system: ["devMode"],
+    system: ["devMode", "time"],
     app: ["menus", "viewAsMode", "languages",
         "copyrightYear",
         "copyrightName",
@@ -29,8 +29,11 @@ const tt = await q({
 let app = tt.app
 let my = reactive(tt.my)
 
-const light = useLight();
+const light = useLight({
+    color: my.styles?.color || 'primary'
+});
 light.init(my.styles);
+
 //set permission
 light.setPermissions(my.permissions);
 
@@ -49,10 +52,13 @@ quasar.dark.set(light.isDarkMode());
 const i18n = useI18n();
 i18n.locale = my.language || 'en';
 
-let system = null
+let system = tt.system;
 
 if (light.isGranted("system.storage")) {
-    system = await q("system", ["diskFreeSpace", "diskUsageSpace", "diskTotalSpace", "diskFreeSpacePercent"]);
+    let s = await q("system", ["diskFreeSpace", "diskUsageSpace", "diskTotalSpace", "diskFreeSpacePercent"]);
+    //merge system value
+    system = { ...system, ...s };
+
 }
 
 // message
@@ -258,8 +264,16 @@ watch(menuWidth, () => {
     light.setStyle("menuWidth", menuWidth.value)
 })
 
+const c1 = computed(() => {
+    return light.getColorValue(light.color)
+})
+
 </script>
 
+<style scoped>
+.q-layout__section--marginal{background-color:v-bind(c1)}
+</style>
+
 <template>
     <q-layout :view="layoutView">
         <q-header bordered class="text-white" :class="`bg-${light.color}`">
@@ -394,7 +408,7 @@ watch(menuWidth, () => {
             <q-scroll-area class="fit">
                 <l-customizer v-model:color="light.color" v-model:theme="light.theme" v-model:miniState="style.miniState"
                     v-model:dense="style.dense" v-model:menuOverlayHeader="style.menuOverlayHeader"
-                    v-model:footer="style.footer" v-model:menuWidth="menuWidth" />
+                    v-model:footer="style.footer" v-model:menuWidth="menuWidth" :time="system.time" />
             </q-scroll-area>
         </q-drawer>
 

package/dist/runtime/components/l-app.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { provide, ref } from 'vue'
 import { useLight, watch } from "#imports";
 import { useRuntimeConfig } from 'nuxt/app'
 import { setApiUrl } from '@hostlink/light'
@@ -32,6 +33,9 @@ try {
 }
 
 
+const color = ref(light.color);
+provide('color', color)
+
 </script>
 <template>
     <q-layout v-if="!app.logged">

package/dist/runtime/components/l-btn.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type QBtnProps } from "quasar";
-import { computed } from "vue";
+import { computed, inject, unref, toRaw } from "vue";
 import { useLight } from '#imports';
 import { useI18n } from "vue-i18n";
 
@@ -28,14 +28,12 @@ const attrs = computed(() => {
         a.label = t(a.label)
     }
 
+    a.color = (props.color != undefined) ? props.color : light.color
     return a;
-
 });
-
-
 </script>
 <template>
-    <q-btn v-bind="attrs" color="primary" v-if="$light.isGranted(permission)">
+    <q-btn v-bind="attrs" v-if="$light.isGranted(permission)">
         <slot></slot>
     </q-btn>
 </template>

package/dist/runtime/components/l-customizer.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed, ref } from 'vue'
 const menuWidth = defineModel('menuWidth', {
     type: Number,
     default: 280
@@ -38,6 +39,10 @@ const COLORS = [
 defineEmits(['update:theme', 'update:menuOverlayHeader', 'update:dense', 'update:color', 'update:miniState', 'update:footer'])
 
 const props = defineProps({
+    time: {
+        type: String,
+        default: ''
+    },
     color: {
         type: String,
         default: 'primary'
@@ -65,6 +70,19 @@ const props = defineProps({
 
 })
 
+
+//find the difference between the current time and the server time
+
+const time_diff = ref(new Date().getTime() - new Date(props.time).getTime());
+const server_time = ref(new Date(props.time).toLocaleTimeString());
+const server_date = ref(new Date(props.time).toLocaleDateString());
+
+setInterval(() => {
+    server_time.value = new Date(new Date().getTime() - time_diff.value).toLocaleTimeString();
+    server_date.value = new Date(new Date().getTime() - time_diff.value).toLocaleDateString();
+}, 500);
+
+
 </script>
 <template>
     <q-list>
@@ -80,11 +98,11 @@ const props = defineProps({
                 <q-item-label>Skin</q-item-label>
                 <div class="q-gutter-sm">
                     <q-radio :model-value="theme" val="light" label="Light"
-                        @update:model-value="$emit('update:theme', $event)" />
+                        @update:model-value="$emit('update:theme', $event)" :color="$light.color" />
                     <q-radio :model-value="theme" val="dark" label="Dark"
-                        @update:model-value="$emit('update:theme', $event)" />
+                        @update:model-value="$emit('update:theme', $event)" :color="$light.color" />
                     <q-radio :model-value="theme" val="semi-dark" label="Semi dark"
-                        @update:model-value="$emit('update:theme', $event)" />
+                        @update:model-value="$emit('update:theme', $event)" :color="$light.color" />
                 </div>
             </q-item-section>
         </q-item>
@@ -104,7 +122,8 @@ const props = defineProps({
                 <q-item-label>{{ $t('Mini mode') }}</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="miniState" @update:model-value="$emit('update:miniState', $event)" />
+                <q-toggle :model-value="miniState" @update:model-value="$emit('update:miniState', $event)"
+                    :color="$light.color" />
             </q-item-section>
         </q-item>
         <q-separator />
@@ -114,7 +133,7 @@ const props = defineProps({
                 <q-item-label>Menu dense mode</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="dense" @update:model-value="$emit('update:dense', $event)" />
+                <q-toggle :model-value="dense" @update:model-value="$emit('update:dense', $event)" :color="$light.color" />
             </q-item-section>
         </q-item>
 
@@ -125,8 +144,8 @@ const props = defineProps({
                 <q-item-label>Menu overlay header</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="menuOverlayHeader"
-                    @update:model-value="$emit('update:menuOverlayHeader', $event)" />
+                <q-toggle :model-value="menuOverlayHeader" @update:model-value="$emit('update:menuOverlayHeader', $event)"
+                    :color="$light.color" />
             </q-item-section>
         </q-item>
 
@@ -137,7 +156,8 @@ const props = defineProps({
                 <q-item-label>{{ $t('Show footer') }}</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="footer" @update:model-value="$emit('update:footer', $event)" />
+                <q-toggle :model-value="footer" @update:model-value="$emit('update:footer', $event)"
+                    :color="$light.color" />
             </q-item-section>
         </q-item>
         <q-separator />
@@ -150,5 +170,14 @@ const props = defineProps({
         </q-item>
         <q-separator />
 
+        <q-item>
+            <q-item-section>
+                <q-item-label>{{ $t('Server time') }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+                <q-item-label>{{ server_date }} {{ server_time }} </q-item-label>
+            </q-item-section>
+        </q-item>
+
     </q-list>
 </template>

package/dist/runtime/components/l-date-picker.vue

@@ -152,11 +152,11 @@ const date_attrs = computed(() => {
 
 </script>
 <template>
-    <q-input v-bind="input_attrs" v-model="localValue" :rules="rules">
+    <q-input v-bind="input_attrs" v-model="localValue" :rules="rules" :color="$light.color">
         <template v-slot:prepend>
             <q-btn icon="sym_o_event" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
-                    <q-date v-bind="date_attrs" v-model="dateValue">
+                    <q-date v-bind="date_attrs" v-model="dateValue" :color="$light.color">
                         <div class="row items-center justify-end">
                             <q-btn v-close-popup label="Close" color="primary" flat />
                         </div>

package/dist/runtime/components/l-fav-menu.vue

@@ -1,9 +1,25 @@
 <script setup>
+import { computed } from 'vue'
+import { useLight } from '#imports'
+const light = useLight()
 const props = defineProps(["value", "dense"])
+
+
+const color1 = computed(() => {
+    return light.getColorValue()
+});
+
+const color2 = computed(() => {
+    let c = light.getColorValue()
+    //  0.7 alpha
+    c = c + "b3";
+    return c;
+});
+
 </script>
 
 <style scoped>
-.menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,var(--q-primary),rgba(115,103,240,.7));color:#fff}
+.menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,v-bind(color1),v-bind(color2));color:#fff}
 </style>
 <template>
     <q-expansion-item :label="$t('My favorite')" :dense="dense" ref="expansion" icon="sym_o_favorite">

package/dist/runtime/components/l-field.vue

@@ -4,9 +4,9 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import type { QFieldProps } from 'quasar';
-
 const props = defineProps<QFieldProps>()
 const light = useLight();
+
 const { t } = useI18n();
 
 const attrs = computed(() => {
@@ -20,6 +20,9 @@ const attrs = computed(() => {
         a.label = t(props.label);
     }
 
+    if (props.color === undefined) {
+        a.color = light.color
+    }
 
     return a;
 });

package/dist/runtime/components/l-file-manager.vue

@@ -3,7 +3,7 @@ import { VariableType } from "json-to-graphql-query";
 import { useI18n } from "vue-i18n";
 import { ref, watch, computed } from 'vue';
 import { useQuasar } from 'quasar';
-import { q, m, useLight } from '../';
+import { q, m, useLight } from '#imports';
 import {
   fsListFolders, fsCreateFolder, fsDeleteFolder, fsDeleteFile, fsRenameFile, fsRenameFolder, fsReadFile,
   granted
@@ -501,7 +501,7 @@ const isDark = computed(() => light.isDarkMode());
         <q-list padding class="text-grey-8">
           <q-item>
             <q-item-section>
-              <q-btn icon="add" outline rounded color="primary" :label="$t('New')">
+              <q-btn icon="add" outline rounded :color="light.color" :label="$t('New')">
                 <q-menu>
                   <q-list>
                     <q-item clickable v-close-popup @click="onNewFolder" v-if="permission.includes('fs.folder.create')">
@@ -571,8 +571,8 @@ const isDark = computed(() => light.isDarkMode());
           </q-card-section>
 
           <q-card-actions align="right">
-            <q-btn flat label="Cancel" color="primary" v-close-popup></q-btn>
-            <q-btn flat label="Upload" color="primary" @click="onUploadFiles"></q-btn>
+            <q-btn flat label="Cancel" :color="light.color" v-close-popup></q-btn>
+            <q-btn flat label="Upload" :color="light.color" @click="onUploadFiles"></q-btn>
           </q-card-actions>
         </l-card>
       </q-dialog>

package/dist/runtime/components/l-form.vue

@@ -86,7 +86,7 @@ const onSubmit = (e) => {
             </q-card-section>
 
             <q-card-actions align="right">
-                <l-btn color="primary" :icon="submitIcon" :label="submitLabel" @click="save" :loading="loading" />
+                <l-btn :icon="submitIcon" :label="submitLabel" @click="save" :loading="loading" />
             </q-card-actions>
         </l-card>
     </q-form>

package/dist/runtime/components/l-input.vue

@@ -142,8 +142,9 @@ const attrs = computed(() => {
         if (props.required) {
             a.label = "* " + a.label;
         }
-
     }
+
+    if (props.color === undefined) a.color = light.color
     return a;
 })
 </script>

package/dist/runtime/components/l-login.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useLight } from "#imports";
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, inject } from 'vue'
 import { useQuasar, Notify, Dialog } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { m, notify } from '#imports';
@@ -196,14 +196,15 @@ onMounted(() => {
           <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
             clearable :outlined="false" stackLabel autocomplete="username" />
           <l-input v-model="data.password" label="Password" type="password" clearable show-password stackLabel
-            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false" autocomplete="current-password" />
+            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false"
+            autocomplete="current-password" />
           <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code" required type="text" clearable>
           </l-input>
         </div>
       </q-form>
     </q-card-section>
     <q-card-actions>
-      <l-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit"/>
+      <l-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit" />
       <l-btn v-if="hasBioLogin" outline rounded color="primary" icon="sym_o_fingerprint" @click="bioLogin" />
       <l-btn label="Forget password" outline rounded color="primary" icon="sym_o_lock_reset" @click="forgetPassword" />
     </q-card-actions>

package/dist/runtime/components/l-menu.vue

@@ -1,7 +1,9 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { useLight } from '#imports'
 const props = defineProps(["value", "dense"])
 const menus = ref(null);
+const light = useLight();
 
 const expansion = ref(null);
 
@@ -24,14 +26,35 @@ defineExpose({
     }
 })
 
+const isShowExpansionItem = computed(() => {
+    if (props.value.children) {
+        if (props.value.children.length > 0) {
+            return true;
+
+        }
+    }
+    return false;
+
+});
+
+const color1 = computed(() => {
+    return light.getColorValue()
+});
+
+const color2 = computed(() => {
+    let c = light.getColorValue()
+    //  0.7 alpha
+    c = c + "b3";
+    return c;
+});
+
 </script>
 
 <style scoped>
-.menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,var(--q-primary),rgba(115,103,240,.7));color:#fff}
+.menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,v-bind(color1),v-bind(color2));color:#fff}
 </style>
 <template>
-    <q-expansion-item v-if="value.children?.length > 0" :label="$t(value.label)" :icon="value.icon" :dense="dense"
-        ref="expansion">
+    <q-expansion-item v-if="isShowExpansionItem" :label="$t(value.label)" :icon="value.icon" :dense="dense" ref="expansion">
         <q-list class="q-pl-md">
             <l-menu :value="menu" v-for="menu in value.children" :dense="dense" @show="onShowChild(menu)"
                 ref="menus"></l-menu>
@@ -39,8 +62,8 @@ defineExpose({
     </q-expansion-item>
     <q-list v-else class="menu-list" :dense="dense">
         <q-separator v-if="value.type == 'separator'" :spaced="value.spaced" />
-        <q-item-label header v-if="value.type=='header'">{{ value.label }}</q-item-label>
-        <q-item v-ripple :to="value.to" v-if="!value.type" >
+        <q-item-label header v-if="value.type == 'header'">{{ value.label }}</q-item-label>
+        <q-item v-ripple :to="value.to" v-if="!value.type">
             <q-item-section avatar>
                 <q-icon :name="value.icon" />
             </q-item-section>

package/dist/runtime/components/l-user-overview.vue

@@ -49,7 +49,7 @@ const obj = await model('User').get({ user_id: props.id }, ["user_id", "username
                             </q-item-section>
                             <q-item-section>
                                 <div class="q-gutter-xs float-left">
-                                    <q-badge v-for="role in obj.roles" :key="role">{{ role }}</q-badge>
+                                    <q-badge v-for="role in obj.roles" :key="role" :color="$light.color">{{ role }}</q-badge>
                                 </div>
                             </q-item-section>
                         </q-item>

package/dist/runtime/formkit/OptionGroup.vue

@@ -16,7 +16,7 @@ const value = computed({
 </script>
 <template>
     <l-field label="Roles" stack-label :label="context.label" :error="error" :error-message="errorMessage">
-        <q-option-group type="checkbox" :options="context.options" v-model="value" inline v-bind="context.attrs">
+        <q-option-group type="checkbox" :options="context.options" v-model="value" inline v-bind="context.attrs" :color="$light.color">
         </q-option-group>
     </l-field>
 </template>

package/dist/runtime/index.d.ts

@@ -6,6 +6,7 @@ declare const app: {
     isAdmin: boolean;
     permissions: string[];
     myFavorites: any[];
+    getColorValue: () => any;
     setMyFavorites: (favorites: any[]) => void;
     reloadMyFavorites: () => Promise<void>;
     getMyFavorites: () => any[];
@@ -35,7 +36,9 @@ declare module 'vue' {
         $light: typeof app;
     }
 }
-export declare const useLight: () => {
+export declare const useLight: (options?: {
+    color?: string;
+}) => {
     company: string;
     companyLogo: string;
     color: string;
@@ -43,6 +46,7 @@ export declare const useLight: () => {
     isAdmin: boolean;
     permissions: string[];
     myFavorites: any[];
+    getColorValue: () => any;
     setMyFavorites: (favorites: Array<any>) => void;
     reloadMyFavorites: () => Promise<void>;
     getMyFavorites: () => any[];

package/dist/runtime/index.mjs

@@ -1,8 +1,37 @@
 import packageJson from "../../package.json";
-import { watch, reactive } from "vue";
+import { watch, reactive, toRaw } from "vue";
 import { m, q } from "./lib/index.mjs";
 const errors = [];
 let styles = {};
+const COLOR_CODE = {
+  red: "#f44336",
+  pink: "#e91e63",
+  purple: "#9c27b0",
+  "deep-purple": "#673ab7",
+  indigo: "#3f51b5",
+  blue: "#2196f3",
+  "light-blue": "#03a9f4",
+  cyan: "#00bcd4",
+  teal: "#009688",
+  green: "#4caf50",
+  "light-green": "#8bc34a",
+  lime: "#cddc39",
+  yellow: "#ffeb3b",
+  amber: "#ffc107",
+  orange: "#ff9800",
+  "deep-orange": "#ff5722",
+  brown: "#795548",
+  grey: "#9e9e9e",
+  "blue-grey": "#607d8b",
+  primary: "#7367f0",
+  secondary: "#82868b",
+  accent: "#9C27B0",
+  positive: "#28c76f",
+  negative: "#ea5455",
+  info: "#00cfe8",
+  warning: "#ff9f43",
+  dark: "#4b4b4b"
+};
 let defaultStyle = {
   inputOutlined: true,
   inputStackLabel: true,
@@ -13,11 +42,14 @@ let defaultStyle = {
 const app = reactive({
   company: "",
   companyLogo: "",
-  color: "primary",
+  color: "",
   theme: "light",
   isAdmin: false,
   permissions: Array(),
   myFavorites: Array(),
+  getColorValue: () => {
+    return COLOR_CODE[app.color];
+  },
   setMyFavorites: (favorites) => {
     app.myFavorites = favorites;
   },
@@ -106,9 +138,6 @@ const app = reactive({
     app.color = styles2.color || "primary";
     app.theme = styles2.theme || "semi-dark";
     app.setStyles(styles2);
-    watch(() => app.color, async () => {
-      await app.setStyle("color", app.color);
-    });
     watch(() => app.theme, async () => {
       await app.setStyle("theme", app.theme);
     });
@@ -127,7 +156,16 @@ const app = reactive({
   }
 });
 let currentRoute = null;
-export const useLight = () => {
+watch(() => app.color, async () => {
+  await m("updateMyStyle", {
+    name: "color",
+    value: app.color
+  });
+});
+export const useLight = (options = {}) => {
+  if (options.color !== void 0) {
+    toRaw(app).color = options.color;
+  }
   return app;
 };
 export * from "./lib/index.mjs";

package/dist/runtime/locales/zh-hk.json

@@ -1,4 +1,5 @@
 {
+    "Server time": "伺服器時間",
     "Developer": "開發者",
     "Modules": "模組",
     "Security": "安全",

package/dist/runtime/pages/Permission/add.vue

@@ -32,7 +32,7 @@ const onSave = async () => {
             <l-input label="Permission name" v-model="obj.value" required></l-input>
 
             <l-field label="Roles" stack-label>
-                <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
+                <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline :color="$light.color">
                 </q-option-group>
             </l-field>
 

package/dist/runtime/pages/Permission/all.vue

@@ -77,7 +77,10 @@ const onUpdate = (value, role, permission) => {
                     </q-td>
                     <q-td v-for="role in roles">
                         <q-checkbox v-model="props.row[role.name]"
-                            @update:model-value="onUpdate($event, role.name, props.row.permission)" />
+                            @update:model-value="onUpdate($event, role.name, props.row.permission)" 
+                            
+                            :color="$light.color"
+                            />
                     </q-td>
                 </q-tr>
 

package/dist/runtime/pages/Permission/export.vue

@@ -63,7 +63,7 @@ const submit = () => {
     <l-page>
         <l-form submit-label="Export" submit-icon="sym_o_download" @submit="submit">
             <l-field label="Roles" stack-label>
-                <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
+                <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline :color="$light.color">
                 </q-option-group>
             </l-field>
         </l-form>

package/dist/runtime/pages/Role/index.vue

@@ -124,8 +124,8 @@ const onRemoveUser = async (value, user) => {
 
             <template #body-cell-children="props">
                 <q-td>
-                    <q-select :options="role_options" v-model="props.row.children" multiple use-chips dense
-                        @remove="onRemoveChild(props.row.name, $event)" @add="onAddChild(props.row.name, $event)">
+                    <q-select :options="role_options" v-model="props.row.children" multiple use-chips
+                        dense @remove="onRemoveChild(props.row.name, $event)" @add="onAddChild(props.row.name, $event)">
 
                     </q-select>
                 </q-td>

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

@@ -211,7 +211,7 @@ const menusOnly = computed(() => {
         <q-dialog v-model="showMove">
             <l-card>
                 <q-card-section>
-                    <q-tree :nodes="menus" selected-color="primary" default-expand-all v-model:selected="moveTarget"
+                    <q-tree :nodes="menus" :selected-color="$light.color" default-expand-all v-model:selected="moveTarget"
                         node-key="uuid" ref="tree2" />
                 </q-card-section>
 
@@ -224,17 +224,17 @@ const menusOnly = computed(() => {
         </q-dialog>
 
         <l-card>
-            <q-card-actions  v-if="selectedNode">
+            <q-card-actions v-if="selectedNode">
                 <l-btn @click="onSave" label="Save" icon="sym_o_save" />
                 <l-btn @click="onReload" label="Reload" icon="sym_o_refresh" />
                 <template v-if="selectedNode.type == 'root'">
-                    <l-btn color="primary" @click="onAddChild(selectedNode)" label="Add" icon="sym_o_add" />
-                    <l-btn color="primary" @click="onAddHeader(selectedNode)" label="Add Header" icon="sym_o_add" />
-                    <l-btn color="primary" @click="onAddSeparator(selectedNode)" label="Add Separator" icon="sym_o_add" />
+                    <l-btn @click="onAddChild(selectedNode)" label="Add" icon="sym_o_add" />
+                    <l-btn @click="onAddHeader(selectedNode)" label="Add Header" icon="sym_o_add" />
+                    <l-btn @click="onAddSeparator(selectedNode)" label="Add Separator" icon="sym_o_add" />
                 </template>
 
                 <template v-else>
-                    <q-btn-dropdown color="primary" label="Add" icon="sym_o_add">
+                    <q-btn-dropdown :color="$light.color" label="Add" icon="sym_o_add">
                         <q-list>
                             <q-item clickable v-close-popup @click="onAddChild(selectedNode)">
                                 <q-item-section>
@@ -255,17 +255,17 @@ const menusOnly = computed(() => {
                         </q-list>
                     </q-btn-dropdown>
 
-                    <l-btn color="primary" @click="onRemove(selectedNode)" label="Remove" icon="sym_o_remove" />
+                    <l-btn @click="onRemove(selectedNode)" label="Remove" icon="sym_o_remove" />
 
 
-                    <l-btn color="primary" @click="onMove(selectedNode)" label="Move" icon="sym_o_move" />
+                    <l-btn @click="onMove(selectedNode)" label="Move" icon="sym_o_move" />
 
-                    <l-btn color="primary" @click="onMoveUp(selectedNode)" label="Up" icon="sym_o_arrow_upward" />
+                    <l-btn @click="onMoveUp(selectedNode)" label="Up" icon="sym_o_arrow_upward" />
 
-                    <l-btn color="primary" @click="onMoveDown(selectedNode)" label="Down" icon="sym_o_arrow_downward" />
+                    <l-btn @click="onMoveDown(selectedNode)" label="Down" icon="sym_o_arrow_downward" />
 
 
-                    <q-btn-dropdown color="primary" label="Add menus" icon="sym_o_add">
+                    <q-btn-dropdown :color="$light.color" label="Add menus" icon="sym_o_add">
                         <q-list>
                             <q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'list')">
                                 <q-item-section>
@@ -286,7 +286,7 @@ const menusOnly = computed(() => {
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
 
-                    <q-tree :nodes="menus" selected-color="primary" default-expand-all v-model:selected="selected"
+                    <q-tree :nodes="menus" :selected-color="$light.color" default-expand-all v-model:selected="selected"
                         node-key="uuid" ref="tree1" />
                 </template>
 

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

@@ -20,7 +20,7 @@ const id = route.params.user_id;
 
 
         <q-card flat bordered>
-            <q-tabs v-model="tab" :class="`text-${light.color}`" inline-label align="justify">
+            <q-tabs v-model="tab" :active-color="$light.color" inline-label align="justify">
                 <q-tab name="overview" icon="sym_o_person" label="Overview" />
                 <q-tab name="userlog" icon="sym_o_description" label="User log" />
                 <q-tab name="eventlog" icon="sym_o_description" label="Event log" />

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

@@ -67,42 +67,42 @@ const setDefault = async () => {
 <template>
     <l-form @save="onSave" :bordered="false">
         <div>
-            <q-checkbox v-model="styles.tableDense" label="Table dense" />
-            <q-checkbox v-model="styles.tableFlat" label="Table flat" />
-            <q-checkbox v-model="styles.tableBorder" label="Table bordered" />
+            <q-checkbox v-model="styles.tableDense" label="Table dense" :color="$light.color" />
+            <q-checkbox v-model="styles.tableFlat" label="Table flat" :color="$light.color" />
+            <q-checkbox v-model="styles.tableBorder" label="Table bordered" :color="$light.color" />
 
             <q-option-group v-model="styles.tableSeparator" inline class="q-mb-md" :options="[
                 { label: 'Horizontal', value: 'horizontal' },
                 { label: 'Vertical', value: 'vertical' },
                 { label: 'Cell', value: 'cell' },
                 { label: 'None', value: 'none' },
-            ]" />
+            ]" :color="$light.color" />
 
         </div>
 
         <div>
-            <q-checkbox v-model="styles.cardFlat" label="Card flat" />
-            <q-checkbox v-model="styles.cardBordered" label="Card bordered" />
-            <q-checkbox v-model="styles.cardSquare" label="Card square" />
+            <q-checkbox v-model="styles.cardFlat" label="Card flat" :color="$light.color"/>
+            <q-checkbox v-model="styles.cardBordered" label="Card bordered" :color="$light.color"/>
+            <q-checkbox v-model="styles.cardSquare" label="Card square" :color="$light.color"/>
 
         </div>
 
         <div>
-            <q-checkbox v-model="styles.buttonOutline" label="Button outline" />
-            <q-checkbox v-model="styles.buttonRounded" label="Button rounded" />
-            <q-checkbox v-model="styles.buttonUnelevated" label="Button unelevated" />
-            <q-checkbox v-model="styles.buttonDense" label="Button dense" />
+            <q-checkbox v-model="styles.buttonOutline" label="Button outline" :color="$light.color"/>
+            <q-checkbox v-model="styles.buttonRounded" label="Button rounded" :color="$light.color"/>
+            <q-checkbox v-model="styles.buttonUnelevated" label="Button unelevated" :color="$light.color"/>
+            <q-checkbox v-model="styles.buttonDense" label="Button dense" :color="$light.color"/>
 
         </div>
 
         <div>
-            <q-checkbox v-model="styles.inputFilled" label="Input filled" />
-            <q-checkbox v-model="styles.inputOutlined" label="Input outlined" />
-            <q-checkbox v-model="styles.inputStandout" label="Input standout" />
-            <q-checkbox v-model="styles.inputRounded" label="Input rounded" />
-            <q-checkbox v-model="styles.inputDense" label="Input dense" />
-            <q-checkbox v-model="styles.inputSquare" label="Input square" />
-            <q-checkbox v-model="styles.inputStackLabel" label="Input stack label" />
+            <q-checkbox v-model="styles.inputFilled" label="Input filled" :color="$light.color"/>
+            <q-checkbox v-model="styles.inputOutlined" label="Input outlined" :color="$light.color"/>
+            <q-checkbox v-model="styles.inputStandout" label="Input standout" :color="$light.color"/>
+            <q-checkbox v-model="styles.inputRounded" label="Input rounded" :color="$light.color"/>
+            <q-checkbox v-model="styles.inputDense" label="Input dense" :color="$light.color"/>
+            <q-checkbox v-model="styles.inputSquare" label="Input square" :color="$light.color"/>
+            <q-checkbox v-model="styles.inputStackLabel" label="Input stack label" :color="$light.color"/>
 
 
         </div>
@@ -116,7 +116,7 @@ const setDefault = async () => {
                     UI preview
                     <div class="q-gutter-md q-mt-md">
 
-                        <q-btn color="primary" icon="sym_o_person" label="Button" :outline="styles.buttonOutline"
+                        <q-btn :color="$light.color" icon="sym_o_person" label="Button" :outline="styles.buttonOutline"
                             :rounded="styles.buttonRounded" :unelevated="styles.buttonUnelevated"
                             :dense="styles.buttonDense"></q-btn>
 

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>
+                    <q-tabs v-model="tab" vertical :active-color="$light.color">
                         <q-route-tab name="general" icon="sym_o_info" :label="$t('General')" to="/User/setting" exact
                             replace />
                         <q-route-tab name="information" icon="sym_o_info" :label="$t('Information')"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",