ablok-components 0.0.41 → 0.0.44

package/dist/ablok-components.es.js

@@ -1,8 +1,8 @@
-import { defineComponent as g, openBlock as r, createElementBlock as c, normalizeClass as b, createElementVNode as u, renderSlot as m, computed as h, createBlock as C, resolveDynamicComponent as D, unref as p, withCtx as A, createTextVNode as V, toDisplayString as v, resolveComponent as S, createCommentVNode as w, withDirectives as q, isRef as O, vModelDynamic as H, vModelText as U, ref as x, watch as $, onBeforeMount as L, Fragment as M, renderList as N, withModifiers as T, reactive as P, createVNode as z } from "vue";
+import { defineComponent as g, openBlock as r, createElementBlock as c, normalizeClass as b, createElementVNode as i, renderSlot as m, computed as v, createBlock as C, resolveDynamicComponent as A, unref as p, withCtx as F, createTextVNode as k, toDisplayString as $, resolveComponent as x, createCommentVNode as w, withDirectives as q, isRef as O, vModelDynamic as P, vModelText as z, ref as V, watch as S, onBeforeMount as U, Fragment as M, renderList as N, withModifiers as I, reactive as H, createVNode as L } from "vue";
 const R = {
   class: "icon",
   preserveAspectRatio: "xMaxYMin"
-}, F = ["xlink:href"], Ce = /* @__PURE__ */ g({
+}, E = ["xlink:href"], Ce = /* @__PURE__ */ g({
   __name: "svg-icon",
   props: {
     basePath: {
@@ -23,23 +23,23 @@ const R = {
     }
   },
   setup(e) {
-    return (o, t) => (r(), c("i", {
+    return (s, l) => (r(), c("i", {
       class: b(["svg-icon", {
         [`svg-icon--${e.size}`]: e.size
       }])
     }, [
       (r(), c("svg", R, [
-        u("use", {
+        i("use", {
           "xlink:href": `${e.basePath}#${e.prefix}${e.symbol}`,
           "xmlns:xlink": "http://www.w3.org/1999/xlink",
           x: "0",
           y: "0"
-        }, null, 8, F)
+        }, null, 8, E)
       ]))
     ], 2));
   }
 });
-const E = { class: "loading-spinner d-block" }, j = { class: "loading-spinner__animation" }, G = {
+const j = { class: "loading-spinner d-block" }, G = { class: "loading-spinner__animation" }, J = {
   class: "d-block",
   version: "1.1",
   id: "L9",
@@ -50,7 +50,7 @@ const E = { class: "loading-spinner d-block" }, j = { class: "loading-spinner__a
   viewBox: "0 0 100 100",
   "enable-background": "new 0 0 0 0",
   "xml:space": "preserve"
-}, J = ["fill"], X = /* @__PURE__ */ u("animateTransform", {
+}, X = ["fill"], Y = /* @__PURE__ */ i("animateTransform", {
   attributeName: "transform",
   attributeType: "XML",
   type: "rotate",
@@ -58,8 +58,8 @@ const E = { class: "loading-spinner d-block" }, j = { class: "loading-spinner__a
   from: "0 50 50",
   to: "360 50 50",
   repeatCount: "indefinite"
-}, null, -1), Y = [
-  X
+}, null, -1), K = [
+  Y
 ], Me = /* @__PURE__ */ g({
   __name: "loading-spinner",
   props: {
@@ -69,16 +69,16 @@ const E = { class: "loading-spinner d-block" }, j = { class: "loading-spinner__a
     }
   },
   setup(e) {
-    return (o, t) => (r(), c("span", E, [
-      u("span", j, [
-        (r(), c("svg", G, [
-          u("path", {
+    return (s, l) => (r(), c("span", j, [
+      i("span", G, [
+        (r(), c("svg", J, [
+          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"
-          }, Y, 8, J)
+          }, K, 8, X)
         ]))
       ]),
-      m(o.$slots, "default")
+      m(s.$slots, "default")
     ]));
   }
 });
@@ -92,19 +92,19 @@ const Ne = /* @__PURE__ */ g({
     className: null
   },
   setup(e) {
-    const o = e, t = h(() => o.tag || "p");
-    return (d, a) => (r(), C(D(p(t)), {
+    const s = e, l = v(() => s.tag || "p");
+    return (d, t) => (r(), C(A(p(l)), {
       class: b(["headline", `headline--${e.size}${e.className || ""}`])
     }, {
-      default: A(() => [
+      default: F(() => [
         m(d.$slots, "default", {}, () => [
-          V(v(e.text), 1)
+          k($(e.text), 1)
         ])
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Ue = /* @__PURE__ */ g({
+}), Te = /* @__PURE__ */ g({
   __name: "base-paragraph",
   props: {
     size: null,
@@ -113,15 +113,15 @@ const Ne = /* @__PURE__ */ g({
     className: null
   },
   setup(e) {
-    return (o, t) => (r(), c("p", {
+    return (s, l) => (r(), c("p", {
       class: b(["base-paragraph", `base-paragraph--${e.size}${e.className || ""}`])
     }, [
-      m(o.$slots, "default", {}, () => [
-        V(v(e.text), 1)
+      m(s.$slots, "default", {}, () => [
+        k($(e.text), 1)
       ])
     ], 2));
   }
-}), K = ["type", "disabled", "href", "to"], ze = /* @__PURE__ */ g({
+}), Q = ["type", "disabled", "href", "to"], ze = /* @__PURE__ */ g({
   __name: "base-button",
   props: {
     type: null,
@@ -138,9 +138,9 @@ const Ne = /* @__PURE__ */ g({
     fab: { type: Boolean }
   },
   setup(e) {
-    const o = e, t = h(() => o.caption && !o.fab);
-    return (d, a) => {
-      const i = S("svg-icon");
+    const s = e, l = v(() => s.caption && !s.fab);
+    return (d, t) => {
+      const o = x("svg-icon");
       return r(), c("button", {
         type: e.type,
         disabled: e.disabled,
@@ -159,27 +159,27 @@ const Ne = /* @__PURE__ */ g({
         }])
       }, [
         m(d.$slots, "default", {}, () => [
-          e.icon ? (r(), C(i, {
+          e.icon ? (r(), C(o, {
             key: 0,
             id: e.icon,
             class: "base-button__caption"
           }, null, 8, ["id"])) : w("", !0),
-          p(t) ? (r(), c("span", {
+          p(l) ? (r(), c("span", {
             key: 1,
             class: b(["base-button__caption", { "icon-padding": e.icon }])
-          }, v(e.caption), 3)) : w("", !0)
+          }, $(e.caption), 3)) : w("", !0)
         ])
-      ], 10, K);
+      ], 10, Q);
     };
   }
 });
 function y() {
   return (new Date().valueOf() + Math.random()).toString(36);
 }
-const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"], Z = {
+const W = { class: "input-group form-input__input-group" }, Z = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"], _ = {
   key: 0,
   class: "form-input__color-swatch"
-}, _ = ["name", "id", "disabled", "read-only", "required", "aria-label"], ee = ["for", "innerHTML"], Le = /* @__PURE__ */ g({
+}, ee = ["name", "id", "disabled", "read-only", "required", "aria-label"], te = ["for", "innerHTML"], Le = /* @__PURE__ */ g({
   __name: "form-input",
   props: {
     modelValue: {
@@ -235,22 +235,22 @@ const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const t = e, d = h({
+  setup(e, { emit: s }) {
+    const l = e, d = v({
       get() {
-        return t.modelValue;
+        return l.modelValue;
       },
-      set(a) {
-        o("update:modelValue", a);
+      set(t) {
+        s("update:modelValue", t);
       }
     });
-    return (a, i) => (r(), c("div", {
+    return (t, o) => (r(), c("div", {
       class: b(["form-input", `form-input--${e.type}`])
     }, [
-      u("div", Q, [
-        m(a.$slots, "input-prepend"),
-        q(u("input", {
-          "onUpdate:modelValue": i[0] || (i[0] = (n) => O(d) ? d.value = n : null),
+      i("div", W, [
+        m(t.$slots, "input-prepend"),
+        q(i("input", {
+          "onUpdate:modelValue": o[0] || (o[0] = (a) => O(d) ? d.value = a : null),
           type: e.type === "color" ? "text" : e.type,
           id: e.id,
           name: e.name,
@@ -265,13 +265,13 @@ const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "
             "form-check-input": e.type === "checkbox"
           }]),
           "aria-label": e.label
-        }, null, 10, W), [
-          [H, p(d)]
+        }, null, 10, Z), [
+          [P, p(d)]
         ]),
-        m(a.$slots, "input-append", {}, () => [
-          e.type === "color" ? (r(), c("span", Z, [
-            q(u("input", {
-              "onUpdate:modelValue": i[1] || (i[1] = (n) => O(d) ? d.value = n : null),
+        m(t.$slots, "input-append", {}, () => [
+          e.type === "color" ? (r(), c("span", _, [
+            q(i("input", {
+              "onUpdate:modelValue": o[1] || (o[1] = (a) => O(d) ? d.value = a : null),
               type: "color",
               name: `${e.name}-color`,
               id: `${e.id}-color`,
@@ -280,28 +280,28 @@ const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "
               required: e.required,
               class: "form-control",
               "aria-label": e.label
-            }, null, 8, _), [
-              [U, p(d)]
+            }, null, 8, ee), [
+              [z, p(d)]
             ])
           ])) : w("", !0)
         ])
       ]),
-      m(a.$slots, "label", {}, () => [
-        u("label", {
+      m(t.$slots, "label", {}, () => [
+        i("label", {
           for: e.id,
           class: b(["form-input__label", {
             "form-check-label": e.type === "checkbox"
           }]),
           innerHTML: `${e.label}${e.required ? " *" : ""}`
-        }, null, 10, ee)
+        }, null, 10, te)
       ])
     ], 2));
   }
 });
-const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "aria-label"], ae = {
+const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "aria-label"], ne = {
   key: 0,
   class: "form-input__color-swatch"
-}, ne = ["name", "id", "disabled", "read-only", "required", "aria-label"], de = ["for", "innerHTML"], Te = /* @__PURE__ */ g({
+}, de = ["name", "id", "disabled", "read-only", "required", "aria-label"], oe = ["for", "innerHTML"], Ue = /* @__PURE__ */ g({
   __name: "input-textarea",
   props: {
     modelValue: {
@@ -357,19 +357,19 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const t = e, d = h({
+  setup(e, { emit: s }) {
+    const l = e, d = v({
       get() {
-        return t.modelValue;
+        return l.modelValue;
       },
-      set(a) {
-        o("update:modelValue", a);
+      set(t) {
+        s("update:modelValue", t);
       }
     });
-    return (a, i) => (r(), c("div", te, [
-      m(a.$slots, "input-prepend"),
-      q(u("textarea", {
-        "onUpdate:modelValue": i[0] || (i[0] = (n) => O(d) ? d.value = n : null),
+    return (t, o) => (r(), c("div", le, [
+      m(t.$slots, "input-prepend"),
+      q(i("textarea", {
+        "onUpdate:modelValue": o[0] || (o[0] = (a) => O(d) ? d.value = a : null),
         type: e.type === "color" ? "text" : e.type,
         id: e.id,
         name: e.name,
@@ -381,13 +381,13 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
         maxlength: e.maxlength,
         class: b(["form-control", {}]),
         "aria-label": e.label
-      }, null, 8, le), [
-        [U, p(d)]
+      }, null, 8, ae), [
+        [z, p(d)]
       ]),
-      m(a.$slots, "input-append", {}, () => [
-        e.type === "color" ? (r(), c("span", ae, [
-          q(u("input", {
-            "onUpdate:modelValue": i[1] || (i[1] = (n) => O(d) ? d.value = n : null),
+      m(t.$slots, "input-append", {}, () => [
+        e.type === "color" ? (r(), c("span", ne, [
+          q(i("input", {
+            "onUpdate:modelValue": o[1] || (o[1] = (a) => O(d) ? d.value = a : null),
             type: "color",
             name: `${e.name}-color`,
             id: `${e.id}-color`,
@@ -396,23 +396,23 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
             required: e.required,
             class: "form-control",
             "aria-label": e.label
-          }, null, 8, ne), [
-            [U, p(d)]
+          }, null, 8, de), [
+            [z, p(d)]
           ])
         ])) : w("", !0)
       ]),
-      m(a.$slots, "label", {}, () => [
-        u("label", {
+      m(t.$slots, "label", {}, () => [
+        i("label", {
           for: e.id,
           class: b(["form-input__label", {
             "form-check-label": e.type === "checkbox"
           }]),
           innerHTML: `${e.label}${e.required ? " *" : ""}`
-        }, null, 10, de)
+        }, null, 10, oe)
       ])
     ]));
   }
-}), ie = { class: "radio-group" }, oe = ["for"], Ie = /* @__PURE__ */ g({
+}), ie = { class: "radio-group" }, ue = ["for"], Ie = /* @__PURE__ */ g({
   __name: "check-group",
   props: {
     modelValue: {
@@ -452,43 +452,43 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
     }
   },
   emits: ["change", "update:modelValue"],
-  setup(e, { emit: o }) {
-    const t = e, d = x([]);
-    return $(() => t.modelValue, (a, i) => {
-      d.value = t.options.map(
-        (n) => n.value ? t.modelValue.some((l) => l["value "] === n.value) : t.modelValue.some((l) => l === n)
+  setup(e, { emit: s }) {
+    const l = e, d = V([]);
+    return S(() => l.modelValue, (t, o) => {
+      d.value = l.options.map(
+        (a) => a.value ? l.modelValue.some((n) => n["value "] === a.value) : l.modelValue.some((n) => n === a)
       );
-    }, { immediate: !0 }), $(d, (a, i) => {
-      const n = a.reduce((l, s, f) => {
-        const k = s && t.options[f] ? [t.options[f] || t.options[f]] : [];
-        return [...l, ...k];
+    }, { immediate: !0 }), S(d, (t, o) => {
+      const a = t.reduce((n, u, f) => {
+        const h = u && l.options[f] ? [l.options[f] || l.options[f]] : [];
+        return [...n, ...h];
       }, []);
-      o("update:modelValue", n);
-    }, { deep: !0 }), L(() => {
-    }), (a, i) => {
-      const n = S("form-input");
+      s("update:modelValue", a);
+    }, { deep: !0 }), U(() => {
+    }), (t, o) => {
+      const a = x("form-input");
       return r(), c("div", ie, [
-        (r(!0), c(M, null, N(e.options, (l, s) => (r(), C(n, {
-          key: s,
-          modelValue: p(d)[s],
-          "onUpdate:modelValue": (f) => p(d)[s] = f,
+        (r(!0), c(M, null, N(e.options, (n, u) => (r(), C(a, {
+          key: u,
+          modelValue: p(d)[u],
+          "onUpdate:modelValue": (f) => p(d)[u] = f,
           type: "checkbox",
           name: e.name,
-          id: `${e.id}-${s}`,
-          label: `${l.text || l}${e.required ? " *" : ""}`,
+          id: `${e.id}-${u}`,
+          label: `${n.text || n}${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)),
-        u("label", { for: e.id }, [
-          m(a.$slots, "label", {}, () => [
-            V(v(e.label), 1)
+        i("label", { for: e.id }, [
+          m(t.$slots, "label", {}, () => [
+            k($(e.label), 1)
           ])
-        ], 8, oe)
+        ], 8, ue)
       ]);
     };
   }
-}), ue = { class: "radio-group" }, re = ["for"], De = /* @__PURE__ */ g({
+}), re = { class: "radio-group" }, se = ["for"], De = /* @__PURE__ */ g({
   __name: "radio-group",
   props: {
     modelValue: {
@@ -528,41 +528,41 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
     }
   },
   emits: ["change", "update:modelValue"],
-  setup(e, { emit: o }) {
-    const t = e;
-    x(t.options.map((a) => a.value === t.modelValue));
-    function d(a) {
-      o("update:modelValue", a);
+  setup(e, { emit: s }) {
+    const l = e;
+    V(l.options.map((t) => t.value === l.modelValue));
+    function d(t) {
+      s("update:modelValue", t);
     }
-    return L(() => {
-    }), (a, i) => {
-      const n = S("form-input");
-      return r(), c("div", ue, [
-        (r(!0), c(M, null, N(e.options, (l, s) => (r(), C(n, {
-          key: s,
+    return U(() => {
+    }), (t, o) => {
+      const a = x("form-input");
+      return r(), c("div", re, [
+        (r(!0), c(M, null, N(e.options, (n, u) => (r(), C(a, {
+          key: u,
           type: "radio",
           name: e.name,
-          id: `${e.id}-${s}`,
-          value: l.value || l,
-          label: `${l.text || l}${e.required ? " *" : ""}`,
-          checked: l.value ? l.value === e.modelValue : l === e.modelValue,
+          id: `${e.id}-${u}`,
+          value: n.value || n,
+          label: `${n.text || n}${e.required ? " *" : ""}`,
+          checked: n.value ? n.value === e.modelValue : n === e.modelValue,
           disabled: e.disabled,
           "read-only": e.readOnly,
           required: e.required,
-          onChange: (f) => d(l)
+          onChange: (f) => d(n)
         }, null, 8, ["name", "id", "value", "label", "checked", "disabled", "read-only", "required", "onChange"]))), 128)),
-        u("label", { for: e.id }, [
-          m(a.$slots, "label", {}, () => [
-            V(v(e.label), 1)
+        i("label", { for: e.id }, [
+          m(t.$slots, "label", {}, () => [
+            k($(e.label), 1)
           ])
-        ], 8, re)
+        ], 8, se)
       ]);
     };
   }
-}), se = { class: "input input-dropdown" }, ce = { class: "dropdown" }, fe = {
+}), ce = { class: "input input-dropdown" }, fe = { class: "dropdown" }, me = {
   class: "btn-group",
   role: "group"
-}, me = ["id", "disabled"], ye = ["aria-labelledby"], pe = ["onClick"], be = ["for"], Ae = /* @__PURE__ */ g({
+}, ye = ["id", "disabled"], pe = ["aria-labelledby"], be = ["onClick"], ge = ["for"], Ae = /* @__PURE__ */ g({
   __name: "input-dropdown",
   props: {
     modelValue: {
@@ -619,31 +619,31 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const t = e;
-    h({
+  setup(e, { emit: s }) {
+    const l = e;
+    v({
       get() {
-        return t.modelValue;
+        return l.modelValue;
       },
-      set(n) {
-        o("update:modelValue", n);
+      set(a) {
+        s("update:modelValue", a);
       }
     });
-    function d(n) {
-      o("update:modelValue", n);
+    function d(a) {
+      s("update:modelValue", a);
     }
-    const a = h(() => [
+    const t = v(() => [
       {
         text: "Please select"
       },
-      ...t.options.map(
-        (n) => typeof n == "string" ? { value: n, text: n } : n
+      ...l.options.map(
+        (a) => typeof a == "string" ? { value: a, text: a } : a
       )
-    ]), i = h(() => [...t.options].find((n) => JSON.stringify(n.value) === JSON.stringify(t.modelValue)));
-    return (n, l) => (r(), c("div", se, [
-      u("div", ce, [
-        u("div", fe, [
-          u("button", {
+    ]), o = v(() => [...l.options].find((a) => JSON.stringify(a.value) === JSON.stringify(l.modelValue)));
+    return (a, n) => (r(), c("div", ce, [
+      i("div", fe, [
+        i("div", me, [
+          i("button", {
             class: b(["btn dropdown-toggle", {
               [`btn-${e.variant}`]: e.variant,
               [`btn-${e.color}`]: e.color,
@@ -655,30 +655,30 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
             "data-bs-toggle": "dropdown",
             "aria-expanded": "false",
             disabled: e.disabled
-          }, v(p(i) ? p(i).text : e.placeholder), 11, me),
-          u("ul", {
+          }, $(p(o) ? p(o).text : e.placeholder), 11, ye),
+          i("ul", {
             class: "dropdown-menu",
             "aria-labelledby": e.id
           }, [
-            (r(!0), c(M, null, N(p(a), (s, f) => (r(), c("li", { key: f }, [
-              m(n.$slots, "option", {}, () => [
-                u("a", {
+            (r(!0), c(M, null, N(p(t), (u, f) => (r(), c("li", { key: f }, [
+              m(a.$slots, "option", {}, () => [
+                i("a", {
                   class: "dropdown-item",
-                  onClick: T((k) => d(s.value), ["prevent"])
-                }, v(s.text), 9, pe)
+                  onClick: I((h) => d(u.value), ["prevent"])
+                }, $(u.text), 9, be)
               ])
             ]))), 128))
-          ], 8, ye)
+          ], 8, pe)
         ])
       ]),
-      u("label", { for: e.id }, [
-        m(n.$slots, "label", {}, () => [
-          V(v(e.label), 1)
+      i("label", { for: e.id }, [
+        m(a.$slots, "label", {}, () => [
+          k($(e.label), 1)
         ])
-      ], 8, be)
+      ], 8, ge)
     ]));
   }
-}), ge = ["id", "name", "multiple", "accept"], he = { class: "form-input__input-group input-group" }, ve = ["value", "id", "name"], $e = ["for"], Se = ["for", "innerHTML"], He = /* @__PURE__ */ g({
+}), he = ["id", "name", "multiple", "accept"], ve = { class: "form-input__input-group input-group" }, $e = ["value", "id", "name"], Se = ["for"], xe = ["for", "innerHTML"], Fe = /* @__PURE__ */ g({
   __name: "file-input",
   props: {
     modelValue: {
@@ -730,25 +730,25 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const t = e;
-    function d(l) {
-      const s = l.target && l.target.files;
-      s && (i.splice(0, i.length), Array.from(s).forEach((f) => {
-        i.push(f);
+  setup(e, { emit: s }) {
+    const l = e;
+    function d(n) {
+      const u = n.target && n.target.files;
+      u && (o.splice(0, o.length), Array.from(u).forEach((f) => {
+        o.push(f);
       }));
     }
-    const a = x(), i = P([]), n = h(() => i && i.map((l) => l.name));
-    return h(() => i.map((l) => URL.createObjectURL(l))), $(() => t.modelValue, (l, s) => {
-      l.length === 0 && (a.value.value = null);
-    }, { deep: !0 }), $(() => i, (l, s) => {
-      o("update:modelValue", l);
-    }, { deep: !0 }), (l, s) => (r(), c("div", {
+    const t = V(), o = H([]), a = v(() => o && o.map((n) => n.name));
+    return v(() => o.map((n) => URL.createObjectURL(n))), S(() => l.modelValue, (n, u) => {
+      n.length === 0 && (t.value.value = null);
+    }, { deep: !0 }), S(() => o, (n, u) => {
+      s("update:modelValue", n);
+    }, { deep: !0 }), (n, u) => (r(), c("div", {
       class: b(["form-input file-input", "file-input--primary"])
     }, [
-      u("input", {
+      i("input", {
         ref_key: "input",
-        ref: a,
+        ref: t,
         type: "file",
         id: e.id,
         name: e.name,
@@ -756,41 +756,34 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
         onChange: d,
         multiple: e.multiple,
         accept: e.accept
-      }, null, 40, ge),
-      u("div", he, [
-        m(l.$slots, "input-prepend"),
-        u("input", {
+      }, null, 40, he),
+      i("div", ve, [
+        m(n.$slots, "input-prepend"),
+        i("input", {
           type: "text",
-          value: p(n),
+          value: p(a),
           id: e.id,
           name: e.name,
           class: "form-control"
-        }, null, 8, ve),
-        m(l.$slots, "input-append", {}, () => [
-          u("label", {
+        }, null, 8, $e),
+        m(n.$slots, "input-append", {}, () => [
+          i("label", {
             for: e.id,
             class: "btn btn-outline-dark"
-          }, " Select Image ", 8, $e)
+          }, " Select Image ", 8, Se)
         ])
       ]),
-      m(l.$slots, "label", {}, () => [
-        u("label", {
+      m(n.$slots, "label", {}, () => [
+        i("label", {
           for: e.id,
           class: "form-input__label",
           innerHTML: `${e.label}${e.required ? " *" : ""}`
-        }, null, 8, Se)
+        }, null, 8, xe)
       ])
     ]));
   }
-}), xe = { class: "media-upload" }, Ve = ["src"], ke = ["onClick"], Be = ["for"];
-async function we(e) {
-  return await new Promise((o) => {
-    let t = new FileReader();
-    t.onload = () => o(t.result), t.readAsDataURL(e);
-  });
-}
-const Pe = /* @__PURE__ */ g({
-  __name: "media-upload",
+}), Ve = { class: "file-upload" }, ke = ["src"], Be = ["onClick"], we = ["for"], Pe = /* @__PURE__ */ g({
+  __name: "file-upload",
   props: {
     modelValue: {
       type: Array,
@@ -842,55 +835,72 @@ const Pe = /* @__PURE__ */ g({
     accept: {
       type: String,
       default: "image/*"
+    },
+    endpoint: {
+      type: URL,
+      default: ""
     }
   },
   emits: ["update:modelValue", "update:src"],
-  setup(e, { emit: o }) {
-    const t = e, d = x([]), a = x([]), i = h(() => t.modelValue.length ? t.modelValue : t.src ? [{ type: "", src: t.src }] : a.value);
-    $(() => d, async (l, s) => {
-      a.value = await Promise.all(
-        l.value.map(async (f) => ({
-          src: await we(f),
-          type: f.type
+  setup(e, { emit: s }) {
+    const l = e, d = V([]), t = V([]), o = v(() => l.modelValue.length ? l.modelValue : l.src ? [{ type: "", src: l.src }] : t.value);
+    S(() => d, async (u, f) => {
+      t.value = await Promise.all(
+        u.value.map(async (h) => ({
+          src: await n(h),
+          type: h.type
         }))
       );
-    }, { deep: !0 }), $(() => a, async (l, s) => {
-      const f = t.multiple ? a.value : a.value[0];
-      o("update:modelValue", f), t.multiple || o("update:src", a.value[0] && a.value[0].src);
+    }, { deep: !0 }), S(() => t, async (u, f) => {
+      const h = l.multiple ? t.value : t.value[0];
+      s("update:modelValue", h), l.multiple || s("update:src", t.value[0] && t.value[0].src);
     }, { deep: !0 });
-    function n(l) {
-      d.value.splice(l, 1);
+    function a(u) {
+      d.value.splice(u, 1);
+    }
+    async function n(u) {
+      const f = new FormData();
+      return f.append("method", "POST"), f.append("file", u), await fetch(l.endpoint, {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "multipart/form-data"
+        },
+        body: f
+      }).catch((T) => {
+        console.error("Error", T);
+      });
     }
-    return (l, s) => {
-      const f = S("svg-icon"), k = S("file-input");
-      return r(), c("div", xe, [
-        (r(!0), c(M, null, N(p(i), (B, I) => (r(), c("div", {
+    return (u, f) => {
+      const h = x("svg-icon"), T = x("file-input");
+      return r(), c("div", Ve, [
+        (r(!0), c(M, null, N(p(o), (B, D) => (r(), c("div", {
           key: B.src,
-          class: "media-upload__thumbnail"
+          class: "file-upload__thumbnail"
         }, [
-          u("img", {
+          i("img", {
             src: B.src,
             class: "img-thumbnail rounded"
-          }, null, 8, Ve),
-          u("button", {
-            onClick: T((qe) => n(I), ["prevent"]),
+          }, null, 8, ke),
+          i("button", {
+            onClick: I((qe) => a(D), ["prevent"]),
             class: "btn btn--close"
           }, [
-            z(f, { symbol: "x" })
-          ], 8, ke)
+            L(h, { symbol: "x" })
+          ], 8, Be)
         ]))), 128)),
-        z(k, {
+        L(T, {
           modelValue: d.value,
-          "onUpdate:modelValue": s[0] || (s[0] = (B) => d.value = B),
+          "onUpdate:modelValue": f[0] || (f[0] = (B) => d.value = B),
           id: e.id,
           name: e.name,
           accept: e.accept,
           class: "d-none"
         }, null, 8, ["modelValue", "id", "name", "accept"]),
-        u("label", {
+        i("label", {
           for: e.id,
           class: "btn btn-outline-dark"
-        }, " Select Image ", 8, Be)
+        }, " Select Image ", 8, we)
       ]);
     };
   }
@@ -898,14 +908,14 @@ const Pe = /* @__PURE__ */ g({
 export {
   ze as BaseButton,
   Ne as BaseHeadline,
-  Ue as BaseParagraph,
+  Te as BaseParagraph,
   Ie as CheckGroup,
-  He as FileInput,
+  Fe as FileInput,
+  Pe as FileUpload,
   Le as FormInput,
   Ae as InputDropdown,
-  Te as InputTextarea,
+  Ue as InputTextarea,
   Me as LoadingSpinner,
-  Pe as MediaUpload,
   De as RadioGroup,
   Ce as SvgIcon
 };