@hostlink/nuxt-light 1.51.2 → 1.52.1

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

@@ -7,12 +7,13 @@ export type LPageProps = QPageProps & {
     addBtn?: boolean;
     gutter?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
     padding?: boolean;
+    breadcrumbs?: boolean;
 };
-declare var __VLS_34: {}, __VLS_36: {};
+declare var __VLS_50: {}, __VLS_52: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_34) => any;
+    header?: (props: typeof __VLS_50) => any;
 } & {
-    default?: (props: typeof __VLS_36) => any;
+    default?: (props: typeof __VLS_52) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LPageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LPageProps> & Readonly<{}>, {
     padding: boolean;

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

@@ -15,7 +15,8 @@ const props = defineProps({
   editBtn: { type: Boolean, required: false },
   deleteBtn: { type: Boolean, required: false },
   addBtn: { type: Boolean, required: false },
-  gutter: { type: String, required: false, default: "sm" }
+  gutter: { type: String, required: false, default: "sm" },
+  breadcrumbs: { type: Boolean, required: false }
 });
 const showToolbar = computed(() => {
   if (props.backBtn || props.editBtn || props.deleteBtn || props.addBtn) {
@@ -43,16 +44,40 @@ useHead({
 const localClass = computed(() => {
   return "q-gutter-" + props.gutter;
 });
+const lastPart = computed(() => {
+  const parts = route.path.split("/").filter((part2) => isNaN(Number(part2)));
+  if (parts.length < 2) {
+    return false;
+  }
+  let part = parts[parts.length - 1];
+  if (!part) {
+    return false;
+  }
+  part = part.replace(/_/g, " ").replace(/([a-z])(?=[A-Z])/g, "$1 ").replace(/([A-Z]*)(?=[A-Z][a-z])/g, "$1 ");
+  part = part.replace(/\b\w/g, (char) => char.toUpperCase());
+  part = part.replace(/\s\s+/g, " ").trim();
+  return part;
+});
 </script>
 
 <template>
     <q-page :padding="padding" class="q-pt-sm">
+
+
+
         <q-toolbar v-if="showToolbar">
             <l-back-btn v-if="backBtn" dense />
             <l-add-btn v-if="addBtn" dense />
             <l-edit-btn v-if="editBtn" dense />
             <l-delete-btn v-if="deleteBtn" @submit="onDelete" dense />
             <q-toolbar-title>{{ $t(title) }}</q-toolbar-title>
+
+            <q-breadcrumbs v-if="breadcrumbs">
+                <q-breadcrumbs-el :label="$t('Home')" to="/" icon="home" />
+                <q-breadcrumbs-el :label="$t(title)" :to="'/' + route.path.split('/')[1]"
+                    v-if="route.path.split('/')[1]" />
+                <q-breadcrumbs-el v-if="lastPart" :label="lastPart" :to="route.fullPath" />
+            </q-breadcrumbs>
         </q-toolbar>
 
         <div :class="localClass">

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

@@ -7,12 +7,13 @@ export type LPageProps = QPageProps & {
     addBtn?: boolean;
     gutter?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
     padding?: boolean;
+    breadcrumbs?: boolean;
 };
-declare var __VLS_34: {}, __VLS_36: {};
+declare var __VLS_50: {}, __VLS_52: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_34) => any;
+    header?: (props: typeof __VLS_50) => any;
 } & {
-    default?: (props: typeof __VLS_36) => any;
+    default?: (props: typeof __VLS_52) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LPageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LPageProps> & Readonly<{}>, {
     padding: boolean;

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

@@ -1,3 +1,3 @@
 <template>
-    <l-btn :color="$light.color" icon="sym_o_save" label="Save" />
+    <l-btn icon="sym_o_save" label="Save" />
 </template>

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.d.vue.ts

@@ -23,8 +23,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
-    required: boolean;
     format24h: boolean;
+    required: boolean;
     mask: string;
     hideBottomSpace: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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/components/l-time-picker.vue.d.ts

@@ -23,8 +23,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
-    required: boolean;
     format24h: boolean;
+    required: boolean;
     mask: string;
     hideBottomSpace: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/composables/useLight.d.ts

@@ -224,8 +224,6 @@ declare const light: {
             isoName: string;
             nativeName: string;
             label: {
-                create: string;
-                set: string;
                 cancel: string;
                 close: string;
                 reset: string;
@@ -233,9 +231,11 @@ declare const light: {
                 filter: string;
                 update: string;
                 remove: string;
+                set: string;
                 clear: string;
                 ok: string;
                 search: string;
+                create: string;
                 refresh: string;
                 expand: (label?: string | undefined) => string;
                 collapse: (label?: string | undefined) => string;
@@ -319,9 +319,9 @@ declare const light: {
             name: string;
             type: {
                 info: string;
-                positive: string;
-                negative: string;
                 warning: string;
+                negative: string;
+                positive: string;
             };
             arrow: {
                 left: string;
@@ -821,8 +821,6 @@ declare const _default: () => {
             isoName: string;
             nativeName: string;
             label: {
-                create: string;
-                set: string;
                 cancel: string;
                 close: string;
                 reset: string;
@@ -830,9 +828,11 @@ declare const _default: () => {
                 filter: string;
                 update: string;
                 remove: string;
+                set: string;
                 clear: string;
                 ok: string;
                 search: string;
+                create: string;
                 refresh: string;
                 expand: (label?: string | undefined) => string;
                 collapse: (label?: string | undefined) => string;
@@ -916,9 +916,9 @@ declare const _default: () => {
             name: string;
             type: {
                 info: string;
-                positive: string;
-                negative: string;
                 warning: string;
+                negative: string;
+                positive: string;
             };
             arrow: {
                 left: string;

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