@keyblade/pro-components 1.13.8-alpha.4 → 1.13.8-alpha.40

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

@@ -1,7 +1,21 @@
-import { defineComponent as D, ref as d, computed as M, watch as q, resolveComponent as l, createBlock as G, openBlock as J, normalizeClass as m, withCtx as n, createVNode as e, createElementVNode as y, mergeProps as K, createTextVNode as W, nextTick as C } from "vue";
+var F = Object.defineProperty, M = Object.defineProperties;
+var P = Object.getOwnPropertyDescriptors;
+var y = Object.getOwnPropertySymbols;
+var U = Object.prototype.hasOwnProperty, Z = Object.prototype.propertyIsEnumerable;
+var W = (c, r, i) => r in c ? F(c, r, { enumerable: !0, configurable: !0, writable: !0, value: i }) : c[r] = i, x = (c, r) => {
+  for (var i in r || (r = {}))
+    U.call(r, i) && W(c, i, r[i]);
+  if (y)
+    for (var i of y(r))
+      Z.call(r, i) && W(c, i, r[i]);
+  return c;
+}, b = (c, r) => M(c, P(r));
+import { defineComponent as D, ref as g, computed as G, watch as O, createBlock as q, openBlock as J, unref as o, normalizeClass as m, withCtx as n, createVNode as t, createElementVNode as H, mergeProps as K, createTextVNode as S, nextTick as k } from "vue";
+import { Modal as Q, Spin as X, ButtonGroup as Y, Tooltip as v, Button as p, Space as ee } from "@arco-design/web-vue";
+import { IconZoomIn as oe, IconZoomOut as te, IconRotateRight as ae, IconRotateLeft as le, IconSync as ne } from "@arco-design/web-vue/es/icon";
 import "vue-cropper/dist/index.css";
-import O from "vue-cropper/lib/vue-cropper.vue";
-const s = "keyblade-pro-image-upload-cropper", Z = /* @__PURE__ */ D({
+import re from "vue-cropper/lib/vue-cropper.vue";
+const d = "keyblade-pro-image-upload-cropper", fe = /* @__PURE__ */ D({
   __name: "cropper",
   props: {
     file: {},
@@ -9,211 +23,207 @@ const s = "keyblade-pro-image-upload-cropper", Z = /* @__PURE__ */ D({
     options: {}
   },
   emits: ["cancel", "confirm", "imgLoad", "reUpload"],
-  setup(x, { expose: H, emit: R }) {
-    const c = x, f = R, o = d(), w = d(), u = d(!0), _ = d(!1), z = M(() => {
-      var t;
-      const a = (((t = c == null ? void 0 : c.file) == null ? void 0 : t.name) || "").toLowerCase();
-      return a.endsWith(".jpg") || a.endsWith(".jpeg") ? {
-        ...c.options,
+  setup(c, { expose: r, emit: i }) {
+    const u = c, _ = i, e = g(), I = g(), f = g(!0), h = g(!1), L = G(() => {
+      var a;
+      const l = (((a = u == null ? void 0 : u.file) == null ? void 0 : a.name) || "").toLowerCase();
+      return l.endsWith(".jpg") || l.endsWith(".jpeg") ? b(x({}, u.options), {
         outputType: "jpeg",
         outputSize: 0.95
-      } : c.options;
-    }), g = d({
+      }) : u.options;
+    }), C = g({
       autoCropWidth: 100,
       autoCropHeight: 100
-    }), I = () => {
-      o.value.changeScale(1);
-    }, L = () => {
-      o.value.changeScale(-1);
-    }, S = () => {
-      o.value.rotateRight();
-      const { w: a, h: t } = v();
-      C(() => {
-        o.value.goAutoCrop(a, t);
-      });
+    }), B = () => {
+      e.value.changeScale(1);
     }, $ = () => {
-      o.value.rotateLeft();
-      const { w: a, h: t } = v();
-      C(() => {
-        o.value.goAutoCrop(a, t);
-      });
+      e.value.changeScale(-1);
     }, N = () => {
-      o.value.reload(), o.value.rotateClear(), C(() => {
-        o.value.goAutoCrop();
+      e.value.rotateRight();
+      const { w: l, h: a } = w();
+      k(() => {
+        e.value.goAutoCrop(l, a);
       });
-    }, b = () => {
-      f("cancel");
     }, j = () => {
-      u.value || _.value || (_.value = !0, o.value.getCropBlob((a) => {
-        _.value = !1;
-        const t = new File([a], c.file.name, { type: "image/jpeg" });
-        f("confirm", t);
-      }));
+      e.value.rotateLeft();
+      const { w: l, h: a } = w();
+      k(() => {
+        e.value.goAutoCrop(l, a);
+      });
+    }, z = () => {
+      e.value.reload(), e.value.rotateClear(), k(() => {
+        e.value.goAutoCrop();
+      });
+    }, R = () => {
+      _("cancel");
     }, A = () => {
-      u.value = !1;
-      const { w: a, h: t } = v();
-      g.value.autoCropWidth = a, g.value.autoCropHeight = t, f("imgLoad", c.file);
-    }, v = () => {
-      const a = Math.abs(o.value.rotate) % 2 > 0, t = (a ? o.value.trueHeight : o.value.trueWidth) * o.value.scale, r = (a ? o.value.trueWidth : o.value.trueHeight) * o.value.scale;
-      return { w: t, h: r };
+      f.value || h.value || (h.value = !0, e.value.getCropBlob((l) => {
+        h.value = !1;
+        const a = new File([l], u.file.name, { type: "image/jpeg" });
+        _("confirm", a);
+      }));
+    }, T = () => {
+      f.value = !1;
+      const { w: l, h: a } = w();
+      C.value.autoCropWidth = l, C.value.autoCropHeight = a, _("imgLoad", u.file);
+    }, w = () => {
+      const l = Math.abs(e.value.rotate) % 2 > 0, a = (l ? e.value.trueHeight : e.value.trueWidth) * e.value.scale, s = (l ? e.value.trueWidth : e.value.trueHeight) * e.value.scale;
+      return { w: a, h: s };
     };
-    return q(
-      () => c.file,
+    return O(
+      () => u.file,
       () => {
-        if (c.file) {
-          u.value = !0, o.value && o.value.clearCrop();
-          const a = new FileReader();
-          a.onloadend = () => {
-            const t = a.result, r = new Image();
-            r.onload = () => {
-              const h = r.width, i = r.height;
-              w.value = {
-                data: t,
-                width: h,
-                height: i
+        if (u.file) {
+          f.value = !0, e.value && e.value.clearCrop();
+          const l = new FileReader();
+          l.onloadend = () => {
+            const a = l.result, s = new Image();
+            s.onload = () => {
+              const V = s.width, E = s.height;
+              I.value = {
+                data: a,
+                width: V,
+                height: E
               };
-            }, r.src = t;
-          }, a.readAsDataURL(c.file);
+            }, s.src = a;
+          }, l.readAsDataURL(u.file);
         }
       },
       { immediate: !0 }
-    ), H({
-      cropperInsRef: o
-    }), (a, t) => {
-      const r = l("a-spin"), h = l("icon-zoom-in"), i = l("a-button"), p = l("a-tooltip"), B = l("icon-zoom-out"), V = l("icon-rotate-right"), T = l("icon-rotate-left"), E = l("icon-sync"), F = l("a-button-group"), P = l("a-space"), U = l("a-modal");
-      return J(), G(U, {
-        "render-to-body": "",
-        class: m(`${s}-dialog`),
-        title: "编辑图片",
-        width: "675px",
-        visible: !0,
-        footer: !1,
-        "mask-closable": !1,
-        "esc-to-close": !1,
-        "unmount-on-close": "",
-        onCancel: b
-      }, {
-        default: n(() => [
-          e(r, {
-            class: m(`${s}-dialog-cropper-wrapper`),
-            loading: u.value
+    ), r({
+      cropperInsRef: e
+    }), (l, a) => (J(), q(o(Q), {
+      "render-to-body": "",
+      class: m(`${d}-dialog`),
+      title: "编辑图片",
+      width: "675px",
+      visible: !0,
+      footer: !1,
+      "mask-closable": !1,
+      "esc-to-close": !1,
+      "unmount-on-close": "",
+      onCancel: R
+    }, {
+      default: n(() => [
+        t(o(X), {
+          class: m(`${d}-dialog-cropper-wrapper`),
+          loading: f.value
+        }, {
+          default: n(() => {
+            var s;
+            return [
+              t(re, K({
+                ref_key: "cropperInsRef",
+                ref: e,
+                class: `${d}-dialog-cropper`,
+                img: (s = I.value) == null ? void 0 : s.data,
+                info: !1,
+                autoCrop: !0,
+                autoCropWidth: C.value.autoCropWidth,
+                autoCropHeight: C.value.autoCropHeight,
+                full: !0
+              }, L.value, { onImgLoad: T }), null, 16, ["class", "img", "autoCropWidth", "autoCropHeight"])
+            ];
+          }),
+          _: 1
+        }, 8, ["class", "loading"]),
+        H("div", {
+          class: m(`${d}-dialog-operate`)
+        }, [
+          t(o(Y), { type: "primary" }, {
+            default: n(() => [
+              t(o(v), { content: "放大" }, {
+                default: n(() => [
+                  t(o(p), { onClick: B }, {
+                    icon: n(() => [
+                      t(o(oe))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              t(o(v), { content: "缩小" }, {
+                default: n(() => [
+                  t(o(p), { onClick: $ }, {
+                    icon: n(() => [
+                      t(o(te))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              t(o(v), { content: "向右旋转" }, {
+                default: n(() => [
+                  t(o(p), { onClick: N }, {
+                    icon: n(() => [
+                      t(o(ae))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              t(o(v), { content: "向左旋转" }, {
+                default: n(() => [
+                  t(o(p), { onClick: j }, {
+                    icon: n(() => [
+                      t(o(le))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              t(o(v), { content: "重置" }, {
+                default: n(() => [
+                  t(o(p), { onClick: z }, {
+                    icon: n(() => [
+                      t(o(ne))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ], 2),
+        H("div", {
+          class: m(`${d}-dialog-footer`)
+        }, [
+          t(o(ee), {
+            class: m(`${d}-dialog-footer-right`)
           }, {
-            default: n(() => {
-              var k;
-              return [
-                e(O, K({
-                  ref_key: "cropperInsRef",
-                  ref: o,
-                  class: `${s}-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
-                }, z.value, { onImgLoad: A }), null, 16, ["class", "img", "autoCropWidth", "autoCropHeight"])
-              ];
-            }),
+            default: n(() => [
+              t(o(p), { onClick: R }, {
+                default: n(() => a[0] || (a[0] = [
+                  S("取消")
+                ])),
+                _: 1
+              }),
+              t(o(p), {
+                disabled: f.value,
+                type: "primary",
+                onClick: A,
+                loading: h.value
+              }, {
+                default: n(() => a[1] || (a[1] = [
+                  S("确定")
+                ])),
+                _: 1
+              }, 8, ["disabled", "loading"])
+            ]),
             _: 1
-          }, 8, ["class", "loading"]),
-          y("div", {
-            class: m(`${s}-dialog-operate`)
-          }, [
-            e(F, { type: "primary" }, {
-              default: n(() => [
-                e(p, { content: "放大" }, {
-                  default: n(() => [
-                    e(i, { onClick: I }, {
-                      icon: n(() => [
-                        e(h)
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }),
-                e(p, { content: "缩小" }, {
-                  default: n(() => [
-                    e(i, { onClick: L }, {
-                      icon: n(() => [
-                        e(B)
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }),
-                e(p, { content: "向右旋转" }, {
-                  default: n(() => [
-                    e(i, { onClick: S }, {
-                      icon: n(() => [
-                        e(V)
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }),
-                e(p, { content: "向左旋转" }, {
-                  default: n(() => [
-                    e(i, { onClick: $ }, {
-                      icon: n(() => [
-                        e(T)
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }),
-                e(p, { content: "重置" }, {
-                  default: n(() => [
-                    e(i, { onClick: N }, {
-                      icon: n(() => [
-                        e(E)
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })
-          ], 2),
-          y("div", {
-            class: m(`${s}-dialog-footer`)
-          }, [
-            e(P, {
-              class: m(`${s}-dialog-footer-right`)
-            }, {
-              default: n(() => [
-                e(i, { onClick: b }, {
-                  default: n(() => t[0] || (t[0] = [
-                    W("取消")
-                  ])),
-                  _: 1
-                }),
-                e(i, {
-                  disabled: u.value,
-                  type: "primary",
-                  onClick: j,
-                  loading: _.value
-                }, {
-                  default: n(() => t[1] || (t[1] = [
-                    W("确定")
-                  ])),
-                  _: 1
-                }, 8, ["disabled", "loading"])
-              ]),
-              _: 1
-            }, 8, ["class"])
-          ], 2)
-        ]),
-        _: 1
-      }, 8, ["class"]);
-    };
+          }, 8, ["class"])
+        ], 2)
+      ]),
+      _: 1
+    }, 8, ["class"]));
   }
 });
 export {
-  Z as default
+  fe as default
 };