ablok-components 0.3.58 → 0.3.60

package/dist/components/molecules/image-upload/image-upload.vue.js

@@ -0,0 +1,274 @@
+import { defineComponent as L, ref as b, computed as P, watch as v, onMounted as Q, onBeforeUnmount as q, openBlock as s, createElementBlock as m, normalizeClass as U, unref as g, Fragment as A, createVNode as r, normalizeStyle as E, isRef as D, createElementVNode as o, withModifiers as w, createCommentVNode as h, renderSlot as H, Transition as O, withCtx as $, createBlock as j, toDisplayString as G } from "vue";
+import J from "../image-crop-resize/image-crop-resize.vue.js";
+import K from "../../atoms/base-image/base-image.vue.js";
+/* empty css                                     */
+import k from "../../atoms/svg-icon/svg-icon.vue.js";
+/* empty css                                 */
+import X from "../../atoms/input-file/input-file.vue.js";
+import Y from "../../templates/modal-dialog/modal-dialog.vue.js";
+/* empty css                                             */
+import { useFileUpload as Z } from "../../../composables/useFileUpload.js";
+import { resizeImageFileByMaxWidth as _, fileToDataUrl as R, uniqueId as W, srcToFile as ee } from "../../../utilities/helpers.js";
+const te = { class: "image-upload__controls" }, ae = { class: "d-flex gap-1 align-items-center" }, le = {
+  key: 1,
+  class: "image-upload__controls"
+}, ne = ["for"], ie = ["innerHTML"], oe = {
+  key: 0,
+  class: "image-upload__loading-spinner"
+}, ge = /* @__PURE__ */ L({
+  __name: "image-upload",
+  props: {
+    modelValue: {
+      type: Object,
+      default: void 0
+    },
+    src: {
+      type: String
+    },
+    name: {
+      type: String,
+      default: () => W()
+    },
+    id: {
+      type: String,
+      default: () => W()
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    variant: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    readOnly: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    pattern: {
+      type: String,
+      default: null
+    },
+    accept: {
+      type: String,
+      default: "image/*"
+    },
+    maxFileSize: {
+      type: Number,
+      default: 0
+    },
+    endpoint: {
+      type: String,
+      default: ""
+    },
+    toDataUrl: {
+      type: Boolean,
+      default: !0
+    },
+    authToken: {
+      type: String,
+      default: ""
+    },
+    customFetch: null,
+    baseResponsePath: {
+      type: String,
+      default: "/api/v1/assets"
+    },
+    enablePreview: {
+      type: Boolean,
+      default: !0
+    },
+    previewWidth: {
+      type: Number,
+      default: 0
+    },
+    dropFiles: {
+      type: Boolean,
+      default: !1
+    },
+    enableReview: {
+      type: Boolean,
+      default: !0
+    },
+    maxImageWidth: {
+      type: Number,
+      default: 4096
+    },
+    aspectRatio: Number
+  },
+  emits: ["update:modelValue", "update:src"],
+  setup(a, { emit: z }) {
+    const i = a, p = z, u = b(!1), d = b(null), l = b(null), V = b(null), {
+      pending: C,
+      files: f,
+      // dataUrls,
+      imgLoaded: c,
+      isDragging: N,
+      uploadFile: F,
+      setupDragAndDrop: T,
+      cleanupDragAndDrop: x
+    } = Z(i, p), y = P(() => i.modelValue ? i.modelValue : i.src ? { type: "", src: i.src } : d.value);
+    function S() {
+      d.value = null, f.value = [], c.value = !1, p("update:modelValue", void 0), p("update:src", "");
+    }
+    function B() {
+      S();
+    }
+    v(() => f.value, async (t) => {
+      if (!t || !t.length || !t[0]) return;
+      c.value = !1;
+      const e = await _(t[0], i.maxImageWidth);
+      i.enableReview ? (l.value = {
+        src: await R(e),
+        type: e.type
+      }, u.value = !0) : d.value = {
+        src: i.toDataUrl ? await R(e) : await F(e),
+        type: e.type
+      };
+    }), v(() => d.value, (t) => {
+      p("update:modelValue", t || void 0), p("update:src", t?.src || "");
+    }), v(() => V.value, async (t) => {
+      t && (d.value = {
+        src: await F(t),
+        type: t.type
+      }, V.value = null);
+    }), v(() => u.value, (t, e) => {
+      !t && e && l.value && (l.value = null, B());
+    }), v(() => i.src, (t) => {
+      !t && d.value && B();
+    });
+    function M(t, e) {
+      l.value = { src: t, type: e }, u.value = !0;
+    }
+    async function I() {
+      l.value && (V.value = await ee(
+        l.value.src,
+        "file",
+        l.value.type
+      )), l.value = null, u.value = !1;
+    }
+    return Q(() => {
+      T();
+    }), q(() => {
+      x();
+    }), (t, e) => (s(), m("div", {
+      class: U(["image-upload", {
+        "has-dragging": a.dropFiles,
+        "is-dragging": g(N)
+      }])
+    }, [
+      !u.value && y.value ? (s(), m("div", {
+        key: 0,
+        class: U(["mb-2", a.enablePreview ? "image-upload__thumbnail" : "image-upload__reset"])
+      }, [
+        a.enablePreview ? (s(), m(A, { key: 0 }, [
+          r(K, {
+            src: `${y.value.src}${a.previewWidth ? `?width=${a.previewWidth}` : ""}`,
+            class: "img-thumbnail rounded",
+            ready: g(c),
+            "onUpdate:ready": e[0] || (e[0] = (n) => D(c) ? c.value = n : null),
+            animate: !1,
+            style: E({ maxWidth: a.previewWidth ? `${a.previewWidth}px` : "auto", height: "auto" })
+          }, null, 8, ["src", "ready", "style"]),
+          o("div", te, [
+            o("div", ae, [
+              o("button", {
+                type: "button",
+                onClick: e[1] || (e[1] = w((n) => M(y.value.src, y.value.type), ["prevent", "stop"])),
+                class: "btn btn--edit btn-sm btn-light"
+              }, [
+                r(k, { symbol: "edit-2" })
+              ]),
+              o("button", {
+                type: "button",
+                onClick: e[2] || (e[2] = w((n) => S(), ["prevent", "stop"])),
+                class: "btn btn--close btn-sm btn-light"
+              }, [
+                r(k, { symbol: "x" })
+              ])
+            ])
+          ])
+        ], 64)) : (s(), m("div", le, [
+          o("button", {
+            onClick: e[3] || (e[3] = w((n) => S(), ["prevent", "stop"])),
+            class: "btn btn--close btn-outline-contrast"
+          }, [
+            r(k, { symbol: "x" })
+          ])
+        ]))
+      ], 2)) : h("", !0),
+      r(X, {
+        modelValue: g(f),
+        "onUpdate:modelValue": e[4] || (e[4] = (n) => D(f) ? f.value = n : null),
+        id: a.id,
+        name: a.name,
+        accept: a.accept,
+        "max-file-size": a.maxFileSize,
+        class: "d-none"
+      }, null, 8, ["modelValue", "id", "name", "accept", "max-file-size"]),
+      a.src ? h("", !0) : (s(), m("label", {
+        key: 1,
+        for: a.id,
+        class: "image-upload__label"
+      }, [
+        H(t.$slots, "button", {}, () => [
+          o("span", {
+            class: "btn btn-outline-contrast",
+            innerHTML: a.label || t.$t("common.selectFile")
+          }, null, 8, ie)
+        ]),
+        r(O, { name: "fade" }, {
+          default: $(() => [
+            g(C) ? (s(), m("span", oe, [...e[7] || (e[7] = [
+              o("span", {
+                class: "spinner-border",
+                role: "status"
+              }, [
+                o("span", { class: "visually-hidden" }, "Loading...")
+              ], -1)
+            ])])) : h("", !0)
+          ]),
+          _: 1
+        })
+      ], 8, ne)),
+      r(Y, {
+        modelValue: u.value,
+        "onUpdate:modelValue": e[6] || (e[6] = (n) => u.value = n),
+        footer: !1
+      }, {
+        default: $(() => [
+          u.value && l.value ? (s(), j(J, {
+            key: 0,
+            modelValue: l.value.src,
+            "onUpdate:modelValue": e[5] || (e[5] = (n) => l.value.src = n),
+            "aspect-ratio": a.aspectRatio
+          }, {
+            submit: $(() => [
+              o("button", {
+                class: "btn btn-primary",
+                onClick: w(I, ["prevent", "stop"])
+              }, G(t.$t("common.save")), 1)
+            ]),
+            _: 1
+          }, 8, ["modelValue", "aspect-ratio"])) : h("", !0)
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ], 2));
+  }
+});
+export {
+  ge as default
+};

package/dist/components/molecules/image-upload/image-upload.vue3.js

@@ -0,0 +1,5 @@
+import o from "./image-upload.vue.js";
+/* empty css                  */
+export {
+  o as default
+};

package/dist/components/molecules/image-zoom/image-zoom.vue.js

@@ -0,0 +1,209 @@
+import { defineComponent as G, ref as a, computed as d, onMounted as J, watch as K, nextTick as N, openBlock as S, createElementBlock as k, createElementVNode as z, withModifiers as Q, renderSlot as Z, createVNode as C, normalizeStyle as W, createCommentVNode as ee, normalizeClass as x, withCtx as te } from "vue";
+import oe from "../../atoms/base-image/base-image.vue.js";
+/* empty css                                     */
+import ae from "../../templates/popover-dialog/popover-dialog.vue.js";
+/* empty css                                                 */
+const le = ["popovertarget"], ie = ["src", "alt"], ve = /* @__PURE__ */ G({
+  __name: "image-zoom",
+  props: {
+    src: {
+      type: String,
+      required: !0
+    },
+    alt: {
+      type: String,
+      default: ""
+    },
+    spinner: {
+      type: Boolean,
+      default: !1
+    },
+    zoom: {
+      type: Number,
+      default: 2
+    },
+    focusWidth: {
+      type: Number,
+      default: 0
+    },
+    focusHeight: {
+      type: Number,
+      default: 0
+    },
+    hoverDelay: {
+      type: Number,
+      default: 150
+    },
+    closeTimeout: {
+      type: Number,
+      default: 0
+    },
+    popoverId: {
+      type: String,
+      default: () => `image-zoom-${Math.random().toString(36).substring(2, 9)}`
+    }
+  },
+  setup(o) {
+    const t = o, B = a(null), v = a(null), h = a(null), i = a(!1), l = a(!1), g = a(!1), P = a(!1), f = a(null), m = a(0), p = a(0), r = a(0), s = a(0), M = d(() => Number.isFinite(t.focusWidth) && t.focusWidth > 0 && Number.isFinite(t.focusHeight) && t.focusHeight > 0 && r.value > 0 && s.value > 0 && t.focusWidth <= r.value && t.focusHeight <= s.value), c = d(() => r.value > 0 && s.value > 0 && !M.value), F = d(() => g.value && !l.value && r.value > 0 && s.value > 0), V = d(() => c.value ? {
+      width: `${r.value}px`,
+      height: `${s.value}px`,
+      left: "0px",
+      top: "0px"
+    } : {
+      width: `${t.focusWidth}px`,
+      height: `${t.focusHeight}px`,
+      left: `${m.value}px`,
+      top: `${p.value}px`
+    }), D = d(() => {
+      const e = r.value * t.zoom, n = s.value * t.zoom;
+      return {
+        width: `${e}px`,
+        height: `${n}px`,
+        transform: M.value && !l.value ? `translate(${-m.value * t.zoom}px, ${-p.value * t.zoom}px)` : "none",
+        transformOrigin: "top left"
+      };
+    });
+    function w() {
+      if (!v.value)
+        return;
+      const e = v.value.getBoundingClientRect();
+      r.value = e.width, s.value = e.height;
+    }
+    function $() {
+      f.value && (clearTimeout(f.value), f.value = null);
+    }
+    function T() {
+      $(), i.value = !0;
+    }
+    function _() {
+      $(), f.value = setTimeout(() => {
+        !g.value && !P.value && !l.value && (i.value = !1), f.value = null;
+      }, t.hoverDelay || 100);
+    }
+    function y(e, n) {
+      if (!v.value)
+        return;
+      if (c.value) {
+        m.value = 0, p.value = 0;
+        return;
+      }
+      const u = v.value.getBoundingClientRect(), U = e - u.left, q = n - u.top, j = Math.min(
+        Math.max(U - t.focusWidth / 2, 0),
+        Math.max(u.width - t.focusWidth, 0)
+      ), A = Math.min(
+        Math.max(q - t.focusHeight / 2, 0),
+        Math.max(u.height - t.focusHeight, 0)
+      );
+      m.value = j, p.value = A;
+    }
+    function b() {
+      if (!h.value || !l.value || c.value)
+        return;
+      const e = h.value.getBoundingClientRect(), n = Math.max(0, m.value * t.zoom - e.width / 2 + t.focusWidth * t.zoom / 2), u = Math.max(0, p.value * t.zoom - e.height / 2 + t.focusHeight * t.zoom / 2);
+      h.value.scrollTo({ left: n, top: u });
+    }
+    function E(e) {
+      w(), y(e.clientX, e.clientY);
+    }
+    function I(e) {
+      g.value = !0, w(), y(e.clientX, e.clientY), l.value || T();
+    }
+    function H() {
+      g.value = !1, l.value || _();
+    }
+    function R(e) {
+      l.value && (i.value = !0, w(), y(e.clientX, e.clientY));
+    }
+    function X() {
+      l.value && N(b);
+    }
+    function Y() {
+      P.value = !0, T();
+    }
+    function L() {
+      P.value = !1, _();
+    }
+    function O(e) {
+      l.value && (i.value = !i.value, e instanceof MouseEvent && y(e.clientX, e.clientY));
+    }
+    return J(() => {
+      l.value = "ontouchstart" in window || navigator.maxTouchPoints > 0, w();
+    }), K(i, async (e) => {
+      e && l.value && (await N(), b());
+    }), (e, n) => (S(), k("span", {
+      class: "image-zoom",
+      popovertarget: o.popoverId,
+      ref_key: "wrapper",
+      ref: B
+    }, [
+      z("div", {
+        class: "image-zoom__target",
+        ref_key: "target",
+        ref: v,
+        onPointermove: E,
+        onPointerenter: I,
+        onPointerleave: H,
+        onPointerdown: R,
+        onPointerup: X,
+        onPointercancel: H,
+        onClick: Q(O, ["prevent"])
+      }, [
+        Z(e.$slots, "image", {
+          src: o.src,
+          alt: o.alt,
+          spinner: o.spinner,
+          animate: !1
+        }, () => [
+          C(oe, {
+            class: "image-zoom__image",
+            src: o.src,
+            alt: o.alt,
+            spinner: o.spinner,
+            animate: !1
+          }, null, 8, ["src", "alt", "spinner"])
+        ]),
+        F.value ? (S(), k("span", {
+          key: 0,
+          class: "image-zoom__focus",
+          style: W(V.value)
+        }, null, 4)) : ee("", !0)
+      ], 544),
+      C(ae, {
+        id: o.popoverId,
+        modelValue: i.value,
+        "onUpdate:modelValue": n[0] || (n[0] = (u) => i.value = u),
+        hover: !1,
+        "hover-delay": o.hoverDelay,
+        "close-timeout": o.closeTimeout,
+        class: x(["image-zoom__popover", { "image-zoom__popover--full": c.value }]),
+        role: "tooltip",
+        onMouseenter: Y,
+        onMouseleave: L
+      }, {
+        default: te(() => [
+          z("div", {
+            class: x(["image-zoom__preview-wrapper", { "image-zoom__preview-wrapper--full": c.value }])
+          }, [
+            z("div", {
+              class: x(["image-zoom__preview", { "image-zoom__preview--full": c.value }]),
+              ref_key: "preview",
+              ref: h
+            }, [
+              z("img", {
+                class: x(["image-zoom__preview-image", { "image-zoom__preview-image--full": c.value }]),
+                src: o.src,
+                alt: o.alt,
+                style: W(D.value),
+                draggable: "false"
+              }, null, 14, ie)
+            ], 2)
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["id", "modelValue", "hover-delay", "close-timeout", "class"])
+    ], 8, le));
+  }
+});
+export {
+  ve as default
+};

package/dist/components/molecules/image-zoom/image-zoom.vue3.js

@@ -0,0 +1,5 @@
+import o from "./image-zoom.vue.js";
+/* empty css                */
+export {
+  o as default
+};

package/dist/components/molecules/input-color/input-color.vue.js

@@ -0,0 +1,105 @@
+import { defineComponent as c, computed as y, openBlock as f, createElementBlock as s, createVNode as p, withCtx as b, createElementVNode as n, withDirectives as g, vModelText as h } from "vue";
+import { uniqueId as o } from "../../../utilities/helpers.js";
+import x from "../../atoms/base-input/base-input.vue.js";
+/* empty css                                     */
+const V = { class: "input-color" }, q = { class: "base-input__color-swatch" }, v = ["name", "id", "disabled", "read-only", "required", "aria-label"], O = /* @__PURE__ */ c({
+  __name: "input-color",
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean, Date],
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "text"
+    },
+    name: {
+      type: String,
+      default: () => o()
+    },
+    id: {
+      type: String,
+      default: () => o()
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    variant: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    readOnly: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    maxlength: {
+      type: Number
+    },
+    pattern: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: i }) {
+    const r = e, u = i, t = y({
+      get() {
+        return r.modelValue;
+      },
+      set(a) {
+        u("update:modelValue", a);
+      }
+    });
+    return (a, l) => (f(), s("div", V, [
+      p(x, {
+        modelValue: t.value,
+        "onUpdate:modelValue": l[1] || (l[1] = (d) => t.value = d),
+        type: e.type === "color" ? "text" : e.type,
+        id: e.id,
+        name: e.name,
+        placeholder: e.placeholder,
+        pattern: e.pattern,
+        label: e.label,
+        disabled: e.disabled,
+        "read-only": e.readOnly,
+        required: e.required,
+        maxlength: e.maxlength
+      }, {
+        "input-append": b((d) => [
+          n("span", q, [
+            g(n("input", {
+              "onUpdate:modelValue": l[0] || (l[0] = (m) => t.value = m),
+              type: "color",
+              name: `${e.name}-color`,
+              id: `${e.id}-color`,
+              disabled: e.disabled,
+              "read-only": e.readOnly,
+              required: e.required,
+              class: "form-control",
+              "aria-label": e.label
+            }, null, 8, v), [
+              [h, t.value]
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "type", "id", "name", "placeholder", "pattern", "label", "disabled", "read-only", "required", "maxlength"])
+    ]));
+  }
+});
+export {
+  O as default
+};

package/dist/components/molecules/input-color/input-color.vue3.js

@@ -0,0 +1,5 @@
+import o from "./input-color.vue.js";
+/* empty css                 */
+export {
+  o as default
+};