@zl-ui-kit/components 0.20.1 → 0.21.0

package/dist/components/ZlUpload/index2.vue.mjs

@@ -1,16 +1,19 @@
-import { defineComponent as K, computed as n, useModel as T, ref as S, useAttrs as q, resolveComponent as N, resolveDirective as R, withDirectives as Z, openBlock as v, createElementBlock as g, createVNode as w, mergeProps as O, withCtx as B, renderSlot as W, createElementVNode as d, toDisplayString as x, createCommentVNode as V, mergeModels as G } from "vue";
-import { useZlT as H } from "@zl-ui-kit/composables";
-import { joinFilePrefix as J } from "@zl-ui-kit/utils";
-import { ElMessage as z } from "element-plus";
-import U from "../ZlIcon/index.vue.mjs";
-const Q = { class: "zl-upload" }, X = { class: "zl-upload__trigger" }, Y = { class: "zl-upload__item" }, ee = ["src", "onClick"], te = ["title"], oe = ["href", "download"], le = {
+import { defineComponent as I, computed as n, useModel as N, ref as h, useAttrs as Z, resolveComponent as O, resolveDirective as W, withDirectives as G, openBlock as f, createElementBlock as m, createVNode as b, mergeProps as H, withCtx as g, renderSlot as w, createElementVNode as z, normalizeProps as J, guardReactiveProps as Q, toDisplayString as $, createCommentVNode as x, mergeModels as X } from "vue";
+import { useZlT as Y } from "@zl-ui-kit/composables";
+import { joinFilePrefix as ee } from "@zl-ui-kit/utils";
+import { ElMessage as B } from "element-plus";
+import R from "../ZlIcon/index.vue.mjs";
+const te = { class: "zl-upload" }, le = { class: "zl-upload__trigger" }, oe = {
+  key: 1,
+  class: "zl-upload__item"
+}, ae = ["src", "onClick"], ie = ["title"], se = ["href", "download"], re = {
   key: 0,
   class: "zl-upload__tip"
-}, ue = /* @__PURE__ */ K({
+}, fe = /* @__PURE__ */ I({
   name: "ZlUpload",
   inheritAttrs: !1,
   __name: "index",
-  props: /* @__PURE__ */ G({
+  props: /* @__PURE__ */ X({
     request: {},
     modelValue: { default: "" },
     accept: {},
@@ -23,133 +26,170 @@ const Q = { class: "zl-upload" }, X = { class: "zl-upload__trigger" }, Y = { cla
     tipVisible: { type: Boolean, default: void 0 },
     showDownloadButton: { type: Boolean, default: void 0 },
     showTip: { type: Boolean, default: void 0 },
-    verifySpace: { type: Boolean, default: !1 }
+    verifySpace: { type: Boolean, default: !1 },
+    listType: { default: "picture" },
+    disabled: { type: Boolean, default: void 0 },
+    drag: { type: Boolean, default: void 0 },
+    directory: { type: Boolean, default: void 0 },
+    multiple: { type: Boolean, default: void 0 },
+    showFileList: { type: Boolean, default: !0 },
+    autoUpload: { type: Boolean, default: !0 },
+    beforeRemove: {}
   }, {
     modelValue: { default: "" },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(h) {
-    const { t: u } = H(), t = h, $ = n(() => t.downloadButtonVisible ?? t.showDownloadButton ?? !0), j = n(() => t.tipVisible ?? t.showTip ?? !0), r = T(h, "modelValue"), m = S([]);
+  setup(S, { expose: L }) {
+    const { t: d } = Y(), t = S, k = n(() => t.downloadButtonVisible ?? t.showDownloadButton ?? !0), P = n(() => t.tipVisible ?? t.showTip ?? !0), u = N(S, "modelValue"), v = h([]);
     function C(e) {
-      return e.split(t.separator).filter((o) => !!o).map((o) => {
-        const s = m.value.filter((a) => a.status === "success").find((a) => a.response?.[t.responseUrlKey] === o);
+      return e.split(t.separator).filter((l) => !!l).map((l) => {
+        const a = v.value.filter((i) => i.status === "success").find((i) => i.response?.[t.responseUrlKey] === l);
         return {
-          url: s ? s.url : J(o),
-          name: (o.match(/[^/\\]+$/)?.[0] ?? o).split("-").pop() ?? o,
-          isImage: /\.(?:jpe?g|png|gif|bmp|webp)$/i.test(o),
+          url: a ? a.url : ee(l),
+          name: (l.match(/[^/\\]+$/)?.[0] ?? l).split("-").pop() ?? l,
+          isImage: /\.(?:jpe?g|png|gif|bmp|webp)$/i.test(l),
           response: {
-            [t.responseUrlKey]: o
+            [t.responseUrlKey]: l
           },
           status: "success"
         };
       });
     }
-    function F(e) {
-      return e.filter((o) => o.status === "success").map((o) => o.response?.[t.responseUrlKey]).filter(Boolean).join(t.separator);
+    function T(e) {
+      return e.filter((l) => l.status === "success").map((l) => l.response?.[t.responseUrlKey]).filter(Boolean).join(t.separator);
     }
-    const b = n({
+    const U = n({
       get() {
-        return typeof r.value == "string" ? [...C(r.value), ...m.value.filter((e) => e.status !== "success")] : r.value;
+        return typeof u.value == "string" ? [...C(u.value), ...v.value.filter((e) => e.status !== "success")] : u.value;
       },
       set(e) {
-        r.value = typeof r.value == "string" ? F(e) : e, m.value = e;
+        u.value = typeof u.value == "string" ? T(e) : e, v.value = e;
       }
-    }), k = q(), D = n(() => t.accept ? t.accept.split(",") : []);
-    function L(e) {
-      const { file: o, onSuccess: s, onError: a, onProgress: l } = e, _ = new AbortController(), E = (i) => {
-        const I = i.total > 0 ? i.loaded / i.total * 90 : 0;
-        l({ percent: I });
-      }, y = new FormData();
-      return y.append("file", o), t.request?.(y, { signal: _.signal, onUploadProgress: E }).then((i) => {
-        s({ ...i.data });
-      }).catch((i) => {
-        a(i);
+    }), V = Z(), j = n(() => t.accept ? t.accept.split(",") : []);
+    function D(e) {
+      const { file: l, onSuccess: a, onError: i, onProgress: o } = e, y = new AbortController(), K = (s) => {
+        const q = s.total > 0 ? s.loaded / s.total * 90 : 0;
+        o({ percent: q });
+      }, F = new FormData();
+      return F.append("file", l), t.request?.(F, { signal: y.signal, onUploadProgress: K }).then((s) => {
+        a({ ...s.data });
+      }).catch((s) => {
+        i(s);
       }), {
         abort() {
-          _.abort();
+          y.abort();
         }
       };
     }
     const c = n(() => {
       const e = {};
-      return t.accept && (e.accept = u("zl.upload.accept", `仅支持${t.accept}格式的文件`, { accept: t.accept })), t.limit && (e.limit = u("zl.upload.limit", `最多可上传${t.limit}个`, { limit: t.limit })), t.maxSize && (e.maxSize = u("zl.upload.maxSize", `大小不超过${t.maxSize}MB`, { maxSize: t.maxSize })), e;
-    }), f = n(() => {
+      return t.accept && (e.accept = d("zl.upload.accept", `仅支持${t.accept}格式的文件`, { accept: t.accept })), t.limit && (e.limit = d("zl.upload.limit", `最多可上传${t.limit}个`, { limit: t.limit })), t.maxSize && (e.maxSize = d("zl.upload.maxSize", `大小不超过${t.maxSize}MB`, { maxSize: t.maxSize })), e;
+    }), _ = n(() => {
       const e = [t.tip, ...Object.values(c.value)].filter(Boolean).join(", ");
       return {
         accept: t.accept,
         limit: t.limit,
-        multiple: t.limit ? t.limit > 1 : !0,
-        httpRequest: L,
-        fileList: b.value,
-        "onUpdate:fileList": (o) => b.value = o,
-        ...k,
+        listType: t.listType,
+        disabled: t.disabled,
+        drag: t.drag,
+        directory: t.directory,
+        showFileList: t.showFileList,
+        autoUpload: t.autoUpload,
+        beforeRemove: t.beforeRemove,
+        multiple: t.multiple ?? (t.limit ? t.limit > 1 : !0),
+        httpRequest: D,
+        fileList: U.value,
+        "onUpdate:fileList": (l) => U.value = l,
+        ...V,
         // tip 不透传 el-upload（无此属性），由组件尾部渲染
         tip: void 0,
-        __tip: j.value ? e : ""
+        __tip: P.value ? e : ""
       };
     });
-    function P(e) {
-      return D.value.some((o) => o.includes("/") ? e.type.startsWith(o.replace(/\*$/, "")) : e.name.endsWith(o));
-    }
     function A(e) {
-      return t.verifySpace && /\s/.test(e.name) ? (z.warning(u("zl.upload.nameSpace", "文件名中不得包含空格")), !1) : c.value.accept && !P(e) ? (z.warning(c.value.accept), !1) : t.maxSize && e.size > t.maxSize * 1024 * 1024 ? (z.warning(c.value.maxSize), !1) : !0;
+      return j.value.some((l) => l.includes("/") ? e.type.startsWith(l.replace(/\*$/, "")) : e.name.endsWith(l));
+    }
+    async function M(e) {
+      const l = V.beforeUpload;
+      if (typeof l == "function")
+        try {
+          if (await l(e) === !1) return !1;
+        } catch {
+          return !1;
+        }
+      return t.verifySpace && /\s/.test(e.name) ? (B.warning(d("zl.upload.nameSpace", "文件名中不得包含空格")), !1) : c.value.accept && !A(e) ? (B.warning(c.value.accept), !1) : t.maxSize && e.size > t.maxSize * 1024 * 1024 ? (B.warning(c.value.maxSize), !1) : !0;
     }
-    const p = S(!1);
-    function M(e) {
-      e.status === "success" && (p.value = !0, fetch(e.url ?? "").then((o) => o.blob()).then((o) => {
+    const p = h(!1);
+    function E(e) {
+      e.status === "success" && (p.value = !0, fetch(e.url ?? "").then((l) => l.blob()).then((l) => {
         p.value = !1;
-        const s = URL.createObjectURL(o);
-        window.open(s);
+        const a = URL.createObjectURL(l);
+        window.open(a);
       }).catch(() => {
         p.value = !1;
       }));
     }
-    return (e, o) => {
-      const s = N("el-upload"), a = R("loading");
-      return Z((v(), g("div", Q, [
-        w(s, O(f.value, {
-          "before-upload": A,
-          "list-type": "picture"
-        }), {
-          file: B(({ file: l }) => [
-            d("div", Y, [
-              d("img", {
+    const r = h();
+    return L({
+      /** 取消（中止）正在进行的上传请求 */
+      abort: () => r.value?.abort(),
+      /** 手动提交文件列表，配合 `auto-upload=false` 使用 */
+      submit: () => r.value?.submit(),
+      /** 清空文件列表；可传状态数组只清指定状态（如 `['ready']`） */
+      clearFiles: (e) => r.value?.clearFiles(e),
+      /** 手动把文件加入上传列表（等价于用户选择文件） */
+      handleStart: (e) => r.value?.handleStart(e),
+      /** 手动从列表移除某个文件 */
+      handleRemove: (e) => r.value?.handleRemove(e)
+    }), (e, l) => {
+      const a = O("el-upload"), i = W("loading");
+      return G((f(), m("div", te, [
+        b(a, H({
+          ref_key: "uploadRef",
+          ref: r
+        }, _.value, { "before-upload": M }), {
+          file: g((o) => [
+            e.$slots.file ? w(e.$slots, "file", J(Q(o)), void 0, !0, 0) : (f(), m("div", oe, [
+              z("img", {
                 class: "zl-upload__item-thumbnail",
-                src: (l.isImage !== !1 && /\.(?:jpe?g|png|gif|bmp|webp)$/i.test(l.name), l.url),
-                onClick: (_) => M(l)
-              }, null, 8, ee),
-              d("span", {
+                src: o.file.url,
+                onClick: (y) => E(o.file)
+              }, null, 8, ae),
+              z("span", {
                 class: "zl-upload__item-name",
-                title: l.name
-              }, x(l.name), 9, te),
-              $.value && l.status === "success" && l.url ? (v(), g("a", {
+                title: o.file.name
+              }, $(o.file.name), 9, ie),
+              k.value && o.file.status === "success" && o.file.url ? (f(), m("a", {
                 key: 0,
                 class: "zl-upload__item-op",
-                href: l.url,
-                download: l.name
+                href: o.file.url,
+                download: o.file.name
               }, [
-                w(U, { icon: "zl:download" })
-              ], 8, oe)) : V("", !0)
-            ])
+                b(R, { icon: "zl:download" })
+              ], 8, se)) : x("", !0)
+            ]))
+          ]),
+          tip: g(() => [
+            w(e.$slots, "tip", {}, void 0, !0)
           ]),
-          default: B(() => [
-            W(e.$slots, "default", {}, () => [
-              d("div", X, [
-                w(U, { icon: "zl:add" })
+          default: g(() => [
+            w(e.$slots, "default", {}, () => [
+              z("div", le, [
+                b(R, { icon: "zl:add" })
               ])
             ], !0)
           ]),
           _: 3
         }, 16),
-        f.value.__tip ? (v(), g("div", le, x(f.value.__tip), 1)) : V("", !0)
+        _.value.__tip && !e.$slots.tip ? (f(), m("div", re, $(_.value.__tip), 1)) : x("", !0)
       ])), [
-        [a, p.value]
+        [i, p.value]
       ]);
     };
   }
 });
 export {
-  ue as default
+  fe as default
 };
 //# sourceMappingURL=index2.vue.mjs.map

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { default as ZlAppSlogan } from './components/ZlAppSlogan/index.vue';
 export { default as ZlAutoTooltip } from './components/ZlAutoTooltip/index.vue';
 export { default as ZlAvatar } from './components/ZlAvatar/index.vue';
 export { default as ZlAvatarGroup } from './components/ZlAvatar/Group.vue';
+export { default as ZlBreadcrumb } from './components/ZlBreadcrumb/index.vue';
 export { default as ZlCard } from './components/ZlCard/index.vue';
 export { default as ZlCardPage } from './components/ZlCardPage/index.vue';
 export { default as ZlCheckAll } from './components/ZlCheckAll/index.vue';
@@ -64,6 +65,7 @@ export { usePermission, usePermissionProvider } from './components/ZlPermission/
 export type { MenuItem } from './components/ZlAppMenu/AppMenu.vue';
 export type { MenuOption } from './components/ZlMenu/types';
 export type { StepItem } from './components/ZlStep/index.vue';
+export type { BreadcrumbItem } from './components/ZlBreadcrumb/types';
 export type { ActionItem, FormItem, SearchItem, TableColumn } from './types';
 export type { IGridItem } from './components/ZlGrid/types';
 export type { IComponent, IComponentSlot, VForSlot, VModelSlot, ComponentOrSlot, } from './components/ZlDynamicComponent/types';