ablok-components 0.3.58 → 0.3.60

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

@@ -0,0 +1,177 @@
+import { defineComponent as C, watch as y, openBlock as a, createElementBlock as n, normalizeClass as b, unref as i, Fragment as g, renderList as U, createElementVNode as o, withModifiers as v, createVNode as u, isRef as z, renderSlot as D, Transition as N, withCtx as P, createCommentVNode as T } from "vue";
+import h from "../../atoms/svg-icon/svg-icon.vue.js";
+/* empty css                                 */
+import L from "../../atoms/input-file/input-file.vue.js";
+import { useFileUpload as x } from "../../../composables/useFileUpload.js";
+import { fileToDataUrl as M, uniqueId as S } from "../../../utilities/helpers.js";
+const W = ["src"], _ = ["onClick"], q = ["onClick"], E = ["for"], H = ["innerHTML"], R = {
+  key: 0,
+  class: "file-upload__loading-spinner"
+}, K = /* @__PURE__ */ C({
+  __name: "file-upload",
+  props: {
+    modelValue: {
+      type: Array,
+      default: []
+    },
+    src: {
+      type: String
+    },
+    name: {
+      type: String,
+      default: () => S()
+    },
+    id: {
+      type: String,
+      default: () => S()
+    },
+    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
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    accept: {
+      type: String
+    },
+    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
+    }
+  },
+  emits: ["update:modelValue", "update:src"],
+  setup(e, { emit: w }) {
+    const s = e, m = w, { pending: k, files: r, dataUrls: c, isDragging: F, thumbnails: B, uploadFile: V, removeFile: p } = x(s, m);
+    return y(() => r.value, async (l) => {
+      c.value = await Promise.all(
+        l.map(async (t) => ({
+          src: s.toDataUrl ? await M(t) : await V(t),
+          type: t.type
+        }))
+      );
+    }, { deep: !0 }), y(() => c.value, async (l) => {
+      const t = s.multiple ? l : l[0];
+      m("update:modelValue", t), s.multiple || m("update:src", l[0] && l[0].src);
+    }, { deep: !0 }), (l, t) => (a(), n("div", {
+      class: b(["file-upload", {
+        "has-dragging": e.dropFiles,
+        "is-dragging": i(F)
+      }])
+    }, [
+      (a(!0), n(g, null, U(i(B), (d, f) => (a(), n("div", {
+        key: d.src,
+        class: b(e.enablePreview ? "file-upload__thumbnail" : "file-upload__reset")
+      }, [
+        e.enablePreview ? (a(), n(g, { key: 0 }, [
+          o("img", {
+            src: `${d.src}${e.previewWidth ? `?width=${e.previewWidth}` : ""}`,
+            class: "img-thumbnail rounded"
+          }, null, 8, W),
+          o("button", {
+            onClick: v(($) => i(p)(f), ["prevent"]),
+            class: "btn btn--close"
+          }, [
+            u(h, { symbol: "x" })
+          ], 8, _)
+        ], 64)) : (a(), n("button", {
+          key: 1,
+          onClick: v(($) => i(p)(f), ["prevent"]),
+          class: "btn btn--close btn-outline-contrast"
+        }, [
+          u(h, { symbol: "x" })
+        ], 8, q))
+      ], 2))), 128)),
+      u(L, {
+        modelValue: i(r),
+        "onUpdate:modelValue": t[0] || (t[0] = (d) => z(r) ? r.value = d : null),
+        id: e.id,
+        name: e.name,
+        accept: e.accept,
+        "max-file-size": e.maxFileSize,
+        class: "d-none"
+      }, null, 8, ["modelValue", "id", "name", "accept", "max-file-size"]),
+      o("label", {
+        for: e.id,
+        class: "file-upload__label"
+      }, [
+        D(l.$slots, "button", {}, () => [
+          o("span", {
+            class: "btn btn-outline-contrast",
+            innerHTML: e.label || l.$t("common.selectFile")
+          }, null, 8, H)
+        ]),
+        u(N, { name: "fade" }, {
+          default: P(() => [
+            i(k) ? (a(), n("span", R, [...t[1] || (t[1] = [
+              o("span", {
+                class: "spinner-border",
+                role: "status"
+              }, [
+                o("span", { class: "visually-hidden" }, "Loading...")
+              ], -1)
+            ])])) : T("", !0)
+          ]),
+          _: 1
+        })
+      ], 8, E)
+    ], 2));
+  }
+});
+export {
+  K as default
+};

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

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

package/dist/components/molecules/hint-system/hint-system.vue.d.ts

@@ -9,7 +9,7 @@ declare function __VLS_template(): {
         }): any;
         trigger?(_: {
             revealNext: typeof revealNext;
-            canReveal: true;
+            canReveal: boolean;
             revealedCount: number;
             total: number;
         }): any;

package/dist/components/molecules/hint-system/hint-system.vue.js

@@ -0,0 +1,111 @@
+import { defineComponent as g, ref as k, watch as H, computed as u, openBlock as l, createElementBlock as a, unref as v, createCommentVNode as y, createBlock as C, TransitionGroup as N, withCtx as V, Fragment as x, renderList as T, renderSlot as p, toDisplayString as _, createElementVNode as w } from "vue";
+import { sanitizeHtml as f } from "../../../composables/useSanitize.js";
+const L = { class: "hint-system" }, S = ["innerHTML"], B = ["innerHTML"], M = {
+  key: 1,
+  class: "hint-system__hint-content"
+}, R = ["disabled"], A = /* @__PURE__ */ g({
+  __name: "hint-system",
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    hints: {
+      type: Array,
+      default: () => []
+    },
+    penalty: {
+      type: Number,
+      default: 1
+    },
+    maxHints: {
+      type: Number,
+      default: void 0
+    },
+    htmlContent: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: "Show hint"
+    },
+    description: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "hint-revealed"],
+  setup(s, { emit: b }) {
+    const t = s, c = b, e = k(t.modelValue);
+    H(
+      () => t.modelValue,
+      (n) => {
+        e.value = n;
+      }
+    );
+    const d = u(
+      () => t.maxHints !== void 0 ? t.maxHints : t.hints.length
+    ), i = u(() => e.value < d.value), m = u(
+      () => t.hints.slice(0, e.value)
+    );
+    function h() {
+      if (!i.value) return;
+      const n = e.value;
+      e.value++, c("update:modelValue", e.value), c("hint-revealed", {
+        hint: t.hints[n],
+        index: n,
+        penaltyTotal: e.value * t.penalty
+      });
+    }
+    return (n, E) => (l(), a("div", L, [
+      s.description ? (l(), a("div", {
+        key: 0,
+        innerHTML: v(f)(s.description),
+        class: "hint-system__description"
+      }, null, 8, S)) : y("", !0),
+      m.value.length ? (l(), C(N, {
+        key: 1,
+        name: "hint-reveal",
+        tag: "ol",
+        class: "hint-system__list"
+      }, {
+        default: V(() => [
+          (l(!0), a(x, null, T(m.value, (o, r) => (l(), a("li", {
+            key: r,
+            class: "hint-system__hint"
+          }, [
+            p(n.$slots, "hint", {
+              hint: o,
+              index: r,
+              isNew: r === e.value - 1
+            }, () => [
+              s.htmlContent ? (l(), a("div", {
+                key: 0,
+                class: "hint-system__hint-content",
+                innerHTML: v(f)(o.content || "")
+              }, null, 8, B)) : (l(), a("div", M, _(o.content), 1))
+            ])
+          ]))), 128))
+        ]),
+        _: 3
+      })) : y("", !0),
+      p(n.$slots, "trigger", {
+        revealNext: h,
+        canReveal: i.value,
+        revealedCount: e.value,
+        total: d.value
+      }, () => [
+        w("button", {
+          type: "button",
+          class: "hint-system__trigger d-block w-100 text-center",
+          disabled: !i.value,
+          onClick: h
+        }, _(s.label), 9, R)
+      ])
+    ]));
+  }
+});
+export {
+  A as default
+};

package/dist/components/molecules/hint-system/hint-system.vue3.js

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

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

@@ -0,0 +1,82 @@
+import { defineComponent as m, useTemplateRef as d, ref as f, onBeforeMount as v, openBlock as g, createElementBlock as y, createElementVNode as t, createVNode as l, unref as V, renderSlot as R, withModifiers as x, toDisplayString as b, createCommentVNode as w } from "vue";
+import { Cropper as _ } from "vue-advanced-cropper";
+import h from "../input-dropdown/input-dropdown.vue.js";
+/* empty css                                    */
+/* empty css                                                                                                                                   */
+const B = {
+  key: 0,
+  class: "image-crop"
+}, k = { class: "row mb-4" }, C = { class: "col" }, N = { class: "row" }, A = { class: "col d-flex gap-2 justify-content-end gap-2" }, O = /* @__PURE__ */ m({
+  __name: "image-crop",
+  props: {
+    modelValue: {
+      type: String,
+      default: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>',
+      required: !0
+    },
+    spinner: {
+      type: Boolean,
+      default: !1
+    },
+    ready: {
+      type: Boolean,
+      default: !1
+    },
+    aspectRatioOptions: {
+      type: Array,
+      default: () => [
+        { value: 0, text: "Free" },
+        { value: 1, text: "1:1" },
+        { value: 4 / 3, text: "4:3" },
+        { value: 16 / 9, text: "16:9" },
+        { value: 3 / 4, text: "3:4" },
+        { value: 9 / 16, text: "9:16" }
+      ]
+    },
+    suggestedAspectRatio: Number
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: n }) {
+    const r = a, p = n, i = d("cropper"), o = f(0);
+    function u() {
+      const { canvas: s } = i.value?.getResult(), e = s.toDataURL();
+      p("update:modelValue", e);
+    }
+    return v(() => {
+      o.value = r.suggestedAspectRatio || 0;
+    }), (s, e) => a.modelValue ? (g(), y("div", B, [
+      t("div", k, [
+        t("div", C, [
+          l(V(_), {
+            ref: "cropper",
+            class: "cropper",
+            src: a.modelValue,
+            "stencil-props": {
+              ...o.value !== 0 ? { aspectRatio: o.value } : {}
+            },
+            "resize-image": !1
+          }, null, 8, ["src", "stencil-props"])
+        ])
+      ]),
+      e[1] || (e[1] = t("hr", null, null, -1)),
+      t("div", N, [
+        t("div", A, [
+          l(h, {
+            modelValue: o.value,
+            "onUpdate:modelValue": e[0] || (e[0] = (c) => o.value = c),
+            options: a.aspectRatioOptions,
+            class: "mb-0"
+          }, null, 8, ["modelValue", "options"]),
+          R(s.$slots, "actions"),
+          t("button", {
+            class: "btn btn-sm btn-primary",
+            onClick: x(u, ["prevent", "stop"])
+          }, b(s.$t("common.apply")), 1)
+        ])
+      ])
+    ])) : w("", !0);
+  }
+});
+export {
+  O as default
+};

package/dist/components/molecules/image-crop/image-crop.vue2.js

@@ -0,0 +1,4 @@
+import f from "./image-crop.vue.js";
+export {
+  f as default
+};

package/dist/components/molecules/image-crop-resize/image-crop-resize.vue.js

@@ -0,0 +1,120 @@
+import { defineComponent as h, ref as f, computed as g, watch as b, onMounted as C, openBlock as l, createElementBlock as m, createElementVNode as o, createBlock as v, withCtx as y, withModifiers as c, toDisplayString as r, createCommentVNode as u, createVNode as V, renderSlot as B } from "vue";
+import z from "../image-resize/image-resize.vue.js";
+import N from "../image-crop/image-crop.vue.js";
+import S from "../../atoms/base-image/base-image.vue.js";
+/* empty css                                     */
+import _ from "../../atoms/svg-icon/svg-icon.vue.js";
+/* empty css                                 */
+const x = {
+  key: 0,
+  class: "image-crop-resize position-relative"
+}, E = { class: "row" }, M = { class: "col" }, R = {
+  key: 3,
+  class: "alert alert-warning mt-4 small p-2"
+}, U = { key: 4 }, W = { class: "row" }, q = { class: "col-12" }, D = { class: "d-flex" }, I = {
+  key: 0,
+  class: "d-flex gap-3"
+}, j = { class: "caption" }, A = { class: "caption" }, F = {
+  key: 1,
+  class: "ms-auto"
+}, Q = /* @__PURE__ */ h({
+  __name: "image-crop-resize",
+  props: {
+    modelValue: {
+      type: String,
+      default: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>',
+      required: !0
+    },
+    spinner: {
+      type: Boolean,
+      default: !1
+    },
+    ready: {
+      type: Boolean,
+      default: !1
+    },
+    aspectRatio: Number
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: k }) {
+    const p = d, $ = k, s = f(!1), a = f(!1), i = g({
+      get: () => p.modelValue,
+      set: (t) => $("update:modelValue", t)
+    }), w = g(() => p.modelValue.startsWith("data:image/svg+xml"));
+    return b(() => [s.value, i.value], (t, e) => {
+      t[0] && t[0] === e[0] && (s.value = !1);
+    }), b(() => [a.value, i.value], (t, e) => {
+      t[0] && t[0] === e[0] && (a.value = !1);
+    }), C(() => {
+    }), (t, e) => d.modelValue ? (l(), m("div", x, [
+      o("div", E, [
+        o("div", M, [
+          s.value || a.value ? s.value ? (l(), v(z, {
+            key: 1,
+            modelValue: i.value,
+            "onUpdate:modelValue": e[1] || (e[1] = (n) => i.value = n)
+          }, {
+            actions: y(() => [
+              o("button", {
+                class: "btn btn-outline-ccontrast",
+                onClick: e[0] || (e[0] = c((n) => s.value = !1, ["prevent", "stop"]))
+              }, r(t.$t("common.cancel")), 1)
+            ]),
+            _: 1
+          }, 8, ["modelValue"])) : a.value ? (l(), v(N, {
+            key: 2,
+            modelValue: i.value,
+            "onUpdate:modelValue": e[3] || (e[3] = (n) => i.value = n),
+            "suggested-aspect-ratio": d.aspectRatio
+          }, {
+            actions: y(() => [
+              o("button", {
+                class: "btn btn-sm btn-outline-ccontrast",
+                onClick: e[2] || (e[2] = c((n) => a.value = !1, ["prevent", "stop"]))
+              }, r(t.$t("common.cancel")), 1)
+            ]),
+            _: 1
+          }, 8, ["modelValue", "suggested-aspect-ratio"])) : u("", !0) : (l(), v(S, {
+            key: 0,
+            ref: "targetImage",
+            class: "",
+            animate: !1,
+            src: d.modelValue
+          }, null, 8, ["src"])),
+          w.value ? (l(), m("div", R, r(t.$t("common.svgWarning")), 1)) : u("", !0),
+          !a.value && !s.value ? (l(), m("hr", U)) : u("", !0),
+          o("div", W, [
+            o("div", q, [
+              o("div", D, [
+                !a.value && !s.value ? (l(), m("div", I, [
+                  o("button", {
+                    type: "button",
+                    class: "btn btn-light",
+                    onClick: e[4] || (e[4] = c((n) => a.value = !a.value, ["prevent", "stop"]))
+                  }, [
+                    V(_, { symbol: "crop" }),
+                    o("span", j, r(t.$t("common.crop")), 1)
+                  ]),
+                  o("button", {
+                    type: "button",
+                    class: "btn btn-light",
+                    onClick: e[5] || (e[5] = c((n) => s.value = !s.value, ["prevent", "stop"]))
+                  }, [
+                    V(_, { symbol: "image-upscale" }),
+                    o("span", A, r(t.$t("common.resize")), 1)
+                  ])
+                ])) : u("", !0),
+                !a.value && !s.value ? (l(), m("div", F, [
+                  B(t.$slots, "submit")
+                ])) : u("", !0)
+              ])
+            ])
+          ])
+        ])
+      ])
+    ])) : u("", !0);
+  }
+});
+export {
+  Q as default
+};

package/dist/components/molecules/image-crop-resize/image-crop-resize.vue2.js

@@ -0,0 +1,4 @@
+import f from "./image-crop-resize.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,143 @@
+import { defineComponent as x, useTemplateRef as E, ref as d, watch as v, onMounted as k, openBlock as h, createElementBlock as R, createElementVNode as t, createVNode as p, createBlock as S, createCommentVNode as _, withDirectives as $, vModelText as B, renderSlot as I, withModifiers as N, toDisplayString as z } from "vue";
+import { debounce as C } from "lodash";
+import { resizeImageElementToDataUrl as U } from "../../../utilities/helpers.js";
+import b from "../../atoms/base-image/base-image.vue.js";
+/* empty css                                     */
+import y from "../../atoms/base-input/base-input.vue.js";
+/* empty css                                     */
+const q = {
+  key: 0,
+  class: "image-editor position-relative"
+}, D = { class: "row mb-3" }, H = { class: "col" }, T = { class: "row gap-2 mb-4" }, W = { class: "col-12" }, A = { class: "input mb-2" }, F = { class: "col" }, L = { class: "input mb-0" }, j = { class: "col" }, G = { class: "input mb-0" }, J = { class: "row" }, K = { class: "col d-flex justify-content-end gap-2" }, O = ["disabled"], ae = /* @__PURE__ */ x({
+  __name: "image-resize",
+  props: {
+    modelValue: {
+      type: String,
+      default: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>',
+      required: !0
+    },
+    spinner: {
+      type: Boolean,
+      default: !1
+    },
+    ready: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(f, { emit: V }) {
+    const w = V, m = E("image"), n = d(1), l = d(0), i = d(0), r = d(null), s = d(0), u = d(0);
+    function M() {
+      r.value && (w("update:modelValue", r.value), n.value = 1);
+    }
+    const g = () => {
+      if (!s.value || !u.value) return;
+      l.value = Math.round(s.value * n.value);
+      const a = u.value / s.value;
+      i.value = Math.round(l.value * a);
+      const e = m.value?.$el;
+      if (!e) return;
+      const o = e.querySelector("img");
+      o && (r.value = U(o, l.value, i.value, "image/png"));
+    }, c = C(g, 300);
+    return v(n, () => {
+      s.value && (l.value = Math.round(s.value * n.value), c());
+    }), v(l, () => {
+      if (!s.value || l.value === 0) return;
+      const a = l.value / s.value;
+      Math.abs(a - n.value) > 1e-4 && (n.value = Number(a.toFixed(4)));
+      const e = u.value / s.value;
+      i.value = Math.round(l.value * e), c();
+    }), v(i, () => {
+      if (!u.value || i.value === 0) return;
+      const a = i.value / u.value;
+      Math.abs(a - n.value) > 1e-4 && (n.value = Number(a.toFixed(4)));
+      const e = s.value / u.value;
+      l.value = Math.round(i.value * e), c();
+    }), k(() => {
+      const a = m.value?.$el;
+      if (!a) return;
+      const e = a.querySelector("img");
+      if (!e) return;
+      const o = () => {
+        s.value = e.naturalWidth, u.value = e.naturalHeight, g();
+      };
+      e.complete ? o() : e.addEventListener("load", o);
+    }), (a, e) => f.modelValue ? (h(), R("div", q, [
+      t("div", D, [
+        t("div", H, [
+          p(b, {
+            ref_key: "image",
+            ref: m,
+            class: "d-none",
+            src: f.modelValue,
+            animate: !1
+          }, null, 8, ["src"]),
+          r.value ? (h(), S(b, {
+            key: 0,
+            ref: "targetImage",
+            class: "",
+            src: r.value,
+            animate: !1
+          }, null, 8, ["src"])) : _("", !0)
+        ])
+      ]),
+      t("div", T, [
+        t("div", W, [
+          t("div", A, [
+            $(t("input", {
+              type: "range",
+              class: "form-range",
+              id: "scaleRange",
+              "onUpdate:modelValue": e[0] || (e[0] = (o) => n.value = o),
+              min: "0",
+              max: "2",
+              step: "0.0001"
+            }, null, 512), [
+              [B, n.value]
+            ])
+          ])
+        ]),
+        t("div", F, [
+          t("div", L, [
+            p(y, {
+              type: "number",
+              class: "form-input mb-0",
+              id: "targetWidth",
+              modelValue: l.value,
+              "onUpdate:modelValue": e[1] || (e[1] = (o) => l.value = o)
+            }, null, 8, ["modelValue"])
+          ])
+        ]),
+        e[3] || (e[3] = t("div", { class: "col-auto d-flex align-items-center" }, [
+          t("output", null, "×")
+        ], -1)),
+        t("div", j, [
+          t("div", G, [
+            p(y, {
+              type: "number",
+              class: "form-input mb-0",
+              id: "targetHeight",
+              modelValue: i.value,
+              "onUpdate:modelValue": e[2] || (e[2] = (o) => i.value = o)
+            }, null, 8, ["modelValue"])
+          ])
+        ])
+      ]),
+      t("div", J, [
+        t("div", K, [
+          I(a.$slots, "actions"),
+          t("button", {
+            class: "btn btn-sm btn-primary",
+            disabled: !r.value,
+            onClick: N(M, ["prevent", "stop"])
+          }, z(a.$t("common.apply")), 9, O)
+        ])
+      ])
+    ])) : _("", !0);
+  }
+});
+export {
+  ae as default
+};

package/dist/components/molecules/image-resize/image-resize.vue2.js

@@ -0,0 +1,4 @@
+import f from "./image-resize.vue.js";
+export {
+  f as default
+};