@hostlink/nuxt-light 1.65.0 → 1.66.2

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

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

package/dist/runtime/components/{l-dialog-database-field-add.vue → L/DialogDatabaseFieldAdd.vue}

@@ -1,44 +1,43 @@
 <script setup>
 import { useDialogPluginComponent } from "quasar";
 const props = defineProps({
-  // ...your custom props
+  field: {
+    type: Object,
+    default: null
+  }
 });
-defineEmits([
-  // REQUIRED; need to specify some events that your
-  // component will emit through useDialogPluginComponent()
-  ...useDialogPluginComponent.emits
-]);
+defineEmits([...useDialogPluginComponent.emits]);
 const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
 function onOKClick(value) {
   onDialogOK(value);
 }
 const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text", "blob", "json", "jsonb", "uuid", "boolean", "decimal", "float", "double", "real", "numeric", "smallint", "bigint", "tinyint", "mediumint", "char", "binary", "varbinary", "enum"];
+const isEdit = !!props.field;
 </script>
 
 <template>
     <q-dialog ref="dialogRef">
         <q-card class="q-dialog-plugin">
             <q-toolbar>
-                <q-toolbar-title>Add Field</q-toolbar-title>
+                <q-toolbar-title>{{ isEdit ? 'Edit Field' : 'Add Field' }}</q-toolbar-title>
                 <q-space />
                 <q-btn dense flat icon="sym_o_close" v-close-popup />
             </q-toolbar>
             <form-kit type="l-form" :bordered="false" @submit="onOKClick" :value="{
-                name: '',
-                type: '',
-                length: '',
-                default: '',
-                nullable: false,
-                autoincrement: false
+                name: field?.name ?? '',
+                type: field?.type ?? '',
+                length: field?.length ?? '',
+                default: field?.default ?? '',
+                nullable: field?.nullable ?? false,
+                autoincrement: field?.autoincrement ?? false
             }">
-                <form-kit type="l-input" name="name" label="Name" validation="required" />
+                <form-kit type="l-input" name="name" label="Name" validation="required" :disabled="isEdit" />
                 <form-kit type="l-select" name="type" label="Type" :options="types" validation="required" />
                 <form-kit type="l-input" name="length" label="Length" />
                 <form-kit type="l-input" name="default" label="Default" />
                 <form-kit type="l-checkbox" name="nullable" label="Nullable" />
                 <form-kit type="l-checkbox" name="autoincrement" label="Auto increment" />
             </form-kit>
-
         </q-card>
     </q-dialog>
 </template>

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

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

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

@@ -0,0 +1,50 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    width: string;
+    height: string;
+    fit: "fill" | "none" | "contain" | "cover" | "scale-down";
+    mimeType: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,154 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  mimeType: {
+    type: String,
+    default: ""
+  },
+  // 圖片/視頻的寬高
+  width: {
+    type: String,
+    default: "100%"
+  },
+  height: {
+    type: String,
+    default: "500px"
+  },
+  // 圖片的 fit 模式
+  fit: {
+    type: String,
+    default: "contain"
+  }
+});
+const textContent = ref("");
+const isLoading = ref(false);
+const error = ref(null);
+const fileType = computed(() => {
+  const mime = props.mimeType.toLowerCase();
+  if (mime.startsWith("image/")) return "image";
+  if (mime.startsWith("video/")) return "video";
+  if (mime.startsWith("audio/")) return "audio";
+  if (mime === "application/pdf") return "pdf";
+  if (mime.startsWith("text/") || mime === "application/json") return "text";
+  if (mime.includes("word") || mime.includes("spreadsheet") || mime.includes("presentation") || mime.includes("excel") || mime.includes("powerpoint") || mime.includes("msword") || mime.includes("officedocument")) {
+    return "office";
+  }
+  return "unknown";
+});
+const officeViewerUrl = computed(() => {
+  if (fileType.value === "office") {
+    return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(props.url)}`;
+  }
+  return "";
+});
+const loadTextContent = async () => {
+  if (fileType.value !== "text") return;
+  isLoading.value = true;
+  error.value = null;
+  try {
+    const response = await fetch(props.url);
+    if (!response.ok) throw new Error("\u7121\u6CD5\u8F09\u5165\u6587\u4EF6");
+    textContent.value = await response.text();
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "\u8F09\u5165\u5931\u6557";
+  } finally {
+    isLoading.value = false;
+  }
+};
+watch(() => [props.url, fileType.value], () => {
+  if (fileType.value === "text") {
+    loadTextContent();
+  }
+}, { immediate: true });
+</script>
+
+<template>
+    <div class="l-document-viewer">
+        <!-- 圖片預覽 -->
+        <q-img
+            v-if="fileType === 'image'"
+            :src="url"
+            :fit="fit"
+            :style="{ width, height }"
+            spinner-color="primary"
+        >
+            <template #error>
+                <div class="absolute-full flex flex-center bg-negative text-white">
+                    無法載入圖片
+                </div>
+            </template>
+        </q-img>
+
+        <!-- 視頻預覽 -->
+        <q-video
+            v-else-if="fileType === 'video'"
+            :src="url"
+            :style="{ width, height }"
+        />
+
+        <!-- 音頻預覽 -->
+        <audio
+            v-else-if="fileType === 'audio'"
+            :src="url"
+            controls
+            style="width: 100%"
+        >
+            您的瀏覽器不支援音頻播放
+        </audio>
+
+        <!-- PDF 預覽 -->
+        <iframe
+            v-else-if="fileType === 'pdf'"
+            :src="url"
+            :style="{ width, height, border: 'none' }"
+            title="PDF Viewer"
+        />
+
+        <!-- 文字預覽 (txt, json 等) -->
+        <div v-else-if="fileType === 'text'" class="text-viewer" :style="{ height }">
+            <q-spinner v-if="isLoading" color="primary" size="3em" />
+            <q-banner v-else-if="error" class="bg-negative text-white">
+                {{ error }}
+            </q-banner>
+            <pre v-else class="text-content">{{ textContent }}</pre>
+        </div>
+
+        <!-- Office 文件預覽 -->
+        <iframe
+            v-else-if="fileType === 'office'"
+            :src="officeViewerUrl"
+            :style="{ width, height, border: 'none' }"
+            title="Office Viewer"
+        />
+
+        <!-- 不支援的類型 -->
+        <div v-else class="unsupported flex flex-center" :style="{ height }">
+            <div class="text-center">
+                <q-icon name="sym_r_description" size="64px" color="grey-5" />
+                <div class="text-grey-7 q-mt-md">
+                    不支援預覽此文件類型
+                </div>
+                <div class="text-caption text-grey-5">
+                    {{ mimeType || "\u672A\u77E5\u985E\u578B" }}
+                </div>
+                <q-btn
+                    class="q-mt-md"
+                    color="primary"
+                    icon="sym_r_download"
+                    label="下載文件"
+                    :href="url"
+                    target="_blank"
+                    outline
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.l-document-viewer{width:100%}.text-viewer{background:#f5f5f5;border-radius:4px;overflow:auto;padding:16px}.text-content{margin:0;white-space:pre-wrap;word-wrap:break-word;font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.5}.unsupported{background:#fafafa;border:1px dashed #e0e0e0;border-radius:8px}
+</style>

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

@@ -0,0 +1,50 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    width: string;
+    height: string;
+    fit: "fill" | "none" | "contain" | "cover" | "scale-down";
+    mimeType: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,65 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {
+    width: string;
+    height: string;
+    title: string;
+    fit: "fill" | "none" | "contain" | "cover" | "scale-down";
+    mimeType: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,67 @@
+<script setup>
+import { useDialogPluginComponent } from "quasar";
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  mimeType: {
+    type: String,
+    default: ""
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  // 圖片/視頻的寬高
+  width: {
+    type: String,
+    default: "100%"
+  },
+  height: {
+    type: String,
+    default: "70vh"
+  },
+  // 圖片的 fit 模式
+  fit: {
+    type: String,
+    default: "contain"
+  }
+});
+defineEmits([
+  // REQUIRED; need to specify some events that your
+  // component will emit through useDialogPluginComponent()
+  ...useDialogPluginComponent.emits
+]);
+const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide" full-width >
+        <q-card class="q-dialog-plugin" :bordered="false" square>
+            <q-toolbar class="bg-primary text-white">
+                <q-toolbar-title>{{ title || "\u6587\u4EF6\u9810\u89BD" }}</q-toolbar-title>
+                <q-space />
+                <q-btn
+                    :href="url"
+                    target="_blank"
+                    dense
+                    flat
+                    icon="sym_o_download"
+                    title="下載"
+                />
+                <q-btn dense flat icon="sym_o_close" v-close-popup />
+            </q-toolbar>
+
+            <q-card-section class="q-pa-md">
+                <LDocumentViewer
+                    :url="url"
+                    :mime-type="mimeType"
+                    :width="width"
+                    :height="height"
+                    :fit="fit"
+                />
+            </q-card-section>
+        </q-card>
+    </q-dialog>
+</template>

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

@@ -0,0 +1,65 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {
+    width: string;
+    height: string;
+    title: string;
+    fit: "fill" | "none" | "contain" | "cover" | "scale-down";
+    mimeType: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/{l-editor.vue → L/Editor.vue}

@@ -1,12 +1,29 @@
 <script setup>
 import { computed, ref, useAttrs } from "vue";
 import { useQuasar } from "quasar";
-import { sanitizeHtml } from "../composables/sanitizeHtml";
+import { sanitizeHtml } from "../../composables/sanitizeHtml";
 const $q = useQuasar();
 const editorRef = ref(null);
 const textColorRef = ref(null);
 const textHightlightRef = ref(null);
 const insertTableRef = ref(null);
+const fontSizeRef = ref(null);
+const fontSizes = ["8px", "10px", "12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px", "48px", "72px"];
+const setFontSizeCMD = (size) => {
+  const edit = editorRef.value;
+  fontSizeRef.value.hide();
+  edit.caret.restore();
+  document.execCommand("fontSize", false, "7");
+  const contentEl = edit.$el.querySelector(".q-editor__content");
+  contentEl.querySelectorAll('font[size="7"]').forEach((el) => {
+    const span = document.createElement("span");
+    span.style.fontSize = size;
+    span.innerHTML = el.innerHTML;
+    el.parentNode.replaceChild(span, el);
+  });
+  emit("update:modelValue", contentEl.innerHTML);
+  edit.focus();
+};
 const highlight = ref("#ffff00aa");
 const foreColor = ref("#000000");
 const tableRows = ref(3);
@@ -130,22 +147,7 @@ const newToolBar = [
         "code"
       ]
     },
-    {
-      label: $q.lang.editor.fontSize,
-      icon: $q.iconSet.editor.fontSize,
-      fixedLabel: true,
-      fixedIcon: true,
-      list: "no-icons",
-      options: [
-        "size-1",
-        "size-2",
-        "size-3",
-        "size-4",
-        "size-5",
-        "size-6",
-        "size-7"
-      ]
-    },
+    "fontSize",
     {
       label: $q.lang.editor.defaultFont,
       icon: $q.iconSet.editor.font,
@@ -187,6 +189,18 @@ const newFonts = {
 
 <template>
     <q-editor v-model="localValue" ref="editorRef" v-bind="attrs" @blur="onEditorBlur">
+        <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">
+                <q-list dense>
+                    <q-item v-for="size in fontSizes" :key="size" clickable v-close-popup @click="setFontSizeCMD(size)">
+                        <q-item-section>
+                            <span :style="{ fontSize: size }">{{ size }}</span>
+                        </q-item-section>
+                    </q-item>
+                </q-list>
+            </q-btn-dropdown>
+        </template>
         <template v-slot:textColor>
             <q-btn-dropdown dense no-caps ref="textColorRef" no-wrap unelevated color="white" text-color="default"
                 label="Text Color" icon="sym_o_format_color_text" size="sm">

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

@@ -1,31 +1,19 @@
+type __VLS_Props = {
+    gutter?: string;
+    label?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    gutter: string;
+}, {}, {}, {}, 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;
-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").ExtractPropTypes<{
-    gutter: {
-        type: StringConstructor;
-        default: string;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
     };
-    label: {
-        type: StringConstructor;
-        default: null;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    gutter: {
-        type: StringConstructor;
-        default: string;
-    };
-    label: {
-        type: StringConstructor;
-        default: null;
-    };
-}>> & Readonly<{}>, {
-    label: string;
-    gutter: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
 };