ablok-components 0.0.36 → 0.0.37

package/dist/ablok-components.es.js

@@ -1,8 +1,8 @@
-import { defineComponent as b, openBlock as u, createElementBlock as s, normalizeClass as g, createElementVNode as i, renderSlot as m, computed as h, resolveComponent as $, createBlock as O, createCommentVNode as q, unref as p, toDisplayString as v, withDirectives as M, isRef as U, vModelDynamic as T, vModelText as A, ref as k, watch as S, onBeforeMount as N, Fragment as B, renderList as w, createTextVNode as C, withModifiers as z, reactive as D, createVNode as L } from "vue";
+import { defineComponent as g, openBlock as u, createElementBlock as s, normalizeClass as b, createElementVNode as o, renderSlot as m, computed as h, resolveComponent as $, createBlock as U, createCommentVNode as k, unref as p, toDisplayString as v, withDirectives as B, isRef as w, vModelDynamic as A, vModelText as C, ref as q, watch as S, onBeforeMount as T, Fragment as O, renderList as M, createTextVNode as L, withModifiers as I, reactive as D, createVNode as N } from "vue";
 const R = {
   class: "icon",
   preserveAspectRatio: "xMaxYMin"
-}, F = ["xlink:href"], Ve = /* @__PURE__ */ b({
+}, F = ["xlink:href"], qe = /* @__PURE__ */ g({
   __name: "svg-icon",
   props: {
     basePath: {
@@ -23,13 +23,13 @@ const R = {
     }
   },
   setup(e) {
-    return (r, t) => (u(), s("i", {
-      class: g(["svg-icon", {
+    return (r, a) => (u(), s("i", {
+      class: b(["svg-icon", {
         [`svg-icon--${e.size}`]: e.size
       }])
     }, [
       (u(), s("svg", R, [
-        i("use", {
+        o("use", {
           "xlink:href": `${e.basePath}#${e.prefix}${e.symbol}`,
           "xmlns:xlink": "http://www.w3.org/1999/xlink",
           x: "0",
@@ -39,7 +39,7 @@ const R = {
     ], 2));
   }
 });
-const P = { class: "loading-spinner d-block" }, H = { class: "loading-spinner__animation" }, E = {
+const H = { class: "loading-spinner d-block" }, P = { class: "loading-spinner__animation" }, E = {
   class: "d-block",
   version: "1.1",
   id: "L9",
@@ -50,7 +50,7 @@ const P = { class: "loading-spinner d-block" }, H = { class: "loading-spinner__a
   viewBox: "0 0 100 100",
   "enable-background": "new 0 0 0 0",
   "xml:space": "preserve"
-}, j = ["fill"], G = /* @__PURE__ */ i("animateTransform", {
+}, j = ["fill"], G = /* @__PURE__ */ o("animateTransform", {
   attributeName: "transform",
   attributeType: "XML",
   type: "rotate",
@@ -60,7 +60,7 @@ const P = { class: "loading-spinner d-block" }, H = { class: "loading-spinner__a
   repeatCount: "indefinite"
 }, null, -1), J = [
   G
-], xe = /* @__PURE__ */ b({
+], Oe = /* @__PURE__ */ g({
   __name: "loading-spinner",
   props: {
     color: {
@@ -69,10 +69,10 @@ const P = { class: "loading-spinner d-block" }, H = { class: "loading-spinner__a
     }
   },
   setup(e) {
-    return (r, t) => (u(), s("span", P, [
-      i("span", H, [
+    return (r, a) => (u(), s("span", H, [
+      o("span", P, [
         (u(), s("svg", E, [
-          i("path", {
+          o("path", {
             fill: e.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"
           }, J, 8, j)
@@ -82,7 +82,7 @@ const P = { class: "loading-spinner d-block" }, H = { class: "loading-spinner__a
     ]));
   }
 });
-const X = ["type", "disabled", "href", "to"], ke = /* @__PURE__ */ b({
+const X = ["type", "disabled", "href", "to"], Me = /* @__PURE__ */ g({
   __name: "base-button",
   props: {
     type: null,
@@ -99,15 +99,15 @@ const X = ["type", "disabled", "href", "to"], ke = /* @__PURE__ */ b({
     fab: { type: Boolean }
   },
   setup(e) {
-    const r = e, t = h(() => r.caption && !r.fab);
-    return (a, n) => {
+    const r = e, a = h(() => r.caption && !r.fab);
+    return (l, n) => {
       const d = $("svg-icon");
       return u(), s("button", {
         type: e.type,
         disabled: e.disabled,
         href: e.href,
         to: e.to,
-        class: g(["base-button btn btn-primary", {
+        class: b(["base-button btn btn-primary", {
           disabled: e.disabled,
           pending: e.pending,
           rounded: e.rounded,
@@ -119,16 +119,16 @@ const X = ["type", "disabled", "href", "to"], ke = /* @__PURE__ */ b({
           "x-small": e.size === "x-small"
         }])
       }, [
-        m(a.$slots, "default", {}, () => [
-          e.icon ? (u(), O(d, {
+        m(l.$slots, "default", {}, () => [
+          e.icon ? (u(), U(d, {
             key: 0,
             id: e.icon,
             class: "base-button__caption"
-          }, null, 8, ["id"])) : q("", !0),
-          p(t) ? (u(), s("span", {
+          }, null, 8, ["id"])) : k("", !0),
+          p(a) ? (u(), s("span", {
             key: 1,
-            class: g(["base-button__caption", { "icon-padding": e.icon }])
-          }, v(e.caption), 3)) : q("", !0)
+            class: b(["base-button__caption", { "icon-padding": e.icon }])
+          }, v(e.caption), 3)) : k("", !0)
         ])
       ], 10, X);
     };
@@ -140,7 +140,7 @@ function y() {
 const Y = { class: "input-group form-input__input-group" }, K = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"], Q = {
   key: 0,
   class: "form-input__color-swatch"
-}, W = ["name", "id", "disabled", "read-only", "required", "aria-label"], Z = ["for", "innerHTML"], Be = /* @__PURE__ */ b({
+}, W = ["name", "id", "disabled", "read-only", "required", "aria-label"], Z = ["for", "innerHTML"], Ce = /* @__PURE__ */ g({
   __name: "form-input",
   props: {
     modelValue: {
@@ -197,21 +197,21 @@ const Y = { class: "input-group form-input__input-group" }, K = ["type", "id", "
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    const t = e, a = h({
+    const a = e, l = h({
       get() {
-        return t.modelValue;
+        return a.modelValue;
       },
       set(n) {
         r("update:modelValue", n);
       }
     });
     return (n, d) => (u(), s("div", {
-      class: g(["form-input", `form-input--${e.type}`])
+      class: b(["form-input", `form-input--${e.type}`])
     }, [
-      i("div", Y, [
+      o("div", Y, [
         m(n.$slots, "input-prepend"),
-        M(i("input", {
-          "onUpdate:modelValue": d[0] || (d[0] = (l) => U(a) ? a.value = l : null),
+        B(o("input", {
+          "onUpdate:modelValue": d[0] || (d[0] = (t) => w(l) ? l.value = t : null),
           type: e.type === "color" ? "text" : e.type,
           id: e.id,
           name: e.name,
@@ -222,17 +222,17 @@ const Y = { class: "input-group form-input__input-group" }, K = ["type", "id", "
           required: e.required,
           maxlength: e.maxlength,
           checked: e.checked,
-          class: g(["form-control", {
+          class: b(["form-control", {
             "form-check-input": e.type === "checkbox"
           }]),
           "aria-label": e.label
         }, null, 10, K), [
-          [T, p(a)]
+          [A, p(l)]
         ]),
         m(n.$slots, "input-append", {}, () => [
           e.type === "color" ? (u(), s("span", Q, [
-            M(i("input", {
-              "onUpdate:modelValue": d[1] || (d[1] = (l) => U(a) ? a.value = l : null),
+            B(o("input", {
+              "onUpdate:modelValue": d[1] || (d[1] = (t) => w(l) ? l.value = t : null),
               type: "color",
               name: `${e.name}-color`,
               id: `${e.id}-color`,
@@ -242,15 +242,15 @@ const Y = { class: "input-group form-input__input-group" }, K = ["type", "id", "
               class: "form-control",
               "aria-label": e.label
             }, null, 8, W), [
-              [A, p(a)]
+              [C, p(l)]
             ])
-          ])) : q("", !0)
+          ])) : k("", !0)
         ])
       ]),
       m(n.$slots, "label", {}, () => [
-        i("label", {
+        o("label", {
           for: e.id,
-          class: g(["form-input__label", {
+          class: b(["form-input__label", {
             "form-check-label": e.type === "checkbox"
           }]),
           innerHTML: `${e.label}${e.required ? " *" : ""}`
@@ -259,7 +259,121 @@ const Y = { class: "input-group form-input__input-group" }, K = ["type", "id", "
     ], 2));
   }
 });
-const _ = { class: "radio-group" }, ee = ["for"], we = /* @__PURE__ */ b({
+const _ = { class: "form-input form-input--textarea" }, ee = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "aria-label"], te = {
+  key: 0,
+  class: "form-input__color-swatch"
+}, le = ["name", "id", "disabled", "read-only", "required", "aria-label"], ae = ["for", "innerHTML"], Ue = /* @__PURE__ */ g({
+  __name: "input-textarea",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "text"
+    },
+    name: {
+      type: String,
+      default: () => y()
+    },
+    id: {
+      type: String,
+      default: () => y()
+    },
+    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(e, { emit: r }) {
+    const a = e, l = h({
+      get() {
+        return a.modelValue;
+      },
+      set(n) {
+        r("update:modelValue", n);
+      }
+    });
+    return (n, d) => (u(), s("div", _, [
+      m(n.$slots, "input-prepend"),
+      B(o("textarea", {
+        "onUpdate:modelValue": d[0] || (d[0] = (t) => w(l) ? l.value = t : null),
+        type: e.type === "color" ? "text" : 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: b(["form-control", {}]),
+        "aria-label": e.label
+      }, null, 8, ee), [
+        [C, p(l)]
+      ]),
+      m(n.$slots, "input-append", {}, () => [
+        e.type === "color" ? (u(), s("span", te, [
+          B(o("input", {
+            "onUpdate:modelValue": d[1] || (d[1] = (t) => w(l) ? l.value = t : null),
+            type: "color",
+            name: `${e.name}-color`,
+            id: `${e.id}-color`,
+            disabled: e.disabled,
+            "read-only": e.readOnly,
+            required: e.required,
+            class: "form-control",
+            "aria-label": e.label
+          }, null, 8, le), [
+            [C, p(l)]
+          ])
+        ])) : k("", !0)
+      ]),
+      m(n.$slots, "label", {}, () => [
+        o("label", {
+          for: e.id,
+          class: b(["form-input__label", {
+            "form-check-label": e.type === "checkbox"
+          }]),
+          innerHTML: `${e.label}${e.required ? " *" : ""}`
+        }, null, 10, ae)
+      ])
+    ]));
+  }
+}), ne = { class: "radio-group" }, de = ["for"], Le = /* @__PURE__ */ g({
   __name: "check-group",
   props: {
     modelValue: {
@@ -300,42 +414,42 @@ const _ = { class: "radio-group" }, ee = ["for"], we = /* @__PURE__ */ b({
   },
   emits: ["change", "update:modelValue"],
   setup(e, { emit: r }) {
-    const t = e, a = k([]);
-    return S(() => t.modelValue, (n, d) => {
-      a.value = t.options.map(
-        (l) => l.value ? t.modelValue.some((o) => o["value "] === l.value) : t.modelValue.some((o) => o === l)
+    const a = e, l = q([]);
+    return S(() => a.modelValue, (n, d) => {
+      l.value = a.options.map(
+        (t) => t.value ? a.modelValue.some((i) => i["value "] === t.value) : a.modelValue.some((i) => i === t)
       );
-    }, { immediate: !0 }), S(a, (n, d) => {
-      const l = n.reduce((o, c, f) => {
-        const V = c && t.options[f] ? [t.options[f] || t.options[f]] : [];
-        return [...o, ...V];
+    }, { immediate: !0 }), S(l, (n, d) => {
+      const t = n.reduce((i, c, f) => {
+        const x = c && a.options[f] ? [a.options[f] || a.options[f]] : [];
+        return [...i, ...x];
       }, []);
-      r("update:modelValue", l);
-    }, { deep: !0 }), N(() => {
+      r("update:modelValue", t);
+    }, { deep: !0 }), T(() => {
     }), (n, d) => {
-      const l = $("form-input");
-      return u(), s("div", _, [
-        (u(!0), s(B, null, w(e.options, (o, c) => (u(), O(l, {
+      const t = $("form-input");
+      return u(), s("div", ne, [
+        (u(!0), s(O, null, M(e.options, (i, c) => (u(), U(t, {
           key: c,
-          modelValue: p(a)[c],
-          "onUpdate:modelValue": (f) => p(a)[c] = f,
+          modelValue: p(l)[c],
+          "onUpdate:modelValue": (f) => p(l)[c] = f,
           type: "checkbox",
           name: e.name,
           id: `${e.id}-${c}`,
-          label: `${o.text || o}${e.required ? " *" : ""}`,
+          label: `${i.text || i}${e.required ? " *" : ""}`,
           disabled: e.disabled,
           "read-only": e.readOnly,
           required: e.required
         }, null, 8, ["modelValue", "onUpdate:modelValue", "name", "id", "label", "disabled", "read-only", "required"]))), 128)),
-        i("label", { for: e.id }, [
+        o("label", { for: e.id }, [
           m(n.$slots, "label", {}, () => [
-            C(v(e.label), 1)
+            L(v(e.label), 1)
           ])
-        ], 8, ee)
+        ], 8, de)
       ]);
     };
   }
-}), te = { class: "radio-group" }, le = ["for"], qe = /* @__PURE__ */ b({
+}), oe = { class: "radio-group" }, ie = ["for"], Ne = /* @__PURE__ */ g({
   __name: "radio-group",
   props: {
     modelValue: {
@@ -376,40 +490,40 @@ const _ = { class: "radio-group" }, ee = ["for"], we = /* @__PURE__ */ b({
   },
   emits: ["change", "update:modelValue"],
   setup(e, { emit: r }) {
-    const t = e;
-    k(t.options.map((n) => n.value === t.modelValue));
-    function a(n) {
+    const a = e;
+    q(a.options.map((n) => n.value === a.modelValue));
+    function l(n) {
       r("update:modelValue", n);
     }
-    return N(() => {
+    return T(() => {
     }), (n, d) => {
-      const l = $("form-input");
-      return u(), s("div", te, [
-        (u(!0), s(B, null, w(e.options, (o, c) => (u(), O(l, {
+      const t = $("form-input");
+      return u(), s("div", oe, [
+        (u(!0), s(O, null, M(e.options, (i, c) => (u(), U(t, {
           key: c,
           type: "radio",
           name: e.name,
           id: `${e.id}-${c}`,
-          value: o.value || o,
-          label: `${o.text || o}${e.required ? " *" : ""}`,
-          checked: o.value ? o.value === e.modelValue : o === e.modelValue,
+          value: i.value || i,
+          label: `${i.text || i}${e.required ? " *" : ""}`,
+          checked: i.value ? i.value === e.modelValue : i === e.modelValue,
           disabled: e.disabled,
           "read-only": e.readOnly,
           required: e.required,
-          onChange: (f) => a(o)
+          onChange: (f) => l(i)
         }, null, 8, ["name", "id", "value", "label", "checked", "disabled", "read-only", "required", "onChange"]))), 128)),
-        i("label", { for: e.id }, [
+        o("label", { for: e.id }, [
           m(n.$slots, "label", {}, () => [
-            C(v(e.label), 1)
+            L(v(e.label), 1)
           ])
-        ], 8, le)
+        ], 8, ie)
       ]);
     };
   }
-}), ae = { class: "input input-dropdown" }, ne = { class: "dropdown" }, de = {
+}), ue = { class: "input input-dropdown" }, re = { class: "dropdown" }, se = {
   class: "btn-group",
   role: "group"
-}, oe = ["id", "disabled"], ie = ["aria-labelledby"], ue = ["onClick"], re = ["for"], Oe = /* @__PURE__ */ b({
+}, ce = ["id", "disabled"], fe = ["aria-labelledby"], me = ["onClick"], ye = ["for"], Te = /* @__PURE__ */ g({
   __name: "input-dropdown",
   props: {
     modelValue: {
@@ -467,31 +581,31 @@ const _ = { class: "radio-group" }, ee = ["for"], we = /* @__PURE__ */ b({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    const t = e;
+    const a = e;
     h({
       get() {
-        return t.modelValue;
+        return a.modelValue;
       },
-      set(l) {
-        r("update:modelValue", l);
+      set(t) {
+        r("update:modelValue", t);
       }
     });
-    function a(l) {
-      r("update:modelValue", l);
+    function l(t) {
+      r("update:modelValue", t);
     }
     const n = h(() => [
       {
         text: "Please select"
       },
-      ...t.options.map(
-        (l) => typeof l == "string" ? { value: l, text: l } : l
+      ...a.options.map(
+        (t) => typeof t == "string" ? { value: t, text: t } : t
       )
-    ]), d = h(() => [...t.options].find((l) => JSON.stringify(l.value) === JSON.stringify(t.modelValue)));
-    return (l, o) => (u(), s("div", ae, [
-      i("div", ne, [
-        i("div", de, [
-          i("button", {
-            class: g(["btn dropdown-toggle", {
+    ]), d = h(() => [...a.options].find((t) => JSON.stringify(t.value) === JSON.stringify(a.modelValue)));
+    return (t, i) => (u(), s("div", ue, [
+      o("div", re, [
+        o("div", se, [
+          o("button", {
+            class: b(["btn dropdown-toggle", {
               [`btn-${e.variant}`]: e.variant,
               [`btn-${e.color}`]: e.color,
               [`btn-${e.disabled}`]: e.disabled,
@@ -502,30 +616,30 @@ const _ = { class: "radio-group" }, ee = ["for"], we = /* @__PURE__ */ b({
             "data-bs-toggle": "dropdown",
             "aria-expanded": "false",
             disabled: e.disabled
-          }, v(p(d) ? p(d).text : e.placeholder), 11, oe),
-          i("ul", {
+          }, v(p(d) ? p(d).text : e.placeholder), 11, ce),
+          o("ul", {
             class: "dropdown-menu",
             "aria-labelledby": e.id
           }, [
-            (u(!0), s(B, null, w(p(n), (c, f) => (u(), s("li", { key: f }, [
-              m(l.$slots, "option", {}, () => [
-                i("a", {
+            (u(!0), s(O, null, M(p(n), (c, f) => (u(), s("li", { key: f }, [
+              m(t.$slots, "option", {}, () => [
+                o("a", {
                   class: "dropdown-item",
-                  onClick: z((V) => a(c.value), ["prevent"])
-                }, v(c.text), 9, ue)
+                  onClick: I((x) => l(c.value), ["prevent"])
+                }, v(c.text), 9, me)
               ])
             ]))), 128))
-          ], 8, ie)
+          ], 8, fe)
         ])
       ]),
-      i("label", { for: e.id }, [
-        m(l.$slots, "label", {}, () => [
-          C(v(e.label), 1)
+      o("label", { for: e.id }, [
+        m(t.$slots, "label", {}, () => [
+          L(v(e.label), 1)
         ])
-      ], 8, re)
+      ], 8, ye)
     ]));
   }
-}), se = ["id", "name", "multiple", "accept"], ce = { class: "form-input__input-group input-group" }, fe = ["value", "id", "name"], me = ["for"], ye = ["for", "innerHTML"], Ce = /* @__PURE__ */ b({
+}), pe = ["id", "name", "multiple", "accept"], be = { class: "form-input__input-group input-group" }, ge = ["value", "id", "name"], he = ["for"], ve = ["for", "innerHTML"], Ie = /* @__PURE__ */ g({
   __name: "file-input",
   props: {
     modelValue: {
@@ -578,60 +692,60 @@ const _ = { class: "radio-group" }, ee = ["for"], we = /* @__PURE__ */ b({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    function t(d) {
-      const l = d.target && d.target.files;
-      l && (a.splice(0, a.length), Array.from(l).forEach((o) => {
-        a.push(o);
+    function a(d) {
+      const t = d.target && d.target.files;
+      t && (l.splice(0, l.length), Array.from(t).forEach((i) => {
+        l.push(i);
       }));
     }
-    const a = D([]), n = h(() => a && a.map((d) => d.name));
-    return h(() => a.map((d) => URL.createObjectURL(d))), S(() => a, (d, l) => {
+    const l = D([]), n = h(() => l && l.map((d) => d.name));
+    return h(() => l.map((d) => URL.createObjectURL(d))), S(() => l, (d, t) => {
       console.log("file input", d), r("update:modelValue", d);
-    }, { deep: !0 }), (d, l) => (u(), s("div", {
-      class: g(["form-input file-input", "file-input--primary"])
+    }, { deep: !0 }), (d, t) => (u(), s("div", {
+      class: b(["form-input file-input", "file-input--primary"])
     }, [
-      i("input", {
+      o("input", {
         type: "file",
         id: e.id,
         name: e.name,
         class: "d-none",
-        onChange: t,
+        onChange: a,
         multiple: e.multiple,
         accept: e.accept
-      }, null, 40, se),
-      i("div", ce, [
+      }, null, 40, pe),
+      o("div", be, [
         m(d.$slots, "input-prepend"),
-        i("input", {
+        o("input", {
           type: "text",
           value: p(n),
           id: e.id,
           name: e.name,
           class: "form-control"
-        }, null, 8, fe),
+        }, null, 8, ge),
         m(d.$slots, "input-append", {}, () => [
-          i("label", {
+          o("label", {
             for: e.id,
             class: "btn btn-outline-dark"
-          }, " Select Image ", 8, me)
+          }, " Select Image ", 8, he)
         ])
       ]),
       m(d.$slots, "label", {}, () => [
-        i("label", {
+        o("label", {
           for: e.id,
           class: "form-input__label",
           innerHTML: `${e.label}${e.required ? " *" : ""}`
-        }, null, 8, ye)
+        }, null, 8, ve)
       ])
     ]));
   }
-}), pe = { class: "media-upload" }, be = ["src"], ge = ["onClick"], he = ["for"];
-async function ve(e) {
+}), $e = { class: "media-upload" }, Se = ["src"], xe = ["onClick"], Ve = ["for"];
+async function ke(e) {
   return await new Promise((r) => {
-    let t = new FileReader();
-    t.onload = () => r(t.result), t.readAsDataURL(e);
+    let a = new FileReader();
+    a.onload = () => r(a.result), a.readAsDataURL(e);
   });
 }
-const Me = /* @__PURE__ */ b({
+const ze = /* @__PURE__ */ g({
   __name: "media-upload",
   props: {
     modelValue: {
@@ -688,63 +802,64 @@ const Me = /* @__PURE__ */ b({
   },
   emits: ["update:modelValue", "update:src"],
   setup(e, { emit: r }) {
-    const t = e, a = k([]), n = k([]), d = h(() => t.modelValue.length ? t.modelValue : t.src ? [{ type: "", src: t.src }] : n.value);
-    S(() => a, async (o, c) => {
+    const a = e, l = q([]), n = q([]), d = h(() => a.modelValue.length ? a.modelValue : a.src ? [{ type: "", src: a.src }] : n.value);
+    S(() => l, async (i, c) => {
       n.value = await Promise.all(
-        o.value.map(async (f) => ({
-          src: await ve(f),
+        i.value.map(async (f) => ({
+          src: await ke(f),
           type: f.type
         }))
       );
-    }, { deep: !0 }), S(() => n, async (o, c) => {
-      const f = t.multiple ? n.value : [n.value[0]];
-      r("update:modelValue", f), t.multiple || r("update:src", n.value[0] && n.value[0].src);
+    }, { deep: !0 }), S(() => n, async (i, c) => {
+      const f = a.multiple ? n.value : [n.value[0]];
+      r("update:modelValue", f), a.multiple || r("update:src", n.value[0] && n.value[0].src);
     }, { deep: !0 });
-    function l(o) {
-      a.value.splice(o, 1);
+    function t(i) {
+      l.value.splice(i, 1);
     }
-    return (o, c) => {
-      const f = $("svg-icon"), V = $("file-input");
-      return u(), s("div", pe, [
-        (u(!0), s(B, null, w(p(d), (x, I) => (u(), s("div", {
-          key: x.src,
+    return (i, c) => {
+      const f = $("svg-icon"), x = $("file-input");
+      return u(), s("div", $e, [
+        (u(!0), s(O, null, M(p(d), (V, z) => (u(), s("div", {
+          key: V.src,
           class: "media-upload__thumbnail"
         }, [
-          i("img", {
-            src: x.src,
+          o("img", {
+            src: V.src,
             class: "img-thumbnail rounded"
-          }, null, 8, be),
-          i("button", {
-            onClick: z(($e) => l(I), ["prevent"]),
+          }, null, 8, Se),
+          o("button", {
+            onClick: I((Be) => t(z), ["prevent"]),
             class: "btn btn--close"
           }, [
-            L(f, { symbol: "x" })
-          ], 8, ge)
+            N(f, { symbol: "x" })
+          ], 8, xe)
         ]))), 128)),
-        L(V, {
-          modelValue: a.value,
-          "onUpdate:modelValue": c[0] || (c[0] = (x) => a.value = x),
+        N(x, {
+          modelValue: l.value,
+          "onUpdate:modelValue": c[0] || (c[0] = (V) => l.value = V),
           id: e.id,
           name: e.name,
           accept: e.accept,
           class: "d-none"
         }, null, 8, ["modelValue", "id", "name", "accept"]),
-        i("label", {
+        o("label", {
           for: e.id,
           class: "btn btn-outline-dark"
-        }, " Select Image ", 8, he)
+        }, " Select Image ", 8, Ve)
       ]);
     };
   }
 });
 export {
-  ke as BaseButton,
-  we as CheckGroup,
-  Ce as FileInput,
-  Be as FormInput,
-  Oe as InputDropdown,
-  xe as LoadingSpinner,
-  Me as MediaUpload,
-  qe as RadioGroup,
-  Ve as SvgIcon
+  Me as BaseButton,
+  Le as CheckGroup,
+  Ie as FileInput,
+  Ce as FormInput,
+  Te as InputDropdown,
+  Ue as InputTextarea,
+  Oe as LoadingSpinner,
+  ze as MediaUpload,
+  Ne as RadioGroup,
+  qe as SvgIcon
 };

package/dist/ablok-components.umd.js

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.AblokComponents={},s.Vue))})(this,function(s,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(r,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))}}),oe="",h={class:"loading-spinner d-block"},k={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"},$=["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(r,l)=>(e.openBlock(),e.createElementBlock("span",h,[e.createElementVNode("span",k,[(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,$)]))]),e.renderSlot(r.$slots,"default")]))}}),ie="",E=["type","disabled","href","to"],w=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 r=t,l=e.computed(()=>r.caption&&!r.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,E)}}}),re="";function u(){return(new Date().valueOf()+Math.random()).toString(36)}const N={class:"input-group form-input__input-group"},C=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],x={key:0,class:"form-input__color-swatch"},q=["name","id","disabled","read-only","required","aria-label"],M=["for","innerHTML"],O=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:r}){const l=t,a=e.computed({get(){return l.modelValue},set(o){r("update:modelValue",o)}});return(o,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",N,[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,C),[[e.vModelDynamic,e.unref(a)]]),e.renderSlot(o.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",x,[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,q),[[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,M)])],2))}}),ce="",z={class:"radio-group"},D=["for"],L=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:r}){const l=t,a=e.ref([]);return e.watch(()=>l.modelValue,(o,d)=>{a.value=l.options.map(n=>n.value?l.modelValue.some(i=>i["value "]===n.value):l.modelValue.some(i=>i===n))},{immediate:!0}),e.watch(a,(o,d)=>{const n=o.reduce((i,c,m)=>{const f=c&&l.options[m]?[l.options[m]||l.options[m]]:[];return[...i,...f]},[]);r("update:modelValue",n)},{deep:!0}),e.onBeforeMount(()=>{}),(o,d)=>{const n=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,c)=>(e.openBlock(),e.createBlock(n,{key:c,modelValue:e.unref(a)[c],"onUpdate:modelValue":m=>e.unref(a)[c]=m,type:"checkbox",name:t.name,id:`${t.id}-${c}`,label:`${i.text||i}${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,D)])}}}),T={class:"radio-group"},U=["for"],A=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:r}){const l=t;e.ref(l.options.map(o=>o.value===l.modelValue));function a(o){r("update:modelValue",o)}return e.onBeforeMount(()=>{}),(o,d)=>{const n=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",T,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,c)=>(e.openBlock(),e.createBlock(n,{key:c,type:"radio",name:t.name,id:`${t.id}-${c}`,value:i.value||i,label:`${i.text||i}${t.required?" *":""}`,checked:i.value?i.value===t.modelValue:i===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:m=>a(i)},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,U)])}}}),F={class:"input input-dropdown"},I={class:"dropdown"},R={class:"btn-group",role:"group"},P=["id","disabled"],j=["aria-labelledby"],H=["onClick"],G=["for"],J=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:r}){const l=t;e.computed({get(){return l.modelValue},set(n){r("update:modelValue",n)}});function a(n){r("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,i)=>(e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("div",I,[e.createElementVNode("div",R,[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,P),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),(c,m)=>(e.openBlock(),e.createElementBlock("li",{key:m},[e.renderSlot(n.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>a(c.value),["prevent"])},e.toDisplayString(c.text),9,H)])]))),128))],8,j)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,G)]))}}),X=["id","name","multiple","accept"],Y={class:"form-input__input-group input-group"},K=["value","id","name"],Q=["for"],W=["for","innerHTML"],Z=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:r}){function l(d){const n=d.target&&d.target.files;n&&(a.splice(0,a.length),Array.from(n).forEach(i=>{a.push(i)}))}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),r("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,X),e.createElementVNode("div",Y,[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,K),e.renderSlot(d.$slots,"input-append",{},()=>[e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,Q)])]),e.renderSlot(d.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,W)])]))}}),_={class:"media-upload"},v=["src"],ee=["onClick"],te=["for"];async function le(t){return await new Promise(r=>{let l=new FileReader;l.onload=()=>r(l.result),l.readAsDataURL(t)})}const ne=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:r}){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(i,c)=>{o.value=await Promise.all(i.value.map(async m=>({src:await le(m),type:m.type})))},{deep:!0}),e.watch(()=>o,async(i,c)=>{const m=l.multiple?o.value:[o.value[0]];r("update:modelValue",m),l.multiple||r("update:src",o.value[0]&&o.value[0].src)},{deep:!0});function n(i){a.value.splice(i,1)}return(i,c)=>{const m=e.resolveComponent("svg-icon"),f=e.resolveComponent("file-input");return e.openBlock(),e.createElementBlock("div",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(p,ae)=>(e.openBlock(),e.createElementBlock("div",{key:p.src,class:"media-upload__thumbnail"},[e.createElementVNode("img",{src:p.src,class:"img-thumbnail rounded"},null,8,v),e.createElementVNode("button",{onClick:e.withModifiers(me=>n(ae),["prevent"]),class:"btn btn--close"},[e.createVNode(m,{symbol:"x"})],8,ee)]))),128)),e.createVNode(f,{modelValue:a.value,"onUpdate:modelValue":c[0]||(c[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,te)])}}}),se="";s.BaseButton=w,s.CheckGroup=L,s.FileInput=Z,s.FormInput=O,s.InputDropdown=J,s.LoadingSpinner=V,s.MediaUpload=ne,s.RadioGroup=A,s.SvgIcon=g,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.AblokComponents={},s.Vue))})(this,function(s,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(r,a)=>(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))}}),me="",h={class:"loading-spinner d-block"},k={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"},$=["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(r,a)=>(e.openBlock(),e.createElementBlock("span",h,[e.createElementVNode("span",k,[(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,$)]))]),e.renderSlot(r.$slots,"default")]))}}),fe="",E=["type","disabled","href","to"],x=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 r=t,a=e.computed(()=>r.caption&&!r.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(a)?(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,E)}}}),pe="";function u(){return(new Date().valueOf()+Math.random()).toString(36)}const N={class:"input-group form-input__input-group"},w=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],C={key:0,class:"form-input__color-swatch"},q=["name","id","disabled","read-only","required","aria-label"],M=["for","innerHTML"],O=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:r}){const a=t,n=e.computed({get(){return a.modelValue},set(o){r("update:modelValue",o)}});return(o,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",N,[e.renderSlot(o.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=l=>e.isRef(n)?n.value=l: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,w),[[e.vModelDynamic,e.unref(n)]]),e.renderSlot(o.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",C,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[1]||(d[1]=l=>e.isRef(n)?n.value=l: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,q),[[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,M)])],2))}}),ye="",T={class:"form-input form-input--textarea"},z=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","aria-label"],D={key:0,class:"form-input__color-swatch"},L=["name","id","disabled","read-only","required","aria-label"],U=["for","innerHTML"],I=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:r}){const a=t,n=e.computed({get(){return a.modelValue},set(o){r("update:modelValue",o)}});return(o,d)=>(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(o.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":d[0]||(d[0]=l=>e.isRef(n)?n.value=l: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,z),[[e.vModelText,e.unref(n)]]),e.renderSlot(o.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",D,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[1]||(d[1]=l=>e.isRef(n)?n.value=l: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,L),[[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,U)])]))}}),R={class:"radio-group"},A=["for"],F=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:r}){const a=t,n=e.ref([]);return e.watch(()=>a.modelValue,(o,d)=>{n.value=a.options.map(l=>l.value?a.modelValue.some(i=>i["value "]===l.value):a.modelValue.some(i=>i===l))},{immediate:!0}),e.watch(n,(o,d)=>{const l=o.reduce((i,c,m)=>{const f=c&&a.options[m]?[a.options[m]||a.options[m]]:[];return[...i,...f]},[]);r("update:modelValue",l)},{deep:!0}),e.onBeforeMount(()=>{}),(o,d)=>{const l=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,c)=>(e.openBlock(),e.createBlock(l,{key:c,modelValue:e.unref(n)[c],"onUpdate:modelValue":m=>e.unref(n)[c]=m,type:"checkbox",name:t.name,id:`${t.id}-${c}`,label:`${i.text||i}${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,A)])}}}),P={class:"radio-group"},H=["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:r}){const a=t;e.ref(a.options.map(o=>o.value===a.modelValue));function n(o){r("update:modelValue",o)}return e.onBeforeMount(()=>{}),(o,d)=>{const l=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",P,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,c)=>(e.openBlock(),e.createBlock(l,{key:c,type:"radio",name:t.name,id:`${t.id}-${c}`,value:i.value||i,label:`${i.text||i}${t.required?" *":""}`,checked:i.value?i.value===t.modelValue:i===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:m=>n(i)},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,H)])}}}),G={class:"input input-dropdown"},J={class:"dropdown"},X={class:"btn-group",role:"group"},Y=["id","disabled"],K=["aria-labelledby"],Q=["onClick"],W=["for"],Z=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:r}){const a=t;e.computed({get(){return a.modelValue},set(l){r("update:modelValue",l)}});function n(l){r("update:modelValue",l)}const o=e.computed(()=>[{text:"Please select"},...a.options.map(l=>typeof l=="string"?{value:l,text:l}:l)]),d=e.computed(()=>[...a.options].find(l=>JSON.stringify(l.value)===JSON.stringify(a.modelValue)));return(l,i)=>(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("div",J,[e.createElementVNode("div",X,[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,Y),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),(c,m)=>(e.openBlock(),e.createElementBlock("li",{key:m},[e.renderSlot(l.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>n(c.value),["prevent"])},e.toDisplayString(c.text),9,Q)])]))),128))],8,K)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,W)]))}}),_=["id","name","multiple","accept"],v={class:"form-input__input-group input-group"},ee=["value","id","name"],te=["for"],le=["for","innerHTML"],ne=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:r}){function a(d){const l=d.target&&d.target.files;l&&(n.splice(0,n.length),Array.from(l).forEach(i=>{n.push(i)}))}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,l)=>{console.log("file input",d),r("update:modelValue",d)},{deep:!0}),(d,l)=>(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:a,multiple:t.multiple,accept:t.accept},null,40,_),e.createElementVNode("div",v,[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,ee),e.renderSlot(d.$slots,"input-append",{},()=>[e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,te)])]),e.renderSlot(d.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,le)])]))}}),ae={class:"media-upload"},oe=["src"],de=["onClick"],ie=["for"];async function re(t){return await new Promise(r=>{let a=new FileReader;a.onload=()=>r(a.result),a.readAsDataURL(t)})}const ce=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:r}){const a=t,n=e.ref([]),o=e.ref([]),d=e.computed(()=>a.modelValue.length?a.modelValue:a.src?[{type:"",src:a.src}]:o.value);e.watch(()=>n,async(i,c)=>{o.value=await Promise.all(i.value.map(async m=>({src:await re(m),type:m.type})))},{deep:!0}),e.watch(()=>o,async(i,c)=>{const m=a.multiple?o.value:[o.value[0]];r("update:modelValue",m),a.multiple||r("update:src",o.value[0]&&o.value[0].src)},{deep:!0});function l(i){n.value.splice(i,1)}return(i,c)=>{const m=e.resolveComponent("svg-icon"),f=e.resolveComponent("file-input");return e.openBlock(),e.createElementBlock("div",ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(p,se)=>(e.openBlock(),e.createElementBlock("div",{key:p.src,class:"media-upload__thumbnail"},[e.createElementVNode("img",{src:p.src,class:"img-thumbnail rounded"},null,8,oe),e.createElementVNode("button",{onClick:e.withModifiers(ge=>l(se),["prevent"]),class:"btn btn--close"},[e.createVNode(m,{symbol:"x"})],8,de)]))),128)),e.createVNode(f,{modelValue:n.value,"onUpdate:modelValue":c[0]||(c[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,ie)])}}}),be="";s.BaseButton=x,s.CheckGroup=F,s.FileInput=ne,s.FormInput=O,s.InputDropdown=Z,s.InputTextarea=I,s.LoadingSpinner=V,s.MediaUpload=ce,s.RadioGroup=j,s.SvgIcon=g,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/components/input-textarea.vue.d.ts

@@ -0,0 +1,305 @@
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            label: string;
+            pattern: string;
+            required: boolean;
+            type: string;
+            checked: boolean;
+            modelValue: string;
+            variant: string;
+            name: string;
+            id: string;
+            disabled: boolean;
+            readOnly: boolean;
+            placeholder: string;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                type: StringConstructor;
+                default: string;
+            };
+            type: {
+                type: StringConstructor;
+                default: string;
+            };
+            name: {
+                type: StringConstructor;
+                default: () => string;
+            };
+            id: {
+                type: StringConstructor;
+                default: () => string;
+            };
+            label: {
+                type: StringConstructor;
+                default: string;
+            };
+            placeholder: {
+                type: StringConstructor;
+                default: string;
+            };
+            variant: {
+                type: StringConstructor;
+                default: string;
+            };
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            readOnly: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            required: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            maxlength: {
+                type: NumberConstructor;
+            };
+            pattern: {
+                type: StringConstructor;
+                default: null;
+            };
+            checked: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "pattern" | "required" | "type" | "checked" | "modelValue" | "variant" | "name" | "id" | "disabled" | "readOnly" | "placeholder">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "update:modelValue", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                type: StringConstructor;
+                default: string;
+            };
+            type: {
+                type: StringConstructor;
+                default: string;
+            };
+            name: {
+                type: StringConstructor;
+                default: () => string;
+            };
+            id: {
+                type: StringConstructor;
+                default: () => string;
+            };
+            label: {
+                type: StringConstructor;
+                default: string;
+            };
+            placeholder: {
+                type: StringConstructor;
+                default: string;
+            };
+            variant: {
+                type: StringConstructor;
+                default: string;
+            };
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            readOnly: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            required: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            maxlength: {
+                type: NumberConstructor;
+            };
+            pattern: {
+                type: StringConstructor;
+                default: null;
+            };
+            checked: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], string, {
+            label: string;
+            pattern: string;
+            required: boolean;
+            type: string;
+            checked: boolean;
+            modelValue: string;
+            variant: string;
+            name: string;
+            id: string;
+            disabled: boolean;
+            readOnly: boolean;
+            placeholder: string;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        modelValue: {
+            type: StringConstructor;
+            default: string;
+        };
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+        name: {
+            type: StringConstructor;
+            default: () => string;
+        };
+        id: {
+            type: StringConstructor;
+            default: () => string;
+        };
+        label: {
+            type: StringConstructor;
+            default: string;
+        };
+        placeholder: {
+            type: StringConstructor;
+            default: string;
+        };
+        variant: {
+            type: StringConstructor;
+            default: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        readOnly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maxlength: {
+            type: NumberConstructor;
+        };
+        pattern: {
+            type: StringConstructor;
+            default: null;
+        };
+        checked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & {
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxlength: {
+        type: NumberConstructor;
+    };
+    pattern: {
+        type: StringConstructor;
+        default: null;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", {
+    label: string;
+    pattern: string;
+    required: boolean;
+    type: string;
+    checked: boolean;
+    modelValue: string;
+    variant: string;
+    name: string;
+    id: string;
+    disabled: boolean;
+    readOnly: boolean;
+    placeholder: string;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        'input-prepend': (_: {}) => any;
+        'input-append': (_: {}) => any;
+        label: (_: {}) => any;
+    };
+});
+export default _default;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as SvgIcon } from "./components/svg-icon.vue";
 export { default as LoadingSpinner } from "./components/loading-spinner.vue";
 export { default as BaseButton } from "./components/base-button.vue";
 export { default as FormInput } from "./components/form-input.vue";
+export { default as InputTextarea } from "./components/input-textarea.vue";
 export { default as CheckGroup } from "./components/check-group.vue";
 export { default as RadioGroup } from "./components/radio-group.vue";
 export { default as InputDropdown } from "./components/input-dropdown.vue";

package/dist/style.css

@@ -1 +1 @@
-.svg-icon{display:inline-block}.svg-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.svg-icon--xxl svg{width:12rem;height:12rem}.svg-icon--xl svg{width:8rem;height:8rem}.svg-icon--large svg{width:4rem;height:4rem}.loading-spinner{min-width:2rem}.base-button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .2s ease;text-decoration:none;width:100%;margin:0;padding:1.036em 1.625em;appearance:none;outline:none;border:none;border-radius:.4375em;font-size:.875em;line-height:1.125em;text-transform:uppercase;font-weight:700}@media screen and (min-width: 600px){.base-button{width:auto}}.base-button .icon{width:16px;height:16px;margin-top:-1px}.base-button.s-collapsed>.caption{display:none}.base-button.s-pending{background-repeat:no-repeat;background-position:center center}.base-button.s-pending .caption{margin-left:25px;visibility:hidden}@media screen and (min-width: 600px){.base-button.s-pending{background-position:1.625em center}.base-button.s-pending .caption{visibility:visible}}.base-button[readonly],.base-button[disabled]{cursor:not-allowed}.form-input{display:flex;flex-direction:column}.form-input>*{order:2}.form-input__label{order:0}.form-input__input-group{flex-wrap:nowrap;order:1}.form-input__color-swatch{flex:0 0 3rem;display:block;border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden;border:thin solid var(--border-color);border-left:none}.form-input input[type=checkbox],.form-input input[type=radio]{flex:none}.form-input input[type=color]{display:block;height:100%;padding:0;border-width:0}.form-input input[type=color]::-webkit-color-swatch-wrapper{padding:0}.form-input input[type=color]::-webkit-color-swatch{border:none}.form-switch{flex-direction:row;padding-left:0;gap:1rem}.form-switch .form-check-input{width:2.5rem;height:1.3125rem;margin-left:0}:root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.media-upload__thumbnail{position:relative}.media-upload__thumbnail .btn{position:absolute;right:0;top:0}
+.svg-icon{display:inline-block}.svg-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.svg-icon--xxl svg{width:12rem;height:12rem}.svg-icon--xl svg{width:8rem;height:8rem}.svg-icon--large svg{width:4rem;height:4rem}.loading-spinner{min-width:2rem}.base-button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .2s ease;text-decoration:none;width:100%;margin:0;padding:1.036em 1.625em;appearance:none;outline:none;border:none;border-radius:.4375em;font-size:.875em;line-height:1.125em;text-transform:uppercase;font-weight:700}@media screen and (min-width: 600px){.base-button{width:auto}}.base-button .icon{width:16px;height:16px;margin-top:-1px}.base-button.s-collapsed>.caption{display:none}.base-button.s-pending{background-repeat:no-repeat;background-position:center center}.base-button.s-pending .caption{margin-left:25px;visibility:hidden}@media screen and (min-width: 600px){.base-button.s-pending{background-position:1.625em center}.base-button.s-pending .caption{visibility:visible}}.base-button[readonly],.base-button[disabled]{cursor:not-allowed}.form-input{display:flex;flex-direction:column}.form-input>*{order:2}.form-input__label{order:0}.form-input__input-group,.form-input>input,.form-input>select,.form-input>textarea{flex-wrap:nowrap;order:1}.form-input__color-swatch{flex:0 0 3rem;display:block;border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden;border:thin solid var(--border-color);border-left:none}.form-input input[type=checkbox],.form-input input[type=radio]{flex:none}.form-input input[type=color]{display:block;height:100%;padding:0;border-width:0}.form-input input[type=color]::-webkit-color-swatch-wrapper{padding:0}.form-input input[type=color]::-webkit-color-swatch{border:none}.form-switch{flex-direction:row;padding-left:0;gap:1rem}.form-switch .form-check-input{width:2.5rem;height:1.3125rem;margin-left:0}:root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.media-upload__thumbnail{position:relative}.media-upload__thumbnail .btn{position:absolute;right:0;top:0}

package/package.json

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