@farris/ui-vue 1.3.1 → 1.3.3

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

@@ -1,14 +1,18 @@
-import { inject as Te, ref as v, onMounted as Ae, onUnmounted as nt, watch as K, defineComponent as Ce, createVNode as A, withModifiers as O } from "vue";
+import { inject as Te, ref as v, onMounted as Ae, onUnmounted as nt, watch as K, defineComponent as Se, createVNode as S, withModifiers as O } from "vue";
 import { isPlainObject as Me, cloneDeep as ut } from "lodash-es";
 const ze = {}, Ee = {};
 function ve(e) {
-  const { properties: i, title: r, ignore: m } = e, o = m && Array.isArray(m), t = Object.keys(i).reduce((g, h) => ((!o || !m.find((w) => w == h)) && (g[h] = i[h].type === "object" && i[h].properties ? ve(i[h]) : ut(i[h].default)), g), {});
-  return r && (!o || !m.find((g) => g == "id")) && (t.id = `${r}-${Date.now()}`), t;
+  const { properties: i, title: r, ignore: p } = e, o = p && Array.isArray(p), t = Object.keys(i).reduce((h, g) => ((!o || !p.find((w) => w === g)) && (h[g] = i[g].type === "object" && i[g].properties ? ve(i[g]) : ut(i[g].default)), h), {});
+  if (r && (!o || !p.find((h) => h === "id"))) {
+    const h = r.toLowerCase().replace(/-/g, "_");
+    t.id = `${h}_${Math.random().toString().slice(2, 6)}`;
+  }
+  return t;
 }
 function ke(e, i = {}, r) {
-  const m = ze[e];
-  if (m) {
-    let o = ve(m);
+  const p = ze[e];
+  if (p) {
+    let o = ve(p);
     const t = Ee[e];
     return o = t ? t({ getSchemaByType: ke }, o, i, r) : o, o;
   }
@@ -16,33 +20,33 @@ function ke(e, i = {}, r) {
 }
 function rt(e, i) {
   const r = ve(i);
-  return Object.keys(e).reduce((m, o) => (m[o] && Me(m[o]) && Me(e[o]) ? Object.assign(m[o], e[o]) : m[o] = e[o], m), r), r;
+  return Object.keys(r).reduce((p, o) => (p[o] && Me(p[o]) && Me(e[o] || !e[o]) ? Object.assign(p[o], e[o] || {}) : p[o] = e[o], p), r), r;
 }
 function st(e, i) {
-  return Object.keys(e).filter((m) => e[m] != null).reduce((m, o) => {
+  return Object.keys(e).filter((p) => e[p] != null).reduce((p, o) => {
     if (i.has(o)) {
       const t = i.get(o);
       if (typeof t == "string")
-        m[t] = e[o];
+        p[t] = e[o];
       else {
-        const g = t(o, e[o], e);
-        Object.assign(m, g);
+        const h = t(o, e[o], e);
+        Object.assign(p, h);
       }
     } else
-      m[o] = e[o];
-    return m;
+      p[o] = e[o];
+    return p;
   }, {});
 }
 function ot(e, i, r = /* @__PURE__ */ new Map()) {
-  const m = rt(e, i);
-  return st(m, r);
+  const p = rt(e, i);
+  return st(p, r);
 }
 function ct(e = {}) {
-  function i(s, p, d, l) {
-    if (typeof d == "number")
-      return l[s].length === d;
-    if (typeof d == "object") {
-      const u = Object.keys(d)[0], T = d[u];
+  function i(s, y, m, l) {
+    if (typeof m == "number")
+      return l[s].length === m;
+    if (typeof m == "object") {
+      const u = Object.keys(m)[0], T = m[u];
       if (u === "not")
         return Number(l[s].length) !== Number(T);
       if (u === "moreThan")
@@ -52,51 +56,51 @@ function ct(e = {}) {
     }
     return !1;
   }
-  function r(s, p, d, l) {
-    return l[s] && l[s].propertyValue && String(l[s].propertyValue.value) === String(d);
+  function r(s, y, m, l) {
+    return l[s] && l[s].propertyValue && String(l[s].propertyValue.value) === String(m);
   }
-  const m = /* @__PURE__ */ new Map([
+  const p = /* @__PURE__ */ new Map([
     ["length", i],
     ["getProperty", r]
   ]);
-  Object.keys(e).reduce((s, p) => (s.set(p, e[p]), s), m);
-  function o(s, p) {
-    const d = s;
-    return typeof p == "number" ? [{ target: d, operator: "length", param: null, value: Number(p) }] : typeof p == "boolean" ? [{ target: d, operator: "getProperty", param: s, value: !!p }] : typeof p == "object" ? Object.keys(p).map((l) => {
+  Object.keys(e).reduce((s, y) => (s.set(y, e[y]), s), p);
+  function o(s, y) {
+    const m = s;
+    return typeof y == "number" ? [{ target: m, operator: "length", param: null, value: Number(y) }] : typeof y == "boolean" ? [{ target: m, operator: "getProperty", param: s, value: !!y }] : typeof y == "object" ? Object.keys(y).map((l) => {
       if (l === "length")
-        return { target: d, operator: "length", param: null, value: p[l] };
-      const u = l, T = p[l];
-      return { target: d, operator: "getProperty", param: u, value: T };
+        return { target: m, operator: "length", param: null, value: y[l] };
+      const u = l, T = y[l];
+      return { target: m, operator: "getProperty", param: u, value: T };
     }) : [];
   }
   function t(s) {
-    return Object.keys(s).reduce((d, l) => {
+    return Object.keys(s).reduce((m, l) => {
       const u = o(l, s[l]);
-      return d.push(...u), d;
+      return m.push(...u), m;
     }, []);
   }
-  function g(s, p) {
-    if (m.has(s.operator)) {
-      const d = m.get(s.operator);
-      return d && d(s.target, s.param, s.value, p) || !1;
+  function h(s, y) {
+    if (p.has(s.operator)) {
+      const m = p.get(s.operator);
+      return m && m(s.target, s.param, s.value, y) || !1;
     }
     return !1;
   }
-  function h(s, p) {
-    return t(s).reduce((u, T) => u && g(T, p), !0);
+  function g(s, y) {
+    return t(s).reduce((u, T) => u && h(T, y), !0);
   }
-  function w(s, p) {
-    const d = Object.keys(s), l = d.includes("allOf"), u = d.includes("anyOf"), T = l || u, W = (T ? s[T ? l ? "allOf" : "anyOf" : "allOf"] : [s]).map((S) => h(S, p));
+  function w(s, y) {
+    const m = Object.keys(s), l = m.includes("allOf"), u = m.includes("anyOf"), T = l || u, W = (T ? s[T ? l ? "allOf" : "anyOf" : "allOf"] : [s]).map((B) => g(B, y));
     return l ? !W.includes(!1) : W.includes(!0);
   }
   return { parseValueSchema: w };
 }
 const ft = {}, vt = {};
 ct();
-function ht(e, i, r = /* @__PURE__ */ new Map(), m = (g, h, w) => h, o = {}, t = (g) => g) {
-  return ze[i.title] = i, Ee[i.title] = m, ft[i.title] = o, vt[i.title] = t, (g = {}) => {
-    const h = ot(g, i, r), w = Object.keys(e).reduce((s, p) => (s[p] = e[p].default, s), {});
-    return Object.assign(w, h);
+function ht(e, i, r = /* @__PURE__ */ new Map(), p = (h, g, w, s) => g, o = {}, t = (h) => h) {
+  return ze[i.title] = i, Ee[i.title] = p, ft[i.title] = o, vt[i.title] = t, (h = {}) => {
+    const g = ot(h, i, r), w = Object.keys(e).reduce((s, y) => (s[y] = e[y].default, s), {});
+    return Object.assign(w, g);
   };
 }
 function gt(e, i) {
@@ -180,7 +184,7 @@ const mt = /* @__PURE__ */ new Map([
   type: Mt,
   properties: wt,
   required: Tt
-}, Ct = "image-cropper", zt = "A Farris Component", Et = "object", kt = {
+}, St = "image-cropper", zt = "A Farris Component", Et = "object", kt = {
   basic: {
     description: "Basic Infomation",
     title: "基本信息",
@@ -234,7 +238,7 @@ const mt = /* @__PURE__ */ new Map([
     }
   }
 }, Dt = {
-  title: Ct,
+  title: St,
   description: zt,
   type: Et,
   categories: kt
@@ -297,7 +301,7 @@ const mt = /* @__PURE__ */ new Map([
   }
 }, we = ht(he, At, mt, dt, Dt);
 var ae = /* @__PURE__ */ ((e) => (e.Move = "move", e.Resize = "resize", e))(ae || {});
-function St() {
+function Bt() {
   function e(o) {
     switch (typeof o == "string" && (o = i(o)), o) {
       case 2:
@@ -322,81 +326,82 @@ function St() {
     const t = new DataView(r(o));
     if (t.getUint16(0, !1) !== 65496)
       return -2;
-    const g = t.byteLength;
-    let h = 2;
-    for (; h < g; ) {
-      if (t.getUint16(h + 2, !1) <= 8) return -1;
-      const w = t.getUint16(h, !1);
-      if (h += 2, w === 65505) {
-        if (t.getUint32(h += 2, !1) !== 1165519206)
+    const h = t.byteLength;
+    let g = 2;
+    for (; g < h; ) {
+      if (t.getUint16(g + 2, !1) <= 8)
+        return -1;
+      const w = t.getUint16(g, !1);
+      if (g += 2, w === 65505) {
+        if (t.getUint32(g += 2, !1) !== 1165519206)
           return -1;
-        const s = t.getUint16(h += 6, !1) === 18761;
-        h += t.getUint32(h + 4, s);
-        const p = t.getUint16(h, s);
-        h += 2;
-        for (let d = 0; d < p; d++)
-          if (t.getUint16(h + d * 12, s) === 274)
-            return t.getUint16(h + d * 12 + 8, s);
+        const s = t.getUint16(g += 6, !1) === 18761;
+        g += t.getUint32(g + 4, s);
+        const y = t.getUint16(g, s);
+        g += 2;
+        for (let m = 0; m < y; m++)
+          if (t.getUint16(g + m * 12, s) === 274)
+            return t.getUint16(g + m * 12 + 8, s);
       } else {
         if ((w & 65280) !== 65280)
           break;
-        h += t.getUint16(h, !1);
+        g += t.getUint16(g, !1);
       }
     }
     return -1;
   }
   function r(o) {
     o = o.replace(/^data:([^;]+);base64,/gmi, "");
-    const t = atob(o), g = t.length, h = new Uint8Array(g);
-    for (let w = 0; w < g; w++)
-      h[w] = t.charCodeAt(w);
-    return h.buffer;
-  }
-  function m(o, t, g) {
-    const h = o.width, w = o.height;
-    t = Math.round(t), g = Math.round(g);
-    const s = h / t, p = w / g, d = Math.ceil(s / 2), l = Math.ceil(p / 2), u = o.getContext("2d");
+    const t = atob(o), h = t.length, g = new Uint8Array(h);
+    for (let w = 0; w < h; w++)
+      g[w] = t.charCodeAt(w);
+    return g.buffer;
+  }
+  function p(o, t, h) {
+    const g = o.width, w = o.height;
+    t = Math.round(t), h = Math.round(h);
+    const s = g / t, y = w / h, m = Math.ceil(s / 2), l = Math.ceil(y / 2), u = o.getContext("2d");
     if (u) {
-      const T = u.getImageData(0, 0, h, w), M = u.createImageData(t, g), { data: P } = T, W = M.data;
-      for (let R = 0; R < g; R++)
-        for (let S = 0; S < t; S++) {
-          const I = (S + R * t) * 4, x = R * p;
-          let C = 0, f = 0, b = 0, V = 0, Q = 0, D = 0, E = 0;
-          const U = Math.floor(S * s), B = Math.floor(R * p);
-          let q = Math.ceil((S + 1) * s), J = Math.ceil((R + 1) * p);
-          q = Math.min(q, h), J = Math.min(J, w);
-          for (let L = B; L < J; L++) {
-            const z = Math.abs(x - L) / l, ie = S * s, ee = z * z;
-            for (let _ = U; _ < q; _++) {
-              const j = Math.abs(ie - _) / d, H = Math.sqrt(ee + j * j);
+      const T = u.getImageData(0, 0, g, w), M = u.createImageData(t, h), { data: P } = T, W = M.data;
+      for (let R = 0; R < h; R++)
+        for (let B = 0; B < t; B++) {
+          const j = (B + R * t) * 4, d = R * y;
+          let A = 0, c = 0, b = 0, V = 0, Q = 0, D = 0, E = 0;
+          const $ = Math.floor(B * s), C = Math.floor(R * y);
+          let q = Math.ceil((B + 1) * s), J = Math.ceil((R + 1) * y);
+          q = Math.min(q, g), J = Math.min(J, w);
+          for (let L = C; L < J; L++) {
+            const z = Math.abs(d - L) / l, ie = B * s, ee = z * z;
+            for (let U = $; U < q; U++) {
+              const N = Math.abs(ie - U) / m, H = Math.sqrt(ee + N * N);
               if (H >= 1)
                 continue;
-              C = 2 * H * H * H - 3 * H * H + 1;
-              const N = 4 * (_ + L * h);
-              E += C * P[N + 3], b += C, P[N + 3] < 255 && (C = C * P[N + 3] / 250), V += C * P[N], Q += C * P[N + 1], D += C * P[N + 2], f += C;
+              A = 2 * H * H * H - 3 * H * H + 1;
+              const I = 4 * (U + L * g);
+              E += A * P[I + 3], b += A, P[I + 3] < 255 && (A = A * P[I + 3] / 250), V += A * P[I], Q += A * P[I + 1], D += A * P[I + 2], c += A;
             }
           }
-          W[I] = V / f, W[I + 1] = Q / f, W[I + 2] = D / f, W[I + 3] = E / b;
+          W[j] = V / c, W[j + 1] = Q / c, W[j + 2] = D / c, W[j + 3] = E / b;
         }
-      o.width = t, o.height = g, u.putImageData(M, 0, 0);
+      o.width = t, o.height = h, u.putImageData(M, 0, 0);
     }
   }
   return {
-    resizeCanvas: m,
+    resizeCanvas: p,
     getTransformationsFromExifData: e
   };
 }
-function Bt(e, i, r, m) {
+function Ct(e, i, r, p) {
   function o(l, u) {
     e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * r.value, l = Math.max(e.value.x2 - i.value.width, 0), u = Math.max(0 - e.value.y1, 0), (l > 0 || u > 0) && (e.value.x2 -= u * r.value > l ? u * r.value : l, e.value.y1 += u * r.value > l ? u : l / r.value);
   }
   function t(l, u) {
     e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * r.value, l = Math.max(e.value.x2 - i.value.width, 0), u = Math.max(e.value.y2 - i.value.height, 0), (l > 0 || u > 0) && (e.value.x2 -= u * r.value > l ? u * r.value : l, e.value.y2 -= u * r.value > l ? u : l / r.value);
   }
-  function g(l, u) {
+  function h(l, u) {
     e.value.y1 = e.value.y2 - (e.value.x2 - e.value.x1) / r.value, l = Math.max(0 - e.value.x1, 0), u = Math.max(0 - e.value.y1, 0), (l > 0 || u > 0) && (e.value.x1 += u * r.value > l ? u * r.value : l, e.value.y1 += u * r.value > l ? u : l / r.value);
   }
-  function h(l, u) {
+  function g(l, u) {
     e.value.y1 = e.value.y2 - (e.value.x2 - e.value.x1) / r.value, l = Math.max(e.value.x2 - i.value.width, 0), u = Math.max(0 - e.value.y1, 0), (l > 0 || u > 0) && (e.value.x2 -= u * r.value > l ? u * r.value : l, e.value.y1 += u * r.value > l ? u : l / r.value);
   }
   function w(l, u) {
@@ -405,14 +410,14 @@ function Bt(e, i, r, m) {
   function s(l, u) {
     e.value.y2 = e.value.y1 + (e.value.x2 - e.value.x1) / r.value, l = Math.max(0 - e.value.x1, 0), u = Math.max(e.value.y2 - i.value.height, 0), (l > 0 || u > 0) && (e.value.x1 += u * r.value > l ? u * r.value : l, e.value.y2 -= u * r.value > l ? u : l / r.value);
   }
-  function p() {
+  function y() {
     e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * r.value, e.value.y2 = e.value.y1 + (e.value.x2 - e.value.x1) / r.value;
     const l = Math.max(0 - e.value.x1, 0), u = Math.max(e.value.x2 - i.value.width, 0), T = Math.max(e.value.y2 - i.value.height, 0), M = Math.max(0 - e.value.y1, 0);
     (l > 0 || u > 0 || T > 0 || M > 0) && (e.value.x1 += T * r.value > l ? T * r.value : l, e.value.x2 -= M * r.value > u ? M * r.value : u, e.value.y1 += M * r.value > u ? M : u / r.value, e.value.y2 -= T * r.value > l ? T : l / r.value);
   }
-  function d() {
+  function m() {
     if (i.value.width && i.value.height)
-      switch (m.position) {
+      switch (p.position) {
         case "top":
           o(0, 0);
           break;
@@ -420,10 +425,10 @@ function Bt(e, i, r, m) {
           t(0, 0);
           break;
         case "topleft":
-          g(0, 0);
+          h(0, 0);
           break;
         case "topright":
-          h(0, 0);
+          g(0, 0);
           break;
         case "right":
         case "bottomright":
@@ -434,23 +439,23 @@ function Bt(e, i, r, m) {
           s(0, 0);
           break;
         case "center":
-          p();
+          y();
           break;
       }
   }
-  return { checkAspectRatio: d };
+  return { checkAspectRatio: m };
 }
 function De(e, i) {
-  const { resizeCanvas: r, getTransformationsFromExifData: m } = St(), o = Te("NotifyService"), t = v(e.cropper), g = v(e.transform), h = v(e.cropperMinWidth), w = v(e.maintainAspectRatio), s = v(e.aspectRatio), p = v(e.autoCrop), d = v(e.backgroundColor), l = v(e.resizeToWidth), u = v(e.onlyScaleDown), T = v(e.containWithinAspectRatio), M = v(e.canvasRotation), P = v(e.format), W = v(e.imageQuality), R = v(e.resizeToHeight), S = v(e.cropperMinHeight), I = v(""), x = v(!0), C = v(!0);
-  let f, b, V = 0, Q, D, E;
-  const U = v(null), B = v(""), q = v(""), J = v("0px"), L = v(), z = v({ width: 100, height: 100 }), ie = ae;
-  let ee, _ = 20, j = 20, H = !1, N = { rotate: 0, flip: !1 }, y = { active: !1, type: null, position: null, x1: 0, y1: 0, x2: 0, y2: 0, clientX: 0, clientY: 0 };
-  const ge = v(e.imageChangedEvent), le = v(e.imageURL), Se = v(e.imageBase64), Be = v(e.imageFile);
+  const { resizeCanvas: r, getTransformationsFromExifData: p } = Bt(), o = Te("NotifyService"), t = v(e.cropper), h = v(e.transform), g = v(e.cropperMinWidth), w = v(e.maintainAspectRatio), s = v(e.aspectRatio), y = v(e.autoCrop), m = v(e.backgroundColor), l = v(e.resizeToWidth), u = v(e.onlyScaleDown), T = v(e.containWithinAspectRatio), M = v(e.canvasRotation), P = v(e.format), W = v(e.imageQuality), R = v(e.resizeToHeight), B = v(e.cropperMinHeight), j = v(""), d = v(!0), A = v(!0);
+  let c, b, V = 0, Q, D, E;
+  const $ = v(null), C = v(""), q = v(""), J = v("0px"), L = v(), z = v({ width: 100, height: 100 }), ie = ae;
+  let ee, U = 20, N = 20, H = !1, I = { rotate: 0, flip: !1 }, x = { active: !1, type: null, position: null, x1: 0, y1: 0, x2: 0, y2: 0, clientX: 0, clientY: 0 };
+  const ge = v(e.imageChangedEvent), le = v(e.imageURL), Be = v(e.imageBase64), Ce = v(e.imageFile);
   function We() {
-    q.value = "scaleX(" + (g.value.scale || 1) * (g.value.flipH ? -1 : 1) + ")scaleY(" + (g.value.scale || 1) * (g.value.flipV ? -1 : 1) + ")rotate(" + (g.value.rotate || 0) + "deg)";
+    q.value = "scaleX(" + (h.value.scale || 1) * (h.value.flipH ? -1 : 1) + ")scaleY(" + (h.value.scale || 1) * (h.value.flipV ? -1 : 1) + ")rotate(" + (h.value.rotate || 0) + "deg)";
   }
   function Y() {
-    C.value = !1, L.value = null, I.value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=", y = {
+    A.value = !1, L.value = null, j.value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=", x = {
       active: !1,
       type: null,
       position: null,
@@ -463,7 +468,7 @@ function De(e, i) {
     }, z.value = {
       width: 0,
       height: 0
-    }, f = {
+    }, c = {
       width: 0,
       height: 0
     }, b = {
@@ -475,75 +480,75 @@ function De(e, i) {
     return /image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(a);
   }
   function Pe() {
-    if (M.value += N.rotate, T.value && f.width && f.height) {
+    if (M.value += I.rotate, T.value && c.width && c.height) {
       if (M.value % 2) {
-        const c = f.width * s.value, k = f.height / s.value;
+        const f = c.width * s.value, k = c.height / s.value;
         return {
-          width: Math.max(f.height, c),
-          height: Math.max(f.width, k)
+          width: Math.max(c.height, f),
+          height: Math.max(c.width, k)
         };
       }
-      const a = f.height * s.value, n = f.width / s.value;
+      const a = c.height * s.value, n = c.width / s.value;
       return {
-        width: Math.max(f.width, a),
-        height: Math.max(f.height, n)
+        width: Math.max(c.width, a),
+        height: Math.max(c.height, n)
       };
     }
     return M.value % 2 ? {
-      height: f.width,
-      width: f.height
+      height: c.width,
+      width: c.height
     } : {
-      width: f.width,
-      height: f.height
+      width: c.width,
+      height: c.height
     };
   }
   function Re() {
-    M.value += N.rotate;
+    M.value += I.rotate;
     const a = Pe(), n = document.createElement("canvas");
     a.width && a.height && (n.width = a.width, n.height = a.height);
-    const c = n.getContext("2d");
-    return f.width && f.height && E && (c == null || c.setTransform(N.flip ? -1 : 1, 0, 0, 1, n.width / 2, n.height / 2), c == null || c.rotate(Math.PI * (M.value / 2)), c == null || c.drawImage(E, -f.width / 2, -f.height / 2)), n.toDataURL();
+    const f = n.getContext("2d");
+    return c.width && c.height && E && (f == null || f.setTransform(I.flip ? -1 : 1, 0, 0, 1, n.width / 2, n.height / 2), f == null || f.rotate(Math.PI * (M.value / 2)), f == null || f.drawImage(E, -c.width / 2, -c.height / 2)), n.toDataURL();
   }
   function He(a) {
     return new Promise((n) => {
-      ee = a, I.value = a, L.value = new Image(), L.value.onload = () => {
-        var c, k;
-        b.width = (c = L.value) == null ? void 0 : c.naturalWidth, b.height = (k = L.value) == null ? void 0 : k.naturalHeight, n();
+      ee = a, j.value = a, L.value = new Image(), L.value.onload = () => {
+        var f, k;
+        b.width = (f = L.value) == null ? void 0 : f.naturalWidth, b.height = (k = L.value) == null ? void 0 : k.naturalHeight, n();
       }, L.value.src = ee;
     });
   }
   function de() {
-    if (!E || !E.complete || !N)
+    if (!E || !E.complete || !I)
       return Promise.reject(new Error("No image loaded"));
     const a = Re();
     return He(a);
   }
   function ne(a) {
-    const n = (c) => {
+    const n = (f) => {
       o.show({
         showCloseButton: !1,
         timeout: 3e3,
         animate: "fadeIn",
         toasts: [{ type: "string", title: "提示", msg: "图片上传错误，请重试" }]
-      }), x.value = !1, H = !0, i.emit("loadImageFailed"), E = null, B.value = "";
+      }), d.value = !1, H = !0, i.emit("loadImageFailed"), E = null, C.value = "";
     };
     E = new Image(), E.onload = () => {
-      B.value = a, N = m(a), f.width = E == null ? void 0 : E.naturalWidth, f.height = E == null ? void 0 : E.naturalHeight, de().then(() => {
+      C.value = a, I = p(a), c.width = E == null ? void 0 : E.naturalWidth, c.height = E == null ? void 0 : E.naturalHeight, de().then(() => {
         H = !1;
       }).catch(n);
     }, E.onerror = n, E.src = a;
   }
-  function $e(a, n) {
+  function _e(a, n) {
     Le(n) ? (H = !1, ne(a)) : (o.show({
       showCloseButton: !1,
       timeout: 3e3,
       animate: "fadeIn",
       toasts: [{ type: "string", title: "提示", msg: "图片类型不正确,请重试" }]
-    }), x.value = !1, H = !0, i.emit("loadImageFailed"));
+    }), d.value = !1, H = !0, i.emit("loadImageFailed"));
   }
   function me(a) {
     const n = new FileReader();
-    n.onload = (c) => $e(c.target.result, a.type), n.readAsDataURL(a);
+    n.onload = (f) => _e(f.target.result, a.type), n.readAsDataURL(a);
   }
   function pe(a) {
     const n = new Image();
@@ -553,55 +558,55 @@ function De(e, i) {
         timeout: 3e3,
         animate: "fadeIn",
         toasts: [{ type: "string", title: "提示", msg: "图片加载错误，请重试" }]
-      }), x.value = !1, H = !0, i.emit("loadImageFailed");
+      }), d.value = !1, H = !0, i.emit("loadImageFailed");
     }, n.onload = () => {
       H = !1;
-      const c = document.createElement("canvas"), k = c.getContext("2d");
-      c.width = n.width, c.height = n.height, k == null || k.drawImage(n, 0, 0), ne(c.toDataURL());
+      const f = document.createElement("canvas"), k = f.getContext("2d");
+      f.width = n.width, f.height = n.height, k == null || k.drawImage(n, 0, 0), ne(f.toDataURL());
     }, n.crossOrigin = "anonymous", n.src = a;
   }
-  function Ue() {
-    return U.value && U.value && U.value.offsetWidth > 0;
+  function $e() {
+    return $.value && $.value && $.value.offsetWidth > 0;
   }
   function ue() {
-    if (U.value) {
-      const a = U.value;
+    if ($.value) {
+      const a = $.value;
       z.value.width = a.offsetWidth, z.value.height = a.offsetHeight, J.value = "calc(50% - " + z.value.width / 2 + "px)";
     }
   }
-  function _e() {
-    L.value && z.value.width && (_ = h.value > 0 ? Math.max(20, h.value / L.value.width * z.value.width) : 20);
+  function Ue() {
+    L.value && z.value.width && (U = g.value > 0 ? Math.max(20, g.value / L.value.width * z.value.width) : 20);
   }
-  function Ie() {
-    w.value ? j = Math.max(20, _ / s.value) : S.value > 0 && L.value && z.value.height ? j = Math.max(20, S.value / L.value.height * z.value.height) : j = 20;
+  function je() {
+    w.value ? N = Math.max(20, U / s.value) : B.value > 0 && L.value && z.value.height ? N = Math.max(20, B.value / L.value.height * z.value.height) : N = 20;
   }
   function re() {
-    L.value ? (_e(), Ie()) : (_ = 20, j = 20);
+    L.value ? (Ue(), je()) : (U = 20, N = 20);
   }
-  function je() {
-    const a = U.value, n = v({ x1: 0, x2: 0, y1: 0, y2: 0 });
+  function Ne() {
+    const a = $.value, n = v({ x1: 0, x2: 0, y1: 0, y2: 0 });
     if (a && b.width && b.height) {
-      const c = b.width / a.offsetWidth;
+      const f = b.width / a.offsetWidth;
       n.value = {
-        x1: Math.round(t.value.x1 * c),
-        y1: Math.round(t.value.y1 * c),
-        x2: Math.round(t.value.x2 * c),
-        y2: Math.round(t.value.y2 * c)
+        x1: Math.round(t.value.x1 * f),
+        y1: Math.round(t.value.y1 * f),
+        x2: Math.round(t.value.x2 * f),
+        y2: Math.round(t.value.y2 * f)
       }, T.value || (n.value.x1 = Math.max(n.value.x1, 0), n.value.y1 = Math.max(n.value.y1, 0), n.value.x2 = Math.min(n.value.x2, b.width), n.value.y2 = Math.min(n.value.y2, b.height));
     }
     return n.value;
   }
-  function Ne() {
-    M.value += N.rotate;
-    const a = U.value, n = v({ x1: 0, x2: 0, y1: 0, y2: 0 });
-    if (a && b.height && b.width && f.height && f.width) {
-      const c = b.width / a.offsetWidth;
-      let k, $;
-      M.value % 2 ? (k = (b.width - f.height) / 2, $ = (b.height - f.width) / 2) : (k = (b.width - f.width) / 2, $ = (b.height - f.height) / 2), n.value = {
-        x1: Math.round(t.value.x1 * c) - k,
-        y1: Math.round(t.value.y1 * c) - $,
-        x2: Math.round(t.value.x2 * c) - k,
-        y2: Math.round(t.value.y2 * c) - $
+  function Ie() {
+    M.value += I.rotate;
+    const a = $.value, n = v({ x1: 0, x2: 0, y1: 0, y2: 0 });
+    if (a && b.height && b.width && c.height && c.width) {
+      const f = b.width / a.offsetWidth;
+      let k, _;
+      M.value % 2 ? (k = (b.width - c.height) / 2, _ = (b.height - c.width) / 2) : (k = (b.width - c.width) / 2, _ = (b.height - c.height) / 2), n.value = {
+        x1: Math.round(t.value.x1 * f) - k,
+        y1: Math.round(t.value.y1 * f) - _,
+        x2: Math.round(t.value.x2 * f) - k,
+        y2: Math.round(t.value.y2 * f) - _
       }, T.value || (n.value.x1 = Math.max(n.value.x1, 0), n.value.y1 = Math.max(n.value.y1, 0), n.value.x2 = Math.min(n.value.x2, b.width), n.value.y2 = Math.min(n.value.y2, b.height));
     }
     return n.value;
@@ -621,32 +626,32 @@ function De(e, i) {
     return a.toDataURL("image/" + P.value, Ve());
   }
   function qe() {
-    if (U.value && U.value && L.value != null) {
-      const a = je(), n = a.x2 - a.x1, c = a.y2 - a.y1, k = document.createElement("canvas");
-      k.width = n, k.height = c;
-      const $ = k.getContext("2d");
-      if ($) {
-        d.value != null && ($.fillStyle = d.value, $.fillRect(0, 0, n, c));
-        const G = (g.value.scale || 1) * (g.value.flipH ? -1 : 1), Z = (g.value.scale || 1) * (g.value.flipV ? -1 : 1);
-        b.width && b.height && ($.setTransform(G, 0, 0, Z, b.width / 2, b.height / 2), $.translate(-a.x1 / G, -a.y1 / Z), $.rotate((g.value.rotate || 0) * Math.PI / 180), $.drawImage(L.value, -b.width / 2, -b.height / 2));
+    if ($.value && $.value && L.value != null) {
+      const a = Ne(), n = a.x2 - a.x1, f = a.y2 - a.y1, k = document.createElement("canvas");
+      k.width = n, k.height = f;
+      const _ = k.getContext("2d");
+      if (_) {
+        m.value != null && (_.fillStyle = m.value, _.fillRect(0, 0, n, f));
+        const G = (h.value.scale || 1) * (h.value.flipH ? -1 : 1), Z = (h.value.scale || 1) * (h.value.flipV ? -1 : 1);
+        b.width && b.height && (_.setTransform(G, 0, 0, Z, b.width / 2, b.height / 2), _.translate(-a.x1 / G, -a.y1 / Z), _.rotate((h.value.rotate || 0) * Math.PI / 180), _.drawImage(L.value, -b.width / 2, -b.height / 2));
         const F = {
           width: n,
-          height: c,
+          height: f,
           imagePosition: a,
           cropperPosition: { ...t.value }
         };
-        T.value && (F.offsetImagePosition = Ne());
-        const X = Oe(n, c);
-        return X !== 1 && (F.width = Math.round(n * X), F.height = w.value ? Math.round(F.width / s.value) : Math.round(c * X), r(k, F.width, F.height)), F.base64 = Fe(k), i.emit("imageCropped", F), F;
+        T.value && (F.offsetImagePosition = Ie());
+        const X = Oe(n, f);
+        return X !== 1 && (F.width = Math.round(n * X), F.height = w.value ? Math.round(F.width / s.value) : Math.round(f * X), r(k, F.width, F.height)), F.base64 = Fe(k), i.emit("imageCropped", F), F;
       }
     }
     return null;
   }
   function te() {
-    p.value && qe();
+    y.value && qe();
   }
   function ye() {
-    const a = U.value;
+    const a = $.value;
     if (a) {
       if (!w.value)
         t.value.x1 = 0, t.value.x2 = a.offsetWidth, t.value.y1 = 0, t.value.y2 = a.offsetHeight;
@@ -659,7 +664,7 @@ function De(e, i) {
         const n = a.offsetHeight * s.value;
         t.value.x1 = (a.offsetWidth - n) / 2, t.value.x2 = t.value.x1 + n;
       }
-      te(), C.value = !0;
+      te(), A.value = !0;
     }
   }
   function xe() {
@@ -668,13 +673,13 @@ function De(e, i) {
       timeout: 3e3,
       animate: "fadeIn",
       toasts: [{ type: "string", title: "提示", msg: "图片加载超时，请重试" }]
-    }), H = !0, x.value = !1, i.emit("loadImageFailed")) : Ue() ? (H = !1, ue(), re(), ye(), i.emit("cropperReady", { ...z.value })) : (V++, setTimeout(() => xe(), 50));
+    }), H = !0, d.value = !1, i.emit("loadImageFailed")) : $e() ? (H = !1, ue(), re(), ye(), i.emit("cropperReady", { ...z.value })) : (V++, setTimeout(() => xe(), 50));
   }
   function Qe() {
-    L.value != null && (x.value = !1, i.emit("imageLoaded"), V = 0, setTimeout(() => xe()));
+    L.value != null && (d.value = !1, i.emit("imageLoaded"), V = 0, setTimeout(() => xe()));
   }
   function Ge() {
-    const a = U.value;
+    const a = $.value;
     (z.value.width !== (a == null ? void 0 : a.offsetWidth) || z.value.height !== (a == null ? void 0 : a.offsetHeight)) && z.value.width && z.value.height && a && (t.value.x1 = t.value.x1 * a.offsetWidth / z.value.width, t.value.x2 = t.value.x2 * a.offsetWidth / z.value.width, t.value.y1 = t.value.y1 * a.offsetHeight / z.value.height, t.value.y2 = t.value.y2 * a.offsetHeight / z.value.height);
   }
   const Je = () => {
@@ -683,12 +688,12 @@ function De(e, i) {
     clearTimeout(D), D = setTimeout(Je, 300);
   };
   Ae(() => {
-    window.addEventListener("resize", be), le.value && (Y(), x.value = !0, pe(le.value));
+    window.addEventListener("resize", be), le.value && (Y(), d.value = !0, pe(le.value));
   }), nt(() => {
     window.removeEventListener("resize", be);
   });
   function Ze() {
-    y.active && (y.active = !1, te());
+    x.active && (x.active = !1, te());
   }
   function se(a) {
     return (a.touches && a.touches[0] ? a.touches[0].clientX : a.clientX) || 0;
@@ -696,11 +701,11 @@ function De(e, i) {
   function oe(a) {
     return (a.touches && a.touches[0] ? a.touches[0].clientY : a.clientY) || 0;
   }
-  function Ye(a, n, c = null) {
-    y && y.active || (a.preventDefault && a.preventDefault(), y = {
+  function Ye(a, n, f = null) {
+    x && x.active || (a.preventDefault && a.preventDefault(), x = {
       active: !0,
       type: n,
-      position: c,
+      position: f,
       clientX: se(a),
       clientY: oe(a),
       ...t.value
@@ -710,62 +715,62 @@ function De(e, i) {
     t.value.x1 < 0 && (t.value.x2 -= a ? t.value.x1 : 0, t.value.x1 = 0), t.value.y1 < 0 && (t.value.y2 -= a ? t.value.y1 : 0, t.value.y1 = 0), t.value.x2 > z.value.width && (t.value.x1 -= a ? t.value.x2 - z.value.width : 0, t.value.x2 = z.value.width), t.value.y2 > z.value.height && (t.value.y1 -= a ? t.value.y2 - z.value.height : 0, t.value.y2 = z.value.height);
   }
   function Xe(a) {
-    const n = se(a) - y.clientX, c = oe(a) - y.clientY;
-    t.value.x1 = y.x1 + n, t.value.y1 = y.y1 + c, t.value.x2 = y.x2 + n, t.value.y2 = y.y2 + c;
+    const n = se(a) - x.clientX, f = oe(a) - x.clientY;
+    t.value.x1 = x.x1 + n, t.value.y1 = x.y1 + f, t.value.x2 = x.x2 + n, t.value.y2 = x.y2 + f;
   }
-  const { checkAspectRatio: Ke } = Bt(t, z, s, y);
+  const { checkAspectRatio: Ke } = Ct(t, z, s, x);
   function et(a) {
-    const n = se(a) - y.clientX, c = oe(a) - y.clientY;
-    switch (y.position) {
+    const n = se(a) - x.clientX, f = oe(a) - x.clientY;
+    switch (x.position) {
       case "left":
-        t.value.x1 = Math.min(y.x1 + n, t.value.x2 - _);
+        t.value.x1 = Math.min(x.x1 + n, t.value.x2 - U);
         break;
       case "topleft":
-        t.value.x1 = Math.min(y.x1 + n, t.value.x2 - _), t.value.y1 = Math.min(y.y1 + c, t.value.y2 - j);
+        t.value.x1 = Math.min(x.x1 + n, t.value.x2 - U), t.value.y1 = Math.min(x.y1 + f, t.value.y2 - N);
         break;
       case "top":
-        t.value.y1 = Math.min(y.y1 + c, t.value.y2 - j);
+        t.value.y1 = Math.min(x.y1 + f, t.value.y2 - N);
         break;
       case "topright":
-        t.value.x2 = Math.max(y.x2 + n, t.value.x1 + _), t.value.y1 = Math.min(y.y1 + c, t.value.y2 - j);
+        t.value.x2 = Math.max(x.x2 + n, t.value.x1 + U), t.value.y1 = Math.min(x.y1 + f, t.value.y2 - N);
         break;
       case "right":
-        t.value.x2 = Math.max(y.x2 + n, t.value.x1 + _);
+        t.value.x2 = Math.max(x.x2 + n, t.value.x1 + U);
         break;
       case "bottomright":
-        t.value.x2 = Math.max(y.x2 + n, t.value.x1 + _), t.value.y2 = Math.max(y.y2 + c, t.value.y1 + j);
+        t.value.x2 = Math.max(x.x2 + n, t.value.x1 + U), t.value.y2 = Math.max(x.y2 + f, t.value.y1 + N);
         break;
       case "bottom":
-        t.value.y2 = Math.max(y.y2 + c, t.value.y1 + j);
+        t.value.y2 = Math.max(x.y2 + f, t.value.y1 + N);
         break;
       case "bottomleft":
-        t.value.x1 = Math.min(y.x1 + n, t.value.x2 - _), t.value.y2 = Math.max(y.y2 + c, t.value.y1 + j);
+        t.value.x1 = Math.min(x.x1 + n, t.value.x2 - U), t.value.y2 = Math.max(x.y2 + f, t.value.y1 + N);
         break;
       case "center":
-        const { scale: k } = a, $ = Math.abs(y.x2 - y.x1) * k, G = Math.abs(y.y2 - y.y1) * k, { x1: Z } = t.value, { y1: F } = t.value;
-        t.value.x1 = Math.min(y.clientX - $ / 2, t.value.x2 - _), t.value.y1 = Math.min(y.clientY - G / 2, t.value.y2 - j), t.value.x2 = Math.max(y.clientX + $ / 2, Z + _), t.value.y2 = Math.max(y.clientY + G / 2, F + j);
+        const { scale: k } = a, _ = Math.abs(x.x2 - x.x1) * k, G = Math.abs(x.y2 - x.y1) * k, { x1: Z } = t.value, { y1: F } = t.value;
+        t.value.x1 = Math.min(x.clientX - _ / 2, t.value.x2 - U), t.value.y1 = Math.min(x.clientY - G / 2, t.value.y2 - N), t.value.x2 = Math.max(x.clientX + _ / 2, Z + U), t.value.y2 = Math.max(x.clientY + G / 2, F + N);
         break;
     }
     w.value && Ke();
   }
   function tt(a) {
-    y && y.active && (a.stopPropagation && a.stopPropagation(), a.preventDefault && a.preventDefault(), clearTimeout(Q), Q = setTimeout(() => {
-      y.type === ae.Move ? (Xe(a), ce(!0)) : y.type === ae.Resize && (et(a), ce(!1));
+    x && x.active && (a.stopPropagation && a.stopPropagation(), a.preventDefault && a.preventDefault(), clearTimeout(Q), Q = setTimeout(() => {
+      x.type === ae.Move ? (Xe(a), ce(!0)) : x.type === ae.Resize && (et(a), ce(!1));
     }, 300));
   }
   return K(ge, (a) => {
-    Y(), a && a.target && a.target.files && a.target.files.length > 0 && (x.value = !0, me(a.target.files[0]));
+    Y(), a && a.target && a.target.files && a.target.files.length > 0 && (d.value = !0, me(a.target.files[0]));
   }), K(le, (a) => {
-    a ? (Y(), x.value = !0, pe(a)) : (o.show({
+    a ? (Y(), d.value = !0, pe(a)) : (o.show({
       showCloseButton: !1,
       timeout: 3e3,
       animate: "fadeIn",
       toasts: [{ type: "string", title: "提示", msg: "图片路径为空" }]
-    }), x.value = !1, H = !0);
-  }), K(Se, (a) => {
-    Y(), x.value = !0, ne(a);
+    }), d.value = !1, H = !0);
   }), K(Be, (a) => {
-    Y(), a && (x.value = !0, me(a));
+    Y(), d.value = !0, ne(a);
+  }), K(Ce, (a) => {
+    Y(), a && (d.value = !0, me(a));
   }), K(
     () => [
       e.containWithinAspectRatio,
@@ -775,37 +780,37 @@ function De(e, i) {
       e.transform,
       e.imageChangedEvent
     ],
-    ([a, n, c, k, $, G], [Z, F, X, at, it, lt]) => {
-      E && E.complete && N && (a !== Z || n !== F) && de(), c !== X && (ue(), re(), ce(!1), te()), k !== at && C.value && ye(), $ !== it && (We(), te()), G !== lt && (ge.value = G);
+    ([a, n, f, k, _, G], [Z, F, X, at, it, lt]) => {
+      E && E.complete && I && (a !== Z || n !== F) && de(), f !== X && (ue(), re(), ce(!1), te()), k !== at && A.value && ye(), _ !== it && (We(), te()), G !== lt && (ge.value = G);
     }
   ), {
     uploadError: H,
-    imageVisible: C,
-    backgroundColor: d,
-    sourceImage: U,
-    safeImgDataUrl: I,
+    imageVisible: A,
+    backgroundColor: m,
+    sourceImage: $,
+    safeImgDataUrl: j,
     safeTransformStyle: q,
     maxSize: z,
     cropper: t,
     marginLeft: J,
     moveTypes: ie,
-    isLoading: x,
+    isLoading: d,
     startMove: Ye,
     imageLoadedInView: Qe,
     moveStop: Ze,
     moveImg: tt
   };
 }
-const fe = /* @__PURE__ */ Ce({
+const fe = /* @__PURE__ */ Se({
   name: "FImageCropper",
   props: he,
   emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
   setup(e, i) {
-    const r = v(e.alignImage), m = v(e.roundCropper), o = v(e.hideResizeSquares), t = v(e.loadImageErrorText), g = v(e.disabled), h = v(null), {
+    const r = v(e.alignImage), p = v(e.roundCropper), o = v(e.hideResizeSquares), t = v(e.loadImageErrorText), h = v(e.disabled), g = v(null), {
       uploadError: w,
       imageVisible: s,
-      backgroundColor: p,
-      sourceImage: d,
+      backgroundColor: y,
+      sourceImage: m,
       safeImgDataUrl: l,
       safeTransformStyle: u,
       maxSize: T,
@@ -813,50 +818,50 @@ const fe = /* @__PURE__ */ Ce({
       marginLeft: P,
       moveTypes: W,
       isLoading: R,
-      startMove: S,
-      imageLoadedInView: I,
-      moveStop: x,
-      moveImg: C
+      startMove: B,
+      imageLoadedInView: j,
+      moveStop: d,
+      moveImg: A
     } = De(e, i);
-    function f(D) {
-      return A("span", {
+    function c(D) {
+      return S("span", {
         class: `farris-image-cropper-resize-bar ${D}`,
-        onMousedown: O((E) => S(E, W.Resize, D), ["prevent"])
+        onMousedown: O((E) => B(E, W.Resize, D), ["prevent"])
       }, null);
     }
     function b(D) {
-      return A("div", null, [A("span", {
+      return S("div", null, [S("span", {
         class: `farris-image-cropper-resize-bar ${D}`,
-        onMousedown: O((E) => S(E, W.Resize, D), ["prevent"])
-      }, [A("span", {
+        onMousedown: O((E) => B(E, W.Resize, D), ["prevent"])
+      }, [S("span", {
         class: "farris-image-cropper-square"
-      }, null)]), A("span", {
+      }, null)]), S("span", {
         class: "farris-image-cropper-resize top"
-      }, [A("span", {
+      }, [S("span", {
         class: "farris-image-cropper-square"
       }, null)])]);
     }
-    const V = ["top", "right", "bottom", "left"].map((D) => f(D)), Q = ["topleft", "topright", "bottomright", "bottomleft"].map((D) => b(D));
-    return () => A("div", {
+    const V = ["top", "right", "bottom", "left"].map((D) => c(D)), Q = ["topleft", "topright", "bottomright", "bottomleft"].map((D) => b(D));
+    return () => S("div", {
       class: ["farris-image-cropper-frame", {
-        "farris-image-cropper-disabled": g.value
+        "farris-image-cropper-disabled": h.value
       }],
       style: {
         "text-align": r.value
       },
-      onMousemove: O((D) => C(D), ["prevent"]),
-      onTouchmove: O((D) => C(D), ["prevent"]),
-      onMouseup: O(() => x(), ["prevent"]),
-      onTouchend: O(() => x(), ["prevent"])
-    }, [!w && A("div", {
-      ref: h,
+      onMousemove: O((D) => A(D), ["prevent"]),
+      onTouchmove: O((D) => A(D), ["prevent"]),
+      onMouseup: O(() => d(), ["prevent"]),
+      onTouchend: O(() => d(), ["prevent"])
+    }, [!w && S("div", {
+      ref: g,
       class: "farris-image-cropper",
       style: [{
-        background: s.value ? p.value : ""
+        background: s.value ? y.value : ""
       }]
-    }, [l.value && A("img", {
+    }, [l.value && S("img", {
       title: "farris-source-image",
-      ref: d,
+      ref: m,
       class: "farris-source-image",
       style: [{
         visibility: s.value ? "visible" : "hidden"
@@ -864,8 +869,8 @@ const fe = /* @__PURE__ */ Ce({
         transform: u.value
       }],
       src: l.value,
-      onLoad: () => I()
-    }, null), T.value && A("div", {
+      onLoad: () => j()
+    }, null), T.value && S("div", {
       class: "farris-image-overlay",
       style: [{
         width: `${T.value.width || 0}px`
@@ -874,9 +879,9 @@ const fe = /* @__PURE__ */ Ce({
       }, {
         "margin-left": r.value === "center" ? P.value : ""
       }]
-    }, null), s.value && A("div", {
+    }, null), s.value && S("div", {
       class: ["farris-image-cropper-wrapper", {
-        "farris-image-cropper-rounded": m.value
+        "farris-image-cropper-rounded": p.value
       }],
       style: [{
         top: `${M.value.y1}px`
@@ -892,102 +897,109 @@ const fe = /* @__PURE__ */ Ce({
         "margin-left": r.value === "center" ? P.value : ""
       }],
       tabindex: "0"
-    }, [A("div", {
+    }, [S("div", {
       class: "farris-image-cropper-move",
-      onMousedown: O((D) => S(D, W.Move, "topleft"), ["prevent"])
-    }, null), !o.value && A("div", null, [Q, V])])]), R.value && A("div", {
+      onMousedown: O((D) => B(D, W.Move, "topleft"), ["prevent"])
+    }, null), !o.value && S("div", null, [Q, V])])]), R.value && S("div", {
       class: "farris-image-cropper-loading"
-    }, [A("div", {
+    }, [S("div", {
       class: "farris-image-cropper-loading-spinner"
-    }, null)]), w && A("div", {
+    }, null)]), w && S("div", {
       class: "farris-image-cropper-error"
     }, [t.value])]);
   }
 });
 function Wt(e, i, r) {
-  var I;
-  function m() {
-  }
-  const o = "", t = "", g = v();
+  var j;
+  const p = "", o = "", t = v();
   function h() {
     return (i == null ? void 0 : i.schema.componentType) !== "frame";
   }
-  function w() {
+  function g() {
     return !1;
   }
-  function s() {
+  function w() {
     return (i == null ? void 0 : i.schema.componentType) !== "frame";
   }
-  function p() {
+  function s() {
     return (i == null ? void 0 : i.schema.componentType) === "frame";
   }
-  function d(x) {
-    if (!x || !x.value)
+  function y(d) {
+    if (!d || !d.value)
       return null;
-    if (x.value.schema && x.value.schema.type === "component")
-      return x.value;
-    const C = v(x == null ? void 0 : x.value.parent), f = d(C);
-    return f || null;
+    if (d.value.schema && d.value.schema.type === "component")
+      return d.value;
+    const A = v(d == null ? void 0 : d.value.parent), c = y(A);
+    return c || null;
   }
-  function l(x = i) {
-    const { componentInstance: C, designerItemElementRef: f } = x;
-    return !C || !C.value ? null : C.value.canMove ? f : l(x.parent);
+  function m(d = i) {
+    const { componentInstance: A, designerItemElementRef: c } = d;
+    return !A || !A.value ? null : A.value.canMove ? c : m(d.parent);
   }
-  function u(x) {
+  function l(d) {
     return !!r;
   }
-  function T() {
+  function u() {
     return (i == null ? void 0 : i.schema.label) || (i == null ? void 0 : i.schema.title) || (i == null ? void 0 : i.schema.name);
   }
-  function M() {
+  function T() {
+  }
+  function M(d, A) {
   }
-  function P(x, C) {
+  function P(d, A) {
+    const { componentType: c } = d;
+    let b = ke(c, d, A);
+    const V = c.toLowerCase().replace(/-/g, "_");
+    return b && !b.id && b.type === c && (b.id = `${V}_${Math.random().toString().slice(2, 6)}`), b;
   }
-  function W(x, C) {
-    const { componentType: f } = x;
-    let b = ke(f, x, C);
-    const V = f.toLowerCase().replace("-", "_");
-    return b && !b.id && b.type === f && (b.id = `${V}_${Math.random().toString().slice(2, 6)}`), b;
+  function W(d) {
   }
-  function R(x) {
+  function R(...d) {
   }
-  function S(...x) {
+  function B() {
+    i != null && i.schema.contents && i.schema.contents.map((d) => {
+      var b;
+      let A = d.id;
+      d.type === "component-ref" && (A = d.component);
+      const c = e.value.querySelector(`#${A}-design-item`);
+      (b = c == null ? void 0 : c.componentInstance) != null && b.value.onRemoveComponent && c.componentInstance.value.onRemoveComponent();
+    });
   }
-  return g.value = {
+  return t.value = {
     canMove: h(),
-    canSelectParent: w(),
-    canDelete: s(),
-    canNested: !p(),
+    canSelectParent: g(),
+    canDelete: w(),
+    canNested: !s(),
     contents: i == null ? void 0 : i.schema.contents,
     elementRef: e,
-    parent: (I = i == null ? void 0 : i.parent) == null ? void 0 : I.componentInstance,
+    parent: (j = i == null ? void 0 : i.parent) == null ? void 0 : j.componentInstance,
     schema: i == null ? void 0 : i.schema,
-    styles: o,
-    designerClass: t,
-    canAccepts: u,
-    getBelongedComponentInstance: d,
-    getDraggableDesignItemElement: l,
-    getDraggingDisplayText: T,
-    getPropConfig: S,
-    getDragScopeElement: M,
-    onAcceptMovedChildElement: P,
-    onChildElementMovedOut: R,
-    addNewChildComponentSchema: W,
-    updateDragAndDropRules: m,
+    styles: p,
+    designerClass: o,
+    canAccepts: l,
+    getBelongedComponentInstance: y,
+    getDraggableDesignItemElement: m,
+    getDraggingDisplayText: u,
+    getPropConfig: R,
+    getDragScopeElement: T,
+    onAcceptMovedChildElement: M,
+    onChildElementMovedOut: W,
+    addNewChildComponentSchema: P,
     triggerBelongedComponentToMoveWhenMoved: v(!1),
-    triggerBelongedComponentToDeleteWhenDeleted: v(!1)
-  }, g;
+    triggerBelongedComponentToDeleteWhenDeleted: v(!1),
+    onRemoveComponent: B
+  }, t;
 }
-const Lt = /* @__PURE__ */ Ce({
+const Lt = /* @__PURE__ */ Se({
   name: "FImageCropperDesign",
   props: he,
   emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
   setup(e, i) {
-    const r = v(e.alignImage), m = v(e.roundCropper), o = v(e.hideResizeSquares), t = v(e.loadImageErrorText), g = v(e.disabled), h = v(null), {
+    const r = v(e.alignImage), p = v(e.roundCropper), o = v(e.hideResizeSquares), t = v(e.loadImageErrorText), h = v(e.disabled), g = v(null), {
       uploadError: w,
       imageVisible: s,
-      backgroundColor: p,
-      sourceImage: d,
+      backgroundColor: y,
+      sourceImage: m,
       safeImgDataUrl: l,
       safeTransformStyle: u,
       maxSize: T,
@@ -995,54 +1007,54 @@ const Lt = /* @__PURE__ */ Ce({
       marginLeft: P,
       moveTypes: W,
       isLoading: R,
-      startMove: S,
-      imageLoadedInView: I,
-      moveStop: x,
-      moveImg: C
-    } = De(e, i), f = v(), b = Te("design-item-context"), V = Wt(f, b);
+      startMove: B,
+      imageLoadedInView: j,
+      moveStop: d,
+      moveImg: A
+    } = De(e, i), c = v(), b = Te("design-item-context"), V = Wt(c, b);
     Ae(() => {
-      f.value.componentInstance = V;
+      c.value.componentInstance = V;
     }), i.expose(V.value);
-    function Q(B) {
-      return A("span", {
-        class: `farris-image-cropper-resize-bar ${B}`,
-        onMousedown: O((q) => S(q, W.Resize, B), ["prevent"])
+    function Q(C) {
+      return S("span", {
+        class: `farris-image-cropper-resize-bar ${C}`,
+        onMousedown: O((q) => B(q, W.Resize, C), ["prevent"])
       }, null);
     }
-    function D(B) {
-      return A("div", null, [A("span", {
-        class: `farris-image-cropper-resize-bar ${B}`,
-        onMousedown: O((q) => S(q, W.Resize, B), ["prevent"])
-      }, [A("span", {
+    function D(C) {
+      return S("div", null, [S("span", {
+        class: `farris-image-cropper-resize-bar ${C}`,
+        onMousedown: O((q) => B(q, W.Resize, C), ["prevent"])
+      }, [S("span", {
         class: "farris-image-cropper-square"
-      }, null)]), A("span", {
+      }, null)]), S("span", {
         class: "farris-image-cropper-resize top"
-      }, [A("span", {
+      }, [S("span", {
         class: "farris-image-cropper-square"
       }, null)])]);
     }
-    const E = ["top", "right", "bottom", "left"].map((B) => Q(B)), U = ["topleft", "topright", "bottomright", "bottomleft"].map((B) => D(B));
-    return () => A("div", {
-      ref: f,
+    const E = ["top", "right", "bottom", "left"].map((C) => Q(C)), $ = ["topleft", "topright", "bottomright", "bottomleft"].map((C) => D(C));
+    return () => S("div", {
+      ref: c,
       class: ["farris-image-cropper-frame", {
-        "farris-image-cropper-disabled": g.value
+        "farris-image-cropper-disabled": h.value
       }],
       style: {
         "text-align": r.value
       },
-      onMousemove: O((B) => C(B), ["prevent"]),
-      onTouchmove: O((B) => C(B), ["prevent"]),
-      onMouseup: O(() => x(), ["prevent"]),
-      onTouchend: O(() => x(), ["prevent"])
-    }, [!w && A("div", {
-      ref: h,
+      onMousemove: O((C) => A(C), ["prevent"]),
+      onTouchmove: O((C) => A(C), ["prevent"]),
+      onMouseup: O(() => d(), ["prevent"]),
+      onTouchend: O(() => d(), ["prevent"])
+    }, [!w && S("div", {
+      ref: g,
       class: "farris-image-cropper",
       style: [{
-        background: s.value ? p.value : ""
+        background: s.value ? y.value : ""
       }]
-    }, [l.value && A("img", {
+    }, [l.value && S("img", {
       title: "farris-source-image",
-      ref: d,
+      ref: m,
       class: "farris-source-image",
       style: [{
         visibility: s.value ? "visible" : "hidden"
@@ -1050,8 +1062,8 @@ const Lt = /* @__PURE__ */ Ce({
         transform: u.value
       }],
       src: l.value,
-      onLoad: () => I()
-    }, null), T.value && A("div", {
+      onLoad: () => j()
+    }, null), T.value && S("div", {
       class: "farris-image-overlay",
       style: [{
         width: `${T.value.width || 0}px`
@@ -1060,9 +1072,9 @@ const Lt = /* @__PURE__ */ Ce({
       }, {
         "margin-left": r.value === "center" ? P.value : ""
       }]
-    }, null), s.value && A("div", {
+    }, null), s.value && S("div", {
       class: ["farris-image-cropper-wrapper", {
-        "farris-image-cropper-rounded": m.value
+        "farris-image-cropper-rounded": p.value
       }],
       style: [{
         top: `${M.value.y1}px`
@@ -1078,14 +1090,14 @@ const Lt = /* @__PURE__ */ Ce({
         "margin-left": r.value === "center" ? P.value : ""
       }],
       tabindex: "0"
-    }, [A("div", {
+    }, [S("div", {
       class: "farris-image-cropper-move",
-      onMousedown: O((B) => S(B, W.Move, "topleft"), ["prevent"])
-    }, null), !o.value && A("div", null, [U, E])])]), R.value && A("div", {
+      onMousedown: O((C) => B(C, W.Move, "topleft"), ["prevent"])
+    }, null), !o.value && S("div", null, [$, E])])]), R.value && S("div", {
       class: "farris-image-cropper-loading"
-    }, [A("div", {
+    }, [S("div", {
       class: "farris-image-cropper-loading-spinner"
-    }, null)]), w && A("div", {
+    }, null)]), w && S("div", {
       class: "farris-image-cropper-error"
     }, [t.value])]);
   }
@@ -1093,7 +1105,7 @@ const Lt = /* @__PURE__ */ Ce({
   install(e) {
     e.component(fe.name, fe);
   },
-  register(e, i, r, m) {
+  register(e, i, r, p) {
     e["image-cropper"] = fe, i["image-cropper"] = we;
   },
   registerDesigner(e, i, r) {