@orchidui/core 1.8.1-5 → 1.8.1-53

package/dist/OcCropper-GuSoQNTZ.js

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