@orchidui/core 1.8.1-41 → 1.8.1-43

package/dist/OcCropper-D2MLFJ36.js

@@ -0,0 +1,261 @@
+import { ref as s, watch as T, nextTick as K, openBlock as n, createElementBlock as w, createElementVNode as f, createBlock as u, unref as a, Fragment as M, createVNode as d, createCommentVNode as r, withCtx as b } from "vue";
+import { B as k, d as V, C as x, h as P, aD as j } from "./index-CXleXdVl.js";
+import { Cropper as Q } 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" }, ae = {
+  __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: F }) {
+    const g = i, y = F, m = s(), C = s(), p = s(""), O = s(), z = s(!1), o = s(g.inputOptionValues ?? {});
+    T(
+      () => g.inputOptionValues,
+      () => {
+        o.value = g.inputOptionValues;
+      },
+      {
+        deep: !0
+      }
+    ), T(
+      () => g.img,
+      (l) => {
+        l && K(() => {
+          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 A = () => {
+      if (p.value && z.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: O.value
+        });
+      }
+      z.value = !0;
+    }, U = (l) => {
+      var e;
+      return (e = m.value) == null ? void 0 : e.rotate(l);
+    }, I = (l) => {
+      var e;
+      return (e = m.value) == null ? void 0 : e.zoom(l);
+    }, G = () => {
+      C.value.click();
+    }, H = (l) => {
+      if (l.target.files[0] / (1024 * 1024) > +g.maxSize)
+        return l.preventDefault(), !1;
+      O.value = l.target.files[0], p.value = URL.createObjectURL(l.target.files[0]);
+    }, J = ({ 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);
+    }, h = s(!!o.value.caption), $ = s(!!o.value.lightbox), L = s(!!o.value.new_tab);
+    return (l, e) => {
+      var v, R, B, S, D, E, N;
+      return n(), w("div", W, [
+        f("input", {
+          id: "cropper-file-input",
+          ref_key: "fileUploadEl",
+          ref: C,
+          accept: "image/*",
+          type: "file",
+          class: "hidden",
+          onChange: H
+        }, null, 544),
+        p.value ? (n(), u(a(Q), {
+          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": J,
+          onChange: A
+        }, null, 8, ["src"])) : (n(), w("img", {
+          key: 1,
+          class: "w-full",
+          src: i.img
+        }, null, 8, X)),
+        f("div", Y, [
+          p.value ? (n(), w(M, { key: 0 }, [
+            d(a(k), {
+              variant: "secondary",
+              size: "small",
+              "left-icon": "backward",
+              onClick: e[0] || (e[0] = (t) => U(-90))
+            }),
+            d(a(k), {
+              variant: "secondary",
+              size: "small",
+              "left-icon": "zoom-out",
+              onClick: e[1] || (e[1] = (t) => I(0.8))
+            }),
+            d(a(k), {
+              variant: "secondary",
+              size: "small",
+              "left-icon": "zoom-in",
+              onClick: e[2] || (e[2] = (t) => I(1.2))
+            }),
+            d(a(k), {
+              variant: "secondary",
+              size: "small",
+              "left-icon": "forward",
+              onClick: e[3] || (e[3] = (t) => U(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: G
+          })) : r("", !0)
+        ]),
+        f("div", Z, [
+          (v = i.inputOptions) != null && v.includes("description") ? (n(), u(a(V), {
+            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),
+          (R = i.inputOptions) != null && R.includes("link") ? (n(), u(a(V), {
+            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),
+          f("div", null, [
+            (B = i.inputOptions) != null && B.includes("caption") ? (n(), u(a(x), {
+              key: 0,
+              modelValue: h.value,
+              "onUpdate:modelValue": e[8] || (e[8] = (t) => h.value = t),
+              label: "Caption",
+              class: "mb-4"
+            }, null, 8, ["modelValue"])) : r("", !0),
+            (S = i.inputOptions) != null && S.includes("caption") && h.value ? (n(), u(a(V), {
+              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),
+            (D = i.inputOptions) != null && D.includes("caption") && h.value ? (n(), u(a(P), {
+              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)
+          ]),
+          f("div", null, [
+            (E = i.inputOptions) != null && E.includes("new_tab") ? (n(), u(a(x), {
+              key: 0,
+              modelValue: L.value,
+              "onUpdate:modelValue": [
+                e[12] || (e[12] = (t) => L.value = t),
+                e[13] || (e[13] = (t) => c("new_tab", t))
+              ],
+              label: "Open link in a new tab",
+              class: "mb-4"
+            }, {
+              after: b(() => [
+                d(a(j), {
+                  position: "bottom",
+                  distance: 10,
+                  "popper-class": "bg-oc-bg-light min-w-[125px]"
+                }, {
+                  default: b(() => [
+                    d(a(q), {
+                      name: "question-mark",
+                      width: "16",
+                      height: "16",
+                      class: "text-oc-accent-1-500"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"])) : r("", !0),
+            (N = i.inputOptions) != null && N.includes("lightbox") ? (n(), u(a(x), {
+              key: 1,
+              modelValue: $.value,
+              "onUpdate:modelValue": [
+                e[14] || (e[14] = (t) => $.value = t),
+                e[15] || (e[15] = (t) => c("lightbox", t))
+              ],
+              label: "Enable lightbox"
+            }, {
+              after: b(() => [
+                d(a(j), {
+                  position: "bottom",
+                  distance: 10,
+                  "popper-class": "bg-oc-bg-light min-w-[125px]"
+                }, {
+                  popper: b(() => e[16] || (e[16] = [
+                    f("div", { class: "text-oc-text-400 text-sm px-3 py-2 font-medium text-center" }, " Show lightbox when click the image ", -1)
+                  ])),
+                  default: b(() => [
+                    d(a(q), {
+                      name: "question-mark",
+                      width: "16",
+                      height: "16",
+                      class: "text-oc-accent-1-500"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"])) : r("", !0)
+          ])
+        ])
+      ]);
+    };
+  }
+};
+export {
+  ae as default
+};