@orchidui/core 1.10.0 → 1.14.0

package/dist/OcCropper-CvxnbkVg.js

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