ablok-components 0.0.31 → 0.0.32

package/dist/ablok-components.es.js

@@ -1,8 +1,8 @@
-import { defineComponent as g, openBlock as u, createElementBlock as s, normalizeClass as v, createElementVNode as i, renderSlot as f, computed as p, resolveComponent as $, createBlock as k, createCommentVNode as S, unref as y, toDisplayString as h, withDirectives as x, isRef as V, vModelDynamic as I, vModelText as C, ref as N, watch as B, onBeforeMount as z, Fragment as w, renderList as q, createTextVNode as O, withModifiers as L, reactive as T, createVNode as A } from "vue";
-const D = {
+import { defineComponent as p, openBlock as u, createElementBlock as s, normalizeClass as v, createElementVNode as i, renderSlot as f, computed as g, resolveComponent as V, createBlock as w, createCommentVNode as k, unref as y, toDisplayString as h, withDirectives as M, isRef as C, vModelDynamic as N, vModelText as U, ref as S, watch as $, onBeforeMount as L, Fragment as B, renderList as x, createTextVNode as q, withModifiers as z, reactive as I, createVNode as T } from "vue";
+const A = {
   class: "icon",
   preserveAspectRatio: "xMaxYMin"
-}, U = ["xlink:href"], ye = /* @__PURE__ */ g({
+}, D = ["xlink:href"], he = /* @__PURE__ */ p({
   __name: "svg-icon",
   props: {
     basePath: {
@@ -23,23 +23,23 @@ const D = {
     }
   },
   setup(e) {
-    return (r, n) => (u(), s("i", {
+    return (r, a) => (u(), s("i", {
       class: v(["svg-icon", {
         [`svg-icon--${e.size}`]: e.size
       }])
     }, [
-      (u(), s("svg", D, [
+      (u(), s("svg", A, [
         i("use", {
           "xlink:href": `${e.basePath}#${e.prefix}${e.symbol}`,
           "xmlns:xlink": "http://www.w3.org/1999/xlink",
           x: "0",
           y: "0"
-        }, null, 8, U)
+        }, null, 8, D)
       ]))
     ], 2));
   }
 });
-const F = { class: "loading-spinner d-block" }, H = { class: "loading-spinner__animation" }, P = {
+const R = { class: "loading-spinner d-block" }, P = { class: "loading-spinner__animation" }, F = {
   class: "d-block",
   version: "1.1",
   id: "L9",
@@ -50,7 +50,7 @@ const F = { 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"
-}, E = ["fill"], R = /* @__PURE__ */ i("animateTransform", {
+}, H = ["fill"], E = /* @__PURE__ */ i("animateTransform", {
   attributeName: "transform",
   attributeType: "XML",
   type: "rotate",
@@ -58,9 +58,9 @@ const F = { class: "loading-spinner d-block" }, H = { class: "loading-spinner__a
   from: "0 50 50",
   to: "360 50 50",
   repeatCount: "indefinite"
-}, null, -1), G = [
-  R
-], be = /* @__PURE__ */ g({
+}, null, -1), j = [
+  E
+], ve = /* @__PURE__ */ p({
   __name: "loading-spinner",
   props: {
     color: {
@@ -69,20 +69,20 @@ const F = { class: "loading-spinner d-block" }, H = { class: "loading-spinner__a
     }
   },
   setup(e) {
-    return (r, n) => (u(), s("span", F, [
-      i("span", H, [
-        (u(), s("svg", P, [
+    return (r, a) => (u(), s("span", R, [
+      i("span", P, [
+        (u(), s("svg", F, [
           i("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"
-          }, G, 8, E)
+          }, j, 8, H)
         ]))
       ]),
       f(r.$slots, "default")
     ]));
   }
 });
-const J = ["type", "disabled", "href", "to"], ge = /* @__PURE__ */ g({
+const G = ["type", "disabled", "href", "to"], $e = /* @__PURE__ */ p({
   __name: "base-button",
   props: {
     type: null,
@@ -99,9 +99,9 @@ const J = ["type", "disabled", "href", "to"], ge = /* @__PURE__ */ g({
     fab: { type: Boolean }
   },
   setup(e) {
-    const r = e, n = p(() => r.caption && !r.fab);
-    return (a, d) => {
-      const l = $("svg-icon");
+    const r = e, a = g(() => r.caption && !r.fab);
+    return (n, d) => {
+      const l = V("svg-icon");
       return u(), s("button", {
         type: e.type,
         disabled: e.disabled,
@@ -119,28 +119,28 @@ const J = ["type", "disabled", "href", "to"], ge = /* @__PURE__ */ g({
           "x-small": e.size === "x-small"
         }])
       }, [
-        f(a.$slots, "default", {}, () => [
-          e.icon ? (u(), k(l, {
+        f(n.$slots, "default", {}, () => [
+          e.icon ? (u(), w(l, {
             key: 0,
             id: e.icon,
             class: "base-button__caption"
-          }, null, 8, ["id"])) : S("", !0),
-          y(n) ? (u(), s("span", {
+          }, null, 8, ["id"])) : k("", !0),
+          y(a) ? (u(), s("span", {
             key: 1,
             class: v(["base-button__caption", { "icon-padding": e.icon }])
-          }, h(e.caption), 3)) : S("", !0)
+          }, h(e.caption), 3)) : k("", !0)
         ])
-      ], 10, J);
+      ], 10, G);
     };
   }
 });
 function m() {
   return (new Date().valueOf() + Math.random()).toString(36);
 }
-const j = { class: "input-group form-input__input-group" }, X = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"], Y = {
+const J = { class: "input-group form-input__input-group" }, X = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"], Y = {
   key: 0,
   class: "form-input__color-swatch"
-}, K = ["name", "id", "disabled", "read-only", "required", "aria-label"], Q = ["for", "innerHTML"], pe = /* @__PURE__ */ g({
+}, K = ["name", "id", "disabled", "read-only", "required", "aria-label"], Q = ["for", "innerHTML"], Se = /* @__PURE__ */ p({
   __name: "form-input",
   props: {
     modelValue: {
@@ -197,9 +197,9 @@ const j = { class: "input-group form-input__input-group" }, X = ["type", "id", "
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    const n = e, a = p({
+    const a = e, n = g({
       get() {
-        return n.modelValue;
+        return a.modelValue;
       },
       set(d) {
         r("update:modelValue", d);
@@ -208,10 +208,10 @@ const j = { class: "input-group form-input__input-group" }, X = ["type", "id", "
     return (d, l) => (u(), s("div", {
       class: v(["form-input", `form-input--${e.type}`])
     }, [
-      i("div", j, [
+      i("div", J, [
         f(d.$slots, "input-prepend"),
-        x(i("input", {
-          "onUpdate:modelValue": l[0] || (l[0] = (t) => V(a) ? a.value = t : null),
+        M(i("input", {
+          "onUpdate:modelValue": l[0] || (l[0] = (t) => C(n) ? n.value = t : null),
           type: e.type === "color" ? "text" : e.type,
           id: e.id,
           name: e.name,
@@ -225,12 +225,12 @@ const j = { class: "input-group form-input__input-group" }, X = ["type", "id", "
           class: "form-control",
           "aria-label": e.label
         }, null, 8, X), [
-          [I, y(a)]
+          [N, y(n)]
         ]),
         f(d.$slots, "input-append", {}, () => [
           e.type === "color" ? (u(), s("span", Y, [
-            x(i("input", {
-              "onUpdate:modelValue": l[1] || (l[1] = (t) => V(a) ? a.value = t : null),
+            M(i("input", {
+              "onUpdate:modelValue": l[1] || (l[1] = (t) => C(n) ? n.value = t : null),
               type: "color",
               name: `${e.name}-color`,
               id: `${e.id}-color`,
@@ -240,9 +240,9 @@ const j = { class: "input-group form-input__input-group" }, X = ["type", "id", "
               class: "form-control",
               "aria-label": e.label
             }, null, 8, K), [
-              [C, y(a)]
+              [U, y(n)]
             ])
-          ])) : S("", !0)
+          ])) : k("", !0)
         ])
       ]),
       f(d.$slots, "label", {}, () => [
@@ -255,7 +255,7 @@ const j = { class: "input-group form-input__input-group" }, X = ["type", "id", "
     ], 2));
   }
 });
-const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
+const W = { class: "radio-group" }, Z = ["for"], Ve = /* @__PURE__ */ p({
   __name: "check-group",
   props: {
     modelValue: {
@@ -296,25 +296,25 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
   },
   emits: ["change", "update:modelValue"],
   setup(e, { emit: r }) {
-    const n = e, a = N([]);
-    return B(() => n.modelValue, (d, l) => {
-      a.value = n.options.map(
-        (t) => t.value ? n.modelValue.some((o) => o["value "] === t.value) : n.modelValue.some((o) => o === t)
+    const a = e, n = S([]);
+    return $(() => a.modelValue, (d, l) => {
+      n.value = a.options.map(
+        (t) => t.value ? a.modelValue.some((o) => o["value "] === t.value) : a.modelValue.some((o) => o === t)
       );
-    }, { immediate: !0 }), B(a, (d, l) => {
+    }, { immediate: !0 }), $(n, (d, l) => {
       const t = d.reduce((o, c, b) => {
-        const M = c && n.options[b] ? [n.options[b] || n.options[b]] : [];
-        return [...o, ...M];
+        const O = c && a.options[b] ? [a.options[b] || a.options[b]] : [];
+        return [...o, ...O];
       }, []);
       r("update:modelValue", t);
-    }, { deep: !0 }), z(() => {
+    }, { deep: !0 }), L(() => {
     }), (d, l) => {
-      const t = $("form-input");
+      const t = V("form-input");
       return u(), s("div", W, [
-        (u(!0), s(w, null, q(e.options, (o, c) => (u(), k(t, {
+        (u(!0), s(B, null, x(e.options, (o, c) => (u(), w(t, {
           key: c,
-          modelValue: y(a)[c],
-          "onUpdate:modelValue": (b) => y(a)[c] = b,
+          modelValue: y(n)[c],
+          "onUpdate:modelValue": (b) => y(n)[c] = b,
           type: "checkbox",
           name: e.name,
           id: `${e.id}-${c}`,
@@ -325,13 +325,13 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
         }, null, 8, ["modelValue", "onUpdate:modelValue", "name", "id", "label", "disabled", "read-only", "required"]))), 128)),
         i("label", { for: e.id }, [
           f(d.$slots, "label", {}, () => [
-            O(h(e.label), 1)
+            q(h(e.label), 1)
           ])
         ], 8, Z)
       ]);
     };
   }
-}), _ = { class: "radio-group" }, ee = ["for"], ve = /* @__PURE__ */ g({
+}), _ = { class: "radio-group" }, ee = ["for"], Be = /* @__PURE__ */ p({
   __name: "radio-group",
   props: {
     modelValue: {
@@ -372,16 +372,16 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
   },
   emits: ["change", "update:modelValue"],
   setup(e, { emit: r }) {
-    const n = e;
-    N(n.options.map((d) => d.value === n.modelValue));
-    function a(d) {
+    const a = e;
+    S(a.options.map((d) => d.value === a.modelValue));
+    function n(d) {
       r("update:modelValue", d);
     }
-    return z(() => {
+    return L(() => {
     }), (d, l) => {
-      const t = $("form-input");
+      const t = V("form-input");
       return u(), s("div", _, [
-        (u(!0), s(w, null, q(e.options, (o, c) => (u(), k(t, {
+        (u(!0), s(B, null, x(e.options, (o, c) => (u(), w(t, {
           key: c,
           type: "radio",
           name: e.name,
@@ -392,11 +392,11 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
           disabled: e.disabled,
           "read-only": e.readOnly,
           required: e.required,
-          onChange: (b) => a(o)
+          onChange: (b) => n(o)
         }, null, 8, ["name", "id", "value", "label", "checked", "disabled", "read-only", "required", "onChange"]))), 128)),
         i("label", { for: e.id }, [
           f(d.$slots, "label", {}, () => [
-            O(h(e.label), 1)
+            q(h(e.label), 1)
           ])
         ], 8, ee)
       ]);
@@ -405,7 +405,7 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
 }), te = { class: "input input-dropdown" }, le = { class: "dropdown" }, ae = {
   class: "btn-group",
   role: "group"
-}, ne = ["id", "disabled"], de = ["aria-labelledby"], oe = ["onClick"], ie = ["for"], $e = /* @__PURE__ */ g({
+}, ne = ["id", "disabled"], de = ["aria-labelledby"], oe = ["onClick"], ie = ["for"], xe = /* @__PURE__ */ p({
   __name: "input-dropdown",
   props: {
     modelValue: {
@@ -463,26 +463,26 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    const n = e;
-    p({
+    const a = e;
+    g({
       get() {
-        return n.modelValue;
+        return a.modelValue;
       },
       set(t) {
         r("update:modelValue", t);
       }
     });
-    function a(t) {
+    function n(t) {
       r("update:modelValue", t);
     }
-    const d = p(() => [
+    const d = g(() => [
       {
         text: "Please select"
       },
-      ...n.options.map(
+      ...a.options.map(
         (t) => typeof t == "string" ? { value: t, text: t } : t
       )
-    ]), l = p(() => [...n.options].find((t) => JSON.stringify(t.value) === JSON.stringify(n.modelValue)));
+    ]), l = g(() => [...a.options].find((t) => JSON.stringify(t.value) === JSON.stringify(a.modelValue)));
     return (t, o) => (u(), s("div", te, [
       i("div", le, [
         i("div", ae, [
@@ -503,11 +503,11 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
             class: "dropdown-menu",
             "aria-labelledby": e.id
           }, [
-            (u(!0), s(w, null, q(y(d), (c, b) => (u(), s("li", { key: b }, [
+            (u(!0), s(B, null, x(y(d), (c, b) => (u(), s("li", { key: b }, [
               f(t.$slots, "option", {}, () => [
                 i("a", {
                   class: "dropdown-item",
-                  onClick: L((M) => a(c.value), ["prevent"])
+                  onClick: z((O) => n(c.value), ["prevent"])
                 }, h(c.text), 9, oe)
               ])
             ]))), 128))
@@ -516,21 +516,17 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
       ]),
       i("label", { for: e.id }, [
         f(t.$slots, "label", {}, () => [
-          O(h(e.label), 1)
+          q(h(e.label), 1)
         ])
       ], 8, ie)
     ]));
   }
-}), ue = { class: "input-group" }, re = ["v-model", "id", "name"], se = ["name", "id", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"], ce = ["for"], fe = ["for", "innerHTML"], Se = /* @__PURE__ */ g({
+}), ue = ["id", "name", "multiple", "accept"], re = { class: "form-input__input-group input-group" }, se = ["value", "id", "name"], ce = ["for"], fe = ["for", "innerHTML"], ke = /* @__PURE__ */ p({
   __name: "file-input",
   props: {
     modelValue: {
-      type: [String, Number, Boolean],
-      default: ""
-    },
-    type: {
-      type: String,
-      default: "text"
+      type: Array,
+      default: []
     },
     name: {
       type: String,
@@ -564,88 +560,172 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
       type: Boolean,
       default: !1
     },
-    maxlength: {
-      type: Number
-    },
     pattern: {
       type: String,
       default: null
     },
-    checked: {
+    multiple: {
       type: Boolean,
       default: !1
+    },
+    accept: {
+      type: String
     }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    function n(l) {
+    function a(l) {
       const t = l.target && l.target.files;
-      t && (a.splice(0, a.length), Array.from(t).forEach((o) => {
-        a.push(o);
+      t && (n.splice(0, n.length), Array.from(t).forEach((o) => {
+        n.push(o);
       }));
     }
-    const a = T([]), d = p(() => a.map((l) => l.name));
-    return B(() => a, (l, t) => {
-      l !== t && r("update:modelValue", l);
-    }, { deep: !0 }), (l, t) => {
-      const o = $("svg-icon");
-      return u(), s("div", {
-        class: v(["file-input", "file-input--primary"])
-      }, [
-        i("div", ue, [
-          f(l.$slots, "input-prepend"),
-          i("input", {
-            "v-model": a,
-            type: "file",
-            id: e.id,
-            name: e.name,
-            onChange: n,
-            class: "d-none"
-          }, null, 40, re),
-          x(i("input", {
-            "onUpdate:modelValue": t[0] || (t[0] = (c) => V(d) ? d.value = c : null),
-            type: "text",
-            name: `${e.name}--text`,
-            id: `${e.name}--text`,
-            placeholder: e.placeholder,
-            pattern: e.pattern,
-            disabled: e.disabled,
-            "read-only": e.readOnly,
-            required: e.required,
-            maxlength: e.maxlength,
-            checked: e.checked,
-            class: "form-control",
-            "aria-label": e.label
-          }, null, 8, se), [
-            [C, y(d)]
-          ]),
-          f(l.$slots, "input-append", {}, () => [
-            i("label", {
-              for: e.id,
-              class: "input-group-text"
-            }, [
-              A(o, { symbol: "upload" })
-            ], 8, ce)
-          ])
-        ]),
-        f(l.$slots, "label", {}, () => [
+    const n = I([]), d = g(() => n && n.map((l) => l.name));
+    return g(() => n.map((l) => URL.createObjectURL(l))), $(() => n, (l, t) => {
+      console.log("file input", l), r("update:modelValue", l);
+    }, { deep: !0 }), (l, t) => (u(), s("div", {
+      class: v(["form-input file-input", "file-input--primary"])
+    }, [
+      i("input", {
+        type: "file",
+        id: e.id,
+        name: e.name,
+        class: "d-none",
+        onChange: a,
+        multiple: e.multiple,
+        accept: e.accept
+      }, null, 40, ue),
+      i("div", re, [
+        f(l.$slots, "input-prepend"),
+        i("input", {
+          type: "text",
+          value: y(d),
+          id: e.id,
+          name: e.name,
+          class: "form-control"
+        }, null, 8, se),
+        f(l.$slots, "input-append", {}, () => [
           i("label", {
             for: e.id,
-            class: "form-input__label",
-            innerHTML: `${e.label}${e.required ? " *" : ""}`
-          }, null, 8, fe)
+            class: "btn btn-outline-dark"
+          }, " Select Image ", 8, ce)
         ])
+      ]),
+      f(l.$slots, "label", {}, () => [
+        i("label", {
+          for: e.id,
+          class: "form-input__label",
+          innerHTML: `${e.label}${e.required ? " *" : ""}`
+        }, null, 8, fe)
+      ])
+    ]));
+  }
+}), me = { class: "media-upload" }, ye = ["src"], pe = ["for"];
+async function be(e) {
+  return await new Promise((r) => {
+    let a = new FileReader();
+    a.onload = () => r(a.result), a.readAsDataURL(e);
+  });
+}
+const we = /* @__PURE__ */ p({
+  __name: "media-upload",
+  props: {
+    modelValue: {
+      type: Array,
+      default: []
+    },
+    name: {
+      type: String,
+      default: () => m()
+    },
+    id: {
+      type: String,
+      default: () => m()
+    },
+    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"],
+  setup(e, { emit: r }) {
+    const a = S([]), n = S([]);
+    return $(() => a, async (d, l) => {
+      n.value = await Promise.all(
+        d.value.map(async (t) => ({
+          src: await be(t),
+          type: t.type
+        }))
+      );
+    }, { deep: !0 }), $(() => n, async (d, l) => {
+      r("update:modelValue", n.value);
+    }, { deep: !0 }), (d, l) => {
+      const t = V("file-input");
+      return u(), s("div", me, [
+        (u(!0), s(B, null, x(n.value, (o) => (u(), s("div", {
+          key: o.src
+        }, [
+          i("img", {
+            src: o.src,
+            class: "img-fluid rounded"
+          }, null, 8, ye)
+        ]))), 128)),
+        T(t, {
+          modelValue: a.value,
+          "onUpdate:modelValue": l[0] || (l[0] = (o) => a.value = o),
+          id: e.id,
+          name: e.name,
+          accept: e.accept,
+          class: "d-none"
+        }, null, 8, ["modelValue", "id", "name", "accept"]),
+        i("label", {
+          for: e.id,
+          class: "btn btn-outline-dark"
+        }, " Select Image ", 8, pe)
       ]);
     };
   }
 });
 export {
-  ge as BaseButton,
-  he as CheckGroup,
-  Se as FileInput,
-  pe as FormInput,
-  $e as InputDropdown,
-  be as LoadingSpinner,
-  ve as RadioGroup,
-  ye as SvgIcon
+  $e as BaseButton,
+  Ve as CheckGroup,
+  ke as FileInput,
+  Se as FormInput,
+  xe as InputDropdown,
+  ve as LoadingSpinner,
+  we as MediaUpload,
+  Be as RadioGroup,
+  he as SvgIcon
 };

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"},p=["xlink:href"],b=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,o)=>(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,p)]))],2))}}),Z="",g={class:"loading-spinner d-block"},h={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"],$=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],S=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(r,o)=>(e.openBlock(),e.createElementBlock("span",g,[e.createElementVNode("span",h,[(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"},$,8,k)]))]),e.renderSlot(r.$slots,"default")]))}}),v="",V=["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,o=e.computed(()=>r.caption&&!r.fab);return(a,d)=>{const n=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(n,{key:0,id:t.icon,class:"base-button__caption"},null,8,["id"])):e.createCommentVNode("",!0),e.unref(o)?(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,V)}}}),ee="";function m(){return(new Date().valueOf()+Math.random()).toString(36)}const E={class:"input-group form-input__input-group"},N=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],w={key:0,class:"form-input__color-swatch"},C=["name","id","disabled","read-only","required","aria-label"],q=["for","innerHTML"],M=e.defineComponent({__name:"form-input",props:{modelValue:{type:[String,Number,Boolean],default:""},type:{type:String,default:"text"},name:{type:String,default:()=>m()},id:{type:String,default:()=>m()},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 o=t,a=e.computed({get(){return o.modelValue},set(d){r("update:modelValue",d)}});return(d,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",E,[e.renderSlot(d.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":n[0]||(n[0]=l=>e.isRef(a)?a.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:"form-control","aria-label":t.label},null,8,N),[[e.vModelDynamic,e.unref(a)]]),e.renderSlot(d.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",w,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":n[1]||(n[1]=l=>e.isRef(a)?a.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,C),[[e.vModelText,e.unref(a)]])])):e.createCommentVNode("",!0)])]),e.renderSlot(d.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,q)])],2))}}),te="",O={class:"radio-group"},z=["for"],T=e.defineComponent({__name:"check-group",props:{modelValue:{default:[]},options:{type:Array,default:[]},name:{type:String,default:()=>m()},id:{type:String,default:()=>m()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:r}){const o=t,a=e.ref([]);return e.watch(()=>o.modelValue,(d,n)=>{a.value=o.options.map(l=>l.value?o.modelValue.some(i=>i["value "]===l.value):o.modelValue.some(i=>i===l))},{immediate:!0}),e.watch(a,(d,n)=>{const l=d.reduce((i,s,u)=>{const f=s&&o.options[u]?[o.options[u]||o.options[u]]:[];return[...i,...f]},[]);r("update:modelValue",l)},{deep:!0}),e.onBeforeMount(()=>{}),(d,n)=>{const l=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,s)=>(e.openBlock(),e.createBlock(l,{key:s,modelValue:e.unref(a)[s],"onUpdate:modelValue":u=>e.unref(a)[s]=u,type:"checkbox",name:t.name,id:`${t.id}-${s}`,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(d.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,z)])}}}),D={class:"radio-group"},L=["for"],I=e.defineComponent({__name:"radio-group",props:{modelValue:{default:!1},options:{type:Array,default:[]},name:{type:String,default:()=>m()},id:{type:String,default:()=>m()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:r}){const o=t;e.ref(o.options.map(d=>d.value===o.modelValue));function a(d){r("update:modelValue",d)}return e.onBeforeMount(()=>{}),(d,n)=>{const l=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,s)=>(e.openBlock(),e.createBlock(l,{key:s,type:"radio",name:t.name,id:`${t.id}-${s}`,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:u=>a(i)},null,8,["name","id","value","label","checked","disabled","read-only","required","onChange"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(d.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,L)])}}}),A={class:"input input-dropdown"},F={class:"dropdown"},P={class:"btn-group",role:"group"},R=["id","disabled"],U=["aria-labelledby"],H=["onClick"],j=["for"],G=e.defineComponent({__name:"input-dropdown",props:{modelValue:{type:[String,Number,Boolean,Object],default:""},name:{type:String,default:()=>m()},id:{type:String,default:()=>m()},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 o=t;e.computed({get(){return o.modelValue},set(l){r("update:modelValue",l)}});function a(l){r("update:modelValue",l)}const d=e.computed(()=>[{text:"Please select"},...o.options.map(l=>typeof l=="string"?{value:l,text:l}:l)]),n=e.computed(()=>[...o.options].find(l=>JSON.stringify(l.value)===JSON.stringify(o.modelValue)));return(l,i)=>(e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("div",F,[e.createElementVNode("div",P,[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(n)?e.unref(n).text:t.placeholder),11,R),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(s,u)=>(e.openBlock(),e.createElementBlock("li",{key:u},[e.renderSlot(l.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>a(s.value),["prevent"])},e.toDisplayString(s.text),9,H)])]))),128))],8,U)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,j)]))}}),J={class:"input-group"},X=["v-model","id","name"],Y=["name","id","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],K=["for"],Q=["for","innerHTML"],W=e.defineComponent({__name:"file-input",props:{modelValue:{type:[String,Number,Boolean],default:""},type:{type:String,default:"text"},name:{type:String,default:()=>m()},id:{type:String,default:()=>m()},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}){function o(n){const l=n.target&&n.target.files;l&&(a.splice(0,a.length),Array.from(l).forEach(i=>{a.push(i)}))}const a=e.reactive([]),d=e.computed(()=>a.map(n=>n.name));return e.watch(()=>a,(n,l)=>{n!==l&&r("update:modelValue",n)},{deep:!0}),(n,l)=>{const i=e.resolveComponent("svg-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["file-input","file-input--primary"])},[e.createElementVNode("div",J,[e.renderSlot(n.$slots,"input-prepend"),e.createElementVNode("input",{"v-model":a,type:"file",id:t.id,name:t.name,onChange:o,class:"d-none"},null,40,X),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":l[0]||(l[0]=s=>e.isRef(d)?d.value=s:null),type:"text",name:`${t.name}--text`,id:`${t.name}--text`,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,checked:t.checked,class:"form-control","aria-label":t.label},null,8,Y),[[e.vModelText,e.unref(d)]]),e.renderSlot(n.$slots,"input-append",{},()=>[e.createElementVNode("label",{for:t.id,class:"input-group-text"},[e.createVNode(i,{symbol:"upload"})],8,K)])]),e.renderSlot(n.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,Q)])])}}}),le="";c.BaseButton=x,c.CheckGroup=T,c.FileInput=W,c.FormInput=M,c.InputDropdown=G,c.LoadingSpinner=S,c.RadioGroup=I,c.SvgIcon=b,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 p={class:"icon",preserveAspectRatio:"xMaxYMin"},y=["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",p,[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,y)]))],2))}}),le="",b={class:"loading-spinner d-block"},h={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)],$=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(r,a)=>(e.openBlock(),e.createElementBlock("span",b,[e.createElementVNode("span",h,[(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(r.$slots,"default")]))}}),ae="",V=["type","disabled","href","to"],E=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(o,d)=>{const n=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(o.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(n,{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,V)}}}),oe="";function s(){return(new Date().valueOf()+Math.random()).toString(36)}const w={class:"input-group form-input__input-group"},N=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],x={key:0,class:"form-input__color-swatch"},C=["name","id","disabled","read-only","required","aria-label"],q=["for","innerHTML"],M=e.defineComponent({__name:"form-input",props:{modelValue:{type:[String,Number,Boolean],default:""},type:{type:String,default:"text"},name:{type:String,default:()=>s()},id:{type:String,default:()=>s()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number},pattern:{type:String,default:null},checked:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:r}){const a=t,o=e.computed({get(){return a.modelValue},set(d){r("update:modelValue",d)}});return(d,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",w,[e.renderSlot(d.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":n[0]||(n[0]=l=>e.isRef(o)?o.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:"form-control","aria-label":t.label},null,8,N),[[e.vModelDynamic,e.unref(o)]]),e.renderSlot(d.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",x,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":n[1]||(n[1]=l=>e.isRef(o)?o.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,C),[[e.vModelText,e.unref(o)]])])):e.createCommentVNode("",!0)])]),e.renderSlot(d.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,q)])],2))}}),de="",O={class:"radio-group"},z=["for"],L=e.defineComponent({__name:"check-group",props:{modelValue:{default:[]},options:{type:Array,default:[]},name:{type:String,default:()=>s()},id:{type:String,default:()=>s()},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,o=e.ref([]);return e.watch(()=>a.modelValue,(d,n)=>{o.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(o,(d,n)=>{const l=d.reduce((i,m,u)=>{const f=m&&a.options[u]?[a.options[u]||a.options[u]]:[];return[...i,...f]},[]);r("update:modelValue",l)},{deep:!0}),e.onBeforeMount(()=>{}),(d,n)=>{const l=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,m)=>(e.openBlock(),e.createBlock(l,{key:m,modelValue:e.unref(o)[m],"onUpdate:modelValue":u=>e.unref(o)[m]=u,type:"checkbox",name:t.name,id:`${t.id}-${m}`,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(d.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,z)])}}}),T={class:"radio-group"},D=["for"],U=e.defineComponent({__name:"radio-group",props:{modelValue:{default:!1},options:{type:Array,default:[]},name:{type:String,default:()=>s()},id:{type:String,default:()=>s()},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(d=>d.value===a.modelValue));function o(d){r("update:modelValue",d)}return e.onBeforeMount(()=>{}),(d,n)=>{const l=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",T,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,m)=>(e.openBlock(),e.createBlock(l,{key:m,type:"radio",name:t.name,id:`${t.id}-${m}`,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:u=>o(i)},null,8,["name","id","value","label","checked","disabled","read-only","required","onChange"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(d.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,D)])}}}),A={class:"input input-dropdown"},I={class:"dropdown"},F={class:"btn-group",role:"group"},R=["id","disabled"],P=["aria-labelledby"],j=["onClick"],H=["for"],G=e.defineComponent({__name:"input-dropdown",props:{modelValue:{type:[String,Number,Boolean,Object],default:""},name:{type:String,default:()=>s()},id:{type:String,default:()=>s()},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 o(l){r("update:modelValue",l)}const d=e.computed(()=>[{text:"Please select"},...a.options.map(l=>typeof l=="string"?{value:l,text:l}:l)]),n=e.computed(()=>[...a.options].find(l=>JSON.stringify(l.value)===JSON.stringify(a.modelValue)));return(l,i)=>(e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("div",I,[e.createElementVNode("div",F,[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(n)?e.unref(n).text:t.placeholder),11,R),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(m,u)=>(e.openBlock(),e.createElementBlock("li",{key:u},[e.renderSlot(l.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>o(m.value),["prevent"])},e.toDisplayString(m.text),9,j)])]))),128))],8,P)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,H)]))}}),J=["id","name","multiple","accept"],X={class:"form-input__input-group input-group"},Y=["value","id","name"],K=["for"],Q=["for","innerHTML"],W=e.defineComponent({__name:"file-input",props:{modelValue:{type:Array,default:[]},name:{type:String,default:()=>s()},id:{type:String,default:()=>s()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},pattern:{type:String,default:null},multiple:{type:Boolean,default:!1},accept:{type:String}},emits:["update:modelValue"],setup(t,{emit:r}){function a(n){const l=n.target&&n.target.files;l&&(o.splice(0,o.length),Array.from(l).forEach(i=>{o.push(i)}))}const o=e.reactive([]),d=e.computed(()=>o&&o.map(n=>n.name));return e.computed(()=>o.map(n=>URL.createObjectURL(n))),e.watch(()=>o,(n,l)=>{console.log("file input",n),r("update:modelValue",n)},{deep:!0}),(n,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,J),e.createElementVNode("div",X,[e.renderSlot(n.$slots,"input-prepend"),e.createElementVNode("input",{type:"text",value:e.unref(d),id:t.id,name:t.name,class:"form-control"},null,8,Y),e.renderSlot(n.$slots,"input-append",{},()=>[e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,K)])]),e.renderSlot(n.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,Q)])]))}}),Z={class:"media-upload"},_=["src"],v=["for"];async function ee(t){return await new Promise(r=>{let a=new FileReader;a.onload=()=>r(a.result),a.readAsDataURL(t)})}const te=e.defineComponent({__name:"media-upload",props:{modelValue:{type:Array,default:[]},name:{type:String,default:()=>s()},id:{type:String,default:()=>s()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},pattern:{type:String,default:null},multiple:{type:Boolean,default:!1},accept:{type:String,default:"image/*"}},emits:["update:modelValue"],setup(t,{emit:r}){const a=e.ref([]),o=e.ref([]);return e.watch(()=>a,async(d,n)=>{o.value=await Promise.all(d.value.map(async l=>({src:await ee(l),type:l.type})))},{deep:!0}),e.watch(()=>o,async(d,n)=>{r("update:modelValue",o.value)},{deep:!0}),(d,n)=>{const l=e.resolveComponent("file-input");return e.openBlock(),e.createElementBlock("div",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,i=>(e.openBlock(),e.createElementBlock("div",{key:i.src},[e.createElementVNode("img",{src:i.src,class:"img-fluid rounded"},null,8,_)]))),128)),e.createVNode(l,{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=i=>a.value=i),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,v)])}}});c.BaseButton=E,c.CheckGroup=L,c.FileInput=W,c.FormInput=M,c.InputDropdown=G,c.LoadingSpinner=$,c.MediaUpload=te,c.RadioGroup=U,c.SvgIcon=g,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

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

@@ -6,23 +6,31 @@ declare const _default: {
             label: string;
             pattern: string;
             required: boolean;
-            type: string;
-            checked: boolean;
-            modelValue: string | number | boolean;
+            modelValue: File[][];
             variant: string;
             name: string;
             id: string;
             disabled: boolean;
             readOnly: boolean;
             placeholder: string;
+            multiple: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
-                type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
-                default: string;
-            };
-            type: {
-                type: StringConstructor;
-                default: string;
+                type: {
+                    (arrayLength: number): File[][];
+                    (...items: File[][]): File[][];
+                    new (arrayLength: number): File[][];
+                    new (...items: File[][]): File[][];
+                    isArray(arg: any): arg is any[];
+                    readonly prototype: any[];
+                    from<T>(arrayLike: ArrayLike<T>): T[];
+                    from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+                    from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+                    from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+                    of<T_4>(...items: T_4[]): T_4[];
+                    readonly [Symbol.species]: ArrayConstructor;
+                };
+                default: never[];
             };
             name: {
                 type: StringConstructor;
@@ -56,20 +64,20 @@ declare const _default: {
                 type: BooleanConstructor;
                 default: boolean;
             };
-            maxlength: {
-                type: NumberConstructor;
-            };
             pattern: {
                 type: StringConstructor;
                 default: null;
             };
-            checked: {
+            multiple: {
                 type: BooleanConstructor;
                 default: boolean;
             };
+            accept: {
+                type: StringConstructor;
+            };
         }>> & {
             "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">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "pattern" | "required" | "modelValue" | "variant" | "name" | "id" | "disabled" | "readOnly" | "placeholder" | "multiple">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -85,12 +93,21 @@ declare const _default: {
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
-                type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
-                default: string;
-            };
-            type: {
-                type: StringConstructor;
-                default: string;
+                type: {
+                    (arrayLength: number): File[][];
+                    (...items: File[][]): File[][];
+                    new (arrayLength: number): File[][];
+                    new (...items: File[][]): File[][];
+                    isArray(arg: any): arg is any[];
+                    readonly prototype: any[];
+                    from<T>(arrayLike: ArrayLike<T>): T[];
+                    from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+                    from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+                    from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+                    of<T_4>(...items: T_4[]): T_4[];
+                    readonly [Symbol.species]: ArrayConstructor;
+                };
+                default: never[];
             };
             name: {
                 type: StringConstructor;
@@ -124,32 +141,31 @@ declare const _default: {
                 type: BooleanConstructor;
                 default: boolean;
             };
-            maxlength: {
-                type: NumberConstructor;
-            };
             pattern: {
                 type: StringConstructor;
                 default: null;
             };
-            checked: {
+            multiple: {
                 type: BooleanConstructor;
                 default: boolean;
             };
+            accept: {
+                type: StringConstructor;
+            };
         }>> & {
             "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 | number | boolean;
+            modelValue: File[][];
             variant: string;
             name: string;
             id: string;
             disabled: boolean;
             readOnly: boolean;
             placeholder: string;
+            multiple: boolean;
         }> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -172,12 +188,21 @@ declare const _default: {
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
-            type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
-            default: string;
-        };
-        type: {
-            type: StringConstructor;
-            default: string;
+            type: {
+                (arrayLength: number): File[][];
+                (...items: File[][]): File[][];
+                new (arrayLength: number): File[][];
+                new (...items: File[][]): File[][];
+                isArray(arg: any): arg is any[];
+                readonly prototype: any[];
+                from<T>(arrayLike: ArrayLike<T>): T[];
+                from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+                from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+                from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+                of<T_4>(...items: T_4[]): T_4[];
+                readonly [Symbol.species]: ArrayConstructor;
+            };
+            default: never[];
         };
         name: {
             type: StringConstructor;
@@ -211,17 +236,17 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
-        maxlength: {
-            type: NumberConstructor;
-        };
         pattern: {
             type: StringConstructor;
             default: null;
         };
-        checked: {
+        multiple: {
             type: BooleanConstructor;
             default: boolean;
         };
+        accept: {
+            type: StringConstructor;
+        };
     }>> & {
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
@@ -230,12 +255,21 @@ declare const _default: {
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
+        type: {
+            (arrayLength: number): File[][];
+            (...items: File[][]): File[][];
+            new (arrayLength: number): File[][];
+            new (...items: File[][]): File[][];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
     };
     name: {
         type: StringConstructor;
@@ -269,32 +303,31 @@ declare const _default: {
         type: BooleanConstructor;
         default: boolean;
     };
-    maxlength: {
-        type: NumberConstructor;
-    };
     pattern: {
         type: StringConstructor;
         default: null;
     };
-    checked: {
+    multiple: {
         type: BooleanConstructor;
         default: boolean;
     };
+    accept: {
+        type: StringConstructor;
+    };
 }>> & {
     "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 | number | boolean;
+    modelValue: File[][];
     variant: string;
     name: string;
     id: string;
     disabled: boolean;
     readOnly: boolean;
     placeholder: string;
+    multiple: boolean;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         'input-prepend': (_: {}) => any;

package/dist/components/media-upload.vue.d.ts

@@ -0,0 +1,342 @@
+export declare function fileToDataUrl(file: File): Promise<any>;
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            label: string;
+            pattern: string;
+            required: boolean;
+            modelValue: File[][];
+            variant: string;
+            name: string;
+            id: string;
+            disabled: boolean;
+            readOnly: boolean;
+            placeholder: string;
+            multiple: boolean;
+            accept: string;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                type: {
+                    (arrayLength: number): File[][];
+                    (...items: File[][]): File[][];
+                    new (arrayLength: number): File[][];
+                    new (...items: File[][]): File[][];
+                    isArray(arg: any): arg is any[];
+                    readonly prototype: any[];
+                    from<T>(arrayLike: ArrayLike<T>): T[];
+                    from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+                    from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+                    from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+                    of<T_4>(...items: T_4[]): T_4[];
+                    readonly [Symbol.species]: ArrayConstructor;
+                };
+                default: never[];
+            };
+            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;
+            };
+            pattern: {
+                type: StringConstructor;
+                default: null;
+            };
+            multiple: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            accept: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "pattern" | "required" | "modelValue" | "variant" | "name" | "id" | "disabled" | "readOnly" | "placeholder" | "multiple" | "accept">;
+        $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: {
+                    (arrayLength: number): File[][];
+                    (...items: File[][]): File[][];
+                    new (arrayLength: number): File[][];
+                    new (...items: File[][]): File[][];
+                    isArray(arg: any): arg is any[];
+                    readonly prototype: any[];
+                    from<T>(arrayLike: ArrayLike<T>): T[];
+                    from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+                    from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+                    from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+                    of<T_4>(...items: T_4[]): T_4[];
+                    readonly [Symbol.species]: ArrayConstructor;
+                };
+                default: never[];
+            };
+            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;
+            };
+            pattern: {
+                type: StringConstructor;
+                default: null;
+            };
+            multiple: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            accept: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], string, {
+            label: string;
+            pattern: string;
+            required: boolean;
+            modelValue: File[][];
+            variant: string;
+            name: string;
+            id: string;
+            disabled: boolean;
+            readOnly: boolean;
+            placeholder: string;
+            multiple: boolean;
+            accept: 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: {
+                (arrayLength: number): File[][];
+                (...items: File[][]): File[][];
+                new (arrayLength: number): File[][];
+                new (...items: File[][]): File[][];
+                isArray(arg: any): arg is any[];
+                readonly prototype: any[];
+                from<T>(arrayLike: ArrayLike<T>): T[];
+                from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+                from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+                from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+                of<T_4>(...items: T_4[]): T_4[];
+                readonly [Symbol.species]: ArrayConstructor;
+            };
+            default: never[];
+        };
+        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;
+        };
+        pattern: {
+            type: StringConstructor;
+            default: null;
+        };
+        multiple: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        accept: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & {
+        "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: {
+            (arrayLength: number): File[][];
+            (...items: File[][]): File[][];
+            new (arrayLength: number): File[][];
+            new (...items: File[][]): File[][];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    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;
+    };
+    pattern: {
+        type: StringConstructor;
+        default: null;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    accept: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", {
+    label: string;
+    pattern: string;
+    required: boolean;
+    modelValue: File[][];
+    variant: string;
+    name: string;
+    id: string;
+    disabled: boolean;
+    readOnly: boolean;
+    placeholder: string;
+    multiple: boolean;
+    accept: string;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {};
+});
+export default _default;

package/dist/index.d.ts

@@ -6,3 +6,4 @@ 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";
 export { default as FileInput } from "./components/file-input.vue";
+export { default as MediaUpload } from "./components/media-upload.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-flow: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=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}:root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.file-input{display:flex;flex-flow:column}.file-input>*{order:2}.file-input__label{order:0}.file-input__input-group{flex-wrap:nowrap;order:1}.file-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}.file-input input[type=color]{display:block;height:100%;padding:0;border-width:0}.file-input input[type=color]::-webkit-color-swatch-wrapper{padding:0}.file-input input[type=color]::-webkit-color-swatch{border:none}
+.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}:root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.form-input{display:flex;flex-flow: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=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}

package/package.json

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