@orchidui/core 1.8.1-31 → 1.8.1-33

package/dist/OcCropper-mBvlE7_D.js

@@ -0,0 +1,232 @@
+import { ref as u, watch as D, nextTick as A, openBlock as n, createElementBlock as b, createElementVNode as c, createBlock as r, unref as a, Fragment as G, createVNode as v, createCommentVNode as p, withCtx as x } from "vue";
+import { B as k, d as y, C as E, h as H, aD as J } from "./index-BVDHN1Ak.js";
+import { Cropper as K } from "vue-advanced-cropper";
+import { _ as M } from "./OcIcon-CSpRxnwd.js";
+const P = { class: "flex flex-col gap-y-5" }, Q = ["src"], W = { class: "flex gap-x-1 justify-center relative" }, X = { class: "grid grid-cols-2 gap-4" }, te = {
+  __name: "OcCropper",
+  props: {
+    inputOptions: Array,
+    inputOptionValues: Object,
+    img: String,
+    maxSize: [String, Number],
+    isReplaceImage: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["changeImage", "update:input-options"],
+  setup(i, { emit: N }) {
+    const f = i, V = N, d = u(), w = u(), s = u(""), C = u(), O = u(!1), o = u(f.inputOptionValues ?? {});
+    D(
+      () => f.inputOptionValues,
+      () => {
+        o.value = f.inputOptionValues;
+      },
+      {
+        deep: !0
+      }
+    ), D(
+      () => f.img,
+      (t) => {
+        t && A(() => {
+          try {
+            const e = new URL(t);
+            e.protocol === "http:" || e.protocol === "https:" ? s.value = `${t}?${Date.now()}` : s.value = t;
+          } catch {
+            s.value = t;
+          }
+        });
+      },
+      { immediate: !0 }
+    );
+    const j = () => {
+      if (s.value && O.value) {
+        const { canvas: t } = d.value.getResult(), e = !(d.value.image.width === t.width && d.value.image.height === t.height && !d.value.imageTransforms.rotate);
+        V("changeImage", t.toDataURL(), {
+          isChanged: e,
+          file: C.value
+        });
+      }
+      O.value = !0;
+    }, z = (t) => {
+      var e;
+      return (e = d.value) == null ? void 0 : e.rotate(t);
+    }, U = (t) => {
+      var e;
+      return (e = d.value) == null ? void 0 : e.zoom(t);
+    }, T = () => {
+      w.value.click();
+    }, q = (t) => {
+      if (t.target.files[0] / (1024 * 1024) > +f.maxSize)
+        return t.preventDefault(), !1;
+      C.value = t.target.files[0], s.value = URL.createObjectURL(t.target.files[0]);
+    }, F = ({ imageSize: t, visibleArea: e }) => ({
+      width: (e || t).width,
+      height: (e || t).height
+    }), g = (t, e) => {
+      let m = o.value;
+      m[t] = e, V("update:input-options", m);
+    }, h = u(!!o.value.caption), I = u(!!o.value.lightbox);
+    return (t, e) => {
+      var m, L, $, R, B, S;
+      return n(), b("div", P, [
+        c("input", {
+          id: "cropper-file-input",
+          ref_key: "fileUploadEl",
+          ref: w,
+          accept: "image/*",
+          type: "file",
+          class: "hidden",
+          onChange: q
+        }, null, 544),
+        s.value ? (n(), r(a(K), {
+          key: 0,
+          ref_key: "cropper",
+          ref: d,
+          class: "w-full h-[300px]",
+          src: s.value,
+          "resize-image": { wheel: !1 },
+          "background-class": "cropper-background",
+          "default-size": F,
+          onChange: j
+        }, null, 8, ["src"])) : (n(), b("img", {
+          key: 1,
+          class: "w-full",
+          src: i.img
+        }, null, 8, Q)),
+        c("div", W, [
+          s.value ? (n(), b(G, { key: 0 }, [
+            v(a(k), {
+              variant: "secondary",
+              size: "small",
+              "left-icon": "backward",
+              onClick: e[0] || (e[0] = (l) => z(-90))
+            }),
+            v(a(k), {
+              variant: "secondary",
+              size: "small",
+              "left-icon": "zoom-out",
+              onClick: e[1] || (e[1] = (l) => U(0.8))
+            }),
+            v(a(k), {
+              variant: "secondary",
+              size: "small",
+              "left-icon": "zoom-in",
+              onClick: e[2] || (e[2] = (l) => U(1.2))
+            }),
+            v(a(k), {
+              variant: "secondary",
+              size: "small",
+              "left-icon": "forward",
+              onClick: e[3] || (e[3] = (l) => z(90))
+            })
+          ], 64)) : p("", !0),
+          i.isReplaceImage ? (n(), r(a(k), {
+            key: 1,
+            class: "absolute right-0",
+            variant: "secondary",
+            size: "small",
+            label: "Replace image",
+            "left-icon": "refresh",
+            onClick: T
+          })) : p("", !0)
+        ]),
+        c("div", X, [
+          (m = i.inputOptions) != null && m.includes("description") ? (n(), r(a(y), {
+            key: 0,
+            modelValue: o.value.description,
+            "onUpdate:modelValue": [
+              e[4] || (e[4] = (l) => o.value.description = l),
+              e[5] || (e[5] = (l) => g("description", l))
+            ],
+            label: "Describe Image",
+            placeholder: ""
+          }, null, 8, ["modelValue"])) : p("", !0),
+          (L = i.inputOptions) != null && L.includes("link") ? (n(), r(a(y), {
+            key: 1,
+            modelValue: o.value.link,
+            "onUpdate:modelValue": [
+              e[6] || (e[6] = (l) => o.value.link = l),
+              e[7] || (e[7] = (l) => g("link", l))
+            ],
+            placeholder: "https://hitpayapp.com",
+            label: "Link to"
+          }, null, 8, ["modelValue"])) : p("", !0),
+          c("div", null, [
+            ($ = i.inputOptions) != null && $.includes("caption") ? (n(), r(a(E), {
+              key: 0,
+              modelValue: h.value,
+              "onUpdate:modelValue": e[8] || (e[8] = (l) => h.value = l),
+              label: "Caption",
+              class: "mb-4"
+            }, null, 8, ["modelValue"])) : p("", !0),
+            (R = i.inputOptions) != null && R.includes("caption") && h.value ? (n(), r(a(y), {
+              key: 1,
+              modelValue: o.value.caption,
+              "onUpdate:modelValue": [
+                e[9] || (e[9] = (l) => o.value.caption = l),
+                e[10] || (e[10] = (l) => g("caption", l))
+              ],
+              class: "mb-4",
+              placeholder: ""
+            }, null, 8, ["modelValue"])) : p("", !0),
+            (B = i.inputOptions) != null && B.includes("caption") && h.value ? (n(), r(a(H), {
+              key: 2,
+              "model-value": o.value.caption_variant,
+              "group-name": "caption_variant",
+              alignment: "horizontal",
+              radio: [
+                {
+                  value: "hover",
+                  label: "Show on hover"
+                },
+                {
+                  value: "bottom",
+                  label: "Show on bottom"
+                }
+              ],
+              label: "Caption position",
+              "onUpdate:modelValue": e[11] || (e[11] = (l) => g("caption_variant", l))
+            }, null, 8, ["model-value"])) : p("", !0)
+          ]),
+          c("div", null, [
+            (S = i.inputOptions) != null && S.includes("lightbox") ? (n(), r(a(E), {
+              key: 0,
+              modelValue: I.value,
+              "onUpdate:modelValue": [
+                e[12] || (e[12] = (l) => I.value = l),
+                e[13] || (e[13] = (l) => g("lightbox", l))
+              ],
+              label: "Lightbox"
+            }, {
+              after: x(() => [
+                v(a(J), {
+                  position: "bottom",
+                  distance: 10,
+                  "popper-class": "bg-oc-bg-light min-w-[125px]"
+                }, {
+                  popper: x(() => e[14] || (e[14] = [
+                    c("div", { class: "text-oc-text-400 text-sm px-3 py-2 font-medium text-center" }, " Show lightbox when click the image ", -1)
+                  ])),
+                  default: x(() => [
+                    v(a(M), {
+                      name: "question-mark",
+                      width: "16",
+                      height: "16",
+                      class: "text-oc-accent-1-500"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"])) : p("", !0)
+          ])
+        ])
+      ]);
+    };
+  }
+};
+export {
+  te as default
+};