ablok-components 0.0.29 → 0.0.32

package/dist/ablok-components.es.js

@@ -1,16 +1,13 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, computed, resolveComponent, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, isRef, vModelDynamic, vModelText, ref, watch, onBeforeMount, Fragment, renderList, createTextVNode, withModifiers } from "vue";
-var svgIcon_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".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}\n")();
-const _hoisted_1$6 = {
+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"
-};
-const _hoisted_2$5 = ["xlink:href"];
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+}, D = ["xlink:href"], he = /* @__PURE__ */ p({
   __name: "svg-icon",
   props: {
     basePath: {
       type: String,
-      default: "/static/symbol-defs.svg"
+      default: "/symbol-defs.svg"
     },
     prefix: {
       type: String,
@@ -25,29 +22,24 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       default: "default"
     }
   },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("i", {
-        class: normalizeClass(["svg-icon", {
-          [`svg-icon--${__props.size}`]: __props.size
-        }])
-      }, [
-        (openBlock(), createElementBlock("svg", _hoisted_1$6, [
-          createElementVNode("use", {
-            "xlink:href": `${__props.basePath}#${__props.prefix}${__props.symbol}`,
-            "xmlns:xlink": "http://www.w3.org/1999/xlink",
-            x: "0",
-            y: "0"
-          }, null, 8, _hoisted_2$5)
-        ]))
-      ], 2);
-    };
+  setup(e) {
+    return (r, a) => (u(), s("i", {
+      class: v(["svg-icon", {
+        [`svg-icon--${e.size}`]: e.size
+      }])
+    }, [
+      (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, D)
+      ]))
+    ], 2));
   }
 });
-var loadingSpinner_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".loading-spinner{min-width:2rem}\n")();
-const _hoisted_1$5 = { class: "loading-spinner d-block" };
-const _hoisted_2$4 = { class: "loading-spinner__animation" };
-const _hoisted_3$2 = {
+const R = { class: "loading-spinner d-block" }, P = { class: "loading-spinner__animation" }, F = {
   class: "d-block",
   version: "1.1",
   id: "L9",
@@ -58,9 +50,7 @@ const _hoisted_3$2 = {
   viewBox: "0 0 100 100",
   "enable-background": "new 0 0 0 0",
   "xml:space": "preserve"
-};
-const _hoisted_4$2 = ["fill"];
-const _hoisted_5$2 = /* @__PURE__ */ createElementVNode("animateTransform", {
+}, H = ["fill"], E = /* @__PURE__ */ i("animateTransform", {
   attributeName: "transform",
   attributeType: "XML",
   type: "rotate",
@@ -68,11 +58,9 @@ const _hoisted_5$2 = /* @__PURE__ */ createElementVNode("animateTransform", {
   from: "0 50 50",
   to: "360 50 50",
   repeatCount: "indefinite"
-}, null, -1);
-const _hoisted_6$1 = [
-  _hoisted_5$2
-];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+}, null, -1), j = [
+  E
+], ve = /* @__PURE__ */ p({
   __name: "loading-spinner",
   props: {
     color: {
@@ -80,25 +68,21 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       default: "#fff"
     }
   },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", _hoisted_1$5, [
-        createElementVNode("span", _hoisted_2$4, [
-          (openBlock(), createElementBlock("svg", _hoisted_3$2, [
-            createElementVNode("path", {
-              fill: __props.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"
-            }, _hoisted_6$1, 8, _hoisted_4$2)
-          ]))
-        ]),
-        renderSlot(_ctx.$slots, "default")
-      ]);
-    };
+  setup(e) {
+    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"
+          }, j, 8, H)
+        ]))
+      ]),
+      f(r.$slots, "default")
+    ]));
   }
 });
-var baseButton_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".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}\n")();
-const _hoisted_1$4 = ["type", "disabled", "href", "to"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const G = ["type", "disabled", "href", "to"], $e = /* @__PURE__ */ p({
   __name: "base-button",
   props: {
     type: null,
@@ -114,58 +98,49 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     rounded: { type: Boolean },
     fab: { type: Boolean }
   },
-  setup(__props) {
-    const props = __props;
-    const showCaption = computed(() => {
-      return props.caption && !props.fab;
-    });
-    return (_ctx, _cache) => {
-      const _component_svg_icon = resolveComponent("svg-icon");
-      return openBlock(), createElementBlock("button", {
-        type: __props.type,
-        disabled: __props.disabled,
-        href: __props.href,
-        to: __props.to,
-        class: normalizeClass(["base-button btn btn-primary", {
-          disabled: __props.disabled,
-          pending: __props.pending,
-          rounded: __props.rounded,
-          outlined: __props.outlined,
-          fab: __props.fab,
-          "x-large": __props.size === "x-large",
-          "large": __props.size === "large",
-          "small": __props.size === "small",
-          "x-small": __props.size === "x-small"
+  setup(e) {
+    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,
+        href: e.href,
+        to: e.to,
+        class: v(["base-button btn btn-primary", {
+          disabled: e.disabled,
+          pending: e.pending,
+          rounded: e.rounded,
+          outlined: e.outlined,
+          fab: e.fab,
+          "x-large": e.size === "x-large",
+          large: e.size === "large",
+          small: e.size === "small",
+          "x-small": e.size === "x-small"
         }])
       }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          __props.icon ? (openBlock(), createBlock(_component_svg_icon, {
+        f(n.$slots, "default", {}, () => [
+          e.icon ? (u(), w(l, {
             key: 0,
-            id: __props.icon,
+            id: e.icon,
             class: "base-button__caption"
-          }, null, 8, ["id"])) : createCommentVNode("", true),
-          unref(showCaption) ? (openBlock(), createElementBlock("span", {
+          }, null, 8, ["id"])) : k("", !0),
+          y(a) ? (u(), s("span", {
             key: 1,
-            class: normalizeClass(["base-button__caption", { "icon-padding": __props.icon }])
-          }, toDisplayString(__props.caption), 3)) : createCommentVNode("", true)
+            class: v(["base-button__caption", { "icon-padding": e.icon }])
+          }, h(e.caption), 3)) : k("", !0)
         ])
-      ], 10, _hoisted_1$4);
+      ], 10, G);
     };
   }
 });
-function uniqueId() {
+function m() {
   return (new Date().valueOf() + Math.random()).toString(36);
 }
-var formInput_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".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:.25rem;border-bottom-right-radius:.25rem;overflow:hidden}.form-input input[type=color]{display:block;height:100%;padding:0;border-width:0}\n")();
-const _hoisted_1$3 = { class: "input-group form-input__input-group" };
-const _hoisted_2$3 = ["type", "name", "id", "label", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"];
-const _hoisted_3$1 = {
+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"
-};
-const _hoisted_4$1 = ["name", "id", "disabled", "read-only", "required", "aria-label"];
-const _hoisted_5$1 = ["for", "innerHTML"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+}, K = ["name", "id", "disabled", "read-only", "required", "aria-label"], Q = ["for", "innerHTML"], Se = /* @__PURE__ */ p({
   __name: "form-input",
   props: {
     modelValue: {
@@ -178,11 +153,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     },
     name: {
       type: String,
-      default: () => uniqueId()
+      default: () => m()
     },
     id: {
       type: String,
-      default: () => uniqueId()
+      default: () => m()
     },
     label: {
       type: String,
@@ -198,15 +173,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: !1
     },
     readOnly: {
       type: Boolean,
-      default: false
+      default: !1
     },
     required: {
       type: Boolean,
-      default: false
+      default: !1
     },
     maxlength: {
       type: Number
@@ -217,76 +192,70 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     },
     checked: {
       type: Boolean,
-      default: false
+      default: !1
     }
   },
   emits: ["update:modelValue"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const model = computed({
+  setup(e, { emit: r }) {
+    const a = e, n = g({
       get() {
-        return props.modelValue;
+        return a.modelValue;
       },
-      set(update) {
-        emit("update:modelValue", update);
+      set(d) {
+        r("update:modelValue", d);
       }
     });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["form-input", `form-input--${__props.type}`])
-      }, [
-        createElementVNode("div", _hoisted_1$3, [
-          renderSlot(_ctx.$slots, "input-prepend"),
-          withDirectives(createElementVNode("input", {
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
-            type: __props.type === "color" ? "text" : __props.type,
-            name: __props.name,
-            id: __props.id,
-            label: `${__props.label}${__props.required ? " *" : ""}`,
-            placeholder: __props.placeholder,
-            pattern: __props.pattern,
-            disabled: __props.disabled,
-            "read-only": __props.readOnly,
-            required: __props.required,
-            maxlength: __props.maxlength,
-            checked: __props.checked,
-            class: "form-control",
-            "aria-label": __props.label
-          }, null, 8, _hoisted_2$3), [
-            [vModelDynamic, unref(model)]
-          ]),
-          renderSlot(_ctx.$slots, "input-append", {}, () => [
-            __props.type === "color" ? (openBlock(), createElementBlock("span", _hoisted_3$1, [
-              withDirectives(createElementVNode("input", {
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(model) ? model.value = $event : null),
-                type: "color",
-                name: `${__props.name}-color`,
-                id: `${__props.id}-color`,
-                disabled: __props.disabled,
-                "read-only": __props.readOnly,
-                required: __props.required,
-                class: "form-control",
-                "aria-label": __props.label
-              }, null, 8, _hoisted_4$1), [
-                [vModelText, unref(model)]
-              ])
-            ])) : createCommentVNode("", true)
-          ])
+    return (d, l) => (u(), s("div", {
+      class: v(["form-input", `form-input--${e.type}`])
+    }, [
+      i("div", J, [
+        f(d.$slots, "input-prepend"),
+        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,
+          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, X), [
+          [N, y(n)]
         ]),
-        renderSlot(_ctx.$slots, "label", {}, () => [
-          createElementVNode("label", {
-            for: __props.id,
-            class: "form-input__label",
-            innerHTML: __props.label
-          }, null, 8, _hoisted_5$1)
+        f(d.$slots, "input-append", {}, () => [
+          e.type === "color" ? (u(), s("span", Y, [
+            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`,
+              disabled: e.disabled,
+              "read-only": e.readOnly,
+              required: e.required,
+              class: "form-control",
+              "aria-label": e.label
+            }, null, 8, K), [
+              [U, y(n)]
+            ])
+          ])) : k("", !0)
         ])
-      ], 2);
-    };
+      ]),
+      f(d.$slots, "label", {}, () => [
+        i("label", {
+          for: e.id,
+          class: "form-input__label",
+          innerHTML: `${e.label}${e.required ? " *" : ""}`
+        }, null, 8, Q)
+      ])
+    ], 2));
   }
 });
-const _hoisted_1$2 = { class: "radio-group" };
-const _hoisted_2$2 = ["for"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const W = { class: "radio-group" }, Z = ["for"], Ve = /* @__PURE__ */ p({
   __name: "check-group",
   props: {
     modelValue: {
@@ -298,11 +267,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     },
     name: {
       type: String,
-      default: () => uniqueId()
+      default: () => m()
     },
     id: {
       type: String,
-      default: () => uniqueId()
+      default: () => m()
     },
     label: {
       type: String,
@@ -314,66 +283,59 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: !1
     },
     readOnly: {
       type: Boolean,
-      default: false
+      default: !1
     },
     required: {
       type: Boolean,
-      default: false
+      default: !1
     }
   },
   emits: ["change", "update:modelValue"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const values = ref([]);
-    watch(() => props.modelValue, (update, before) => {
-      values.value = props.options.map((option) => option.value ? props.modelValue.some((modelValue) => modelValue["value "] === option.value) : props.modelValue.some((modelValue) => modelValue === option));
-    }, { immediate: true });
-    watch(values, (update, before) => {
-      const options = update.reduce((mappedValues, option, index) => {
-        const value = option && props.options[index] ? [props.options[index] || props.options[index]] : [];
-        return [...mappedValues, ...value];
+  setup(e, { emit: r }) {
+    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 }), $(n, (d, l) => {
+      const t = d.reduce((o, c, b) => {
+        const O = c && a.options[b] ? [a.options[b] || a.options[b]] : [];
+        return [...o, ...O];
       }, []);
-      emit("update:modelValue", options);
-    }, { deep: true });
-    onBeforeMount(() => {
-    });
-    return (_ctx, _cache) => {
-      const _component_form_input = resolveComponent("form-input");
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
-          return openBlock(), createBlock(_component_form_input, {
-            key: index,
-            modelValue: unref(values)[index],
-            "onUpdate:modelValue": ($event) => unref(values)[index] = $event,
-            type: "checkbox",
-            name: __props.name,
-            id: `${__props.id}-${index}`,
-            label: `${option.text || option}${__props.required ? " *" : ""}`,
-            disabled: __props.disabled,
-            "read-only": __props.readOnly,
-            required: __props.required
-          }, null, 8, ["modelValue", "onUpdate:modelValue", "name", "id", "label", "disabled", "read-only", "required"]);
-        }), 128)),
-        createElementVNode("label", { for: __props.id }, [
-          renderSlot(_ctx.$slots, "label", {}, () => [
-            createTextVNode(toDisplayString(__props.label), 1)
+      r("update:modelValue", t);
+    }, { deep: !0 }), L(() => {
+    }), (d, l) => {
+      const t = V("form-input");
+      return u(), s("div", W, [
+        (u(!0), s(B, null, x(e.options, (o, c) => (u(), w(t, {
+          key: c,
+          modelValue: y(n)[c],
+          "onUpdate:modelValue": (b) => y(n)[c] = b,
+          type: "checkbox",
+          name: e.name,
+          id: `${e.id}-${c}`,
+          label: `${o.text || o}${e.required ? " *" : ""}`,
+          disabled: e.disabled,
+          "read-only": e.readOnly,
+          required: e.required
+        }, null, 8, ["modelValue", "onUpdate:modelValue", "name", "id", "label", "disabled", "read-only", "required"]))), 128)),
+        i("label", { for: e.id }, [
+          f(d.$slots, "label", {}, () => [
+            q(h(e.label), 1)
           ])
-        ], 8, _hoisted_2$2)
+        ], 8, Z)
       ]);
     };
   }
-});
-const _hoisted_1$1 = { class: "radio-group" };
-const _hoisted_2$1 = ["for"];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+}), _ = { class: "radio-group" }, ee = ["for"], Be = /* @__PURE__ */ p({
   __name: "radio-group",
   props: {
     modelValue: {
-      default: false
+      default: !1
     },
     options: {
       type: Array,
@@ -381,11 +343,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     },
     name: {
       type: String,
-      default: () => uniqueId()
+      default: () => m()
     },
     id: {
       type: String,
-      default: () => uniqueId()
+      default: () => m()
     },
     label: {
       type: String,
@@ -397,64 +359,53 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: !1
     },
     readOnly: {
       type: Boolean,
-      default: false
+      default: !1
     },
     required: {
       type: Boolean,
-      default: false
+      default: !1
     }
   },
   emits: ["change", "update:modelValue"],
-  setup(__props, { emit }) {
-    const props = __props;
-    ref(props.options.map((option) => option.value === props.modelValue));
-    function change(value2) {
-      emit("update:modelValue", value2);
+  setup(e, { emit: r }) {
+    const a = e;
+    S(a.options.map((d) => d.value === a.modelValue));
+    function n(d) {
+      r("update:modelValue", d);
     }
-    onBeforeMount(() => {
-    });
-    return (_ctx, _cache) => {
-      const _component_form_input = resolveComponent("form-input");
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
-          return openBlock(), createBlock(_component_form_input, {
-            key: index,
-            type: "radio",
-            name: __props.name,
-            id: `${__props.id}-${index}`,
-            value: option.value || option,
-            label: `${option.text || option}${__props.required ? " *" : ""}`,
-            checked: option.value ? option.value === __props.modelValue : option === __props.modelValue,
-            disabled: __props.disabled,
-            "read-only": __props.readOnly,
-            required: __props.required,
-            onChange: ($event) => change(option)
-          }, null, 8, ["name", "id", "value", "label", "checked", "disabled", "read-only", "required", "onChange"]);
-        }), 128)),
-        createElementVNode("label", { for: __props.id }, [
-          renderSlot(_ctx.$slots, "label", {}, () => [
-            createTextVNode(toDisplayString(__props.label), 1)
+    return L(() => {
+    }), (d, l) => {
+      const t = V("form-input");
+      return u(), s("div", _, [
+        (u(!0), s(B, null, x(e.options, (o, c) => (u(), w(t, {
+          key: c,
+          type: "radio",
+          name: e.name,
+          id: `${e.id}-${c}`,
+          value: o.value || o,
+          label: `${o.text || o}${e.required ? " *" : ""}`,
+          checked: o.value ? o.value === e.modelValue : o === e.modelValue,
+          disabled: e.disabled,
+          "read-only": e.readOnly,
+          required: e.required,
+          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", {}, () => [
+            q(h(e.label), 1)
           ])
-        ], 8, _hoisted_2$1)
+        ], 8, ee)
       ]);
     };
   }
-});
-const _hoisted_1 = { class: "input input-dropdown" };
-const _hoisted_2 = { class: "dropdown" };
-const _hoisted_3 = {
+}), te = { class: "input input-dropdown" }, le = { class: "dropdown" }, ae = {
   class: "btn-group",
   role: "group"
-};
-const _hoisted_4 = ["id", "disabled"];
-const _hoisted_5 = ["aria-labelledby"];
-const _hoisted_6 = ["onClick"];
-const _hoisted_7 = ["for"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, ne = ["id", "disabled"], de = ["aria-labelledby"], oe = ["onClick"], ie = ["for"], xe = /* @__PURE__ */ p({
   __name: "input-dropdown",
   props: {
     modelValue: {
@@ -463,11 +414,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     },
     name: {
       type: String,
-      default: () => uniqueId()
+      default: () => m()
     },
     id: {
       type: String,
-      default: () => uniqueId()
+      default: () => m()
     },
     label: {
       type: String,
@@ -491,91 +442,290 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: !1
     },
     multiple: {
       type: Boolean,
-      default: false
+      default: !1
     },
     required: {
       type: Boolean,
-      default: false
+      default: !1
     },
     outline: {
       type: Boolean,
-      default: true
+      default: !0
     },
     resetOption: {
       type: Boolean,
-      default: true
+      default: !0
     }
   },
   emits: ["update:modelValue"],
-  setup(__props, { emit }) {
-    const props = __props;
-    computed({
+  setup(e, { emit: r }) {
+    const a = e;
+    g({
       get() {
-        return props.modelValue;
+        return a.modelValue;
       },
-      set(update) {
-        emit("update:modelValue", update);
+      set(t) {
+        r("update:modelValue", t);
       }
     });
-    function select(update) {
-      emit("update:modelValue", update);
+    function n(t) {
+      r("update:modelValue", t);
     }
-    const extendedOptions = computed(() => {
-      return [
-        {
-          text: "Please select"
-        },
-        ...props.options.map((option) => typeof option === "string" ? { value: option, text: option } : option)
-      ];
-    });
-    const selectedOption = computed(() => {
-      return [...props.options].find((option) => JSON.stringify(option.value) === JSON.stringify(props.modelValue));
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("div", _hoisted_3, [
-            createElementVNode("button", {
-              class: normalizeClass(["btn dropdown-toggle", {
-                [`btn-${__props.variant}`]: __props.variant,
-                [`btn-${__props.color}`]: __props.color,
-                [`btn-${__props.disabled}`]: __props.disabled,
-                [`btn-outline-${__props.color || "dark"}`]: __props.outline
-              }]),
-              type: "button",
-              id: __props.id,
-              "data-bs-toggle": "dropdown",
-              "aria-expanded": "false",
-              disabled: __props.disabled
-            }, toDisplayString(unref(selectedOption) ? unref(selectedOption).text : __props.placeholder), 11, _hoisted_4),
-            createElementVNode("ul", {
-              class: "dropdown-menu",
-              "aria-labelledby": __props.id
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(extendedOptions), (option, index) => {
-                return openBlock(), createElementBlock("li", { key: index }, [
-                  renderSlot(_ctx.$slots, "option", {}, () => [
-                    createElementVNode("a", {
-                      class: "dropdown-item",
-                      onClick: withModifiers(($event) => select(option.value), ["prevent"])
-                    }, toDisplayString(option.text), 9, _hoisted_6)
-                  ])
-                ]);
-              }), 128))
-            ], 8, _hoisted_5)
-          ])
-        ]),
-        createElementVNode("label", { for: __props.id }, [
-          renderSlot(_ctx.$slots, "label", {}, () => [
-            createTextVNode(toDisplayString(__props.label), 1)
-          ])
-        ], 8, _hoisted_7)
+    const d = g(() => [
+      {
+        text: "Please select"
+      },
+      ...a.options.map(
+        (t) => typeof t == "string" ? { value: t, text: t } : t
+      )
+    ]), 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, [
+          i("button", {
+            class: v(["btn dropdown-toggle", {
+              [`btn-${e.variant}`]: e.variant,
+              [`btn-${e.color}`]: e.color,
+              [`btn-${e.disabled}`]: e.disabled,
+              [`btn-outline-${e.color || "dark"}`]: e.outline
+            }]),
+            type: "button",
+            id: e.id,
+            "data-bs-toggle": "dropdown",
+            "aria-expanded": "false",
+            disabled: e.disabled
+          }, h(y(l) ? y(l).text : e.placeholder), 11, ne),
+          i("ul", {
+            class: "dropdown-menu",
+            "aria-labelledby": e.id
+          }, [
+            (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: z((O) => n(c.value), ["prevent"])
+                }, h(c.text), 9, oe)
+              ])
+            ]))), 128))
+          ], 8, de)
+        ])
+      ]),
+      i("label", { for: e.id }, [
+        f(t.$slots, "label", {}, () => [
+          q(h(e.label), 1)
+        ])
+      ], 8, ie)
+    ]));
+  }
+}), 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: 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
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    function a(l) {
+      const t = l.target && l.target.files;
+      t && (n.splice(0, n.length), Array.from(t).forEach((o) => {
+        n.push(o);
+      }));
+    }
+    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: "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 { _sfc_main$4 as BaseButton, _sfc_main$2 as CheckGroup, _sfc_main$3 as FormInput, _sfc_main as InputDropdown, _sfc_main$5 as LoadingSpinner, _sfc_main$1 as RadioGroup, _sfc_main$6 as SvgIcon };
+export {
+  $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
+};