ablok-components 0.3.58 → 0.3.59

package/dist/components/atoms/input-textarea/input-textarea.vue.js

@@ -0,0 +1,105 @@
+import { defineComponent as f, computed as c, openBlock as y, createElementBlock as p, renderSlot as l, withDirectives as b, createElementVNode as i, normalizeClass as r, vModelText as g } from "vue";
+import { sanitizeInput as h, uniqueId as o } from "../../../utilities/helpers.js";
+const x = { class: "input input--textarea" }, S = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "aria-label"], B = ["for", "innerHTML"], V = /* @__PURE__ */ f({
+  __name: "input-textarea",
+  props: {
+    modelValue: {
+      type: String,
+      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
+    },
+    checked: {
+      type: Boolean,
+      default: !1
+    },
+    sanitize: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: u }) {
+    const a = e, m = u, n = c({
+      get() {
+        return a.modelValue;
+      },
+      set(t) {
+        a.sanitize && typeof t == "string" && (t = h(t)), m("update:modelValue", t);
+      }
+    });
+    return (t, d) => (y(), p("div", x, [
+      l(t.$slots, "input-prepend"),
+      b(i("textarea", {
+        "onUpdate:modelValue": d[0] || (d[0] = (s) => n.value = s),
+        type: e.type,
+        id: e.id,
+        name: e.name,
+        placeholder: e.placeholder,
+        pattern: e.pattern,
+        disabled: e.disabled,
+        "read-only": e.readOnly,
+        required: e.required,
+        maxlength: e.maxlength,
+        class: r(["form-control", {}]),
+        "aria-label": e.label
+      }, null, 8, S), [
+        [g, n.value]
+      ]),
+      l(t.$slots, "input-append"),
+      l(t.$slots, "label", {}, () => [
+        i("label", {
+          for: e.id,
+          class: r(["input__label", {
+            "form-check-label": e.type === "checkbox"
+          }]),
+          innerHTML: `${e.label}${e.required ? " *" : ""}`
+        }, null, 10, B)
+      ])
+    ]));
+  }
+});
+export {
+  V as default
+};

package/dist/components/atoms/input-textarea/input-textarea.vue2.js

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

package/dist/components/atoms/loading-spinner/loading-spinner.vue.js

@@ -0,0 +1,38 @@
+import { defineComponent as o, openBlock as r, createElementBlock as a, createElementVNode as e, renderSlot as s } from "vue";
+const i = { class: "loading-spinner d-block" }, d = /* @__PURE__ */ o({
+  __name: "loading-spinner",
+  props: {
+    color: {
+      type: String,
+      default: "#fff"
+    }
+  },
+  setup(p) {
+    return (n, t) => (r(), a("span", i, [
+      t[0] || (t[0] = e("span", { class: "loading-spinner__animation" }, [
+        e("svg", {
+          version: "1.1",
+          x: "0px",
+          y: "0px",
+          viewBox: "0 0 100 100"
+        }, [
+          e("path", { d: "M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50" }, [
+            e("animateTransform", {
+              attributeName: "transform",
+              attributeType: "XML",
+              type: "rotate",
+              dur: "1s",
+              from: "0 50 50",
+              to: "360 50 50",
+              repeatCount: "indefinite"
+            })
+          ])
+        ])
+      ], -1)),
+      s(n.$slots, "default")
+    ]));
+  }
+});
+export {
+  d as default
+};

package/dist/components/atoms/loading-spinner/loading-spinner.vue3.js

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

package/dist/components/atoms/radio-group/radio-group.vue.js

@@ -0,0 +1,99 @@
+import { defineComponent as f, openBlock as n, createElementBlock as d, Fragment as y, renderList as h, normalizeClass as u, createElementVNode as r, renderSlot as i, unref as k, toDisplayString as g, createCommentVNode as b } from "vue";
+import { uniqueId as m } from "../../../utilities/helpers.js";
+import { sanitizeHtml as v } from "../../../composables/useSanitize.js";
+const $ = { class: "input radio-group" }, V = ["id", "name", "value", "checked", "disabled", "read-only", "required", "onChange"], C = ["for", "innerHTML"], S = ["for"], z = /* @__PURE__ */ f({
+  __name: "radio-group",
+  props: {
+    modelValue: {
+      type: null
+    },
+    options: {
+      type: Array,
+      default: []
+    },
+    name: {
+      type: String,
+      default: () => m()
+    },
+    id: {
+      type: String,
+      default: () => m()
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    variant: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    readOnly: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    keyOption: {
+      // type: String as PropType<'any' | 'all'>,
+      type: null
+    },
+    itemClass: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(e, { emit: o }) {
+    const c = o;
+    function s(t) {
+      c("update:modelValue", t);
+    }
+    return (t, q) => (n(), d("div", $, [
+      (n(!0), d(y, null, h(e.options, (l, a) => (n(), d("div", {
+        key: a,
+        class: u(["form-check", e.itemClass])
+      }, [
+        r("input", {
+          type: "radio",
+          id: `${e.id}-${a}`,
+          name: e.name,
+          class: u(["form-check-input", `
+            ${a === e.keyOption || l.key ? "form-check-input--key" : ""}
+            ${(a === e.keyOption || l.key) && l.value === e.modelValue?.value ? "form-check-input--match" : ""}
+          `]),
+          value: l.value || l,
+          checked: l.value ? l.value === e.modelValue?.value : l === e.modelValue,
+          disabled: e.disabled,
+          "read-only": e.readOnly,
+          required: e.required,
+          onChange: (B) => s(l)
+        }, null, 42, V),
+        i(t.$slots, "option-label", {
+          option: l,
+          index: a
+        }, () => [
+          r("label", {
+            class: "form-check-label",
+            for: `${e.id}-${a}`,
+            innerHTML: k(v)(l.text || "")
+          }, null, 8, C)
+        ])
+      ], 2))), 128)),
+      i(t.$slots, "label", {}, () => [
+        e.label ? (n(), d("label", {
+          key: 0,
+          for: e.id
+        }, g(e.label), 9, S)) : b("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  z as default
+};

package/dist/components/atoms/radio-group/radio-group.vue3.js

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

package/dist/components/atoms/svg-icon/svg-icon.vue.js

@@ -0,0 +1,44 @@
+import { defineComponent as s, openBlock as t, createElementBlock as n, normalizeClass as i, createElementVNode as l } from "vue";
+const a = {
+  class: "icon",
+  preserveAspectRatio: "xMaxYMin"
+}, o = ["xlink:href"], m = /* @__PURE__ */ s({
+  __name: "svg-icon",
+  props: {
+    basePath: {
+      type: String,
+      default: "/symbol-defs.svg"
+    },
+    prefix: {
+      type: String,
+      default: "icon-"
+    },
+    symbol: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: "default"
+    }
+  },
+  setup(e) {
+    return (c, r) => (t(), n("i", {
+      class: i(["svg-icon", {
+        [`svg-icon--${e.size}`]: e.size
+      }])
+    }, [
+      (t(), n("svg", a, [
+        l("use", {
+          "xlink:href": `${e.basePath}#${e.prefix}${e.symbol}`,
+          "xmlns:xlink": "http://www.w3.org/1999/xlink",
+          x: "0",
+          y: "0"
+        }, null, 8, o)
+      ]))
+    ], 2));
+  }
+});
+export {
+  m as default
+};

package/dist/components/atoms/svg-icon/svg-icon.vue3.js

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

package/dist/components/atoms/zoom-slider/zoom-slider.vue.js

@@ -0,0 +1,59 @@
+import { defineComponent as _, computed as o, openBlock as l, createElementBlock as s, createElementVNode as i, Fragment as f, renderList as k, normalizeClass as v } from "vue";
+const y = { class: "zoom-slider" }, h = ["min", "max", "step", "value"], b = { class: "zoom-slider__ticks" }, x = {
+  name: "ZoomSlider",
+  inheritAttrs: !1
+}, V = /* @__PURE__ */ _({
+  ...x,
+  props: {
+    modelValue: {
+      type: Number,
+      default: 1
+    },
+    min: {
+      type: Number,
+      default: 1
+    },
+    max: {
+      type: Number,
+      default: 2
+    },
+    step: {
+      type: Number,
+      default: 0.01
+    },
+    ticks: {
+      type: Number,
+      default: 51
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: n }) {
+    const a = e, r = n, c = o(() => a.ticks), m = o(() => Math.round((a.ticks - 1) / 2)), d = o(() => Math.round((a.ticks - 1) / 10));
+    function p(u) {
+      r("update:modelValue", parseFloat(u.target.value));
+    }
+    return (u, z) => (l(), s("div", y, [
+      i("input", {
+        type: "range",
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        value: e.modelValue,
+        onInput: p,
+        "aria-label": "Zoom"
+      }, null, 40, h),
+      i("div", b, [
+        (l(!0), s(f, null, k(c.value, (t) => (l(), s("span", {
+          key: t,
+          class: v(["zoom-slider__tick", {
+            "zoom-slider__tick--major": (t - 1) % m.value === 0,
+            "zoom-slider__tick--mid": (t - 1) % d.value === 0 && (t - 1) % m.value !== 0
+          }])
+        }, null, 2))), 128))
+      ])
+    ]));
+  }
+});
+export {
+  V as default
+};

package/dist/components/atoms/zoom-slider/zoom-slider.vue3.js

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

package/dist/components/molecules/accordion/accordion-item.vue.js

@@ -0,0 +1,76 @@
+import { defineComponent as r, openBlock as u, createElementBlock as m, createElementVNode as t, normalizeClass as a, renderSlot as d, toDisplayString as g, unref as p } from "vue";
+import { uniqueId as b } from "../../../utilities/helpers.js";
+import { useSanitize as f } from "../../../composables/useSanitize.js";
+const y = { class: "accordion-item" }, h = ["id"], S = ["data-bs-target", "aria-controls"], V = { class: "flex-grow-1" }, $ = ["id", "aria-labelledby", "data-bs-parent"], q = ["innerHTML"], z = /* @__PURE__ */ r({
+  __name: "accordion-item",
+  props: {
+    id: {
+      type: String,
+      default: () => b()
+    },
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: "Accordion Title"
+    },
+    body: {
+      type: String,
+      default: "<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi aut, nobis inventore repudiandae quo laboriosam. Dicta placeat ullam harum optio expedita. Harum fugiat suscipit sapiente quos, molestias neque eaque omnis?</p>"
+    },
+    parent: {
+      type: String,
+      default: ""
+    },
+    noPadding: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: n }) {
+    const o = e, l = n, s = f(() => o.body);
+    function c() {
+      l("update:modelValue", !o.modelValue);
+    }
+    return (i, v) => (u(), m("div", y, [
+      t("div", {
+        class: "accordion-header",
+        id: `heading-${e.id}`
+      }, [
+        t("button", {
+          class: a(["accordion-button", !e.modelValue && "collapsed"]),
+          type: "button",
+          "data-bs-toggle": "collapse",
+          "data-bs-target": `#target${e.id}`,
+          "aria-expanded": "true",
+          "aria-controls": `target${e.id}`,
+          onClick: c
+        }, [
+          d(i.$slots, "toggle", {}, () => [
+            t("span", V, g(e.title), 1)
+          ])
+        ], 10, S)
+      ], 8, h),
+      t("div", {
+        class: a(["accordion-collapse collapse", e.modelValue && "show"]),
+        id: `target${e.id}`,
+        "aria-labelledby": `heading${e.id}`,
+        "data-bs-parent": e.parent
+      }, [
+        t("div", {
+          class: a(["accordion-body", e.noPadding ? "p-0" : ""])
+        }, [
+          d(i.$slots, "body", {}, () => [
+            t("article", { innerHTML: p(s) }, null, 8, q)
+          ])
+        ], 2)
+      ], 10, $)
+    ]));
+  }
+});
+export {
+  z as default
+};

package/dist/components/molecules/accordion/accordion-item.vue3.js

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

package/dist/components/molecules/accordion/accordion.vue.js

@@ -0,0 +1,12 @@
+import { openBlock as e, createElementBlock as c, renderSlot as r } from "vue";
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const n = {}, s = { class: "accordion" };
+function a(o, d) {
+  return e(), c("div", s, [
+    r(o.$slots, "default")
+  ]);
+}
+const i = /* @__PURE__ */ t(n, [["render", a]]);
+export {
+  i as default
+};

package/dist/components/molecules/auto-suggest/auto-suggest.vue.js

@@ -0,0 +1,132 @@
+import { defineComponent as S, ref as c, computed as d, watch as w, onBeforeMount as B, onBeforeUnmount as E, openBlock as a, createElementBlock as r, createElementVNode as p, renderSlot as $, createVNode as x, mergeProps as C, Fragment as L, renderList as H, withModifiers as M, createCommentVNode as b } from "vue";
+import N from "../../atoms/base-input/base-input.vue.js";
+/* empty css                                     */
+import { sanitizeHtml as O } from "../../../composables/useSanitize.js";
+const F = {
+  key: 0,
+  class: "auto-suggest__suggestions position-relative"
+}, R = { class: "suggestions dropdown-menu show w-100 mt-2" }, T = ["onClick"], U = ["innerHTML"], D = /* @__PURE__ */ S({
+  __name: "auto-suggest",
+  props: {
+    modelValue: {
+      type: String
+    },
+    id: {
+      type: String
+    },
+    name: {
+      type: String
+    },
+    label: {
+      type: String
+    },
+    error: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    readOnly: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    options: {
+      type: Array,
+      default: []
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    outlined: {
+      type: Boolean,
+      default: !1
+    },
+    selection: {
+      type: String
+    }
+  },
+  emits: ["update:modelValue", "update:selection"],
+  setup(f, { emit: v }) {
+    const l = f, u = v, m = c(), o = c(!1), s = d({
+      get() {
+        return l.modelValue;
+      },
+      set(e) {
+        u("update:modelValue", e);
+      }
+    }), i = d(() => {
+      const e = new RegExp(`(${s.value})`, "i");
+      return s.value ? l.options.filter((t) => e.test(t)) : l.options;
+    }), y = d(() => {
+      const e = new RegExp(`(${s.value})`, "i");
+      return i.value.map((t) => {
+        const n = t.replace(e, "<strong>$1</strong>");
+        return O(n);
+      });
+    });
+    w(() => l.options, (e, t) => {
+      e.length && (o.value = !0);
+    }, { deep: !0 });
+    function _() {
+      l.options.length && (o.value = !0);
+    }
+    function h(e) {
+      o.value = !1;
+      const t = i.value[e];
+      u("update:modelValue", t), u("update:selection", t);
+    }
+    const g = c();
+    function k(e) {
+      const t = e.target;
+      o.value && t && !m.value.contains(t) && (o.value = !1);
+    }
+    return B(() => {
+      g.value = document.addEventListener("click", k);
+    }), E(() => {
+      document.removeEventListener("click", g.value);
+    }), (e, t) => (a(), r("div", {
+      class: "auto-suggest",
+      ref_key: "container",
+      ref: m
+    }, [
+      p("div", {
+        class: "auto-suggest__input",
+        onFocusCapture: _
+      }, [
+        $(e.$slots, "default", {}, () => [
+          x(N, C({
+            modelValue: s.value,
+            "onUpdate:modelValue": t[0] || (t[0] = (n) => s.value = n)
+          }, e.$props), null, 16, ["modelValue"])
+        ])
+      ], 32),
+      o.value && i.value.length ? (a(), r("div", F, [
+        p("ul", R, [
+          (a(!0), r(L, null, H(y.value, (n, V) => (a(), r("li", {
+            key: n,
+            class: "suggestions__item dropdown-item",
+            onClick: M((q) => h(V), ["prevent"])
+          }, [
+            p("p", {
+              class: "text-truncate my-2",
+              innerHTML: n
+            }, null, 8, U)
+          ], 8, T))), 128))
+        ])
+      ])) : b("", !0)
+    ], 512));
+  }
+});
+export {
+  D as default
+};

package/dist/components/molecules/auto-suggest/auto-suggest.vue3.js

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