@keyblade/pro-components 1.12.1-alpha.19 → 1.12.1-alpha.21

package/es/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/es/pro-image-upload/cropper.vue.d.ts

@@ -0,0 +1,20 @@
+import { ImageUploadCropOptions } from '@keyblade/one-travel';
+type __VLS_Props = {
+    file: File;
+    index: number;
+    options: ImageUploadCropOptions;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    cropperInsRef: import('vue').Ref<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    confirm: (value: File) => any;
+    imgLoad: (value: File) => any;
+    reUpload: (index: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((value: File) => any) | undefined;
+    onImgLoad?: ((value: File) => any) | undefined;
+    onReUpload?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,7 @@
+import o from "./cropper.vue2.js";
+/* empty css             */
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-ae8ab9e0"]]);
+export {
+  e as default
+};

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

@@ -0,0 +1,211 @@
+import { defineComponent as D, ref as d, watch as M, resolveComponent as l, openBlock as P, createBlock as q, normalizeClass as m, withCtx as n, createVNode as e, mergeProps as G, createElementVNode as y, createTextVNode as x, nextTick as h } from "vue";
+import "vue-cropper/dist/index.css";
+import J from "vue-cropper/lib/vue-cropper.vue";
+const r = "keyblade-pro-image-upload-cropper", X = /* @__PURE__ */ D({
+  __name: "cropper",
+  props: {
+    file: {},
+    index: {},
+    options: {}
+  },
+  emits: ["cancel", "confirm", "imgLoad", "reUpload"],
+  setup(H, { expose: R, emit: W }) {
+    const s = H, f = W, o = d(), w = d(), u = d(!0), _ = d(!1), g = d({
+      autoCropWidth: 100,
+      autoCropHeight: 100
+    }), z = () => {
+      o.value.changeScale(1);
+    }, I = () => {
+      o.value.changeScale(-1);
+    }, L = () => {
+      o.value.rotateRight();
+      const { w: a, h: t } = v();
+      h(() => {
+        o.value.goAutoCrop(a, t);
+      });
+    }, $ = () => {
+      o.value.rotateLeft();
+      const { w: a, h: t } = v();
+      h(() => {
+        o.value.goAutoCrop(a, t);
+      });
+    }, N = () => {
+      o.value.reload(), o.value.rotateClear(), h(() => {
+        o.value.goAutoCrop();
+      });
+    }, b = () => {
+      f("cancel");
+    }, S = () => {
+      u.value || _.value || (_.value = !0, o.value.getCropBlob((a) => {
+        _.value = !1;
+        const t = new File([a], s.file.name, { type: "image/jpeg" });
+        f("confirm", t);
+      }));
+    }, A = () => {
+      u.value = !1;
+      const { w: a, h: t } = v();
+      g.value.autoCropWidth = a, g.value.autoCropHeight = t, f("imgLoad", s.file);
+    }, v = () => {
+      const a = Math.abs(o.value.rotate) % 2 > 0, t = (a ? o.value.trueHeight : o.value.trueWidth) * o.value.scale, i = (a ? o.value.trueWidth : o.value.trueHeight) * o.value.scale;
+      return { w: t, h: i };
+    };
+    return M(
+      () => s.file,
+      () => {
+        if (s.file) {
+          u.value = !0, o.value && o.value.clearCrop();
+          const a = new FileReader();
+          a.onloadend = () => {
+            const t = a.result, i = new Image();
+            i.onload = () => {
+              const C = i.width, c = i.height;
+              w.value = {
+                data: t,
+                width: C,
+                height: c
+              };
+            }, i.src = t;
+          }, a.readAsDataURL(s.file);
+        }
+      },
+      { immediate: !0 }
+    ), R({
+      cropperInsRef: o
+    }), (a, t) => {
+      const i = l("a-spin"), C = l("icon-zoom-in"), c = l("a-button"), p = l("a-tooltip"), B = l("icon-zoom-out"), V = l("icon-rotate-right"), E = l("icon-rotate-left"), F = l("icon-sync"), T = l("a-button-group"), U = l("a-space"), j = l("a-modal");
+      return P(), q(j, {
+        "render-to-body": "",
+        class: m(`${r}-dialog`),
+        title: "编辑图片",
+        width: "675px",
+        visible: !0,
+        footer: !1,
+        "mask-closable": !1,
+        "esc-to-close": !1,
+        "unmount-on-close": "",
+        onClose: b
+      }, {
+        default: n(() => [
+          e(i, {
+            class: m(`${r}-dialog-cropper-wrapper`),
+            loading: u.value
+          }, {
+            default: n(() => {
+              var k;
+              return [
+                e(J, G({
+                  ref_key: "cropperInsRef",
+                  ref: o,
+                  class: `${r}-dialog-cropper`,
+                  img: (k = w.value) == null ? void 0 : k.data,
+                  info: !1,
+                  autoCrop: !0,
+                  autoCropWidth: g.value.autoCropWidth,
+                  autoCropHeight: g.value.autoCropHeight,
+                  full: !0
+                }, a.options, { onImgLoad: A }), null, 16, ["class", "img", "autoCropWidth", "autoCropHeight"])
+              ];
+            }),
+            _: 1
+          }, 8, ["class", "loading"]),
+          y("div", {
+            class: m(`${r}-dialog-operate`)
+          }, [
+            e(T, { type: "primary" }, {
+              default: n(() => [
+                e(p, { content: "放大" }, {
+                  default: n(() => [
+                    e(c, { onClick: z }, {
+                      icon: n(() => [
+                        e(C)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                e(p, { content: "缩小" }, {
+                  default: n(() => [
+                    e(c, { onClick: I }, {
+                      icon: n(() => [
+                        e(B)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                e(p, { content: "向右旋转" }, {
+                  default: n(() => [
+                    e(c, { onClick: L }, {
+                      icon: n(() => [
+                        e(V)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                e(p, { content: "向左旋转" }, {
+                  default: n(() => [
+                    e(c, { onClick: $ }, {
+                      icon: n(() => [
+                        e(E)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                e(p, { content: "重置" }, {
+                  default: n(() => [
+                    e(c, { onClick: N }, {
+                      icon: n(() => [
+                        e(F)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ], 2),
+          y("div", {
+            class: m(`${r}-dialog-footer`)
+          }, [
+            e(U, {
+              class: m(`${r}-dialog-footer-right`)
+            }, {
+              default: n(() => [
+                e(c, { onClick: b }, {
+                  default: n(() => t[0] || (t[0] = [
+                    x("取消")
+                  ])),
+                  _: 1
+                }),
+                e(c, {
+                  disabled: u.value,
+                  type: "primary",
+                  onClick: S,
+                  loading: _.value
+                }, {
+                  default: n(() => t[1] || (t[1] = [
+                    x("确定")
+                  ])),
+                  _: 1
+                }, 8, ["disabled", "loading"])
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["class"]);
+    };
+  }
+});
+export {
+  X as default
+};

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

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

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

@@ -1,11 +1,12 @@
 import e from "./image-upload.vue.js";
-import { Modal as s, Upload as t, Button as u, Tooltip as l, Spin as m, Space as n, Message as i } from "@arco-design/web-vue";
-const c = Object.assign(e, {
+import { Modal as s, Upload as t, Button as n, Tooltip as u, Spin as m, Space as c, Message as i } from "@arco-design/web-vue";
+import { IconZoomIn as r, IconZoomOut as l, IconRotateLeft as I, IconRotateRight as f, IconSync as d } from "@arco-design/web-vue/es/icon";
+const S = Object.assign(e, {
   install: (o) => {
-    o.use(s), o.use(t), o.use(u), o.use(l), o.use(m), o.use(n), o.use(i), o.component("KbProImageUpload", e);
+    o.use(s), o.use(t), o.use(n), o.use(u), o.use(m), o.use(c), o.use(i), o.use(r), o.use(l), o.use(I), o.use(f), o.use(d), o.component("KbProImageUpload", e);
   }
 });
 export {
-  c as ProImageUpload,
-  c as default
+  S as ProImageUpload,
+  S as default
 };

package/es/style.css

@@ -1 +1 @@
-.keyblade-pro-page-header{background:var(--color-bg-2);padding:16px 32px}.keyblade-pro-page-header .keyblade-pro-page-header-section-breadcrumb .arco-breadcrumb-item:first-child{padding-left:0}.keyblade-pro-page-header .keyblade-pro-page-header-title.arco-typography{padding-top:4px;margin-top:0}.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout .keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--2156faf3);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background-color:var(--color-bg-2);border-bottom:1px solid var(--color-border);transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-header-left{cursor:pointer;display:flex;align-items:center}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-img{width:28px;height:28px}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout .keyblade-pro-layout-header-center{flex:1}.keyblade-pro-layout .keyblade-pro-layout-sider{padding-top:var(--2156faf3);position:fixed;top:0;left:0;z-index:99;height:100%;transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-sider-content{position:relative;height:100%;overflow:auto}.keyblade-pro-layout .keyblade-pro-layout-sider-collapse-btn.arco-btn{position:absolute;right:12px;bottom:12px}.keyblade-pro-layout .keyblade-pro-layout-body{padding-top:var(--2156faf3);padding-left:var(--2e3e7e4c);min-height:100vh;overflow-y:hidden;background-color:var(--color-fill-2);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-body-affix .arco-affix{z-index:98}.keyblade-pro-layout .keyblade-pro-layout-body-footer{display:flex;align-items:center;justify-content:center;height:40px;color:var(--color-text-2);text-align:center}.keyblade-pro-layout .keyblade-pro-layout-body-collapsed{padding-left:var(--a70b89aa)}.keyblade-pro-layout-side .keyblade-pro-layout-header{z-index:98;left:var(--2e3e7e4c);width:calc(100% - var(--2e3e7e4c))}.keyblade-pro-layout-side .keyblade-pro-layout-header-collapsed{left:var(--a70b89aa);width:calc(100% - var(--a70b89aa))}.keyblade-pro-layout-side .keyblade-pro-layout-sider{padding-top:0}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo{position:relative;display:flex;align-items:center;padding:16px;cursor:pointer;transition:padding .3s cubic-bezier(.645,.045,.355,1)}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-img{width:28px;height:28px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-collapsed .keyblade-pro-layout-sider-content-logo{padding:16px 10px}.keyblade-pro-menu .keyblade-pro-menu-item-img{width:14px;height:auto}.keyblade-pro-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}.keyblade-pro-page-container .keyblade-pro-page-container-content{padding:20px}
+.keyblade-pro-page-header{background:var(--color-bg-2);padding:16px 32px}.keyblade-pro-page-header .keyblade-pro-page-header-section-breadcrumb .arco-breadcrumb-item:first-child{padding-left:0}.keyblade-pro-page-header .keyblade-pro-page-header-title.arco-typography{padding-top:4px;margin-top:0}.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout .keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--2156faf3);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background-color:var(--color-bg-2);border-bottom:1px solid var(--color-border);transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-header-left{cursor:pointer;display:flex;align-items:center}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-img{width:28px;height:28px}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout .keyblade-pro-layout-header-center{flex:1}.keyblade-pro-layout .keyblade-pro-layout-sider{padding-top:var(--2156faf3);position:fixed;top:0;left:0;z-index:99;height:100%;transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-sider-content{position:relative;height:100%;overflow:auto}.keyblade-pro-layout .keyblade-pro-layout-sider-collapse-btn.arco-btn{position:absolute;right:12px;bottom:12px}.keyblade-pro-layout .keyblade-pro-layout-body{padding-top:var(--2156faf3);padding-left:var(--2e3e7e4c);min-height:100vh;overflow-y:hidden;background-color:var(--color-fill-2);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-body-affix .arco-affix{z-index:98}.keyblade-pro-layout .keyblade-pro-layout-body-footer{display:flex;align-items:center;justify-content:center;height:40px;color:var(--color-text-2);text-align:center}.keyblade-pro-layout .keyblade-pro-layout-body-collapsed{padding-left:var(--a70b89aa)}.keyblade-pro-layout-side .keyblade-pro-layout-header{z-index:98;left:var(--2e3e7e4c);width:calc(100% - var(--2e3e7e4c))}.keyblade-pro-layout-side .keyblade-pro-layout-header-collapsed{left:var(--a70b89aa);width:calc(100% - var(--a70b89aa))}.keyblade-pro-layout-side .keyblade-pro-layout-sider{padding-top:0}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo{position:relative;display:flex;align-items:center;padding:16px;cursor:pointer;transition:padding .3s cubic-bezier(.645,.045,.355,1)}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-img{width:28px;height:28px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-collapsed .keyblade-pro-layout-sider-content-logo{padding:16px 10px}.keyblade-pro-menu .keyblade-pro-menu-item-img{width:14px;height:auto}.keyblade-pro-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}.keyblade-pro-page-container .keyblade-pro-page-container-content{padding:20px}.keyblade-pro-image-upload-cropper-dialog-cropper-wrapper[data-v-ae8ab9e0]{width:100%;height:400px}.keyblade-pro-image-upload-cropper-dialog-operate[data-v-ae8ab9e0]{margin-top:24px;display:flex;align-items:center;justify-content:center}.keyblade-pro-image-upload-cropper-dialog-footer[data-v-ae8ab9e0]{margin-top:24px;display:flex;align-items:center;justify-content:flex-end}.keyblade-pro-image-upload-cropper-dialog-footer-left[data-v-ae8ab9e0]{display:flex;align-items:center;justify-content:flex-start;margin-right:12px}.keyblade-pro-image-upload-cropper-dialog-footer-right[data-v-ae8ab9e0]{flex:1;display:flex;align-items:center;justify-content:flex-end}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keyblade/pro-components",
   "description": "KeyBlade Pro Components",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "1.12.1-alpha.19",
+  "version": "1.12.1-alpha.21",
   "private": false,
   "type": "module",
   "main": "es/index.js",