@keyblade/pro-components 1.11.6 → 1.12.0-alpha.1

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

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

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

@@ -0,0 +1,4 @@
+import f from "./image-upload.vue.js";
+export {
+  f as default
+};