@hostlink/nuxt-light 1.68.0 → 1.70.1

package/dist/module.json

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

package/dist/module.mjs

@@ -236,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/App.d.vue.ts

@@ -4,8 +4,31 @@ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 type __VLS_WithSlots<T, S> = T & (new () => {
     $slots: S;
 });
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    userMenuItems: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    headerButtons: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    userMenuItems: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    headerButtons: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    userMenuItems: unknown[];
+    headerButtons: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
+    [x: `header-button-menu-${any}`]: ((props: {}) => any) | undefined;
+} & {
     header?: ((props: {}) => any) | undefined;
 } & {
     'user-menu'?: ((props: {}) => any) | undefined;

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

@@ -4,6 +4,16 @@ import { useLight, watch } from "#imports";
 import { useQuasar } from "quasar";
 import { q } from "#imports";
 import { useRoute } from "vue-router";
+defineProps({
+  userMenuItems: {
+    type: Array,
+    default: () => []
+  },
+  headerButtons: {
+    type: Array,
+    default: () => []
+  }
+});
 const route = useRoute();
 const light = useLight();
 const quasar = useQuasar();
@@ -83,7 +93,8 @@ if (app.value.facebookAppId) {
         </q-page-container>
     </q-layout>
 
-    <l-app-main v-else @logout="app.logged = false" v-bind="app">
+    <l-app-main v-else @logout="app.logged = false" v-bind="app" :user-menu-items="userMenuItems"
+        :header-buttons="headerButtons">
         <template #header>
             <slot name="header"></slot>
         </template>
@@ -92,6 +103,10 @@ if (app.value.facebookAppId) {
             <slot name="user-menu"></slot>
         </template>
 
+        <template v-for="button in headerButtons" :key="button.name" #[`header-button-menu-${button.name}`]>
+            <slot :name="`header-button-menu-${button.name}`"></slot>
+        </template>
+
         <template #page-top>
             <slot name="page-top"></slot>
         </template>

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

@@ -4,8 +4,31 @@ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 type __VLS_WithSlots<T, S> = T & (new () => {
     $slots: S;
 });
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    userMenuItems: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    headerButtons: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    userMenuItems: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    headerButtons: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    userMenuItems: unknown[];
+    headerButtons: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
+    [x: `header-button-menu-${any}`]: ((props: {}) => any) | undefined;
+} & {
     header?: ((props: {}) => any) | undefined;
 } & {
     'user-menu'?: ((props: {}) => any) | undefined;

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

@@ -1,18 +1,44 @@
-declare var __VLS_38: {}, __VLS_245: {}, __VLS_356: {}, __VLS_363: {};
+interface UserMenuItem {
+    label: string;
+    icon?: string;
+    to?: string;
+    click?: () => void;
+    visible?: boolean;
+}
+interface HeaderButton {
+    name: string;
+    icon: string;
+    tooltip?: string;
+    to?: string;
+    click?: () => void;
+    menu?: boolean;
+    visible?: boolean;
+    desktop?: boolean;
+    mobile?: boolean;
+}
+type __VLS_Props = {
+    userMenuItems?: UserMenuItem[];
+    headerButtons?: HeaderButton[];
+};
+declare var __VLS_38: {}, __VLS_61: `header-button-menu-${string}`, __VLS_62: {}, __VLS_132: `header-button-menu-${string}`, __VLS_133: {}, __VLS_340: {}, __VLS_482: {}, __VLS_489: {};
 type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_61>]?: (props: typeof __VLS_62) => any;
+} & {
+    [K in NonNullable<typeof __VLS_132>]?: (props: typeof __VLS_133) => any;
+} & {
     header?: (props: typeof __VLS_38) => any;
 } & {
-    'user-menu'?: (props: typeof __VLS_245) => any;
+    'user-menu'?: (props: typeof __VLS_340) => any;
 } & {
-    'page-top'?: (props: typeof __VLS_356) => any;
+    'page-top'?: (props: typeof __VLS_482) => any;
 } & {
-    'page-bottom'?: (props: typeof __VLS_363) => any;
+    'page-bottom'?: (props: typeof __VLS_489) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     logout: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onLogout?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -7,6 +7,10 @@ import { ref, computed, reactive, provide, watch, toRaw, onMounted } from "vue";
 import { useRuntimeConfig } from "nuxt/app";
 import { logout } from "@hostlink/light";
 const emits = defineEmits(["logout"]);
+defineProps({
+  userMenuItems: { type: Array, required: false },
+  headerButtons: { type: Array, required: false }
+});
 const $q = useQuasar();
 $q.loading.show();
 const config = useRuntimeConfig();
@@ -28,6 +32,7 @@ const tt = await q({
     copyrightName: true,
     copyrightYear: true,
     hasFavorite: true,
+    notificationBellEnabled: true,
     i18nMessages: {
       name: true,
       value: true
@@ -254,6 +259,45 @@ const onLogout = async () => {
 
                 <slot name="header"></slot>
 
+                <!-- Header buttons (desktop) -->
+                <template v-for="button in headerButtons || []" :key="button.name">
+                    <q-btn v-if="button.visible !== false && button.desktop !== false" round flat dense
+                        :icon="button.icon" class="q-mr-sm gt-xs" @click="button.click"
+                        :to="button.to ? button.to : void 0">
+                        <q-tooltip v-if="button.tooltip">{{ $t(button.tooltip) }}</q-tooltip>
+                        <q-menu v-if="button.menu">
+                            <slot :name="`header-button-menu-${button.name}`"></slot>
+                        </q-menu>
+                    </q-btn>
+                </template>
+
+                <!-- Header buttons (mobile hamburger) -->
+                <q-btn round flat dense icon="menu" class="q-mr-sm lt-sm" v-if="headerButtons?.length">
+                    <q-tooltip>More</q-tooltip>
+                    <q-menu>
+                        <q-list>
+                            <template v-for="button in headerButtons || []" :key="button.name">
+                                <q-item v-if="button.visible !== false && button.mobile !== false"
+                                    :clickable="!button.menu && (!!button.to || !!button.click)" @click="button.click"
+                                    :to="button.to ? button.to : void 0">
+                                    <q-item-section avatar>
+                                        <q-icon :name="button.icon" />
+                                    </q-item-section>
+                                    <q-item-section>{{ button.tooltip ? $t(button.tooltip) : button.name
+                                        }}</q-item-section>
+                                    <q-item-section side v-if="button.menu">
+                                        <q-btn flat dense icon="arrow_right">
+                                            <q-menu anchor="top end" self="top start">
+                                                <slot :name="`header-button-menu-${button.name}`"></slot>
+                                            </q-menu>
+                                        </q-btn>
+                                    </q-item-section>
+                                </q-item>
+                            </template>
+                        </q-list>
+                    </q-menu>
+                </q-btn>
+
                 <q-btn :icon="isFav ? 'favorite' : 'sym_o_favorite'" round flat dense class="q-mr-xs"
                     @click="onToggleFav" v-if="app.hasFavorite">
                 </q-btn>
@@ -288,7 +332,7 @@ const onLogout = async () => {
                     </q-menu>
                 </q-btn>
 
-                <l-notification-bell class="q-mr-xs" />
+                <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">
@@ -336,6 +380,16 @@ const onLogout = async () => {
 
                             <slot name="user-menu"></slot>
 
+                            <q-item v-for="item in userMenuItems || []" :key="item.label" v-close-popup :to="item.to"
+                                clickable @click="item.click" v-show="item.visible !== false">
+                                <q-item-section avatar v-if="item.icon">
+                                    <q-icon :name="item.icon" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label>{{ $t(item.label) }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+
                             <q-separator />
 
                             <q-item @click="onLogout" clickable>

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

@@ -1,18 +1,44 @@
-declare var __VLS_38: {}, __VLS_245: {}, __VLS_356: {}, __VLS_363: {};
+interface UserMenuItem {
+    label: string;
+    icon?: string;
+    to?: string;
+    click?: () => void;
+    visible?: boolean;
+}
+interface HeaderButton {
+    name: string;
+    icon: string;
+    tooltip?: string;
+    to?: string;
+    click?: () => void;
+    menu?: boolean;
+    visible?: boolean;
+    desktop?: boolean;
+    mobile?: boolean;
+}
+type __VLS_Props = {
+    userMenuItems?: UserMenuItem[];
+    headerButtons?: HeaderButton[];
+};
+declare var __VLS_38: {}, __VLS_61: `header-button-menu-${string}`, __VLS_62: {}, __VLS_132: `header-button-menu-${string}`, __VLS_133: {}, __VLS_340: {}, __VLS_482: {}, __VLS_489: {};
 type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_61>]?: (props: typeof __VLS_62) => any;
+} & {
+    [K in NonNullable<typeof __VLS_132>]?: (props: typeof __VLS_133) => any;
+} & {
     header?: (props: typeof __VLS_38) => any;
 } & {
-    'user-menu'?: (props: typeof __VLS_245) => any;
+    'user-menu'?: (props: typeof __VLS_340) => any;
 } & {
-    'page-top'?: (props: typeof __VLS_356) => any;
+    'page-top'?: (props: typeof __VLS_482) => any;
 } & {
-    'page-bottom'?: (props: typeof __VLS_363) => any;
+    'page-bottom'?: (props: typeof __VLS_489) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     logout: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onLogout?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,20 @@
+interface DialogInsertEditImageProps {
+    initialSource?: string;
+    initialAlt?: string;
+    initialWidth?: number | null;
+    initialHeight?: number | null;
+}
+declare const __VLS_export: import("vue").DefineComponent<DialogInsertEditImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<DialogInsertEditImageProps> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {
+    initialSource: string;
+    initialAlt: string;
+    initialWidth: number | null;
+    initialHeight: number | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,133 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useDialogPluginComponent } from "quasar";
+const props = defineProps({
+  initialSource: { type: String, required: false, default: "" },
+  initialAlt: { type: String, required: false, default: "" },
+  initialWidth: { type: [Number, null], required: false, default: null },
+  initialHeight: { type: [Number, null], required: false, default: null }
+});
+defineEmits([
+  ...useDialogPluginComponent.emits
+]);
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+const source = ref(props.initialSource);
+const alt = ref(props.initialAlt);
+const width = ref(props.initialWidth);
+const height = ref(props.initialHeight);
+const lockAspectRatio = ref(true);
+const aspectRatio = ref(null);
+const canSubmit = computed(() => source.value.trim().length > 0);
+const toPositiveNumber = (value) => {
+  const n = Number(value);
+  return Number.isFinite(n) && n > 0 ? n : null;
+};
+const updateImageMeta = (src) => {
+  return new Promise((resolve) => {
+    if (!src) {
+      aspectRatio.value = null;
+      resolve();
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+        aspectRatio.value = img.naturalWidth / img.naturalHeight;
+        if (!width.value) width.value = img.naturalWidth;
+        if (!height.value) height.value = img.naturalHeight;
+      }
+      resolve();
+    };
+    img.onerror = () => resolve();
+    img.src = src;
+  });
+};
+watch(() => source.value, (value) => {
+  updateImageMeta(value.trim());
+}, { immediate: true });
+const onWidthInput = (val) => {
+  const newWidth = toPositiveNumber(val);
+  width.value = newWidth;
+  if (lockAspectRatio.value && aspectRatio.value && newWidth) {
+    height.value = Math.round(newWidth / aspectRatio.value);
+  }
+};
+const onHeightInput = (val) => {
+  const newHeight = toPositiveNumber(val);
+  height.value = newHeight;
+  if (lockAspectRatio.value && aspectRatio.value && newHeight) {
+    width.value = Math.round(newHeight * aspectRatio.value);
+  }
+};
+const toggleLock = () => {
+  lockAspectRatio.value = !lockAspectRatio.value;
+  if (lockAspectRatio.value && aspectRatio.value && width.value) {
+    height.value = Math.round(width.value / aspectRatio.value);
+  }
+};
+const onConfirm = () => {
+  if (!canSubmit.value) return;
+  onDialogOK({
+    source: source.value.trim(),
+    alt: alt.value.trim(),
+    width: width.value,
+    height: height.value
+  });
+};
+</script>
+
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card style="min-width: 560px; max-width: 90vw;">
+      <q-card-section class="text-h6">
+        Insert/Edit Image
+      </q-card-section>
+
+      <q-card-section class="q-gutter-md">
+        <q-input v-model="source" label="Source" outlined dense />
+        <q-input v-model="alt" label="Alternative Description" outlined dense />
+
+        <div class="row items-center q-col-gutter-sm">
+          <div class="col">
+            <q-input
+              :model-value="width"
+              @update:model-value="onWidthInput"
+              type="number"
+              min="1"
+              label="Width"
+              outlined
+              dense
+            />
+          </div>
+          <div class="col-auto">
+            <q-btn
+              flat
+              round
+              :icon="lockAspectRatio ? 'sym_o_lock' : 'sym_o_lock_open'"
+              :color="lockAspectRatio ? 'primary' : 'grey'"
+              @click="toggleLock"
+            >
+              <q-tooltip>Lock Aspect Ratio</q-tooltip>
+            </q-btn>
+          </div>
+          <div class="col">
+            <q-input
+              :model-value="height"
+              @update:model-value="onHeightInput"
+              type="number"
+              min="1"
+              label="Height"
+              outlined
+              dense
+            />
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" @click="onDialogCancel" />
+        <q-btn color="primary" label="Insert" :disable="!canSubmit" @click="onConfirm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

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

@@ -0,0 +1,20 @@
+interface DialogInsertEditImageProps {
+    initialSource?: string;
+    initialAlt?: string;
+    initialWidth?: number | null;
+    initialHeight?: number | null;
+}
+declare const __VLS_export: import("vue").DefineComponent<DialogInsertEditImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<DialogInsertEditImageProps> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {
+    initialSource: string;
+    initialAlt: string;
+    initialWidth: number | null;
+    initialHeight: number | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+interface DialogInsertEditLinkProps {
+    initialUrl?: string;
+    initialText?: string;
+    initialTitle?: string;
+    initialTarget?: '_self' | '_blank';
+}
+declare const __VLS_export: import("vue").DefineComponent<DialogInsertEditLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<DialogInsertEditLinkProps> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {
+    initialUrl: string;
+    initialText: string;
+    initialTitle: string;
+    initialTarget: "_self" | "_blank";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,64 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useDialogPluginComponent } from "quasar";
+const props = defineProps({
+  initialUrl: { type: String, required: false, default: "" },
+  initialText: { type: String, required: false, default: "" },
+  initialTitle: { type: String, required: false, default: "" },
+  initialTarget: { type: String, required: false, default: "_self" }
+});
+defineEmits([
+  ...useDialogPluginComponent.emits
+]);
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+const url = ref(props.initialUrl);
+const text = ref(props.initialText);
+const title = ref(props.initialTitle);
+const target = ref(props.initialTarget);
+const targetOptions = [
+  { label: "Current window", value: "_self" },
+  { label: "New window", value: "_blank" }
+];
+const canSubmit = computed(() => url.value.trim().length > 0);
+const onConfirm = () => {
+  if (!canSubmit.value) return;
+  onDialogOK({
+    url: url.value.trim(),
+    text: text.value.trim(),
+    title: title.value.trim(),
+    target: target.value
+  });
+};
+</script>
+
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card style="min-width: 520px; max-width: 90vw;">
+      <q-card-section class="text-h6">
+        Insert/Edit Link
+      </q-card-section>
+
+      <q-card-section class="q-gutter-md">
+        <q-input v-model="url" label="URL" outlined dense />
+        <q-input v-model="text" label="Text to display" outlined dense />
+        <q-input v-model="title" label="Title" outlined dense />
+        <q-select
+          v-model="target"
+          label="Open link in..."
+          :options="targetOptions"
+          option-label="label"
+          option-value="value"
+          emit-value
+          map-options
+          outlined
+          dense
+        />
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" @click="onDialogCancel" />
+        <q-btn color="primary" label="Insert" :disable="!canSubmit" @click="onConfirm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

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

@@ -0,0 +1,20 @@
+interface DialogInsertEditLinkProps {
+    initialUrl?: string;
+    initialText?: string;
+    initialTitle?: string;
+    initialTarget?: '_self' | '_blank';
+}
+declare const __VLS_export: import("vue").DefineComponent<DialogInsertEditLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<DialogInsertEditLinkProps> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {
+    initialUrl: string;
+    initialText: string;
+    initialTitle: string;
+    initialTarget: "_self" | "_blank";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,9 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,25 @@
+<script setup>
+import { useDialogPluginComponent } from "quasar";
+defineEmits([
+  ...useDialogPluginComponent.emits
+]);
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+const onInput = (value, row) => {
+  onDialogOK({ path: value, row });
+};
+</script>
+
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide" full-height full-width>
+    <q-card style="width: 100%; height: 100%;">
+      <Suspense>
+        <l-file-manager closable @close="onDialogCancel" @input="onInput"></l-file-manager>
+        <template #fallback>
+          <div class="flex flex-center" style="height: 100%;">
+            <q-spinner color="primary" size="3em" />
+          </div>
+        </template>
+      </Suspense>
+    </q-card>
+  </q-dialog>
+</template>

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

@@ -0,0 +1,9 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, useAttrs } from "vue";
+import { computed, defineAsyncComponent, ref, useAttrs } from "vue";
 import { useQuasar } from "quasar";
 import { sanitizeHtml } from "../../composables/sanitizeHtml";
 const $q = useQuasar();
@@ -63,6 +63,197 @@ const insertTableCMD = () => {
   edit.runCmd("insertHTML", tableHTML);
   edit.focus();
 };
+const toAbsoluteUrl = (value) => {
+  const url = value?.trim();
+  if (!url) return "";
+  if (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("//") || url.startsWith("data:") || url.startsWith("blob:")) {
+    return url;
+  }
+  return url.startsWith("/") ? `${window.location.origin}${url}` : `${window.location.origin}/${url}`;
+};
+const buildLinkHtml = (payload) => {
+  const anchor = document.createElement("a");
+  anchor.href = payload.url.trim();
+  anchor.textContent = payload.text?.trim() || payload.url.trim();
+  if (payload.title?.trim()) anchor.title = payload.title.trim();
+  if (payload.target === "_blank") {
+    anchor.target = "_blank";
+    anchor.rel = "noopener noreferrer";
+  }
+  return anchor.outerHTML;
+};
+const buildImageHtml = (payload) => {
+  const image = document.createElement("img");
+  image.setAttribute("src", payload.source.trim());
+  if (payload.alt?.trim()) image.setAttribute("alt", payload.alt.trim());
+  const width = Number(payload.width);
+  if (Number.isFinite(width) && width > 0) {
+    image.setAttribute("width", String(Math.round(width)));
+  }
+  const height = Number(payload.height);
+  if (Number.isFinite(height) && height > 0) {
+    image.setAttribute("height", String(Math.round(height)));
+  }
+  return image.outerHTML;
+};
+const selectedImageNode = ref(null);
+const selectedLinkNode = ref(null);
+const updateSelectionState = (e) => {
+  let target = e?.target;
+  if (target instanceof HTMLImageElement) {
+    selectedImageNode.value = target;
+    selectedLinkNode.value = target.closest("a");
+    return;
+  }
+  if (target && target.closest) {
+    const anchor = target.closest("a");
+    if (anchor) {
+      selectedLinkNode.value = anchor;
+      selectedImageNode.value = null;
+      return;
+    }
+  }
+  const selection = window.getSelection();
+  if (!selection || !selection.rangeCount) {
+    selectedLinkNode.value = null;
+    selectedImageNode.value = null;
+    return;
+  }
+  let node = selection.focusNode;
+  if (!node) return;
+  let el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+  selectedLinkNode.value = el?.closest("a");
+  if (el instanceof HTMLImageElement) {
+    selectedImageNode.value = el;
+  } else if (el && selection.anchorNode === selection.focusNode) {
+    const offset = selection.focusOffset;
+    if (el.childNodes.length > offset) {
+      const child = el.childNodes[offset];
+      if (child instanceof HTMLImageElement) {
+        selectedImageNode.value = child;
+        return;
+      }
+    }
+    const anchorOffset = selection.anchorOffset;
+    if (el.childNodes.length > anchorOffset) {
+      const child = el.childNodes[anchorOffset];
+      if (child instanceof HTMLImageElement) {
+        selectedImageNode.value = child;
+        return;
+      }
+    }
+    selectedImageNode.value = null;
+  } else {
+    selectedImageNode.value = null;
+  }
+};
+const onEditorClick = (e) => {
+  updateSelectionState(e);
+};
+const onEditorDblClick = (e) => {
+  updateSelectionState(e);
+  if (selectedImageNode.value) {
+    insertEditImageCMD();
+  } else if (selectedLinkNode.value) {
+    insertEditLinkCMD();
+  }
+};
+const openInsertEditImageDialog = (initialSource = "", skipSaveCaret = false) => {
+  const edit = editorRef.value;
+  if (!skipSaveCaret) {
+    edit.caret.save();
+  }
+  let initialAlt = "";
+  let initialWidth = null;
+  let initialHeight = null;
+  if (selectedImageNode.value && !initialSource) {
+    initialSource = selectedImageNode.value.getAttribute("src") || "";
+    initialAlt = selectedImageNode.value.getAttribute("alt") || "";
+    initialWidth = selectedImageNode.value.getAttribute("width") || selectedImageNode.value.clientWidth;
+    initialHeight = selectedImageNode.value.getAttribute("height") || selectedImageNode.value.clientHeight;
+  }
+  $q.dialog({
+    component: defineAsyncComponent(() => import("./DialogInsertEditImage.vue")),
+    componentProps: { initialSource, initialAlt, initialWidth, initialHeight }
+  }).onOk((payload) => {
+    if (!payload?.source?.trim()) return;
+    setTimeout(() => {
+      edit.focus();
+      edit.caret.restore();
+      if (selectedImageNode.value && !skipSaveCaret) {
+        selectedImageNode.value.setAttribute("src", payload.source.trim());
+        if (payload.alt?.trim()) selectedImageNode.value.setAttribute("alt", payload.alt.trim());
+        else selectedImageNode.value.removeAttribute("alt");
+        if (payload.width) selectedImageNode.value.setAttribute("width", String(Math.round(payload.width)));
+        else selectedImageNode.value.removeAttribute("width");
+        if (payload.height) selectedImageNode.value.setAttribute("height", String(Math.round(payload.height)));
+        else selectedImageNode.value.removeAttribute("height");
+        emit("update:modelValue", edit.$el.querySelector(".q-editor__content").innerHTML);
+      } else {
+        edit.runCmd("insertHTML", buildImageHtml(payload));
+      }
+    }, 100);
+  });
+};
+const insertEditLinkCMD = () => {
+  const edit = editorRef.value;
+  edit.caret.save();
+  let initialUrl = "";
+  let initialText = window.getSelection()?.toString() || "";
+  let initialTitle = "";
+  let initialTarget = "_self";
+  if (selectedLinkNode.value) {
+    initialUrl = selectedLinkNode.value.getAttribute("href") || "";
+    initialText = selectedLinkNode.value.textContent || initialText;
+    initialTitle = selectedLinkNode.value.getAttribute("title") || "";
+    initialTarget = selectedLinkNode.value.getAttribute("target") === "_blank" ? "_blank" : "_self";
+  }
+  $q.dialog({
+    component: defineAsyncComponent(() => import("./DialogInsertEditLink.vue")),
+    componentProps: { initialUrl, initialText, initialTitle, initialTarget }
+  }).onOk((payload) => {
+    if (!payload?.url?.trim()) return;
+    setTimeout(() => {
+      edit.focus();
+      edit.caret.restore();
+      if (selectedLinkNode.value) {
+        selectedLinkNode.value.setAttribute("href", payload.url.trim());
+        selectedLinkNode.value.textContent = payload.text?.trim() || payload.url.trim();
+        if (payload.title?.trim()) selectedLinkNode.value.setAttribute("title", payload.title.trim());
+        else selectedLinkNode.value.removeAttribute("title");
+        if (payload.target === "_blank") {
+          selectedLinkNode.value.setAttribute("target", "_blank");
+          selectedLinkNode.value.setAttribute("rel", "noopener noreferrer");
+        } else {
+          selectedLinkNode.value.removeAttribute("target");
+          selectedLinkNode.value.removeAttribute("rel");
+        }
+        emit("update:modelValue", edit.$el.querySelector(".q-editor__content").innerHTML);
+      } else {
+        edit.runCmd("insertHTML", buildLinkHtml(payload));
+      }
+    }, 100);
+  });
+};
+const insertEditImageCMD = () => {
+  openInsertEditImageDialog();
+};
+const insertImageFromFileManagerCMD = () => {
+  const edit = editorRef.value;
+  edit.caret.save();
+  $q.dialog({
+    component: defineAsyncComponent(() => import("./DialogSelectFileFromFileManager.vue"))
+  }).onOk((result) => {
+    if (!result?.path?.trim()) return;
+    let url = "";
+    if (result.row && result.row.publicUrl) {
+      url = result.row.publicUrl;
+    } else {
+      url = toAbsoluteUrl(result.path);
+    }
+    openInsertEditImageDialog(url, true);
+  });
+};
 const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
   fullscreen: { type: Boolean, required: false, skipCheck: true },
@@ -109,6 +300,10 @@ const attrs = computed(() => {
   const a = { ...props };
   if (props.toolbar === void 0) a.toolbar = newToolBar;
   if (props.fonts === void 0) a.fonts = newFonts;
+  a.definitions = {
+    ...newDefinitions,
+    ...props.definitions
+  };
   return a;
 });
 const newToolBar = [
@@ -128,7 +323,7 @@ const newToolBar = [
     }
   ],
   ["bold", "italic", "strike", "underline", "subscript", "superscript"],
-  ["token", "hr", "link"],
+  ["token", "hr", "insertEditLink", "insertEditImage", "insertImageFromFileManager"],
   //['print'],
   ["fullscreen"],
   [
@@ -185,10 +380,49 @@ const newFonts = {
   times_new_roman: "Times New Roman",
   verdana: "Verdana"
 };
+const newDefinitions = {
+  insertEditLink: {
+    tip: "Insert/Edit Link",
+    icon: "sym_o_link",
+    handler: insertEditLinkCMD
+  },
+  insertEditImage: {
+    tip: "Insert/Edit Image",
+    icon: "sym_o_add_photo_alternate",
+    handler: insertEditImageCMD
+  },
+  insertImageFromFileManager: {
+    tip: "Insert image from FileManager",
+    icon: "sym_o_folder_open",
+    handler: insertImageFromFileManagerCMD
+  }
+};
 </script>
 
 <template>
-    <q-editor v-model="localValue" ref="editorRef" v-bind="attrs" @blur="onEditorBlur">
+    <q-editor v-model="localValue" ref="editorRef" v-bind="attrs" @blur="onEditorBlur" @click="onEditorClick" @keyup="onEditorClick" @dblclick="onEditorDblClick">
+                                <template v-slot:insertEditImage>
+            <q-btn dense no-caps no-wrap
+                :flat="!selectedImageNode"
+                :unelevated="!!selectedImageNode"
+                :color="selectedImageNode ? 'primary' : 'grey-8'" 
+                icon="sym_o_add_photo_alternate" 
+                size="sm" 
+                @click="insertEditImageCMD">
+                <q-tooltip>Insert/Edit Image</q-tooltip>
+            </q-btn>
+        </template>
+        <template v-slot:insertEditLink>
+            <q-btn dense no-caps no-wrap
+                :flat="!selectedLinkNode"
+                :unelevated="!!selectedLinkNode"
+                :color="selectedLinkNode ? 'primary' : 'grey-8'" 
+                icon="sym_o_link" 
+                size="sm" 
+                @click="insertEditLinkCMD">
+                <q-tooltip>Insert/Edit Link</q-tooltip>
+            </q-btn>
+        </template>
         <template v-slot:fontSize>
             <q-btn-dropdown dense no-caps ref="fontSizeRef" no-wrap unelevated color="white" text-color="default"
                 label="Font Size" icon="sym_o_format_size" size="sm">
@@ -210,18 +444,6 @@ const newFonts = {
                     </q-item-section>
                     <q-item-section>
                         <q-color v-model="foreColor" no-header no-footer style="max-width: 250px;" />
-                        <!-- :palette="[
-                                '#ff0000',
-                                '#ff8000',
-                                '#ffff00',
-                                '#00ff00',
-                                '#00ff80',
-                                '#00ffff',
-                                '#0080ff',
-                                '#0000ff',
-                                '#8000ff',
-                                '#ff00ff'
-                            ]" -->
                     </q-item-section>
                 </q-item>
             </q-btn-dropdown>

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

@@ -167,7 +167,7 @@ const onDblclickRow = (evt, row, index) => {
     return;
   }
   if (row.__typename == "File") {
-    emit("input", row.path);
+    emit("input", row.path, row);
   }
 };
 const findFolder = (path, folders2) => {

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/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/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.68.0",
+  "version": "1.70.1",
   "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"
   }
 }