@duxweb/dvha-pro 1.0.23 → 1.0.25

package/dist/esm/components/upload/file.js

@@ -1,12 +1,23 @@
-import { defineComponent as k, ref as D, computed as m, watch as M, createVNode as o, Fragment as U, createTextVNode as w, isVNode as A } from "vue";
+import { defineComponent as M, ref as v, computed as s, watch as h, createVNode as o, Fragment as A, createTextVNode as U, isVNode as w } from "vue";
 import { useI18n as Z, useUpload as j } from "@duxweb/dvha-core";
 import { useVModel as O, useDropZone as B } from "@vueuse/core";
 import X from "mime";
-import { useMessage as E, NDataTable as L, NProgress as T, NButton as x } from "naive-ui";
+import { useMessage as E, NDataTable as L, NProgress as T, NButton as b } from "naive-ui";
 import "vue-router";
 import "@overlastic/vue";
 import { DuxMedia as I } from "../media/media.js";
 import "vue-echarts";
+import "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-vue";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-json5";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/ext-searchbox";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-snippets";
 import "vue-cropper";
 import "clsx";
 import "jinrishici";
@@ -27,26 +38,17 @@ import "vue-command-palette";
 import "@duxweb/dvha-naiveui";
 import "../../pages/page404.js";
 import "@iconify-json/tabler/icons.json";
+import "../image/elements/index.js";
+import "fabric";
 import { useUploadConfig as W } from "./config.js";
-import "vue3-ace-editor";
-import "ace-builds/src-noconflict/mode-vue";
-import "ace-builds/src-noconflict/mode-javascript";
-import "ace-builds/src-noconflict/mode-html";
-import "ace-builds/src-noconflict/mode-json";
-import "ace-builds/src-noconflict/mode-json5";
-import "ace-builds/src-noconflict/theme-tomorrow_night";
-import "ace-builds/src-noconflict/theme-tomorrow";
-import "ace-builds/src-noconflict/ext-searchbox";
-import "ace-builds/src-noconflict/ext-language_tools";
-import "ace-builds/src-noconflict/mode-snippets";
 import { useModal as G } from "../../hooks/modal.js";
 import "dayjs";
 import "@tanstack/vue-query";
 import "pinia";
-function h(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !A(e);
+function y(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !w(t);
 }
-const d = {
+const m = {
   "image/*": "JPG, PNG, GIF, BMP, WEBP",
   "video/*": "MP4, AVI, MOV, WMV, FLV",
   "audio/*": "MP3, WAV, AAC, FLAC",
@@ -56,7 +58,7 @@ const d = {
   "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
   "application/vnd.ms-excel": "XLS",
   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX"
-}, n = {
+}, r = {
   container: "flex flex-col gap-2",
   dropZone: {
     base: "flex items-center justify-center p-6 rounded bg-muted border border-dashed transition-all cursor-pointer group",
@@ -77,7 +79,7 @@ const d = {
     empty: "flex items-center justify-center h-full text-muted",
     actions: "flex gap-2"
   }
-}, Oe = /* @__PURE__ */ k({
+}, Xe = /* @__PURE__ */ M({
   name: "DuxFileUpload",
   props: {
     path: {
@@ -106,58 +108,57 @@ const d = {
     defaultValue: [String, Array],
     onUpdateValue: Function
   },
-  setup(e, {
-    emit: v
+  setup(t, {
+    emit: F
   }) {
-    const b = O(e, "value", v, {
+    const c = O(t, "value", F, {
       passive: !0,
       deep: !0,
-      defaultValue: e.defaultValue
-    }), y = E(), {
+      defaultValue: t.defaultValue
+    }), P = E(), {
       t: a
-    } = Z(), u = D(), c = m(() => e.maxSize || 5), F = G(), {
-      uploadPath: p,
-      managePath: P,
-      driver: C
+    } = Z(), d = v(), p = s(() => t.maxSize || 5), C = G(), {
+      uploadPath: u,
+      managePath: S,
+      driver: N
     } = W({
-      driver: e == null ? void 0 : e.driver,
-      signPath: e == null ? void 0 : e.signPath,
-      signCallback: e == null ? void 0 : e.signCallback,
-      uploadPath: e == null ? void 0 : e.path,
-      managePath: e == null ? void 0 : e.managePath
-    }), r = j({
-      path: p.value,
-      multiple: e.multiple,
-      maxFileCount: e.maxNum,
-      maxFileSize: c.value * 1024 * 1024,
+      driver: t?.driver,
+      signPath: t?.signPath,
+      signCallback: t?.signCallback,
+      uploadPath: t?.path,
+      managePath: t?.managePath
+    }), n = j({
+      path: u.value,
+      multiple: t.multiple,
+      maxFileCount: t.maxNum,
+      maxFileSize: p.value * 1024 * 1024,
       autoUpload: !0,
-      accept: e.accept,
-      onError: (t) => y.error(t.message || a("components.upload.error")),
-      driver: C.value
+      accept: t.accept,
+      onError: (e) => P.error(e.message || a("components.upload.error")),
+      driver: N.value
     }), {
       isOverDropZone: f
-    } = B(u, {
-      onDrop: (t) => {
-        t && t.length > 0 && r.addFiles(Array.from(t), "file");
+    } = B(d, {
+      onDrop: (e) => {
+        e && e.length > 0 && n.addFiles(Array.from(e), "file");
       }
     });
-    M(r.dataFiles, (t) => {
-      var l, s;
-      const i = e.multiple ? t == null ? void 0 : t.map((z) => z.url) : (l = t == null ? void 0 : t[0]) == null ? void 0 : l.url;
-      b.value = i, (s = e.onUpdateValue) == null || s.call(e, i);
+    h(n.dataFiles, (e) => {
+      const i = t.multiple ? e : e[0];
+      c.value = i, t.onUpdateValue?.(i);
     });
-    const g = m(() => e.accept ? e.accept.split(",").map((t) => {
-      const i = t.trim();
-      if (d[i]) return d[i];
+    const g = s(() => t.accept ? t.accept.split(",").map((e) => {
+      const i = e.trim();
+      if (m[i]) return m[i];
       if (i.includes("*")) {
-        const s = i.split("/")[0];
-        return d[i] || a("common.fileExtension", {
-          ext: s.toUpperCase()
+        const D = i.split("/")[0];
+        return m[i] || a("common.fileExtension", {
+          ext: D.toUpperCase()
         });
       }
       const l = X.getExtension(i);
       return l ? l.toUpperCase() : i;
-    }).filter(Boolean).join(", ") : ""), S = m(() => ({
+    }).filter(Boolean).join(", ") : ""), V = s(() => ({
       pending: o("div", {
         class: "text-info"
       }, [a("components.upload.status.pending")]),
@@ -170,58 +171,66 @@ const d = {
       error: o("div", {
         class: "text-error"
       }, [a("components.upload.status.error")])
-    })), N = m(() => [n.dropZone.base, f.value ? n.dropZone.active : n.dropZone.hover]), V = m(() => [r.uploadFiles.value.length === 0 && "border-b border-muted"]);
-    return () => o("div", {
-      class: n.container
+    })), z = s(() => [r.dropZone.base, f.value ? r.dropZone.active : r.dropZone.hover]), k = s(() => [n.uploadFiles.value.length === 0 && "border-b border-muted"]), x = v(!1);
+    return h(c, (e) => {
+      if (!e || !e?.length || x.value)
+        return;
+      x.value = !0;
+      const i = Array.isArray(e) ? e : [e];
+      n.addDataFiles(i);
+    }, {
+      immediate: !0
+    }), () => o("div", {
+      class: r.container
     }, [o("div", {
-      ref: u,
-      class: N.value,
-      onClick: () => r.open()
+      ref: d,
+      class: z.value,
+      onClick: () => n.open()
     }, [o("div", {
-      class: n.content
+      class: r.content
     }, [o("div", {
-      class: n.icon.wrapper,
-      onClick: (t) => {
-        e.manager && (t.stopPropagation(), F.show({
+      class: r.icon.wrapper,
+      onClick: (e) => {
+        t.manager && (e.stopPropagation(), C.show({
           title: a("components.upload.title"),
           width: 800,
           component: () => import("./manager.js"),
           componentProps: {
-            path: P.value,
-            multiple: e.multiple,
+            path: S.value,
+            multiple: t.multiple,
             uploadParams: {
-              path: p.value,
-              accept: e.accept,
-              maxNum: e.maxNum,
-              maxSize: c.value
+              path: u.value,
+              accept: t.accept,
+              maxNum: t.maxNum,
+              maxSize: p.value
             }
           }
         }).then((i) => {
-          r.addDataFiles(i);
+          n.addDataFiles(i);
         }));
       }
     }, [o("div", {
-      class: n.icon.icon
+      class: r.icon.icon
     }, null)]), o("div", {
-      class: n.text.title
+      class: r.text.title
     }, [a("components.upload.desc")]), o("div", {
-      class: n.text.desc
+      class: r.text.desc
     }, [f.value ? o("span", {
-      class: n.text.highlight
-    }, [a("components.upload.dropHere")]) : o(U, null, [g.value ? a("components.upload.supportFormats", {
+      class: r.text.highlight
+    }, [a("components.upload.dropHere")]) : o(A, null, [g.value ? a("components.upload.supportFormats", {
       formats: g.value
-    }) : a("components.upload.allFormats"), w(","), " ", a("components.upload.maxSize", {
-      size: c.value
+    }) : a("components.upload.allFormats"), U(","), " ", a("components.upload.maxSize", {
+      size: p.value
     })])])])]), o(L, {
       bordered: !1,
-      class: V.value,
+      class: k.value,
       columns: [{
         key: "filename",
         title: a("components.upload.file.name"),
         minWidth: 200,
-        render: (t) => o(I, {
-          title: t.filename,
-          desc: t.filetype
+        render: (e) => o(I, {
+          title: e.filename,
+          desc: e.filetype
         }, null)
       }, {
         key: "filesizeText",
@@ -231,55 +240,52 @@ const d = {
         key: "status",
         title: a("components.upload.file.status"),
         width: 120,
-        render: (t) => {
-          var i;
-          return t.status === "uploading" ? o(T, {
-            type: "line",
-            style: {
-              width: "24px",
-              height: "24px"
-            },
-            color: "rgb(var(--ui-color-primary))",
-            "indicator-placement": "inside",
-            percentage: (i = t.progress) == null ? void 0 : i.percent,
-            showIndicator: !1,
-            height: 14
-          }, null) : S.value[t.status];
-        }
+        render: (e) => e.status === "uploading" ? o(T, {
+          type: "line",
+          style: {
+            width: "24px",
+            height: "24px"
+          },
+          color: "rgb(var(--ui-color-primary))",
+          "indicator-placement": "inside",
+          percentage: e.progress?.percent,
+          showIndicator: !1,
+          height: 14
+        }, null) : V.value[e.status]
       }, {
         key: "actions",
         title: a("components.upload.actions"),
         width: 120,
-        render: (t) => {
+        render: (e) => {
           let i, l;
           return o("div", {
-            class: n.table.actions
-          }, [o(x, {
+            class: r.table.actions
+          }, [o(b, {
             type: "warning",
             size: "small",
             text: !0,
-            disabled: ["success", "error", "cancelled"].includes(t.status),
-            onClick: () => r.cancelFiles([t.id])
-          }, h(i = a("components.upload.cancel")) ? i : {
+            disabled: ["success", "error", "cancelled"].includes(e.status),
+            onClick: () => n.cancelFiles([e.id])
+          }, y(i = a("components.upload.cancel")) ? i : {
             default: () => [i]
-          }), o(x, {
+          }), o(b, {
             type: "error",
             size: "small",
             text: !0,
-            onClick: () => r.removeFiles([t.id])
-          }, h(l = a("components.upload.delete")) ? l : {
+            onClick: () => n.removeFiles([e.id])
+          }, y(l = a("components.upload.delete")) ? l : {
             default: () => [l]
           })]);
         }
       }],
-      data: r.uploadFiles.value
+      data: n.uploadFiles.value
     }, {
       empty: () => o("div", {
-        class: n.table.empty
+        class: r.table.empty
       }, [a("components.upload.empty")])
     })]);
   }
 });
 export {
-  Oe as DuxFileUpload
+  Xe as DuxFileUpload
 };