@duxweb/dvha-pro 1.0.23 → 1.0.25

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

@@ -1,12 +1,23 @@
-import { defineComponent as S, computed as n, watch as U, createVNode as t } from "vue";
+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 B, NButton as s, NProgress as D } from "naive-ui";
-import { VueDraggable as A } from "vue-draggable-plus";
+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 M } 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 L } from "../../hooks/modal.js";
 import "dayjs";
 import { useImagePreview as O } from "../../hooks/image.js";
 import "@tanstack/vue-query";
 import "pinia";
-const Ie = /* @__PURE__ */ S({
+const je = /* @__PURE__ */ S({
   name: "DuxImageUpload",
   props: {
     path: {
@@ -74,16 +76,16 @@ const Ie = /* @__PURE__ */ S({
     defaultValue: [String, Array],
     onUpdateValue: Function
   },
-  setup(e, {
-    emit: c
+  setup(t, {
+    emit: g
   }) {
-    const g = I(e, "value", c, {
+    const u = I(t, "value", g, {
       passive: !0,
       deep: !0,
-      defaultValue: e.defaultValue
-    }), p = j(), v = O(), {
+      defaultValue: t.defaultValue
+    }), v = j(), f = O(), {
       t: m
-    } = k(), i = {
+    } = 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,129 +93,132 @@ const Ie = /* @__PURE__ */ S({
       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"
-    }, h = n(() => e.maxSize), {
-      uploadPath: d,
-      managePath: f,
-      driver: b
+    }, h = n(() => t.maxSize), {
+      uploadPath: s,
+      managePath: b,
+      driver: x
     } = M({
-      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
-    }), l = w({
-      path: d.value,
-      multiple: e.multiple,
-      maxFileCount: e.maxNum,
+      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 || m("components.upload.error"));
+      onError: (e) => {
+        v.error(e.message || m("components.upload.error"));
       },
-      driver: b.value
+      driver: x.value
     });
-    U(l.dataFiles, (a) => {
-      var o, u;
-      const r = e.multiple ? a == null ? void 0 : a.map((N) => N.url) : (o = a == null ? void 0 : a[0]) == null ? void 0 : o.url;
-      g.value = r, (u = e.onUpdateValue) == null || u.call(e, r);
+    c(r.dataFiles, (e) => {
+      const l = t.multiple ? e?.map((i) => i.url) : e?.[0]?.url;
+      u.value = l, t.onUpdateValue?.(l);
     });
-    const x = n(() => l.progress.value.totalPercent), y = n(() => l.isUploading.value), z = async () => {
-      l.open();
-    }, P = n(() => e.multiple ? e.maxNum && l.uploadFiles.value.length >= e.maxNum : !0), C = n(() => {
-      var a;
-      return (a = l.dataFiles.value) == null ? void 0 : a.map((r) => r.url);
-    }), F = L();
-    return () => t("div", null, [t(A, {
-      modelValue: l.uploadFiles.value,
-      "onUpdate:modelValue": (a) => l.uploadFiles.value = a,
-      class: i.container,
+    const y = n(() => r.progress.value.totalPercent), z = n(() => r.isUploading.value), F = async () => {
+      r.open();
+    }, 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": (e) => r.uploadFiles.value = e,
+      class: o.container,
       draggable: ".draggable"
     }, {
-      default: () => {
-        var a;
-        return [(a = l.uploadFiles.value) == null ? void 0 : a.map((r, o) => {
-          const u = r.url || URL.createObjectURL(r.file);
-          return t("div", {
-            key: o,
-            class: V(i.imageItem)
-          }, [t(B, {
-            class: "z-0 rounded",
-            objectFit: "scale-down",
-            width: 78,
-            height: 78,
-            previewDisabled: !0,
-            src: u
-          }, null), t("div", {
-            class: i.imageOverlay
-          }, [r.status === "success" && t(s, {
-            quaternary: !0,
-            circle: !0,
-            size: "small",
-            renderIcon: () => t("div", {
-              class: "n-icon i-tabler:eye"
-            }, null),
-            onClick: () => v.show(C.value, o)
-          }, null), t(s, {
-            quaternary: !0,
-            circle: !0,
-            size: "small",
-            renderIcon: () => t("div", {
-              class: "n-icon i-tabler:trash"
-            }, null),
-            onClick: () => {
-              l.removeFiles([r.id]);
-            }
-          }, null)])]);
-        }), (l.uploadFiles.value.length === 0 || !P.value) && t("div", {
-          class: i.uploadArea,
+      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: i
+        }, null), a("div", {
+          class: o.imageOverlay
+        }, [e.status === "success" && a(p, {
+          quaternary: !0,
+          circle: !0,
+          size: "small",
+          renderIcon: () => a("div", {
+            class: "n-icon i-tabler:eye"
+          }, null),
+          onClick: () => f.show(C.value, l)
+        }, null), a(p, {
+          quaternary: !0,
+          circle: !0,
+          size: "small",
+          renderIcon: () => a("div", {
+            class: "n-icon i-tabler:trash"
+          }, null),
           onClick: () => {
-            z();
+            r.removeFiles([e.id]);
           }
-        }, [e.manager && t("div", {
-          class: " py-1 text-xs bg-muted border-b border-dashed border-accented flex items-center justify-center",
-          onClick: (r) => {
-            r.stopPropagation(), F.show({
-              title: m("components.upload.title"),
-              width: "800px",
-              component: () => import("./manager.js"),
-              componentProps: {
-                path: f.value,
-                type: "image",
-                multiple: e.multiple,
-                uploadParams: {
-                  path: d.value,
-                  accept: "image/*",
-                  maxNum: e.maxNum,
-                  maxSize: e.maxSize
-                }
+        }, null)])]);
+      }), (r.uploadFiles.value.length === 0 || !P.value) && a("div", {
+        class: o.uploadArea,
+        onClick: () => {
+          F();
+        }
+      }, [t.manager && a("div", {
+        class: " py-1 text-xs bg-muted border-b border-dashed border-accented flex items-center justify-center",
+        onClick: (e) => {
+          e.stopPropagation(), N.show({
+            title: m("components.upload.title"),
+            width: "800px",
+            component: () => import("./manager.js"),
+            componentProps: {
+              path: b.value,
+              type: "image",
+              multiple: t.multiple,
+              uploadParams: {
+                path: s.value,
+                accept: "image/*",
+                maxNum: t.maxNum,
+                maxSize: t.maxSize
               }
-            }).then((o) => {
-              l.addDataFiles(o);
-            });
-          }
-        }, [t("div", {
-          class: "i-tabler:folder size-4"
-        }, null)]), t("div", {
-          class: i.uploadContent
-        }, [y.value ? t("div", {
-          class: i.progressContainer
-        }, [t("div", {
-          class: "i-tabler:photo size-6"
-        }, null), t("div", {
-          class: i.progressBar
-        }, [t(D, {
-          type: "line",
-          percentage: x.value,
-          showIndicator: !1,
-          height: 4
-        }, null)])]) : t("div", {
-          class: "i-tabler:plus size-4"
-        }, null)])])];
-      }
+            }
+          }).then((l) => {
+            r.addDataFiles(l);
+          });
+        }
+      }, [a("div", {
+        class: "i-tabler:folder size-4"
+      }, null)]), a("div", {
+        class: o.uploadContent
+      }, [z.value ? a("div", {
+        class: o.progressContainer
+      }, [a("div", {
+        class: "i-tabler:photo size-6"
+      }, null), a("div", {
+        class: o.progressBar
+      }, [a(D, {
+        type: "line",
+        percentage: y.value,
+        showIndicator: !1,
+        height: 4
+      }, null)])]) : a("div", {
+        class: "i-tabler:plus size-4"
+      }, null)])])]
     })]);
   }
 });
 export {
-  Ie as DuxImageUpload
+  je as DuxImageUpload
 };

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

@@ -1,12 +1,23 @@
-import { defineComponent as c, createVNode as t } from "vue";
+import { defineComponent as c, createVNode as e } from "vue";
 import { useI18n as s } from "@duxweb/dvha-core";
-import a from "clsx";
-import { NCheckbox as u, NImage as p } from "naive-ui";
+import p from "clsx";
+import { NCheckbox as a, NImage as u } from "naive-ui";
 import "vue-router";
 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,
@@ -67,125 +69,122 @@ const xe = /* @__PURE__ */ c({
       t: r
     } = s(), m = {
       image: {
-        check: (e) => e.startsWith("image/"),
-        render: () => t("div", {
+        check: (t) => t.startsWith("image/"),
+        render: () => e("div", {
           class: "size-12 flex items-center justify-center",
-          onClick: (e) => e.stopPropagation()
-        }, [t(p, {
+          onClick: (t) => t.stopPropagation()
+        }, [e(u, {
           src: i.url,
           width: 48,
           height: 48
         }, null)])
       },
       video: {
-        check: (e) => e.startsWith("video/"),
-        render: () => t("div", {
-          onClick: (e) => {
-            e.stopPropagation(), o.node({
+        check: (t) => t.startsWith("video/"),
+        render: () => e("div", {
+          onClick: (t) => {
+            t.stopPropagation(), o.node({
               title: r("components.button.preview"),
-              render: () => t("div", {
+              render: () => e("div", {
                 class: "flex items-center justify-center"
-              }, [t("video", {
+              }, [e("video", {
                 class: "w-120 max-w-full",
                 controls: !0
-              }, [t("source", {
+              }, [e("source", {
                 src: i.url,
                 type: i.mime
               }, null)])])
             });
           }
-        }, [t("img", {
+        }, [e("img", {
           src: k,
           class: "size-12"
         }, null)])
       },
       audio: {
-        check: (e) => e.startsWith("audio/"),
-        render: () => t("div", {
-          onClick: (e) => {
-            e.stopPropagation(), o.node({
+        check: (t) => t.startsWith("audio/"),
+        render: () => e("div", {
+          onClick: (t) => {
+            t.stopPropagation(), o.node({
               title: r("components.button.preview"),
-              render: () => t("div", {
+              render: () => e("div", {
                 class: "flex items-center justify-center"
-              }, [t("audio", {
+              }, [e("audio", {
                 class: "w-120 max-w-full",
                 controls: !0
-              }, [t("source", {
+              }, [e("source", {
                 src: i.url,
                 type: i.mime
               }, null)])])
             });
           }
-        }, [t("img", {
+        }, [e("img", {
           src: f,
           class: "size-12"
         }, null)])
       },
       pdf: {
-        check: (e) => e === "application/pdf",
-        render: () => t("img", {
+        check: (t) => t === "application/pdf",
+        render: () => e("img", {
           src: h,
           class: "size-12"
         }, null)
       },
       word: {
-        check: (e) => ["application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/msword"].includes(e),
-        render: () => t("img", {
+        check: (t) => ["application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/msword"].includes(t),
+        render: () => e("img", {
           src: w,
           class: "size-12"
         }, null)
       },
       excel: {
-        check: (e) => ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-excel"].includes(e),
-        render: () => t("img", {
+        check: (t) => ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-excel"].includes(t),
+        render: () => e("img", {
           src: g,
           class: "size-12"
         }, null)
       },
       powerpoint: {
-        check: (e) => ["application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.ms-powerpoint"].includes(e),
-        render: () => t("img", {
+        check: (t) => ["application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.ms-powerpoint"].includes(t),
+        render: () => e("img", {
           src: x,
           class: "size-12"
         }, null)
       }
     }, l = () => {
       if (i.type === "folder")
-        return t("img", {
+        return e("img", {
           src: v,
           class: "size-12"
         }, null);
       if (!i.mime)
-        return t("img", {
+        return e("img", {
           src: n,
           class: "size-12"
         }, null);
-      for (const e of Object.values(m))
-        if (e.check(i.mime))
-          return e.render();
-      return t("img", {
+      for (const t of Object.values(m))
+        if (t.check(i.mime))
+          return t.render();
+      return e("img", {
         src: n,
         class: "size-12"
       }, null);
     };
-    return () => t("div", {
+    return () => e("div", {
       class: "flex flex-col items-center justify-center hover:bg-primary/10 cursor-pointer p-2 rounded-sm relative group",
       onContextmenu: i.onContextmenu,
-      onClick: () => {
-        var e;
-        return (e = i.onSelect) == null ? void 0 : e.call(i, !(i != null && i.value));
-      }
-    }, [t("div", {
+      onClick: () => i.onSelect?.(!i?.value)
+    }, [e("div", {
       class: "mb-2"
-    }, [l()]), t("div", {
+    }, [l()]), e("div", {
       class: "truncate w-full text-center"
-    }, [i.name]), t("div", {
-      class: a(["absolute top-2 right-2", i.value ? "block" : "hidden group-hover:block"])
-    }, [i.type === "file" && !i.page && t(u, {
+    }, [i.name]), e("div", {
+      class: p(["absolute top-2 right-2", i.value ? "block" : "hidden group-hover:block"])
+    }, [i.type === "file" && !i.page && e(a, {
       checked: i.value
     }, null)])]);
   }
 });
 export {
-  xe as DuxFileManageItem
+  we as DuxFileManageItem
 };