ablok-components 0.0.31 → 0.0.34

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 b, openBlock as u, createElementBlock as s, normalizeClass as v, createElementVNode as i, renderSlot as m, computed as g, resolveComponent as $, createBlock as O, createCommentVNode as q, unref as p, toDisplayString as h, withDirectives as M, isRef as U, vModelDynamic as T, vModelText as A, ref as B, watch as S, onBeforeMount as N, Fragment as k, renderList as w, createTextVNode as C, withModifiers as z, reactive as D, createVNode as L } from "vue";
+const R = {
   class: "icon",
   preserveAspectRatio: "xMaxYMin"
-}, U = ["xlink:href"], ye = /* @__PURE__ */ g({
+}, F = ["xlink:href"], Ve = /* @__PURE__ */ b({
   __name: "svg-icon",
   props: {
     basePath: {
@@ -23,23 +23,23 @@ const D = {
     }
   },
   setup(e) {
-    return (r, n) => (u(), s("i", {
+    return (r, t) => (u(), s("i", {
       class: v(["svg-icon", {
         [`svg-icon--${e.size}`]: e.size
       }])
     }, [
-      (u(), s("svg", D, [
+      (u(), s("svg", R, [
         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, F)
       ]))
     ], 2));
   }
 });
-const F = { class: "loading-spinner d-block" }, H = { class: "loading-spinner__animation" }, P = {
+const P = { class: "loading-spinner d-block" }, H = { class: "loading-spinner__animation" }, E = {
   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", {
+}, j = ["fill"], G = /* @__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 = [
+  G
+], xe = /* @__PURE__ */ b({
   __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, [
+    return (r, t) => (u(), s("span", P, [
       i("span", H, [
-        (u(), s("svg", P, [
+        (u(), s("svg", E, [
           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, j)
         ]))
       ]),
-      f(r.$slots, "default")
+      m(r.$slots, "default")
     ]));
   }
 });
-const J = ["type", "disabled", "href", "to"], ge = /* @__PURE__ */ g({
+const X = ["type", "disabled", "href", "to"], Be = /* @__PURE__ */ b({
   __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, t = g(() => r.caption && !r.fab);
+    return (a, n) => {
+      const d = $("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, {
+        m(a.$slots, "default", {}, () => [
+          e.icon ? (u(), O(d, {
             key: 0,
             id: e.icon,
             class: "base-button__caption"
-          }, null, 8, ["id"])) : S("", !0),
-          y(n) ? (u(), s("span", {
+          }, null, 8, ["id"])) : q("", !0),
+          p(t) ? (u(), s("span", {
             key: 1,
             class: v(["base-button__caption", { "icon-padding": e.icon }])
-          }, h(e.caption), 3)) : S("", !0)
+          }, h(e.caption), 3)) : q("", !0)
         ])
-      ], 10, J);
+      ], 10, X);
     };
   }
 });
-function m() {
+function y() {
   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 Y = { class: "input-group form-input__input-group" }, K = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"], Q = {
   key: 0,
   class: "form-input__color-swatch"
-}, K = ["name", "id", "disabled", "read-only", "required", "aria-label"], Q = ["for", "innerHTML"], pe = /* @__PURE__ */ g({
+}, W = ["name", "id", "disabled", "read-only", "required", "aria-label"], Z = ["for", "innerHTML"], ke = /* @__PURE__ */ b({
   __name: "form-input",
   props: {
     modelValue: {
@@ -153,11 +153,11 @@ const j = { class: "input-group form-input__input-group" }, X = ["type", "id", "
     },
     name: {
       type: String,
-      default: () => m()
+      default: () => y()
     },
     id: {
       type: String,
-      default: () => m()
+      default: () => y()
     },
     label: {
       type: String,
@@ -197,21 +197,21 @@ 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 t = e, a = g({
       get() {
-        return n.modelValue;
+        return t.modelValue;
       },
-      set(d) {
-        r("update:modelValue", d);
+      set(n) {
+        r("update:modelValue", n);
       }
     });
-    return (d, l) => (u(), s("div", {
+    return (n, d) => (u(), s("div", {
       class: v(["form-input", `form-input--${e.type}`])
     }, [
-      i("div", j, [
-        f(d.$slots, "input-prepend"),
-        x(i("input", {
-          "onUpdate:modelValue": l[0] || (l[0] = (t) => V(a) ? a.value = t : null),
+      i("div", Y, [
+        m(n.$slots, "input-prepend"),
+        M(i("input", {
+          "onUpdate:modelValue": d[0] || (d[0] = (l) => U(a) ? a.value = l : null),
           type: e.type === "color" ? "text" : e.type,
           id: e.id,
           name: e.name,
@@ -224,13 +224,13 @@ const j = { class: "input-group form-input__input-group" }, X = ["type", "id", "
           checked: e.checked,
           class: "form-control",
           "aria-label": e.label
-        }, null, 8, X), [
-          [I, y(a)]
+        }, null, 8, K), [
+          [T, p(a)]
         ]),
-        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(n.$slots, "input-append", {}, () => [
+          e.type === "color" ? (u(), s("span", Q, [
+            M(i("input", {
+              "onUpdate:modelValue": d[1] || (d[1] = (l) => U(a) ? a.value = l : null),
               type: "color",
               name: `${e.name}-color`,
               id: `${e.id}-color`,
@@ -239,23 +239,23 @@ const j = { class: "input-group form-input__input-group" }, X = ["type", "id", "
               required: e.required,
               class: "form-control",
               "aria-label": e.label
-            }, null, 8, K), [
-              [C, y(a)]
+            }, null, 8, W), [
+              [A, p(a)]
             ])
-          ])) : S("", !0)
+          ])) : q("", !0)
         ])
       ]),
-      f(d.$slots, "label", {}, () => [
+      m(n.$slots, "label", {}, () => [
         i("label", {
           for: e.id,
           class: "form-input__label",
           innerHTML: `${e.label}${e.required ? " *" : ""}`
-        }, null, 8, Q)
+        }, null, 8, Z)
       ])
     ], 2));
   }
 });
-const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
+const _ = { class: "radio-group" }, ee = ["for"], we = /* @__PURE__ */ b({
   __name: "check-group",
   props: {
     modelValue: {
@@ -267,11 +267,11 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
     },
     name: {
       type: String,
-      default: () => m()
+      default: () => y()
     },
     id: {
       type: String,
-      default: () => m()
+      default: () => y()
     },
     label: {
       type: String,
@@ -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 t = e, a = B([]);
+    return S(() => t.modelValue, (n, d) => {
+      a.value = t.options.map(
+        (l) => l.value ? t.modelValue.some((o) => o["value "] === l.value) : t.modelValue.some((o) => o === l)
       );
-    }, { immediate: !0 }), B(a, (d, l) => {
-      const t = d.reduce((o, c, b) => {
-        const M = c && n.options[b] ? [n.options[b] || n.options[b]] : [];
-        return [...o, ...M];
+    }, { immediate: !0 }), S(a, (n, d) => {
+      const l = n.reduce((o, c, f) => {
+        const V = c && t.options[f] ? [t.options[f] || t.options[f]] : [];
+        return [...o, ...V];
       }, []);
-      r("update:modelValue", t);
-    }, { deep: !0 }), z(() => {
-    }), (d, l) => {
-      const t = $("form-input");
-      return u(), s("div", W, [
-        (u(!0), s(w, null, q(e.options, (o, c) => (u(), k(t, {
+      r("update:modelValue", l);
+    }, { deep: !0 }), N(() => {
+    }), (n, d) => {
+      const l = $("form-input");
+      return u(), s("div", _, [
+        (u(!0), s(k, null, w(e.options, (o, c) => (u(), O(l, {
           key: c,
-          modelValue: y(a)[c],
-          "onUpdate:modelValue": (b) => y(a)[c] = b,
+          modelValue: p(a)[c],
+          "onUpdate:modelValue": (f) => p(a)[c] = f,
           type: "checkbox",
           name: e.name,
           id: `${e.id}-${c}`,
@@ -324,14 +324,14 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
           required: e.required
         }, 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)
+          m(n.$slots, "label", {}, () => [
+            C(h(e.label), 1)
           ])
-        ], 8, Z)
+        ], 8, ee)
       ]);
     };
   }
-}), _ = { class: "radio-group" }, ee = ["for"], ve = /* @__PURE__ */ g({
+}), te = { class: "radio-group" }, le = ["for"], qe = /* @__PURE__ */ b({
   __name: "radio-group",
   props: {
     modelValue: {
@@ -343,11 +343,11 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
     },
     name: {
       type: String,
-      default: () => m()
+      default: () => y()
     },
     id: {
       type: String,
-      default: () => m()
+      default: () => y()
     },
     label: {
       type: String,
@@ -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) {
-      r("update:modelValue", d);
+    const t = e;
+    B(t.options.map((n) => n.value === t.modelValue));
+    function a(n) {
+      r("update:modelValue", n);
     }
-    return z(() => {
-    }), (d, l) => {
-      const t = $("form-input");
-      return u(), s("div", _, [
-        (u(!0), s(w, null, q(e.options, (o, c) => (u(), k(t, {
+    return N(() => {
+    }), (n, d) => {
+      const l = $("form-input");
+      return u(), s("div", te, [
+        (u(!0), s(k, null, w(e.options, (o, c) => (u(), O(l, {
           key: c,
           type: "radio",
           name: e.name,
@@ -392,20 +392,20 @@ 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: (f) => a(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)
+          m(n.$slots, "label", {}, () => [
+            C(h(e.label), 1)
           ])
-        ], 8, ee)
+        ], 8, le)
       ]);
     };
   }
-}), te = { class: "input input-dropdown" }, le = { class: "dropdown" }, ae = {
+}), ae = { class: "input input-dropdown" }, ne = { class: "dropdown" }, de = {
   class: "btn-group",
   role: "group"
-}, ne = ["id", "disabled"], de = ["aria-labelledby"], oe = ["onClick"], ie = ["for"], $e = /* @__PURE__ */ g({
+}, oe = ["id", "disabled"], ie = ["aria-labelledby"], ue = ["onClick"], re = ["for"], Oe = /* @__PURE__ */ b({
   __name: "input-dropdown",
   props: {
     modelValue: {
@@ -414,11 +414,11 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
     },
     name: {
       type: String,
-      default: () => m()
+      default: () => y()
     },
     id: {
       type: String,
-      default: () => m()
+      default: () => y()
     },
     label: {
       type: String,
@@ -463,29 +463,29 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: r }) {
-    const n = e;
-    p({
+    const t = e;
+    g({
       get() {
-        return n.modelValue;
+        return t.modelValue;
       },
-      set(t) {
-        r("update:modelValue", t);
+      set(l) {
+        r("update:modelValue", l);
       }
     });
-    function a(t) {
-      r("update:modelValue", t);
+    function a(l) {
+      r("update:modelValue", l);
     }
-    const d = p(() => [
+    const n = g(() => [
       {
         text: "Please select"
       },
-      ...n.options.map(
-        (t) => typeof t == "string" ? { value: t, text: t } : t
+      ...t.options.map(
+        (l) => typeof l == "string" ? { value: l, text: l } : l
       )
-    ]), l = p(() => [...n.options].find((t) => JSON.stringify(t.value) === JSON.stringify(n.modelValue)));
-    return (t, o) => (u(), s("div", te, [
-      i("div", le, [
-        i("div", ae, [
+    ]), d = g(() => [...t.options].find((l) => JSON.stringify(l.value) === JSON.stringify(t.modelValue)));
+    return (l, o) => (u(), s("div", ae, [
+      i("div", ne, [
+        i("div", de, [
           i("button", {
             class: v(["btn dropdown-toggle", {
               [`btn-${e.variant}`]: e.variant,
@@ -498,47 +498,43 @@ const W = { class: "radio-group" }, Z = ["for"], he = /* @__PURE__ */ g({
             "data-bs-toggle": "dropdown",
             "aria-expanded": "false",
             disabled: e.disabled
-          }, h(y(l) ? y(l).text : e.placeholder), 11, ne),
+          }, h(p(d) ? p(d).text : e.placeholder), 11, oe),
           i("ul", {
             class: "dropdown-menu",
             "aria-labelledby": e.id
           }, [
-            (u(!0), s(w, null, q(y(d), (c, b) => (u(), s("li", { key: b }, [
-              f(t.$slots, "option", {}, () => [
+            (u(!0), s(k, null, w(p(n), (c, f) => (u(), s("li", { key: f }, [
+              m(l.$slots, "option", {}, () => [
                 i("a", {
                   class: "dropdown-item",
-                  onClick: L((M) => a(c.value), ["prevent"])
-                }, h(c.text), 9, oe)
+                  onClick: z((V) => a(c.value), ["prevent"])
+                }, h(c.text), 9, ue)
               ])
             ]))), 128))
-          ], 8, de)
+          ], 8, ie)
         ])
       ]),
       i("label", { for: e.id }, [
-        f(t.$slots, "label", {}, () => [
-          O(h(e.label), 1)
+        m(l.$slots, "label", {}, () => [
+          C(h(e.label), 1)
         ])
-      ], 8, ie)
+      ], 8, re)
     ]));
   }
-}), 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({
+}), se = ["id", "name", "multiple", "accept"], ce = { class: "form-input__input-group input-group" }, fe = ["value", "id", "name"], me = ["for"], ye = ["for", "innerHTML"], Ce = /* @__PURE__ */ b({
   __name: "file-input",
   props: {
     modelValue: {
-      type: [String, Number, Boolean],
-      default: ""
-    },
-    type: {
-      type: String,
-      default: "text"
+      type: Array,
+      default: []
     },
     name: {
       type: String,
-      default: () => m()
+      default: () => y()
     },
     id: {
       type: String,
-      default: () => m()
+      default: () => y()
     },
     label: {
       type: String,
@@ -564,88 +560,187 @@ 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) {
-      const t = l.target && l.target.files;
-      t && (a.splice(0, a.length), Array.from(t).forEach((o) => {
+    function t(d) {
+      const l = d.target && d.target.files;
+      l && (a.splice(0, a.length), Array.from(l).forEach((o) => {
         a.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 a = D([]), n = g(() => a && a.map((d) => d.name));
+    return g(() => a.map((d) => URL.createObjectURL(d))), S(() => a, (d, l) => {
+      console.log("file input", d), r("update:modelValue", d);
+    }, { deep: !0 }), (d, l) => (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: t,
+        multiple: e.multiple,
+        accept: e.accept
+      }, null, 40, se),
+      i("div", ce, [
+        m(d.$slots, "input-prepend"),
+        i("input", {
+          type: "text",
+          value: p(n),
+          id: e.id,
+          name: e.name,
+          class: "form-control"
+        }, null, 8, fe),
+        m(d.$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, me)
         ])
+      ]),
+      m(d.$slots, "label", {}, () => [
+        i("label", {
+          for: e.id,
+          class: "form-input__label",
+          innerHTML: `${e.label}${e.required ? " *" : ""}`
+        }, null, 8, ye)
+      ])
+    ]));
+  }
+}), pe = { class: "media-upload" }, be = ["src"], ge = ["onClick"], he = ["for"];
+async function ve(e) {
+  return await new Promise((r) => {
+    let t = new FileReader();
+    t.onload = () => r(t.result), t.readAsDataURL(e);
+  });
+}
+const Me = /* @__PURE__ */ b({
+  __name: "media-upload",
+  props: {
+    modelValue: {
+      type: Array,
+      default: []
+    },
+    src: {
+      type: String
+    },
+    name: {
+      type: String,
+      default: () => y()
+    },
+    id: {
+      type: String,
+      default: () => y()
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    variant: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    readOnly: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    pattern: {
+      type: String,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    accept: {
+      type: String,
+      default: "image/*"
+    }
+  },
+  emits: ["update:modelValue", "update:src"],
+  setup(e, { emit: r }) {
+    const t = e, a = B([]), n = B([]), d = g(() => t.modelValue.length ? t.modelValue : t.src ? [{ type: "", src: t.src }] : n.value);
+    S(() => a, async (o, c) => {
+      n.value = await Promise.all(
+        o.value.map(async (f) => ({
+          src: await ve(f),
+          type: f.type
+        }))
+      );
+    }, { deep: !0 }), S(() => n, async (o, c) => {
+      const f = t.multiple ? n.value : [n.value[0]];
+      r("update:modelValue", f), t.multiple || r("update:src", n.value[0] && n.value[0].src);
+    }, { deep: !0 });
+    function l(o) {
+      a.value.splice(o, 1);
+    }
+    return (o, c) => {
+      const f = $("svg-icon"), V = $("file-input");
+      return u(), s("div", pe, [
+        (u(!0), s(k, null, w(p(d), (x, I) => (u(), s("div", {
+          key: x.src,
+          class: "media-upload__thumbnail"
+        }, [
+          i("img", {
+            src: x.src,
+            class: "img-thumbnail rounded"
+          }, null, 8, be),
+          i("button", {
+            onClick: z(($e) => l(I), ["prevent"]),
+            class: "btn btn--close"
+          }, [
+            L(f, { symbol: "x" })
+          ], 8, ge)
+        ]))), 128)),
+        L(V, {
+          modelValue: a.value,
+          "onUpdate:modelValue": c[0] || (c[0] = (x) => a.value = x),
+          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, he)
       ]);
     };
   }
 });
 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
+  Be as BaseButton,
+  we as CheckGroup,
+  Ce as FileInput,
+  ke as FormInput,
+  Oe as InputDropdown,
+  xe as LoadingSpinner,
+  Me as MediaUpload,
+  qe as RadioGroup,
+  Ve as SvgIcon
 };