@hostlink/nuxt-light 1.51.2 → 1.52.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.51.2",
+  "version": "1.52.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -305,7 +305,10 @@ const module = defineNuxtModule({
             }
           }
         },
-        plugins: ["Dialog", "Loading", "LoadingBar", "Notify", "AppFullscreen"]
+        plugins: ["Dialog", "Loading", "LoadingBar", "Notify", "AppFullscreen"],
+        extras: {
+          fontIcons: ["material-symbols-outlined", "material-icons-outlined"]
+        }
       }
     }
   },
@@ -351,7 +354,7 @@ const module = defineNuxtModule({
     nuxt.options.app.head.link = nuxt.options.app.head.link || [];
     nuxt.options.app.head.link.push({
       rel: "stylesheet",
-      href: "https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+HK&family=Noto+Sans+TC&family=Material+Symbols+Outlined"
+      href: "https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+HK&family=Noto+Sans+TC"
     });
     await addComponentsDir({
       path: resolver.resolve("./runtime/components")

package/dist/runtime/components/L/Revision.vue

@@ -106,9 +106,9 @@ const getDiffHtml = (diffs) => {
                     <l-btn label="Restore" icon="sym_o_restore" permission="revision.restore" @click="onRestore"
                         :disabled="!isAllowRestore" />
 
-                    <q-checkbox label="Show changed only" v-model="showOnlyDelta" :color="$light.color"></q-checkbox>
+                    <q-checkbox label="Show changed only" v-model="showOnlyDelta"></q-checkbox>
 
-                    <q-btn-toggle class="q-mx-md" v-model="outputFormat" :toggle-color="$light.color" :options="[
+                    <q-btn-toggle class="q-mx-md" v-model="outputFormat" toggle-color="primary" :options="[
                         { label: 'side-by-side', value: 'side-by-side' }, { label: 'line-by-line', value: 'line-by-line' }
                     ]" />
                     <q-space />
@@ -128,8 +128,7 @@ const getDiffHtml = (diffs) => {
                         <thead>
                             <tr>
                                 <th width="48px">
-                                    <q-checkbox @click="onToggleAll" v-model="isCheckedAll"
-                                        :color="$light.color"></q-checkbox>
+                                    <q-checkbox @click="onToggleAll" v-model="isCheckedAll" :></q-checkbox>
                                 </th>
                                 <th>Field</th>
                                 <th>Value</th>
@@ -141,8 +140,7 @@ const getDiffHtml = (diffs) => {
 
                                 <tr>
 
-                                    <td><q-checkbox v-model="restore_fields" :val="key"
-                                            :color="$light.color"></q-checkbox>
+                                    <td><q-checkbox v-model="restore_fields" :val="key"></q-checkbox>
                                     </td>
                                     <td :class="{ 'bg-yellow-3': selectedRevision.delta[key] != undefined }">{{ key }}
                                     </td>

package/dist/runtime/components/L/System/Setting/modules.vue

@@ -7,7 +7,7 @@ defineProps({
 
 <template>
     <form-kit type="l-form" :bordered="false" :value="$props" @submit="$emit('submit', $event)">
-        <l-field :label="$t('File Manager')" stack-label :color="$light.color" hide-bottom-space class="col-6">
+        <l-field :label="$t('File Manager')" stack-label hide-bottom-space class="col-6">
             <form-kit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
         </l-field>
         

package/dist/runtime/components/L/System/Setting/security.vue

@@ -18,7 +18,7 @@ defineProps({
 
 <template>
     <FormKit type="l-form" :bordered="false" :value="$props" @submit="$emit('submit', $event)">
-        <l-field label="Password policy" stack-label :color="$light.color">
+        <l-field label="Password policy" stack-label>
             <FormKit type="l-checkbox" label="Upper Case" name="password_contains_uppercase" true-value="1"
                 false-value="0" />
             <FormKit type="l-checkbox" label="Lower Case" name="password_contains_lowercase" true-value="1"

package/dist/runtime/components/L/User/overview.vue

@@ -30,7 +30,7 @@ const obj = await collect("User", {
             <l-item label="Phone">{{ obj.phone }}</l-item>
             <l-item label="Roles">
                 <div class="q-gutter-xs float-left">
-                    <q-badge v-for="role in obj.roles" :key="role" :color="$light.color">{{ role
+                    <q-badge v-for="role in obj.roles" :key="role">{{ role
                     }}</q-badge>
                 </div>
             </l-item>

package/dist/runtime/components/L/ValidationInput.vue

@@ -65,11 +65,11 @@ watch(form, () => {
 </script>
 
 <template>
-    <q-checkbox left-label v-model="form.required" label="Required" :color="$light.color" />
+    <q-checkbox left-label v-model="form.required" label="Required" />
 
-    <q-checkbox left-label v-model="form.email" label="Email" :color="$light.color" v-if="type == 'text'" />
+    <q-checkbox left-label v-model="form.email" label="Email" v-if="type == 'text'" />
 
-    <q-checkbox left-label v-model="form.number" label="Number" :color="$light.color" v-if="type == 'text'" />
+    <q-checkbox left-label v-model="form.number" label="Number" v-if="type == 'text'" />
 
     <l-row v-if="type = 'text'">
         <l-col :md="6">

package/dist/runtime/components/l-add-btn.d.vue.ts

@@ -1,11 +1,11 @@
 declare const _default: import("vue").DefineComponent<{}, {
     label: string;
-    color?: string | undefined;
     to?: string | undefined;
+    color?: string | undefined;
     $props: {
         readonly label?: string | undefined;
-        readonly color?: string | undefined;
         readonly to?: string | undefined;
+        readonly color?: string | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/l-add-btn.vue.d.ts

@@ -1,11 +1,11 @@
 declare const _default: import("vue").DefineComponent<{}, {
     label: string;
-    color?: string | undefined;
     to?: string | undefined;
+    color?: string | undefined;
     $props: {
         readonly label?: string | undefined;
-        readonly color?: string | undefined;
         readonly to?: string | undefined;
+        readonly color?: string | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,9 +1,9 @@
 <script setup>
 import { useRoute, useRouter } from "vue-router";
 import { useLight, q, m } from "#imports";
-import { useQuasar } from "quasar";
+import { useQuasar, setCssVar, getCssVar } from "quasar";
 import { useI18n } from "vue-i18n";
-import { ref, computed, reactive, provide, watch, toRaw } from "vue";
+import { ref, computed, reactive, provide, watch, toRaw, onMounted } from "vue";
 import { useRuntimeConfig } from "nuxt/app";
 import { api } from "#imports";
 const emits = defineEmits(["logout"]);
@@ -56,6 +56,8 @@ let my = reactive(tt.my);
 const light = useLight();
 light.devMode = tt.system.devMode;
 light.init(my.styles);
+const color = light.getColorValue();
+setCssVar("primary", color);
 light.setMyRoles(my.roles);
 light.setPermissions(my.permissions);
 light.setMyFavorites(toRaw(my.myFavorites));

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

@@ -9,6 +9,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LBtnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LBtnProps> & Readonly<{}>, {
+    color: import("quasar").NamedColor;
     permission: string;
     confirmMessage: string;
     confirmTitle: string;

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

@@ -21,7 +21,7 @@ const props = defineProps({
   fab: { type: Boolean, required: false, skipCheck: true },
   fabMini: { type: Boolean, required: false, skipCheck: true },
   padding: { type: null, required: false },
-  color: { type: null, required: false },
+  color: { type: null, required: false, default: "primary" },
   textColor: { type: null, required: false },
   noCaps: { type: Boolean, required: false, skipCheck: true },
   noWrap: { type: Boolean, required: false, skipCheck: true },

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

@@ -9,6 +9,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LBtnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LBtnProps> & Readonly<{}>, {
+    color: import("quasar").NamedColor;
     permission: string;
     confirmMessage: string;
     confirmTitle: string;

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

@@ -26,7 +26,7 @@ defineProps({
 </script>
 
 <template>
-    <q-checkbox v-bind="$props" :color="color || $light.color" :label="label ? $t(label) : void 0">
+    <q-checkbox v-bind="$props" :label="label ? $t(label) : void 0">
         <slot></slot>
     </q-checkbox>
 </template>

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

@@ -1,19 +1,19 @@
 declare const _default: import("vue").DefineComponent<{}, {
     $emit: (event: "update:theme" | "update:menuOverlayHeader" | "update:dense" | "update:color" | "update:miniState" | "update:footer", ...args: any[]) => void;
-    time: string;
     color: string;
+    time: string;
     theme: string;
     dense: boolean;
-    footer: boolean;
     miniState: boolean;
+    footer: boolean;
     menuOverlayHeader: boolean;
     $props: {
-        readonly time?: string | undefined;
         readonly color?: string | undefined;
+        readonly time?: string | undefined;
         readonly theme?: string | undefined;
         readonly dense?: boolean | undefined;
-        readonly footer?: boolean | undefined;
         readonly miniState?: boolean | undefined;
+        readonly footer?: boolean | undefined;
         readonly menuOverlayHeader?: boolean | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -5,13 +5,6 @@ const menuWidth = defineModel("menuWidth", {
   default: 280
 });
 const COLORS = [
-  "primary",
-  "secondary",
-  "positive",
-  "negative",
-  "info",
-  "warning",
-  "dark",
   "red",
   "pink",
   "purple",
@@ -94,11 +87,11 @@ requestAnimationFrame(refreshServerTime);
                 <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)" :color="$light.color" />
+                        @update:model-value="$emit('update:theme', $event)" />
                     <q-radio :model-value="theme" val="dark" label="Dark"
-                        @update:model-value="$emit('update:theme', $event)" :color="$light.color" />
+                        @update:model-value="$emit('update:theme', $event)" />
                     <q-radio :model-value="theme" val="semi-dark" label="Semi dark"
-                        @update:model-value="$emit('update:theme', $event)" :color="$light.color" />
+                        @update:model-value="$emit('update:theme', $event)" />
                 </div>
             </q-item-section>
         </q-item>
@@ -107,6 +100,9 @@ requestAnimationFrame(refreshServerTime);
             <q-item-section>
                 <q-item-label>{{ $t('Color') }}</q-item-label>
                 <div class="row">
+                    <div style="background-color: #7367f0; width: 1.5rem; height: 1.5rem;"
+                        class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:color', '')" />
+
                     <div v-for="c in COLORS" :key="c" :class="`bg-${c}`" style="width: 1.5rem; height: 1.5rem;"
                         class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:color', c)" />
                 </div>
@@ -118,8 +114,7 @@ requestAnimationFrame(refreshServerTime);
                 <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)"
-                    :color="$light.color" />
+                <q-toggle :model-value="miniState" @update:model-value="$emit('update:miniState', $event)" />
             </q-item-section>
         </q-item>
         <q-separator />
@@ -129,8 +124,7 @@ requestAnimationFrame(refreshServerTime);
                 <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)"
-                    :color="$light.color" />
+                <q-toggle :model-value="dense" @update:model-value="$emit('update:dense', $event)" />
             </q-item-section>
         </q-item>
 
@@ -142,7 +136,7 @@ requestAnimationFrame(refreshServerTime);
             </q-item-section>
             <q-item-section side>
                 <q-toggle :model-value="menuOverlayHeader"
-                    @update:model-value="$emit('update:menuOverlayHeader', $event)" :color="$light.color" />
+                    @update:model-value="$emit('update:menuOverlayHeader', $event)" />
             </q-item-section>
         </q-item>
 
@@ -153,16 +147,14 @@ requestAnimationFrame(refreshServerTime);
                 <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)"
-                    :color="$light.color" />
+                <q-toggle :model-value="footer" @update:model-value="$emit('update:footer', $event)" />
             </q-item-section>
         </q-item>
         <q-separator />
         <q-item>
             <q-item-section>
                 <q-item-label>{{ $t('Menu width') }}</q-item-label>
-                <q-item-label><q-slider v-model="menuWidth" :min="200" :max="360" label
-                        :color="$light.color" /></q-item-label>
+                <q-item-label><q-slider v-model="menuWidth" :min="200" :max="360" label /></q-item-label>
             </q-item-section>
         </q-item>
         <q-separator />
@@ -175,7 +167,7 @@ requestAnimationFrame(refreshServerTime);
                 <q-item-label>{{ server_date }} {{ server_time }} </q-item-label>
             </q-item-section>
         </q-item>
-        
+
 
     </q-list>
 </template>

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

@@ -1,19 +1,19 @@
 declare const _default: import("vue").DefineComponent<{}, {
     $emit: (event: "update:theme" | "update:menuOverlayHeader" | "update:dense" | "update:color" | "update:miniState" | "update:footer", ...args: any[]) => void;
-    time: string;
     color: string;
+    time: string;
     theme: string;
     dense: boolean;
-    footer: boolean;
     miniState: boolean;
+    footer: boolean;
     menuOverlayHeader: boolean;
     $props: {
-        readonly time?: string | undefined;
         readonly color?: string | undefined;
+        readonly time?: string | undefined;
         readonly theme?: string | undefined;
         readonly dense?: boolean | undefined;
-        readonly footer?: boolean | undefined;
         readonly miniState?: boolean | undefined;
+        readonly footer?: boolean | undefined;
         readonly menuOverlayHeader?: boolean | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -13,11 +13,11 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
-    disable: boolean;
     dark: boolean | null;
     rounded: boolean;
     square: boolean;
     dense: boolean;
+    disable: boolean;
     outlined: boolean;
     filled: boolean;
     stackLabel: boolean;

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

@@ -190,9 +190,9 @@ const dateProps = computed(() => {
         <template v-slot:prepend>
             <q-icon name="sym_o_event" class="cursor-pointer">
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
-                    <q-date :color="color ?? $light.color" mask="YYYY-MM-DD" v-model="modelValue" v-bind="dateProps">
+                    <q-date mask="YYYY-MM-DD" v-model="modelValue" v-bind="dateProps">
                         <div class="row items-center justify-end">
-                            <q-btn v-close-popup :label="$t('Close')" :color="color ?? $light.color" flat />
+                            <q-btn v-close-popup :label="$t('Close')" flat />
                         </div>
                     </q-date>
                 </q-popup-proxy>

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

@@ -13,11 +13,11 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
-    disable: boolean;
     dark: boolean | null;
     rounded: boolean;
     square: boolean;
     dense: boolean;
+    disable: boolean;
     outlined: boolean;
     filled: boolean;
     stackLabel: boolean;

package/dist/runtime/components/l-editor.d.vue.ts

@@ -6,9 +6,9 @@ declare const _default: import("vue").DefineComponent<LEditorProps, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<LEditorProps> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    modelValue: string;
     dense: boolean;
     placeholder: string;
+    modelValue: string;
     fonts: any | undefined;
     toolbar: readonly any[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/l-editor.vue.d.ts

@@ -6,9 +6,9 @@ declare const _default: import("vue").DefineComponent<LEditorProps, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<LEditorProps> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    modelValue: string;
     dense: boolean;
     placeholder: string;
+    modelValue: string;
     fonts: any | undefined;
     toolbar: readonly any[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -46,7 +46,7 @@ const LABLES = [
   </q-item-label>
 
   <q-item v-for="label in LABLES" :key="label.type" clickable :active="modelValue == label.type"
-    :active-class="`text-${$light.color}`" @click="toggleLabel(label.type)">
+    :active-class="`text-primary`" @click="toggleLabel(label.type)">
     <q-item-section avatar>
       <q-icon :name="label.icon" />
     </q-item-section>

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

@@ -111,9 +111,9 @@ const onClickMove = async () => {
           <q-tooltip> Create new folder</q-tooltip>
         </q-btn>
         <q-space></q-space>
-        <q-btn dense label="Move to here" :color="$light.color" v-if="mode == 'empty folder'">
+        <q-btn dense label="Move to here" color="primary" v-if="mode == 'empty folder'">
         </q-btn>
-        <q-btn dense label="Move" outline :color="$light.color" v-if="mode == 'move'" @click="onClickMove"></q-btn>
+        <q-btn dense label="Move" outline color="primary" v-if="mode == 'move'" @click="onClickMove"></q-btn>
       </q-card-actions>
     </q-card>
   </q-menu>

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

@@ -256,7 +256,6 @@ const onDeleteSelected = () => {
 };
 const onNewFolder = () => {
   $q.dialog({
-    color: $light.color,
     title: "New Folder",
     prompt: {
       model: "",
@@ -505,7 +504,7 @@ selectedNodePath.value = drives[0].index.toString();
 
         <div>
           <q-input outlined :placeholder="$t('Search for file name')" dense @keyup.enter.native="submitSearch"
-            v-model="search" :color="$light.color">
+            v-model="search">
             <template v-slot:append>
               <q-btn flat dense round icon="sym_o_search"></q-btn>
             </template>
@@ -522,7 +521,7 @@ selectedNodePath.value = drives[0].index.toString();
         <q-list padding class="text-grey-8">
           <q-item>
             <q-item-section>
-              <l-btn icon="add" label="New" :disable="!selectedNodePath" :color="$light.color">
+              <l-btn icon="add" label="New" :disable="!selectedNodePath">
                 <q-menu>
                   <q-list>
                     <q-item clickable v-close-popup @click="onNewFolder" v-if="permission.includes('fs.folder.create')">
@@ -585,7 +584,7 @@ selectedNodePath.value = drives[0].index.toString();
       </q-dialog>
 
       <q-toolbar>
-        <q-breadcrumbs :active-color="$light.color">
+        <q-breadcrumbs>
           <q-breadcrumbs-el v-for="(b, index) in breadcrumbs" :label="b.label" :key="index"
             @click="selectedNodePath = b.path" href="javascript:void(0)"></q-breadcrumbs-el>
         </q-breadcrumbs>
@@ -613,7 +612,7 @@ selectedNodePath.value = drives[0].index.toString();
 
       <template v-if="grid">
         <q-table :title="$t('Folders')" flat grid :columns="columns" :rows="folders" hide-pagination
-          :pagination="{ rowsPerPage: 0 }" color="$light.color">
+          :pagination="{ rowsPerPage: 0 }">
           <template v-slot:item="props">
             <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4" @click="onDblclickRow(null, props.row, null)">
               <q-card flat bordered>
@@ -625,7 +624,7 @@ selectedNodePath.value = drives[0].index.toString();
                     {{ props.row.name }}
                   </q-item-section>
                   <q-item-section avatar>
-                    <q-checkbox v-model="selected" :val="props.row" :color="$light.color" />
+                    <q-checkbox v-model="selected" :val="props.row" />
                   </q-item-section>
                 </q-item>
               </q-card>
@@ -634,7 +633,7 @@ selectedNodePath.value = drives[0].index.toString();
         </q-table>
 
         <q-table :title="$t('Files')" flat grid :columns="columns" :rows="files" hide-pagination
-          :pagination="{ rowsPerPage: 0 }" :color="$light.color">
+          :pagination="{ rowsPerPage: 0 }">
 
           <template v-slot:item="props">
             <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4" @click="onClickRow(null, props.row, null)">
@@ -649,7 +648,7 @@ selectedNodePath.value = drives[0].index.toString();
                     </q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-checkbox v-model="selected" :val="props.row" :color="$light.color" />
+                    <q-checkbox v-model="selected" :val="props.row" />
                   </q-item-section>
                 </q-item>
 
@@ -665,9 +664,7 @@ selectedNodePath.value = drives[0].index.toString();
         <q-table flat :columns="columns" :rows="items" @row-dblclick="onDblclickRow" @row-click="onClickRow"
           :pagination="pagination" row-key="path" selection="multiple" v-model:selected="selected" dense
           :loading="loading" :loading-label="$t('Loading...')" :no-data-label="$t('No data available')"
-          :color="$light.color"
-          separator="horizontal" :rows-per-page-options="[0]"
-          >
+          separator="horizontal" :rows-per-page-options="[0]">
           <template #body-cell-icon="props">
             <q-td auto-width>
               <q-icon name="sym_o_folder" v-if="props.value == 'folder'" size="sm" />

package/dist/runtime/components/l-form-dialog.d.vue.ts

@@ -5,15 +5,15 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import("vue").DefineComponent<{}, {
     $emit: (event: "submit", ...args: any[]) => void;
-    value: Record<string, any>;
     cancel: Function;
+    value: Record<string, any>;
     width: string;
     title: string;
     save: Function;
     showNotification: boolean;
     $props: {
-        readonly value?: Record<string, any> | undefined;
         readonly cancel?: Function | undefined;
+        readonly value?: Record<string, any> | undefined;
         readonly width?: string | undefined;
         readonly title?: string | undefined;
         readonly save?: Function | undefined;

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

@@ -87,7 +87,7 @@ const onCancel = async () => {
                 </q-card-section>
                 <q-card-actions align="right">
                     <q-btn icon="sym_o_close" :label="$t('Cancel')" @click="onCancel" unelevated />
-                    <q-btn icon="sym_o_check" :label="$t('Save')" type="submit" :color="$light.color" unelevated
+                    <q-btn icon="sym_o_check" :label="$t('Save')" type="submit" color="primary" unelevated
                         :disabled="!context.state.valid" />
                 </q-card-actions>
             </form-kit>

package/dist/runtime/components/l-form-dialog.vue.d.ts

@@ -5,15 +5,15 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import("vue").DefineComponent<{}, {
     $emit: (event: "submit", ...args: any[]) => void;
-    value: Record<string, any>;
     cancel: Function;
+    value: Record<string, any>;
     width: string;
     title: string;
     save: Function;
     showNotification: boolean;
     $props: {
-        readonly value?: Record<string, any> | undefined;
         readonly cancel?: Function | undefined;
+        readonly value?: Record<string, any> | undefined;
         readonly width?: string | undefined;
         readonly title?: string | undefined;
         readonly save?: Function | undefined;

package/dist/runtime/components/l-group-select.vue

@@ -56,11 +56,12 @@ const filterFn = (val, update, abort) => {
 </script>
 
 <template>
-    <q-select v-model="model"  v-bind="$light.getInputProps($props)" :options="items" @update:model-value="handleItemUniqueByGroup" 
-        input-debounce="0"  @filter="filterFn" :color="$light.color" :style="$light.styles.input"
+    <q-select v-model="model" v-bind="$light.getInputProps($props)" :options="items"
+        @update:model-value="handleItemUniqueByGroup" input-debounce="0" @filter="filterFn" :style="$light.styles.input"
         :emit-value="emitValue" :map-options="mapOptions">
         <template v-slot:option="scope">
-            <q-item v-if="scope.opt.is_group" v-bind="{ ...scope.itemProps }" class="text-xs bg-grey-4" :key="scope.opt.label">
+            <q-item v-if="scope.opt.is_group" v-bind="{ ...scope.itemProps }" class="text-xs bg-grey-4"
+                :key="scope.opt.label">
                 <q-item-section class="!cursor-default">
                     {{ scope.opt.label || "Ungroup" }}
                 </q-item-section>

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

@@ -3266,7 +3266,7 @@ const displayIcons = computed(() => {
         <q-menu :offset="[0, 8]">
 
             <q-item-label header>
-                <q-input v-model="search" label="Search" outlined dense :color="$light.color">
+                <q-input v-model="search" label="Search" outlined dense>
                     <template v-slot:prepend>
                         <q-icon name="sym_o_search" dense />
                     </template>
@@ -3289,7 +3289,7 @@ const displayIcons = computed(() => {
                     <template v-slot:loading>
                         <div class="text-center q-my-md">
 
-                            <q-spinner-dots :color="$light.color" size="40px" />
+                            <q-spinner-dots size="40px" />
                         </div>
                     </template>
                 </q-infinite-scroll>

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

@@ -13,13 +13,10 @@ const props = defineProps({
     default: "primary"
   }
 });
-const classData = computed(() => {
-  return "text-" + $light.color;
-});
 </script>
 
 <template>
-    <router-link :to="props.to" style="text-decoration: underline;" :class="classData">
+    <router-link :to="props.to" style="text-decoration: underline;" class="text-primary">
         <slot />
     </router-link>
 </template>