@hostlink/nuxt-light 1.30.0 → 1.31.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "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

@@ -240,12 +240,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);
       });

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.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",