@hostlink/nuxt-light 1.51.1 → 1.52.0

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

@@ -5,7 +5,7 @@ import { ref, computed, onMounted, useSlots, watch, reactive } from "vue";
 import useLight from "../composables/useLight";
 import model from "../composables/model";
 import { toQuery } from "@hostlink/light";
-import { list } from "#imports";
+import { list, navigateTo } from "#imports";
 import { useI18n } from "vue-i18n";
 import { useStorage, useSessionStorage } from "@vueuse/core";
 import { useRoute } from "#imports";
@@ -313,13 +313,18 @@ const onLocalRequest = async (p) => {
           l = l.limit(p.pagination.rowsPerPage);
           l = l.offset((p.pagination.page - 1) * p.pagination.rowsPerPage);
         }
-        const data = await l.fetchWithMeta();
-        this.setData(data);
+        this.setData(await l.fetchWithMeta());
       } catch (e) {
         quasar.dialog({
           message: e,
           color: "negative"
         });
+        if (e instanceof Error) {
+          if (e.message == "You need to be logged to access this field") {
+            navigateTo("/");
+            return;
+          }
+        }
         this.setData({ data: [], meta: { total: 0, key: "", name: "" } });
       }
     }
@@ -501,12 +506,12 @@ const hasFilters = computed(() => {
 
 <template>
     <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onLocalRequest" :columns="columns"
-        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected" :color="$light.color"
+        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected"
         :visible-columns="visibleColumns">
         <template #header="props">
             <q-tr :props="props">
                 <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" :color="$light.color" />
+                    <q-checkbox v-model="props.selected" />
                 </q-td>
                 <q-th v-if="hasRowExpand" auto-width></q-th>
                 <q-th v-if="hasActions" auto-width></q-th>
@@ -525,14 +530,14 @@ const hasFilters = computed(() => {
 
 
         <template #top-left v-if="addComponent">
-            <q-btn icon="sym_o_add" :label="$t('Add')" :color="$light.color" @click="onAdd" outline />
+            <q-btn icon="sym_o_add" :label="$t('Add')" color="primary" @click="onAdd" outline />
         </template>
 
 
         <template #body="props">
             <q-tr :props="props">
                 <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" :color="$light.color" />
+                    <q-checkbox v-model="props.selected" />
                 </q-td>
                 <q-td v-if="hasRowExpand" auto-width>
                     <q-btn flat round size="sm" :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"
@@ -563,8 +568,7 @@ const hasFilters = computed(() => {
                     </template>
                     <template v-else>
                         <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"
-                            :style="getCellStyle(col, props.row)"><template
-                                v-if="col.to" class="bg-primary">
+                            :style="getCellStyle(col, props.row)"><template v-if="col.to" class="bg-primary">
                                 <l-link :to="col.to(props.row)" v-if="col.to(props.row)">{{ col.value }}</l-link>
                             </template>
                             <template v-else-if="col.component">
@@ -589,36 +593,35 @@ const hasFilters = computed(() => {
         <template #top-right="props" v-if="showTopRight">
             <slot name="top-right" v-bind="props"></slot>
 
-            <q-btn v-if="$props.name" :disable="!hasFilters" dense flat icon="sym_o_filter_alt_off"
-                :color="$light.color" @click="filters = {};
+            <q-btn v-if="$props.name" :disable="!hasFilters" dense flat icon="sym_o_filter_alt_off" color="primary"
+                @click="filters = {};
   tempFilters = {}">
                 <q-tooltip>{{ $t("Clear Filters") }}</q-tooltip>
             </q-btn>
 
 
-            <q-input outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')" :color="$light.color"
-                v-if="searchable">
+            <q-input outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')" v-if="searchable">
                 <template v-slot:append>
                     <q-icon name="search" />
                 </template>
             </q-input>
 
-            <q-btn icon="sym_o_settings" flat dense :color="$light.color" v-if="$props.name">
+            <q-btn icon="sym_o_settings" flat dense color="primary" v-if="$props.name">
                 <q-popup-proxy>
                     <q-card>
                         <q-card-section>
-                            <q-checkbox label="Save filters" v-model="saveFilters" :color="$light.color" />
+                            <q-checkbox label="Save filters" v-model="saveFilters" />
                         </q-card-section>
                     </q-card>
                 </q-popup-proxy>
             </q-btn>
 
-            <q-btn icon="sym_o_view_column" flat dense :color="$light.color" v-if="$props.name">
+            <q-btn icon="sym_o_view_column" flat dense color="primary" v-if="$props.name">
                 <q-popup-proxy>
                     <q-card>
                         <q-card-section>
-                            <q-option-group :color="$light.color" type="checkbox" v-model="visibleColumns"
-                                :options="hidableColumns" option-value="name">
+                            <q-option-group type="checkbox" v-model="visibleColumns" :options="hidableColumns"
+                                option-value="name">
                             </q-option-group>
                         </q-card-section>
                     </q-card>
@@ -626,7 +629,7 @@ const hasFilters = computed(() => {
             </q-btn>
 
 
-            <q-btn icon="sym_o_refresh" flat dense :color="$light.color" @click="requestServerInteraction()">
+            <q-btn icon="sym_o_refresh" flat dense color="primary" @click="requestServerInteraction()">
                 <q-tooltip>{{ $t("Refresh") }}</q-tooltip>
             </q-btn>
         </template>
@@ -660,8 +663,7 @@ const hasFilters = computed(() => {
                         <template v-if="col.searchType == 'select'">
                             <q-select dense clearable filled square v-model="filters[col.name]" options-dense
                                 :options="localSearchOptions[col.name]" emit-value map-options
-                                :multiple="col.searchMultiple" :color="$light.color" use-input input-debounce="0"
-                                @filter="(val, update) => {
+                                :multiple="col.searchMultiple" use-input input-debounce="0" @filter="(val, update) => {
   searchSelectFilter(val, update, col.name);
 }" :style="col.searchStyle" />
                         </template>
@@ -676,15 +678,14 @@ const hasFilters = computed(() => {
                             <q-select dense clearable filled square v-model="filters[col.name]" :options="[
   { label: $t('Yes'), value: true },
   { label: $t('No'), value: false }
-]" :color="$light.color" :style="col.searchStyle" emit-value map-options options-dense />
+]" :style="col.searchStyle" emit-value map-options options-dense />
 
 
                         </template>
 
                         <template v-if="!col.searchType || col.searchType == 'text'">
                             <q-input style="min-width: 80px;" dense clearable filled square
-                                v-model="tempFilters[col.name]" @keydown.enter.prevent="filters[col.name] = tempFilters[col.name]" @clear="delete filters[col.name]" :enterkeyhint="$t('search')" :color="$light.color"
-                                :style="col.searchStyle"></q-input>
+                                v-model="tempFilters[col.name]" @keydown.enter.prevent="filters[col.name] = tempFilters[col.name]" @clear="delete filters[col.name]" :enterkeyhint="$t('search')" :style="col.searchStyle"></q-input>
 
                         </template>
 

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

@@ -55,7 +55,7 @@ watch(() => props.name ? route.query[props.name] : null, (newTab) => {
 
 <template>
     <l-card>
-        <q-tabs v-bind="$props" class="text-grey" :active-color="$light.color" :indicator-color="$light.color"
+        <q-tabs v-bind="$props" class="text-grey" active-color="primary" indicator-color="primary"
             v-model="modelValue">
             <slot></slot>
         </q-tabs>

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

@@ -50,15 +50,14 @@ rules.push((v) => {
 </script>
 
 <template>
-    <q-input v-bind="$light.getInputProps(props)" v-model="localValue" :rules="rules" :color="$light.color"
+    <q-input v-bind="$light.getInputProps(props)" v-model="localValue" :rules="rules"
         :hide-bottom-space="hideBottomSpace">
         <template v-slot:prepend>
             <q-btn icon="sym_o_access_time" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
-                    <q-time v-model="localValue" :format24h="format24h" :color="color ?? $light.color" :now-btn="nowBtn"
-                        :with-seconds="withSeconds">
+                    <q-time v-model="localValue" :format24h="format24h" :now-btn="nowBtn" :with-seconds="withSeconds">
                         <div class="row items-center justify-end">
-                            <q-btn v-close-popup label="Close" :color="color ?? $light.color" flat />
+                            <q-btn v-close-popup label="Close" flat />
                         </div>
                     </q-time>
                 </q-popup-proxy>

package/dist/runtime/composables/useLight.js

@@ -1,4 +1,4 @@
-import { useQuasar } from "quasar";
+import { useQuasar, setCssVar } from "quasar";
 import packageJson from "../../../package.json";
 import { watch, reactive, getCurrentInstance } from "vue";
 import m from "./m.js";
@@ -154,6 +154,9 @@ const light = reactive({
     }
   },
   getColorValue: () => {
+    if (!light.color) {
+      return "#7367f0";
+    }
     return COLOR_CODE[light.color];
   },
   setMyFavorites: (favorites) => {
@@ -221,6 +224,7 @@ const light = reactive({
       await light.setStyle("theme", light.theme);
     });
     watch(() => light.color, async () => {
+      setCssVar("primary", light.getColorValue());
       await light.setStyle("color", light.color);
     });
     light.errors = [];
@@ -260,7 +264,6 @@ const light = reactive({
   },
   getButtonProps(props) {
     const attr = {
-      color: light.color,
       ...light.styles.button,
       ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== void 0))
     };

package/dist/runtime/formkit/File.vue

@@ -28,7 +28,7 @@ const attrs = computed(() => {
 
 <template>
     <q-file v-model="value" :label="context.label" v-bind="attrs" :error="error" :error-message="errorMessage"
-        @blur="onBlur" hide-bottom-space :color="$light.color">
+        @blur="onBlur" hide-bottom-space>
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/dist/runtime/formkit/OptionGroup.vue

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

package/dist/runtime/formkit/Repeater.vue

@@ -70,7 +70,7 @@ const cursor = ref("cursor-grab");
                             <div class="l-repeater-handle" v-if="sortable" :class="cursor"
                                 @mousedown="cursor = 'cursor-grabbing'" @mouseup="cursor = 'cursor-grab'"
                                 @mouseleave="cursor = 'cursor-grab'">
-                                <q-icon name="sym_o_drag_indicator" :color="$light.color" size="sm" />
+                                <q-icon name="sym_o_drag_indicator" size="sm" />
                             </div>
                         </q-item-section>
 
@@ -80,20 +80,20 @@ const cursor = ref("cursor-grab");
 
                         <q-item-section side>
                             <!-- up -->
-                            <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward"
-                                :color="$light.color" dense flat :disable="!isAllowMoveUp(index)" />
+                            <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward" color="primary"
+                                dense flat :disable="!isAllowMoveUp(index)" />
 
-                            <q-btn type="button" @click="onRemove(index)" icon="sym_o_delete" :color="$light.color"
-                                dense :disable="!isAllowRemove" flat />
+                            <q-btn type="button" @click="onRemove(index)" icon="sym_o_delete" color="primary" dense
+                                :disable="!isAllowRemove" flat />
                             <!-- down -->
-                            <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward"
-                                :color="$light.color" dense flat :disable="!isAllowMoveDown(index)" />
+                            <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward" color="primary"
+                                dense flat :disable="!isAllowMoveDown(index)" />
 
                         </q-item-section>
                     </q-item>
                 </FormKit>
             </q-list>
-            <q-btn @click="onAdd" :label="addLabel" icon="sym_o_add" :color="$light.color" outline class="q-mt-sm"
+            <q-btn @click="onAdd" :label="addLabel" icon="sym_o_add" color="primary" outline class="q-mt-sm"
                 :disable="localValue.length >= max" />
         </FormKit>
     </div>

package/dist/runtime/formkit/Toggle.vue

@@ -10,8 +10,7 @@ const value = computed({
 </script>
 
 <template>
-    <q-toggle v-model="value" :label="context.label" :disable="context.disabled" :color="$light.color"
-        v-bind="context.attrs">
+    <q-toggle v-model="value" :label="context.label" :disable="context.disabled" v-bind="context.attrs">
         <slot></slot>
     </q-toggle>
 </template>

package/dist/runtime/pages/CustomField/[custom_field_id]/edit.vue

@@ -43,7 +43,7 @@ const v = ref("required");
 
                 <q-select label="Options" v-model="value.options" @update:model-value="node.at('options').input($event)"
                     use-input use-chips multiple hide-dropdown-icon input-debounce="0" new-value-mode="add-unique"
-                    stack-label outlined placeholder="Press enter to add new option" :color="$light.color" />
+                    stack-label outlined placeholder="Press enter to add new option" />
             </template>
 
             <form-kit type="l-input" name="default_value" label="Default Value" />

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

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

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

@@ -138,7 +138,7 @@ const filteredRows = computed(() => {
 
     <!-- 載入指示器 -->
     <div v-if="loading" class="text-center q-pa-md">
-      <q-spinner-dots size="50px" :color="$light.color" />
+      <q-spinner-dots size="50px" />
       <div class="q-mt-sm">{{ $t('Loading permissions...') }}</div>
     </div>
 
@@ -147,15 +147,14 @@ const filteredRows = computed(() => {
       <!-- 篩選控制 -->
       <div class="row q-gutter-md q-mb-md">
         <div class="col-md-6 col-12">
-          <q-input :color="$light.color" v-model="filter" :placeholder="$t('Filter permissions')" dense clearable
-            outlined>
+          <q-input v-model="filter" :placeholder="$t('Filter permissions')" dense clearable outlined>
             <template v-slot:append>
               <q-icon name="sym_o_search" />
             </template>
           </q-input>
         </div>
         <div class="col-md-6 col-12">
-          <q-select :color="$light.color" v-model="selectedRole"
+          <q-select v-model="selectedRole"
             :options="[{ label: $t('All Roles'), value: '' }, ...roles.map(r => ({ label: r.name, value: r.name }))]"
             :placeholder="$t('Filter by role')" dense clearable outlined emit-value map-options />
         </div>
@@ -173,7 +172,7 @@ const filteredRows = computed(() => {
             </q-td>
             <q-td v-for="role in roles" :key="role.name" class="text-center">
               <q-checkbox v-model="props.row[role.name]"
-                @update:model-value="onUpdate($event, role.name, props.row.permission)" :color="$light.color"
+                @update:model-value="onUpdate($event, role.name, props.row.permission)"
                 :loading="updating.has(`${role.name}-${props.row.permission}`)"
                 :disable="updating.has(`${role.name}-${props.row.permission}`)" />
             </q-td>

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

@@ -49,7 +49,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 :color="$light.color">
+                <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                 </q-option-group>
             </l-field>
         </l-form>

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

@@ -109,8 +109,7 @@ 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)"
-                        :color="$light.color">
+                        @remove="onRemoveChild(props.row.name, $event)" @add="onAddChild(props.row.name, $event)">
                     </q-select>
                 </q-td>
             </template>
@@ -118,7 +117,7 @@ const onRemoveUser = async (value, user) => {
                 <q-td>
                     <q-select :options="users" v-model="props.row.user" multiple use-chips dense option-label="name"
                         option-value="user_id" @add="onAddUser(props.row.name, $event)"
-                        @remove="onRemoveUser(props.row.name, $event)" :color="$light.color">
+                        @remove="onRemoveUser(props.row.name, $event)">
 
                     </q-select>
                 </q-td>

package/dist/runtime/pages/System/database/check.vue

@@ -103,7 +103,7 @@ const handleFix = async (tableName) => {
                         <span v-else class="text-positive">✓</span>
                     </q-td>
                     <q-td key="action" :props="props">
-                        <q-btn v-if="props.row.status !== 'OK'" label="Fix" size="sm" :color="$light.color"
+                        <q-btn v-if="props.row.status !== 'OK'" label="Fix" size="sm" color="primary"
                             @click="handleFix(props.row.table)" />
                     </q-td>
                 </q-tr>

package/dist/runtime/pages/System/database/process.vue

@@ -35,7 +35,7 @@ onUnmounted(() => {
     <l-page title="System Database Process">
         <q-table :rows="data?.database?.processList || []" hide-bottom v-bind="$light.styles.table" :loading="loading">
             <template #top-left>
-                <q-btn label="Reload" outline :color="$light.color" icon="sym_o_refresh" @click="refresh"></q-btn>
+                <q-btn label="Reload" outline color="primary" icon="sym_o_refresh" @click="refresh"></q-btn>
             </template>
             <template #top-right>
                 <q-select label="Auto Refresh" v-model="autoRefresh" :options="[
@@ -48,8 +48,8 @@ onUnmounted(() => {
                     { label: '10m', value: 600000 },
                     { label: '30m', value: 1800000 },
                     { label: '1h', value: 3600000 }
-                ]" @update:model-value="autoRefresh && refresh()" outlined :color="$light.color" dense style="min-width: 200px"
-                    map-options emit-value></q-select>
+                ]" @update:model-value="autoRefresh && refresh()" outlined dense style="min-width: 200px" map-options
+                    emit-value></q-select>
             </template>
         </q-table>
     </l-page>

package/dist/runtime/pages/System/database/table.vue

@@ -183,7 +183,7 @@ const truncatTable = async () => {
 
                         <q-table :rows="custom_tables" hide-pagination flat bordered separator="cell" dense
                             :rows-per-page-options="[0]" v-model:selected="selectedTable" selection="multiple"
-                            row-key="Name" :color="$light.color">
+                            row-key="Name">
 
                             <template #top-left>
                                 <q-btn icon="sym_o_add" @click="createTable()" round flat size="sm">
@@ -218,7 +218,7 @@ const truncatTable = async () => {
                 <q-expansion-item :label="table.name" v-for="table in data.table" dense>
                     <div class="q-ma-sm">
                         <q-table row-key="name" :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat
-                            bordered selection="multiple" v-model:selected="selected[table.name]" :color="$light.color">
+                            bordered selection="multiple" v-model:selected="selected[table.name]">
                             <template #top-left>
                                 <q-btn icon="sym_o_add" @click="add(table.name)" round flat size="sm">
                                     <q-tooltip>Add field</q-tooltip>

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

@@ -161,7 +161,7 @@ const loading = ref(false);
         </q-dialog>
 
         <q-table :rows="items" :columns="columns" selection="multiple" flat bordered dense separator="cell"
-            v-model:selected="selected" row-key="uuid" :loading="loading" :color="$light.color">
+            v-model:selected="selected" row-key="uuid" :loading="loading">
             <template #top-left>
                 <q-btn icon="sym_o_add" @click="value = {
                     data: {

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' :