@duxweb/dvha-pro 0.0.7 → 1.0.14

package/dist/esm/components/status/blockEmpty.js

@@ -1,7 +1,7 @@
-import { defineComponent as t, createVNode as l } from "vue";
-import { useI18n as r } from "@duxweb/dvha-core";
-import e from "clsx";
-const s = /* @__PURE__ */ t({
+import { defineComponent as i, createVNode as t } from "vue";
+import { useI18n as o } from "@duxweb/dvha-core";
+import l from "clsx";
+const n = /* @__PURE__ */ i({
   name: "Message",
   props: {
     text: {
@@ -15,64 +15,143 @@ const s = /* @__PURE__ */ t({
       default: !1
     }
   },
-  setup(a) {
+  setup(r) {
     const {
-      t: c
-    } = r();
-    return () => l("div", {
+      t: e
+    } = o();
+    return () => t("div", {
       class: "flex justify-center p-2"
-    }, [l("div", {
-      class: e(["flex flex-row items-center", a.simple ? "flex-col" : "gap-2"])
-    }, [l("div", null, [l("svg", {
+    }, [t("div", {
+      class: l(["flex flex-row items-center", r.simple ? "flex-col" : "gap-2"])
+    }, [t("div", null, [t("svg", {
       class: "size-60px",
-      viewBox: "0 0 1024 1024",
-      version: "1.1",
-      xmlns: "http://www.w3.org/2000/svg",
-      "p-id": "6634",
-      width: "128",
-      height: "128"
-    }, [l("path", {
-      d: "M77 813.758a368.464 61.243 0 1 0 736.928 0 368.464 61.243 0 1 0-736.928 0Z",
-      fill: "rgba(var(--n-gray-color-2))",
-      "fill-opacity": ".8",
-      "p-id": "6635"
-    }, null), l("path", {
-      d: "M740.233 633.838L610.205 491.486c-6.24-6.7-15.36-10.756-24.962-10.756H305.675c-9.597 0-18.717 4.056-24.956 10.756L150.696 633.838v74.368h589.542v-74.368h-0.005z",
-      fill: "rgba(var(--n-gray-color-6))",
-      "p-id": "6636"
-    }, null), l("path", {
-      d: "M702.531 713.8L588.906 592.396c-5.44-5.835-13.625-9.026-22-9.026H323.11c-8.37 0-16.56 3.191-22 9.026L187.484 713.8v66.677h515.047V713.8z",
-      fill: "rgba(var(--n-gray-color-9))",
-      "p-id": "6637"
-    }, null), l("path", {
-      d: "M260.86 297h369.203c12.007 0 21.74 8.658 21.74 19.338v451.27c0 10.68-9.733 19.337-21.74 19.337H260.86c-12.006 0-21.74-8.657-21.74-19.337V316.338C239.12 305.658 248.855 297 260.86 297z",
-      fill: "rgba(var(--n-gray-color-2))",
-      "p-id": "6638"
-    }, null), l("path", {
-      d: "M308.947 345.118h273.03c6.002 0 10.869 4.329 10.869 9.669V475.44c0 5.34-4.867 9.669-10.87 9.669H308.947c-6.003 0-10.87-4.33-10.87-9.67V354.788c0-5.34 4.867-9.67 10.87-9.67z m1.424 192.48h270.181c6.79 0 12.294 4.896 12.294 10.935 0 6.04-5.504 10.936-12.294 10.936h-270.18c-6.79 0-12.294-4.896-12.294-10.936s5.504-10.935 12.293-10.935z m0 56.868h270.181c6.791 0 12.297 4.897 12.297 10.938 0 6.04-5.506 10.938-12.297 10.938h-270.18c-6.792 0-12.297-4.898-12.297-10.938 0-6.041 5.505-10.938 12.296-10.938z m428.66 210.309c-4.211 14.847-19.005 25.913-36.603 25.913H188.495c-17.598 0-32.391-11.071-36.598-25.913a31.651 31.651 0 0 1-1.206-8.654V633.842h143.033c15.8 0 28.533 11.835 28.533 26.203v0.194c0 14.363 12.88 25.96 28.68 25.96h189.05c15.799 0 28.68-11.704 28.68-26.072v-0.058c0-14.368 12.733-26.231 28.532-26.231h143.034v162.288c0 2.983-0.419 5.879-1.201 8.649z",
-      fill: "rgba(var(--n-gray-color-4))",
-      "p-id": "6639"
-    }, null), l("path", {
-      d: "M757.935 304.969l-37.023 12.813c-1.94 0.673-4.142 0.295-5.664-0.973-1.522-1.268-2.095-3.201-1.474-4.975l10.5-30.01C710.238 267.588 702 250.23 702 231.5c0-48.326 54.846-87.5 122.505-87.5C892.15 144 947 183.174 947 231.5S892.154 319 824.5 319c-24.544 0-47.398-5.154-66.565-14.031z",
-      fill: "rgba(var(--n-gray-color-4))",
-      "p-id": "6640"
-    }, null), l("path", {
-      d: "M856.64 233.251a15.464 13.662 0 1 0 30.928 0 15.464 13.662 0 1 0-30.928 0Z",
-      fill: "rgba(var(--n-gray-color-1))",
-      "p-id": "6641"
-    }, null), l("path", {
-      d: "M790.927 245.204H760L775.73 221.297l15.197 23.907zM810.255 221.297h27.058v23.907H810.255V221.297z",
-      fill: "rgba(var(--n-gray-color-1))",
-      "p-id": "6642"
-    }, null)])]), l("div", {
+      viewBox: "0 0 200 200",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, [t("defs", null, [t("linearGradient", {
+      id: "bgGradient",
+      x1: "0%",
+      y1: "0%",
+      x2: "100%",
+      y2: "100%"
+    }, [t("stop", {
+      offset: "0%",
+      style: "stop-color:rgb(var(--ui-color-primary));stop-opacity:0.1"
+    }, null), t("stop", {
+      offset: "100%",
+      style: "stop-color:rgb(var(--ui-color-primary));stop-opacity:0.05"
+    }, null)]), t("linearGradient", {
+      id: "boxGradient",
+      x1: "0%",
+      y1: "0%",
+      x2: "0%",
+      y2: "100%"
+    }, [t("stop", {
+      offset: "0%",
+      style: "stop-color:rgb(var(--ui-bg-elevated));stop-opacity:1"
+    }, null), t("stop", {
+      offset: "100%",
+      style: "stop-color:rgb(var(--ui-bg-muted));stop-opacity:1"
+    }, null)])]), t("circle", {
+      cx: "100",
+      cy: "100",
+      r: "85",
+      fill: "url(#bgGradient)"
+    }, null), t("g", {
+      transform: "translate(100, 100)"
+    }, [t("ellipse", {
+      cx: "0",
+      cy: "35",
+      rx: "45",
+      ry: "8",
+      fill: "rgb(var(--ui-color-gray-300))",
+      opacity: "0.3"
+    }, null), t("path", {
+      d: "M -35 -10 L -35 25 Q -35 30 -30 30 L 30 30 Q 35 30 35 25 L 35 -5 Q 35 -10 30 -10 L 5 -10 L -5 -20 L -30 -20 Q -35 -20 -35 -15 Z",
+      fill: "url(#boxGradient)",
+      stroke: "rgb(var(--ui-color-gray-300))",
+      "stroke-width": "1"
+    }, null), t("path", {
+      d: "M -5 -20 L 5 -10 L 15 -10 Q 20 -10 20 -15 Q 20 -20 15 -20 Z",
+      fill: "rgb(var(--ui-color-primary))",
+      opacity: "0.8"
+    }, null), t("g", {
+      transform: "translate(0, -5)",
+      opacity: "0.6"
+    }, [t("rect", {
+      x: "-8",
+      y: "-5",
+      width: "16",
+      height: "20",
+      rx: "2",
+      fill: "rgb(var(--ui-bg-elevated))",
+      stroke: "rgb(var(--ui-color-gray-400))",
+      "stroke-width": "0.5"
+    }, null), t("line", {
+      x1: "-5",
+      y1: "0",
+      x2: "5",
+      y2: "0",
+      stroke: "rgb(var(--ui-color-gray-400))",
+      "stroke-width": "1",
+      opacity: "0.5"
+    }, null), t("line", {
+      x1: "-5",
+      y1: "4",
+      x2: "3",
+      y2: "4",
+      stroke: "rgb(var(--ui-color-gray-400))",
+      "stroke-width": "1",
+      opacity: "0.5"
+    }, null), t("line", {
+      x1: "-5",
+      y1: "8",
+      x2: "5",
+      y2: "8",
+      stroke: "rgb(var(--ui-color-gray-400))",
+      "stroke-width": "1",
+      opacity: "0.5"
+    }, null)]), t("circle", {
+      cx: "-25",
+      cy: "-25",
+      r: "2",
+      fill: "rgb(var(--ui-color-primary))",
+      opacity: "0.4"
+    }, [t("animate", {
+      attributeName: "opacity",
+      values: "0.4;0.8;0.4",
+      dur: "2s",
+      repeatCount: "indefinite"
+    }, null)]), t("circle", {
+      cx: "25",
+      cy: "-15",
+      r: "1.5",
+      fill: "rgb(var(--ui-color-primary))",
+      opacity: "0.3"
+    }, [t("animate", {
+      attributeName: "opacity",
+      values: "0.3;0.6;0.3",
+      dur: "3s",
+      repeatCount: "indefinite"
+    }, null)]), t("circle", {
+      cx: "20",
+      cy: "25",
+      r: "1",
+      fill: "rgb(var(--ui-color-primary))",
+      opacity: "0.2"
+    }, [t("animate", {
+      attributeName: "opacity",
+      values: "0.2;0.5;0.2",
+      dur: "4s",
+      repeatCount: "indefinite"
+    }, null)])])])]), t("div", {
       class: "flex flex-col gap-0"
-    }, [l("div", {
-      class: e([a.simple ? "text-center text-gray-5" : ""])
-    }, [a.text || c("pages.empty.title")]), !a.simple && l("div", {
-      class: "text-gray-5"
-    }, [a.desc || c("pages.empty.desc")])])])]);
+    }, [t("div", {
+      class: l(["text-default", r.simple ? "text-center" : ""])
+    }, [r.text || e("pages.empty.title")]), !r.simple && t("div", {
+      class: "text-muted"
+    }, [r.desc || e("pages.empty.desc")])])])]);
   }
 });
 export {
-  s as DuxBlockEmpty
+  n as DuxBlockEmpty
 };

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

@@ -0,0 +1,258 @@
+import { defineComponent as M, ref as D, computed as s, watch as k, createVNode as a, Fragment as w, createTextVNode as A, isVNode as U } from "vue";
+import { useManage as Z, useI18n as j, useUpload as O } from "@duxweb/dvha-core";
+import { useVModel as B, useDropZone as X } from "@vueuse/core";
+import E from "mime";
+import { useMessage as L, NDataTable as T, NProgress as I, NButton as h } from "naive-ui";
+import "vue-router";
+import "@overlastic/vue";
+import { DuxMedia as W } from "../media/media.js";
+import "vue-echarts";
+import "vue-cropper";
+import "clsx";
+import "jinrishici";
+import "lodash-es";
+import "vue-draggable-plus";
+import "aieditor";
+import "vee-validate";
+import "@vee-validate/i18n";
+import "colorizr";
+import "echarts";
+import "@ant-design/colors";
+import "@unocss/preset-icons/browser";
+import "@unocss/preset-typography";
+import "unocss/preset-wind4";
+import "@vee-validate/i18n/dist/locale/en.json";
+import "@vee-validate/i18n/dist/locale/zh_CN.json";
+import "vue-command-palette";
+import "@duxweb/dvha-naiveui";
+import "../../pages/page404.js";
+import { useModal as G } from "../../hooks/modal.js";
+import "dayjs";
+import "@tanstack/vue-query";
+import "pinia";
+function v(o) {
+  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !U(o);
+}
+const m = {
+  "image/*": "JPG, PNG, GIF, BMP, WEBP",
+  "video/*": "MP4, AVI, MOV, WMV, FLV",
+  "audio/*": "MP3, WAV, AAC, FLAC",
+  "text/*": "TXT, CSV, JSON, XML",
+  "application/pdf": "PDF",
+  "application/msword": "DOC",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+  "application/vnd.ms-excel": "XLS",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX"
+}, i = {
+  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",
+    active: "border-primary bg-primary/5",
+    hover: "border-accented hover:bg-primary/5 hover:border-primary"
+  },
+  content: "flex flex-col items-center gap-1",
+  icon: {
+    wrapper: "size-10 flex items-center justify-center rounded-full border border-dashed border-accented group-hover:border-primary transition-all cursor-pointer",
+    icon: "i-tabler:device-desktop-up size-5"
+  },
+  text: {
+    title: "mt-3 text-base font-medium",
+    desc: "text-sm text-muted text-center",
+    highlight: "text-primary font-medium"
+  },
+  table: {
+    empty: "flex items-center justify-center h-full text-muted",
+    actions: "flex gap-2"
+  }
+}, Se = /* @__PURE__ */ M({
+  name: "DuxFileUpload",
+  props: {
+    path: {
+      type: String,
+      default: ""
+    },
+    managePath: {
+      type: String,
+      default: ""
+    },
+    maxNum: Number,
+    maxSize: Number,
+    multiple: Boolean,
+    manager: Boolean,
+    accept: String,
+    value: [String, Array],
+    defaultValue: [String, Array],
+    onUpdateValue: Function
+  },
+  setup(o, {
+    emit: b
+  }) {
+    const y = B(o, "value", b, {
+      passive: !0,
+      deep: !0,
+      defaultValue: o.defaultValue
+    }), u = Z(), F = L(), {
+      t: n
+    } = j(), d = D(), c = s(() => o.maxSize || 5), P = G(), f = s(() => {
+      var e, t;
+      return o.path || ((t = (e = u.config) == null ? void 0 : e.apiPath) == null ? void 0 : t.upload);
+    }), S = s(() => {
+      var e, t;
+      return o.managePath || ((t = (e = u.config) == null ? void 0 : e.apiPath) == null ? void 0 : t.uploadManage);
+    }), l = O({
+      path: f.value,
+      multiple: o.multiple,
+      maxFileCount: o.maxNum,
+      maxFileSize: c.value * 1024 * 1024,
+      autoUpload: !0,
+      accept: o.accept,
+      onError: (e) => F.error(e.message || n("components.upload.error"))
+    }), {
+      isOverDropZone: x
+    } = X(d, {
+      onDrop: (e) => {
+        e && e.length > 0 && l.addFiles(Array.from(e), "file");
+      }
+    });
+    k(l.dataFiles, (e) => {
+      var r, p;
+      const t = o.multiple ? e == null ? void 0 : e.map((z) => z.url) : (r = e == null ? void 0 : e[0]) == null ? void 0 : r.url;
+      y.value = t, (p = o.onUpdateValue) == null || p.call(o, t);
+    });
+    const g = s(() => o.accept ? o.accept.split(",").map((e) => {
+      const t = e.trim();
+      if (m[t]) return m[t];
+      if (t.includes("*")) {
+        const p = t.split("/")[0];
+        return m[t] || n("common.fileExtension", {
+          ext: p.toUpperCase()
+        });
+      }
+      const r = E.getExtension(t);
+      return r ? r.toUpperCase() : t;
+    }).filter(Boolean).join(", ") : ""), C = s(() => ({
+      pending: a("div", {
+        class: "text-info"
+      }, [n("components.upload.status.pending")]),
+      uploading: a("div", {
+        class: "text-info"
+      }, [n("components.upload.status.uploading")]),
+      success: a("div", {
+        class: "text-success"
+      }, [n("components.upload.status.success")]),
+      error: a("div", {
+        class: "text-error"
+      }, [n("components.upload.status.error")])
+    })), N = s(() => [i.dropZone.base, x.value ? i.dropZone.active : i.dropZone.hover]), V = s(() => [l.uploadFiles.value.length === 0 && "border-b border-muted"]);
+    return () => a("div", {
+      class: i.container
+    }, [a("div", {
+      ref: d,
+      class: N.value,
+      onClick: () => l.open()
+    }, [a("div", {
+      class: i.content
+    }, [a("div", {
+      class: i.icon.wrapper,
+      onClick: (e) => {
+        o.manager && (e.stopPropagation(), P.show({
+          title: n("components.upload.title"),
+          width: 800,
+          component: () => import("./manager.js"),
+          componentProps: {
+            path: S.value,
+            multiple: o.multiple,
+            uploadParams: {
+              path: f.value,
+              accept: o.accept,
+              maxNum: o.maxNum,
+              maxSize: c.value
+            }
+          }
+        }).then((t) => {
+          l.addDataFiles(t);
+        }));
+      }
+    }, [a("div", {
+      class: i.icon.icon
+    }, null)]), a("div", {
+      class: i.text.title
+    }, [n("components.upload.desc")]), a("div", {
+      class: i.text.desc
+    }, [x.value ? a("span", {
+      class: i.text.highlight
+    }, [n("components.upload.dropHere")]) : a(w, null, [g.value ? n("components.upload.supportFormats", {
+      formats: g.value
+    }) : n("components.upload.allFormats"), A(","), " ", n("components.upload.maxSize", {
+      size: c.value
+    })])])])]), a(T, {
+      bordered: !1,
+      class: V.value,
+      columns: [{
+        key: "filename",
+        title: n("components.upload.file.name"),
+        minWidth: 200,
+        render: (e) => a(W, {
+          title: e.filename,
+          desc: e.filetype
+        }, null)
+      }, {
+        key: "filesizeText",
+        title: n("components.upload.file.size"),
+        width: 120
+      }, {
+        key: "status",
+        title: n("components.upload.file.status"),
+        width: 120,
+        render: (e) => {
+          var t;
+          return e.status === "uploading" ? a(I, {
+            type: "line",
+            style: {
+              width: "24px",
+              height: "24px"
+            },
+            color: "rgb(var(--ui-color-primary))",
+            "indicator-placement": "inside",
+            percentage: (t = e.progress) == null ? void 0 : t.percent,
+            showIndicator: !1,
+            height: 14
+          }, null) : C.value[e.status];
+        }
+      }, {
+        key: "actions",
+        title: n("components.upload.actions"),
+        width: 120,
+        render: (e) => {
+          let t, r;
+          return a("div", {
+            class: i.table.actions
+          }, [a(h, {
+            type: "warning",
+            size: "small",
+            text: !0,
+            disabled: ["success", "error", "cancelled"].includes(e.status),
+            onClick: () => l.cancelFiles([e.id])
+          }, v(t = n("components.upload.cancel")) ? t : {
+            default: () => [t]
+          }), a(h, {
+            type: "error",
+            size: "small",
+            text: !0,
+            onClick: () => l.removeFiles([e.id])
+          }, v(r = n("components.upload.delete")) ? r : {
+            default: () => [r]
+          })]);
+        }
+      }],
+      data: l.uploadFiles.value
+    }, {
+      empty: () => a("div", {
+        class: i.table.empty
+      }, [n("components.upload.empty")])
+    })]);
+  }
+});
+export {
+  Se as DuxFileUpload
+};

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

@@ -0,0 +1,189 @@
+import { defineComponent as U, computed as n, watch as w, createVNode as t } from "vue";
+import { useI18n as I, useManage as S, useUpload as V } from "@duxweb/dvha-core";
+import { useVModel as k } from "@vueuse/core";
+import j from "clsx";
+import { useMessage as M, NImage as B, NButton as c, NProgress as D } from "naive-ui";
+import { VueDraggable as A } from "vue-draggable-plus";
+import "vue-router";
+import "@overlastic/vue";
+import "vue-echarts";
+import "vue-cropper";
+import "jinrishici";
+import "lodash-es";
+import "aieditor";
+import "vee-validate";
+import "@vee-validate/i18n";
+import "colorizr";
+import "echarts";
+import "@ant-design/colors";
+import "@unocss/preset-icons/browser";
+import "@unocss/preset-typography";
+import "unocss/preset-wind4";
+import "@vee-validate/i18n/dist/locale/en.json";
+import "@vee-validate/i18n/dist/locale/zh_CN.json";
+import "vue-command-palette";
+import "@duxweb/dvha-naiveui";
+import "../../pages/page404.js";
+import "mime";
+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 fe = /* @__PURE__ */ U({
+  name: "DuxImageUpload",
+  props: {
+    path: {
+      type: String,
+      default: "upload"
+    },
+    managePath: {
+      type: String,
+      default: ""
+    },
+    maxNum: Number,
+    maxSize: Number,
+    multiple: Boolean,
+    manager: Boolean,
+    value: [String, Array],
+    defaultValue: [String, Array],
+    onUpdateValue: Function
+  },
+  setup(a, {
+    emit: p
+  }) {
+    const g = k(a, "value", p, {
+      passive: !0,
+      deep: !0,
+      defaultValue: a.defaultValue
+    }), v = M(), h = O(), {
+      t: s
+    } = I(), 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",
+      uploadArea: "relative size-80px text-sm rounded flex flex-col border border-dashed bg-elevated border-muted dark:border-accented hover:bg-accented/50 hover:border-accented dark:hover:bg-accented/50 dark:hover:border-accented cursor-pointer",
+      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"
+    }, m = S(), f = n(() => a.maxSize || 5), d = n(() => {
+      var e, l;
+      return a.path || ((l = (e = m.config) == null ? void 0 : e.apiPath) == null ? void 0 : l.upload);
+    }), b = n(() => {
+      var e, l;
+      return a.managePath || ((l = (e = m.config) == null ? void 0 : e.apiPath) == null ? void 0 : l.uploadManage);
+    }), r = V({
+      path: d.value,
+      multiple: a.multiple,
+      maxFileCount: a.maxNum,
+      maxFileSize: f.value * 1024 * 1024,
+      autoUpload: !0,
+      accept: "image/*",
+      onError: (e) => {
+        v.error(e.message || s("components.upload.error"));
+      }
+    });
+    w(r.dataFiles, (e) => {
+      var i, u;
+      const l = a.multiple ? e == null ? void 0 : e.map((C) => C.url) : (i = e == null ? void 0 : e[0]) == null ? void 0 : i.url;
+      g.value = l, (u = a.onUpdateValue) == null || u.call(a, l);
+    });
+    const x = n(() => r.progress.value.totalPercent), y = n(() => r.isUploading.value), z = async () => {
+      r.open();
+    }, F = n(() => a.multiple ? a.maxNum && r.uploadFiles.value.length >= a.maxNum : !0), P = n(() => {
+      var e;
+      return (e = r.dataFiles.value) == null ? void 0 : e.map((l) => l.url);
+    }), N = L();
+    return () => t("div", null, [t(A, {
+      modelValue: r.uploadFiles.value,
+      "onUpdate:modelValue": (e) => r.uploadFiles.value = e,
+      class: o.container,
+      draggable: ".draggable"
+    }, {
+      default: () => {
+        var e;
+        return [(e = r.uploadFiles.value) == null ? void 0 : e.map((l, i) => {
+          const u = l.url || URL.createObjectURL(l.file);
+          return t("div", {
+            key: i,
+            class: j(o.imageItem)
+          }, [t(B, {
+            class: "z-0 rounded",
+            objectFit: "scale-down",
+            width: 78,
+            height: 78,
+            previewDisabled: !0,
+            src: u
+          }, null), t("div", {
+            class: o.imageOverlay
+          }, [l.status === "success" && t(c, {
+            quaternary: !0,
+            circle: !0,
+            size: "small",
+            renderIcon: () => t("div", {
+              class: "n-icon i-tabler:eye"
+            }, null),
+            onClick: () => h.show(P.value, i)
+          }, null), t(c, {
+            quaternary: !0,
+            circle: !0,
+            size: "small",
+            renderIcon: () => t("div", {
+              class: "n-icon i-tabler:trash"
+            }, null),
+            onClick: () => {
+              r.removeFiles([l.id]);
+            }
+          }, null)])]);
+        }), (r.uploadFiles.value.length === 0 || !F.value) && t("div", {
+          class: o.uploadArea,
+          onClick: () => {
+            z();
+          }
+        }, [a.manager && t("div", {
+          class: " py-1 text-xs bg-muted border-b border-dashed border-accented flex items-center justify-center",
+          onClick: (l) => {
+            l.stopPropagation(), N.show({
+              title: s("components.upload.title"),
+              width: "800px",
+              component: () => import("./manager.js"),
+              componentProps: {
+                path: b.value,
+                type: "image",
+                multiple: a.multiple,
+                uploadParams: {
+                  path: d.value,
+                  accept: "image/*",
+                  maxNum: a.maxNum,
+                  maxSize: a.maxSize
+                }
+              }
+            }).then((i) => {
+              r.addDataFiles(i);
+            });
+          }
+        }, [t("div", {
+          class: "i-tabler:folder size-4"
+        }, null)]), t("div", {
+          class: o.uploadContent
+        }, [y.value ? t("div", {
+          class: o.progressContainer
+        }, [t("div", {
+          class: "i-tabler:photo size-6"
+        }, null), t("div", {
+          class: o.progressBar
+        }, [t(D, {
+          type: "line",
+          percentage: x.value,
+          showIndicator: !1,
+          height: 4
+        }, null)])]) : t("div", {
+          class: "i-tabler:plus size-4"
+        }, null)])])];
+      }
+    })]);
+  }
+});
+export {
+  fe as DuxImageUpload
+};