ablok-components 0.0.38 → 0.0.39

package/dist/ablok-components.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as g, openBlock as r, createElementBlock as s, normalizeClass as p, createElementVNode as o, renderSlot as f, createBlock as C, resolveDynamicComponent as D, withCtx as A, createTextVNode as x, toDisplayString as v, computed as h, resolveComponent as $, createCommentVNode as k, unref as b, withDirectives as w, isRef as q, vModelDynamic as H, vModelText as U, ref as O, watch as S, onBeforeMount as L, Fragment as M, renderList as N, withModifiers as T, reactive as P, createVNode as z } from "vue";
+import { defineComponent as g, openBlock as r, createElementBlock as s, normalizeClass as b, createElementVNode as o, renderSlot as m, computed as h, createBlock as C, resolveDynamicComponent as D, unref as p, withCtx as A, createTextVNode as x, toDisplayString as v, resolveComponent as $, createCommentVNode as k, withDirectives as w, isRef as q, vModelDynamic as H, vModelText as U, ref as O, watch as S, onBeforeMount as L, Fragment as M, renderList as N, withModifiers as T, reactive as P, createVNode as z } from "vue";
 const R = {
   class: "icon",
   preserveAspectRatio: "xMaxYMin"
@@ -24,7 +24,7 @@ const R = {
   },
   setup(e) {
     return (i, t) => (r(), s("i", {
-      class: p(["svg-icon", {
+      class: b(["svg-icon", {
         [`svg-icon--${e.size}`]: e.size
       }])
     }, [
@@ -78,7 +78,7 @@ const E = { class: "loading-spinner d-block" }, j = { class: "loading-spinner__a
           }, Y, 8, J)
         ]))
       ]),
-      f(i.$slots, "default")
+      m(i.$slots, "default")
     ]));
   }
 });
@@ -88,14 +88,16 @@ const Ne = /* @__PURE__ */ g({
     tag: null,
     size: null,
     variant: null,
-    text: null
+    text: null,
+    className: null
   },
   setup(e) {
-    return (i, t) => (r(), C(D(e.tag), {
-      class: p(["headline", `headline--${e.size}`])
+    const i = e, t = h(() => i.tag || "p");
+    return (l, n) => (r(), C(D(p(t)), {
+      class: b(["headline", `headline--${e.size}${e.className || ""}`])
     }, {
       default: A(() => [
-        f(i.$slots, "default", {}, () => [
+        m(l.$slots, "default", {}, () => [
           x(v(e.text), 1)
         ])
       ]),
@@ -112,9 +114,9 @@ const Ne = /* @__PURE__ */ g({
   },
   setup(e) {
     return (i, t) => (r(), s("p", {
-      class: p(["base-paragraph", `base-paragraph--${e.size} ${e.className}`])
+      class: b(["base-paragraph", `base-paragraph--${e.size}${e.className || ""}`])
     }, [
-      f(i.$slots, "default", {}, () => [
+      m(i.$slots, "default", {}, () => [
         x(v(e.text), 1)
       ])
     ], 2));
@@ -137,14 +139,14 @@ const Ne = /* @__PURE__ */ g({
   },
   setup(e) {
     const i = e, t = h(() => i.caption && !i.fab);
-    return (a, n) => {
+    return (l, n) => {
       const d = $("svg-icon");
       return r(), s("button", {
         type: e.type,
         disabled: e.disabled,
         href: e.href,
         to: e.to,
-        class: p(["base-button btn btn-primary", {
+        class: b(["base-button btn btn-primary", {
           disabled: e.disabled,
           pending: e.pending,
           rounded: e.rounded,
@@ -156,15 +158,15 @@ const Ne = /* @__PURE__ */ g({
           "x-small": e.size === "x-small"
         }])
       }, [
-        f(a.$slots, "default", {}, () => [
+        m(l.$slots, "default", {}, () => [
           e.icon ? (r(), C(d, {
             key: 0,
             id: e.icon,
             class: "base-button__caption"
           }, null, 8, ["id"])) : k("", !0),
-          b(t) ? (r(), s("span", {
+          p(t) ? (r(), s("span", {
             key: 1,
-            class: p(["base-button__caption", { "icon-padding": e.icon }])
+            class: b(["base-button__caption", { "icon-padding": e.icon }])
           }, v(e.caption), 3)) : k("", !0)
         ])
       ], 10, K);
@@ -234,7 +236,7 @@ const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "
   },
   emits: ["update:modelValue"],
   setup(e, { emit: i }) {
-    const t = e, a = h({
+    const t = e, l = h({
       get() {
         return t.modelValue;
       },
@@ -243,12 +245,12 @@ const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "
       }
     });
     return (n, d) => (r(), s("div", {
-      class: p(["form-input", `form-input--${e.type}`])
+      class: b(["form-input", `form-input--${e.type}`])
     }, [
       o("div", Q, [
-        f(n.$slots, "input-prepend"),
+        m(n.$slots, "input-prepend"),
         w(o("input", {
-          "onUpdate:modelValue": d[0] || (d[0] = (l) => q(a) ? a.value = l : null),
+          "onUpdate:modelValue": d[0] || (d[0] = (a) => q(l) ? l.value = a : null),
           type: e.type === "color" ? "text" : e.type,
           id: e.id,
           name: e.name,
@@ -259,17 +261,17 @@ const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "
           required: e.required,
           maxlength: e.maxlength,
           checked: e.checked,
-          class: p(["form-control", {
+          class: b(["form-control", {
             "form-check-input": e.type === "checkbox"
           }]),
           "aria-label": e.label
         }, null, 10, W), [
-          [H, b(a)]
+          [H, p(l)]
         ]),
-        f(n.$slots, "input-append", {}, () => [
+        m(n.$slots, "input-append", {}, () => [
           e.type === "color" ? (r(), s("span", Z, [
             w(o("input", {
-              "onUpdate:modelValue": d[1] || (d[1] = (l) => q(a) ? a.value = l : null),
+              "onUpdate:modelValue": d[1] || (d[1] = (a) => q(l) ? l.value = a : null),
               type: "color",
               name: `${e.name}-color`,
               id: `${e.id}-color`,
@@ -279,15 +281,15 @@ const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "
               class: "form-control",
               "aria-label": e.label
             }, null, 8, _), [
-              [U, b(a)]
+              [U, p(l)]
             ])
           ])) : k("", !0)
         ])
       ]),
-      f(n.$slots, "label", {}, () => [
+      m(n.$slots, "label", {}, () => [
         o("label", {
           for: e.id,
-          class: p(["form-input__label", {
+          class: b(["form-input__label", {
             "form-check-label": e.type === "checkbox"
           }]),
           innerHTML: `${e.label}${e.required ? " *" : ""}`
@@ -356,7 +358,7 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
   },
   emits: ["update:modelValue"],
   setup(e, { emit: i }) {
-    const t = e, a = h({
+    const t = e, l = h({
       get() {
         return t.modelValue;
       },
@@ -365,9 +367,9 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
       }
     });
     return (n, d) => (r(), s("div", te, [
-      f(n.$slots, "input-prepend"),
+      m(n.$slots, "input-prepend"),
       w(o("textarea", {
-        "onUpdate:modelValue": d[0] || (d[0] = (l) => q(a) ? a.value = l : null),
+        "onUpdate:modelValue": d[0] || (d[0] = (a) => q(l) ? l.value = a : null),
         type: e.type === "color" ? "text" : e.type,
         id: e.id,
         name: e.name,
@@ -377,15 +379,15 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
         "read-only": e.readOnly,
         required: e.required,
         maxlength: e.maxlength,
-        class: p(["form-control", {}]),
+        class: b(["form-control", {}]),
         "aria-label": e.label
       }, null, 8, le), [
-        [U, b(a)]
+        [U, p(l)]
       ]),
-      f(n.$slots, "input-append", {}, () => [
+      m(n.$slots, "input-append", {}, () => [
         e.type === "color" ? (r(), s("span", ae, [
           w(o("input", {
-            "onUpdate:modelValue": d[1] || (d[1] = (l) => q(a) ? a.value = l : null),
+            "onUpdate:modelValue": d[1] || (d[1] = (a) => q(l) ? l.value = a : null),
             type: "color",
             name: `${e.name}-color`,
             id: `${e.id}-color`,
@@ -395,14 +397,14 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
             class: "form-control",
             "aria-label": e.label
           }, null, 8, ne), [
-            [U, b(a)]
+            [U, p(l)]
           ])
         ])) : k("", !0)
       ]),
-      f(n.$slots, "label", {}, () => [
+      m(n.$slots, "label", {}, () => [
         o("label", {
           for: e.id,
-          class: p(["form-input__label", {
+          class: b(["form-input__label", {
             "form-check-label": e.type === "checkbox"
           }]),
           innerHTML: `${e.label}${e.required ? " *" : ""}`
@@ -451,25 +453,25 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
   },
   emits: ["change", "update:modelValue"],
   setup(e, { emit: i }) {
-    const t = e, a = O([]);
+    const t = e, l = O([]);
     return S(() => t.modelValue, (n, d) => {
-      a.value = t.options.map(
-        (l) => l.value ? t.modelValue.some((u) => u["value "] === l.value) : t.modelValue.some((u) => u === l)
+      l.value = t.options.map(
+        (a) => a.value ? t.modelValue.some((u) => u["value "] === a.value) : t.modelValue.some((u) => u === a)
       );
-    }, { immediate: !0 }), S(a, (n, d) => {
-      const l = n.reduce((u, c, m) => {
-        const V = c && t.options[m] ? [t.options[m] || t.options[m]] : [];
+    }, { immediate: !0 }), S(l, (n, d) => {
+      const a = n.reduce((u, c, f) => {
+        const V = c && t.options[f] ? [t.options[f] || t.options[f]] : [];
         return [...u, ...V];
       }, []);
-      i("update:modelValue", l);
+      i("update:modelValue", a);
     }, { deep: !0 }), L(() => {
     }), (n, d) => {
-      const l = $("form-input");
+      const a = $("form-input");
       return r(), s("div", ie, [
-        (r(!0), s(M, null, N(e.options, (u, c) => (r(), C(l, {
+        (r(!0), s(M, null, N(e.options, (u, c) => (r(), C(a, {
           key: c,
-          modelValue: b(a)[c],
-          "onUpdate:modelValue": (m) => b(a)[c] = m,
+          modelValue: p(l)[c],
+          "onUpdate:modelValue": (f) => p(l)[c] = f,
           type: "checkbox",
           name: e.name,
           id: `${e.id}-${c}`,
@@ -479,7 +481,7 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
           required: e.required
         }, null, 8, ["modelValue", "onUpdate:modelValue", "name", "id", "label", "disabled", "read-only", "required"]))), 128)),
         o("label", { for: e.id }, [
-          f(n.$slots, "label", {}, () => [
+          m(n.$slots, "label", {}, () => [
             x(v(e.label), 1)
           ])
         ], 8, oe)
@@ -529,14 +531,14 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
   setup(e, { emit: i }) {
     const t = e;
     O(t.options.map((n) => n.value === t.modelValue));
-    function a(n) {
+    function l(n) {
       i("update:modelValue", n);
     }
     return L(() => {
     }), (n, d) => {
-      const l = $("form-input");
+      const a = $("form-input");
       return r(), s("div", ue, [
-        (r(!0), s(M, null, N(e.options, (u, c) => (r(), C(l, {
+        (r(!0), s(M, null, N(e.options, (u, c) => (r(), C(a, {
           key: c,
           type: "radio",
           name: e.name,
@@ -547,20 +549,20 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
           disabled: e.disabled,
           "read-only": e.readOnly,
           required: e.required,
-          onChange: (m) => a(u)
+          onChange: (f) => l(u)
         }, null, 8, ["name", "id", "value", "label", "checked", "disabled", "read-only", "required", "onChange"]))), 128)),
         o("label", { for: e.id }, [
-          f(n.$slots, "label", {}, () => [
+          m(n.$slots, "label", {}, () => [
             x(v(e.label), 1)
           ])
         ], 8, re)
       ]);
     };
   }
-}), se = { class: "input input-dropdown" }, ce = { class: "dropdown" }, fe = {
+}), se = { class: "input input-dropdown" }, ce = { class: "dropdown" }, me = {
   class: "btn-group",
   role: "group"
-}, me = ["id", "disabled"], ye = ["aria-labelledby"], pe = ["onClick"], be = ["for"], Ae = /* @__PURE__ */ g({
+}, fe = ["id", "disabled"], ye = ["aria-labelledby"], pe = ["onClick"], be = ["for"], Ae = /* @__PURE__ */ g({
   __name: "input-dropdown",
   props: {
     modelValue: {
@@ -623,26 +625,26 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
       get() {
         return t.modelValue;
       },
-      set(l) {
-        i("update:modelValue", l);
+      set(a) {
+        i("update:modelValue", a);
       }
     });
-    function a(l) {
-      i("update:modelValue", l);
+    function l(a) {
+      i("update:modelValue", a);
     }
     const n = h(() => [
       {
         text: "Please select"
       },
       ...t.options.map(
-        (l) => typeof l == "string" ? { value: l, text: l } : l
+        (a) => typeof a == "string" ? { value: a, text: a } : a
       )
-    ]), d = h(() => [...t.options].find((l) => JSON.stringify(l.value) === JSON.stringify(t.modelValue)));
-    return (l, u) => (r(), s("div", se, [
+    ]), d = h(() => [...t.options].find((a) => JSON.stringify(a.value) === JSON.stringify(t.modelValue)));
+    return (a, u) => (r(), s("div", se, [
       o("div", ce, [
-        o("div", fe, [
+        o("div", me, [
           o("button", {
-            class: p(["btn dropdown-toggle", {
+            class: b(["btn dropdown-toggle", {
               [`btn-${e.variant}`]: e.variant,
               [`btn-${e.color}`]: e.color,
               [`btn-${e.disabled}`]: e.disabled,
@@ -653,16 +655,16 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
             "data-bs-toggle": "dropdown",
             "aria-expanded": "false",
             disabled: e.disabled
-          }, v(b(d) ? b(d).text : e.placeholder), 11, me),
+          }, v(p(d) ? p(d).text : e.placeholder), 11, fe),
           o("ul", {
             class: "dropdown-menu",
             "aria-labelledby": e.id
           }, [
-            (r(!0), s(M, null, N(b(n), (c, m) => (r(), s("li", { key: m }, [
-              f(l.$slots, "option", {}, () => [
+            (r(!0), s(M, null, N(p(n), (c, f) => (r(), s("li", { key: f }, [
+              m(a.$slots, "option", {}, () => [
                 o("a", {
                   class: "dropdown-item",
-                  onClick: T((V) => a(c.value), ["prevent"])
+                  onClick: T((V) => l(c.value), ["prevent"])
                 }, v(c.text), 9, pe)
               ])
             ]))), 128))
@@ -670,7 +672,7 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
         ])
       ]),
       o("label", { for: e.id }, [
-        f(l.$slots, "label", {}, () => [
+        m(a.$slots, "label", {}, () => [
           x(v(e.label), 1)
         ])
       ], 8, be)
@@ -730,16 +732,16 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
   emits: ["update:modelValue"],
   setup(e, { emit: i }) {
     function t(d) {
-      const l = d.target && d.target.files;
-      l && (a.splice(0, a.length), Array.from(l).forEach((u) => {
-        a.push(u);
+      const a = d.target && d.target.files;
+      a && (l.splice(0, l.length), Array.from(a).forEach((u) => {
+        l.push(u);
       }));
     }
-    const a = P([]), n = h(() => a && a.map((d) => d.name));
-    return h(() => a.map((d) => URL.createObjectURL(d))), S(() => a, (d, l) => {
+    const l = P([]), n = h(() => l && l.map((d) => d.name));
+    return h(() => l.map((d) => URL.createObjectURL(d))), S(() => l, (d, a) => {
       console.log("file input", d), i("update:modelValue", d);
-    }, { deep: !0 }), (d, l) => (r(), s("div", {
-      class: p(["form-input file-input", "file-input--primary"])
+    }, { deep: !0 }), (d, a) => (r(), s("div", {
+      class: b(["form-input file-input", "file-input--primary"])
     }, [
       o("input", {
         type: "file",
@@ -751,22 +753,22 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
         accept: e.accept
       }, null, 40, ge),
       o("div", he, [
-        f(d.$slots, "input-prepend"),
+        m(d.$slots, "input-prepend"),
         o("input", {
           type: "text",
-          value: b(n),
+          value: p(n),
           id: e.id,
           name: e.name,
           class: "form-control"
         }, null, 8, ve),
-        f(d.$slots, "input-append", {}, () => [
+        m(d.$slots, "input-append", {}, () => [
           o("label", {
             for: e.id,
             class: "btn btn-outline-dark"
           }, " Select Image ", 8, $e)
         ])
       ]),
-      f(d.$slots, "label", {}, () => [
+      m(d.$slots, "label", {}, () => [
         o("label", {
           for: e.id,
           class: "form-input__label",
@@ -839,25 +841,25 @@ const Pe = /* @__PURE__ */ g({
   },
   emits: ["update:modelValue", "update:src"],
   setup(e, { emit: i }) {
-    const t = e, a = O([]), n = O([]), d = h(() => t.modelValue.length ? t.modelValue : t.src ? [{ type: "", src: t.src }] : n.value);
-    S(() => a, async (u, c) => {
+    const t = e, l = O([]), n = O([]), d = h(() => t.modelValue.length ? t.modelValue : t.src ? [{ type: "", src: t.src }] : n.value);
+    S(() => l, async (u, c) => {
       n.value = await Promise.all(
-        u.value.map(async (m) => ({
-          src: await we(m),
-          type: m.type
+        u.value.map(async (f) => ({
+          src: await we(f),
+          type: f.type
         }))
       );
     }, { deep: !0 }), S(() => n, async (u, c) => {
-      const m = t.multiple ? n.value : [n.value[0]];
-      i("update:modelValue", m), t.multiple || i("update:src", n.value[0] && n.value[0].src);
+      const f = t.multiple ? n.value : [n.value[0]];
+      i("update:modelValue", f), t.multiple || i("update:src", n.value[0] && n.value[0].src);
     }, { deep: !0 });
-    function l(u) {
-      a.value.splice(u, 1);
+    function a(u) {
+      l.value.splice(u, 1);
     }
     return (u, c) => {
-      const m = $("svg-icon"), V = $("file-input");
+      const f = $("svg-icon"), V = $("file-input");
       return r(), s("div", xe, [
-        (r(!0), s(M, null, N(b(d), (B, I) => (r(), s("div", {
+        (r(!0), s(M, null, N(p(d), (B, I) => (r(), s("div", {
           key: B.src,
           class: "media-upload__thumbnail"
         }, [
@@ -866,15 +868,15 @@ const Pe = /* @__PURE__ */ g({
             class: "img-thumbnail rounded"
           }, null, 8, Ve),
           o("button", {
-            onClick: T((qe) => l(I), ["prevent"]),
+            onClick: T((qe) => a(I), ["prevent"]),
             class: "btn btn--close"
           }, [
-            z(m, { symbol: "x" })
+            z(f, { symbol: "x" })
           ], 8, Be)
         ]))), 128)),
         z(V, {
-          modelValue: a.value,
-          "onUpdate:modelValue": c[0] || (c[0] = (B) => a.value = B),
+          modelValue: l.value,
+          "onUpdate:modelValue": c[0] || (c[0] = (B) => l.value = B),
           id: e.id,
           name: e.name,
           accept: e.accept,

package/dist/ablok-components.umd.js

@@ -1 +1 @@
-(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.AblokComponents={},c.Vue))})(this,function(c,e){"use strict";const y={class:"icon",preserveAspectRatio:"xMaxYMin"},b=["xlink:href"],g=e.defineComponent({__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(t){return(i,l)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["svg-icon",{[`svg-icon--${t.size}`]:t.size}])},[(e.openBlock(),e.createElementBlock("svg",y,[e.createElementVNode("use",{"xlink:href":`${t.basePath}#${t.prefix}${t.symbol}`,"xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0",y:"0"},null,8,b)]))],2))}}),fe="",h={class:"loading-spinner d-block"},B={class:"loading-spinner__animation"},$={class:"d-block",version:"1.1",id:"L9",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100","enable-background":"new 0 0 0 0","xml:space":"preserve"},k=["fill"],S=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],V=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(i,l)=>(e.openBlock(),e.createElementBlock("span",h,[e.createElementVNode("span",B,[(e.openBlock(),e.createElementBlock("svg",$,[e.createElementVNode("path",{fill:t.color,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"},S,8,k)]))]),e.renderSlot(i.$slots,"default")]))}}),ye="",x=e.defineComponent({__name:"base-headline",props:{tag:null,size:null,variant:null,text:null},setup(t){return(i,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),{class:e.normalizeClass(["headline",`headline--${t.size}`])},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["class"]))}}),E=e.defineComponent({__name:"base-paragraph",props:{size:null,variant:null,text:null,className:null},setup(t){return(i,l)=>(e.openBlock(),e.createElementBlock("p",{class:e.normalizeClass(["base-paragraph",`base-paragraph--${t.size} ${t.className}`])},[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])],2))}}),N=["type","disabled","href","to"],C=e.defineComponent({__name:"base-button",props:{type:null,caption:null,variant:null,size:null,icon:null,href:null,to:null,disabled:{type:Boolean},pending:{type:Boolean},outlined:{type:Boolean},rounded:{type:Boolean},fab:{type:Boolean}},setup(t){const i=t,l=e.computed(()=>i.caption&&!i.fab);return(n,o)=>{const d=e.resolveComponent("svg-icon");return e.openBlock(),e.createElementBlock("button",{type:t.type,disabled:t.disabled,href:t.href,to:t.to,class:e.normalizeClass(["base-button btn btn-primary",{disabled:t.disabled,pending:t.pending,rounded:t.rounded,outlined:t.outlined,fab:t.fab,"x-large":t.size==="x-large",large:t.size==="large",small:t.size==="small","x-small":t.size==="x-small"}])},[e.renderSlot(n.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(d,{key:0,id:t.icon,class:"base-button__caption"},null,8,["id"])):e.createCommentVNode("",!0),e.unref(l)?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["base-button__caption",{"icon-padding":t.icon}])},e.toDisplayString(t.caption),3)):e.createCommentVNode("",!0)])],10,N)}}}),be="";function u(){return(new Date().valueOf()+Math.random()).toString(36)}const w={class:"input-group form-input__input-group"},q=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],z={key:0,class:"form-input__color-swatch"},M=["name","id","disabled","read-only","required","aria-label"],O=["for","innerHTML"],T=e.defineComponent({__name:"form-input",props:{modelValue:{type:[String,Number,Boolean],default:""},type:{type:String,default:"text"},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},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}},emits:["update:modelValue"],setup(t,{emit:i}){const l=t,n=e.computed({get(){return l.modelValue},set(o){i("update:modelValue",o)}});return(o,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",w,[e.renderSlot(o.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=a=>e.isRef(n)?n.value=a:null),type:t.type==="color"?"text":t.type,id:t.id,name:t.name,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,checked:t.checked,class:e.normalizeClass(["form-control",{"form-check-input":t.type==="checkbox"}]),"aria-label":t.label},null,10,q),[[e.vModelDynamic,e.unref(n)]]),e.renderSlot(o.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",z,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[1]||(d[1]=a=>e.isRef(n)?n.value=a:null),type:"color",name:`${t.name}-color`,id:`${t.id}-color`,disabled:t.disabled,"read-only":t.readOnly,required:t.required,class:"form-control","aria-label":t.label},null,8,M),[[e.vModelText,e.unref(n)]])])):e.createCommentVNode("",!0)])]),e.renderSlot(o.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:e.normalizeClass(["form-input__label",{"form-check-label":t.type==="checkbox"}]),innerHTML:`${t.label}${t.required?" *":""}`},null,10,O)])],2))}}),ge="",D={class:"form-input form-input--textarea"},L=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","aria-label"],U={key:0,class:"form-input__color-swatch"},I=["name","id","disabled","read-only","required","aria-label"],R=["for","innerHTML"],A=e.defineComponent({__name:"input-textarea",props:{modelValue:{type:String,default:""},type:{type:String,default:"text"},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},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}},emits:["update:modelValue"],setup(t,{emit:i}){const l=t,n=e.computed({get(){return l.modelValue},set(o){i("update:modelValue",o)}});return(o,d)=>(e.openBlock(),e.createElementBlock("div",D,[e.renderSlot(o.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":d[0]||(d[0]=a=>e.isRef(n)?n.value=a:null),type:t.type==="color"?"text":t.type,id:t.id,name:t.name,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,class:e.normalizeClass(["form-control",{}]),"aria-label":t.label},null,8,L),[[e.vModelText,e.unref(n)]]),e.renderSlot(o.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",U,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[1]||(d[1]=a=>e.isRef(n)?n.value=a:null),type:"color",name:`${t.name}-color`,id:`${t.id}-color`,disabled:t.disabled,"read-only":t.readOnly,required:t.required,class:"form-control","aria-label":t.label},null,8,I),[[e.vModelText,e.unref(n)]])])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:e.normalizeClass(["form-input__label",{"form-check-label":t.type==="checkbox"}]),innerHTML:`${t.label}${t.required?" *":""}`},null,10,R)])]))}}),F={class:"radio-group"},P=["for"],H=e.defineComponent({__name:"check-group",props:{modelValue:{default:[]},options:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:i}){const l=t,n=e.ref([]);return e.watch(()=>l.modelValue,(o,d)=>{n.value=l.options.map(a=>a.value?l.modelValue.some(r=>r["value "]===a.value):l.modelValue.some(r=>r===a))},{immediate:!0}),e.watch(n,(o,d)=>{const a=o.reduce((r,s,m)=>{const f=s&&l.options[m]?[l.options[m]||l.options[m]]:[];return[...r,...f]},[]);i("update:modelValue",a)},{deep:!0}),e.onBeforeMount(()=>{}),(o,d)=>{const a=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(r,s)=>(e.openBlock(),e.createBlock(a,{key:s,modelValue:e.unref(n)[s],"onUpdate:modelValue":m=>e.unref(n)[s]=m,type:"checkbox",name:t.name,id:`${t.id}-${s}`,label:`${r.text||r}${t.required?" *":""}`,disabled:t.disabled,"read-only":t.readOnly,required:t.required},null,8,["modelValue","onUpdate:modelValue","name","id","label","disabled","read-only","required"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,P)])}}}),j={class:"radio-group"},G=["for"],J=e.defineComponent({__name:"radio-group",props:{modelValue:{default:!1},options:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:i}){const l=t;e.ref(l.options.map(o=>o.value===l.modelValue));function n(o){i("update:modelValue",o)}return e.onBeforeMount(()=>{}),(o,d)=>{const a=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",j,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(r,s)=>(e.openBlock(),e.createBlock(a,{key:s,type:"radio",name:t.name,id:`${t.id}-${s}`,value:r.value||r,label:`${r.text||r}${t.required?" *":""}`,checked:r.value?r.value===t.modelValue:r===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:m=>n(r)},null,8,["name","id","value","label","checked","disabled","read-only","required","onChange"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,G)])}}}),X={class:"input input-dropdown"},Y={class:"dropdown"},K={class:"btn-group",role:"group"},Q=["id","disabled"],W=["aria-labelledby"],Z=["onClick"],_=["for"],v=e.defineComponent({__name:"input-dropdown",props:{modelValue:{type:[String,Number,Boolean,Object],default:""},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:"Please select"},options:{type:Array,default:[]},variant:{type:String,default:""},color:{type:String,default:""},disabled:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},required:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},resetOption:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{emit:i}){const l=t;e.computed({get(){return l.modelValue},set(a){i("update:modelValue",a)}});function n(a){i("update:modelValue",a)}const o=e.computed(()=>[{text:"Please select"},...l.options.map(a=>typeof a=="string"?{value:a,text:a}:a)]),d=e.computed(()=>[...l.options].find(a=>JSON.stringify(a.value)===JSON.stringify(l.modelValue)));return(a,r)=>(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",Y,[e.createElementVNode("div",K,[e.createElementVNode("button",{class:e.normalizeClass(["btn dropdown-toggle",{[`btn-${t.variant}`]:t.variant,[`btn-${t.color}`]:t.color,[`btn-${t.disabled}`]:t.disabled,[`btn-outline-${t.color||"dark"}`]:t.outline}]),type:"button",id:t.id,"data-bs-toggle":"dropdown","aria-expanded":"false",disabled:t.disabled},e.toDisplayString(e.unref(d)?e.unref(d).text:t.placeholder),11,Q),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),(s,m)=>(e.openBlock(),e.createElementBlock("li",{key:m},[e.renderSlot(a.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>n(s.value),["prevent"])},e.toDisplayString(s.text),9,Z)])]))),128))],8,W)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(a.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,_)]))}}),ee=["id","name","multiple","accept"],te={class:"form-input__input-group input-group"},le=["value","id","name"],ae=["for"],ne=["for","innerHTML"],oe=e.defineComponent({__name:"file-input",props:{modelValue:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},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}},emits:["update:modelValue"],setup(t,{emit:i}){function l(d){const a=d.target&&d.target.files;a&&(n.splice(0,n.length),Array.from(a).forEach(r=>{n.push(r)}))}const n=e.reactive([]),o=e.computed(()=>n&&n.map(d=>d.name));return e.computed(()=>n.map(d=>URL.createObjectURL(d))),e.watch(()=>n,(d,a)=>{console.log("file input",d),i("update:modelValue",d)},{deep:!0}),(d,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input file-input","file-input--primary"])},[e.createElementVNode("input",{type:"file",id:t.id,name:t.name,class:"d-none",onChange:l,multiple:t.multiple,accept:t.accept},null,40,ee),e.createElementVNode("div",te,[e.renderSlot(d.$slots,"input-prepend"),e.createElementVNode("input",{type:"text",value:e.unref(o),id:t.id,name:t.name,class:"form-control"},null,8,le),e.renderSlot(d.$slots,"input-append",{},()=>[e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,ae)])]),e.renderSlot(d.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,ne)])]))}}),de={class:"media-upload"},ie=["src"],re=["onClick"],ce=["for"];async function se(t){return await new Promise(i=>{let l=new FileReader;l.onload=()=>i(l.result),l.readAsDataURL(t)})}const me=e.defineComponent({__name:"media-upload",props:{modelValue:{type:Array,default:[]},src:{type:String},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},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,default:"image/*"}},emits:["update:modelValue","update:src"],setup(t,{emit:i}){const l=t,n=e.ref([]),o=e.ref([]),d=e.computed(()=>l.modelValue.length?l.modelValue:l.src?[{type:"",src:l.src}]:o.value);e.watch(()=>n,async(r,s)=>{o.value=await Promise.all(r.value.map(async m=>({src:await se(m),type:m.type})))},{deep:!0}),e.watch(()=>o,async(r,s)=>{const m=l.multiple?o.value:[o.value[0]];i("update:modelValue",m),l.multiple||i("update:src",o.value[0]&&o.value[0].src)},{deep:!0});function a(r){n.value.splice(r,1)}return(r,s)=>{const m=e.resolveComponent("svg-icon"),f=e.resolveComponent("file-input");return e.openBlock(),e.createElementBlock("div",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(p,ue)=>(e.openBlock(),e.createElementBlock("div",{key:p.src,class:"media-upload__thumbnail"},[e.createElementVNode("img",{src:p.src,class:"img-thumbnail rounded"},null,8,ie),e.createElementVNode("button",{onClick:e.withModifiers(Be=>a(ue),["prevent"]),class:"btn btn--close"},[e.createVNode(m,{symbol:"x"})],8,re)]))),128)),e.createVNode(f,{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=p=>n.value=p),id:t.id,name:t.name,accept:t.accept,class:"d-none"},null,8,["modelValue","id","name","accept"]),e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,ce)])}}}),he="";c.BaseButton=C,c.BaseHeadline=x,c.BaseParagraph=E,c.CheckGroup=H,c.FileInput=oe,c.FormInput=T,c.InputDropdown=v,c.InputTextarea=A,c.LoadingSpinner=V,c.MediaUpload=me,c.RadioGroup=J,c.SvgIcon=g,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.AblokComponents={},c.Vue))})(this,function(c,e){"use strict";const y={class:"icon",preserveAspectRatio:"xMaxYMin"},b=["xlink:href"],g=e.defineComponent({__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(t){return(i,l)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["svg-icon",{[`svg-icon--${t.size}`]:t.size}])},[(e.openBlock(),e.createElementBlock("svg",y,[e.createElementVNode("use",{"xlink:href":`${t.basePath}#${t.prefix}${t.symbol}`,"xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0",y:"0"},null,8,b)]))],2))}}),fe="",h={class:"loading-spinner d-block"},$={class:"loading-spinner__animation"},B={class:"d-block",version:"1.1",id:"L9",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100","enable-background":"new 0 0 0 0","xml:space":"preserve"},k=["fill"],S=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],V=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(i,l)=>(e.openBlock(),e.createElementBlock("span",h,[e.createElementVNode("span",$,[(e.openBlock(),e.createElementBlock("svg",B,[e.createElementVNode("path",{fill:t.color,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"},S,8,k)]))]),e.renderSlot(i.$slots,"default")]))}}),ye="",x=e.defineComponent({__name:"base-headline",props:{tag:null,size:null,variant:null,text:null,className:null},setup(t){const i=t,l=e.computed(()=>i.tag||"p");return(a,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{class:e.normalizeClass(["headline",`headline--${t.size}${t.className||""}`])},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["class"]))}}),E=e.defineComponent({__name:"base-paragraph",props:{size:null,variant:null,text:null,className:null},setup(t){return(i,l)=>(e.openBlock(),e.createElementBlock("p",{class:e.normalizeClass(["base-paragraph",`base-paragraph--${t.size}${t.className||""}`])},[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])],2))}}),N=["type","disabled","href","to"],C=e.defineComponent({__name:"base-button",props:{type:null,caption:null,variant:null,size:null,icon:null,href:null,to:null,disabled:{type:Boolean},pending:{type:Boolean},outlined:{type:Boolean},rounded:{type:Boolean},fab:{type:Boolean}},setup(t){const i=t,l=e.computed(()=>i.caption&&!i.fab);return(a,o)=>{const d=e.resolveComponent("svg-icon");return e.openBlock(),e.createElementBlock("button",{type:t.type,disabled:t.disabled,href:t.href,to:t.to,class:e.normalizeClass(["base-button btn btn-primary",{disabled:t.disabled,pending:t.pending,rounded:t.rounded,outlined:t.outlined,fab:t.fab,"x-large":t.size==="x-large",large:t.size==="large",small:t.size==="small","x-small":t.size==="x-small"}])},[e.renderSlot(a.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(d,{key:0,id:t.icon,class:"base-button__caption"},null,8,["id"])):e.createCommentVNode("",!0),e.unref(l)?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["base-button__caption",{"icon-padding":t.icon}])},e.toDisplayString(t.caption),3)):e.createCommentVNode("",!0)])],10,N)}}}),be="";function u(){return(new Date().valueOf()+Math.random()).toString(36)}const w={class:"input-group form-input__input-group"},q=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],z={key:0,class:"form-input__color-swatch"},M=["name","id","disabled","read-only","required","aria-label"],O=["for","innerHTML"],T=e.defineComponent({__name:"form-input",props:{modelValue:{type:[String,Number,Boolean],default:""},type:{type:String,default:"text"},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},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}},emits:["update:modelValue"],setup(t,{emit:i}){const l=t,a=e.computed({get(){return l.modelValue},set(o){i("update:modelValue",o)}});return(o,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",w,[e.renderSlot(o.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=n=>e.isRef(a)?a.value=n:null),type:t.type==="color"?"text":t.type,id:t.id,name:t.name,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,checked:t.checked,class:e.normalizeClass(["form-control",{"form-check-input":t.type==="checkbox"}]),"aria-label":t.label},null,10,q),[[e.vModelDynamic,e.unref(a)]]),e.renderSlot(o.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",z,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[1]||(d[1]=n=>e.isRef(a)?a.value=n:null),type:"color",name:`${t.name}-color`,id:`${t.id}-color`,disabled:t.disabled,"read-only":t.readOnly,required:t.required,class:"form-control","aria-label":t.label},null,8,M),[[e.vModelText,e.unref(a)]])])):e.createCommentVNode("",!0)])]),e.renderSlot(o.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:e.normalizeClass(["form-input__label",{"form-check-label":t.type==="checkbox"}]),innerHTML:`${t.label}${t.required?" *":""}`},null,10,O)])],2))}}),ge="",D={class:"form-input form-input--textarea"},L=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","aria-label"],U={key:0,class:"form-input__color-swatch"},I=["name","id","disabled","read-only","required","aria-label"],R=["for","innerHTML"],A=e.defineComponent({__name:"input-textarea",props:{modelValue:{type:String,default:""},type:{type:String,default:"text"},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},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}},emits:["update:modelValue"],setup(t,{emit:i}){const l=t,a=e.computed({get(){return l.modelValue},set(o){i("update:modelValue",o)}});return(o,d)=>(e.openBlock(),e.createElementBlock("div",D,[e.renderSlot(o.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":d[0]||(d[0]=n=>e.isRef(a)?a.value=n:null),type:t.type==="color"?"text":t.type,id:t.id,name:t.name,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,class:e.normalizeClass(["form-control",{}]),"aria-label":t.label},null,8,L),[[e.vModelText,e.unref(a)]]),e.renderSlot(o.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",U,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[1]||(d[1]=n=>e.isRef(a)?a.value=n:null),type:"color",name:`${t.name}-color`,id:`${t.id}-color`,disabled:t.disabled,"read-only":t.readOnly,required:t.required,class:"form-control","aria-label":t.label},null,8,I),[[e.vModelText,e.unref(a)]])])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:e.normalizeClass(["form-input__label",{"form-check-label":t.type==="checkbox"}]),innerHTML:`${t.label}${t.required?" *":""}`},null,10,R)])]))}}),F={class:"radio-group"},P=["for"],H=e.defineComponent({__name:"check-group",props:{modelValue:{default:[]},options:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:i}){const l=t,a=e.ref([]);return e.watch(()=>l.modelValue,(o,d)=>{a.value=l.options.map(n=>n.value?l.modelValue.some(r=>r["value "]===n.value):l.modelValue.some(r=>r===n))},{immediate:!0}),e.watch(a,(o,d)=>{const n=o.reduce((r,s,m)=>{const f=s&&l.options[m]?[l.options[m]||l.options[m]]:[];return[...r,...f]},[]);i("update:modelValue",n)},{deep:!0}),e.onBeforeMount(()=>{}),(o,d)=>{const n=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(r,s)=>(e.openBlock(),e.createBlock(n,{key:s,modelValue:e.unref(a)[s],"onUpdate:modelValue":m=>e.unref(a)[s]=m,type:"checkbox",name:t.name,id:`${t.id}-${s}`,label:`${r.text||r}${t.required?" *":""}`,disabled:t.disabled,"read-only":t.readOnly,required:t.required},null,8,["modelValue","onUpdate:modelValue","name","id","label","disabled","read-only","required"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,P)])}}}),j={class:"radio-group"},G=["for"],J=e.defineComponent({__name:"radio-group",props:{modelValue:{default:!1},options:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:i}){const l=t;e.ref(l.options.map(o=>o.value===l.modelValue));function a(o){i("update:modelValue",o)}return e.onBeforeMount(()=>{}),(o,d)=>{const n=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",j,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(r,s)=>(e.openBlock(),e.createBlock(n,{key:s,type:"radio",name:t.name,id:`${t.id}-${s}`,value:r.value||r,label:`${r.text||r}${t.required?" *":""}`,checked:r.value?r.value===t.modelValue:r===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:m=>a(r)},null,8,["name","id","value","label","checked","disabled","read-only","required","onChange"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,G)])}}}),X={class:"input input-dropdown"},Y={class:"dropdown"},K={class:"btn-group",role:"group"},Q=["id","disabled"],W=["aria-labelledby"],Z=["onClick"],_=["for"],v=e.defineComponent({__name:"input-dropdown",props:{modelValue:{type:[String,Number,Boolean,Object],default:""},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:"Please select"},options:{type:Array,default:[]},variant:{type:String,default:""},color:{type:String,default:""},disabled:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},required:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},resetOption:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{emit:i}){const l=t;e.computed({get(){return l.modelValue},set(n){i("update:modelValue",n)}});function a(n){i("update:modelValue",n)}const o=e.computed(()=>[{text:"Please select"},...l.options.map(n=>typeof n=="string"?{value:n,text:n}:n)]),d=e.computed(()=>[...l.options].find(n=>JSON.stringify(n.value)===JSON.stringify(l.modelValue)));return(n,r)=>(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",Y,[e.createElementVNode("div",K,[e.createElementVNode("button",{class:e.normalizeClass(["btn dropdown-toggle",{[`btn-${t.variant}`]:t.variant,[`btn-${t.color}`]:t.color,[`btn-${t.disabled}`]:t.disabled,[`btn-outline-${t.color||"dark"}`]:t.outline}]),type:"button",id:t.id,"data-bs-toggle":"dropdown","aria-expanded":"false",disabled:t.disabled},e.toDisplayString(e.unref(d)?e.unref(d).text:t.placeholder),11,Q),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),(s,m)=>(e.openBlock(),e.createElementBlock("li",{key:m},[e.renderSlot(n.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>a(s.value),["prevent"])},e.toDisplayString(s.text),9,Z)])]))),128))],8,W)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,_)]))}}),ee=["id","name","multiple","accept"],te={class:"form-input__input-group input-group"},le=["value","id","name"],ae=["for"],ne=["for","innerHTML"],oe=e.defineComponent({__name:"file-input",props:{modelValue:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},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}},emits:["update:modelValue"],setup(t,{emit:i}){function l(d){const n=d.target&&d.target.files;n&&(a.splice(0,a.length),Array.from(n).forEach(r=>{a.push(r)}))}const a=e.reactive([]),o=e.computed(()=>a&&a.map(d=>d.name));return e.computed(()=>a.map(d=>URL.createObjectURL(d))),e.watch(()=>a,(d,n)=>{console.log("file input",d),i("update:modelValue",d)},{deep:!0}),(d,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input file-input","file-input--primary"])},[e.createElementVNode("input",{type:"file",id:t.id,name:t.name,class:"d-none",onChange:l,multiple:t.multiple,accept:t.accept},null,40,ee),e.createElementVNode("div",te,[e.renderSlot(d.$slots,"input-prepend"),e.createElementVNode("input",{type:"text",value:e.unref(o),id:t.id,name:t.name,class:"form-control"},null,8,le),e.renderSlot(d.$slots,"input-append",{},()=>[e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,ae)])]),e.renderSlot(d.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,ne)])]))}}),de={class:"media-upload"},ie=["src"],re=["onClick"],ce=["for"];async function se(t){return await new Promise(i=>{let l=new FileReader;l.onload=()=>i(l.result),l.readAsDataURL(t)})}const me=e.defineComponent({__name:"media-upload",props:{modelValue:{type:Array,default:[]},src:{type:String},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},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,default:"image/*"}},emits:["update:modelValue","update:src"],setup(t,{emit:i}){const l=t,a=e.ref([]),o=e.ref([]),d=e.computed(()=>l.modelValue.length?l.modelValue:l.src?[{type:"",src:l.src}]:o.value);e.watch(()=>a,async(r,s)=>{o.value=await Promise.all(r.value.map(async m=>({src:await se(m),type:m.type})))},{deep:!0}),e.watch(()=>o,async(r,s)=>{const m=l.multiple?o.value:[o.value[0]];i("update:modelValue",m),l.multiple||i("update:src",o.value[0]&&o.value[0].src)},{deep:!0});function n(r){a.value.splice(r,1)}return(r,s)=>{const m=e.resolveComponent("svg-icon"),f=e.resolveComponent("file-input");return e.openBlock(),e.createElementBlock("div",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(p,ue)=>(e.openBlock(),e.createElementBlock("div",{key:p.src,class:"media-upload__thumbnail"},[e.createElementVNode("img",{src:p.src,class:"img-thumbnail rounded"},null,8,ie),e.createElementVNode("button",{onClick:e.withModifiers($e=>n(ue),["prevent"]),class:"btn btn--close"},[e.createVNode(m,{symbol:"x"})],8,re)]))),128)),e.createVNode(f,{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=p=>a.value=p),id:t.id,name:t.name,accept:t.accept,class:"d-none"},null,8,["modelValue","id","name","accept"]),e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,ce)])}}}),he="";c.BaseButton=C,c.BaseHeadline=x,c.BaseParagraph=E,c.CheckGroup=H,c.FileInput=oe,c.FormInput=T,c.InputDropdown=v,c.InputTextarea=A,c.LoadingSpinner=V,c.MediaUpload=me,c.RadioGroup=J,c.SvgIcon=g,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/components/base-headline.vue.d.ts

@@ -7,6 +7,7 @@ declare const _default: {
             size?: string | undefined;
             variant?: string | undefined;
             text?: string | undefined;
+            className?: string | undefined;
         }>>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
         $attrs: {
             [x: string]: unknown;
@@ -26,6 +27,7 @@ declare const _default: {
             size?: string | undefined;
             variant?: string | undefined;
             text?: string | undefined;
+            className?: string | undefined;
         }>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {}> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -51,6 +53,7 @@ declare const _default: {
         size?: string | undefined;
         variant?: string | undefined;
         text?: string | undefined;
+        className?: string | undefined;
     }>>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -60,6 +63,7 @@ declare const _default: {
     size?: string | undefined;
     variant?: string | undefined;
     text?: string | undefined;
+    className?: string | undefined;
 }>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default: (_: {}) => any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.0.38",
+  "version": "0.0.39",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",