@hostlink/nuxt-light 1.66.2 → 1.67.0

package/dist/module.d.mts

@@ -2,6 +2,11 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
     checkPagePermissions?: boolean;
+    tableActionIcons?: {
+        view?: string;
+        edit?: string;
+        delete?: string;
+    };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -334,6 +334,16 @@ const module$1 = defineNuxtModule({
   }, */
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
+    nuxt.options.runtimeConfig = nuxt.options.runtimeConfig || {};
+    nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {};
+    nuxt.options.runtimeConfig.public.light = {
+      ...nuxt.options.runtimeConfig.public.light || {},
+      tableActionIcons: {
+        view: options.tableActionIcons?.view,
+        edit: options.tableActionIcons?.edit,
+        delete: options.tableActionIcons?.delete
+      }
+    };
     extendPages((pages) => {
       for (const route of routes) {
         if (route.children) {

package/dist/runtime/components/L/DatePicker.d.vue.ts

@@ -19,13 +19,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     square: boolean;
     dense: boolean;
     disable: boolean;
+    range: boolean;
     outlined: boolean;
     filled: boolean;
     stackLabel: boolean;
     standout: string | boolean;
     hideBottomSpace: boolean;
     todayBtn: boolean;
-    range: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/L/DatePicker.vue.d.ts

@@ -19,13 +19,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     square: boolean;
     dense: boolean;
     disable: boolean;
+    range: boolean;
     outlined: boolean;
     filled: boolean;
     stackLabel: boolean;
     standout: string | boolean;
     hideBottomSpace: boolean;
     todayBtn: boolean;
-    range: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/L/DeleteBtn.d.vue.ts

@@ -1,11 +1,20 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{
+    icon?: any;
     to?: any;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
+    icon?: any;
     to?: any;
 }> & Readonly<{
     onSubmit?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

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

@@ -2,7 +2,7 @@
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
-const props = defineProps(["to"]);
+const props = defineProps(["to", "icon"]);
 const emit = defineEmits(["submit"]);
 const qua = useQuasar();
 const onDelete = () => {
@@ -19,5 +19,7 @@ const onDelete = () => {
 </script>
 
 <template>
-    <q-btn flat round icon="sym_o_delete" @click="onDelete" />
+    <q-btn flat round :icon="icon || 'sym_o_delete'" @click="onDelete">
+        <slot></slot>
+    </q-btn>
 </template>

package/dist/runtime/components/L/DeleteBtn.vue.d.ts

@@ -1,11 +1,20 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{
+    icon?: any;
     to?: any;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
+    icon?: any;
     to?: any;
 }> & Readonly<{
     onSubmit?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/L/SearchNumber.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    modelValue?: number | string | {
+        min?: number | null;
+        max?: number | null;
+    } | null;
+    placeholder?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: any) => any;
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,139 @@
+<script setup>
+import { ref, watch, computed } from "vue";
+import { useI18n } from "vue-i18n";
+const props = defineProps({
+  modelValue: { type: [Number, String, Object, null], required: false },
+  placeholder: { type: String, required: false }
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+const { t } = useI18n();
+const mode = ref("equals");
+const equalsValue = ref(null);
+const minValue = ref(null);
+const maxValue = ref(null);
+watch(() => props.modelValue, (val) => {
+  if (val == null || val === "") {
+    equalsValue.value = null;
+    minValue.value = null;
+    maxValue.value = null;
+  } else if (typeof val === "object") {
+    mode.value = "range";
+    equalsValue.value = null;
+    minValue.value = val.min ?? null;
+    maxValue.value = val.max ?? null;
+  } else {
+    mode.value = "equals";
+    equalsValue.value = Number(val);
+    minValue.value = null;
+    maxValue.value = null;
+  }
+}, { immediate: true });
+const hasValue = computed(() => {
+  if (props.modelValue == null || props.modelValue === "") return false;
+  if (typeof props.modelValue === "object") {
+    const { min, max } = props.modelValue;
+    return min != null || max != null;
+  }
+  return true;
+});
+const displayLabel = computed(() => {
+  if (!hasValue.value) return t("Search");
+  if (typeof props.modelValue === "object") {
+    const { min, max } = props.modelValue;
+    if (min != null && max != null) return `${min} \u2013 ${max}`;
+    if (min != null) return `\u2265 ${min}`;
+    if (max != null) return `\u2264 ${max}`;
+  }
+  return `= ${props.modelValue}`;
+});
+const apply = () => {
+  let out = null;
+  if (mode.value === "equals") {
+    out = equalsValue.value;
+  } else {
+    const outRange = {};
+    if (minValue.value != null) outRange.min = minValue.value;
+    if (maxValue.value != null) outRange.max = maxValue.value;
+    if (Object.keys(outRange).length > 0) out = outRange;
+  }
+  emit("update:modelValue", out);
+  emit("change", out);
+};
+const clear = () => {
+  equalsValue.value = null;
+  minValue.value = null;
+  maxValue.value = null;
+  emit("update:modelValue", null);
+  emit("change", null);
+};
+</script>
+
+<template>
+    <q-btn-dropdown
+        dense flat square no-caps
+        :color="hasValue ? 'primary' : 'grey-7'"
+        :label="displayLabel"
+        :icon="hasValue ? 'sym_o_filter_alt' : 'sym_o_search'"
+        size="sm"
+        content-class="l-search-number-dropdown"
+    >
+        <div class="q-pa-md" style="min-width: 280px">
+            <q-tabs
+                v-model="mode"
+                dense
+                no-caps
+                align="left"
+                active-color="primary"
+                indicator-color="primary"
+                class="text-grey"
+            >
+                <q-tab name="equals" :label="t('Equals')" />
+                <q-tab name="range" :label="t('Range')" />
+            </q-tabs>
+
+            <q-separator class="q-mb-sm" />
+
+            <q-tab-panels v-model="mode" animated>
+                <q-tab-panel name="equals" class="q-pa-none">
+                    <q-input
+                        v-model.number="equalsValue"
+                        dense filled square
+                        type="number"
+                        mask="##########"
+                        :placeholder="placeholder || t('Enter a number')"
+                        autofocus
+                        @keydown.enter.prevent="apply"
+                    />
+                </q-tab-panel>
+                <q-tab-panel name="range" class="q-pa-none">
+                    <div class="row q-gutter-sm items-center">
+                        <q-input
+                            v-model.number="minValue"
+                            dense filled square
+                            type="number"
+                            mask="##########"
+                            :placeholder="t('Min')"
+                            class="col"
+                            @keydown.enter.prevent="apply"
+                        />
+                        <span class="text-grey">—</span>
+                        <q-input
+                            v-model.number="maxValue"
+                            dense filled square
+                            type="number"
+                            mask="##########"
+                            :placeholder="t('Max')"
+                            class="col"
+                            @keydown.enter.prevent="apply"
+                        />
+                    </div>
+                </q-tab-panel>
+            </q-tab-panels>
+
+            <div class="row q-gutter-sm justify-end q-mt-md">
+                <q-btn flat dense :label="t('Clear')" color="negative" @click="clear" />
+                <q-btn flat dense :label="t('Apply')" color="primary" @click="apply" />
+            </div>
+        </div>
+    </q-btn-dropdown>
+</template>

package/dist/runtime/components/L/SearchNumber.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    modelValue?: number | string | {
+        min?: number | null;
+        max?: number | null;
+    } | null;
+    placeholder?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: any) => any;
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/L/Table.d.vue.ts

@@ -1,10 +1,18 @@
 import type { Component } from "vue";
 import { Dialog } from 'quasar';
 import type { QTableColumn, QTableProps } from 'quasar';
+export interface SearchOptionsContext {
+    filters: Record<string, any>;
+    columnValue: any;
+    column: LTableColumn;
+}
+export type SearchOptionsResolver = (ctx: SearchOptionsContext) => Promise<Record<string, any>[]>;
 export type LTableColumn = QTableColumn & {
     searchType?: "date" | "text" | "number" | "select" | "boolean";
     searchable?: boolean;
-    searchOptions?: Record<string, any>[] | Function;
+    searchPlaceholder?: string;
+    searchOptions?: Record<string, any>[] | SearchOptionsResolver;
+    searchDependsOn?: string[];
     searchMultiple?: boolean;
     searchIndex?: string;
     component?: Component;
@@ -15,7 +23,7 @@ export type LTableColumn = QTableColumn & {
      * @deprecated use gql instead
      */
     gqlField?: string | Array<string> | Object;
-    searchMethod?: "equals" | "contains";
+    searchMethod?: "equals" | "contains" | "range";
     autoWidth?: boolean;
 };
 export type LTableProps = QTableProps & {
@@ -71,17 +79,17 @@ export interface LTableRequest {
     }) => void;
 }
 declare function requestServerInteraction(): void;
-declare var __VLS_114: any, __VLS_117: string, __VLS_118: any, __VLS_149: any, __VLS_152: any, __VLS_315: string, __VLS_316: any;
+declare var __VLS_135: any, __VLS_138: string, __VLS_139: any, __VLS_170: any, __VLS_173: any, __VLS_343: string, __VLS_344: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_117>]?: (props: typeof __VLS_118) => any;
+    [K in NonNullable<typeof __VLS_138>]?: (props: typeof __VLS_139) => any;
 } & {
-    [K in NonNullable<typeof __VLS_315>]?: (props: typeof __VLS_316) => any;
+    [K in NonNullable<typeof __VLS_343>]?: (props: typeof __VLS_344) => any;
 } & {
-    actions?: (props: typeof __VLS_114) => any;
+    actions?: (props: typeof __VLS_135) => any;
 } & {
-    'row-expand'?: (props: typeof __VLS_149) => any;
+    'row-expand'?: (props: typeof __VLS_170) => any;
 } & {
-    'top-right'?: (props: typeof __VLS_152) => any;
+    'top-right'?: (props: typeof __VLS_173) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LTableProps, {
     requestServerInteraction: typeof requestServerInteraction;

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

@@ -149,7 +149,8 @@ const localColumns = computed(
     ...col,
     align: col.align ?? "left",
     field: col.field ?? col.name,
-    label: t(col.label)
+    label: t(col.label),
+    searchPlaceholder: col.searchPlaceholder ? t(col.searchPlaceholder) : void 0
   }))
 );
 const emits = defineEmits(["request-data", "update:selected", "delete"]);
@@ -171,15 +172,45 @@ const table = ref();
 const rows = ref(props.rows ?? []);
 const resolvedSearchOptions = ref({});
 const localSearchOptions = ref({});
-onMounted(async () => {
-  for (const col of props.columns ?? []) {
-    if (!col.searchOptions) continue;
-    const resolved = typeof col.searchOptions === "function" ? await col.searchOptions() : col.searchOptions;
-    resolvedSearchOptions.value[col.name] = resolved;
-    localSearchOptions.value[col.name] = resolved;
+let resolveSeq = 0;
+const resolveColumnOptions = async (col) => {
+  if (!col.searchOptions || !col.name) return;
+  if (Array.isArray(col.searchOptions)) {
+    resolvedSearchOptions.value[col.name] = col.searchOptions;
+    localSearchOptions.value[col.name] = col.searchOptions;
+    return;
   }
+  const ctx = {
+    filters: { ...filters.value },
+    columnValue: filters.value[col.name],
+    column: col
+  };
+  const seq = ++resolveSeq;
+  try {
+    const result = await col.searchOptions(ctx);
+    if (seq !== resolveSeq) return;
+    resolvedSearchOptions.value[col.name] = result;
+    localSearchOptions.value[col.name] = result;
+  } catch {
+  }
+};
+onMounted(async () => {
+  await Promise.all(
+    (props.columns ?? []).map((col) => resolveColumnOptions(col))
+  );
   table.value?.requestServerInteraction();
 });
+watch(filters, (newFilters, oldFilters) => {
+  if (!props.columns) return;
+  for (const col of props.columns) {
+    if (!col.searchDependsOn?.length) continue;
+    if (typeof col.searchOptions !== "function") continue;
+    if (!col.name) continue;
+    const deps = col.searchDependsOn;
+    const changed = deps.some((dep) => newFilters?.[dep] !== oldFilters?.[dep]);
+    if (changed) resolveColumnOptions(col);
+  }
+}, { deep: true });
 const primaryKey = ref(props.rowKey);
 const modelName = ref(props.modelName);
 const validateData = () => {
@@ -335,6 +366,18 @@ const getFilterValue = () => {
         const k = col.searchIndex ?? col.name;
         if (col.searchType == "boolean") {
           f[k] = filters.value[col.name];
+        } else if (col.searchMethod == "range" && typeof filters.value[col.name] === "object") {
+          const rangeValue = filters.value[col.name];
+          const rangeFilter = {};
+          if (rangeValue.min !== null && rangeValue.min !== "" && rangeValue.min !== void 0) {
+            rangeFilter._gte = Number(rangeValue.min);
+          }
+          if (rangeValue.max !== null && rangeValue.max !== "" && rangeValue.max !== void 0) {
+            rangeFilter._lte = Number(rangeValue.max);
+          }
+          if (Object.keys(rangeFilter).length > 0) {
+            f[k] = rangeFilter;
+          }
         } else if (col.searchType == "number") {
           f[k] = filters.value[col.name];
         } else if (col.searchType == "date") {
@@ -460,6 +503,9 @@ const localFilterMethod = (rows2, terms) => {
         if (!String(cell ?? "").toLowerCase().includes(String(value.contains).toLowerCase())) return false;
       } else if (typeof value === "object" && value !== null && "_between" in value) {
         if (cell < value._between[0] || cell > value._between[1]) return false;
+      } else if (typeof value === "object" && value !== null && ("_gte" in value || "_lte" in value)) {
+        if ("_gte" in value && value._gte !== null && value._gte !== void 0 && cell < value._gte) return false;
+        if ("_lte" in value && value._lte !== null && value._lte !== void 0 && cell > value._lte) return false;
       } else {
         if (cell !== value) return false;
       }
@@ -549,13 +595,22 @@ const hasFilters = computed(() => {
                     <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
 
                         <l-action-btn v-if="actionView && props.row.canView"
-                            :to="`/${modelName}/${props.row[primaryKey]}/view`" icon="sym_o_search" />
+                            :to="`/${modelName}/${props.row[primaryKey]}/view`"
+                            :icon="light.styles.table.actionIcons.view">
+                            <q-tooltip>{{ $t("View") }}</q-tooltip>
+                        </l-action-btn>
 
                         <l-action-btn v-if="activeEdit && props.row.canUpdate"
-                            :to="`/${modelName}/${props.row[primaryKey]}/edit`" icon="sym_o_edit" />
+                            :to="`/${modelName}/${props.row[primaryKey]}/edit`"
+                            :icon="light.styles.table.actionIcons.edit">
+                            <q-tooltip>{{ $t("Edit") }}</q-tooltip>
+                        </l-action-btn>
 
                         <l-delete-btn v-if="actionDelete && props.row.canDelete"
-                            @submit="onDelete(props.row[primaryKey])" size="sm"></l-delete-btn>
+                            :icon="light.styles.table.actionIcons.delete"
+                            @submit="onDelete(props.row[primaryKey])" size="sm">
+                            <q-tooltip>{{ $t("Delete") }}</q-tooltip>
+                        </l-delete-btn>
 
                         <slot name="actions" v-bind="props"></slot>
                     </div>
@@ -648,7 +703,14 @@ const hasFilters = computed(() => {
 
                     <template v-if="col.searchable">
 
-                        <template v-if="col.searchType == 'number'">
+                        <template v-if="col.searchMethod == 'range' && (!col.searchType || col.searchType == 'number')">
+                            <l-search-number
+                                v-model="filters[col.name]"
+                                @change="onFilters"
+                            />
+                        </template>
+
+                        <template v-else-if="col.searchType == 'number'">
                             <q-input style="min-width: 80px;" dense clearable filled square
                                 v-model.number="tempFilters[col.name]"
                                 @keydown.enter.prevent="filters[col.name] = tempFilters[col.name]"
@@ -677,9 +739,9 @@ const hasFilters = computed(() => {
 
                         </template>
 
-                        <template v-if="!col.searchType || col.searchType == 'text'">
+                        <template v-if="(!col.searchType || col.searchType == 'text') && col.searchMethod != 'range'">
                             <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')" :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')" :placeholder="col.searchPlaceholder" :style="col.searchStyle"></q-input>
 
                         </template>
 

package/dist/runtime/components/L/Table.vue.d.ts

@@ -1,10 +1,18 @@
 import type { Component } from "vue";
 import { Dialog } from 'quasar';
 import type { QTableColumn, QTableProps } from 'quasar';
+export interface SearchOptionsContext {
+    filters: Record<string, any>;
+    columnValue: any;
+    column: LTableColumn;
+}
+export type SearchOptionsResolver = (ctx: SearchOptionsContext) => Promise<Record<string, any>[]>;
 export type LTableColumn = QTableColumn & {
     searchType?: "date" | "text" | "number" | "select" | "boolean";
     searchable?: boolean;
-    searchOptions?: Record<string, any>[] | Function;
+    searchPlaceholder?: string;
+    searchOptions?: Record<string, any>[] | SearchOptionsResolver;
+    searchDependsOn?: string[];
     searchMultiple?: boolean;
     searchIndex?: string;
     component?: Component;
@@ -15,7 +23,7 @@ export type LTableColumn = QTableColumn & {
      * @deprecated use gql instead
      */
     gqlField?: string | Array<string> | Object;
-    searchMethod?: "equals" | "contains";
+    searchMethod?: "equals" | "contains" | "range";
     autoWidth?: boolean;
 };
 export type LTableProps = QTableProps & {
@@ -71,17 +79,17 @@ export interface LTableRequest {
     }) => void;
 }
 declare function requestServerInteraction(): void;
-declare var __VLS_114: any, __VLS_117: string, __VLS_118: any, __VLS_149: any, __VLS_152: any, __VLS_315: string, __VLS_316: any;
+declare var __VLS_135: any, __VLS_138: string, __VLS_139: any, __VLS_170: any, __VLS_173: any, __VLS_343: string, __VLS_344: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_117>]?: (props: typeof __VLS_118) => any;
+    [K in NonNullable<typeof __VLS_138>]?: (props: typeof __VLS_139) => any;
 } & {
-    [K in NonNullable<typeof __VLS_315>]?: (props: typeof __VLS_316) => any;
+    [K in NonNullable<typeof __VLS_343>]?: (props: typeof __VLS_344) => any;
 } & {
-    actions?: (props: typeof __VLS_114) => any;
+    actions?: (props: typeof __VLS_135) => any;
 } & {
-    'row-expand'?: (props: typeof __VLS_149) => any;
+    'row-expand'?: (props: typeof __VLS_170) => any;
 } & {
-    'top-right'?: (props: typeof __VLS_152) => any;
+    'top-right'?: (props: typeof __VLS_173) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LTableProps, {
     requestServerInteraction: typeof requestServerInteraction;

package/dist/runtime/composables/useLight.js

@@ -40,7 +40,12 @@ const light = reactive({
       dense: true,
       flat: true,
       bordered: true,
-      separator: "cell"
+      separator: "cell",
+      actionIcons: {
+        view: "sym_o_search",
+        edit: "sym_o_edit",
+        delete: "sym_o_delete"
+      }
     },
     card: {
       flat: true,
@@ -220,6 +225,10 @@ const light = reactive({
     light.styles.button = { ...light.styles.button, ...styles.button || {} };
     light.styles.table = { ...light.styles.table, ...styles.table || {} };
     light.styles.table.color = light.color;
+    light.styles.table.actionIcons = {
+      ...light.styles.table.actionIcons,
+      ...styles.table?.actionIcons || {}
+    };
     watch(() => light.theme, async () => {
       await light.setStyle("theme", light.theme);
     });

package/dist/runtime/models/EventLog.js

@@ -17,7 +17,11 @@ export default defineLightModel({
     id: {
       label: "ID",
       sortable: true,
-      searchable: true
+      searchable: true,
+      searchMethod: "range",
+      // 啟用 min/max 搜尋
+      searchType: "number"
+      // 配合 number input
     },
     action: {
       label: "Action",

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

@@ -60,27 +60,37 @@ const rows = computed(() => {
 const onUpdate = async (value, role, permission) => {
   const updateKey = `${role}-${permission}`;
   updating.value.add(updateKey);
+  const roleObj = app.value?.roles.find((r) => r.name === role);
+  if (!roleObj) {
+    updating.value.delete(updateKey);
+    return;
+  }
+  const originalPermissions = [...roleObj.permissions];
+  if (value) {
+    if (!roleObj.permissions.includes(permission)) {
+      roleObj.permissions = [...roleObj.permissions, permission];
+    }
+  } else {
+    if (roleObj.permissions.includes(permission)) {
+      roleObj.permissions = roleObj.permissions.filter((p) => p !== permission);
+    }
+  }
   try {
     if (value) {
       await m("addPermission", { value: permission, role });
-      $q.notify({
-        type: "positive",
-        message: t("Permission granted successfully")
-      });
     } else {
       await m("removePermission", { value: permission, role });
-      $q.notify({
-        type: "positive",
-        message: t("Permission removed successfully")
-      });
     }
-    app.value = await fetchApp();
+    $q.notify({
+      type: "positive",
+      message: t(value ? "Permission granted successfully" : "Permission removed successfully")
+    });
   } catch (error) {
+    roleObj.permissions = originalPermissions;
     $q.notify({
       type: "negative",
       message: t("Failed to update permission")
     });
-    app.value = await fetchApp();
   } finally {
     updating.value.delete(updateKey);
   }
@@ -94,8 +104,9 @@ const toggleAllForRole = async (role, grant) => {
     }
   }
   if (updates.length === 0) return;
+  const originalPermissions = [...role.permissions];
+  role.permissions = grant ? [...app.value.permissions] : [];
   try {
-    loading.value = true;
     for (const update of updates) {
       if (update.grant) {
         await m("addPermission", { value: update.permission, role: update.role });
@@ -103,18 +114,16 @@ const toggleAllForRole = async (role, grant) => {
         await m("removePermission", { value: update.permission, role: update.role });
       }
     }
-    app.value = await fetchApp();
     $q.notify({
       type: "positive",
       message: t(grant ? "All permissions granted" : "All permissions removed")
     });
   } catch (error) {
+    role.permissions = originalPermissions;
     $q.notify({
       type: "negative",
       message: t("Failed to update permissions")
     });
-  } finally {
-    loading.value = false;
   }
 };
 const filter = ref("");

package/dist/runtime/plugin.js

@@ -3,7 +3,7 @@ import "@quasar/quasar-ui-qmarkdown/dist/index.css";
 import { createClient, setApiClient, defineModel } from "@hostlink/light";
 import { createI18n } from "vue-i18n";
 import createLight from "./composables/createLight.js";
-import { defineNuxtPlugin, useRoute } from "#app";
+import { defineNuxtPlugin, useRoute, useRuntimeConfig } from "#app";
 import "./assets/main.css";
 import message_en from "./locales/en.json";
 import message_zh from "./locales/zh-hk.json";
@@ -22,14 +22,14 @@ export default defineNuxtPlugin((nuxtApp) => {
   defineModel("Config", {}).setDataPath("app.listConfig");
   nuxtApp.vueApp.config.errorHandler = (err, instance, info) => {
     const $route = useRoute();
-    const light = useLight();
-    if (light.devMode) {
+    const light2 = useLight();
+    if (light2.devMode) {
       console.log(err);
     }
     if (err instanceof Error) {
-      light.addError(err.message + " at " + $route.fullPath);
+      light2.addError(err.message + " at " + $route.fullPath);
     } else {
-      light.addError(JSON.stringify(err) + " at " + $route.fullPath);
+      light2.addError(JSON.stringify(err) + " at " + $route.fullPath);
     }
   };
   nuxtApp.vueApp.use(QMarkdownVuePlugin);
@@ -44,6 +44,14 @@ export default defineNuxtPlugin((nuxtApp) => {
     fallbackWarn: false,
     missingWarn: false
   });
+  const light = useLight();
+  const runtimeLight = useRuntimeConfig().public.light;
+  if (runtimeLight?.tableActionIcons) {
+    const t = runtimeLight.tableActionIcons;
+    if (t.view) light.styles.table.actionIcons.view = t.view;
+    if (t.edit) light.styles.table.actionIcons.edit = t.edit;
+    if (t.delete) light.styles.table.actionIcons.delete = t.delete;
+  }
   nuxtApp.vueApp.use(createLight({
     i18n
   }));

package/package.json

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