@keyblade/pro-components 1.12.1-alpha.12 → 1.12.1-alpha.14

package/es/pro-image-upload/image-upload.vue.js

@@ -1,29 +1,28 @@
-import { defineComponent as ne, ref as m, computed as C, watch as D, resolveComponent as oe, openBlock as te, createElementBlock as ie, createVNode as ue, normalizeClass as re } from "vue";
-import { Message as U } from "@arco-design/web-vue";
-import { conclude as b } from "vue-global-config";
-import { EImageUploadInnerBeforeUploadStep as v } from "./types.js";
-import { defaultImageUploadOptions as x } from "./constant.js";
-import { defaultImageUploadCheckOptions as de, defaultImageUploadCompressorOptions as se, defaultImageUploadCropOptions as ce, oneTravelImageCheckAndTransform as fe, oneTravelImageCompressor as ve } from "@keyblade/one-travel";
-const me = "keyblade-pro-image-upload";
-var G, J, K;
-const Ee = /* @__PURE__ */ ne({
+import { defineComponent as X, mergeModels as V, useModel as Y, ref as d, computed as U, watch as F, openBlock as Z, createElementBlock as N } from "vue";
+import { Message as I } from "@arco-design/web-vue";
+import { conclude as x } from "vue-global-config";
+import { EImageUploadInnerBeforeUploadStep as i } from "./types.js";
+import { defaultImageUploadOptions as f } from "./constant.js";
+import { defaultImageUploadCheckOptions as A, defaultImageUploadCompressorOptions as R, defaultImageUploadCropOptions as ee, oneTravelImageCheckAndTransform as ae, oneTravelImageCompressor as oe } from "@keyblade/one-travel";
+var T, q, P;
+const se = /* @__PURE__ */ X({
   __name: "image-upload",
-  props: {
+  props: /* @__PURE__ */ V({
     action: {},
     handlerResponse: {},
     headers: {},
     data: {},
-    name: { default: (G = x) == null ? void 0 : G.name },
+    name: { default: (T = f) == null ? void 0 : T.name },
     tip: {},
     accept: { default: () => {
-      var B;
-      return ((B = x) == null ? void 0 : B.accept) || [];
+      var v;
+      return ((v = f) == null ? void 0 : v.accept) || [];
     } },
-    multiple: { type: Boolean, default: x.multiple },
-    singleLimit: { default: x.singleLimit },
+    multiple: { type: Boolean, default: f.multiple },
+    singleLimit: { default: f.singleLimit },
     limit: {},
-    disabled: { type: Boolean, default: (J = x) == null ? void 0 : J.disabled },
-    hideInnerBeforeUploadLoading: { type: Boolean, default: (K = x) == null ? void 0 : K.hideInnerBeforeUploadLoading },
+    disabled: { type: Boolean, default: (q = f) == null ? void 0 : q.disabled },
+    hideInnerBeforeUploadLoading: { type: Boolean, default: (P = f) == null ? void 0 : P.hideInnerBeforeUploadLoading },
     checkOptions: {},
     compressorOptions: {},
     cropOptions: {},
@@ -33,121 +32,87 @@ const Ee = /* @__PURE__ */ ne({
     onBeforeUpload: {},
     onInnerBeforeUploadStart: {},
     onInnerBeforeUploadEnd: {}
-  },
-  emits: ["cropperImgLoad"],
-  setup(B, { expose: X, emit: ge }) {
-    const e = B, i = defineModel({ required: !0 }), M = m(), Y = m(), O = m(), g = m(
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ V(["cropperImgLoad"], ["update:modelValue"]),
+  setup(v, { expose: D, emit: le }) {
+    Y(v, "modelValue");
+    const e = v, G = d(), J = d(), B = d(), M = d(
       []
-    ), o = m(), c = m(), d = m(), Z = C(() => e.accept.map((a) => `.${a}`).join(",")), f = C(() => b([e.checkOptions, de]) || {}), p = C(() => b([e.compressorOptions, se]) || {}), y = C(() => b([e.cropOptions, ce]) || {}), _ = (a) => {
-      var t, u, s, r;
-      const n = (r = (s = (u = (t = M.value) == null ? void 0 : t.$el) == null ? void 0 : u.querySelector) == null ? void 0 : s.call(u, "input")) == null ? void 0 : r.files;
-      return n && n.length > 0 && (d.value = {
-        selectCount: n.length
-      }), e != null && e.onBeforeUpload ? e == null ? void 0 : e.onBeforeUpload(a) : d.value && (e != null && e.singleLimit) && d.value.selectCount > (e == null ? void 0 : e.singleLimit) ? (d.value.handleIndex === void 0 ? (d.value.handleIndex = 0, U.error(`单次最多可选择${e == null ? void 0 : e.singleLimit}张图片`)) : d.value.handleIndex += 1, d.value.handleIndex === d.value.selectCount - 1 && (d.value = void 0), !1) : new Promise(async (E, w) => {
-        try {
-          E(await le(a));
-        } catch {
-          w();
-        } finally {
-          L();
-        }
-      });
-    }, A = async (a) => {
-      const n = i.value.findIndex((t) => t.uid === a.uid);
-      return i.value.splice(n, 1), i.value = [...i.value], !1;
-    }, R = (a, n) => {
-      e != null && e.onExceed ? e == null || e.onExceed(a, n) : (U.error(`单次最多可选择${(e == null ? void 0 : e.limit) || 1}张图片`), i.value = a);
-    }, ee = async (a) => {
-      if (e != null && e.onSuccess)
-        e == null || e.onSuccess(a);
-      else {
-        if (!(e != null && e.handlerResponse))
-          return;
-        const n = await e.handlerResponse(a.response), t = i.value.findIndex((u) => u.uid === a.uid);
-        n.success ? i.value[t] = {
-          ...i.value[t],
-          ...n
-        } : i.value.splice(t, 1);
-      }
-    }, ae = (a) => {
-      e != null && e.onError ? e == null || e.onError(a) : setTimeout(() => {
-        const n = i.value.findIndex((t) => t.uid === a.uid);
-        i.value.splice(n, 1);
-      });
-    }, le = (a) => new Promise((n, t) => {
-      g.value.push({ file: a, resolve: n, reject: t }), g.value.length === 1 && !o.value && L();
-    }), L = () => {
-      o.value === void 0 ? o.value = 0 : o.value + 1 >= g.value.length ? (o.value = void 0, g.value = []) : o.value += 1;
-    };
-    D(o, async () => {
-      var E, w, S, $, F, z, j, k, Q, H, W, P, T, q, N, V;
-      if (o.value === void 0 || g.value.length === 0)
+    ), o = d(), r = d();
+    d(), U(() => e.accept.map((u) => `.${u}`).join(","));
+    const n = U(() => x([e.checkOptions, A]) || {}), g = U(() => x([e.compressorOptions, R]) || {}), p = U(() => x([e.cropOptions, ee]) || {});
+    F(o, async () => {
+      var w, y, E, O, C, S, b, z, _, j, L, $, H, W, k, Q;
+      if (o.value === void 0 || M.value.length === 0)
         return;
-      const a = g.value[o.value], { file: n, resolve: t, reject: u } = a;
-      let s = n.name, r = n;
-      if ((E = f.value) != null && E.enable) {
-        c.value = {
+      const u = M.value[o.value], { file: l, resolve: K, reject: h } = u;
+      let s = l.name, t = l;
+      if ((w = n.value) != null && w.enable) {
+        r.value = {
           loading: !0,
           text: `第${o.value + 1}张图片检测中，请稍等`
-        }, (w = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || w.call(
+        }, (y = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || y.call(
           e,
-          n,
+          l,
           o.value,
-          v.check
+          i.check
         );
-        const l = await fe(n, n.name, {
-          imageMaxSize: f.value.maxSize,
-          imageAllowedType: f.value.allowedType,
-          imageMinWidth: f.value.minWidth,
-          imageMinHeight: f.value.minHeight,
-          imageMaxWidth: f.value.maxWidth,
-          imageMaxHeight: f.value.maxHeight
+        const a = await ae(l, l.name, {
+          imageMaxSize: n.value.maxSize,
+          imageAllowedType: n.value.allowedType,
+          imageMinWidth: n.value.minWidth,
+          imageMinHeight: n.value.minHeight,
+          imageMaxWidth: n.value.maxWidth,
+          imageMaxHeight: n.value.maxHeight
         });
-        if (c.value = void 0, (S = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || S.call(
+        if (r.value = void 0, (E = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || E.call(
           e,
-          n,
+          l,
           o.value,
-          v.check,
+          i.check,
           {
-            success: l.success,
-            error: l == null ? void 0 : l.error,
-            errorMessage: l == null ? void 0 : l.errorMessage
+            success: a.success,
+            error: a == null ? void 0 : a.error,
+            errorMessage: a == null ? void 0 : a.errorMessage
           }
-        ), !l.success)
-          return ($ = f.value) != null && $.showErrorMessage && U.error((l == null ? void 0 : l.errorMessage) || "图片校验及转换失败"), u();
-        if (l != null && l.hasTransform) {
-          const I = s == null ? void 0 : s.split(".");
-          I.pop(), s = `${I.join(",")}.jpg`, r = new File([l.file], s, {
-            type: l.file.type
+        ), !a.success)
+          return (O = n.value) != null && O.showErrorMessage && I.error((a == null ? void 0 : a.errorMessage) || "图片校验及转换失败"), h();
+        if (a != null && a.hasTransform) {
+          const m = s == null ? void 0 : s.split(".");
+          m.pop(), s = `${m.join(",")}.jpg`, t = new File([a.file], s, {
+            type: a.file.type
           });
         } else
-          r = l.file;
+          t = a.file;
       }
-      if ((F = y.value) != null && F.enable) {
-        (z = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || z.call(
+      if ((C = p.value) != null && C.enable) {
+        (S = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || S.call(
           e,
-          n,
+          l,
           o.value,
-          v.crop
+          i.crop
         );
         try {
-          (j = y.value) != null && j.customCrop ? r = await y.value.customCrop(r) : r = await new Promise((l, I) => {
-            O.value = { file: r, resolve: l, reject: I };
-          }), (k = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || k.call(
+          (b = p.value) != null && b.customCrop ? t = await p.value.customCrop(t) : t = await new Promise((a, m) => {
+            B.value = { file: t, resolve: a, reject: m };
+          }), (z = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || z.call(
             e,
-            n,
+            l,
             o.value,
-            v.crop,
+            i.crop,
             {
               success: !1
             }
           );
         } catch {
-          return (Q = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || Q.call(
+          return (_ = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || _.call(
             e,
-            n,
+            l,
             o.value,
-            v.crop,
+            i.crop,
             {
               success: !1,
               error: {
@@ -155,98 +120,71 @@ const Ee = /* @__PURE__ */ ne({
               },
               errorMessage: "图片剪裁失败"
             }
-          ), (H = y.value) != null && H.showErrorMessage && U.error("图片剪裁失败"), u();
+          ), (j = p.value) != null && j.showErrorMessage && I.error("图片剪裁失败"), h();
         } finally {
-          O.value = void 0;
+          B.value = void 0;
         }
       }
-      if ((W = p.value) != null && W.enable) {
-        c.value = {
+      if ((L = g.value) != null && L.enable) {
+        r.value = {
           loading: !0,
           text: `第${o.value + 1}张图片处理中，请稍等`
-        }, (P = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || P.call(
+        }, ($ = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || $.call(
           e,
-          n,
+          l,
           o.value,
-          v.compress
+          i.compress
         );
-        const l = await ve(r, {
-          maxSize: p.value.maxSize,
-          size: p.value.size,
-          excludeAllowedTypes: (T = p.value.excludeAllowedTypes) == null ? void 0 : T.map((I) => `image/${I}`)
+        const a = await oe(t, {
+          maxSize: g.value.maxSize,
+          size: g.value.size,
+          excludeAllowedTypes: (H = g.value.excludeAllowedTypes) == null ? void 0 : H.map((m) => `image/${m}`)
         });
-        if (c.value = void 0, (q = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || q.call(
+        if (r.value = void 0, (W = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || W.call(
           e,
-          n,
+          l,
           o.value,
-          v.compress,
+          i.compress,
           {
-            success: l.success,
+            success: a.success,
             error: {
               compress: !0
             },
-            errorMessage: l == null ? void 0 : l.errorMessage
+            errorMessage: a == null ? void 0 : a.errorMessage
           }
-        ), !l.success)
-          return (N = p.value) != null && N.showErrorMessage && U.error((l == null ? void 0 : l.errorMessage) || "图片压缩失败"), u();
-        r = new File([l.file], s, {
-          type: l.file.type
+        ), !a.success)
+          return (k = g.value) != null && k.showErrorMessage && I.error((a == null ? void 0 : a.errorMessage) || "图片压缩失败"), h();
+        t = new File([a.file], s, {
+          type: a.file.type
         });
       }
-      c.value = void 0, (V = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || V.call(
+      r.value = void 0, (Q = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || Q.call(
         e,
-        n,
+        l,
         o.value,
-        v.all,
+        i.all,
         {
           success: !0
         }
-      ), t(r);
+      ), K(t);
     });
-    let h;
-    return D(
-      () => c.value,
+    let c;
+    return F(
+      () => r.value,
       () => {
-        var a;
-        c.value ? h = U.loading({
-          content: c.value.text,
+        var u;
+        r.value ? c = I.loading({
+          content: r.value.text,
           id: "image-upload-id",
           duration: 0
-        }) : (a = h == null ? void 0 : h.close) == null || a.call(h);
+        }) : (u = c == null ? void 0 : c.close) == null || u.call(c);
       }
-    ), X({
-      uploadInsRef: M,
-      cropperInsRef: Y
-    }), (a, n) => {
-      const t = oe("a-upload");
-      return te(), ie("div", null, [
-        ue(t, {
-          class: re([`${me}-upload`]),
-          ref_key: "uploadInsRef",
-          ref: M,
-          "list-type": "picture-card",
-          tip: a.tip || "上传",
-          "image-preview": "",
-          "file-list": i.value,
-          "onUpdate:fileList": n[0] || (n[0] = (u) => i.value = u),
-          action: a.action,
-          headers: a.headers,
-          data: a.data,
-          name: a.name,
-          accept: Z.value,
-          multiple: a.multiple,
-          limit: a.limit,
-          disabled: a.disabled,
-          "on-before-upload": _,
-          "on-before-remove": A,
-          onExceedLimit: R,
-          onSuccess: ee,
-          onError: ae
-        }, null, 8, ["class", "tip", "file-list", "action", "headers", "data", "name", "accept", "multiple", "limit", "disabled"])
-      ]);
-    };
+    ), D({
+      uploadInsRef: G,
+      cropperInsRef: J
+    }), (u, l) => (Z(), N("div"));
   }
 });
 export {
-  Ee as default
+  se as default
 };