@duxweb/dvha-pro 1.0.24 → 1.0.25

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

@@ -1,12 +1,23 @@
-import { defineComponent as F, computed as i, watch as N, createVNode as t } from "vue";
-import { useI18n as S, useUpload as U } from "@duxweb/dvha-core";
-import { useVModel as k } from "@vueuse/core";
-import w from "clsx";
-import { useMessage as I, NImage as V, NButton as s, NProgress as j } from "naive-ui";
+import { defineComponent as S, computed as n, watch as c, ref as U, createVNode as a } from "vue";
+import { useI18n as k, useUpload as w } from "@duxweb/dvha-core";
+import { useVModel as I } from "@vueuse/core";
+import V from "clsx";
+import { useMessage as j, NImage as A, NButton as p, NProgress as D } from "naive-ui";
 import { VueDraggable as B } from "vue-draggable-plus";
 import "vue-router";
 import "@overlastic/vue";
 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 "jinrishici";
 import "lodash-es";
@@ -25,25 +36,16 @@ 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 "mime";
-import { useUploadConfig as D } 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 A } from "../../hooks/modal.js";
+import { useUploadConfig as M } from "./config.js";
+import { useModal as L } from "../../hooks/modal.js";
 import "dayjs";
-import { useImagePreview as M } from "../../hooks/image.js";
+import { useImagePreview as O } from "../../hooks/image.js";
 import "@tanstack/vue-query";
 import "pinia";
-const ke = /* @__PURE__ */ F({
+const je = /* @__PURE__ */ S({
   name: "DuxImageUpload",
   props: {
     path: {
@@ -74,16 +76,16 @@ const ke = /* @__PURE__ */ F({
     defaultValue: [String, Array],
     onUpdateValue: Function
   },
-  setup(e, {
-    emit: d
+  setup(t, {
+    emit: g
   }) {
-    const c = k(e, "value", d, {
+    const u = I(t, "value", g, {
       passive: !0,
       deep: !0,
-      defaultValue: e.defaultValue
-    }), p = I(), g = M(), {
-      t: u
-    } = S(), l = {
+      defaultValue: t.defaultValue
+    }), v = j(), f = O(), {
+      t: m
+    } = k(), o = {
       container: "flex gap-2",
       imageItem: "size-80px rounded border border-muted relative group draggable flex items-center",
       imageOverlay: "z-1 size-full inset-0 absolute flex items-center justify-center bg-default/80 transition-all opacity-0 group-hover:opacity-100 rounded",
@@ -91,122 +93,132 @@ const ke = /* @__PURE__ */ F({
       uploadContent: "flex-1 flex flex-col justify-center items-center gap-1 relative",
       progressContainer: "size-80px flex items-center justify-center rounded",
       progressBar: "absolute left-2 right-2 bottom-2"
-    }, v = i(() => e.maxSize), {
-      uploadPath: m,
-      managePath: h,
-      driver: f
-    } = D({
-      driver: e?.driver,
-      signPath: e?.signPath,
-      signCallback: e?.signCallback,
-      uploadPath: e?.path,
-      managePath: e?.managePath
-    }), r = U({
-      path: m.value,
-      multiple: e.multiple,
-      maxFileCount: e.maxNum,
-      maxFileSize: v.value * 1024 * 1024,
+    }, h = n(() => t.maxSize), {
+      uploadPath: s,
+      managePath: b,
+      driver: x
+    } = M({
+      driver: t?.driver,
+      signPath: t?.signPath,
+      signCallback: t?.signCallback,
+      uploadPath: t?.path,
+      managePath: t?.managePath
+    }), r = w({
+      path: s.value,
+      multiple: t.multiple,
+      maxFileCount: t.maxNum,
+      maxFileSize: h.value * 1024 * 1024,
       autoUpload: !0,
       accept: "image/*",
-      onError: (a) => {
-        p.error(a.message || u("components.upload.error"));
+      onError: (e) => {
+        v.error(e.message || m("components.upload.error"));
       },
-      driver: f.value
+      driver: x.value
     });
-    N(r.dataFiles, (a) => {
-      const o = e.multiple ? a?.map((n) => n.url) : a?.[0]?.url;
-      c.value = o, e.onUpdateValue?.(o);
+    c(r.dataFiles, (e) => {
+      const l = t.multiple ? e?.map((i) => i.url) : e?.[0]?.url;
+      u.value = l, t.onUpdateValue?.(l);
     });
-    const b = i(() => r.progress.value.totalPercent), x = i(() => r.isUploading.value), y = async () => {
+    const y = n(() => r.progress.value.totalPercent), z = n(() => r.isUploading.value), F = async () => {
       r.open();
-    }, z = i(() => e.multiple ? e.maxNum && r.uploadFiles.value.length >= e.maxNum : !0), P = i(() => r.dataFiles.value?.map((a) => a.url)), C = A();
-    return () => t("div", null, [t(B, {
+    }, P = n(() => t.multiple ? t.maxNum && r.uploadFiles.value.length >= t.maxNum : !0), C = n(() => r.dataFiles.value?.map((e) => e.url)), N = L(), d = U(!1);
+    return c(u, (e) => {
+      if (!e || !e?.length || d.value)
+        return;
+      d.value = !0;
+      const l = typeof e == "string" ? [e] : Array.isArray(e) ? e : [];
+      r.addDataFiles(l.map((i) => ({
+        url: i
+      })));
+    }, {
+      immediate: !0
+    }), () => a("div", null, [a(B, {
       modelValue: r.uploadFiles.value,
-      "onUpdate:modelValue": (a) => r.uploadFiles.value = a,
-      class: l.container,
+      "onUpdate:modelValue": (e) => r.uploadFiles.value = e,
+      class: o.container,
       draggable: ".draggable"
     }, {
-      default: () => [r.uploadFiles.value?.map((a, o) => {
-        const n = a.url || URL.createObjectURL(a.file);
-        return t("div", {
-          key: o,
-          class: w(l.imageItem)
-        }, [t(V, {
+      default: () => [r.uploadFiles.value?.map((e, l) => {
+        const i = e.url || URL.createObjectURL(e.file);
+        return a("div", {
+          key: l,
+          class: V(o.imageItem)
+        }, [a(A, {
           class: "z-0 rounded",
           objectFit: "scale-down",
           width: 78,
           height: 78,
           previewDisabled: !0,
-          src: n
-        }, null), t("div", {
-          class: l.imageOverlay
-        }, [a.status === "success" && t(s, {
+          src: i
+        }, null), a("div", {
+          class: o.imageOverlay
+        }, [e.status === "success" && a(p, {
           quaternary: !0,
           circle: !0,
           size: "small",
-          renderIcon: () => t("div", {
+          renderIcon: () => a("div", {
             class: "n-icon i-tabler:eye"
           }, null),
-          onClick: () => g.show(P.value, o)
-        }, null), t(s, {
+          onClick: () => f.show(C.value, l)
+        }, null), a(p, {
           quaternary: !0,
           circle: !0,
           size: "small",
-          renderIcon: () => t("div", {
+          renderIcon: () => a("div", {
             class: "n-icon i-tabler:trash"
           }, null),
           onClick: () => {
-            r.removeFiles([a.id]);
+            r.removeFiles([e.id]);
           }
         }, null)])]);
-      }), (r.uploadFiles.value.length === 0 || !z.value) && t("div", {
-        class: l.uploadArea,
+      }), (r.uploadFiles.value.length === 0 || !P.value) && a("div", {
+        class: o.uploadArea,
         onClick: () => {
-          y();
+          F();
         }
-      }, [e.manager && t("div", {
+      }, [t.manager && a("div", {
         class: " py-1 text-xs bg-muted border-b border-dashed border-accented flex items-center justify-center",
-        onClick: (a) => {
-          a.stopPropagation(), C.show({
-            title: u("components.upload.title"),
+        onClick: (e) => {
+          e.stopPropagation(), N.show({
+            title: m("components.upload.title"),
             width: "800px",
             component: () => import("./manager.js"),
             componentProps: {
-              path: h.value,
+              path: b.value,
               type: "image",
-              multiple: e.multiple,
+              multiple: t.multiple,
               uploadParams: {
-                path: m.value,
+                path: s.value,
                 accept: "image/*",
-                maxNum: e.maxNum,
-                maxSize: e.maxSize
+                maxNum: t.maxNum,
+                maxSize: t.maxSize
               }
             }
-          }).then((o) => {
-            r.addDataFiles(o);
+          }).then((l) => {
+            r.addDataFiles(l);
           });
         }
-      }, [t("div", {
+      }, [a("div", {
         class: "i-tabler:folder size-4"
-      }, null)]), t("div", {
-        class: l.uploadContent
-      }, [x.value ? t("div", {
-        class: l.progressContainer
-      }, [t("div", {
+      }, null)]), a("div", {
+        class: o.uploadContent
+      }, [z.value ? a("div", {
+        class: o.progressContainer
+      }, [a("div", {
         class: "i-tabler:photo size-6"
-      }, null), t("div", {
-        class: l.progressBar
-      }, [t(j, {
+      }, null), a("div", {
+        class: o.progressBar
+      }, [a(D, {
         type: "line",
-        percentage: b.value,
+        percentage: y.value,
         showIndicator: !1,
         height: 4
-      }, null)])]) : t("div", {
+      }, null)])]) : a("div", {
         class: "i-tabler:plus size-4"
       }, null)])])]
     })]);
   }
 });
 export {
-  ke as DuxImageUpload
+  je as DuxImageUpload
 };

package/dist/esm/components/upload/manage/item.js

@@ -7,6 +7,17 @@ import { useDialog as d } from "../../../hooks/dialog.js";
 import "@overlastic/vue";
 import "vue-echarts";
 import "@vueuse/core";
+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 "jinrishici";
 import "lodash-es";
@@ -26,6 +37,8 @@ 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 "mime";
 import f from "../../../static/images/icon/audio.svg.js";
 import g from "../../../static/images/icon/excel.svg.js";
@@ -35,21 +48,10 @@ import h from "../../../static/images/icon/pdf.svg.js";
 import x from "../../../static/images/icon/ppt.svg.js";
 import k from "../../../static/images/icon/video.svg.js";
 import w from "../../../static/images/icon/word.svg.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 "dayjs";
 import "@tanstack/vue-query";
 import "pinia";
-const xe = /* @__PURE__ */ c({
+const we = /* @__PURE__ */ c({
   name: "DuxFileManageItem",
   props: {
     name: String,
@@ -184,5 +186,5 @@ const xe = /* @__PURE__ */ c({
   }
 });
 export {
-  xe as DuxFileManageItem
+  we as DuxFileManageItem
 };