@farris/ui-vue 1.7.1 → 1.7.2-beta.1

package/components/image-cropper/index.esm.js

@@ -1,6 +1,143 @@
-import { inject as Ke, ref as h, onMounted as Ge, onUnmounted as Je, watch as Y, defineComponent as Ze, createVNode as H, withModifiers as O } from "vue";
-import { withInstall as Ye } from "../common/index.esm.js";
-const Xe = {
+import { inject as Me, ref as o, onMounted as be, onUnmounted as et, watch as ee, defineComponent as we, createVNode as f, withModifiers as P } from "vue";
+import { resolveAppearance as tt, createPropsResolver as at } from "../dynamic-resolver/index.esm.js";
+import { useDesignerComponent as it } from "../designer-canvas/index.esm.js";
+function lt(a, c, u) {
+  return c;
+}
+const nt = /* @__PURE__ */ new Map([
+  ["appearance", tt]
+]), ut = "https://json-schema.org/draft/2020-12/schema", st = "https://farris-design.gitee.io/image-cropper.schema.json", ot = "image-cropper", rt = "A Farris Component", vt = "object", ct = {
+  id: {
+    description: "The unique identifier for image-cropper",
+    type: "string"
+  },
+  type: {
+    description: "The type string of image-cropper",
+    type: "string",
+    default: "image-cropper"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  binding: {
+    description: "",
+    type: "object",
+    default: {}
+  },
+  disable: {
+    type: "string",
+    default: !1
+  },
+  editable: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  placeholder: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  readonly: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  require: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  tabindex: {
+    description: "",
+    type: "number",
+    default: -1
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  }
+}, ht = [
+  "id",
+  "type"
+], ft = {
+  $schema: ut,
+  $id: st,
+  title: ot,
+  description: rt,
+  type: vt,
+  properties: ct,
+  required: ht
+}, dt = "image-cropper", gt = "A Farris Component", mt = "object", yt = {
+  basic: {
+    description: "Basic Infomation",
+    title: "基本信息",
+    properties: {
+      id: {
+        description: "组件标识",
+        title: "标识",
+        type: "string",
+        readonly: !0
+      },
+      type: {
+        description: "组件类型",
+        title: "控件类型",
+        type: "select",
+        editor: {
+          type: "waiting for modification",
+          enum: []
+        }
+      }
+    }
+  },
+  behavior: {
+    description: "Basic Infomation",
+    title: "行为",
+    properties: {
+      readonly: {
+        description: "",
+        title: "只读",
+        type: "string"
+      },
+      required: {
+        description: "",
+        title: "必填",
+        type: "boolean"
+      },
+      visible: {
+        description: "",
+        title: "可见",
+        type: "boolean"
+      },
+      placeholder: {
+        description: "",
+        title: "提示文本",
+        type: "string"
+      },
+      tabindex: {
+        description: "",
+        title: "tab索引",
+        type: "number"
+      }
+    }
+  }
+}, pt = {
+  title: dt,
+  description: gt,
+  type: mt,
+  categories: yt
+}, he = {
   /** 输出图片格式 */
   format: { type: String, default: "png" },
   /** 保持长宽比例 */
@@ -57,11 +194,11 @@ const Xe = {
       y2: 1e4
     }
   }
-};
-var ae = /* @__PURE__ */ ((a) => (a.Move = "move", a.Resize = "resize", a))(ae || {});
-function et() {
-  function a(g) {
-    switch (typeof g == "string" && (g = M(g)), g) {
+}, Ie = at(he, ft, nt, lt, pt);
+var ie = /* @__PURE__ */ ((a) => (a.Move = "move", a.Resize = "resize", a))(ie || {});
+function xt() {
+  function a(y) {
+    switch (typeof y == "string" && (y = c(y)), y) {
       case 2:
         return { rotate: 0, flip: !0 };
       case 3:
@@ -80,113 +217,113 @@ function et() {
         return { rotate: 0, flip: !1 };
     }
   }
-  function M(g) {
-    const t = new DataView(s(g));
+  function c(y) {
+    const t = new DataView(u(y));
     if (t.getUint16(0, !1) !== 65496)
       return -2;
-    const m = t.byteLength;
-    let v = 2;
-    for (; v < m; ) {
-      if (t.getUint16(v + 2, !1) <= 8)
+    const p = t.byteLength;
+    let d = 2;
+    for (; d < p; ) {
+      if (t.getUint16(d + 2, !1) <= 8)
         return -1;
-      const b = t.getUint16(v, !1);
-      if (v += 2, b === 65505) {
-        if (t.getUint32(v += 2, !1) !== 1165519206)
+      const b = t.getUint16(d, !1);
+      if (d += 2, b === 65505) {
+        if (t.getUint32(d += 2, !1) !== 1165519206)
           return -1;
-        const d = t.getUint16(v += 6, !1) === 18761;
-        v += t.getUint32(v + 4, d);
-        const D = t.getUint16(v, d);
-        v += 2;
-        for (let U = 0; U < D; U++)
-          if (t.getUint16(v + U * 12, d) === 274)
-            return t.getUint16(v + U * 12 + 8, d);
+        const h = t.getUint16(d += 6, !1) === 18761;
+        d += t.getUint32(d + 4, h);
+        const D = t.getUint16(d, h);
+        d += 2;
+        for (let H = 0; H < D; H++)
+          if (t.getUint16(d + H * 12, h) === 274)
+            return t.getUint16(d + H * 12 + 8, h);
       } else {
         if ((b & 65280) !== 65280)
           break;
-        v += t.getUint16(v, !1);
+        d += t.getUint16(d, !1);
       }
     }
     return -1;
   }
-  function s(g) {
-    g = g.replace(/^data:([^;]+);base64,/gmi, "");
-    const t = atob(g), m = t.length, v = new Uint8Array(m);
-    for (let b = 0; b < m; b++)
-      v[b] = t.charCodeAt(b);
-    return v.buffer;
-  }
-  function $(g, t, m) {
-    const v = g.width, b = g.height;
-    t = Math.round(t), m = Math.round(m);
-    const d = v / t, D = b / m, U = Math.ceil(d / 2), u = Math.ceil(D / 2), i = g.getContext("2d");
-    if (i) {
-      const k = i.getImageData(0, 0, v, b), w = i.createImageData(t, m), { data: P } = k, V = w.data;
-      for (let F = 0; F < m; F++)
-        for (let E = 0; E < t; E++) {
-          const N = (E + F * t) * 4, A = F * D;
-          let T = 0, r = 0, f = 0, j = 0, q = 0, C = 0, y = 0;
-          const _ = Math.floor(E * d), X = Math.floor(F * D);
-          let Q = Math.ceil((E + 1) * d), K = Math.ceil((F + 1) * D);
-          Q = Math.min(Q, v), K = Math.min(K, b);
-          for (let I = X; I < K; I++) {
-            const c = Math.abs(A - I) / u, ie = E * d, ee = c * c;
-            for (let z = _; z < Q; z++) {
-              const S = Math.abs(ie - z) / U, p = Math.sqrt(ee + S * S);
-              if (p >= 1)
+  function u(y) {
+    y = y.replace(/^data:([^;]+);base64,/gmi, "");
+    const t = atob(y), p = t.length, d = new Uint8Array(p);
+    for (let b = 0; b < p; b++)
+      d[b] = t.charCodeAt(b);
+    return d.buffer;
+  }
+  function N(y, t, p) {
+    const d = y.width, b = y.height;
+    t = Math.round(t), p = Math.round(p);
+    const h = d / t, D = b / p, H = Math.ceil(h / 2), l = Math.ceil(D / 2), n = y.getContext("2d");
+    if (n) {
+      const C = n.getImageData(0, 0, d, b), g = n.createImageData(t, p), { data: _ } = C, $ = g.data;
+      for (let R = 0; R < p; R++)
+        for (let k = 0; k < t; k++) {
+          const j = (k + R * t) * 4, A = R * D;
+          let T = 0, v = 0, m = 0, q = 0, Q = 0, I = 0, M = 0;
+          const L = Math.floor(k * h), z = Math.floor(R * D);
+          let O = Math.ceil((k + 1) * h), G = Math.ceil((R + 1) * D);
+          O = Math.min(O, d), G = Math.min(G, b);
+          for (let S = z; S < G; S++) {
+            const x = Math.abs(A - S) / l, le = k * h, te = x * x;
+            for (let E = L; E < O; E++) {
+              const U = Math.abs(le - E) / H, W = Math.sqrt(te + U * U);
+              if (W >= 1)
                 continue;
-              T = 2 * p * p * p - 3 * p * p + 1;
-              const B = 4 * (z + I * v);
-              y += T * P[B + 3], f += T, P[B + 3] < 255 && (T = T * P[B + 3] / 250), j += T * P[B], q += T * P[B + 1], C += T * P[B + 2], r += T;
+              T = 2 * W * W * W - 3 * W * W + 1;
+              const F = 4 * (E + S * d);
+              M += T * _[F + 3], m += T, _[F + 3] < 255 && (T = T * _[F + 3] / 250), q += T * _[F], Q += T * _[F + 1], I += T * _[F + 2], v += T;
             }
           }
-          V[N] = j / r, V[N + 1] = q / r, V[N + 2] = C / r, V[N + 3] = y / f;
+          $[j] = q / v, $[j + 1] = Q / v, $[j + 2] = I / v, $[j + 3] = M / m;
         }
-      g.width = t, g.height = m, i.putImageData(w, 0, 0);
+      y.width = t, y.height = p, n.putImageData(g, 0, 0);
     }
   }
   return {
-    resizeCanvas: $,
+    resizeCanvas: N,
     getTransformationsFromExifData: a
   };
 }
-function tt(a, M, s, $) {
-  function g(u, i) {
-    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * s.value, u = Math.max(a.value.x2 - M.value.width, 0), i = Math.max(0 - a.value.y1, 0), (u > 0 || i > 0) && (a.value.x2 -= i * s.value > u ? i * s.value : u, a.value.y1 += i * s.value > u ? i : u / s.value);
+function Mt(a, c, u, N) {
+  function y(l, n) {
+    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * u.value, l = Math.max(a.value.x2 - c.value.width, 0), n = Math.max(0 - a.value.y1, 0), (l > 0 || n > 0) && (a.value.x2 -= n * u.value > l ? n * u.value : l, a.value.y1 += n * u.value > l ? n : l / u.value);
   }
-  function t(u, i) {
-    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * s.value, u = Math.max(a.value.x2 - M.value.width, 0), i = Math.max(a.value.y2 - M.value.height, 0), (u > 0 || i > 0) && (a.value.x2 -= i * s.value > u ? i * s.value : u, a.value.y2 -= i * s.value > u ? i : u / s.value);
+  function t(l, n) {
+    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * u.value, l = Math.max(a.value.x2 - c.value.width, 0), n = Math.max(a.value.y2 - c.value.height, 0), (l > 0 || n > 0) && (a.value.x2 -= n * u.value > l ? n * u.value : l, a.value.y2 -= n * u.value > l ? n : l / u.value);
   }
-  function m(u, i) {
-    a.value.y1 = a.value.y2 - (a.value.x2 - a.value.x1) / s.value, u = Math.max(0 - a.value.x1, 0), i = Math.max(0 - a.value.y1, 0), (u > 0 || i > 0) && (a.value.x1 += i * s.value > u ? i * s.value : u, a.value.y1 += i * s.value > u ? i : u / s.value);
+  function p(l, n) {
+    a.value.y1 = a.value.y2 - (a.value.x2 - a.value.x1) / u.value, l = Math.max(0 - a.value.x1, 0), n = Math.max(0 - a.value.y1, 0), (l > 0 || n > 0) && (a.value.x1 += n * u.value > l ? n * u.value : l, a.value.y1 += n * u.value > l ? n : l / u.value);
   }
-  function v(u, i) {
-    a.value.y1 = a.value.y2 - (a.value.x2 - a.value.x1) / s.value, u = Math.max(a.value.x2 - M.value.width, 0), i = Math.max(0 - a.value.y1, 0), (u > 0 || i > 0) && (a.value.x2 -= i * s.value > u ? i * s.value : u, a.value.y1 += i * s.value > u ? i : u / s.value);
+  function d(l, n) {
+    a.value.y1 = a.value.y2 - (a.value.x2 - a.value.x1) / u.value, l = Math.max(a.value.x2 - c.value.width, 0), n = Math.max(0 - a.value.y1, 0), (l > 0 || n > 0) && (a.value.x2 -= n * u.value > l ? n * u.value : l, a.value.y1 += n * u.value > l ? n : l / u.value);
   }
-  function b(u, i) {
-    a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / s.value, u = Math.max(a.value.x2 - M.value.width, 0), i = Math.max(a.value.y2 - M.value.height, 0), (u > 0 || i > 0) && (a.value.x2 -= i * s.value > u ? i * s.value : u, a.value.y2 -= i * s.value > u ? i : u / s.value);
+  function b(l, n) {
+    a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / u.value, l = Math.max(a.value.x2 - c.value.width, 0), n = Math.max(a.value.y2 - c.value.height, 0), (l > 0 || n > 0) && (a.value.x2 -= n * u.value > l ? n * u.value : l, a.value.y2 -= n * u.value > l ? n : l / u.value);
   }
-  function d(u, i) {
-    a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / s.value, u = Math.max(0 - a.value.x1, 0), i = Math.max(a.value.y2 - M.value.height, 0), (u > 0 || i > 0) && (a.value.x1 += i * s.value > u ? i * s.value : u, a.value.y2 -= i * s.value > u ? i : u / s.value);
+  function h(l, n) {
+    a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / u.value, l = Math.max(0 - a.value.x1, 0), n = Math.max(a.value.y2 - c.value.height, 0), (l > 0 || n > 0) && (a.value.x1 += n * u.value > l ? n * u.value : l, a.value.y2 -= n * u.value > l ? n : l / u.value);
   }
   function D() {
-    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * s.value, a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / s.value;
-    const u = Math.max(0 - a.value.x1, 0), i = Math.max(a.value.x2 - M.value.width, 0), k = Math.max(a.value.y2 - M.value.height, 0), w = Math.max(0 - a.value.y1, 0);
-    (u > 0 || i > 0 || k > 0 || w > 0) && (a.value.x1 += k * s.value > u ? k * s.value : u, a.value.x2 -= w * s.value > i ? w * s.value : i, a.value.y1 += w * s.value > i ? w : i / s.value, a.value.y2 -= k * s.value > u ? k : u / s.value);
+    a.value.x2 = a.value.x1 + (a.value.y2 - a.value.y1) * u.value, a.value.y2 = a.value.y1 + (a.value.x2 - a.value.x1) / u.value;
+    const l = Math.max(0 - a.value.x1, 0), n = Math.max(a.value.x2 - c.value.width, 0), C = Math.max(a.value.y2 - c.value.height, 0), g = Math.max(0 - a.value.y1, 0);
+    (l > 0 || n > 0 || C > 0 || g > 0) && (a.value.x1 += C * u.value > l ? C * u.value : l, a.value.x2 -= g * u.value > n ? g * u.value : n, a.value.y1 += g * u.value > n ? g : n / u.value, a.value.y2 -= C * u.value > l ? C : l / u.value);
   }
-  function U() {
-    if (M.value.width && M.value.height)
-      switch ($.position) {
+  function H() {
+    if (c.value.width && c.value.height)
+      switch (N.position) {
         case "top":
-          g(0, 0);
+          y(0, 0);
           break;
         case "bottom":
           t(0, 0);
           break;
         case "topleft":
-          m(0, 0);
+          p(0, 0);
           break;
         case "topright":
-          v(0, 0);
+          d(0, 0);
           break;
         case "right":
         case "bottomright":
@@ -194,26 +331,26 @@ function tt(a, M, s, $) {
           break;
         case "left":
         case "bottomleft":
-          d(0, 0);
+          h(0, 0);
           break;
         case "center":
           D();
           break;
       }
   }
-  return { checkAspectRatio: U };
+  return { checkAspectRatio: H };
 }
-function at(a, M) {
-  const { resizeCanvas: s, getTransformationsFromExifData: $ } = et(), g = Ke("NotifyService"), t = h(a.cropper), m = h(a.transform), v = h(a.cropperMinWidth), b = h(a.maintainAspectRatio), d = h(a.aspectRatio), D = h(a.autoCrop), U = h(a.backgroundColor), u = h(a.resizeToWidth), i = h(a.onlyScaleDown), k = h(a.containWithinAspectRatio), w = h(a.canvasRotation), P = h(a.format), V = h(a.imageQuality), F = h(a.resizeToHeight), E = h(a.cropperMinHeight), N = h(""), A = h(!0), T = h(!0);
-  let r, f, j = 0, q, C, y;
-  const _ = h(null), X = h(""), Q = h(""), K = h("0px"), I = h(), c = h({ width: 100, height: 100 }), ie = ae;
-  let ee, z = 20, S = 20, p = !1, B = { rotate: 0, flip: !1 }, o = { active: !1, type: null, position: null, x1: 0, y1: 0, x2: 0, y2: 0, clientX: 0, clientY: 0 };
-  const fe = h(a.imageChangedEvent), ue = h(a.imageURL), Me = h(a.imageBase64), we = h(a.imageFile);
-  function be() {
-    Q.value = "scaleX(" + (m.value.scale || 1) * (m.value.flipH ? -1 : 1) + ")scaleY(" + (m.value.scale || 1) * (m.value.flipV ? -1 : 1) + ")rotate(" + (m.value.rotate || 0) + "deg)";
-  }
-  function J() {
-    T.value = !1, I.value = null, N.value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=", o = {
+function Ce(a, c) {
+  const { resizeCanvas: u, getTransformationsFromExifData: N } = xt(), y = Me("NotifyService"), t = o(a.cropper), p = o(a.transform), d = o(a.cropperMinWidth), b = o(a.maintainAspectRatio), h = o(a.aspectRatio), D = o(a.autoCrop), H = o(a.backgroundColor), l = o(a.resizeToWidth), n = o(a.onlyScaleDown), C = o(a.containWithinAspectRatio), g = o(a.canvasRotation), _ = o(a.format), $ = o(a.imageQuality), R = o(a.resizeToHeight), k = o(a.cropperMinHeight), j = o(""), A = o(!0), T = o(!0);
+  let v, m, q = 0, Q, I, M;
+  const L = o(null), z = o(""), O = o(""), G = o("0px"), S = o(), x = o({ width: 100, height: 100 }), le = ie;
+  let te, E = 20, U = 20, W = !1, F = { rotate: 0, flip: !1 }, r = { active: !1, type: null, position: null, x1: 0, y1: 0, x2: 0, y2: 0, clientX: 0, clientY: 0 };
+  const fe = o(a.imageChangedEvent), ne = o(a.imageURL), Ae = o(a.imageBase64), Te = o(a.imageFile);
+  function ze() {
+    O.value = "scaleX(" + (p.value.scale || 1) * (p.value.flipH ? -1 : 1) + ")scaleY(" + (p.value.scale || 1) * (p.value.flipV ? -1 : 1) + ")rotate(" + (p.value.rotate || 0) + "deg)";
+  }
+  function Y() {
+    T.value = !1, S.value = null, j.value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=", r = {
       active: !1,
       type: null,
       position: null,
@@ -223,313 +360,313 @@ function at(a, M) {
       y2: 0,
       clientX: 0,
       clientY: 0
-    }, c.value = {
+    }, x.value = {
       width: 0,
       height: 0
-    }, r = {
+    }, v = {
       width: 0,
       height: 0
-    }, f = {
+    }, m = {
       width: 0,
       height: 0
     }, t.value.x1 = -100, t.value.y1 = -100, t.value.x2 = 1e4, t.value.y2 = 1e4;
   }
-  function Ce(e) {
+  function Se(e) {
     return /image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(e);
   }
-  function Ie() {
-    if (w.value += B.rotate, k.value && r.width && r.height) {
-      if (w.value % 2) {
-        const n = r.width * d.value, x = r.height / d.value;
+  function ke() {
+    if (g.value += F.rotate, C.value && v.width && v.height) {
+      if (g.value % 2) {
+        const s = v.width * h.value, w = v.height / h.value;
         return {
-          width: Math.max(r.height, n),
-          height: Math.max(r.width, x)
+          width: Math.max(v.height, s),
+          height: Math.max(v.width, w)
         };
       }
-      const e = r.height * d.value, l = r.width / d.value;
+      const e = v.height * h.value, i = v.width / h.value;
       return {
-        width: Math.max(r.width, e),
-        height: Math.max(r.height, l)
+        width: Math.max(v.width, e),
+        height: Math.max(v.height, i)
       };
     }
-    return w.value % 2 ? {
-      height: r.width,
-      width: r.height
+    return g.value % 2 ? {
+      height: v.width,
+      width: v.height
     } : {
-      width: r.width,
-      height: r.height
+      width: v.width,
+      height: v.height
     };
   }
-  function Ae() {
-    w.value += B.rotate;
-    const e = Ie(), l = document.createElement("canvas");
-    e.width && e.height && (l.width = e.width, l.height = e.height);
-    const n = l.getContext("2d");
-    return r.width && r.height && y && (n == null || n.setTransform(B.flip ? -1 : 1, 0, 0, 1, l.width / 2, l.height / 2), n == null || n.rotate(Math.PI * (w.value / 2)), n == null || n.drawImage(y, -r.width / 2, -r.height / 2)), l.toDataURL();
-  }
-  function Te(e) {
-    return new Promise((l) => {
-      ee = e, N.value = e, I.value = new Image(), I.value.onload = () => {
-        var n, x;
-        f.width = (n = I.value) == null ? void 0 : n.naturalWidth, f.height = (x = I.value) == null ? void 0 : x.naturalHeight, l();
-      }, I.value.src = ee;
+  function We() {
+    g.value += F.rotate;
+    const e = ke(), i = document.createElement("canvas");
+    e.width && e.height && (i.width = e.width, i.height = e.height);
+    const s = i.getContext("2d");
+    return v.width && v.height && M && (s == null || s.setTransform(F.flip ? -1 : 1, 0, 0, 1, i.width / 2, i.height / 2), s == null || s.rotate(Math.PI * (g.value / 2)), s == null || s.drawImage(M, -v.width / 2, -v.height / 2)), i.toDataURL();
+  }
+  function Be(e) {
+    return new Promise((i) => {
+      te = e, j.value = e, S.value = new Image(), S.value.onload = () => {
+        var s, w;
+        m.width = (s = S.value) == null ? void 0 : s.naturalWidth, m.height = (w = S.value) == null ? void 0 : w.naturalHeight, i();
+      }, S.value.src = te;
     });
   }
-  function ce() {
-    if (!y || !y.complete || !B)
+  function de() {
+    if (!M || !M.complete || !F)
       return Promise.reject(new Error("No image loaded"));
-    const e = Ae();
-    return Te(e);
+    const e = We();
+    return Be(e);
   }
-  function ne(e) {
-    const l = (n) => {
-      g.show({
+  function ue(e) {
+    const i = (s) => {
+      y.show({
         showCloseButton: !1,
         timeout: 3e3,
         animate: "fadeIn",
         toasts: [{ type: "string", title: "提示", msg: "图片上传错误，请重试" }]
-      }), A.value = !1, p = !0, M.emit("loadImageFailed"), y = null, X.value = "";
+      }), A.value = !1, W = !0, c.emit("loadImageFailed"), M = null, z.value = "";
     };
-    y = new Image(), y.onload = () => {
-      X.value = e, B = $(e), r.width = y == null ? void 0 : y.naturalWidth, r.height = y == null ? void 0 : y.naturalHeight, ce().then(() => {
-        p = !1;
-      }).catch(l);
-    }, y.onerror = l, y.src = e;
-  }
-  function pe(e, l) {
-    Ce(l) ? (p = !1, ne(e)) : (g.show({
+    M = new Image(), M.onload = () => {
+      z.value = e, F = N(e), v.width = M == null ? void 0 : M.naturalWidth, v.height = M == null ? void 0 : M.naturalHeight, de().then(() => {
+        W = !1;
+      }).catch(i);
+    }, M.onerror = i, M.src = e;
+  }
+  function He(e, i) {
+    Se(i) ? (W = !1, ue(e)) : (y.show({
       showCloseButton: !1,
       timeout: 3e3,
       animate: "fadeIn",
       toasts: [{ type: "string", title: "提示", msg: "图片类型不正确,请重试" }]
-    }), A.value = !1, p = !0, M.emit("loadImageFailed"));
-  }
-  function de(e) {
-    const l = new FileReader();
-    l.onload = (n) => pe(n.target.result, e.type), l.readAsDataURL(e);
+    }), A.value = !1, W = !0, c.emit("loadImageFailed"));
   }
   function ge(e) {
-    const l = new Image();
-    l.onerror = () => {
-      g.show({
+    const i = new FileReader();
+    i.onload = (s) => He(s.target.result, e.type), i.readAsDataURL(e);
+  }
+  function me(e) {
+    const i = new Image();
+    i.onerror = () => {
+      y.show({
         showCloseButton: !1,
         timeout: 3e3,
         animate: "fadeIn",
         toasts: [{ type: "string", title: "提示", msg: "图片加载错误，请重试" }]
-      }), A.value = !1, p = !0, M.emit("loadImageFailed");
-    }, l.onload = () => {
-      p = !1;
-      const n = document.createElement("canvas"), x = n.getContext("2d");
-      n.width = l.width, n.height = l.height, x == null || x.drawImage(l, 0, 0), ne(n.toDataURL());
-    }, l.crossOrigin = "anonymous", l.src = e;
+      }), A.value = !1, W = !0, c.emit("loadImageFailed");
+    }, i.onload = () => {
+      W = !1;
+      const s = document.createElement("canvas"), w = s.getContext("2d");
+      s.width = i.width, s.height = i.height, w == null || w.drawImage(i, 0, 0), ue(s.toDataURL());
+    }, i.crossOrigin = "anonymous", i.src = e;
   }
-  function We() {
-    return _.value && _.value && _.value.offsetWidth > 0;
+  function Le() {
+    return L.value && L.value && L.value.offsetWidth > 0;
   }
   function se() {
-    if (_.value) {
-      const e = _.value;
-      c.value.width = e.offsetWidth, c.value.height = e.offsetHeight, K.value = "calc(50% - " + c.value.width / 2 + "px)";
+    if (L.value) {
+      const e = L.value;
+      x.value.width = e.offsetWidth, x.value.height = e.offsetHeight, G.value = "calc(50% - " + x.value.width / 2 + "px)";
     }
   }
-  function ke() {
-    I.value && c.value.width && (z = v.value > 0 ? Math.max(20, v.value / I.value.width * c.value.width) : 20);
+  function Ee() {
+    S.value && x.value.width && (E = d.value > 0 ? Math.max(20, d.value / S.value.width * x.value.width) : 20);
   }
-  function ze() {
-    b.value ? S = Math.max(20, z / d.value) : E.value > 0 && I.value && c.value.height ? S = Math.max(20, E.value / I.value.height * c.value.height) : S = 20;
+  function Ue() {
+    b.value ? U = Math.max(20, E / h.value) : k.value > 0 && S.value && x.value.height ? U = Math.max(20, k.value / S.value.height * x.value.height) : U = 20;
   }
   function oe() {
-    I.value ? (ke(), ze()) : (z = 20, S = 20);
-  }
-  function He() {
-    const e = _.value, l = h({ x1: 0, x2: 0, y1: 0, y2: 0 });
-    if (e && f.width && f.height) {
-      const n = f.width / e.offsetWidth;
-      l.value = {
-        x1: Math.round(t.value.x1 * n),
-        y1: Math.round(t.value.y1 * n),
-        x2: Math.round(t.value.x2 * n),
-        y2: Math.round(t.value.y2 * n)
-      }, k.value || (l.value.x1 = Math.max(l.value.x1, 0), l.value.y1 = Math.max(l.value.y1, 0), l.value.x2 = Math.min(l.value.x2, f.width), l.value.y2 = Math.min(l.value.y2, f.height));
+    S.value ? (Ee(), Ue()) : (E = 20, U = 20);
+  }
+  function De() {
+    const e = L.value, i = o({ x1: 0, x2: 0, y1: 0, y2: 0 });
+    if (e && m.width && m.height) {
+      const s = m.width / e.offsetWidth;
+      i.value = {
+        x1: Math.round(t.value.x1 * s),
+        y1: Math.round(t.value.y1 * s),
+        x2: Math.round(t.value.x2 * s),
+        y2: Math.round(t.value.y2 * s)
+      }, C.value || (i.value.x1 = Math.max(i.value.x1, 0), i.value.y1 = Math.max(i.value.y1, 0), i.value.x2 = Math.min(i.value.x2, m.width), i.value.y2 = Math.min(i.value.y2, m.height));
     }
-    return l.value;
-  }
-  function Se() {
-    w.value += B.rotate;
-    const e = _.value, l = h({ x1: 0, x2: 0, y1: 0, y2: 0 });
-    if (e && f.height && f.width && r.height && r.width) {
-      const n = f.width / e.offsetWidth;
-      let x, W;
-      w.value % 2 ? (x = (f.width - r.height) / 2, W = (f.height - r.width) / 2) : (x = (f.width - r.width) / 2, W = (f.height - r.height) / 2), l.value = {
-        x1: Math.round(t.value.x1 * n) - x,
-        y1: Math.round(t.value.y1 * n) - W,
-        x2: Math.round(t.value.x2 * n) - x,
-        y2: Math.round(t.value.y2 * n) - W
-      }, k.value || (l.value.x1 = Math.max(l.value.x1, 0), l.value.y1 = Math.max(l.value.y1, 0), l.value.x2 = Math.min(l.value.x2, f.width), l.value.y2 = Math.min(l.value.y2, f.height));
+    return i.value;
+  }
+  function _e() {
+    g.value += F.rotate;
+    const e = L.value, i = o({ x1: 0, x2: 0, y1: 0, y2: 0 });
+    if (e && m.height && m.width && v.height && v.width) {
+      const s = m.width / e.offsetWidth;
+      let w, B;
+      g.value % 2 ? (w = (m.width - v.height) / 2, B = (m.height - v.width) / 2) : (w = (m.width - v.width) / 2, B = (m.height - v.height) / 2), i.value = {
+        x1: Math.round(t.value.x1 * s) - w,
+        y1: Math.round(t.value.y1 * s) - B,
+        x2: Math.round(t.value.x2 * s) - w,
+        y2: Math.round(t.value.y2 * s) - B
+      }, C.value || (i.value.x1 = Math.max(i.value.x1, 0), i.value.y1 = Math.max(i.value.y1, 0), i.value.x2 = Math.min(i.value.x2, m.width), i.value.y2 = Math.min(i.value.y2, m.height));
     }
-    return l.value;
-  }
-  function Ue(e, l) {
-    if (u.value > 0) {
-      if (!i.value || e > u.value)
-        return u.value / e;
-    } else if (F.value > 0 && (!i.value || l > F.value))
-      return F.value / l;
+    return i.value;
+  }
+  function $e(e, i) {
+    if (l.value > 0) {
+      if (!n.value || e > l.value)
+        return l.value / e;
+    } else if (R.value > 0 && (!n.value || i > R.value))
+      return R.value / i;
     return 1;
   }
-  function _e() {
-    return Math.min(1, Math.max(0, V.value / 100));
+  function Re() {
+    return Math.min(1, Math.max(0, $.value / 100));
   }
-  function Be(e) {
-    return e.toDataURL("image/" + P.value, _e());
+  function Fe(e) {
+    return e.toDataURL("image/" + _.value, Re());
   }
-  function Ee() {
-    if (_.value && _.value && I.value != null) {
-      const e = He(), l = e.x2 - e.x1, n = e.y2 - e.y1, x = document.createElement("canvas");
-      x.width = l, x.height = n;
-      const W = x.getContext("2d");
-      if (W) {
-        U.value != null && (W.fillStyle = U.value, W.fillRect(0, 0, l, n));
-        const R = (m.value.scale || 1) * (m.value.flipH ? -1 : 1), G = (m.value.scale || 1) * (m.value.flipV ? -1 : 1);
-        f.width && f.height && (W.setTransform(R, 0, 0, G, f.width / 2, f.height / 2), W.translate(-e.x1 / R, -e.y1 / G), W.rotate((m.value.rotate || 0) * Math.PI / 180), W.drawImage(I.value, -f.width / 2, -f.height / 2));
-        const L = {
-          width: l,
-          height: n,
+  function Pe() {
+    if (L.value && L.value && S.value != null) {
+      const e = De(), i = e.x2 - e.x1, s = e.y2 - e.y1, w = document.createElement("canvas");
+      w.width = i, w.height = s;
+      const B = w.getContext("2d");
+      if (B) {
+        H.value != null && (B.fillStyle = H.value, B.fillRect(0, 0, i, s));
+        const K = (p.value.scale || 1) * (p.value.flipH ? -1 : 1), J = (p.value.scale || 1) * (p.value.flipV ? -1 : 1);
+        m.width && m.height && (B.setTransform(K, 0, 0, J, m.width / 2, m.height / 2), B.translate(-e.x1 / K, -e.y1 / J), B.rotate((p.value.rotate || 0) * Math.PI / 180), B.drawImage(S.value, -m.width / 2, -m.height / 2));
+        const V = {
+          width: i,
+          height: s,
           imagePosition: e,
           cropperPosition: { ...t.value }
         };
-        k.value && (L.offsetImagePosition = Se());
-        const Z = Ue(l, n);
-        return Z !== 1 && (L.width = Math.round(l * Z), L.height = b.value ? Math.round(L.width / d.value) : Math.round(n * Z), s(x, L.width, L.height)), L.base64 = Be(x), M.emit("imageCropped", L), L;
+        C.value && (V.offsetImagePosition = _e());
+        const X = $e(i, s);
+        return X !== 1 && (V.width = Math.round(i * X), V.height = b.value ? Math.round(V.width / h.value) : Math.round(s * X), u(w, V.width, V.height)), V.base64 = Fe(w), c.emit("imageCropped", V), V;
       }
     }
     return null;
   }
-  function te() {
-    D.value && Ee();
+  function ae() {
+    D.value && Pe();
   }
-  function me() {
-    const e = _.value;
+  function ye() {
+    const e = L.value;
     if (e) {
       if (!b.value)
         t.value.x1 = 0, t.value.x2 = e.offsetWidth, t.value.y1 = 0, t.value.y2 = e.offsetHeight;
-      else if (e.offsetWidth / d.value < e.offsetHeight) {
+      else if (e.offsetWidth / h.value < e.offsetHeight) {
         t.value.x1 = 0, t.value.x2 = e.offsetWidth;
-        const l = e.offsetWidth / d.value;
-        t.value.y1 = (e.offsetHeight - l) / 2, t.value.y2 = t.value.y1 + l;
+        const i = e.offsetWidth / h.value;
+        t.value.y1 = (e.offsetHeight - i) / 2, t.value.y2 = t.value.y1 + i;
       } else {
         t.value.y1 = 0, t.value.y2 = e.offsetHeight;
-        const l = e.offsetHeight * d.value;
-        t.value.x1 = (e.offsetWidth - l) / 2, t.value.x2 = t.value.x1 + l;
+        const i = e.offsetHeight * h.value;
+        t.value.x1 = (e.offsetWidth - i) / 2, t.value.x2 = t.value.x1 + i;
       }
-      te(), T.value = !0;
+      ae(), T.value = !0;
     }
   }
-  function ye() {
-    j > 40 ? (g.show({
+  function pe() {
+    q > 40 ? (y.show({
       showCloseButton: !1,
       timeout: 3e3,
       animate: "fadeIn",
       toasts: [{ type: "string", title: "提示", msg: "图片加载超时，请重试" }]
-    }), p = !0, A.value = !1, M.emit("loadImageFailed")) : We() ? (p = !1, se(), oe(), me(), M.emit("cropperReady", { ...c.value })) : (j++, setTimeout(() => ye(), 50));
+    }), W = !0, A.value = !1, c.emit("loadImageFailed")) : Le() ? (W = !1, se(), oe(), ye(), c.emit("cropperReady", { ...x.value })) : (q++, setTimeout(() => pe(), 50));
   }
-  function Le() {
-    I.value != null && (A.value = !1, M.emit("imageLoaded"), j = 0, setTimeout(() => ye()));
+  function Ve() {
+    S.value != null && (A.value = !1, c.emit("imageLoaded"), q = 0, setTimeout(() => pe()));
   }
-  function De() {
-    const e = _.value;
-    (c.value.width !== (e == null ? void 0 : e.offsetWidth) || c.value.height !== (e == null ? void 0 : e.offsetHeight)) && c.value.width && c.value.height && e && (t.value.x1 = t.value.x1 * e.offsetWidth / c.value.width, t.value.x2 = t.value.x2 * e.offsetWidth / c.value.width, t.value.y1 = t.value.y1 * e.offsetHeight / c.value.height, t.value.y2 = t.value.y2 * e.offsetHeight / c.value.height);
+  function je() {
+    const e = L.value;
+    (x.value.width !== (e == null ? void 0 : e.offsetWidth) || x.value.height !== (e == null ? void 0 : e.offsetHeight)) && x.value.width && x.value.height && e && (t.value.x1 = t.value.x1 * e.offsetWidth / x.value.width, t.value.x2 = t.value.x2 * e.offsetWidth / x.value.width, t.value.y1 = t.value.y1 * e.offsetHeight / x.value.height, t.value.y2 = t.value.y2 * e.offsetHeight / x.value.height);
   }
-  const Fe = () => {
-    De(), se(), oe();
+  const qe = () => {
+    je(), se(), oe();
   }, xe = () => {
-    clearTimeout(C), C = setTimeout(Fe, 300);
+    clearTimeout(I), I = setTimeout(qe, 300);
   };
-  Ge(() => {
-    window.addEventListener("resize", xe), ue.value && (J(), A.value = !0, ge(ue.value));
-  }), Je(() => {
+  be(() => {
+    window.addEventListener("resize", xe), ne.value && (Y(), A.value = !0, me(ne.value));
+  }), et(() => {
     window.removeEventListener("resize", xe);
   });
-  function Pe() {
-    o.active && (o.active = !1, te());
+  function Ne() {
+    r.active && (r.active = !1, ae());
   }
-  function he(e) {
+  function re(e) {
     return (e.touches && e.touches[0] ? e.touches[0].clientX : e.clientX) || 0;
   }
-  function re(e) {
+  function ve(e) {
     return (e.touches && e.touches[0] ? e.touches[0].clientY : e.clientY) || 0;
   }
-  function Ve(e, l, n = null) {
-    o && o.active || (e.preventDefault && e.preventDefault(), o = {
+  function Oe(e, i, s = null) {
+    r && r.active || (e.preventDefault && e.preventDefault(), r = {
       active: !0,
-      type: l,
-      position: n,
-      clientX: he(e),
-      clientY: re(e),
+      type: i,
+      position: s,
+      clientX: re(e),
+      clientY: ve(e),
       ...t.value
     });
   }
-  function ve(e = !1) {
-    t.value.x1 < 0 && (t.value.x2 -= e ? t.value.x1 : 0, t.value.x1 = 0), t.value.y1 < 0 && (t.value.y2 -= e ? t.value.y1 : 0, t.value.y1 = 0), t.value.x2 > c.value.width && (t.value.x1 -= e ? t.value.x2 - c.value.width : 0, t.value.x2 = c.value.width), t.value.y2 > c.value.height && (t.value.y1 -= e ? t.value.y2 - c.value.height : 0, t.value.y2 = c.value.height);
+  function ce(e = !1) {
+    t.value.x1 < 0 && (t.value.x2 -= e ? t.value.x1 : 0, t.value.x1 = 0), t.value.y1 < 0 && (t.value.y2 -= e ? t.value.y1 : 0, t.value.y1 = 0), t.value.x2 > x.value.width && (t.value.x1 -= e ? t.value.x2 - x.value.width : 0, t.value.x2 = x.value.width), t.value.y2 > x.value.height && (t.value.y1 -= e ? t.value.y2 - x.value.height : 0, t.value.y2 = x.value.height);
   }
-  function Ne(e) {
-    const l = he(e) - o.clientX, n = re(e) - o.clientY;
-    t.value.x1 = o.x1 + l, t.value.y1 = o.y1 + n, t.value.x2 = o.x2 + l, t.value.y2 = o.y2 + n;
+  function Qe(e) {
+    const i = re(e) - r.clientX, s = ve(e) - r.clientY;
+    t.value.x1 = r.x1 + i, t.value.y1 = r.y1 + s, t.value.x2 = r.x2 + i, t.value.y2 = r.y2 + s;
   }
-  const { checkAspectRatio: je } = tt(t, c, d, o);
-  function Re(e) {
-    const l = he(e) - o.clientX, n = re(e) - o.clientY;
-    switch (o.position) {
+  const { checkAspectRatio: Ke } = Mt(t, x, h, r);
+  function Ge(e) {
+    const i = re(e) - r.clientX, s = ve(e) - r.clientY;
+    switch (r.position) {
       case "left":
-        t.value.x1 = Math.min(o.x1 + l, t.value.x2 - z);
+        t.value.x1 = Math.min(r.x1 + i, t.value.x2 - E);
         break;
       case "topleft":
-        t.value.x1 = Math.min(o.x1 + l, t.value.x2 - z), t.value.y1 = Math.min(o.y1 + n, t.value.y2 - S);
+        t.value.x1 = Math.min(r.x1 + i, t.value.x2 - E), t.value.y1 = Math.min(r.y1 + s, t.value.y2 - U);
         break;
       case "top":
-        t.value.y1 = Math.min(o.y1 + n, t.value.y2 - S);
+        t.value.y1 = Math.min(r.y1 + s, t.value.y2 - U);
         break;
       case "topright":
-        t.value.x2 = Math.max(o.x2 + l, t.value.x1 + z), t.value.y1 = Math.min(o.y1 + n, t.value.y2 - S);
+        t.value.x2 = Math.max(r.x2 + i, t.value.x1 + E), t.value.y1 = Math.min(r.y1 + s, t.value.y2 - U);
         break;
       case "right":
-        t.value.x2 = Math.max(o.x2 + l, t.value.x1 + z);
+        t.value.x2 = Math.max(r.x2 + i, t.value.x1 + E);
         break;
       case "bottomright":
-        t.value.x2 = Math.max(o.x2 + l, t.value.x1 + z), t.value.y2 = Math.max(o.y2 + n, t.value.y1 + S);
+        t.value.x2 = Math.max(r.x2 + i, t.value.x1 + E), t.value.y2 = Math.max(r.y2 + s, t.value.y1 + U);
         break;
       case "bottom":
-        t.value.y2 = Math.max(o.y2 + n, t.value.y1 + S);
+        t.value.y2 = Math.max(r.y2 + s, t.value.y1 + U);
         break;
       case "bottomleft":
-        t.value.x1 = Math.min(o.x1 + l, t.value.x2 - z), t.value.y2 = Math.max(o.y2 + n, t.value.y1 + S);
+        t.value.x1 = Math.min(r.x1 + i, t.value.x2 - E), t.value.y2 = Math.max(r.y2 + s, t.value.y1 + U);
         break;
       case "center":
-        const { scale: x } = e, W = Math.abs(o.x2 - o.x1) * x, R = Math.abs(o.y2 - o.y1) * x, { x1: G } = t.value, { y1: L } = t.value;
-        t.value.x1 = Math.min(o.clientX - W / 2, t.value.x2 - z), t.value.y1 = Math.min(o.clientY - R / 2, t.value.y2 - S), t.value.x2 = Math.max(o.clientX + W / 2, G + z), t.value.y2 = Math.max(o.clientY + R / 2, L + S);
+        const { scale: w } = e, B = Math.abs(r.x2 - r.x1) * w, K = Math.abs(r.y2 - r.y1) * w, { x1: J } = t.value, { y1: V } = t.value;
+        t.value.x1 = Math.min(r.clientX - B / 2, t.value.x2 - E), t.value.y1 = Math.min(r.clientY - K / 2, t.value.y2 - U), t.value.x2 = Math.max(r.clientX + B / 2, J + E), t.value.y2 = Math.max(r.clientY + K / 2, V + U);
         break;
     }
-    b.value && je();
+    b.value && Ke();
   }
-  function $e(e) {
-    o && o.active && (e.stopPropagation && e.stopPropagation(), e.preventDefault && e.preventDefault(), clearTimeout(q), q = setTimeout(() => {
-      o.type === ae.Move ? (Ne(e), ve(!0)) : o.type === ae.Resize && (Re(e), ve(!1));
+  function Je(e) {
+    r && r.active && (e.stopPropagation && e.stopPropagation(), e.preventDefault && e.preventDefault(), clearTimeout(Q), Q = setTimeout(() => {
+      r.type === ie.Move ? (Qe(e), ce(!0)) : r.type === ie.Resize && (Ge(e), ce(!1));
     }, 300));
   }
-  return Y(fe, (e) => {
-    J(), e && e.target && e.target.files && e.target.files.length > 0 && (A.value = !0, de(e.target.files[0]));
-  }), Y(ue, (e) => {
-    e ? (J(), A.value = !0, ge(e)) : (g.show({
+  return ee(fe, (e) => {
+    Y(), e && e.target && e.target.files && e.target.files.length > 0 && (A.value = !0, ge(e.target.files[0]));
+  }), ee(ne, (e) => {
+    e ? (Y(), A.value = !0, me(e)) : (y.show({
       showCloseButton: !1,
       timeout: 3e3,
       animate: "fadeIn",
       toasts: [{ type: "string", title: "提示", msg: "图片路径为空" }]
-    }), A.value = !1, p = !0);
-  }), Y(Me, (e) => {
-    J(), A.value = !0, ne(e);
-  }), Y(we, (e) => {
-    J(), e && (A.value = !0, de(e));
-  }), Y(
+    }), A.value = !1, W = !0);
+  }), ee(Ae, (e) => {
+    Y(), A.value = !0, ue(e);
+  }), ee(Te, (e) => {
+    Y(), e && (A.value = !0, ge(e));
+  }), ee(
     () => [
       a.containWithinAspectRatio,
       a.canvasRotation,
@@ -538,141 +675,258 @@ function at(a, M) {
       a.transform,
       a.imageChangedEvent
     ],
-    ([e, l, n, x, W, R], [G, L, Z, qe, Oe, Qe]) => {
-      y && y.complete && B && (e !== G || l !== L) && ce(), n !== Z && (se(), oe(), ve(!1), te()), x !== qe && T.value && me(), W !== Oe && (be(), te()), R !== Qe && (fe.value = R);
+    ([e, i, s, w, B, K], [J, V, X, Ze, Ye, Xe]) => {
+      M && M.complete && F && (e !== J || i !== V) && de(), s !== X && (se(), oe(), ce(!1), ae()), w !== Ze && T.value && ye(), B !== Ye && (ze(), ae()), K !== Xe && (fe.value = K);
     }
   ), {
-    uploadError: p,
+    uploadError: W,
     imageVisible: T,
-    backgroundColor: U,
-    sourceImage: _,
-    safeImgDataUrl: N,
-    safeTransformStyle: Q,
-    maxSize: c,
+    backgroundColor: H,
+    sourceImage: L,
+    safeImgDataUrl: j,
+    safeTransformStyle: O,
+    maxSize: x,
     cropper: t,
-    marginLeft: K,
-    moveTypes: ie,
+    marginLeft: G,
+    moveTypes: le,
     isLoading: A,
-    startMove: Ve,
-    imageLoadedInView: Le,
-    moveStop: Pe,
-    moveImg: $e
+    startMove: Oe,
+    imageLoadedInView: Ve,
+    moveStop: Ne,
+    moveImg: Je
   };
 }
-const le = /* @__PURE__ */ Ze({
+const Z = /* @__PURE__ */ we({
   name: "FImageCropper",
-  props: Xe,
+  props: he,
   emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
-  setup(a, M) {
-    const s = h(a.alignImage), $ = h(a.roundCropper), g = h(a.hideResizeSquares), t = h(a.loadImageErrorText), m = h(a.disabled), v = h(null), {
+  setup(a, c) {
+    const u = o(a.alignImage), N = o(a.roundCropper), y = o(a.hideResizeSquares), t = o(a.loadImageErrorText), p = o(a.disabled), d = o(null), {
       uploadError: b,
-      imageVisible: d,
+      imageVisible: h,
       backgroundColor: D,
-      sourceImage: U,
-      safeImgDataUrl: u,
-      safeTransformStyle: i,
-      maxSize: k,
-      cropper: w,
-      marginLeft: P,
-      moveTypes: V,
-      isLoading: F,
-      startMove: E,
-      imageLoadedInView: N,
+      sourceImage: H,
+      safeImgDataUrl: l,
+      safeTransformStyle: n,
+      maxSize: C,
+      cropper: g,
+      marginLeft: _,
+      moveTypes: $,
+      isLoading: R,
+      startMove: k,
+      imageLoadedInView: j,
       moveStop: A,
       moveImg: T
-    } = at(a, M);
-    function r(C) {
-      return H("span", {
-        class: `farris-image-cropper-resize-bar ${C}`,
-        onMousedown: O((y) => E(y, V.Resize, C), ["prevent"])
+    } = Ce(a, c);
+    function v(I) {
+      return f("span", {
+        class: `farris-image-cropper-resize-bar ${I}`,
+        onMousedown: P((M) => k(M, $.Resize, I), ["prevent"])
       }, null);
     }
-    function f(C) {
-      return H("div", null, [H("span", {
-        class: `farris-image-cropper-resize-bar ${C}`,
-        onMousedown: O((y) => E(y, V.Resize, C), ["prevent"])
-      }, [H("span", {
+    function m(I) {
+      return f("div", null, [f("span", {
+        class: `farris-image-cropper-resize-bar ${I}`,
+        onMousedown: P((M) => k(M, $.Resize, I), ["prevent"])
+      }, [f("span", {
         class: "farris-image-cropper-square"
-      }, null)]), H("span", {
+      }, null)]), f("span", {
         class: "farris-image-cropper-resize top"
-      }, [H("span", {
+      }, [f("span", {
         class: "farris-image-cropper-square"
       }, null)])]);
     }
-    const j = ["top", "right", "bottom", "left"].map((C) => r(C)), q = ["topleft", "topright", "bottomright", "bottomleft"].map((C) => f(C));
-    return () => H("div", {
+    const q = ["top", "right", "bottom", "left"].map((I) => v(I)), Q = ["topleft", "topright", "bottomright", "bottomleft"].map((I) => m(I));
+    return () => f("div", {
       class: ["farris-image-cropper-frame", {
-        "farris-image-cropper-disabled": m.value
+        "farris-image-cropper-disabled": p.value
       }],
       style: {
-        "text-align": s.value
+        "text-align": u.value
       },
-      onMousemove: O((C) => T(C), ["prevent"]),
-      onTouchmove: O((C) => T(C), ["prevent"]),
-      onMouseup: O(() => A(), ["prevent"]),
-      onTouchend: O(() => A(), ["prevent"])
-    }, [!b && H("div", {
+      onMousemove: P((I) => T(I), ["prevent"]),
+      onTouchmove: P((I) => T(I), ["prevent"]),
+      onMouseup: P(() => A(), ["prevent"]),
+      onTouchend: P(() => A(), ["prevent"])
+    }, [!b && f("div", {
+      ref: d,
+      class: "farris-image-cropper",
+      style: [{
+        background: h.value ? D.value : ""
+      }]
+    }, [l.value && f("img", {
+      title: "farris-source-image",
+      ref: H,
+      class: "farris-source-image",
+      style: [{
+        visibility: h.value ? "visible" : "hidden"
+      }, {
+        transform: n.value
+      }],
+      src: l.value,
+      onLoad: () => j()
+    }, null), C.value && f("div", {
+      class: "farris-image-overlay",
+      style: [{
+        width: `${C.value.width || 0}px`
+      }, {
+        height: `${C.value.height || 0}px`
+      }, {
+        "margin-left": u.value === "center" ? _.value : ""
+      }]
+    }, null), h.value && f("div", {
+      class: ["farris-image-cropper-wrapper", {
+        "farris-image-cropper-rounded": N.value
+      }],
+      style: [{
+        top: `${g.value.y1}px`
+      }, {
+        left: `${g.value.x1}px`
+      }, {
+        width: `${g.value.x2 - g.value.x1}px`
+      }, {
+        height: `${g.value.y2 - g.value.y1}px`
+      }, {
+        visibility: h.value ? "visible" : "hidden"
+      }, {
+        "margin-left": u.value === "center" ? _.value : ""
+      }],
+      tabindex: "0"
+    }, [f("div", {
+      class: "farris-image-cropper-move",
+      onMousedown: P((I) => k(I, $.Move, "topleft"), ["prevent"])
+    }, null), !y.value && f("div", null, [Q, q])])]), R.value && f("div", {
+      class: "farris-image-cropper-loading"
+    }, [f("div", {
+      class: "farris-image-cropper-loading-spinner"
+    }, null)]), b && f("div", {
+      class: "farris-image-cropper-error"
+    }, [t.value])]);
+  }
+}), bt = /* @__PURE__ */ we({
+  name: "FImageCropperDesign",
+  props: he,
+  emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
+  setup(a, c) {
+    const u = o(a.alignImage), N = o(a.roundCropper), y = o(a.hideResizeSquares), t = o(a.loadImageErrorText), p = o(a.disabled), d = o(null), {
+      uploadError: b,
+      imageVisible: h,
+      backgroundColor: D,
+      sourceImage: H,
+      safeImgDataUrl: l,
+      safeTransformStyle: n,
+      maxSize: C,
+      cropper: g,
+      marginLeft: _,
+      moveTypes: $,
+      isLoading: R,
+      startMove: k,
+      imageLoadedInView: j,
+      moveStop: A,
+      moveImg: T
+    } = Ce(a, c), v = o(), m = Me("design-item-context"), q = it(v, m);
+    be(() => {
+      v.value.componentInstance = q;
+    }), c.expose(q.value);
+    function Q(z) {
+      return f("span", {
+        class: `farris-image-cropper-resize-bar ${z}`,
+        onMousedown: P((O) => k(O, $.Resize, z), ["prevent"])
+      }, null);
+    }
+    function I(z) {
+      return f("div", null, [f("span", {
+        class: `farris-image-cropper-resize-bar ${z}`,
+        onMousedown: P((O) => k(O, $.Resize, z), ["prevent"])
+      }, [f("span", {
+        class: "farris-image-cropper-square"
+      }, null)]), f("span", {
+        class: "farris-image-cropper-resize top"
+      }, [f("span", {
+        class: "farris-image-cropper-square"
+      }, null)])]);
+    }
+    const M = ["top", "right", "bottom", "left"].map((z) => Q(z)), L = ["topleft", "topright", "bottomright", "bottomleft"].map((z) => I(z));
+    return () => f("div", {
       ref: v,
+      class: ["farris-image-cropper-frame", {
+        "farris-image-cropper-disabled": p.value
+      }],
+      style: {
+        "text-align": u.value
+      },
+      onMousemove: P((z) => T(z), ["prevent"]),
+      onTouchmove: P((z) => T(z), ["prevent"]),
+      onMouseup: P(() => A(), ["prevent"]),
+      onTouchend: P(() => A(), ["prevent"])
+    }, [!b && f("div", {
+      ref: d,
       class: "farris-image-cropper",
       style: [{
-        background: d.value ? D.value : ""
+        background: h.value ? D.value : ""
       }]
-    }, [u.value && H("img", {
+    }, [l.value && f("img", {
       title: "farris-source-image",
-      ref: U,
+      ref: H,
       class: "farris-source-image",
       style: [{
-        visibility: d.value ? "visible" : "hidden"
+        visibility: h.value ? "visible" : "hidden"
       }, {
-        transform: i.value
+        transform: n.value
       }],
-      src: u.value,
-      onLoad: () => N()
-    }, null), k.value && H("div", {
+      src: l.value,
+      onLoad: () => j()
+    }, null), C.value && f("div", {
       class: "farris-image-overlay",
       style: [{
-        width: `${k.value.width || 0}px`
+        width: `${C.value.width || 0}px`
       }, {
-        height: `${k.value.height || 0}px`
+        height: `${C.value.height || 0}px`
       }, {
-        "margin-left": s.value === "center" ? P.value : ""
+        "margin-left": u.value === "center" ? _.value : ""
       }]
-    }, null), d.value && H("div", {
+    }, null), h.value && f("div", {
       class: ["farris-image-cropper-wrapper", {
-        "farris-image-cropper-rounded": $.value
+        "farris-image-cropper-rounded": N.value
       }],
       style: [{
-        top: `${w.value.y1}px`
+        top: `${g.value.y1}px`
       }, {
-        left: `${w.value.x1}px`
+        left: `${g.value.x1}px`
       }, {
-        width: `${w.value.x2 - w.value.x1}px`
+        width: `${g.value.x2 - g.value.x1}px`
       }, {
-        height: `${w.value.y2 - w.value.y1}px`
+        height: `${g.value.y2 - g.value.y1}px`
       }, {
-        visibility: d.value ? "visible" : "hidden"
+        visibility: h.value ? "visible" : "hidden"
       }, {
-        "margin-left": s.value === "center" ? P.value : ""
+        "margin-left": u.value === "center" ? _.value : ""
       }],
       tabindex: "0"
-    }, [H("div", {
+    }, [f("div", {
       class: "farris-image-cropper-move",
-      onMousedown: O((C) => E(C, V.Move, "topleft"), ["prevent"])
-    }, null), !g.value && H("div", null, [q, j])])]), F.value && H("div", {
+      onMousedown: P((z) => k(z, $.Move, "topleft"), ["prevent"])
+    }, null), !y.value && f("div", null, [L, M])])]), R.value && f("div", {
       class: "farris-image-cropper-loading"
-    }, [H("div", {
+    }, [f("div", {
       class: "farris-image-cropper-loading-spinner"
-    }, null)]), b && H("div", {
+    }, null)]), b && f("div", {
       class: "farris-image-cropper-error"
     }, [t.value])]);
   }
 });
-le.install = (a) => {
-  a.component(le.name, le);
+Z.install = (a) => {
+  a.component(Z.name, Z);
+};
+Z.register = (a, c, u, N) => {
+  a["image-cropper"] = Z, c["image-cropper"] = Ie;
+};
+Z.registerDesigner = (a, c, u) => {
+  a["image-cropper"] = bt, c["image-cropper"] = Ie;
 };
-const ut = Ye(le);
 export {
-  le as ImageCropper,
-  ut as default,
-  Xe as imageCropperProps
+  Z as ImageCropper,
+  Z as default,
+  he as imageCropperProps,
+  Ie as propsResolver
 };