@duxweb/dvha-pro 1.1.29 → 1.1.31

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

@@ -1,245 +1,170 @@
-import { defineComponent as k, computed as n, watch as g, createVNode as a } from "vue";
-import { useI18n as w, useUpload as I } from "@duxweb/dvha-core";
-import { useVModel as V } from "@vueuse/core";
-import A from "clsx";
-import { useMessage as j, NImage as B, NButton as v, NProgress as D } from "naive-ui";
-import { VueDraggable as M } 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";
-import "@vee-validate/i18n";
-import "colorizr";
-import "echarts";
-import "highlight.js/lib/core";
-import "highlight.js/lib/languages/bash";
-import "highlight.js/lib/languages/css";
-import "highlight.js/lib/languages/go";
-import "highlight.js/lib/languages/java";
-import "highlight.js/lib/languages/javascript";
-import "highlight.js/lib/languages/json";
-import "highlight.js/lib/languages/markdown";
-import "highlight.js/lib/languages/php";
-import "highlight.js/lib/languages/python";
-import "highlight.js/lib/languages/shell";
-import "highlight.js/lib/languages/sql";
-import "highlight.js/lib/languages/typescript";
-import "highlight.js/lib/languages/xml";
-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 "vee-validate";
-import "vue-command-palette";
-import "@duxweb/dvha-naiveui";
-import "../../pages/page404.js";
-import "short-unique-id";
-import "aieditor";
-import { useUploadConfig as L } from "./config.js";
-import "@vue-flow/core";
-import "lodash-es/cloneDeep";
-import "@vue-flow/background";
-/* empty css                      */
-import { useModal as O } from "../../hooks/modal.js";
-import "mime";
-import "@iconify-json/tabler/icons.json";
-import "../posterEditor/elements/index.js";
-import "fabric";
-import "../schemaEditor/schemaEditor.js";
-import "dayjs";
-import { useImagePreview as q } from "../../hooks/image.js";
-import "@tanstack/vue-query";
-import "pinia";
-const $e = /* @__PURE__ */ k({
-  name: "DuxImageUpload",
-  props: {
-    path: {
-      type: String,
-      default: "upload"
-    },
-    signPath: {
-      type: String,
-      default: ""
-    },
-    signCallback: Function,
-    managePath: {
-      type: String,
-      default: ""
-    },
-    driver: {
-      type: String
-    },
-    maxNum: Number,
-    maxSize: {
-      type: Number,
-      default: 0
-    },
-    multiple: Boolean,
-    manager: Boolean,
-    value: [String, Array],
-    defaultValue: [String, Array],
-    onUpdateValue: Function,
-    method: String
-  },
-  setup(t, {
-    emit: h
-  }) {
-    const u = V(t, "value", h, {
-      passive: !0,
-      deep: !0,
-      defaultValue: t.defaultValue
-    }), f = j(), b = q(), {
-      t: s
-    } = w(), i = {
-      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"
-    }, x = n(() => t.maxSize), {
-      uploadPath: d,
-      managePath: y,
-      driver: F,
-      method: p
-    } = L({
-      driver: t?.driver,
-      signPath: t?.signPath,
-      signCallback: t?.signCallback,
-      uploadPath: t?.path,
-      managePath: t?.managePath,
-      method: t?.method
-    }), r = I({
-      path: d.value,
-      multiple: t.multiple,
-      maxFileCount: t.maxNum,
-      maxFileSize: x.value * 1024 * 1024,
-      autoUpload: !0,
-      accept: "image/*",
-      params: t.manager ? {
-        manager: "true"
-      } : void 0,
-      method: p.value,
-      onError: (e) => {
-        f.error(e.message || s("components.upload.error"));
-      },
-      driver: F.value
-    });
-    g(r.dataFiles, (e) => {
-      const o = t.multiple ? e?.map((l) => l.url) : e?.[0]?.url;
-      u.value = o, t.onUpdateValue?.(o);
-    });
-    const z = n(() => r.progress.value.totalPercent), P = n(() => r.isUploading.value || r.uploadFiles.value.some((e) => e?.status === "uploading")), C = async () => {
-      r.open();
-    }, S = n(() => t.multiple ? t.maxNum && r.uploadFiles.value.length >= t.maxNum : !0), N = n(() => r.dataFiles.value?.map((e) => e.url)), U = O();
-    return g(u, (e) => {
-      if (!e || !(Array.isArray(e) ? e.length : String(e).length)) return;
-      const o = typeof e == "string" ? [e] : Array.isArray(e) ? e : [], l = (r.dataFiles.value || []).map((m) => m.url).filter(Boolean), c = o.filter((m) => !l.includes(m));
-      c.length && r.addDataFiles(c.map((m) => ({
-        url: m
-      })));
-    }), () => a("div", null, [a(M, {
-      modelValue: r.uploadFiles.value,
-      "onUpdate:modelValue": (e) => r.uploadFiles.value = e,
-      class: i.container,
-      draggable: ".draggable"
-    }, {
-      default: () => [r.uploadFiles.value?.map((e, o) => {
-        const l = e.url || URL.createObjectURL(e.file);
-        return a("div", {
-          key: o,
-          class: A(i.imageItem)
-        }, [a(B, {
-          class: "z-0 rounded",
-          objectFit: "scale-down",
-          width: 78,
-          height: 78,
-          previewDisabled: !0,
-          src: l
-        }, null), a("div", {
-          class: i.imageOverlay
-        }, [e.status === "success" && a(v, {
-          quaternary: !0,
-          circle: !0,
-          size: "small",
-          renderIcon: () => a("div", {
-            class: "n-icon i-tabler:eye"
-          }, null),
-          onClick: () => b.show(N.value, o)
-        }, null), a(v, {
-          quaternary: !0,
-          circle: !0,
-          size: "small",
-          renderIcon: () => a("div", {
-            class: "n-icon i-tabler:trash"
-          }, null),
-          onClick: () => {
-            r.removeFiles([e.id]);
-          }
-        }, null)])]);
-      }), (r.uploadFiles.value.length === 0 || !S.value) && a("div", {
-        class: i.uploadArea,
-        onClick: () => {
-          C();
-        }
-      }, [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(), U.show({
-            title: s("components.upload.title"),
-            width: "800px",
-            component: () => import("./manager.js"),
-            componentProps: {
-              path: y.value,
-              type: "image",
-              multiple: t.multiple,
-              uploadParams: {
-                path: d.value,
-                accept: "image/*",
-                maxNum: t.maxNum,
-                maxSize: t.maxSize,
-                method: p.value
-              }
-            }
-          }).then((o) => {
-            r.addDataFiles(o);
-          });
-        }
-      }, [a("div", {
-        class: "i-tabler:folder size-4"
-      }, null)]), a("div", {
-        class: i.uploadContent
-      }, [P.value ? a("div", {
-        class: i.progressContainer
-      }, [a("div", {
-        class: i.progressBar
-      }, [a(D, {
-        type: "line",
-        percentage: z.value,
-        showIndicator: !1,
-        height: 4
-      }, null)])]) : a("div", {
-        class: "i-tabler:plus size-4"
-      }, null)])])]
-    })]);
-  }
+import { useModal as e } from "../../hooks/modal.js";
+import { useImagePreview as t } from "../../hooks/image.js";
+import "../../hooks/index.js";
+import { useUploadConfig as n } from "./config.js";
+import { computed as r, createVNode as i, defineComponent as a, watch as o } from "vue";
+import { useI18n as s, useUpload as c } from "@duxweb/dvha-core";
+import { NButton as l, NImage as u, NProgress as d, useMessage as f } from "naive-ui";
+import { useVModel as p } from "@vueuse/core";
+import m from "clsx";
+import { VueDraggable as h } from "vue-draggable-plus";
+const g = /* @__PURE__ */ a({
+	name: "DuxImageUpload",
+	props: {
+		path: {
+			type: String,
+			default: "upload"
+		},
+		signPath: {
+			type: String,
+			default: ""
+		},
+		signCallback: Function,
+		managePath: {
+			type: String,
+			default: ""
+		},
+		driver: { type: String },
+		maxNum: Number,
+		maxSize: {
+			type: Number,
+			default: 0
+		},
+		multiple: Boolean,
+		manager: Boolean,
+		value: [String, Array],
+		defaultValue: [String, Array],
+		onUpdateValue: Function,
+		method: String
+	},
+	setup(a, { emit: g }) {
+		let _ = p(a, "value", g, {
+			passive: !0,
+			deep: !0,
+			defaultValue: a.defaultValue
+		}), v = f(), y = t(), { t: b } = s(), x = {
+			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",
+			statusOverlay: "z-2 size-full inset-0 absolute flex flex-col items-center justify-center rounded bg-default/65 pointer-events-none",
+			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"
+		}, S = r(() => a.maxSize), { uploadPath: C, managePath: w, driver: T, method: E } = n({
+			driver: a?.driver,
+			signPath: a?.signPath,
+			signCallback: a?.signCallback,
+			uploadPath: a?.path,
+			managePath: a?.managePath,
+			method: a?.method
+		}), D = c({
+			path: C.value,
+			multiple: a.multiple,
+			maxFileCount: a.maxNum,
+			maxFileSize: S.value * 1024 * 1024,
+			autoUpload: !0,
+			accept: "image/*",
+			params: a.manager ? { manager: "true" } : void 0,
+			method: E.value,
+			onError: (e) => {
+				v.error(e.message || b("components.upload.error"));
+			},
+			driver: T.value
+		});
+		o(D.dataFiles, (e) => {
+			let t = a.multiple ? e?.map((e) => e.url) : e?.[0]?.url;
+			_.value = t, a.onUpdateValue?.(t);
+		});
+		let O = r(() => D.progress.value.totalPercent), k = r(() => D.isUploading.value || D.uploadFiles.value.some((e) => e?.status === "uploading")), A = async () => {
+			D.open();
+		}, j = r(() => a.multiple ? a.maxNum && D.uploadFiles.value.length >= a.maxNum : !0), M = r(() => D.dataFiles.value?.map((e) => e.url)), N = e();
+		return o(_, (e) => {
+			if (!e || !(Array.isArray(e) ? e.length : String(e).length)) return;
+			let t = typeof e == "string" ? [e] : Array.isArray(e) ? e : [], n = (D.dataFiles.value || []).map((e) => e.url).filter(Boolean), r = t.filter((e) => !n.includes(e));
+			r.length && D.addDataFiles(r.map((e) => ({ url: e })));
+		}, {
+			immediate: !0,
+			deep: !0
+		}), () => i("div", null, [i(h, {
+			modelValue: D.uploadFiles.value,
+			"onUpdate:modelValue": (e) => D.uploadFiles.value = e,
+			class: x.container,
+			draggable: ".draggable"
+		}, { default: () => [D.uploadFiles.value?.map((e, t) => {
+			let n = e.url || URL.createObjectURL(e.file);
+			return i("div", {
+				key: t,
+				class: m(x.imageItem)
+			}, [
+				i(u, {
+					class: "z-0 rounded",
+					objectFit: "scale-down",
+					width: 78,
+					height: 78,
+					previewDisabled: !0,
+					src: n
+				}, null),
+				e.status !== "success" && e.status !== "cancelled" && i("div", { class: x.statusOverlay }, [e.status === "error" ? i("div", { class: "i-tabler:alert-circle size-5 text-error" }, null) : i(d, {
+					type: "circle",
+					strokeWidth: 8,
+					showIndicator: !1,
+					percentage: Math.max(0, Math.min(100, Number(e.progress?.percent || 0))),
+					style: {
+						width: "34px",
+						height: "34px"
+					}
+				}, null)]),
+				i("div", { class: x.imageOverlay }, [e.status === "success" && i(l, {
+					quaternary: !0,
+					circle: !0,
+					size: "small",
+					renderIcon: () => i("div", { class: "n-icon i-tabler:eye" }, null),
+					onClick: () => y.show(M.value, t)
+				}, null), i(l, {
+					quaternary: !0,
+					circle: !0,
+					size: "small",
+					renderIcon: () => i("div", { class: "n-icon i-tabler:trash" }, null),
+					onClick: () => {
+						D.removeFiles([e.id]);
+					}
+				}, null)])
+			]);
+		}), (D.uploadFiles.value.length === 0 || !j.value) && i("div", {
+			class: x.uploadArea,
+			onClick: () => {
+				A();
+			}
+		}, [a.manager && i("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: b("components.upload.title"),
+					width: "800px",
+					component: () => import("./manager.js"),
+					componentProps: {
+						path: w.value,
+						type: "image",
+						multiple: a.multiple,
+						uploadParams: {
+							path: C.value,
+							accept: "image/*",
+							maxNum: a.maxNum,
+							maxSize: a.maxSize,
+							method: E.value
+						}
+					}
+				}).then((e) => {
+					D.addDataFiles(e);
+				});
+			}
+		}, [i("div", { class: "i-tabler:folder size-4" }, null)]), i("div", { class: x.uploadContent }, [k.value ? i("div", { class: x.progressContainer }, [i("div", { class: x.progressBar }, [i(d, {
+			type: "line",
+			percentage: O.value,
+			showIndicator: !1,
+			height: 4
+		}, null)])]) : i("div", { class: "i-tabler:plus size-4" }, null)])])] })]);
+	}
 });
-export {
-  $e as DuxImageUpload
-};
+export { g as DuxImageUpload };

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

@@ -0,0 +1,5 @@
+import "./file.js";
+import "./image.js";
+import "./video.js";
+import "./manager.js";
+import "./selectFile.js";