@hostlink/nuxt-light 1.30.0 → 1.31.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.30.0",
+  "version": "1.31.1",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

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

@@ -175,6 +175,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-input.vue

@@ -60,8 +60,8 @@ const props = defineProps({
   onBlur: { type: Function, required: false },
   onClear: { type: Function, required: false }
 });
-const modelValue = props.modelValue;
-const new_rules = props.rules || [];
+const modelValue = defineModel();
+const new_rules = Array.isArray(props.rules) ? [...props.rules] : [];
 if (props.required) {
   new_rules.push((val) => !!val || t("input_required", [t(props.label ?? "")]));
 }
@@ -72,28 +72,29 @@ if (props.type == "email") {
     }
   });
 }
-if (new_rules.indexOf("containUpper") >= 0) {
+const stringRules = new_rules.filter((r) => typeof r === "string");
+if (stringRules.includes("containUpper")) {
   new_rules.push((val) => {
     if (val && !val.match(/[A-Z]/)) {
       return t("Must contain at least one uppercase letter");
     }
   });
 }
-if (new_rules.indexOf("containLower") >= 0) {
+if (stringRules.includes("containLower")) {
   new_rules.push((val) => {
     if (val && !val.match(/[a-z]/)) {
       return t("Must contain at least one lowercase letter");
     }
   });
 }
-if (new_rules.indexOf("containNumber") >= 0) {
+if (stringRules.includes("containNumber")) {
   new_rules.push((val) => {
     if (val && !val.match(/[0-9]/)) {
       return t("Must contain at least one number");
     }
   });
 }
-if (new_rules.indexOf("containSpecial") >= 0) {
+if (stringRules.includes("containSpecial")) {
   new_rules.push((val) => {
     if (val && !val.match(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/)) {
       return t("Must contain at least one symbol");
@@ -154,10 +155,9 @@ const onClickTc2Sc = () => {
         </template>
 
         <template v-if="localShowPassword" v-slot:append>
-            <q-icon name="sym_o_visibility" class="cursor-pointer" :color="showPassword ? 'primary' : 'grey-5'"
-                @click="isShowPassword = false" v-if="isShowPassword" />
-            <q-icon name="sym_o_visibility_off" class="cursor-pointer" :color="showPassword ? 'grey-5' : 'primary'"
-                @click="isShowPassword = true" v-else />
+            <q-icon name="sym_o_visibility" class="cursor-pointer" @click="isShowPassword = false"
+                v-if="isShowPassword" />
+            <q-icon name="sym_o_visibility_off" class="cursor-pointer" @click="isShowPassword = true" v-else />
         </template>
 
     </q-input>

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

@@ -4,23 +4,31 @@ export interface LInputProps extends QInputProps {
     translate?: boolean;
     required?: boolean;
 }
+type __VLS_Props = LInputProps;
 declare const new_rules: import("quasar").ValidationRule[];
 declare const isShowPassword: import("vue").Ref<boolean, boolean>;
 declare const localType: import("vue").ComputedRef<"number" | "textarea" | "time" | "text" | "search" | "date" | "url" | "email" | "file" | "datetime-local" | "password" | "tel" | undefined>;
 declare const localShowPassword: import("vue").ComputedRef<boolean>;
 declare const onClickTc2Sc: () => void;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: any;
+};
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_31: string | number, __VLS_32: any;
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     [K in NonNullable<typeof __VLS_31>]?: (props: typeof __VLS_32) => any;
 }>;
-declare const __VLS_self: import("vue").DefineComponent<LInputProps, {
+declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
     new_rules: typeof new_rules;
     isShowPassword: typeof isShowPassword;
     localType: typeof localType;
     localShowPassword: typeof localShowPassword;
     onClickTc2Sc: typeof onClickTc2Sc;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LInputProps> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
     dense: boolean;
     dark: boolean | null;
     rounded: boolean;
@@ -31,7 +39,11 @@ declare const __VLS_self: import("vue").DefineComponent<LInputProps, {
     standout: string | boolean;
     stackLabel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<LInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LInputProps> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
     dense: boolean;
     dark: boolean | null;
     rounded: boolean;

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

@@ -9,8 +9,6 @@ import { collect } from "#imports";
 import { useI18n } from "vue-i18n";
 const $q = useQuasar();
 const { t } = useI18n();
-const minimized = defineModel("minimized", { type: Boolean, ...{ default: false } });
-const maximized = defineModel("maximized", { type: Boolean, ...{ default: false } });
 const errors = ref([]);
 const props = defineProps({
   fullscreen: { type: Boolean, required: false, skipCheck: true, default: false },
@@ -95,9 +93,7 @@ const props = defineProps({
   actions: { type: Array, required: false, default: () => [] },
   sortBy: { type: null, required: false },
   modelName: { type: null, required: false },
-  searchable: { type: null, required: false, default: false },
-  maximizable: { type: Boolean, required: false, default: false },
-  minimizable: { type: Boolean, required: false, default: false },
+  searchable: { type: Boolean, required: false, default: false },
   onRequestData: { type: Function, required: false },
   addComponent: { type: Object, required: false },
   addComponentProps: { type: null, required: false }
@@ -240,12 +236,22 @@ const onLocalRequest = async (p) => {
       pagination.value.descending = p.pagination.descending;
       pagination.value.rowsPerPage = p.pagination.rowsPerPage;
       loading.value = false;
+      if (modelName.value) {
+        localStorage.setItem(`l-table-rowsPerPage-${modelName.value}`, String(pagination.value.rowsPerPage));
+      }
       validateData();
     },
     loadObjects(model2, filters2 = null, fields = []) {
       return this.loadData(model2, filters2, fields);
     },
     async loadData(model2, filters2 = null, fields = []) {
+      const saved = Number(localStorage.getItem(`l-table-rowsPerPage-${model2}`));
+      if (saved && props.rowsPerPageOptions.includes(saved) && saved !== pagination.value.rowsPerPage) {
+        pagination.value.rowsPerPage = saved;
+        if (typeof p !== "undefined" && p.pagination) {
+          p.pagination.rowsPerPage = saved;
+        }
+      }
       fields.forEach((f) => {
         builder.add(f);
       });
@@ -443,16 +449,21 @@ const onAdd = () => {
 </script>
 
 <template>
-    <l-card v-bind="attrs" :maximizable="maximizable" :minimizable="minimizable" :title="title"
-        v-model:minimized="minimized" v-model:maximized="maximized">
-
-        <q-toolbar v-if="addComponent">
-            <q-btn icon="sym_o_add" :label="$t('Add')" :color="$light.color" @click="onAdd" v-if="addComponent"
-                outline />
-        </q-toolbar>
-
+    <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">
+
+        <template #header="props">
+            <q-tr :props="props">
+                <q-td v-if="selection != 'none'" auto-width>
+                    <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>
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
+            </q-tr>
+        </template>
 
-        <template v-if="errors.length > 0">
+        <template #top v-if="errors.length > 0">
             <div class="q-mb-sm">
                 <div class="q-gutter-sm">
                     <l-alert type="negative" v-for="e in errors">{{ e }}</l-alert>
@@ -460,96 +471,86 @@ const onAdd = () => {
             </div>
         </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">
-
-            <template #header="props">
-                <q-tr :props="props">
-                    <q-td v-if="selection != 'none'" auto-width>
-                        <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>
-                    <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
-                </q-tr>
-            </template>
 
+        <template #top-left v-if="addComponent">
+            <q-btn icon="sym_o_add" :label="$t('Add')" :color="$light.color" @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" />
-                    </q-td>
-                    <q-td v-if="hasRowExpand" auto-width>
-                        <q-btn :class="{ 'text-grey-8': !isDark }" flat round size="sm"
-                            :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"
-                            @click="props.expand = !props.expand"></q-btn>
-                    </q-td>
+        <template #body="props">
+            <q-tr :props="props">
+                <q-td v-if="selection != 'none'" auto-width>
+                    <q-checkbox v-model="props.selected" />
+                </q-td>
+                <q-td v-if="hasRowExpand" auto-width>
+                    <q-btn :class="{ 'text-grey-8': !isDark }" flat round size="sm"
+                        :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"
+                        @click="props.expand = !props.expand"></q-btn>
+                </q-td>
 
-                    <q-td v-if="hasActions" auto-width>
-                        <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
+                <q-td v-if="hasActions" auto-width>
+                    <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
 
-                            <l-view-btn v-if="actionView && props.row.canView"
-                                :to="`/${modelName}/${props.row[primaryKey]}/view`" size="sm" />
+                        <l-view-btn v-if="actionView && props.row.canView"
+                            :to="`/${modelName}/${props.row[primaryKey]}/view`" size="sm" />
 
-                            <l-edit-btn v-if="activeEdit && props.row.canUpdate"
-                                :to="`/${modelName}/${props.row[primaryKey]}/edit`" size="sm" />
+                        <l-edit-btn v-if="activeEdit && props.row.canUpdate"
+                            :to="`/${modelName}/${props.row[primaryKey]}/edit`" size="sm" />
 
-                            <l-delete-btn v-if="actionDelete && props.row.canDelete"
-                                @submit="onDelete(props.row[primaryKey])" size="sm"></l-delete-btn>
+                        <l-delete-btn v-if="actionDelete && props.row.canDelete"
+                            @submit="onDelete(props.row[primaryKey])" size="sm"></l-delete-btn>
 
-                            <slot name="actions" v-bind="props"></slot>
-                        </div>
+                        <slot name="actions" v-bind="props"></slot>
+                    </div>
 
-                    </q-td>
+                </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>
-                        </template>
-                        <template v-else>
-                            <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"
-                                :style="getCellStyle(col, props.row)" :class="getCellClass(col, props.row)"><template
-                                    v-if="col.to" class="bg-primary">
-                                    <l-link :to="col.to(props.row)">{{ col.value }}</l-link>
-                                </template>
-                                <template v-else-if="col.component">
-                                    <component :is="col.component" v-model="props.row"
-                                        v-bind="col.componentProps ? col.componentProps(props.row) : null" />
-                                </template>
-                                <template v-else>
-                                    {{ col.value }}
-                                </template>
-                            </q-td>
-                        </template>
+                <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>
                     </template>
-                </q-tr>
-                <q-tr v-show="props.expand" :props="props">
-                    <q-td colspan="100%">
-                        <slot name="row-expand" v-bind="props"></slot>
-                    </q-td>
-                </q-tr>
-            </template>
-
-
-            <template #top-right="props" v-if="searchable">
-                <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')"
-                    :color="$light.color">
-                    <template v-slot:append>
-                        <q-icon name="search" />
+                    <template v-else>
+                        <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"
+                            :style="getCellStyle(col, props.row)" :class="getCellClass(col, props.row)"><template
+                                v-if="col.to" class="bg-primary">
+                                <l-link :to="col.to(props.row)">{{ col.value }}</l-link>
+                            </template>
+                            <template v-else-if="col.component">
+                                <component :is="col.component" v-model="props.row"
+                                    v-bind="col.componentProps ? col.componentProps(props.row) : null" />
+                            </template>
+                            <template v-else>
+                                {{ col.value }}
+                            </template>
+                        </q-td>
                     </template>
-                </q-input>
+                </template>
+            </q-tr>
+            <q-tr v-show="props.expand" :props="props">
+                <q-td colspan="100%">
+                    <slot name="row-expand" v-bind="props"></slot>
+                </q-td>
+            </q-tr>
+        </template>
+
 
+        <template #top-right="props" v-if="searchable">
+            <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')"
+                :color="$light.color">
+                <template v-slot:append>
+                    <q-icon name="search" />
+                </template>
+            </q-input>
 
 
 
-            </template>
+
+        </template>
 
 
-            <!-- template v-for="col in toColumns" v-slot:[col.slot_name]="props">
+        <!-- template v-for="col in toColumns" v-slot:[col.slot_name]="props">
             <q-td :props="props">
                 <l-link :to="col.to(props.row)">
                     {{ col.field(props.row) }}
@@ -558,49 +559,47 @@ const onAdd = () => {
         </template -->
 
 
-            <template #top-row="props" v-if="hasSearch && isServerSide">
-                <q-tr>
-                    <q-td v-if="selection != 'none'" auto-width />
-                    <q-td v-if="hasRowExpand" auto-width />
-                    <q-td v-if="hasActions" auto-width />
-                    <q-td v-for="col in props.cols">
-                        <template v-if="col.searchable">
-
-                            <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')"></q-input>
-                            </template>
+        <template #top-row="props" v-if="hasSearch && isServerSide">
+            <q-tr>
+                <q-td v-if="selection != 'none'" auto-width />
+                <q-td v-if="hasRowExpand" auto-width />
+                <q-td v-if="hasActions" auto-width />
+                <q-td v-for="col in props.cols">
+                    <template v-if="col.searchable">
 
-                            <template v-if="col.searchType == 'select'">
-                                <q-select dense clearable filled square v-model="filters[col.name]"
-                                    @update:model-value="onFilters" options-dense :options="col.searchOptions"
-                                    emit-value map-options :multiple="col.searchMultiple" :color="$light.color" />
+                        <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')"></q-input>
+                        </template>
 
-                            </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="col.searchOptions" emit-value
+                                map-options :multiple="col.searchMultiple" :color="$light.color" />
 
+                        </template>
 
-                            <template v-if="col.searchType == 'date'">
-                                <l-date-picker dense clearable filled square :outlined="false" hide-bottom-space
-                                    v-model="filters[col.name]" @update:model-value="onFilters" range
-                                    @clear="onFilters" />
-                            </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"></q-input>
+                        <template v-if="col.searchType == 'date'">
+                            <l-date-picker dense clearable filled square :outlined="false" hide-bottom-space
+                                v-model="filters[col.name]" @update:model-value="onFilters" range @clear="onFilters" />
+                        </template>
 
-                            </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"></q-input>
 
                         </template>
-                    </q-td>
-                </q-tr>
-            </template>
-
-            <template v-for="slot of ss" v-slot:[slot]="props">
-                <slot :name="slot" v-bind="props"></slot>
-            </template>
-        </q-table>
-    </l-card>
+
+                    </template>
+                </q-td>
+            </q-tr>
+        </template>
+
+        <template v-for="slot of ss" v-slot:[slot]="props">
+            <slot :name="slot" v-bind="props"></slot>
+        </template>
+    </q-table>
 </template>

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

@@ -1,7 +1,5 @@
 import { QTable, Dialog } from 'quasar';
 import type { QTableColumn, QTableProps } from 'quasar';
-declare const minimized: import("vue").ModelRef<boolean, string, boolean, boolean>;
-declare const maximized: import("vue").ModelRef<boolean, string, boolean, boolean>;
 export interface LTableColumn extends QTableColumn {
     searchable?: boolean;
     searchType?: string;
@@ -18,16 +16,13 @@ export type LTableProps = QTableProps & {
     sortBy?: any;
     rowKey?: string;
     modelName?: any;
-    searchable?: any;
+    searchable?: boolean;
     selected?: Array<any>;
-    maximizable?: boolean;
-    minimizable?: boolean;
     onRequestData?: (request: LTableRequest) => void;
     addComponent?: Dialog;
     addComponentProps?: any;
     rows?: Array<any>;
 };
-type __VLS_Props = LTableProps;
 declare const isServerSide: boolean;
 declare const pagination: import("vue").Ref<{
     sortBy?: string | null | undefined;
@@ -107,25 +102,19 @@ declare const getCellClass: (col: any, row: any) => any;
 declare const localSelected: import("vue").WritableComputedRef<any[], any[]>;
 declare function requestServerInteraction(): void;
 declare const onAdd: () => void;
-type __VLS_PublicProps = __VLS_Props & {
-    "minimized"?: boolean;
-    "maximized"?: boolean;
-};
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_100: any, __VLS_103: string, __VLS_104: any, __VLS_126: any, __VLS_192: string, __VLS_193: any;
+declare var __VLS_91: any, __VLS_94: string, __VLS_95: any, __VLS_117: any, __VLS_183: string, __VLS_184: any;
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    [K in NonNullable<typeof __VLS_103>]?: (props: typeof __VLS_104) => any;
+    [K in NonNullable<typeof __VLS_94>]?: (props: typeof __VLS_95) => any;
 } & {
-    [K in NonNullable<typeof __VLS_192>]?: (props: typeof __VLS_193) => any;
+    [K in NonNullable<typeof __VLS_183>]?: (props: typeof __VLS_184) => any;
 } & {
-    actions?: (props: typeof __VLS_100) => any;
+    actions?: (props: typeof __VLS_91) => any;
 } & {
-    'row-expand'?: (props: typeof __VLS_126) => any;
+    'row-expand'?: (props: typeof __VLS_117) => any;
 }>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
+declare const __VLS_self: import("vue").DefineComponent<LTableProps, {
     QTable: typeof QTable;
-    minimized: typeof minimized;
-    maximized: typeof maximized;
     errors: typeof errors;
     isServerSide: typeof isServerSide;
     pagination: typeof pagination;
@@ -154,14 +143,10 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
     onAdd: typeof onAdd;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (p: any) => any;
-    "update:minimized": (value: boolean) => any;
-    "update:maximized": (value: boolean) => any;
     "request-data": (p: LTableRequest) => any;
     "update:selected": (p: any[]) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<LTableProps> & Readonly<{
     onDelete?: ((p: any) => any) | undefined;
-    "onUpdate:minimized"?: ((value: boolean) => any) | undefined;
-    "onUpdate:maximized"?: ((value: boolean) => any) | undefined;
     "onRequest-data"?: ((p: LTableRequest) => any) | undefined;
     "onUpdate:selected"?: ((p: any[]) => any) | undefined;
 }>, {
@@ -170,8 +155,6 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
     dark: boolean | null;
     bordered: boolean;
     fullscreen: boolean;
-    minimizable: boolean;
-    maximizable: boolean;
     selected: any[];
     actions: Array<string>;
     pagination: {
@@ -186,20 +169,16 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
     noDataLabel: string;
     rowsPerPageOptions: readonly any[];
     rowsPerPageLabel: string;
-    searchable: any;
+    searchable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {
+declare const __VLS_component: import("vue").DefineComponent<LTableProps, {
     requestServerInteraction: typeof requestServerInteraction;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (p: any) => any;
-    "update:minimized": (value: boolean) => any;
-    "update:maximized": (value: boolean) => any;
     "request-data": (p: LTableRequest) => any;
     "update:selected": (p: any[]) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<LTableProps> & Readonly<{
     onDelete?: ((p: any) => any) | undefined;
-    "onUpdate:minimized"?: ((value: boolean) => any) | undefined;
-    "onUpdate:maximized"?: ((value: boolean) => any) | undefined;
     "onRequest-data"?: ((p: LTableRequest) => any) | undefined;
     "onUpdate:selected"?: ((p: any[]) => any) | undefined;
 }>, {
@@ -208,8 +187,6 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     dark: boolean | null;
     bordered: boolean;
     fullscreen: boolean;
-    minimizable: boolean;
-    maximizable: boolean;
     selected: any[];
     actions: Array<string>;
     pagination: {
@@ -224,7 +201,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     noDataLabel: string;
     rowsPerPageOptions: readonly any[];
     rowsPerPageLabel: string;
-    searchable: any;
+    searchable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -8,17 +8,28 @@ const columns = model("MailLog").columns({
   created_time: true,
   body: true
 });
+function requestMailLog(event) {
+  event.loadObjects("MailLog", {}, ["body"]);
+}
 </script>
 
 <template>
     <l-page>
-        <l-table row-key="maillog_id" @request-data="$event.loadObjects('MailLog', {}, ['body'])" :columns="columns"
-            sort-by="maillog_id:desc">
-
+        <l-table
+            row-key="maillog_id"
+            @request-data="requestMailLog"
+            :columns="columns"
+            sort-by="maillog_id:desc"
+        >
             <template #row-expand="props">
-                <iframe width="100%" height="300px" :srcdoc="props.row.body" frameborder="0"></iframe>
+                <iframe
+                    width="100%"
+                    height="300px"
+                    :srcdoc="props.row.body"
+                    frameborder="0"
+                    sandbox
+                ></iframe>
             </template>
-
         </l-table>
     </l-page>
 </template>

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

@@ -1,67 +1,73 @@
 <script setup>
-import { reactive } from "vue";
+import { computed, ref } from "vue";
 import { m, api } from "#imports";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
-const { app } = await api.query({
-  app: {
-    permissions: true,
-    roles: {
-      name: true,
-      permissions: true
+const fetchApp = async () => {
+  const { app: app2 } = await api.query({
+    app: {
+      permissions: true,
+      roles: {
+        name: true,
+        permissions: true
+      }
     }
-  }
-});
-const roles = app.roles;
-const columns = [{
-  label: t("Permission"),
-  field: "permission",
-  align: "left"
-}];
-roles.forEach((role) => {
-  columns.push({
+  });
+  return app2;
+};
+const app = ref(await fetchApp());
+const roles = computed(() => app.value.roles);
+const columns = computed(() => [
+  { label: t("Permission"), field: "permission", align: "left" },
+  ...roles.value.map((role) => ({
     label: role.name,
     field: role.name,
     align: "left"
-  });
-});
-const rows = reactive([]);
-app.permissions.forEach((permission) => {
-  let row = {
-    permission
-  };
-  roles.forEach((role) => {
-    if (role.permissions.indexOf(permission) != -1) {
-      row[role.name] = true;
-    } else {
-      row[role.name] = false;
-    }
-  });
-  rows.push(row);
-});
-const onUpdate = (value, role, permission) => {
+  }))
+]);
+const rows = computed(
+  () => app.value.permissions.map((permission) => {
+    const row = { permission };
+    roles.value.forEach((role) => {
+      row[role.name] = role.permissions.includes(permission);
+    });
+    return row;
+  })
+);
+const onUpdate = async (value, role, permission) => {
   if (value) {
-    m("addPermission", { value: permission, role });
+    await m("addPermission", { value: permission, role });
   } else {
-    m("removePermission", { value: permission, role });
+    await m("removePermission", { value: permission, role });
   }
-  rows.forEach((row) => {
-    if (row.permission == permission) {
-      row[role] = value;
-    }
-  });
+  app.value = await fetchApp();
 };
+const filter = ref("");
+const filteredRows = computed(() => {
+  if (!filter.value) return rows.value;
+  return rows.value.filter(
+    (row) => row.permission.toLowerCase().includes(filter.value.toLowerCase())
+  );
+});
 </script>
 
 <template>
     <l-page>
-        <q-table :columns="columns" flat bordered :rows="rows" :pagination="{ rowsPerPage: 0 }" dense>
+        <q-table :columns="columns" flat bordered :rows="filteredRows" :pagination="{ rowsPerPage: 0 }" dense>
+            <template #top-left>
+                <q-input :color="$light.color" v-model="filter" :placeholder="t('Filter permissions')" dense clearable
+                    outlined>
+                    <template v-slot:append>
+                        <q-icon name="sym_o_search" />
+                    </template>
+                </q-input>
+            </template>
             <template #body="props">
                 <q-tr :props="props">
                     <q-td>
                         {{ props.row.permission }}
                     </q-td>
-                    <q-td v-for="role in roles">
+                    <q-td v-for="role in roles" :key="role.name">
                         <q-checkbox v-model="props.row[role.name]"
                             @update:model-value="onUpdate($event, role.name, props.row.permission)"
                             :color="$light.color" />

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

@@ -1,26 +1,28 @@
 <script setup>
 import { q } from "#imports";
-import { Loading } from "quasar";
+import { Loading, Notify } from "quasar";
 const onClickDownload = async () => {
-  Loading.show({
-    message: "Exporting database..."
-  });
-  const data = await q({
-    system: {
-      database: {
-        export: true
+  Loading.show({ message: "Exporting database..." });
+  try {
+    const data = await q({
+      system: {
+        database: {
+          export: true
+        }
       }
-    }
-  });
-  Loading.hide();
-  const file = new File([data.system.database.export], "backup.sql", {
-    type: "text/plain;charset=utf-8"
-  });
-  const a = document.createElement("a");
-  a.download = file.name;
-  a.href = URL.createObjectURL(file);
-  a.click();
-  URL.revokeObjectURL(a.href);
+    });
+    const blob = new Blob([data.system.database.export], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.download = "backup.sql";
+    a.href = url;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1e3);
+  } catch (e) {
+    Notify.create({ type: "negative", message: "\u4E0B\u8F09\u5931\u6557\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66\u3002" });
+  } finally {
+    Loading.hide();
+  }
 };
 </script>
 

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

@@ -15,28 +15,28 @@ const { data, refresh } = await useAsyncData(async () => {
   return system;
 });
 const autoRefresh = ref(0);
-let interval = null;
+const interval = ref(null);
 watch(autoRefresh, (value) => {
-  if (interval)
-    clearInterval(interval);
+  if (interval.value)
+    clearInterval(interval.value);
   if (value) {
-    interval = setInterval(refresh, value);
+    interval.value = setInterval(() => {
+      refresh();
+    }, value);
   }
-});
+}, { immediate: true });
 onUnmounted(() => {
-  if (interval)
-    clearInterval(interval);
+  if (interval.value)
+    clearInterval(interval.value);
 });
 </script>
 
 <template>
     <l-page title="System Database Process">
-        <q-table :rows="data.database.processList" hide-bottom v-bind="$light.styles.table" :loading="loading">
+        <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>
-
             </template>
-
             <template #top-right>
                 <q-select label="Auto Refresh" v-model="autoRefresh" :options="[
                     { label: 'Off', value: 0 },
@@ -48,11 +48,9 @@ onUnmounted(() => {
                     { label: '10m', value: 600000 },
                     { label: '30m', value: 1800000 },
                     { label: '1h', value: 3600000 }
-                ]" @input="autoRefresh && refresh" outlined :color="$light.color" dense="" style="min-width: 200px"
+                ]" @update:model-value="autoRefresh && refresh()" outlined :color="$light.color" dense style="min-width: 200px"
                     map-options emit-value></q-select>
-
             </template>
         </q-table>
-
     </l-page>
 </template>

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

@@ -16,10 +16,10 @@ const { data, refresh } = await useAsyncData("database", async () => {
 });
 const SYSTEM_TABLES = ["Config", "EventLog", "MailLog", "Permission", "Role", "SystemValue", "Translate", "User", "UserLog", "UserRole", "MyFavorite", "CustomField"];
 const custom_tables = computed(() => {
-  return data.value.tableStatus.filter((table) => !SYSTEM_TABLES.includes(table.Name));
+  return (data.value?.tableStatus ?? []).filter((table) => !SYSTEM_TABLES.includes(table.Name));
 });
 const systables = computed(() => {
-  return data.value.tableStatus.filter((table) => SYSTEM_TABLES.includes(table.Name));
+  return (data.value?.tableStatus ?? []).filter((table) => SYSTEM_TABLES.includes(table.Name));
 });
 const field_add = resolveComponent("l-dialog-database-field-add");
 const table_add = resolveComponent("l-database-create-table-dialog");
@@ -51,8 +51,10 @@ const add = async (table) => {
   });
 };
 const selected = reactive({});
-for (let table of data.value.table) {
-  selected[table.name] = [];
+if (data.value?.table) {
+  for (let table of data.value.table) {
+    selected[table.name] = [];
+  }
 }
 const removeField = async (table) => {
   light.dialog({
@@ -173,14 +175,14 @@ const truncatTable = async () => {
             </l-list>
         </l-card>
 
-        <q-card flat bordered>
+        <q-card>
             <q-list separator bordered>
                 <q-expansion-item label="Table Status" dense>
-                    <div class="q-ma-sm q-gutter-y-sm">
+                    <div s>
 
                         <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">
+                            row-key="Name" :color="$light.color">
 
                             <template #top-left>
                                 <q-btn icon="sym_o_add" @click="createTable()" round flat size="sm">
@@ -210,13 +212,12 @@ const truncatTable = async () => {
             </q-list>
         </q-card>
 
-        <q-card flat bordered>
+        <q-card>
             <q-list separator bordered>
                 <q-expansion-item :label="table.name" v-for="table in data.table" dense>
                     <div class="q-ma-sm">
-                        <q-table row-key="Field" separator="cell" dense :rows="table.columns"
-                            :rows-per-page-options="[0]" hide-pagination flat bordered selection="multiple"
-                            v-model:selected="selected[table.name]">
+                        <q-table row-key="Field" :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat
+                            bordered selection="multiple" v-model:selected="selected[table.name]" :color="$light.color">
                             <template #top-left>
                                 <q-btn icon="sym_o_add" @click="add(table.name)" round flat size="sm">
                                     <q-tooltip>Add field</q-tooltip>
@@ -233,6 +234,5 @@ const truncatTable = async () => {
             </q-list>
         </q-card>
 
-
     </l-page>
 </template>

package/dist/runtime/pages/User/setting/style.vue

@@ -100,6 +100,7 @@ const inputDesign = computed({
                                     { label: 'None', value: 'none' },
                                 ]" :color="$light.color" />
                             </q-field>
+
                         </q-card-section>
                     </l-card>
 

package/package.json

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