@cropvue/vue 0.1.0

package/dist/cropvue.mjs

@@ -0,0 +1,831 @@
+import { defineComponent as V, ref as D, computed as L, onMounted as ee, onUnmounted as te, watch as Z, nextTick as ue, openBlock as w, createElementBlock as C, createElementVNode as n, normalizeClass as O, renderSlot as x, normalizeStyle as Y, createCommentVNode as I, createStaticVNode as oe, Fragment as G, unref as i, createVNode as J, toDisplayString as ce, renderList as pe, withModifiers as de } from "vue";
+import { usePointerHandler as ve, isPointInsideStencil as me, handleKeyboard as fe, handleCropMove as he, handleCropResize as ge, handleZoom as ye, handlePan as _e, useCropper as xe, useDropzone as ne, renderCrop as $e, useImageQueue as be } from "@cropvue/core";
+import { useCompressor as Ke, useCropper as Ge, useDropzone as Je, useImageQueue as et, useUploader as tt } from "@cropvue/core";
+const we = ["src"], Ce = {
+  key: 0,
+  class: "cropvue-editor__handle cropvue-editor__handle--ne",
+  "data-handle": "ne"
+}, ke = 14, ze = /* @__PURE__ */ V({
+  __name: "CropEditor",
+  props: {
+    image: {},
+    transform: {},
+    crop: {},
+    pannable: { type: Boolean, default: !0 }
+  },
+  emits: ["update:transform", "update:crop"],
+  setup(f, { expose: k, emit: v }) {
+    const e = f, o = v, l = D(), t = D(), s = D(0), p = D(0), m = D(!1), u = L(() => {
+      const r = e.image;
+      if (!r || s.value === 0 || p.value === 0 || r.naturalWidth === 0 || r.naturalHeight === 0) return 1;
+      const a = s.value / r.naturalWidth, h = p.value / r.naturalHeight;
+      return Math.min(a, h, 1);
+    }), c = L(() => {
+      const r = e.image;
+      return r ? r.naturalWidth * u.value : 0;
+    }), N = L(() => {
+      const r = e.image;
+      return r ? r.naturalHeight * u.value : 0;
+    }), B = L(() => ({
+      x: (s.value - c.value) / 2,
+      y: (p.value - N.value) / 2
+    })), X = L(() => {
+      const r = e.transform, a = u.value, h = [];
+      return h.push(`translate(${r.x * a}px, ${r.y * a}px)`), h.push(`scale(${r.flipX ? -r.scale : r.scale}, ${r.flipY ? -r.scale : r.scale})`), h.push(`rotate(${r.rotation}deg)`), {
+        width: `${c.value}px`,
+        height: `${N.value}px`,
+        transform: h.join(" "),
+        transformOrigin: "center center"
+      };
+    }), q = L(() => {
+      const r = u.value, a = B.value;
+      return {
+        left: `${e.crop.x * r + a.x}px`,
+        top: `${e.crop.y * r + a.y}px`,
+        width: `${e.crop.width * r}px`,
+        height: `${e.crop.height * r}px`
+      };
+    }), A = L(() => {
+      const r = e.crop, a = u.value, h = B.value, g = r.x * a + h.x, y = r.y * a + h.y, b = r.width * a, $ = r.height * a, W = s.value, P = p.value;
+      let S;
+      if (r.stencil === "circle") {
+        const M = Math.min(b, $) / 2, z = g + b / 2, R = y + $ / 2;
+        S = `M${z - M},${R} A${M},${M} 0 1,1 ${z + M},${R} A${M},${M} 0 1,1 ${z - M},${R} Z`;
+      } else if (r.stencil === "freeform" && r.points && r.points.length >= 3) {
+        const z = r.points.map((R) => `${R.x * a + h.x},${R.y * a + h.y}`);
+        S = `M${z[0]} ${z.slice(1).map((R) => `L${R}`).join(" ")} Z`;
+      } else
+        S = `M${g},${y} L${g + b},${y} L${g + b},${y + $} L${g},${y + $} Z`;
+      return { clipPath: `path(evenodd, "${`M0,0 L${W},0 L${W},${P} L0,${P} Z`} ${S}")` };
+    }), j = L(() => {
+      const r = e.crop, a = u.value, h = B.value, g = r.x * a + h.x, y = r.y * a + h.y, b = r.width * a, $ = r.height * a;
+      if (r.stencil === "circle") {
+        const U = Math.min(b, $) / 2, M = g + b / 2, z = y + $ / 2;
+        return `circle(${U}px at ${M}px ${z}px)`;
+      }
+      const W = y, P = s.value - (g + b), S = p.value - (y + $);
+      return `inset(${W}px ${P}px ${S}px ${g}px)`;
+    });
+    function d() {
+      t.value && (s.value = t.value.clientWidth, p.value = t.value.clientHeight);
+    }
+    let _ = null;
+    function H() {
+      _ && (_.destroy(), _ = null);
+      const r = l.value;
+      r && (_ = ve(r, {
+        onPan(a, h) {
+          e.pannable && (m.value = !0, o("update:transform", _e(e.transform, a, h)));
+        },
+        onZoom(a, h, g) {
+          e.pannable && o("update:transform", ye(e.transform, a, h, g));
+        },
+        onCropResize(a, h, g) {
+          const y = e.image, b = y ? { width: y.naturalWidth, height: y.naturalHeight } : { width: e.crop.width, height: e.crop.height };
+          o("update:crop", ge(e.crop, a, h, g, b));
+        },
+        onCropMove(a, h) {
+          const g = e.image, y = g ? { width: g.naturalWidth, height: g.naturalHeight } : { width: e.crop.width, height: e.crop.height };
+          o("update:crop", he(e.crop, a, h, y));
+        },
+        onKeyboard(a, h) {
+          e.pannable && o("update:transform", fe(e.transform, a, h));
+        },
+        getHandleAtPoint(a) {
+          const g = a.target?.getAttribute?.("data-handle");
+          if (g) return g;
+          const y = u.value, b = B.value, $ = e.crop, W = $.x * y + b.x, P = $.y * y + b.y, S = W + $.width * y, E = P + $.height * y, U = l.value;
+          if (!U) return null;
+          const M = U.getBoundingClientRect(), z = a.clientX - M.left, R = a.clientY - M.top, F = ke;
+          if ($.stencil === "circle") {
+            const K = $.width * y / 2, ie = W + K, ae = P + K, le = ie + K * Math.SQRT1_2, se = ae - K * Math.SQRT1_2;
+            return Math.abs(z - le) < F && Math.abs(R - se) < F ? "ne" : null;
+          }
+          return Math.abs(z - W) < F && Math.abs(R - P) < F ? "nw" : Math.abs(z - S) < F && Math.abs(R - P) < F ? "ne" : Math.abs(z - W) < F && Math.abs(R - E) < F ? "sw" : Math.abs(z - S) < F && Math.abs(R - E) < F ? "se" : null;
+        },
+        isInsideCropArea(a) {
+          const h = u.value, g = B.value, y = e.crop, b = l.value;
+          if (!b) return !1;
+          const $ = b.getBoundingClientRect(), W = a.clientX - $.left, P = a.clientY - $.top, S = (W - g.x) / h, E = (P - g.y) / h;
+          return me(S, E, y);
+        },
+        displayScale: () => u.value
+      }));
+    }
+    let T = null, Q = null;
+    ee(() => {
+      d(), H(), t.value && (T = new ResizeObserver(() => {
+        Q || (Q = requestAnimationFrame(() => {
+          d(), Q = null;
+        }));
+      }), T.observe(t.value));
+    }), te(() => {
+      T?.disconnect(), T = null, Q && (cancelAnimationFrame(Q), Q = null), _ && (_.destroy(), _ = null);
+    }), Z(() => e.image, async () => {
+      await ue(), d();
+    });
+    function re() {
+      m.value = !1;
+    }
+    return k({ editorRef: l, displayScale: u }), (r, a) => (w(), C("div", {
+      ref_key: "containerRef",
+      ref: t,
+      class: "cropvue-editor"
+    }, [
+      n("div", {
+        ref_key: "editorRef",
+        ref: l,
+        class: O(["cropvue-editor__viewport", { "cropvue-editor__viewport--panning": m.value }]),
+        tabindex: "0",
+        onPointerup: re
+      }, [
+        x(r.$slots, "image", {
+          style: Y(X.value),
+          image: f.image,
+          transform: f.transform
+        }, () => [
+          f.image ? (w(), C("img", {
+            key: 0,
+            src: f.image.element.src,
+            class: "cropvue-editor__image",
+            style: Y(X.value),
+            draggable: "false",
+            alt: ""
+          }, null, 12, we)) : I("", !0)
+        ]),
+        x(r.$slots, "overlay", {
+          crop: f.crop,
+          clipPath: j.value
+        }, () => [
+          n("div", {
+            class: "cropvue-editor__overlay",
+            style: Y(A.value)
+          }, null, 4)
+        ]),
+        x(r.$slots, "crop-area", {
+          crop: f.crop,
+          style: Y(q.value)
+        }, () => [
+          n("div", {
+            class: O(["cropvue-editor__crop-area", { "cropvue-editor__crop-area--circle": f.crop.stencil === "circle" }]),
+            style: Y(q.value)
+          }, [
+            f.crop.stencil !== "circle" ? x(r.$slots, "grid", {
+              key: 0,
+              crop: f.crop
+            }, () => [
+              a[0] || (a[0] = oe('<div class="cropvue-editor__grid"><div class="cropvue-editor__grid-line cropvue-editor__grid-line--h1"></div><div class="cropvue-editor__grid-line cropvue-editor__grid-line--h2"></div><div class="cropvue-editor__grid-line cropvue-editor__grid-line--v1"></div><div class="cropvue-editor__grid-line cropvue-editor__grid-line--v2"></div></div>', 1))
+            ]) : I("", !0),
+            x(r.$slots, "handles", { crop: f.crop }, () => [
+              f.crop.stencil === "circle" ? (w(), C("div", Ce)) : (w(), C(G, { key: 1 }, [
+                a[1] || (a[1] = n("div", {
+                  class: "cropvue-editor__handle cropvue-editor__handle--nw",
+                  "data-handle": "nw"
+                }, null, -1)),
+                a[2] || (a[2] = n("div", {
+                  class: "cropvue-editor__handle cropvue-editor__handle--ne",
+                  "data-handle": "ne"
+                }, null, -1)),
+                a[3] || (a[3] = n("div", {
+                  class: "cropvue-editor__handle cropvue-editor__handle--sw",
+                  "data-handle": "sw"
+                }, null, -1)),
+                a[4] || (a[4] = n("div", {
+                  class: "cropvue-editor__handle cropvue-editor__handle--se",
+                  "data-handle": "se"
+                }, null, -1))
+              ], 64))
+            ])
+          ], 6)
+        ])
+      ], 34)
+    ], 512));
+  }
+}), Re = { class: "cropvue-toolbar" }, Me = /* @__PURE__ */ V({
+  __name: "CropToolbar",
+  props: {
+    transform: {}
+  },
+  emits: ["rotate-left", "rotate-right", "flip-x", "flip-y", "zoom-in", "zoom-out", "reset"],
+  setup(f, { emit: k }) {
+    const v = k;
+    function e() {
+      v("rotate-left");
+    }
+    function o() {
+      v("rotate-right");
+    }
+    function l() {
+      v("flip-x");
+    }
+    function t() {
+      v("flip-y");
+    }
+    function s() {
+      v("zoom-in");
+    }
+    function p() {
+      v("zoom-out");
+    }
+    function m() {
+      v("reset");
+    }
+    return (u, c) => (w(), C("div", Re, [
+      x(u.$slots, "default", {
+        rotateLeft: e,
+        rotateRight: o,
+        flipX: l,
+        flipY: t,
+        zoomIn: s,
+        zoomOut: p,
+        reset: m,
+        transform: f.transform
+      }, () => [
+        n("div", { class: "cropvue-toolbar__default" }, [
+          n("button", {
+            type: "button",
+            class: "cropvue-toolbar__btn",
+            title: "Rotate left",
+            onClick: e
+          }, [...c[0] || (c[0] = [
+            n("svg", {
+              viewBox: "0 0 24 24",
+              width: "20",
+              height: "20",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              n("path", { d: "M2.5 2v6h6M2.66 12a9 9 0 1 0 1.18-4.5" })
+            ], -1)
+          ])]),
+          n("button", {
+            type: "button",
+            class: "cropvue-toolbar__btn",
+            title: "Rotate right",
+            onClick: o
+          }, [...c[1] || (c[1] = [
+            n("svg", {
+              viewBox: "0 0 24 24",
+              width: "20",
+              height: "20",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              n("path", { d: "M21.5 2v6h-6M21.34 12a9 9 0 1 1-1.18-4.5" })
+            ], -1)
+          ])]),
+          c[7] || (c[7] = n("span", { class: "cropvue-toolbar__separator" }, null, -1)),
+          n("button", {
+            type: "button",
+            class: "cropvue-toolbar__btn",
+            title: "Flip horizontal",
+            onClick: l
+          }, [...c[2] || (c[2] = [
+            n("svg", {
+              viewBox: "0 0 24 24",
+              width: "20",
+              height: "20",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              n("path", { d: "M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3M12 20V4" })
+            ], -1)
+          ])]),
+          n("button", {
+            type: "button",
+            class: "cropvue-toolbar__btn",
+            title: "Flip vertical",
+            onClick: t
+          }, [...c[3] || (c[3] = [
+            n("svg", {
+              viewBox: "0 0 24 24",
+              width: "20",
+              height: "20",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              n("path", { d: "M3 8V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3M20 12H4" })
+            ], -1)
+          ])]),
+          c[8] || (c[8] = n("span", { class: "cropvue-toolbar__separator" }, null, -1)),
+          n("button", {
+            type: "button",
+            class: "cropvue-toolbar__btn",
+            title: "Zoom out",
+            onClick: p
+          }, [...c[4] || (c[4] = [
+            n("svg", {
+              viewBox: "0 0 24 24",
+              width: "20",
+              height: "20",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              n("circle", {
+                cx: "11",
+                cy: "11",
+                r: "8"
+              }),
+              n("line", {
+                x1: "21",
+                y1: "21",
+                x2: "16.65",
+                y2: "16.65"
+              }),
+              n("line", {
+                x1: "8",
+                y1: "11",
+                x2: "14",
+                y2: "11"
+              })
+            ], -1)
+          ])]),
+          n("button", {
+            type: "button",
+            class: "cropvue-toolbar__btn",
+            title: "Zoom in",
+            onClick: s
+          }, [...c[5] || (c[5] = [
+            oe('<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>', 1)
+          ])]),
+          c[9] || (c[9] = n("span", { class: "cropvue-toolbar__separator" }, null, -1)),
+          n("button", {
+            type: "button",
+            class: "cropvue-toolbar__btn",
+            title: "Reset",
+            onClick: m
+          }, [...c[6] || (c[6] = [
+            n("svg", {
+              viewBox: "0 0 24 24",
+              width: "20",
+              height: "20",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              n("polyline", { points: "1 4 1 10 7 10" }),
+              n("polyline", { points: "23 20 23 14 17 14" }),
+              n("path", { d: "M20.49 9A9 9 0 0 0 5.64 5.64L1 10M23 14l-4.64 4.36A9 9 0 0 1 3.51 15" })
+            ], -1)
+          ])])
+        ])
+      ])
+    ]));
+  }
+}), He = { class: "cropvue" }, We = { class: "cropvue__actions" }, Pe = ["disabled"], Se = { class: "cropvue__done" }, Be = ["src"], Qe = /* @__PURE__ */ V({
+  __name: "CropVue",
+  props: {
+    stencil: { default: "rectangle" },
+    aspectRatio: { default: null },
+    minWidth: { default: 0 },
+    minHeight: { default: 0 },
+    maxWidth: { default: 1 / 0 },
+    maxHeight: { default: 1 / 0 },
+    outputFormat: { default: "auto" },
+    outputQuality: { default: 0.85 },
+    outputMaxWidth: { default: void 0 },
+    outputMaxHeight: { default: void 0 },
+    accept: { default: () => ["image/*"] },
+    maxFileSize: { default: 1 / 0 },
+    multiple: { type: Boolean, default: !1 },
+    upload: { type: [Function, null], default: null },
+    src: { default: null },
+    modelValue: { default: null },
+    pannable: { type: Boolean, default: !0 }
+  },
+  emits: ["ready", "change", "done", "cancel", "remove", "uploaded", "error", "queue-change", "update:modelValue"],
+  setup(f, { expose: k, emit: v }) {
+    const e = f, o = v, l = D("dropzone"), t = xe({
+      stencil: e.stencil,
+      aspectRatio: e.aspectRatio ?? void 0,
+      minWidth: e.minWidth,
+      minHeight: e.minHeight,
+      maxWidth: e.maxWidth,
+      maxHeight: e.maxHeight,
+      outputFormat: e.outputFormat,
+      outputQuality: e.outputQuality,
+      outputMaxWidth: e.outputMaxWidth,
+      outputMaxHeight: e.outputMaxHeight
+    }), s = ne({
+      accept: e.accept,
+      maxSize: e.maxFileSize,
+      multiple: e.multiple,
+      onFiles: N,
+      onError: (d) => o("error", d)
+    }), p = s.dropzoneRef, m = D(null), u = D(!1), c = D(0);
+    async function N(d) {
+      if (d.length !== 0)
+        try {
+          await t.loadFile(d[0]), l.value = "editor", t.image.value && o("ready", {
+            width: t.image.value.naturalWidth,
+            height: t.image.value.naturalHeight
+          });
+        } catch {
+          o("error", { type: "load-failed", message: "Failed to load image" });
+        }
+    }
+    Z(() => e.src, async (d) => {
+      if (d)
+        try {
+          await t.loadUrl(d), l.value = "editor", t.image.value && o("ready", {
+            width: t.image.value.naturalWidth,
+            height: t.image.value.naturalHeight
+          });
+        } catch {
+          o("error", { type: "load-failed", message: "Failed to load image from URL" });
+        }
+    }, { immediate: !0 }), Z(() => e.stencil, (d) => t.setStencil(d)), Z(() => e.aspectRatio, (d) => t.setAspectRatio(d ?? null));
+    async function B() {
+      try {
+        const d = await t.getResult({
+          format: e.outputFormat,
+          quality: e.outputQuality,
+          maxWidth: e.outputMaxWidth,
+          maxHeight: e.outputMaxHeight
+        });
+        if (m.value = d, o("done", d), o("update:modelValue", d), e.upload) {
+          u.value = !0, c.value = 0;
+          const _ = new AbortController();
+          try {
+            const H = await e.upload(d.file, {
+              onProgress: (T) => {
+                c.value = T;
+              },
+              signal: _.signal
+            });
+            o("uploaded", H);
+          } catch (H) {
+            o("error", { type: "upload-failed", message: String(H) });
+          } finally {
+            u.value = !1;
+          }
+        }
+        l.value = "done";
+      } catch (d) {
+        o("error", { type: "compress-failed", message: String(d) });
+      }
+    }
+    function X() {
+      o("cancel"), m.value ? l.value = "done" : (l.value = "dropzone", t.reset());
+    }
+    function q() {
+      l.value = "dropzone", m.value = null, t.reset();
+    }
+    function A() {
+      o("remove"), o("update:modelValue", null), l.value = "dropzone", m.value = null, t.reset();
+    }
+    function j() {
+      l.value = "editor";
+    }
+    return k({
+      cropper: t,
+      phase: l,
+      confirm: B,
+      cancel: X,
+      restart: q,
+      reedit: j,
+      remove: A,
+      result: m
+    }), (d, _) => (w(), C("div", He, [
+      l.value === "dropzone" ? (w(), C("div", {
+        key: 0,
+        ref_key: "dropzoneRef",
+        ref: p
+      }, [
+        x(d.$slots, "dropzone", {
+          open: i(s).open,
+          isDragging: i(s).isDragging.value
+        }, () => [
+          n("div", {
+            class: O(["cropvue__dropzone", { "cropvue__dropzone--active": i(s).isDragging.value }]),
+            onClick: _[0] || (_[0] = //@ts-ignore
+            (...H) => i(s).open && i(s).open(...H))
+          }, [
+            x(d.$slots, "dropzone-content", {
+              open: i(s).open,
+              isDragging: i(s).isDragging.value
+            }, () => [
+              _[5] || (_[5] = n("p", null, "Drop image here or click to select", -1))
+            ])
+          ], 2)
+        ])
+      ], 512)) : I("", !0),
+      l.value === "editor" ? (w(), C(G, { key: 1 }, [
+        x(d.$slots, "editor", {
+          image: i(t).image.value,
+          transform: i(t).transform.value,
+          crop: i(t).crop.value,
+          rotateLeft: i(t).rotateLeft,
+          rotateRight: i(t).rotateRight,
+          flipX: i(t).flipX,
+          flipY: i(t).flipY,
+          zoomIn: () => i(t).zoomBy(0.1),
+          zoomOut: () => i(t).zoomBy(-0.1),
+          reset: i(t).reset,
+          confirm: B,
+          cancel: X,
+          remove: A,
+          pannable: f.pannable
+        }, () => [
+          J(ze, {
+            image: i(t).image.value,
+            transform: i(t).transform.value,
+            crop: i(t).crop.value,
+            pannable: f.pannable,
+            "onUpdate:transform": _[1] || (_[1] = (H) => i(t).transform.value = H),
+            "onUpdate:crop": _[2] || (_[2] = (H) => i(t).crop.value = H)
+          }, null, 8, ["image", "transform", "crop", "pannable"])
+        ]),
+        x(d.$slots, "toolbar", {
+          rotateLeft: i(t).rotateLeft,
+          rotateRight: i(t).rotateRight,
+          flipX: i(t).flipX,
+          flipY: i(t).flipY,
+          zoomIn: () => i(t).zoomBy(0.1),
+          zoomOut: () => i(t).zoomBy(-0.1),
+          reset: i(t).reset,
+          transform: i(t).transform.value
+        }, () => [
+          J(Me, {
+            transform: i(t).transform.value,
+            onRotateLeft: i(t).rotateLeft,
+            onRotateRight: i(t).rotateRight,
+            onFlipX: i(t).flipX,
+            onFlipY: i(t).flipY,
+            onZoomIn: _[3] || (_[3] = () => i(t).zoomBy(0.1)),
+            onZoomOut: _[4] || (_[4] = () => i(t).zoomBy(-0.1)),
+            onReset: i(t).reset
+          }, null, 8, ["transform", "onRotateLeft", "onRotateRight", "onFlipX", "onFlipY", "onReset"])
+        ]),
+        x(d.$slots, "preview", {
+          image: i(t).image.value,
+          transform: i(t).transform.value,
+          crop: i(t).crop.value
+        }),
+        x(d.$slots, "actions", {
+          confirm: B,
+          cancel: X,
+          remove: A,
+          isUploading: u.value,
+          progress: c.value
+        }, () => [
+          n("div", We, [
+            n("button", {
+              type: "button",
+              class: "cropvue__btn cropvue__btn--cancel",
+              onClick: X
+            }, "Cancel"),
+            n("button", {
+              type: "button",
+              class: "cropvue__btn cropvue__btn--confirm",
+              disabled: u.value,
+              onClick: B
+            }, ce(u.value ? "Uploading..." : "Confirm"), 9, Pe)
+          ])
+        ])
+      ], 64)) : I("", !0),
+      l.value === "done" ? x(d.$slots, "done", {
+        key: 2,
+        result: m.value,
+        restart: q,
+        reedit: j,
+        remove: A
+      }, () => [
+        n("div", Se, [
+          m.value ? (w(), C("img", {
+            key: 0,
+            src: m.value.url,
+            alt: "Cropped result",
+            class: "cropvue__result-image"
+          }, null, 8, Be)) : I("", !0),
+          n("button", {
+            type: "button",
+            class: "cropvue__btn",
+            onClick: q
+          }, "Crop another")
+        ])
+      ]) : I("", !0),
+      x(d.$slots, "error"),
+      u.value ? x(d.$slots, "loading", {
+        key: 3,
+        progress: c.value
+      }) : I("", !0)
+    ]));
+  }
+}), Fe = { class: "cropvue-preview" }, Ee = /* @__PURE__ */ V({
+  __name: "CropPreview",
+  props: {
+    image: {},
+    transform: {},
+    crop: {},
+    maxWidth: { default: void 0 },
+    maxHeight: { default: void 0 },
+    debounce: { default: 50 }
+  },
+  setup(f, { expose: k }) {
+    const v = f, e = D(null);
+    let o;
+    function l() {
+      const s = e.value, p = v.image;
+      !s || !p || $e(s, p.element, v.crop, v.transform, {
+        maxWidth: v.maxWidth,
+        maxHeight: v.maxHeight
+      });
+    }
+    function t() {
+      o && clearTimeout(o), o = setTimeout(l, v.debounce);
+    }
+    return Z([() => v.transform, () => v.crop, () => v.image], t, {
+      deep: !0
+    }), ee(() => {
+      v.image && l();
+    }), te(() => {
+      o && clearTimeout(o);
+    }), k({ canvasRef: e, render: l }), (s, p) => (w(), C("div", Fe, [
+      x(s.$slots, "default", {
+        canvasRef: e.value,
+        render: l
+      }, () => [
+        n("canvas", {
+          ref_key: "canvasRef",
+          ref: e,
+          class: "cropvue-preview__canvas"
+        }, null, 512)
+      ])
+    ]));
+  }
+}), Ue = /* @__PURE__ */ V({
+  __name: "CropDropzone",
+  props: {
+    accept: { default: () => ["image/*"] },
+    maxSize: { default: 1 / 0 },
+    multiple: { type: Boolean, default: !1 }
+  },
+  emits: ["files", "error"],
+  setup(f, { expose: k, emit: v }) {
+    const e = f, o = v, { isDragging: l, files: t, dropzoneRef: s, open: p } = ne({
+      accept: e.accept,
+      maxSize: e.maxSize,
+      multiple: e.multiple,
+      onFiles: (m) => o("files", m),
+      onError: (m) => o("error", m)
+    });
+    return k({ open: p, files: t }), (m, u) => (w(), C("div", {
+      ref_key: "dropzoneRef",
+      ref: s,
+      class: O(["cropvue-dropzone", { "cropvue-dropzone--active": i(l) }])
+    }, [
+      x(m.$slots, "default", {
+        open: i(p),
+        isDragging: i(l)
+      }, () => [
+        n("div", {
+          class: "cropvue-dropzone__default",
+          onClick: u[0] || (u[0] = //@ts-ignore
+          (...c) => i(p) && i(p)(...c))
+        }, [...u[1] || (u[1] = [
+          n("p", null, "Drop image here or click to select", -1)
+        ])])
+      ])
+    ], 2));
+  }
+}), Le = { class: "cropvue-queue" }, De = { class: "cropvue-queue__list" }, Ie = ["onClick"], Xe = ["src", "alt"], Ye = ["onClick"], Ve = {
+  key: 0,
+  class: "cropvue-queue__check"
+}, Ze = /* @__PURE__ */ V({
+  __name: "CropQueue",
+  emits: ["select", "remove", "change"],
+  setup(f, { expose: k, emit: v }) {
+    const e = v, o = be();
+    function l(s) {
+      const p = o.images.value[s];
+      p && (o.select(s), e("select", p));
+    }
+    function t(s) {
+      const p = o.images.value[s];
+      p && (o.remove(s), e("remove", p), e("change", o.images.value));
+    }
+    return k({ queue: o }), (s, p) => (w(), C("div", Le, [
+      x(s.$slots, "default", {
+        items: i(o).images.value,
+        currentIndex: i(o).current.value,
+        select: l,
+        remove: t,
+        add: i(o).add
+      }, () => [
+        n("div", De, [
+          (w(!0), C(G, null, pe(i(o).images.value, (m, u) => (w(), C("div", {
+            key: m.id,
+            class: O(["cropvue-queue__item", {
+              "cropvue-queue__item--active": i(o).current.value === u,
+              "cropvue-queue__item--done": m.status === "done"
+            }]),
+            onClick: (c) => l(u)
+          }, [
+            n("img", {
+              src: m.thumbnail,
+              alt: `Queue item ${u + 1}`,
+              class: "cropvue-queue__thumbnail"
+            }, null, 8, Xe),
+            n("button", {
+              type: "button",
+              class: "cropvue-queue__remove",
+              title: "Remove",
+              onClick: de((c) => t(u), ["stop"])
+            }, [...p[0] || (p[0] = [
+              n("svg", {
+                viewBox: "0 0 24 24",
+                width: "14",
+                height: "14",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2"
+              }, [
+                n("line", {
+                  x1: "18",
+                  y1: "6",
+                  x2: "6",
+                  y2: "18"
+                }),
+                n("line", {
+                  x1: "6",
+                  y1: "6",
+                  x2: "18",
+                  y2: "18"
+                })
+              ], -1)
+            ])], 8, Ye),
+            m.status === "done" ? (w(), C("div", Ve, [...p[1] || (p[1] = [
+              n("svg", {
+                viewBox: "0 0 24 24",
+                width: "16",
+                height: "16",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "3"
+              }, [
+                n("polyline", { points: "20 6 9 17 4 12" })
+              ], -1)
+            ])])) : I("", !0)
+          ], 10, Ie))), 128))
+        ])
+      ])
+    ]));
+  }
+}), qe = { class: "cropvue-stencil" }, Oe = /* @__PURE__ */ V({
+  __name: "CropStencil",
+  props: {
+    crop: {},
+    containerWidth: {},
+    containerHeight: {}
+  },
+  setup(f) {
+    const k = f, v = L(() => {
+      const o = k.crop;
+      if (o.stencil === "circle") {
+        const m = Math.min(o.width, o.height) / 2, u = o.x + o.width / 2, c = o.y + o.height / 2;
+        return `circle(${m}px at ${u}px ${c}px)`;
+      }
+      if (o.stencil === "freeform" && o.points && o.points.length >= 3)
+        return `polygon(${o.points.map((u) => `${u.x}px ${u.y}px`).join(", ")})`;
+      const l = o.y, t = k.containerWidth - (o.x + o.width), s = k.containerHeight - (o.y + o.height), p = o.x;
+      return `inset(${l}px ${t}px ${s}px ${p}px)`;
+    }), e = L(() => ({
+      clipPath: v.value,
+      WebkitClipPath: v.value
+    }));
+    return (o, l) => (w(), C("div", qe, [
+      x(o.$slots, "default", {
+        clipPath: v.value,
+        style: Y(e.value),
+        crop: f.crop,
+        stencil: f.crop.stencil,
+        points: f.crop.points
+      }, () => [
+        n("div", {
+          class: "cropvue-stencil__shape",
+          style: Y(e.value)
+        }, null, 4)
+      ])
+    ]));
+  }
+});
+export {
+  Ue as CropDropzone,
+  ze as CropEditor,
+  Ee as CropPreview,
+  Ze as CropQueue,
+  Oe as CropStencil,
+  Me as CropToolbar,
+  Qe as CropVue,
+  Ke as useCompressor,
+  Ge as useCropper,
+  Je as useDropzone,
+  et as useImageQueue,
+  tt as useUploader
+};