@hostlink/nuxt-light 1.49.4 → 1.50.0

package/dist/module.json

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

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

@@ -292,7 +292,7 @@ const onLogout = async () => {
 
                 <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
                     <q-menu max-width="250px">
-                        <q-list>
+                        <q-list :dense="style.dense">
                             <q-item v-close-popup to="/User/profile">
                                 <q-item-section avatar>
                                     <q-icon name="sym_o_person" />
@@ -302,7 +302,7 @@ const onLogout = async () => {
 
                             <q-item v-close-popup to="/User/setting">
                                 <q-item-section avatar>
-                                    <q-icon name="sym_o_settings" />
+                                    <q-icon name="sym_o_settings_account_box" />
                                 </q-item-section>
                                 <q-item-section>{{ $t("Setting") }}</q-item-section>
                             </q-item>

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

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<QSelectProps, {}, {}, {},
     square: boolean;
     dense: boolean;
     outlined: boolean;
+    optionValue: string | ((option: string | any) => any);
     filled: boolean;
     stackLabel: boolean;
     standout: string | boolean;
@@ -12,7 +13,6 @@ declare const _default: import("vue").DefineComponent<QSelectProps, {}, {}, {},
     emitValue: boolean;
     mapOptions: boolean;
     inputDebounce: string | number;
-    optionValue: string | ((option: string | any) => any);
     optionLabel: string | ((option: string | any) => string);
     optionsDark: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<QSelectProps, {}, {}, {},
     square: boolean;
     dense: boolean;
     outlined: boolean;
+    optionValue: string | ((option: string | any) => any);
     filled: boolean;
     stackLabel: boolean;
     standout: string | boolean;
@@ -12,7 +13,6 @@ declare const _default: import("vue").DefineComponent<QSelectProps, {}, {}, {},
     emitValue: boolean;
     mapOptions: boolean;
     inputDebounce: string | number;
-    optionValue: string | ((option: string | any) => any);
     optionLabel: string | ((option: string | any) => string);
     optionsDark: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -2,13 +2,13 @@ import type { Component } from "vue";
 import { Dialog } from 'quasar';
 import type { QTableColumn, QTableProps } from 'quasar';
 export type LTableColumn = QTableColumn & {
-    searchType?: "date" | "text" | "number" | "select";
+    searchType?: "date" | "text" | "number" | "select" | "boolean";
     searchable?: boolean;
     searchOptions?: Record<string, any>[] | Function;
     searchMultiple?: boolean;
     searchIndex?: string;
     component?: Component;
-    componentProps?: any;
+    componentProps?: ((row: any) => Record<string, any>);
     to?: (row: any) => string | null;
     gql?: Record<string, any>;
     /**
@@ -22,7 +22,7 @@ export type LTableColumn = QTableColumn & {
 export type LTableProps = QTableProps & {
     columns?: Array<LTableColumn>;
     actions?: Array<'view' | 'edit' | 'delete' | 'update'>;
-    sortBy?: any;
+    sortBy?: string;
     rowKey?: string;
     modelName?: any;
     searchable?: boolean;
@@ -70,15 +70,17 @@ export interface LTableRequest {
     }) => void;
 }
 declare function requestServerInteraction(): void;
-declare var __VLS_91: any, __VLS_94: string, __VLS_95: any, __VLS_117: any, __VLS_203: string, __VLS_204: any;
+declare var __VLS_91: any, __VLS_94: string, __VLS_95: any, __VLS_117: any, __VLS_119: any, __VLS_248: string, __VLS_249: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_94>]?: (props: typeof __VLS_95) => any;
 } & {
-    [K in NonNullable<typeof __VLS_203>]?: (props: typeof __VLS_204) => any;
+    [K in NonNullable<typeof __VLS_248>]?: (props: typeof __VLS_249) => any;
 } & {
     actions?: (props: typeof __VLS_91) => any;
 } & {
     'row-expand'?: (props: typeof __VLS_117) => any;
+} & {
+    'top-right'?: (props: typeof __VLS_119) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LTableProps, {
     requestServerInteraction: typeof requestServerInteraction;

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

@@ -7,7 +7,7 @@ import model from "../composables/model";
 import { toQuery } from "@hostlink/light";
 import { list } from "#imports";
 import { useI18n } from "vue-i18n";
-import { useStorage } from "@vueuse/core";
+import { useStorage, useSessionStorage } from "@vueuse/core";
 import { useRoute } from "#imports";
 const $q = useQuasar();
 const { t } = useI18n();
@@ -98,7 +98,7 @@ const props = defineProps({
   "onUpdate:expanded": { type: Function, required: false },
   onVirtualScroll: { type: Function, required: false },
   actions: { type: Array, required: false, default: () => [] },
-  sortBy: { type: null, required: false },
+  sortBy: { type: String, required: false },
   modelName: { type: null, required: false },
   searchable: { type: Boolean, required: false, default: false },
   onRequestData: { type: Function, required: false },
@@ -108,6 +108,31 @@ const props = defineProps({
   searchStyle: { type: String, required: false }
 });
 const isServerSide = props.rows == void 0;
+const simpleRouteName = computed(() => {
+  if ($route.name && typeof $route.name == "string") {
+    return $route.name;
+  }
+  return "";
+});
+const storageKey = computed(() => {
+  if (!props.name) return "l-table-storage-default";
+  return "l-table-storage-" + simpleRouteName.value + "-" + props.name;
+});
+const saveFilters = computed({
+  get() {
+    if (!props.name) return false;
+    return useStorage(storageKey.value, false).value;
+  },
+  set(value) {
+    if (!props.name) return;
+    const storage = useStorage(storageKey.value, false);
+    storage.value = value;
+  }
+});
+const filters = useSessionStorage(storageKey.value, {});
+if (!saveFilters.value) {
+  filters.value = {};
+}
 const light = useLight();
 const pagination = ref(props.pagination);
 if (props.rowsPerPageOptions[0] == 0) {
@@ -124,8 +149,8 @@ props.columns?.forEach((col) => {
 });
 if (props.columns) {
   for (let i = 0; i < props.columns.length; i++) {
-    if (props.columns[i].searchOptions) {
-      let opts = props.columns[i].searchOptions;
+    if (props.columns[i]?.searchOptions) {
+      let opts = props.columns[i]?.searchOptions;
       if (typeof opts == "function") {
         props.columns[i].searchOptions = await opts();
       }
@@ -153,7 +178,6 @@ const hasSearch = computed(() => {
   });
 });
 const table = ref();
-const filters = reactive({});
 const rows = ref(props.rows);
 if (rows.value == void 0) {
   rows.value = [];
@@ -307,26 +331,28 @@ const getFilterValue = () => {
   let f = {};
   props.columns?.forEach((col) => {
     if (col.searchable) {
-      if (filters[col.name] !== null && filters[col.name] !== "" && filters[col.name] !== void 0) {
+      if (filters.value[col.name] !== null && filters.value[col.name] !== "" && filters.value[col.name] !== void 0) {
         const k = col.searchIndex ?? col.name;
-        if (col.searchType == "number") {
-          f[k] = filters[col.name];
+        if (col.searchType == "boolean") {
+          f[k] = filters.value[col.name];
+        } else if (col.searchType == "number") {
+          f[k] = filters.value[col.name];
         } else if (col.searchType == "date") {
-          if (filters[k].from) {
+          if (filters.value[k].from) {
             f[k] = {
-              between: [filters[col.name].from, filters[col.name].to]
+              _between: [filters.value[col.name].from, filters.value[col.name].to]
             };
           } else {
-            f[k] = filters[k];
+            f[k] = filters.value[k];
           }
         } else if (col.searchType == "select") {
-          f[k] = filters[col.name];
+          f[k] = filters.value[col.name];
         } else {
           if (col.searchMethod == "equals") {
-            f[k] = filters[col.name];
+            f[k] = filters.value[col.name];
           } else {
             f[k] = {
-              contains: filters[col.name]
+              contains: filters.value[col.name]
             };
           }
         }
@@ -467,21 +493,21 @@ const searchSelectFilter = (val, update, name) => {
   }
 };
 const showTopRight = computed(() => {
-  return props.searchable || props.name && (props.columns && props.columns.length > 0);
+  return props.name && hasFilters.value || props.searchable || props.name && (props.columns && props.columns.length > 0);
 });
 const hidableColumns = computed(() => {
   return props.columns?.filter((c) => !c.required) || [];
 });
-const simpleRouteName = computed(() => {
-  if ($route.name && typeof $route.name == "string") {
-    return $route.name;
-  }
-  return "";
-});
 const visibleColumns = props.name ? useStorage("l-table-visible-columns-" + simpleRouteName.value + "-" + props.name, hidableColumns.value.map((c) => c.name)) : ref(hidableColumns.value.map((c) => c.name));
 watch(filters, () => {
+  console.log("filters changed", filters.value);
   onFilters();
 }, { deep: true });
+const tempFilters = ref({});
+tempFilters.value = { ...filters.value };
+const hasFilters = computed(() => {
+  return Object.keys(filters.value).length > 0;
+});
 </script>
 
 <template>
@@ -491,7 +517,7 @@ watch(filters, () => {
         <template #header="props">
             <q-tr :props="props">
                 <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" />
+                    <q-checkbox v-model="props.selected" :color="$light.color" />
                 </q-td>
                 <q-th v-if="hasRowExpand" auto-width></q-th>
                 <q-th v-if="hasActions" auto-width></q-th>
@@ -517,7 +543,7 @@ watch(filters, () => {
         <template #body="props">
             <q-tr :props="props">
                 <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" />
+                    <q-checkbox v-model="props.selected" :color="$light.color" />
                 </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'"
@@ -542,7 +568,6 @@ watch(filters, () => {
                 </q-td>
 
 
-
                 <template v-for="col in props.cols">
                     <template v-if="ss.indexOf('body-cell-' + col.name) >= 0">
                         <slot :name="'body-cell-' + col.name" v-bind="props"></slot>
@@ -573,6 +598,15 @@ watch(filters, () => {
 
 
         <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 = {};
+  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">
                 <template v-slot:append>
@@ -580,18 +614,32 @@ watch(filters, () => {
                 </template>
             </q-input>
 
-            <q-icon name="sym_o_view_column" size="sm" class="cursor-pointer" :color="$light.color">
+            <q-btn icon="sym_o_settings" flat dense :color="$light.color" v-if="$props.name">
                 <q-popup-proxy>
                     <q-card>
                         <q-card-section>
-                            <div v-for="column in hidableColumns" :key="column.name" class="q-mb-xs">
-                                <q-checkbox v-model="visibleColumns" :val="column.name" :label="column.label"
-                                    :color="$light.color" dense />
-                            </div>
+                            <q-checkbox label="Save filters" v-model="saveFilters" :color="$light.color" />
                         </q-card-section>
                     </q-card>
                 </q-popup-proxy>
-            </q-icon>
+            </q-btn>
+
+            <q-btn icon="sym_o_view_column" flat dense :color="$light.color" 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>
+                        </q-card-section>
+                    </q-card>
+                </q-popup-proxy>
+            </q-btn>
+
+
+            <q-btn icon="sym_o_refresh" flat dense :color="$light.color" @click="requestServerInteraction()">
+                <q-tooltip>{{ $t("Refresh") }}</q-tooltip>
+            </q-btn>
         </template>
 
 
@@ -614,29 +662,40 @@ watch(filters, () => {
 
                         <template v-if="col.searchType == 'number'">
                             <q-input style="min-width: 80px;" dense clearable filled square
-                                v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters" @clear="onFilters"
-                                mask="##########" :enterkeyhint="$t('search')" :style="col.searchStyle"></q-input>
+                                v-model.number="tempFilters[col.name]"
+                                @keydown.enter.prevent="filters[col.name] = tempFilters[col.name]"
+                                @clear="delete filters[col.name]" mask="##########" :enterkeyhint="$t('search')"
+                                :style="col.searchStyle"></q-input>
                         </template>
 
                         <template v-if="col.searchType == 'select'">
-                            <q-select dense clearable filled square v-model="filters[col.name]"
-                                @update:model-value="onFilters" options-dense :options="localSearchOptions[col.name]"
-                                emit-value map-options :multiple="col.searchMultiple" :color="$light.color" use-input
-                                input-debounce="0" @filter="(val, update) => {
+                            <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) => {
   searchSelectFilter(val, update, col.name);
 }" :style="col.searchStyle" />
                         </template>
 
                         <template v-if="col.searchType == 'date'">
                             <l-date-picker dense clearable filled square :outlined="false" hide-bottom-space
-                                v-model="filters[col.name]" range @clear="onFilters"
-                                :style="col.searchStyle" />
+                                v-model="filters[col.name]" range :style="col.searchStyle" />
+                        </template>
+
+
+                        <template v-if="col.searchType == 'boolean'">
+                            <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 />
+
+
                         </template>
 
                         <template v-if="!col.searchType || col.searchType == 'text'">
-                            <q-input style="min-width: 80px;" dense clearable filled square v-model="filters[col.name]"
-                                @keydown.enter.prevent="onFilters" @clear="onFilters" :enterkeyhint="$t('search')"
-                                :color="$light.color" :style="col.searchStyle"></q-input>
+                            <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>
 
                         </template>
 
@@ -645,8 +704,12 @@ watch(filters, () => {
             </q-tr>
         </template>
 
-        <template v-for="slot of ss" v-slot:[slot]="props">
+        <template v-for="slot of Object.keys($slots)" v-slot:[slot]="props">
             <slot :name="slot" v-bind="props"></slot>
         </template>
+
+
+
+
     </q-table>
 </template>

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

@@ -2,13 +2,13 @@ import type { Component } from "vue";
 import { Dialog } from 'quasar';
 import type { QTableColumn, QTableProps } from 'quasar';
 export type LTableColumn = QTableColumn & {
-    searchType?: "date" | "text" | "number" | "select";
+    searchType?: "date" | "text" | "number" | "select" | "boolean";
     searchable?: boolean;
     searchOptions?: Record<string, any>[] | Function;
     searchMultiple?: boolean;
     searchIndex?: string;
     component?: Component;
-    componentProps?: any;
+    componentProps?: ((row: any) => Record<string, any>);
     to?: (row: any) => string | null;
     gql?: Record<string, any>;
     /**
@@ -22,7 +22,7 @@ export type LTableColumn = QTableColumn & {
 export type LTableProps = QTableProps & {
     columns?: Array<LTableColumn>;
     actions?: Array<'view' | 'edit' | 'delete' | 'update'>;
-    sortBy?: any;
+    sortBy?: string;
     rowKey?: string;
     modelName?: any;
     searchable?: boolean;
@@ -70,15 +70,17 @@ export interface LTableRequest {
     }) => void;
 }
 declare function requestServerInteraction(): void;
-declare var __VLS_91: any, __VLS_94: string, __VLS_95: any, __VLS_117: any, __VLS_203: string, __VLS_204: any;
+declare var __VLS_91: any, __VLS_94: string, __VLS_95: any, __VLS_117: any, __VLS_119: any, __VLS_248: string, __VLS_249: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_94>]?: (props: typeof __VLS_95) => any;
 } & {
-    [K in NonNullable<typeof __VLS_203>]?: (props: typeof __VLS_204) => any;
+    [K in NonNullable<typeof __VLS_248>]?: (props: typeof __VLS_249) => any;
 } & {
     actions?: (props: typeof __VLS_91) => any;
 } & {
     'row-expand'?: (props: typeof __VLS_117) => any;
+} & {
+    'top-right'?: (props: typeof __VLS_119) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LTableProps, {
     requestServerInteraction: typeof requestServerInteraction;

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

@@ -525,9 +525,6 @@ declare const light: {
             readonly datetimeFormats: {};
             readonly numberFormats: {};
             readonly modifiers: import("vue-i18n").LinkedModifiers<import("vue-i18n").VueMessageType>;
-            formatter: {
-                interpolate: (message: string, values: any, path: string) => Array<any> | null;
-            };
             missing: import("vue-i18n").MissingHandler | null;
             postTranslation: import("vue-i18n").PostTranslationHandler<import("vue-i18n").VueMessageType> | null;
             silentTranslationWarn: boolean | RegExp;
@@ -536,15 +533,11 @@ declare const light: {
             sync: boolean;
             warnHtmlInMessage: import("vue-i18n").WarnHtmlInMessageLevel;
             escapeParameterHtml: boolean;
-            preserveDirectiveContent: boolean;
             pluralizationRules: import("@intlify/core-base").PluralizationRules;
             t: import("vue-i18n").VueI18nTranslation<{}, string, import("@intlify/core-base").RemoveIndexSignature<{
                 [x: string]: import("vue-i18n").LocaleMessageValue<import("vue-i18n").VueMessageType>;
             }>, never, never, never>;
             rt: import("vue-i18n").VueI18nResolveLocaleMessageTranslation<string>;
-            tc: import("vue-i18n").VueI18nTranslationChoice<{}, string, import("@intlify/core-base").RemoveIndexSignature<{
-                [x: string]: import("vue-i18n").LocaleMessageValue<import("vue-i18n").VueMessageType>;
-            }>, never, never, never>;
             te: <Str extends string, Key extends never = never>(key: Str | Key, locale?: string | undefined) => boolean;
             tm: <Key extends string, ResourceKeys extends never = never, Locale extends never = never, Target = import("@intlify/core-base").RemoveIndexSignature<{
                 [x: string]: import("vue-i18n").LocaleMessageValue<import("vue-i18n").VueMessageType>;
@@ -576,9 +569,7 @@ declare const light: {
                 [x: string]: import("@intlify/core-base").NumberFormatOptions;
             }> : NumberSchema, Formats extends FormatsType = FormatsType>(locale: LocaleSchema | Locale, format: Formats) => void;
             mergeNumberFormat: <NumberSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends never = never, Formats = import("vue-i18n").IsNever<NumberSchema> extends true ? Record<string, any> : NumberSchema>(locale: LocaleSchema | Locale, format: Formats) => void;
-            getChoiceIndex: (choice: import("vue-i18n").Choice, choicesLength: number) => number;
         };
-        readonly allowComposition: boolean;
         install: (app: import("vue").App, ...options: unknown[]) => void;
         dispose: () => void;
     } | null;
@@ -1131,9 +1122,6 @@ declare const _default: () => {
             readonly datetimeFormats: {};
             readonly numberFormats: {};
             readonly modifiers: import("vue-i18n").LinkedModifiers<import("vue-i18n").VueMessageType>;
-            formatter: {
-                interpolate: (message: string, values: any, path: string) => Array<any> | null;
-            };
             missing: import("vue-i18n").MissingHandler | null;
             postTranslation: import("vue-i18n").PostTranslationHandler<import("vue-i18n").VueMessageType> | null;
             silentTranslationWarn: boolean | RegExp;
@@ -1142,15 +1130,11 @@ declare const _default: () => {
             sync: boolean;
             warnHtmlInMessage: import("vue-i18n").WarnHtmlInMessageLevel;
             escapeParameterHtml: boolean;
-            preserveDirectiveContent: boolean;
             pluralizationRules: import("@intlify/core-base").PluralizationRules;
             t: import("vue-i18n").VueI18nTranslation<{}, string, import("@intlify/core-base").RemoveIndexSignature<{
                 [x: string]: import("vue-i18n").LocaleMessageValue<import("vue-i18n").VueMessageType>;
             }>, never, never, never>;
             rt: import("vue-i18n").VueI18nResolveLocaleMessageTranslation<string>;
-            tc: import("vue-i18n").VueI18nTranslationChoice<{}, string, import("@intlify/core-base").RemoveIndexSignature<{
-                [x: string]: import("vue-i18n").LocaleMessageValue<import("vue-i18n").VueMessageType>;
-            }>, never, never, never>;
             te: <Str extends string, Key extends never = never>(key: Str | Key, locale?: string | undefined) => boolean;
             tm: <Key extends string, ResourceKeys extends never = never, Locale extends never = never, Target = import("@intlify/core-base").RemoveIndexSignature<{
                 [x: string]: import("vue-i18n").LocaleMessageValue<import("vue-i18n").VueMessageType>;
@@ -1182,9 +1166,7 @@ declare const _default: () => {
                 [x: string]: import("@intlify/core-base").NumberFormatOptions;
             }> : NumberSchema, Formats extends FormatsType = FormatsType>(locale: LocaleSchema | Locale, format: Formats) => void;
             mergeNumberFormat: <NumberSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends never = never, Formats = import("vue-i18n").IsNever<NumberSchema> extends true ? Record<string, any> : NumberSchema>(locale: LocaleSchema | Locale, format: Formats) => void;
-            getChoiceIndex: (choice: import("vue-i18n").Choice, choicesLength: number) => number;
         };
-        readonly allowComposition: boolean;
         install: (app: import("vue").App, ...options: unknown[]) => void;
         dispose: () => void;
     } | null;

package/dist/runtime/models/User.d.ts

@@ -57,7 +57,6 @@ declare const _default: {
         };
         has2FA: {
             label: string;
-            searchType: string;
             format: (value: any) => "" | "✔️";
         };
         _test2: {

package/dist/runtime/models/User.js

@@ -72,7 +72,6 @@ export default {
     },
     has2FA: {
       label: "2FA",
-      searchType: "select",
       format: (value) => {
         return value ? "\u2714\uFE0F" : "";
       }

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

@@ -18,21 +18,21 @@ const columns = model("User").columns({
   email: true,
   phone: true,
   join_date: true,
-  //status: true,
   has2FA: true
-  //_test: true,
 });
+const selectedRows = ref([]);
 </script>
 
 <template>
     <l-page>
         <l-tabs route v-model="status">
             <l-tab label="Active" name="active">
-                <l-table ref="table" row-key="user_id" @request-data="onRequest" :columns="columns"
-                    :actions="['view', 'update', 'delete']"></l-table>
+                <l-table ref="table" row-key="user_id" @request-data="onRequest" :columns="columns" name="user-active"
+                    :actions="['view', 'update', 'delete']">
+                </l-table>
             </l-tab>
             <l-tab label="Inactive" name="inactive">
-                <l-table row-key="user_id" @request-data="onRequest" :columns="columns"
+                <l-table row-key="user_id" @request-data="onRequest" :columns="columns" name="user-inactive"
                     :actions="['view', 'update', 'delete']">
                 </l-table>
             </l-tab>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.49.4",
+  "version": "1.50.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -44,19 +44,19 @@
     "json-to-graphql-query": "^2.3.0",
     "nuxt-quasar-ui": "^2.1.12",
     "quasar": "^2.18.5",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "^11.1.12",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/kit": "^4.2.0",
-    "@nuxt/schema": "^4.2.0",
+    "@nuxt/kit": "^4.2.1",
+    "@nuxt/schema": "^4.2.1",
     "@nuxt/test-utils": "^3.17.2",
     "@types/node": "^22.5.0",
     "changelogen": "^0.5.4",
     "eslint": "^8.46.0",
-    "nuxt": "^4.2.0",
+    "nuxt": "^4.2.1",
     "typescript": "^5.9.2",
     "vue-tsc": "^2.2.8"
   }