@hostlink/nuxt-light 1.35.0 → 1.37.0

package/dist/module.json

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

package/dist/runtime/components/L/System/Setting/developer.vue

@@ -2,40 +2,23 @@
 import { q, m } from "#imports";
 import { useQuasar } from "quasar";
 const $q = useQuasar();
-const modelValue = defineModel({ type: Object, ...{
-  required: true
-} });
-if (modelValue.value.mode != "prod") {
-  modelValue.value.mode = "dev";
-} else {
-  modelValue.value.mode = "prod";
-}
-if (modelValue.value.custom_field_models) {
-  modelValue.value.custom_field_models = modelValue.value.custom_field_models.split(",");
-} else {
-  modelValue.value.custom_field_models = [];
-}
+const props = defineProps({
+  mode: { type: String, required: true, default: "dev" },
+  custom_field_models: { type: String, required: true, default: "" }
+});
+const emit = defineEmits(["submit"]);
+const processedMode = props.mode !== "prod" ? "dev" : "prod";
+const processedCustomFieldModels = props.custom_field_models ? props.custom_field_models.split(",") : [];
 const onSubmit = async (d) => {
-  let data = [];
-  Object.keys(d).forEach((key) => {
-    data.push({
-      name: key,
-      value: d[key]
-    });
-  });
-  await m("updateAppConfigs", { data });
-  Object.keys(d).forEach((key) => {
-    modelValue.value[key] = d[key];
-  });
-  $q.notify({ message: "Settings saved", color: "positive" });
+  emit("submit", d);
 };
 </script>
 
 <template>
     <FormKit type="l-form" :bordered="false" :value="{
-  mode: modelValue.mode,
-  custom_field_models: modelValue.custom_field_models
-}" @submit="onSubmit" #default="{ value }">
+  mode: processedMode,
+  custom_field_models: processedCustomFieldModels
+}" @submit="onSubmit">
 
         <form-kit type="l-select" name="custom_field_models" label="Custom Field Model" use-input use-chips multiple
             hide-dropdown-icon input-debounce="0" new-value-mode="add-unique" />

package/dist/runtime/components/L/System/Setting/developer.vue.d.ts

@@ -2,12 +2,12 @@ export interface LSystemSettingDeveloperProps {
     mode: string;
     custom_field_models: string;
 }
-type __VLS_PublicProps = {
-    modelValue: LSystemSettingDeveloperProps;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: LSystemSettingDeveloperProps) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: LSystemSettingDeveloperProps) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<LSystemSettingDeveloperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (data: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<LSystemSettingDeveloperProps> & Readonly<{
+    onSubmit?: ((data: Record<string, any>) => any) | undefined;
+}>, {
+    mode: string;
+    custom_field_models: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/L/System/Setting/forget-password.vue

@@ -1,43 +1,23 @@
 <script setup>
-import { q, m } from "#imports";
-import { useQuasar } from "quasar";
-const $q = useQuasar();
-const modelValue = defineModel({ type: Object, ...{
-  required: true
-} });
-if (modelValue.value.forget_password_enabled != "0") {
-  modelValue.value.forget_password_enabled = "1";
-}
-if (!modelValue.value.forget_password_subject) {
-  modelValue.value.forget_password_subject = "Password Reset Code";
-}
-if (!modelValue.value.forget_password_template) {
-  modelValue.value.forget_password_template = "Your password reset code is: {code}";
-}
+const props = defineProps({
+  forget_password_enabled: { type: String, required: false, default: "0" },
+  forget_password_subject: { type: String, required: false, default: "" },
+  forget_password_template: { type: String, required: false, default: "" }
+});
+const emit = defineEmits(["submit"]);
+const processedEnabled = props.forget_password_enabled !== "0" ? "1" : props.forget_password_enabled;
+const processedSubject = props.forget_password_subject || "Password Reset Code";
+const processedTemplate = props.forget_password_template || "Your password reset code is: {code}";
 const onSubmit = async (d) => {
-  let data = [];
-  Object.keys(d).forEach((key) => {
-    if (d[key] === void 0) {
-      d[key] = "";
-    }
-    data.push({
-      name: key,
-      value: d[key]
-    });
-  });
-  await m("updateAppConfigs", { data });
-  modelValue.value.forget_password_enabled = d.forget_password_enabled;
-  modelValue.value.forget_password_subject = d.forget_password_subject;
-  modelValue.value.forget_password_template = d.forget_password_template;
-  $q.notify({ message: "Settings saved", color: "positive" });
+  emit("submit", d);
 };
 </script>
 
 <template>
     <form-kit type="l-form" :value="{
-  forget_password_enabled: modelValue.forget_password_enabled,
-  forget_password_subject: modelValue.forget_password_subject,
-  forget_password_template: modelValue.forget_password_template
+  forget_password_enabled: processedEnabled,
+  forget_password_subject: processedSubject,
+  forget_password_template: processedTemplate
 }" @submit="onSubmit">
         <form-kit type="l-checkbox" label="Forget Password Enabled" name="forget_password_enabled" true-value="1"
             false-value="0" />

package/dist/runtime/components/L/System/Setting/forget-password.vue.d.ts

@@ -1,14 +1,15 @@
 export type LSystemSettingForgetPasswordProps = {
+    forget_password_enabled?: string;
+    forget_password_subject?: string;
+    forget_password_template?: string;
+};
+declare const _default: import("vue").DefineComponent<LSystemSettingForgetPasswordProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (data: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<LSystemSettingForgetPasswordProps> & Readonly<{
+    onSubmit?: ((data: Record<string, any>) => any) | undefined;
+}>, {
     forget_password_enabled: string;
     forget_password_subject: string;
     forget_password_template: string;
-};
-type __VLS_PublicProps = {
-    modelValue: LSystemSettingForgetPasswordProps;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: LSystemSettingForgetPasswordProps) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: LSystemSettingForgetPasswordProps) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/L/System/Setting/general.vue

@@ -1,30 +1,23 @@
 <script setup>
-import { q, m } from "#imports";
 import { useQuasar } from "quasar";
-const $q = useQuasar();
-const modelValue = defineModel({ type: Object });
+const props = defineProps({
+  company: { type: String, required: false, default: "" },
+  company_logo: { type: String, required: false, default: "" },
+  copyright_name: { type: String, required: false, default: "" },
+  copyright_year: { type: String, required: false, default: "" }
+});
+const emit = defineEmits(["submit"]);
 const onSubmit = async (d, form) => {
-  let data = [];
-  Object.keys(d).forEach((key) => {
-    data.push({
-      name: key,
-      value: d[key]
-    });
-  });
-  await m("updateAppConfigs", { data });
-  Object.keys(d).forEach((key) => {
-    modelValue.value[key] = d[key];
-  });
-  $q.notify({ message: "Settings saved", color: "positive" });
+  emit("submit", d);
 };
 </script>
 
 <template>
     <FormKit type="l-form" :bordered="false" :value="{
-  company: modelValue.company,
-  company_logo: modelValue.company_logo,
-  copyright_name: modelValue.copyright_name,
-  copyright_year: modelValue.copyright_year
+  company: props.company,
+  company_logo: props.company_logo,
+  copyright_name: props.copyright_name,
+  copyright_year: props.copyright_year
 }" @submit="onSubmit">
 
         <FormKit type="l-input" label="Company" name="company" validation="required"></FormKit>

package/dist/runtime/components/L/System/Setting/general.vue.d.ts

@@ -1,24 +1,17 @@
-type __VLS_PublicProps = {
-    modelValue?: {
-        company: string;
-        company_logo: string;
-        copyright_name: string;
-        copyright_year: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: {
-        company: string;
-        company_logo: string;
-        copyright_name: string;
-        copyright_year: string;
-    } | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: {
-        company: string;
-        company_logo: string;
-        copyright_name: string;
-        copyright_year: string;
-    } | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+interface Props {
+    company?: string;
+    company_logo?: string;
+    copyright_name?: string;
+    copyright_year?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (data: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSubmit?: ((data: Record<string, any>) => any) | undefined;
+}>, {
+    company: string;
+    company_logo: string;
+    copyright_name: string;
+    copyright_year: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/L/User/overview.vue

@@ -21,30 +21,23 @@ const obj = await collect("User", {
 </script>
 
 <template>
-    <l-card>
-        <q-card-section>
-            <l-row>
-                <l-col md="6">
-                    <q-list dense separator>
-                        <l-item label="Username">{{ obj.username }}</l-item>
-                        <l-item label="First name">{{ obj.first_name }}</l-item>
-                        <l-item label="Last name">{{ obj.last_name }}</l-item>
-                        <l-item label="Email">{{ obj.email }}</l-item>
-                        <l-item label="Phone">{{ obj.phone }}</l-item>
-                        <l-item label="Roles">
-                            <div class="q-gutter-xs float-left">
-                                <q-badge v-for="role in obj.roles" :key="role" :color="$light.color">{{ role
-                                    }}</q-badge>
-                            </div>
-                        </l-item>
-                        <l-item label="Status">{{ model("User").columns(["status"])[0].format(obj.status) }}</l-item>
-                        <l-item label="Join date">{{ obj.join_date }}</l-item>
-                        <l-item label="Two factor authentication">{{ obj.twoFactorEnabled ? "Yes" : "No"
-                            }}</l-item>
-                    </q-list>
-                </l-col>
-
-            </l-row>
-        </q-card-section>
-    </l-card>
+    <div class="row q-gutter-md">
+        <q-list dense separator class="col-md-6 col-sm-12">
+            <l-item label="Username">{{ obj.username }}</l-item>
+            <l-item label="First name">{{ obj.first_name }}</l-item>
+            <l-item label="Last name">{{ obj.last_name }}</l-item>
+            <l-item label="Email">{{ obj.email }}</l-item>
+            <l-item label="Phone">{{ obj.phone }}</l-item>
+            <l-item label="Roles">
+                <div class="q-gutter-xs float-left">
+                    <q-badge v-for="role in obj.roles" :key="role" :color="$light.color">{{ role
+                    }}</q-badge>
+                </div>
+            </l-item>
+            <l-item label="Status">{{ model("User").columns(["status"])[0].format(obj.status) }}</l-item>
+            <l-item label="Join date">{{ obj.join_date }}</l-item>
+            <l-item label="Two factor authentication">{{ obj.twoFactorEnabled ? "Yes" : "No"
+            }}</l-item>
+        </q-list>
+    </div>
 </template>

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

@@ -183,7 +183,7 @@ const onToggleFav = async () => {
     message: "Enter favorite label",
     prompt: {
       //get window title, remove - and replace with space
-      model: route.name.replace(/-/g, " "),
+      model: String(route.name || "Untitled").replace(/-/g, " "),
       isValid: (val) => val !== ""
     },
     cancel: true,
@@ -237,12 +237,10 @@ const onLogout = async () => {
                     </template>
                 </q-toolbar-title>
 
-
-                <slot name="header" ></slot>
-                    
-
                 <q-space />
 
+                <slot name="header"></slot>
+
                 <q-btn :icon="isFav ? 'favorite' : 'sym_o_favorite'" round flat dense class="q-mr-xs"
                     @click="onToggleFav" v-if="app.hasFavorite">
                 </q-btn>
@@ -293,11 +291,11 @@ const onLogout = async () => {
                 <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
                     <q-menu max-width="250px">
                         <q-list>
-                            <q-item v-close-popup to="/User/profile" >
+                            <q-item v-close-popup to="/User/profile">
                                 <q-item-section avatar>
                                     <q-icon name="sym_o_person" />
                                 </q-item-section>
-                                <q-item-section >{{ $t("Profile") }}</q-item-section>
+                                <q-item-section>{{ $t("Profile") }}</q-item-section>
                             </q-item>
 
                             <q-item v-close-popup to="/User/setting">
@@ -365,12 +363,12 @@ const onLogout = async () => {
                     <q-expansion-item expand-separator :label="error.message">
                         <q-card>
                             <q-card-section style="white-space: pre-wrap; overflow: auto;">
-                               {{ error.stack }}
+                                {{ error.stack }}
                             </q-card-section>
                         </q-card>
                     </q-expansion-item>
 
-                    <template v-slot:action>            
+                    <template v-slot:action>
                         <q-btn flat icon="sym_o_close" round dense @click="$light.removeError(error)" />
                     </template>
                 </q-banner>

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

@@ -1,6 +1,6 @@
-declare var __VLS_26: {};
+declare var __VLS_30: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_26) => any;
+    header?: (props: typeof __VLS_30) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     logout: (...args: any[]) => void;

package/dist/runtime/components/l-fav-menu.vue

@@ -19,7 +19,7 @@ const color2 = computed(() => {
 
 <template>
     <q-expansion-item :label="$t('My favorite')" :dense="dense" icon="sym_o_favorite">
-        <q-list class="q-pl-md menu-list">
+        <q-list class="q-pl-md menu-list" :dense="dense">
             <q-item v-ripple :to="item.path" v-for="item in value">
                 <q-item-section avatar>
                     <q-icon :name="item.icon ?? 'sym_o_link'" />

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

@@ -4,7 +4,7 @@ export interface LItemProps extends QItemProps {
     name?: string;
     top?: boolean;
     labelTop?: boolean;
-    alignItems?: 'flex-start' | 'center' | 'flex-end';
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
 }
 declare var __VLS_10: {}, __VLS_24: {}, __VLS_30: {};
 type __VLS_Slots = {} & {
@@ -15,7 +15,7 @@ type __VLS_Slots = {} & {
     end?: (props: typeof __VLS_30) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LItemProps> & Readonly<{}>, {
-    alignItems: "flex-start" | "center" | "flex-end";
+    alignItems: "flex-start" | "center" | "flex-end" | "stretch";
     top: boolean;
     labelTop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -115,15 +115,21 @@ const normalizeOption = (option) => {
   return option;
 };
 const normalizeOptions = (options) => {
+  if (!options) {
+    return [];
+  }
   if (Array.isArray(options)) {
     return options.map((option) => normalizeOption(option));
   }
-  return Object.keys(options).map((value) => ({
-    label: options[value],
-    value
-  }));
+  if (typeof options === "object") {
+    return Object.keys(options).map((value) => ({
+      label: options[value],
+      value
+    }));
+  }
+  return [];
 };
-const select_options = ref(props.options);
+const select_options = ref(normalizeOptions(props.options || []));
 const filterFn = (val, update, abort) => {
   if (props.onFilter) {
     props.onFilter(val, update, abort);

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

@@ -271,12 +271,13 @@ const onLocalRequest = async (p) => {
         let c = collect(model2, builder.get());
         if (localFilters) {
           for (let [key, value] of Object.entries(localFilters)) {
-            if (typeof value == "object") {
-              if (value.contains) {
-                c = c.whereContains(key, value.contains);
+            if (typeof value == "object" && value !== null) {
+              const filterValue = value;
+              if (filterValue.contains) {
+                c = c.whereContains(key, filterValue.contains);
               }
-              if (value.between) {
-                c = c.whereBetween(key, value.between);
+              if (filterValue.between) {
+                c = c.whereBetween(key, filterValue.between);
               }
             } else {
               c = c.where(key, value);
@@ -454,12 +455,19 @@ const localSearchOptions = ref({});
 const searchSelectFilter = (val, update, name) => {
   if (val == "") {
     update(() => {
-      localSearchOptions.value[name] = props.columns.find((col) => col.name == name).searchOptions;
+      const column = props.columns?.find((col) => col.name == name);
+      localSearchOptions.value[name] = column?.searchOptions;
     });
   } else {
     update(() => {
       const needle = val.toLocaleLowerCase();
-      localSearchOptions.value[name] = props.columns.find((col) => col.name == name).searchOptions.filter((v) => v.label.toLocaleLowerCase().indexOf(needle) > -1);
+      const column = props.columns?.find((col) => col.name == name);
+      const options = column?.searchOptions;
+      if (Array.isArray(options)) {
+        localSearchOptions.value[name] = options.filter((v) => v.label.toLocaleLowerCase().indexOf(needle) > -1);
+      } else {
+        localSearchOptions.value[name] = options;
+      }
       console.log(localSearchOptions.value[name]);
     });
   }

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

@@ -51,7 +51,7 @@ export interface LTableRequest {
             data: any;
         }>;
         meta: {
-            total: Number;
+            total: number;
             key: string;
             name: string;
         };

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

@@ -15,6 +15,8 @@ export interface LightModelField {
     component?: Component;
     componentProps?: any;
     format?: (value: any) => any;
+    style?: any;
+    align?: "left" | "center" | "right";
 }
 export interface LightModelFields {
     [key: string]: LightModelField;

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

@@ -268,10 +268,10 @@ declare const light: {
                 align: string;
                 left: string;
                 right: string;
-                bold: string;
                 code: string;
                 hr: string;
                 center: string;
+                bold: string;
                 fontSize: string;
                 url: string;
                 italic: string;
@@ -364,11 +364,11 @@ declare const light: {
                 align: string;
                 left: string;
                 right: string;
-                bold: string;
                 code: string;
                 hr: string;
                 center: string;
                 font: string;
+                bold: string;
                 fontSize: string;
                 italic: string;
                 strikethrough: string;
@@ -872,10 +872,10 @@ declare const _default: () => {
                 align: string;
                 left: string;
                 right: string;
-                bold: string;
                 code: string;
                 hr: string;
                 center: string;
+                bold: string;
                 fontSize: string;
                 url: string;
                 italic: string;
@@ -968,11 +968,11 @@ declare const _default: () => {
                 align: string;
                 left: string;
                 right: string;
-                bold: string;
                 code: string;
                 hr: string;
                 center: string;
                 font: string;
+                bold: string;
                 fontSize: string;
                 italic: string;
                 strikethrough: string;

package/dist/runtime/composables/useLight.js

@@ -165,7 +165,8 @@ const light = reactive({
           my_favorite_id: true,
           label: true,
           path: true,
-          icon: true
+          icon: true,
+          sequence: true
         }
       }
     });

package/dist/runtime/pages/System/setting.vue

@@ -55,12 +55,12 @@ const onSubmit = async (d) => {
                     </q-tabs>
                 </template>
                 <template #after>
-                    <l-system-setting-general v-if="tab == 'general'" v-model="obj" />
+                    <l-system-setting-general v-if="tab == 'general'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-mail v-if="tab == 'mail'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-security v-if="tab == 'security'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-modules v-if="tab == 'Modules'" v-bind="obj" @submit="onSubmit" />
-                    <l-system-setting-developer v-if="tab == 'developer'" v-model="obj" />
-                    <l-system-setting-forget-password v-if="tab == 'forget-password'" v-model="obj" />
+                    <l-system-setting-developer v-if="tab == 'developer'" v-bind="obj" @submit="onSubmit" />
+                    <l-system-setting-forget-password v-if="tab == 'forget-password'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-authentication v-if="tab == 'authentication'" v-bind="obj" @submit="onSubmit" />
 
                     

package/dist/runtime/pages/User/_user_id/view.vue

@@ -5,7 +5,6 @@ import { ref } from "vue";
 const route = useRoute();
 const { data: obj } = await useAsyncObject({ canUpdate: true, canDelete: true });
 const light = useLight();
-const tab = ref("overview");
 const id = route.params.user_id;
 const reset2fa = async () => {
   await light.dialog({
@@ -43,19 +42,19 @@ const reset2fa = async () => {
         </template>
 
         <q-card flat bordered>
-            <q-tabs v-model="tab" :active-color="$light.color" inline-label align="justify">
-                <q-tab name="overview" icon="sym_o_person" :label="$t('Overview')" />
-                <q-tab name="userlog" icon="sym_o_description" :label="$t('User log')"
-                    v-if="$light.isGranted('userlog.list')" />
-                <q-tab name="eventlog" icon="sym_o_description" :label="$t('Event log')"
-                    v-if="$light.isGranted('eventlog.list')" />
-            </q-tabs>
-
-            <l-user-overview v-if="tab === 'overview'" :id="id" />
-            <l-user-userlog v-if="tab === 'userlog'" :id="id" />
-            <l-user-eventlog v-if="tab === 'eventlog'" :id="id" />
-
-
+            <l-tabs :active-color="$light.color" inline-label align="justify">
+                <l-tab name="overview" icon="sym_o_person" :label="$t('Overview')">
+                    <l-user-overview :id="id" />
+                </l-tab>
+                <l-tab name="userlog" icon="sym_o_description" :label="$t('User log')"
+                    v-if="$light.isGranted('userlog.list')">
+                    <l-user-userlog :id="id" />
+                </l-tab>
+                <l-tab name="eventlog" icon="sym_o_description" :label="$t('Event log')"
+                    v-if="$light.isGranted('eventlog.list')">
+                    <l-user-eventlog :id="id" />
+                </l-tab>
+            </l-tabs>
 
         </q-card>
 

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

@@ -1,15 +1,62 @@
 <script setup>
 import { useLight, model, q } from "#imports";
-import { ref } from "vue";
 import { useQuasar } from "quasar";
+import { ref, watch } from "vue";
+import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
+import { animations } from "@formkit/drag-and-drop";
 const light = useLight();
 const $q = useQuasar();
-const columns = [
-  { name: "_delete", align: "center" },
-  { name: "label", label: "Label", align: "left" },
-  { name: "path", label: "Path", align: "left" },
-  { name: "icon", label: "Icon", align: "left" }
-];
+const { my } = await q({
+  my: {
+    myFavorites: {
+      my_favorite_id: true,
+      label: true,
+      path: true,
+      icon: true,
+      sequence: true
+    }
+  }
+});
+const [dragParent, rows] = useDragAndDrop(my.myFavorites, {
+  plugins: [animations()],
+  dragHandle: ".drag-handle"
+});
+const isUpdating = ref(false);
+watch(rows, async (newRows) => {
+  if (isUpdating.value) return;
+  let hasChanged = false;
+  for (let i = 0; i < newRows.length; i++) {
+    if (newRows[i].sequence !== i + 1) {
+      hasChanged = true;
+      break;
+    }
+  }
+  if (!hasChanged) return;
+  isUpdating.value = true;
+  try {
+    for (let i = 0; i < newRows.length; i++) {
+      const item = newRows[i];
+      await model("MyFavorite").update(item.my_favorite_id, {
+        sequence: i + 1
+      });
+      item.sequence = i + 1;
+    }
+    await light.reloadMyFavorites();
+    $q.notify({
+      message: "\u9806\u5E8F\u5DF2\u66F4\u65B0",
+      color: "positive",
+      icon: "check"
+    });
+  } catch (error) {
+    $q.notify({
+      message: "\u66F4\u65B0\u5931\u6557: " + error.message,
+      color: "negative",
+      icon: "error"
+    });
+  } finally {
+    isUpdating.value = false;
+  }
+}, { deep: true });
 const onSave = async (id, data) => {
   await model("MyFavorite").update(id, data);
   $q.notify({
@@ -17,50 +64,93 @@ const onSave = async (id, data) => {
     color: "positive",
     icon: "check"
   });
+  const index = rows.value.findIndex((item) => item.my_favorite_id === id);
+  if (index !== -1) {
+    Object.assign(rows.value[index], data);
+  }
   await light.reloadMyFavorites();
 };
 const onRemove = async (id) => {
   await model("MyFavorite").delete(id);
+  const index = rows.value.findIndex((item) => item.my_favorite_id === id);
+  if (index !== -1) {
+    rows.value.splice(index, 1);
+  }
   await light.reloadMyFavorites();
 };
 </script>
 
 <template>
-    <q-table :columns="columns" :rows="$light.myFavorites" :rows-per-page-options="[0]">
+    <div>
+        <q-list ref="dragParent" bordered separator class="drag-list">
+            <q-item
+                v-for="(row, index) in rows" 
+                :key="row.my_favorite_id" 
+                class="drag-item"
+                clickable
+            >
+                <!-- 拖拽手柄 -->
+                <q-item-section avatar class="drag-handle">
+                    <q-icon name="drag_handle" class="cursor-move" color="grey-6" />
+                </q-item-section>
 
-        <template #body-cell-_delete="props">
-            <q-td auto-width>
-                <q-btn flat icon="sym_o_delete" round @click="onRemove(props.row.my_favorite_id)"></q-btn>
-            </q-td>
-        </template>
+                <!-- 主要內容 -->
+                <q-item-section>
+                    <q-item-label>
+                        <div class="row items-center q-gutter-sm">
+                            <!-- Icon -->
+                            <l-icon-picker 
+                                v-model="row.icon" 
+                                flat 
+                                round 
+                                size="sm"
+                                @update:model-value="onSave(row.my_favorite_id, { 'icon': $event })" 
+                            />
+                            
+                            <!-- Label -->
+                            <span class="text-weight-medium">
+                                {{ row.label }}
+                                <q-popup-edit v-model="row.label" #default="scope" buttons
+                                    @save="onSave(row.my_favorite_id, { 'label': $event })">
+                                    <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
+                                </q-popup-edit>
+                            </span>
+                        </div>
+                    </q-item-label>
+                    
+                    <q-item-label caption class="text-grey-7">
+                        {{ row.path }}
+                        <q-popup-edit v-model="row.path" #default="scope" buttons
+                            @save="onSave(row.my_favorite_id, { 'path': $event })">
+                            <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
+                        </q-popup-edit>
+                    </q-item-label>
+                </q-item-section>
 
-        <template #body-cell-label="props">
-            <q-td key="label">
-                {{ props.row.label }}
-                <q-popup-edit v-model="props.row.label" #default="scope" buttons
-                    @save="onSave(props.row.my_favorite_id, { 'label': $event })">
-                    <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
-                </q-popup-edit>
-            </q-td>
+                <!-- 操作按鈕 -->
+                <q-item-section side>
+                    <q-btn 
+                        flat 
+                        round 
+                        icon="sym_o_delete" 
+                        size="sm"
+                        color="negative"
+                        @click="onRemove(row.my_favorite_id)"
+                    >
+                        <q-tooltip>刪除</q-tooltip>
+                    </q-btn>
+                </q-item-section>
+            </q-item>
+        </q-list>
 
-        </template>
-
-        <template #body-cell-path="props">
-            <q-td key="path">
-                {{ props.row.path }}
-                <q-popup-edit v-model="props.row.path" #default="scope" buttons
-                    @save="onSave(props.row.my_favorite_id, { 'path': $event })">
-                    <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
-                </q-popup-edit>
-            </q-td>
-        </template>
-
-        <template #body-cell-icon="props">
-            <q-td key="icon">
-                <l-icon-picker v-model="props.row.icon" flat round @update:model-value="onSave(
-                    props.row.my_favorite_id, { 'icon': $event })"></l-icon-picker>
-            </q-td>
-        </template>
-
-    </q-table>
+        <!-- 狀態提示 -->
+        <div v-if="isUpdating" class="q-mt-md">
+            <q-linear-progress indeterminate color="primary" />
+            <div class="text-center q-mt-sm text-grey-6">正在更新順序...</div>
+        </div>
+    </div>
 </template>
+
+<style scoped>
+.drag-list{border-radius:8px;overflow:hidden}.drag-item{transition:all .2s}.drag-item:hover{background-color:rgba(0,0,0,.02)}.drag-handle{cursor:move;min-width:40px;padding:0 8px}.drag-handle:hover .q-icon{color:var(--q-primary)!important}:deep(.formkit-dnd-is-dragging){background-color:rgba(25,118,210,.05);box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:.7;transform:scale(1.02)}:deep(.formkit-dnd-placeholder){align-items:center;background-color:rgba(25,118,210,.1);border:2px dashed var(--q-primary);border-radius:4px;display:flex;height:72px;justify-content:center;margin:2px 0}:deep(.formkit-dnd-placeholder:before){color:var(--q-primary);content:"放置在此處";font-size:14px;font-weight:500}
+</style>

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

@@ -47,7 +47,7 @@ declare const _default: {
     has2FA: {
         label: string;
         searchType: string;
-        format: (value: any) => "Yes" | "No";
+        format: (value: any) => "" | "✔️";
     };
     _test: {
         label: string;

package/dist/runtime/types/User.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.35.0",
+  "version": "1.37.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
   "dependencies": {
     "@azure/msal-browser": "^3.26.1",
     "@formkit/drag-and-drop": "^0.5.3",
-    "@hostlink/light": "^2.7.2",
+    "@hostlink/light": "^2.8.0",
     "@nuxt/module-builder": "^1.0.1",
     "@quasar/extras": "^1.16.11",
     "@quasar/quasar-ui-qmarkdown": "^2.0.5",