@hostlink/nuxt-light 1.67.8 → 1.69.0

package/dist/module.json

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

package/dist/module.mjs

@@ -1,283 +1,100 @@
 import { defineNuxtModule, createResolver, extendPages, addImports, addComponentsDir, addImportsDir, resolveFiles, addPluginTemplate, addPlugin } from '@nuxt/kit';
+import { readdirSync } from 'node:fs';
+import { basename, join, relative, dirname } from 'node:path';
 
-const routes = [
-  {
-    name: "CustomField",
-    path: "/CustomField",
-    file: "runtime/pages/CustomField/index.vue"
-  },
-  {
-    name: "CustomField-custom_field_id-edit",
-    path: "/CustomField/:custom_field_id/edit",
-    file: "runtime/pages/CustomField/[custom_field_id]/edit.vue"
-  },
-  {
-    name: "EventLog",
-    path: "/EventLog",
-    file: "runtime/pages/EventLog/index.vue"
-  },
-  {
-    name: "FileManager",
-    path: "/FileManager",
-    file: "runtime/pages/FileManager/index.vue"
-  },
-  {
-    name: "MailLog",
-    path: "/MailLog",
-    file: "runtime/pages/MailLog/index.vue"
-  },
-  {
-    name: "Permission",
-    path: "/Permission",
-    file: "runtime/pages/Permission/index.vue"
-  },
-  {
-    name: "Role",
-    path: "/Role",
-    file: "runtime/pages/Role/index.vue"
-  },
-  {
-    name: "System",
-    path: "/System",
-    file: "runtime/pages/System/index.vue"
-  },
-  {
-    name: "SystemValue",
-    path: "/SystemValue",
-    file: "runtime/pages/SystemValue/index.vue"
-  },
-  {
-    name: "Translate",
-    path: "/Translate",
-    file: "runtime/pages/Translate/index.vue"
-  },
-  {
-    name: "User",
-    path: "/User",
-    file: "runtime/pages/User/index.vue"
-  },
-  {
-    name: "UserLog",
-    path: "/UserLog",
-    file: "runtime/pages/UserLog/index.vue"
-  },
-  {
-    name: "Permission-add",
-    path: "/Permission/add",
-    file: "runtime/pages/Permission/add.vue"
-  },
-  {
-    name: "Permission-all",
-    path: "/Permission/all",
-    file: "runtime/pages/Permission/all.vue"
-  },
-  {
-    name: "Permission-export",
-    path: "/Permission/export",
-    file: "runtime/pages/Permission/export.vue"
-  },
-  {
-    name: "Role-add",
-    path: "/Role/add",
-    file: "runtime/pages/Role/add.vue"
-  },
-  {
-    name: "Role-add2",
-    path: "/Role/add2",
-    file: "runtime/pages/Role/add2.vue"
-  },
-  {
-    name: "System-fs",
-    path: "/System/fs",
-    file: "runtime/pages/System/fs.vue"
-  },
-  {
-    name: "System-mailtest",
-    path: "/System/mailtest",
-    file: "runtime/pages/System/mailtest.vue"
-  },
-  {
-    name: "System-package",
-    path: "/System/package",
-    file: "runtime/pages/System/package.vue"
-  },
-  {
-    name: "System-phpinfo",
-    path: "/System/phpinfo",
-    file: "runtime/pages/System/phpinfo.vue"
-  },
-  {
-    name: "System-setting",
-    path: "/System/setting",
-    file: "runtime/pages/System/setting.vue"
-  },
-  {
-    name: "System-test",
-    path: "/System/test",
-    file: "runtime/pages/System/test.vue"
-  },
-  {
-    name: "System-view_as",
-    path: "/System/view_as",
-    file: "runtime/pages/System/view_as.vue"
-  },
-  {
-    name: "System-menu",
-    path: "/System/menu",
-    file: "runtime/pages/System/menu/index.vue"
-  },
-  {
-    name: "SystemValue-add",
-    path: "/SystemValue/add",
-    file: "runtime/pages/SystemValue/add.vue"
-  },
-  {
-    name: "System-database-check",
-    path: "/System/database/check",
-    file: "runtime/pages/System/database/check.vue"
-  },
-  {
-    name: "System-database-migrate",
-    path: "/System/database/migrate",
-    file: "runtime/pages/System/database/migrate.vue"
-  },
-  {
-    name: "System-database-process",
-    path: "/System/database/process",
-    file: "runtime/pages/System/database/process.vue"
-  },
-  {
-    name: "System-database-restore",
-    path: "/System/database/restore",
-    file: "runtime/pages/System/database/restore.vue"
-  },
-  {
-    name: "System-database-backup",
-    path: "/System/database/backup",
-    file: "runtime/pages/System/database/backup.vue"
-  },
-  {
-    name: "System-database-table",
-    path: "/System/database/table",
-    file: "runtime/pages/System/database/table.vue"
-  },
-  {
-    name: "System-database-event",
-    path: "/System/database/event",
-    file: "runtime/pages/System/database/event.vue"
-  },
-  {
-    name: "EventLog-eventlog_id-view",
-    path: "/EventLog/:eventlog_id/view",
-    file: "runtime/pages/EventLog/_eventlog_id/view.vue"
-  },
-  {
-    name: "Role-name-update-child",
-    path: "/Role/:name/update-child",
-    file: "runtime/pages/Role/_name/update-child.vue"
-  },
-  {
-    name: "SystemValue-systemvalue_id-edit",
-    path: "/SystemValue/:systemvalue_id/edit",
-    file: "runtime/pages/SystemValue/_systemvalue_id/edit.vue"
-  },
-  {
-    name: "User-user_id-change-password",
-    path: "/User/:user_id/change-password",
-    file: "runtime/pages/User/_user_id/change-password.vue"
-  },
-  {
-    name: "User-user_id-edit",
-    path: "/User/:user_id/edit",
-    file: "runtime/pages/User/_user_id/edit.vue"
-  },
-  {
-    name: "User-user_id-update-role",
-    path: "/User/:user_id/update-role",
-    file: "runtime/pages/User/_user_id/update-role.vue"
-  },
-  {
-    name: "User",
-    path: "/User",
-    file: "runtime/pages/User/index.vue"
-  },
-  {
-    name: "User-add",
-    path: "/User/add",
-    file: "runtime/pages/User/add.vue"
-  },
-  {
-    name: "User-user_id-view",
-    path: "/User/:user_id/view",
-    file: "runtime/pages/User/_user_id/view.vue"
-  },
-  {
-    name: "User-profile",
-    path: "/User/profile",
-    file: "runtime/pages/User/profile.vue"
-  },
-  {
-    name: "User-createAccessToken",
-    path: "/User/createAccessToken",
-    file: "runtime/pages/User/createAccessToken.vue"
-  },
-  {
-    path: "/User/setting",
-    file: "runtime/pages/User/setting.vue",
-    children: [
-      {
-        name: "User-setting",
-        path: "",
-        file: "runtime/pages/User/setting/index.vue"
-      },
-      {
-        name: "User-setting-bio-auth",
-        path: "bio-auth",
-        file: "runtime/pages/User/setting/bio-auth.vue"
-      },
-      {
-        name: "User-setting-information",
-        path: "information",
-        file: "runtime/pages/User/setting/information.vue"
-      },
-      {
-        name: "User-setting-favorite",
-        path: "favorite",
-        file: "runtime/pages/User/setting/favorite.vue"
-      },
-      {
-        name: "User-setting-menu",
-        path: "menu",
-        file: "runtime/pages/User/setting/menu.vue"
-      },
-      {
-        name: "User-setting-open_id",
-        path: "open_id",
-        file: "runtime/pages/User/setting/open_id.vue"
-      },
-      {
-        name: "User-setting-password",
-        path: "password",
-        file: "runtime/pages/User/setting/password.vue"
-      },
-      {
-        name: "User-setting-style",
-        path: "style",
-        file: "runtime/pages/User/setting/style.vue"
-      },
-      {
-        name: "User-setting-two-factor-auth",
-        path: "two-factor-auth",
-        file: "runtime/pages/User/setting/two-factor-auth.vue"
-      },
-      {
-        name: "User-setting-sessions",
-        path: "sessions",
-        file: "runtime/pages/User/setting/sessions.vue"
+function buildPath(dirParts, fileName) {
+  const parts = [...dirParts];
+  if (fileName !== "index") {
+    parts.push(fileName);
+  }
+  return "/" + parts.map((p) => {
+    if (p.startsWith("[") && p.endsWith("]")) {
+      return ":" + p.slice(1, -1);
+    }
+    return p;
+  }).join("/");
+}
+function buildName(dirParts, fileName) {
+  const parts = [...dirParts];
+  if (fileName !== "index") {
+    parts.push(fileName);
+  }
+  return parts.map((p) => {
+    if (p.startsWith("[") && p.endsWith("]")) {
+      return p.slice(1, -1);
+    }
+    return p;
+  }).join("-");
+}
+function scanRoutes(pagesDir, dir) {
+  const entries = readdirSync(dir, { withFileTypes: true });
+  const files = entries.filter((e) => e.isFile() && e.name.endsWith(".vue")).sort((a, b) => {
+    if (a.name === "index.vue") return -1;
+    if (b.name === "index.vue") return 1;
+    return a.name.localeCompare(b.name);
+  });
+  const dirs = entries.filter((e) => e.isDirectory());
+  const result = [];
+  const handledDirs = /* @__PURE__ */ new Set();
+  for (const file of files) {
+    const baseName = basename(file.name, ".vue");
+    const siblingDir = dirs.find((d) => d.name === baseName);
+    if (siblingDir) {
+      handledDirs.add(baseName);
+      const filePath = join(dir, file.name);
+      const relPath = relative(pagesDir, filePath);
+      const dirParts = dirname(relPath).split("/").filter((p) => p && p !== ".");
+      const parentPath = buildPath(dirParts, baseName);
+      const children = scanRoutes(pagesDir, join(dir, baseName));
+      for (const child of children) {
+        child.path = child.path.replace(parentPath, "");
+        if (child.path.startsWith("/")) {
+          child.path = child.path.slice(1);
+        }
       }
-    ]
+      result.push({
+        path: parentPath,
+        file: relPath,
+        children
+      });
+    }
+  }
+  for (const file of files) {
+    const baseName = basename(file.name, ".vue");
+    const siblingDir = dirs.find((d) => d.name === baseName);
+    if (!siblingDir) {
+      const filePath = join(dir, file.name);
+      const relPath = relative(pagesDir, filePath);
+      const dirParts = dirname(relPath).split("/").filter((p) => p && p !== ".");
+      result.push({
+        name: buildName(dirParts, baseName),
+        path: buildPath(dirParts, baseName),
+        file: relPath
+      });
+    }
   }
-];
+  for (const d of dirs) {
+    if (!handledDirs.has(d.name)) {
+      result.push(...scanRoutes(pagesDir, join(dir, d.name)));
+    }
+  }
+  return result;
+}
+function generateRoutes(pagesDir) {
+  return scanRoutes(pagesDir, pagesDir);
+}
+function resolveRouteFiles(routes, resolve) {
+  return routes.map((route) => {
+    const resolved = {
+      ...route,
+      file: resolve(`runtime/pages/${route.file}`)
+    };
+    if (route.children) {
+      resolved.children = resolveRouteFiles(route.children, resolve);
+    }
+    return resolved;
+  });
+}
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -349,26 +166,26 @@ const module$1 = defineNuxtModule({
       }
     };
     nuxt.options.runtimeConfig = runtimeConfig;
+    const pagesDir = resolver.resolve("./runtime/pages");
+    const generatedRoutes = resolveRouteFiles(generateRoutes(pagesDir), resolver.resolve);
     extendPages((pages) => {
-      for (const route of routes) {
+      for (const route of generatedRoutes) {
         if (route.children) {
           pages.unshift({
             path: route.path,
-            file: resolver.resolve(route.file),
-            children: route.children.map((child) => {
-              return {
-                name: child.name,
-                path: child.path,
-                file: resolver.resolve(child.file)
-              };
-            })
+            file: route.file,
+            children: route.children.map((child) => ({
+              name: child.name,
+              path: child.path,
+              file: child.file
+            }))
           });
           continue;
         }
         pages.unshift({
           name: route.name,
           path: route.path,
-          file: resolver.resolve(route.file)
+          file: route.file
         });
       }
     });
@@ -419,7 +236,9 @@ export default defineNuxtPlugin(() => {})`;
 import { query as q } from '@hostlink/light'
 export default defineNuxtPlugin(() => {
   addRouteMiddleware("auth", async (to) => {
-    if (to.path === "/") return;
+    const normalize = (p) => (p || "").replace(/[/]+$/, "");
+    const publicPaths = ["/", "/page_not_found", "/login"].map(normalize);
+    if (publicPaths.includes(normalize(to.path))) return;
     const { my } = await q({
       my: { allowedPath: { __args: { path: to.path } } }
     });

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

@@ -1,12 +1,12 @@
-declare var __VLS_38: {}, __VLS_240: {}, __VLS_351: {}, __VLS_358: {};
+declare var __VLS_38: {}, __VLS_245: {}, __VLS_356: {}, __VLS_363: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_38) => any;
 } & {
-    'user-menu'?: (props: typeof __VLS_240) => any;
+    'user-menu'?: (props: typeof __VLS_245) => any;
 } & {
-    'page-top'?: (props: typeof __VLS_351) => any;
+    'page-top'?: (props: typeof __VLS_356) => any;
 } & {
-    'page-bottom'?: (props: typeof __VLS_358) => any;
+    'page-bottom'?: (props: typeof __VLS_363) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     logout: (...args: any[]) => void;

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

@@ -28,6 +28,7 @@ const tt = await q({
     copyrightName: true,
     copyrightYear: true,
     hasFavorite: true,
+    notificationBellEnabled: true,
     i18nMessages: {
       name: true,
       value: true
@@ -288,6 +289,8 @@ const onLogout = async () => {
                     </q-menu>
                 </q-btn>
 
+                <l-notification-bell class="q-mr-xs" v-if="app.notificationBellEnabled !== false" />
+
                 <div class="q-mx-sm" v-if="$q.screen.gt.xs">
                     <div class="text-bold text-right">
                         {{ my.first_name }} {{ my.last_name }}

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

@@ -1,12 +1,12 @@
-declare var __VLS_38: {}, __VLS_240: {}, __VLS_351: {}, __VLS_358: {};
+declare var __VLS_38: {}, __VLS_245: {}, __VLS_356: {}, __VLS_363: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_38) => any;
 } & {
-    'user-menu'?: (props: typeof __VLS_240) => any;
+    'user-menu'?: (props: typeof __VLS_245) => any;
 } & {
-    'page-top'?: (props: typeof __VLS_351) => any;
+    'page-top'?: (props: typeof __VLS_356) => any;
 } & {
-    'page-bottom'?: (props: typeof __VLS_358) => any;
+    'page-bottom'?: (props: typeof __VLS_363) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     logout: (...args: any[]) => void;

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

@@ -0,0 +1,187 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { useQuasar } from "quasar";
+import { useLight, q, m, navigateTo } from "#imports";
+const $q = useQuasar();
+const light = useLight();
+const notifications = ref([]);
+const unreadCount = ref(0);
+const loading = ref(false);
+const fetchUnreadCount = async () => {
+  try {
+    const data = await q({
+      my: {
+        unreadNotificationCount: true
+      }
+    });
+    unreadCount.value = data.my.unreadNotificationCount || 0;
+  } catch {
+  }
+};
+const fetchNotifications = async () => {
+  loading.value = true;
+  try {
+    const data = await q({
+      app: {
+        listNotification: {
+          data: {
+            __args: {
+              limit: 10,
+              offset: 0
+            },
+            notification_id: true,
+            type: true,
+            title: true,
+            message: true,
+            link: true,
+            is_read: true,
+            created_time: true
+          },
+          meta: {
+            total: true,
+            key: true,
+            name: true
+          }
+        }
+      }
+    });
+    notifications.value = data.app.listNotification.data || [];
+  } catch (e) {
+    $q.notify({ message: e.message, color: "negative" });
+  } finally {
+    loading.value = false;
+  }
+};
+const markRead = async (notification) => {
+  if (notification.is_read) return;
+  try {
+    await m("markNotificationRead", { id: notification.notification_id });
+    notification.is_read = 1;
+    unreadCount.value = Math.max(0, unreadCount.value - 1);
+  } catch (e) {
+    $q.notify({ message: e.message, color: "negative" });
+  }
+};
+const markAllRead = async () => {
+  try {
+    await m("markAllNotificationsRead");
+    notifications.value.forEach((n) => n.is_read = 1);
+    unreadCount.value = 0;
+  } catch (e) {
+    $q.notify({ message: e.message, color: "negative" });
+  }
+};
+const goToInbox = () => {
+  navigateTo("/Notification");
+};
+const onClickNotification = (notification) => {
+  markRead(notification);
+  if (notification.link) {
+    navigateTo(notification.link);
+  }
+};
+const iconForType = (type) => {
+  switch (type) {
+    case "success":
+      return "sym_o_check_circle";
+    case "warning":
+      return "sym_o_warning";
+    case "error":
+      return "sym_o_error";
+    default:
+      return "sym_o_info";
+  }
+};
+const colorForType = (type) => {
+  switch (type) {
+    case "success":
+      return "positive";
+    case "warning":
+      return "warning";
+    case "error":
+      return "negative";
+    default:
+      return "info";
+  }
+};
+let pollInterval;
+onMounted(() => {
+  fetchUnreadCount();
+  pollInterval = setInterval(fetchUnreadCount, 6e4);
+});
+onUnmounted(() => {
+  if (pollInterval) clearInterval(pollInterval);
+});
+const openDropdown = () => {
+};
+const unreadNotifications = computed(() => notifications.value.filter((n) => !n.is_read));
+const readNotifications = computed(() => notifications.value.filter((n) => n.is_read));
+</script>
+
+<template>
+    <q-btn dense flat round icon="sym_o_notifications" class="q-mr-xs">
+        <q-badge v-if="unreadCount > 0" color="negative" floating rounded>{{ unreadCount > 99 ? '99+' : unreadCount }}</q-badge>
+        <q-menu :offset="[0, 8]" max-width="360px" max-height="480px" auto-close @show="fetchNotifications">
+            <q-card flat bordered>
+                <q-card-section class="row items-center justify-between q-py-sm">
+                    <div class="text-subtitle2">{{ $t('Notifications') }}</div>
+                    <q-btn v-if="unreadCount > 0" flat dense size="sm" color="primary" @click="markAllRead">
+                        {{ $t('Mark all read') }}
+                    </q-btn>
+                </q-card-section>
+                <q-separator />
+
+                <q-card-section v-if="loading" class="text-center q-py-md">
+                    <q-spinner color="primary" size="2em" />
+                </q-card-section>
+
+                <q-list v-else-if="notifications.length" padding dense separator>
+                    <template v-if="unreadNotifications.length">
+                        <q-item-label header class="text-caption text-uppercase text-grey">{{ $t('Unread') }}</q-item-label>
+                        <q-item v-for="n in unreadNotifications" :key="n.notification_id" clickable v-ripple
+                            class="bg-blue-1" @click="onClickNotification(n)">
+                            <q-item-section avatar top>
+                                <q-icon :name="iconForType(n.type)" :color="colorForType(n.type)" size="24px" />
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label class="text-weight-bold">{{ n.title }}</q-item-label>
+                                <q-item-label caption lines="2">{{ n.message }}</q-item-label>
+                                <q-item-label caption class="text-grey">{{ n.created_time }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section side>
+                                <q-btn flat round dense icon="sym_o_done" size="sm" color="primary"
+                                    @click.stop="markRead(n)">
+                                    <q-tooltip>{{ $t('Mark as read') }}</q-tooltip>
+                                </q-btn>
+                            </q-item-section>
+                        </q-item>
+                    </template>
+
+                    <template v-if="readNotifications.length">
+                        <q-item-label header class="text-caption text-uppercase text-grey">{{ $t('Earlier') }}</q-item-label>
+                        <q-item v-for="n in readNotifications" :key="n.notification_id" clickable v-ripple
+                            @click="onClickNotification(n)">
+                            <q-item-section avatar top>
+                                <q-icon :name="iconForType(n.type)" color="grey" size="24px" />
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label>{{ n.title }}</q-item-label>
+                                <q-item-label caption lines="2">{{ n.message }}</q-item-label>
+                                <q-item-label caption class="text-grey">{{ n.created_time }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </template>
+                </q-list>
+
+                <q-card-section v-else class="text-center text-grey q-py-md">
+                    {{ $t('No notifications') }}
+                </q-card-section>
+
+                <q-separator />
+                <q-card-actions align="center">
+                    <q-btn flat color="primary" size="sm" @click="goToInbox">{{ $t('View all notifications') }}</q-btn>
+                </q-card-actions>
+            </q-card>
+        </q-menu>
+    </q-btn>
+</template>

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

@@ -1,4 +1,5 @@
 <script setup>
+import { q } from "#imports";
 const emits = defineEmits(["submit"]);
 defineProps({
   mail_driver: { type: String, required: true, default: "mail" },
@@ -12,12 +13,6 @@ defineProps({
   mail_reply_to: { type: String, required: true },
   mail_reply_to_name: { type: String, required: true }
 });
-const onLoginGmail = () => {
-  let state = encodeURIComponent(window.self.location.origin + window.self.location.pathname + "?mail_driver=gmail");
-  let scope = encodeURIComponent("https://mail.google.com/");
-  let url = "https://accounts.google.com/o/oauth2/v2/auth?scope=" + scope + "&access_type=offline&state=" + state + "&response_type=code&redirect_uri=https%3A%2F%2Fraymond4.hostlink.com.hk%2Flight%2Fgmail_notification%2Fredirect.php&client_id=790028313082-8qqnoqvkqtqssufto11k6qe6pnievcpv.apps.googleusercontent.com&prompt=consent";
-  window.open(url, "_blank");
-};
 </script>
 
 <template>
@@ -35,7 +30,19 @@ const onLoginGmail = () => {
 ]" validation="required"></FormKit>
 
         <template v-if="value.mail_driver === 'gmail'">
-            <l-btn label="Login" @click="onLoginGmail" icon="sym_o_login" />
+            <div class="col-12">
+                <q-banner class="bg-info text-white" rounded>
+                    <div class="text-weight-bold q-mb-xs">How to create an App Password</div>
+                    <ol class="q-pl-md q-my-none">
+                        <li>Enable 2-Step Verification in your Google Account Security settings.</li>
+                        <li>Go to the <a href="https://myaccount.google.com/apppasswords" target="_blank" class="text-white" style="text-decoration: underline;">Google App Passwords page</a>.</li>
+                        <li>Select app and device, or choose Other (Custom name), then click Generate.</li>
+                        <li>Copy the 16-character password and paste it below.</li>
+                    </ol>
+                </q-banner>
+            </div>
+            <FormKit type="l-input" label="Gmail Address" name="mail_username" validation="required|email"></FormKit>
+            <FormKit type="l-input" label="App Password" name="mail_password" validation="required" :attrs="{ type: 'password' }"></FormKit>
         </template>
 
         <template v-else>
@@ -50,7 +57,7 @@ const onLoginGmail = () => {
                 <FormKit type="l-input" label="SMTP Host" name="mail_host"></FormKit>
                 <FormKit type="l-input" label="SMTP Port" name="mail_port"></FormKit>
                 <FormKit type="l-input" label="SMTP Username" name="mail_username"></FormKit>
-                <FormKit type="l-input" label="SMTP Password" name="mail_password"></FormKit>
+                <FormKit type="l-input" label="SMTP Password" name="mail_password" :attrs="{ type: 'password' }"></FormKit>
 
                 <FormKit type="l-select" label="SMTP Encryption" name="mail_encryption" :options="[
   { label: 'None', value: '' },

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

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     file_manager: string;
+    notification_bell_enabled: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (...args: any[]) => void;

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

@@ -1,7 +1,8 @@
 <script setup>
 const emits = defineEmits(["submit"]);
 defineProps({
-  file_manager: { type: String, required: true }
+  file_manager: { type: String, required: true },
+  notification_bell_enabled: { type: String, required: true }
 });
 </script>
 
@@ -10,6 +11,9 @@ defineProps({
         <l-field :label="$t('File Manager')" stack-label hide-bottom-space class="col-6">
             <form-kit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
         </l-field>
-        
+
+        <l-field :label="$t('Notification Bell')" stack-label hide-bottom-space class="col-6">
+            <form-kit type="l-checkbox" label="Show" name="notification_bell_enabled" true-value="1" false-value="0" />
+        </l-field>
     </form-kit>
 </template>

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

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     file_manager: string;
+    notification_bell_enabled: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (...args: any[]) => void;

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

@@ -79,17 +79,23 @@ export interface LTableRequest {
     }) => void;
 }
 declare function requestServerInteraction(): void;
-declare var __VLS_114: any, __VLS_117: string, __VLS_118: any, __VLS_149: any, __VLS_152: any, __VLS_322: string, __VLS_323: any;
+declare var __VLS_24: {
+    props: any;
+}, __VLS_55: any, __VLS_119: any, __VLS_122: string, __VLS_123: any, __VLS_154: any, __VLS_157: any, __VLS_327: string, __VLS_328: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_117>]?: (props: typeof __VLS_118) => any;
+    [K in NonNullable<typeof __VLS_122>]?: (props: typeof __VLS_123) => any;
 } & {
-    [K in NonNullable<typeof __VLS_322>]?: (props: typeof __VLS_323) => any;
+    [K in NonNullable<typeof __VLS_327>]?: (props: typeof __VLS_328) => any;
 } & {
-    actions?: (props: typeof __VLS_114) => any;
+    'header-selection'?: (props: typeof __VLS_24) => any;
 } & {
-    'row-expand'?: (props: typeof __VLS_149) => any;
+    'top-selection'?: (props: typeof __VLS_55) => any;
 } & {
-    'top-right'?: (props: typeof __VLS_152) => any;
+    actions?: (props: typeof __VLS_119) => any;
+} & {
+    'row-expand'?: (props: typeof __VLS_154) => any;
+} & {
+    'top-right'?: (props: typeof __VLS_157) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LTableProps, {
     requestServerInteraction: typeof requestServerInteraction;

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

@@ -562,7 +562,9 @@ const hasFilters = computed(() => {
         <template #header="props">
             <q-tr :props="props">
                 <q-th v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" :dense="table?.dense" />
+                    <slot name="header-selection" :props="props">
+                        <q-checkbox v-model="props.selected" :dense="table?.dense" />
+                    </slot>
                 </q-th>
                 <q-th v-if="hasRowExpand" auto-width></q-th>
                 <q-th v-if="hasActions" auto-width></q-th>
@@ -578,6 +580,10 @@ const hasFilters = computed(() => {
             </div>
         </template>
 
+        <template #top-selection="props" v-if="ss.indexOf('top-selection') >= 0">
+            <slot name="top-selection" v-bind="props"></slot>
+        </template>
+
         <template #top-left v-if="addComponent">
             <q-btn icon="sym_o_add" :label="$t('Add')" color="primary" @click="onAdd" outline />
         </template>

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

@@ -79,17 +79,23 @@ export interface LTableRequest {
     }) => void;
 }
 declare function requestServerInteraction(): void;
-declare var __VLS_114: any, __VLS_117: string, __VLS_118: any, __VLS_149: any, __VLS_152: any, __VLS_322: string, __VLS_323: any;
+declare var __VLS_24: {
+    props: any;
+}, __VLS_55: any, __VLS_119: any, __VLS_122: string, __VLS_123: any, __VLS_154: any, __VLS_157: any, __VLS_327: string, __VLS_328: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_117>]?: (props: typeof __VLS_118) => any;
+    [K in NonNullable<typeof __VLS_122>]?: (props: typeof __VLS_123) => any;
 } & {
-    [K in NonNullable<typeof __VLS_322>]?: (props: typeof __VLS_323) => any;
+    [K in NonNullable<typeof __VLS_327>]?: (props: typeof __VLS_328) => any;
 } & {
-    actions?: (props: typeof __VLS_114) => any;
+    'header-selection'?: (props: typeof __VLS_24) => any;
 } & {
-    'row-expand'?: (props: typeof __VLS_149) => any;
+    'top-selection'?: (props: typeof __VLS_55) => any;
 } & {
-    'top-right'?: (props: typeof __VLS_152) => any;
+    actions?: (props: typeof __VLS_119) => any;
+} & {
+    'row-expand'?: (props: typeof __VLS_154) => any;
+} & {
+    'top-right'?: (props: typeof __VLS_157) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LTableProps, {
     requestServerInteraction: typeof requestServerInteraction;

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

@@ -0,0 +1,2 @@
+declare const _default: () => void;
+export default _default;

package/dist/runtime/models/Notification.js

@@ -0,0 +1,52 @@
+import { defineLightModel } from "#imports";
+export default defineLightModel({
+  name: "Notification",
+  dataPath: "app.listNotification",
+  fields: {
+    notification_id: {
+      label: "ID",
+      sortable: true
+    },
+    type: {
+      label: "Type",
+      sortable: true,
+      searchable: true,
+      searchType: "select",
+      searchOptions: [
+        { label: "Info", value: "info" },
+        { label: "Success", value: "success" },
+        { label: "Warning", value: "warning" },
+        { label: "Error", value: "error" }
+      ],
+      format: (value) => {
+        const map = { info: "Info", success: "Success", warning: "Warning", error: "Error" };
+        return map[value] || value;
+      }
+    },
+    title: {
+      label: "Title",
+      sortable: true,
+      searchable: true
+    },
+    message: {
+      label: "Message",
+      searchable: true
+    },
+    link: {
+      label: "Link"
+    },
+    is_read: {
+      label: "Read",
+      sortable: true,
+      searchable: true,
+      searchType: "boolean",
+      format: (value) => value ? "Yes" : "No"
+    },
+    created_time: {
+      label: "Created Time",
+      sortable: true,
+      searchable: true,
+      searchType: "date"
+    }
+  }
+});

package/dist/runtime/models/SystemValue.js

@@ -5,7 +5,9 @@ export default defineLightModel({
   fields: {
     name: {
       label: "Name",
-      sortable: true
+      sortable: true,
+      searchable: true,
+      searchPlaceholder: "Search by name..."
     },
     value: {
       label: "Value",

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

@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { model, m, notify } from "#imports";
+const $q = useQuasar();
+const tableRef = ref(null);
+const selected = ref([]);
+const columns = model("Notification").columns({
+  notification_id: true,
+  type: true,
+  title: true,
+  message: true,
+  link: true,
+  is_read: true,
+  created_time: true
+});
+const onBulkDelete = async () => {
+  if (selected.value.length === 0) return;
+  $q.dialog({
+    title: $q.lang.label?.delete || "Delete",
+    message: "Are you sure you want to delete " + selected.value.length + " selected notification(s)?",
+    cancel: true,
+    persistent: true,
+    color: "negative"
+  }).onOk(async () => {
+    try {
+      const ids = selected.value.map((n) => n.notification_id);
+      await m("deleteNotifications", { ids });
+      notify("Deleted " + ids.length + " notification(s)");
+      selected.value = [];
+      tableRef.value?.requestServerInteraction();
+    } catch (e) {
+      notify({ message: e.message, color: "negative" });
+    }
+  });
+};
+const onDelete = () => {
+  tableRef.value?.requestServerInteraction();
+};
+</script>
+
+<template>
+    <l-page>
+        <l-table ref="tableRef" row-key="notification_id" :columns="columns"
+            selection="multiple" v-model:selected="selected"
+            @request-data="$event.loadObjects('Notification')"
+            :actions="['delete']"
+            @delete="onDelete">
+            <template #top-selection="{ rows }">
+                <q-btn flat dense color="negative" icon="sym_o_delete"
+                    :label="'Delete (' + selected.length + ')'" @click="onBulkDelete" />
+            </template>
+        </l-table>
+    </l-page>
+</template>

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

@@ -49,7 +49,7 @@ let columns = [
 const onCickView = async (id) => {
   try {
     if (await m("viewAs", { user_id: id })) {
-      window.location.reload();
+      window.location.href = "/";
     }
   } catch (e) {
     light.dialog({

package/dist/runtime/pages/User/[user_id]/update-role.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/pages/User/[user_id]/update-role.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/pages/User/[user_id]/view.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/pages/User/[user_id]/view.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/pages/page_not_found.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/pages/page_not_found.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { useRoute, navigateTo } from "#imports";
+const route = useRoute();
+const attemptedPath = route.query.path || route.fullPath;
+</script>
+
+<template>
+  <l-page class="q-pa-md">
+    <q-banner class="bg-negative text-white">
+      <template v-slot:avatar>
+        <q-icon name="sym_o_error" />
+      </template>
+      <div class="text-h6">Page not found</div>
+      <div v-if="attemptedPath && attemptedPath !== '/'">
+        The requested page was not found or you do not have permission to access it:
+        <code>{{ attemptedPath }}</code>
+      </div>
+      <div v-else>
+        The requested page was not found or you do not have permission to access it.
+      </div>
+    </q-banner>
+    <div class="q-mt-md">
+      <q-btn color="primary" icon="sym_o_home" label="Home" to="/" />
+    </div>
+  </l-page>
+</template>

package/dist/runtime/pages/page_not_found.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.67.8",
+  "version": "1.69.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "@hostlink/light": "^3.2.7",
     "@nuxt/module-builder": "^1.0.1",
     "@quasar/extras": "^1.17.0",
-    "@quasar/quasar-ui-qmarkdown": "^2.0.5",
+    "@quasar/quasar-ui-qmarkdown": "^3.0.0-rc.1",
     "@vueuse/core": "^14.0.0",
     "axios": "^1.12.2",
     "defu": "^6.1.4",
@@ -65,6 +65,7 @@
     "eslint": "^9.39.1",
     "nuxt": "^4.3.0",
     "typescript": "^5.9.2",
+    "vitest": "^3.2.6",
     "vue-tsc": "^3.1.5"
   }
 }