@bobbykim/mcl-forms 0.7.1 → 0.8.0

package/dist/mcl-forms.js

@@ -1,8 +1,8 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.switch[data-v-8df11a40]{width:var(--switch-width);height:var(--switch-height)}.slider[data-v-8df11a40]:before{content:"";height:var(--slider-size);width:var(--slider-size);left:var(--gutter-size);bottom:var(--gutter-size)}input:checked+.slider[data-v-8df11a40]:before{transform:translate(var(--slider-size))}.options-enter-active[data-v-aa593ff3],.options-leave-active[data-v-aa593ff3]{opacity:1;transition:all .3s}.options-enter-from[data-v-aa593ff3],.options-leave-to[data-v-aa593ff3]{opacity:0;transform:translateY(-10px)}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as R, useSlots as K, computed as h, openBlock as p, createElementBlock as y, createElementVNode as c, renderSlot as z, normalizeClass as m, toDisplayString as E, ref as B, unref as L, createCommentVNode as F, normalizeStyle as M, withDirectives as I, vModelCheckbox as W, vModelDynamic as Y, createBlock as A, withKeys as J, vModelText as H, createVNode as P, Transition as Q, withCtx as Z, Fragment as ee, renderList as te, pushScopeId as le, popScopeId as oe } from "vue";
-import o, { vClickOutside as re } from "@bobbykim/manguito-theme";
-import { useResizeObserver as ae } from "@vueuse/core";
-const se = ["for"], Ve = /* @__PURE__ */ R({
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.switch[data-v-07d209bd]{width:var(--switch-width);height:var(--switch-height)}.slider[data-v-07d209bd]:before{content:"";height:var(--slider-size);width:var(--slider-size);left:var(--gutter-size);bottom:var(--gutter-size)}input:checked+.slider[data-v-07d209bd]:before{transform:translate(var(--slider-size))}.options-enter-active[data-v-6ce7e157],.options-leave-active[data-v-6ce7e157]{opacity:1;transition:all .3s}.options-enter-from[data-v-6ce7e157],.options-leave-to[data-v-6ce7e157]{opacity:0;transform:translateY(-10px)}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { defineComponent as R, useSlots as Y, computed as v, openBlock as g, createElementBlock as k, createElementVNode as p, renderSlot as A, normalizeClass as b, toDisplayString as I, mergeModels as V, useModel as z, ref as O, unref as L, createCommentVNode as $, normalizeStyle as j, withDirectives as T, vModelCheckbox as H, vModelDynamic as J, createBlock as D, withKeys as P, vModelText as q, createVNode as Q, Transition as Z, withCtx as ee, Fragment as te, renderList as oe, pushScopeId as le, popScopeId as re } from "vue";
+import l, { vClickOutside as ae } from "@bobbykim/manguito-theme";
+import { useResizeObserver as se } from "@vueuse/core";
+const ne = ["for"], Te = /* @__PURE__ */ R({
   __name: "MclFormGroup",
   props: {
     labelFor: {},
@@ -11,35 +11,35 @@ const se = ["for"], Ve = /* @__PURE__ */ R({
     textBold: { type: Boolean, default: !1 },
     label: {}
   },
-  setup(u) {
-    const f = u;
-    K();
-    const r = h(() => {
-      const { textColor: i, textSize: n, textBold: v } = f, e = [
-        o("TEXTCOLOR", i),
-        o("BODYTEXT", n)
+  setup(a) {
+    const i = a;
+    Y();
+    const d = v(() => {
+      const { textColor: s, textSize: e, textBold: c } = i, o = [
+        l("TEXTCOLOR", s),
+        l("BODYTEXT", e)
       ];
-      return v && e.push("font-bold"), e.join(" ");
+      return c && o.push("font-bold"), o.join(" ");
     });
-    return (i, n) => (p(), y("div", null, [
-      c("label", {
-        for: i.labelFor,
+    return (s, e) => (g(), k("div", null, [
+      p("label", {
+        for: s.labelFor,
         class: "inline-block"
       }, [
-        z(i.$slots, "label", {}, () => [
-          c("p", {
-            class: m(["mb-2xs", r.value])
-          }, E(i.label), 3)
+        A(s.$slots, "label", {}, () => [
+          p("p", {
+            class: b(["mb-2xs", d.value])
+          }, I(s.label), 3)
         ])
-      ], 8, se),
-      z(i.$slots, "default")
+      ], 8, ne),
+      A(s.$slots, "default")
     ]));
   }
-}), ne = { class: "shrink-0 my-3xs ml-3xs mr-xs" }, ie = ["id", "required", "accept"], de = /* @__PURE__ */ c("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1), ue = [
-  de
-], Te = /* @__PURE__ */ R({
+}), ie = { class: "shrink-0 my-3xs ml-3xs mr-xs" }, de = ["id", "required", "accept"], ue = /* @__PURE__ */ p("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1), ce = [
+  ue
+], ze = /* @__PURE__ */ R({
   __name: "MclInputFile",
-  props: {
+  props: /* @__PURE__ */ V({
     id: {},
     displayBorder: { type: Boolean, default: !1 },
     borderColor: { default: "light-4" },
@@ -52,73 +52,75 @@ const se = ["for"], Ve = /* @__PURE__ */ R({
     textColor: { default: "black" },
     displayClear: { type: Boolean, default: !1 },
     isRequired: { type: Boolean, default: !1 },
-    accept: { default: "image/jpg,image/jpeg,image/png" },
-    modelValue: {}
-  },
+    accept: { default: "image/jpg,image/jpeg,image/png" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
   emits: ["update:modelValue"],
-  setup(u, { emit: f }) {
-    const r = u, i = f, n = B(), v = B(0), e = () => {
-      n.value.click();
-    }, s = (t) => {
-      const k = t.target.files[0];
-      i("update:modelValue", k);
-    }, d = () => {
-      i("update:modelValue", null), v.value++;
-    }, x = h(() => {
-      const { rounded: t, displayBorder: k, borderColor: _, displayShadow: V, bgColor: G } = r, O = [o("BGCOLOR", G)];
-      return t && O.push("rounded-md"), k && (O.push("border-2"), O.push(o("BORDER", _))), V && O.push("shadow-md"), O.join(" ");
-    }), l = h(() => {
-      const { textColor: t } = r;
-      return [o("TEXTCOLOR", t)].join(" ");
-    }), C = h(() => {
-      const { buttonColor: t, buttonTextColor: k, rounded: _ } = r, V = [
-        o("BGCOLOR", t),
-        o("TEXTCOLOR", k)
+  setup(a) {
+    const i = a, d = z(a, "modelValue"), s = O(), e = O(0), c = () => {
+      s.value.click();
+    }, o = (t) => {
+      const f = t.target.files[0];
+      d.value = f;
+    }, h = () => {
+      d.value = null, e.value++;
+    }, y = v(() => {
+      const { rounded: t, displayBorder: f, borderColor: w, displayShadow: S, bgColor: F } = i, B = [l("BGCOLOR", F)];
+      return t && B.push("rounded-md"), f && (B.push("border-2"), B.push(l("BORDER", w))), S && B.push("shadow-md"), B.join(" ");
+    }), x = v(() => {
+      const { textColor: t } = i;
+      return [l("TEXTCOLOR", t)].join(" ");
+    }), r = v(() => {
+      const { buttonColor: t, buttonTextColor: f, rounded: w } = i, S = [
+        l("BGCOLOR", t),
+        l("TEXTCOLOR", f)
       ];
-      return _ && V.push("rounded-l-md"), V.join(" ");
-    }), w = h(() => {
-      const { buttonColor: t, rounded: k } = r, _ = [o("BGCOLOR", t)];
-      return k && _.push("rounded-r-md"), _.join(" ");
+      return w && S.push("rounded-l-md"), S.join(" ");
+    }), u = v(() => {
+      const { buttonColor: t, rounded: f } = i, w = [l("BGCOLOR", t)];
+      return f && w.push("rounded-r-md"), w.join(" ");
     });
-    return (t, k) => (p(), y("div", {
-      class: m(["flex items-center overflow-hidden", x.value])
+    return (t, f) => (g(), k("div", {
+      class: b(["flex items-center overflow-hidden", y.value])
     }, [
-      c("div", ne, [
-        c("button", {
-          class: m(["px-xs py-2xs hover:bg-opacity-70 transition-all duration-200 ease-linear max-w-full", C.value]),
-          onClick: e
-        }, E(t.buttonText), 3)
+      p("div", ie, [
+        p("button", {
+          class: b(["px-xs py-2xs hover:bg-opacity-70 transition-all duration-200 ease-linear max-w-full", r.value]),
+          onClick: c
+        }, I(t.buttonText), 3)
       ]),
-      (p(), y("input", {
+      (g(), k("input", {
         type: "file",
         id: t.id,
         ref_key: "inputRef",
-        ref: n,
-        class: m(["file:hidden w-full bg-transparent", [l.value]]),
+        ref: s,
+        class: b(["file:hidden w-full bg-transparent", [x.value]]),
         required: t.isRequired,
         accept: t.accept,
-        key: v.value,
-        onChange: s
-      }, null, 42, ie)),
-      t.displayClear ? (p(), y("div", {
+        key: e.value,
+        onChange: o
+      }, null, 42, de)),
+      t.displayClear ? (g(), k("div", {
         key: 0,
         class: "self-stretch my-3xs mr-3xs",
-        onClick: d
+        onClick: h
       }, [
-        c("button", {
-          class: m(["px-xs py-2xs h-full flex items-center hover:bg-opacity-70 transition-all duration-200 ease-linear", [w.value]]),
+        p("button", {
+          class: b(["px-xs py-2xs h-full flex items-center hover:bg-opacity-70 transition-all duration-200 ease-linear", [u.value]]),
           "aria-label": "clear"
         }, [
-          (p(), y("svg", {
+          (g(), k("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 384 512",
-            class: m(["h-xs", L(o)("SVGFILL", t.buttonTextColor)])
-          }, ue, 2))
+            class: b(["h-xs", L(l)("SVGFILL", t.buttonTextColor)])
+          }, ce, 2))
         ], 2)
-      ])) : F("", !0)
+      ])) : $("", !0)
     ], 2));
   }
-}), ce = { class: "flex items-center" }, pe = ["id", "value", "checked"], Fe = /* @__PURE__ */ R({
+}), pe = { class: "flex items-center" }, he = ["id", "value", "checked"], Fe = /* @__PURE__ */ R({
   __name: "MclInputRadio",
   props: {
     id: {},
@@ -130,57 +132,59 @@ const se = ["for"], Ve = /* @__PURE__ */ R({
     checked: { type: Boolean, default: !1 }
   },
   emits: ["change"],
-  setup(u, { emit: f }) {
-    const r = u, i = B(), n = f, v = () => {
-      var l;
-      (l = i.value) == null || l.click();
-    }, e = h(() => {
-      const { radioSize: l } = r;
-      return l === "sm" ? "h-xs w-xs" : l === "lg" ? "h-md w-md" : "h-sm w-sm";
-    }), s = h(() => {
-      const { radioSize: l } = r;
-      return l === "sm" ? "peer-checked:before:h-2xs peer-checked:before:w-2xs" : l === "lg" ? "peer-checked:before:h-xs peer-checked:before:w-xs" : "peer-checked:before:h-[12px] peer-checked:before:w-[12px]";
-    }), d = h(() => {
-      const { bgColor: l, checkedColor: C, displayShadow: w } = r, t = [
-        o("BGCOLOR", l),
-        o("BEFOREBG", C)
+  setup(a, { emit: i }) {
+    const d = a, s = O(), e = i, c = () => {
+      var r;
+      (r = s.value) == null || r.click();
+    }, o = v(() => {
+      const { radioSize: r } = d;
+      return r === "sm" ? "h-xs w-xs" : r === "lg" ? "h-md w-md" : "h-sm w-sm";
+    }), h = v(() => {
+      const { radioSize: r } = d;
+      return r === "sm" ? "peer-checked:before:h-2xs peer-checked:before:w-2xs" : r === "lg" ? "peer-checked:before:h-xs peer-checked:before:w-xs" : "peer-checked:before:h-[12px] peer-checked:before:w-[12px]";
+    }), y = v(() => {
+      const { bgColor: r, checkedColor: u, displayShadow: t } = d, f = [
+        l("BGCOLOR", r),
+        l("BEFOREBG", u)
       ];
-      return w && t.push("drop-shadow-md"), t.join(" ");
-    }), x = (l) => {
-      const C = l.target.value;
-      n("change", l, C);
+      return t && f.push("drop-shadow-md"), f.join(" ");
+    }), x = (r) => {
+      const u = r.target.value;
+      e("change", r, u);
     };
-    return (l, C) => (p(), y("div", ce, [
-      c("input", {
-        id: l.id,
+    return (r, u) => (g(), k("div", pe, [
+      p("input", {
+        id: r.id,
         type: "radio",
         class: "appearance-none peer",
         ref_key: "radioRef",
-        ref: i,
-        value: l.value,
-        checked: l.checked,
+        ref: s,
+        value: r.value,
+        checked: r.checked,
         onChange: x
-      }, null, 40, pe),
-      c("span", {
-        class: m(["rounded-full inline-block relative before:absolute before:rounded-full before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2", [e.value, s.value, d.value]]),
-        onClick: v
+      }, null, 40, he),
+      p("span", {
+        class: b(["rounded-full inline-block relative before:absolute before:rounded-full before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2", [o.value, h.value, y.value]]),
+        onClick: c
       }, null, 2)
     ]));
   }
-}), he = ["id"], fe = /* @__PURE__ */ R({
+}), fe = ["id"], ge = /* @__PURE__ */ R({
   __name: "MclInputSwitch",
-  props: {
+  props: /* @__PURE__ */ V({
     id: {},
     sliderColor: { default: "light-1" },
     onColor: { default: "success" },
     offColor: { default: "dark-1" },
     switchSize: { default: "md" },
-    rounded: { type: Boolean, default: !0 },
-    modelValue: { type: Boolean }
-  },
+    rounded: { type: Boolean, default: !0 }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
   emits: ["update:modelValue"],
-  setup(u, { emit: f }) {
-    const r = u, i = f, n = B(), v = {
+  setup(a) {
+    const i = a, d = z(a, "modelValue"), s = O(), e = {
       primary: "peer-checked/input:bg-primary",
       secondary: "peer-checked/input:bg-secondary",
       success: "peer-checked/input:bg-success",
@@ -198,22 +202,15 @@ const se = ["for"], Ve = /* @__PURE__ */ R({
       transparent: "peer-checked/input:bg-transparent",
       black: "peer-checked/input:bg-black",
       white: "peer-checked/input:bg-white"
-    }, e = () => {
-      var l;
-      (l = n.value) == null || l.click();
-    }, s = h({
-      get() {
-        return r.modelValue;
-      },
-      set(l) {
-        i("update:modelValue", l);
-      }
-    }), d = h(() => r.switchSize === "sm" ? {
+    }, c = () => {
+      var y;
+      (y = s.value) == null || y.click();
+    }, o = v(() => i.switchSize === "sm" ? {
       "--switch-width": "30px",
       "--switch-height": "17px",
       "--slider-size": "13px",
       "--gutter-size": "2px"
-    } : r.switchSize === "lg" ? {
+    } : i.switchSize === "lg" ? {
       "--switch-width": "60px",
       "--switch-height": "34px",
       "--slider-size": "26px",
@@ -223,62 +220,61 @@ const se = ["for"], Ve = /* @__PURE__ */ R({
       "--switch-height": "25.5px",
       "--slider-size": "19.5px",
       "--gutter-size": "3px"
-    }), x = h(() => {
-      const { sliderColor: l, onColor: C, offColor: w, rounded: t } = r, k = [
-        o("BGCOLOR", w),
-        o("BEFOREBG", l),
-        v[C]
+    }), h = v(() => {
+      const { sliderColor: y, onColor: x, offColor: r, rounded: u } = i, t = [
+        l("BGCOLOR", r),
+        l("BEFOREBG", y),
+        e[x]
       ];
-      return t && k.push("rounded-full before:rounded-full"), k.join(" ");
+      return u && t.push("rounded-full before:rounded-full"), t.join(" ");
     });
-    return (l, C) => (p(), y("div", {
+    return (y, x) => (g(), k("div", {
       class: "switch relative",
-      style: M(d.value),
-      onClick: e
+      style: j(o.value),
+      onClick: c
     }, [
-      I(c("input", {
-        id: l.id,
+      T(p("input", {
+        id: y.id,
         class: "hidden peer/input",
-        "onUpdate:modelValue": C[0] || (C[0] = (w) => s.value = w),
+        "onUpdate:modelValue": x[0] || (x[0] = (r) => d.value = r),
         ref_key: "inputRef",
-        ref: n,
+        ref: s,
         type: "checkbox"
-      }, null, 8, he), [
-        [W, s.value]
+      }, null, 8, fe), [
+        [H, d.value]
       ]),
-      c("span", {
-        class: m(["slider absolute inset-0 cursor-pointer transition-all duration-300 before:absolute before:transition-all before:duration-300", x.value])
+      p("span", {
+        class: b(["slider absolute inset-0 cursor-pointer transition-all duration-300 before:absolute before:transition-all before:duration-300", h.value])
       }, null, 2)
     ], 4));
   }
-});
-const j = (u, f) => {
-  const r = u.__vccOpts || u;
-  for (const [i, n] of f)
-    r[i] = n;
-  return r;
-}, $e = /* @__PURE__ */ j(fe, [["__scopeId", "data-v-8df11a40"]]), q = /* @__PURE__ */ R({
+}), U = (a, i) => {
+  const d = a.__vccOpts || a;
+  for (const [s, e] of i)
+    d[s] = e;
+  return d;
+}, Ee = /* @__PURE__ */ U(ge, [["__scopeId", "data-v-07d209bd"]]), N = /* @__PURE__ */ R({
   __name: "InputHighlight",
   props: {
     color: { default: "primary" },
     rounded: { type: Boolean, default: !1 },
     offset: { default: 1 }
   },
-  setup(u) {
-    const f = u, r = {
+  setup(a) {
+    const i = a, d = {
       1: "-top-1",
       2.5: "-top-2.5"
-    }, i = h(() => {
-      const n = [o("BEFOREBG", f.color)];
-      return f.rounded && n.push("rounded-b-md"), n.push(r[f.offset]), n.join(" ");
+    }, s = v(() => {
+      const e = [l("BEFOREBG", i.color)];
+      return i.rounded && e.push("rounded-b-md"), e.push(d[i.offset]), e.join(" ");
     });
-    return (n, v) => (p(), y("div", {
-      class: m(["relative h-3xs overflow-hidden before:absolute before:bottom-0 before:left-0 before:h-full before:w-0 peer-focus:before:w-full before:transition-[width] before:duration-300 before:ease-linear", i.value])
+    return (e, c) => (g(), k("div", {
+      class: b(["relative h-3xs overflow-hidden before:absolute before:bottom-0 before:left-0 before:h-full before:w-0 peer-focus:before:w-full before:transition-[width] before:duration-300 before:ease-linear", s.value])
     }, null, 2));
   }
-}), ge = ["id", "type", "placeholder", "required", "minlength", "maxlength", "pattern"], me = { class: "peer-valid/validation:hidden peer-inavlid/validation:block ml-3xs" }, be = { class: "text-xs text-danger" }, Ee = /* @__PURE__ */ R({
+}), be = ["id", "type", "placeholder", "required", "minlength", "maxlength", "pattern"], me = { class: "peer-valid/validation:hidden peer-inavlid/validation:block ml-3xs" }, ke = { class: "text-xs text-danger" }, Ge = /* @__PURE__ */ R({
   __name: "MclInputText",
-  props: {
+  props: /* @__PURE__ */ V({
     id: {},
     displayBorder: { type: Boolean, default: !1 },
     borderColor: { default: "light-4" },
@@ -291,74 +287,69 @@ const j = (u, f) => {
     type: { default: "text" },
     displayShadow: { type: Boolean, default: !0 },
     required: { type: Boolean, default: !1 },
-    modelValue: {},
     invalidFeedback: {},
     minLength: {},
     maxLength: {},
     pattern: {}
-  },
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
   emits: ["update:modelValue"],
-  setup(u, { emit: f }) {
-    const r = u, i = f, n = h({
-      get() {
-        return r.modelValue;
-      },
-      set(e) {
-        i("update:modelValue", e);
-      }
-    }), v = h(() => {
+  setup(a) {
+    const i = a, d = z(a, "modelValue"), s = v(() => {
       const {
         bgColor: e,
-        displayBorder: s,
-        borderColor: d,
-        displayHighlight: x,
-        displayShadow: l,
-        rounded: C,
-        textcolor: w
-      } = r, t = [
-        o("BGCOLOR", e),
-        o("TEXTCOLOR", w)
+        displayBorder: c,
+        borderColor: o,
+        displayHighlight: h,
+        displayShadow: y,
+        rounded: x,
+        textcolor: r
+      } = i, u = [
+        l("BGCOLOR", e),
+        l("TEXTCOLOR", r)
       ];
-      return s && (t.push("border-2"), t.push(o("BORDER", d))), x || (t.push(
+      return c && (u.push("border-2"), u.push(l("BORDER", o))), h || (u.push(
         "focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear"
-      ), t.push(o("FOCUSRING", d))), l && t.push("shadow-md"), C && t.push("rounded-md"), t.join(" ");
+      ), u.push(l("FOCUSRING", o))), y && u.push("shadow-md"), x && u.push("rounded-md"), u.join(" ");
     });
-    return (e, s) => (p(), y("div", null, [
-      I(c("input", {
+    return (e, c) => (g(), k("div", null, [
+      T(p("input", {
         id: e.id,
         type: e.type,
-        class: m(["w-full p-2xs outline-none peer peer/validation", v.value]),
-        "onUpdate:modelValue": s[0] || (s[0] = (d) => n.value = d),
+        class: b(["w-full p-2xs outline-none peer peer/validation", s.value]),
+        "onUpdate:modelValue": c[0] || (c[0] = (o) => d.value = o),
         placeholder: e.placeholder,
         required: e.required,
         minlength: e.minLength,
         maxlength: e.maxLength,
         pattern: e.pattern
-      }, null, 10, ge), [
-        [Y, n.value]
+      }, null, 10, be), [
+        [J, d.value]
       ]),
-      e.displayHighlight ? (p(), A(q, {
+      e.displayHighlight ? (g(), D(N, {
         key: 0,
         color: e.highlightColor,
         rounded: e.rounded
-      }, null, 8, ["color", "rounded"])) : F("", !0),
-      c("div", me, [
-        z(e.$slots, "invalid-feedback", {}, () => [
-          c("span", be, E(e.invalidFeedback), 1)
+      }, null, 8, ["color", "rounded"])) : $("", !0),
+      p("div", me, [
+        A(e.$slots, "invalid-feedback", {}, () => [
+          p("span", ke, I(e.invalidFeedback), 1)
         ])
       ])
     ]));
   }
-}), D = (u) => (le("data-v-aa593ff3"), u = u(), oe(), u), ye = ["id", "placeholder", "aria-expanded"], ve = /* @__PURE__ */ D(() => /* @__PURE__ */ c("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)), Ce = [
-  ve
-], ke = /* @__PURE__ */ D(() => /* @__PURE__ */ c("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1)), we = [
-  ke
-], xe = {
+}), X = (a) => (le("data-v-6ce7e157"), a = a(), re(), a), ve = ["id", "placeholder", "aria-expanded"], ye = /* @__PURE__ */ X(() => /* @__PURE__ */ p("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)), Ce = [
+  ye
+], xe = /* @__PURE__ */ X(() => /* @__PURE__ */ p("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1)), we = [
+  xe
+], Be = {
   key: 0,
   class: "absolute"
-}, Be = ["onClick"], _e = /* @__PURE__ */ R({
+}, Oe = ["onClick"], Re = /* @__PURE__ */ R({
   __name: "MclSelect",
-  props: {
+  props: /* @__PURE__ */ V({
     id: {},
     displayBorder: { type: Boolean, default: !1 },
     borderColor: { default: "light-4" },
@@ -373,151 +364,152 @@ const j = (u, f) => {
     required: { type: Boolean, default: !1 },
     options: {},
     selectColor: { default: "primary" },
-    invalidFeedback: { default: "No match." },
-    modelValue: {}
-  },
+    invalidFeedback: { default: "No match." }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
   emits: ["update:modelValue"],
-  setup(u, { emit: f }) {
-    const r = u, i = f, n = B(), v = B(), e = B(), s = B(!1), d = B(""), x = () => {
-      s.value = !0;
-    }, l = () => {
-      var a;
-      d.value = "", s.value = !1, (a = v.value) == null || a.blur(), i("update:modelValue", "");
-    }, C = () => {
-      s.value = !1;
-    }, w = () => {
-      var a;
-      s.value = !s.value, s.value === !0 && ((a = v.value) == null || a.focus());
-    }, t = (a) => {
-      a.preventDefault(), d.value !== "" && (d.value = ""), i("update:modelValue", "");
-    }, k = (a, g) => {
-      a.preventDefault(), d.value = typeof g == "string" ? g : g.text;
-      const b = typeof g == "string" ? g : g.value;
-      i("update:modelValue", b), s.value = !1;
-    }, _ = h(() => {
+  setup(a) {
+    const i = a, d = z(a, "modelValue"), s = O(), e = O(), c = O(), o = O(!1), h = O(""), y = () => {
+      o.value = !0;
+    }, x = () => {
+      var n;
+      h.value = "", o.value = !1, (n = e.value) == null || n.blur(), d.value = "";
+    }, r = () => {
+      o.value = !1;
+    }, u = () => {
+      var n;
+      o.value = !o.value, o.value === !0 && ((n = e.value) == null || n.focus());
+    }, t = (n) => {
+      n.preventDefault(), h.value !== "" && (h.value = ""), d.value = "";
+    }, f = (n, m) => {
+      n.preventDefault(), h.value = typeof m == "string" ? m : m.text;
+      const C = typeof m == "string" ? m : m.value;
+      d.value = C, o.value = !1;
+    }, w = v(() => {
       const {
-        bgColor: a,
-        displayBorder: g,
-        borderColor: b,
-        displayHighlight: $,
-        displayShadow: S,
-        rounded: U,
-        textcolor: X
-      } = r, T = [
-        o("BGCOLOR", a),
-        o("TEXTCOLOR", X)
+        bgColor: n,
+        displayBorder: m,
+        borderColor: C,
+        displayHighlight: G,
+        displayShadow: _,
+        rounded: K,
+        textcolor: W
+      } = i, M = [
+        l("BGCOLOR", n),
+        l("TEXTCOLOR", W)
       ];
-      return g && (T.push("border-2"), T.push(o("BORDER", b))), $ || T.push("ring-offset-2 transition-all duration-300 ease-linear"), S && T.push("shadow-md"), U && T.push("rounded-md"), T.join(" ");
-    }), V = (a, g) => {
-      const b = [o("BEFOREBG", a)];
-      return g && b.push("rounded-b-md"), b.join(" ");
-    }, G = h(() => {
-      const { displayHighlight: a, bgColor: g, borderColor: b, rounded: $ } = r, S = [
-        o("BGCOLOR", g),
-        o("BORDER", b)
+      return m && (M.push("border-2"), M.push(l("BORDER", C))), G || M.push("ring-offset-2 transition-all duration-300 ease-linear"), _ && M.push("shadow-md"), K && M.push("rounded-md"), M.join(" ");
+    }), S = (n, m) => {
+      const C = [l("BEFOREBG", n)];
+      return m && C.push("rounded-b-md"), C.join(" ");
+    }, F = v(() => {
+      const { displayHighlight: n, bgColor: m, borderColor: C, rounded: G } = i, _ = [
+        l("BGCOLOR", m),
+        l("BORDER", C)
       ];
-      return a || S.push("mt-2xs"), $ && S.push("rounded-md"), S.join(" ");
-    }), O = h(() => d.value === "" ? r.options : r.options.filter((g) => {
-      const b = new RegExp(`${d.value}`, "gi");
-      return typeof g == "string" ? g.match(b) : g.text.match(b);
-    })), N = h(() => ({ width: `${e.value}px` }));
-    return ae(n, () => {
-      n.value && (e.value = n.value.clientWidth);
-    }), (a, g) => I((p(), y("div", {
-      onKeyup: J(l, ["esc"]),
+      return n || _.push("mt-2xs"), G && _.push("rounded-md"), _.join(" ");
+    }), B = v(() => h.value === "" ? i.options : i.options.filter((m) => {
+      const C = new RegExp(`${h.value}`, "gi");
+      return typeof m == "string" ? m.match(C) : m.text.match(C);
+    })), E = v(() => ({ width: `${c.value}px` }));
+    return se(s, () => {
+      s.value && (c.value = s.value.clientWidth);
+    }), (n, m) => T((g(), k("div", {
+      onKeyup: P(x, ["esc"]),
       ref_key: "componentRef",
-      ref: n
+      ref: s
     }, [
-      c("div", {
-        class: m(["p-2xs flex relative gap-3xs", [
-          !a.displayHighlight && s.value && L(o)("RINGCOLOR", a.borderColor) + " ring-4",
-          _.value
+      p("div", {
+        class: b(["p-2xs flex relative gap-3xs", [
+          !n.displayHighlight && o.value && L(l)("RINGCOLOR", n.borderColor) + " ring-4",
+          w.value
         ]])
       }, [
-        I(c("input", {
-          id: a.id,
+        T(p("input", {
+          id: n.id,
           type: "text",
           class: "w-full bg-transparent outline-none",
-          "onUpdate:modelValue": g[0] || (g[0] = (b) => d.value = b),
+          "onUpdate:modelValue": m[0] || (m[0] = (C) => h.value = C),
           ref_key: "inputBox",
-          ref: v,
+          ref: e,
           role: "combobox",
-          placeholder: a.placeholder,
+          placeholder: n.placeholder,
           "aria-autocomplete": "list",
-          "aria-expanded": s.value,
-          onFocus: x
-        }, null, 40, ye), [
-          [H, d.value]
+          "aria-expanded": o.value,
+          onFocus: y
+        }, null, 40, ve), [
+          [q, h.value]
         ]),
-        c("div", {
-          class: m(["flex items-center px-3xs", [
-            d.value === "" ? "hidden cursor-text" : "block cursor-pointer"
+        p("div", {
+          class: b(["flex items-center px-3xs", [
+            h.value === "" ? "hidden cursor-text" : "block cursor-pointer"
           ]]),
           onClick: t
         }, [
-          (p(), y("svg", {
+          (g(), k("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 384 512",
-            class: m(["h-xs opacity-70", [L(o)("SVGFILL", a.iconColor)]])
+            class: b(["h-xs opacity-70", [L(l)("SVGFILL", n.iconColor)]])
           }, Ce, 2))
         ], 2),
-        c("div", {
+        p("div", {
           class: "flex items-center px-3xs",
-          onClick: w
+          onClick: u
         }, [
-          (p(), y("svg", {
+          (g(), k("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 320 512",
-            class: m(["h-xs", [
-              s.value ? "rotate-180" : "rotate-0",
+            class: b(["h-xs", [
+              o.value ? "rotate-180" : "rotate-0",
               "transition-transform duration-300 ease-in",
-              L(o)("SVGFILL", a.iconColor)
+              L(l)("SVGFILL", n.iconColor)
             ]])
           }, we, 2))
         ])
       ], 2),
-      a.displayHighlight ? (p(), y("div", {
+      n.displayHighlight ? (g(), k("div", {
         key: 0,
-        class: m(["relative h-3xs overflow-hidden before:absolute before:bottom-0 before:left-0 before:h-full before:w-0 before:transition-[width] before:duration-300 before:ease-linear -top-1", [
-          s.value ? "before:w-full" : "before:w-0",
-          V(a.highlightColor, a.rounded)
+        class: b(["relative h-3xs overflow-hidden before:absolute before:bottom-0 before:left-0 before:h-full before:w-0 before:transition-[width] before:duration-300 before:ease-linear -top-1", [
+          o.value ? "before:w-full" : "before:w-0",
+          S(n.highlightColor, n.rounded)
         ]])
-      }, null, 2)) : F("", !0),
-      P(Q, { name: "options" }, {
-        default: Z(() => [
-          s.value ? (p(), y("div", xe, [
-            c("ul", {
-              class: m([[G.value], "max-h-[200px] overflow-y-auto border-2"]),
-              style: M(N.value),
+      }, null, 2)) : $("", !0),
+      Q(Z, { name: "options" }, {
+        default: ee(() => [
+          o.value ? (g(), k("div", Be, [
+            p("ul", {
+              class: b([[F.value], "max-h-[200px] overflow-y-auto border-2"]),
+              style: j(E.value),
               role: "listbox"
             }, [
-              (p(!0), y(ee, null, te(O.value, (b, $) => (p(), y("li", {
-                key: $,
-                class: m(["p-2xs cursor-pointer", [L(o)("HVBGCOLOR", a.highlightColor)]]),
+              (g(!0), k(te, null, oe(B.value, (C, G) => (g(), k("li", {
+                key: G,
+                class: b(["p-2xs cursor-pointer", [L(l)("HVBGCOLOR", n.highlightColor)]]),
                 role: "option",
-                onClick: (S) => k(S, b)
-              }, E(typeof b == "string" ? b : b.text), 11, Be))), 128)),
-              d.value !== "" && O.value.length === 0 ? (p(), y("li", {
+                onClick: (_) => f(_, C)
+              }, I(typeof C == "string" ? C : C.text), 11, Oe))), 128)),
+              h.value !== "" && B.value.length === 0 ? (g(), k("li", {
                 key: 0,
-                class: m(["p-2xs cursor-pointer", [L(o)("HVBGCOLOR", a.selectColor)]])
+                class: b(["p-2xs cursor-pointer", [L(l)("HVBGCOLOR", n.selectColor)]])
               }, [
-                z(a.$slots, "no-match", {}, () => [
-                  c("span", null, E(a.invalidFeedback), 1)
+                A(n.$slots, "no-match", {}, () => [
+                  p("span", null, I(n.invalidFeedback), 1)
                 ], !0)
-              ], 2)) : F("", !0)
+              ], 2)) : $("", !0)
             ], 6)
-          ])) : F("", !0)
+          ])) : $("", !0)
         ]),
         _: 3
       })
     ], 32)), [
-      [L(re), C]
+      [L(ae), r]
     ]);
   }
-});
-const Ie = /* @__PURE__ */ j(_e, [["__scopeId", "data-v-aa593ff3"]]), Oe = ["id", "placeholder", "required", "rows"], ze = /* @__PURE__ */ R({
+}), Ie = /* @__PURE__ */ U(Re, [["__scopeId", "data-v-6ce7e157"]]), Se = ["id", "placeholder", "required", "rows"], Ae = /* @__PURE__ */ R({
   __name: "MclTextArea",
-  props: {
+  props: /* @__PURE__ */ V({
     id: {},
     displayBorder: { type: Boolean, default: !1 },
     borderColor: { default: "light-4" },
@@ -529,61 +521,163 @@ const Ie = /* @__PURE__ */ j(_e, [["__scopeId", "data-v-aa593ff3"]]), Oe = ["id"
     placeholder: { default: "" },
     displayShadow: { type: Boolean, default: !0 },
     required: { type: Boolean, default: !1 },
-    rows: { default: 5 },
-    modelValue: {}
-  },
+    rows: { default: 5 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
   emits: ["update:modelValue"],
-  setup(u, { emit: f }) {
-    const r = u, i = f, n = h({
-      get() {
-        return r.modelValue;
-      },
-      set(e) {
-        i("update:modelValue", e);
-      }
-    }), v = h(() => {
+  setup(a) {
+    const i = a, d = z(a, "modelValue"), s = v(() => {
       const {
         bgColor: e,
-        displayBorder: s,
-        borderColor: d,
-        displayHighlight: x,
-        displayShadow: l,
-        rounded: C,
-        textcolor: w
-      } = r, t = [
-        o("BGCOLOR", e),
-        o("TEXTCOLOR", w)
+        displayBorder: c,
+        borderColor: o,
+        displayHighlight: h,
+        displayShadow: y,
+        rounded: x,
+        textcolor: r
+      } = i, u = [
+        l("BGCOLOR", e),
+        l("TEXTCOLOR", r)
       ];
-      return s && (t.push("border-2"), t.push(o("BORDER", d))), x || (t.push(
+      return c && (u.push("border-2"), u.push(l("BORDER", o))), h || (u.push(
         "focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear"
-      ), t.push(o("FOCUSRING", d))), l && t.push("shadow-md"), C && t.push("rounded-md"), t.join(" ");
+      ), u.push(l("FOCUSRING", o))), y && u.push("shadow-md"), x && u.push("rounded-md"), u.join(" ");
     });
-    return (e, s) => (p(), y("div", null, [
-      I(c("textarea", {
+    return (e, c) => (g(), k("div", null, [
+      T(p("textarea", {
         id: e.id,
-        class: m(["w-full p-2xs outline-none input__text peer", v.value]),
-        "onUpdate:modelValue": s[0] || (s[0] = (d) => n.value = d),
+        class: b(["w-full p-2xs outline-none input__text peer", s.value]),
+        "onUpdate:modelValue": c[0] || (c[0] = (o) => d.value = o),
         placeholder: e.placeholder,
         required: e.required,
         rows: e.rows
-      }, null, 10, Oe), [
-        [H, n.value]
+      }, null, 10, Se), [
+        [q, d.value]
       ]),
-      e.displayHighlight ? (p(), A(q, {
+      e.displayHighlight ? (g(), D(N, {
         key: 0,
         color: e.highlightColor,
         rounded: e.rounded,
         offset: 2.5
-      }, null, 8, ["color", "rounded"])) : F("", !0)
+      }, null, 8, ["color", "rounded"])) : $("", !0)
+    ]));
+  }
+}), _e = { class: "relative" }, Le = ["id", "value", "checked"], je = /* @__PURE__ */ R({
+  __name: "MclCheckbox",
+  props: /* @__PURE__ */ V({
+    id: {},
+    inputSize: { default: "md" },
+    bgColor: { default: "light-1" },
+    checkedBgColor: { default: "warning" },
+    checkColor: { default: "dark-3" },
+    borderColor: { default: "dark-1" },
+    displayShadow: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !1 },
+    value: {},
+    checked: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ V(["checkbox-click"], ["update:modelValue"]),
+  setup(a, { emit: i }) {
+    const d = {
+      primary: "peer-checked/input:bg-primary",
+      secondary: "peer-checked/input:bg-secondary",
+      success: "peer-checked/input:bg-success",
+      info: "peer-checked/input:bg-info",
+      warning: "peer-checked/input:bg-warning",
+      danger: "peer-checked/input:bg-danger",
+      "light-1": "peer-checked/input:bg-light-1",
+      "light-2": "peer-checked/input:bg-light-2",
+      "light-3": "peer-checked/input:bg-light-3",
+      "light-4": "peer-checked/input:bg-light-4",
+      "dark-1": "peer-checked/input:bg-dark-1",
+      "dark-2": "peer-checked/input:bg-dark-2",
+      "dark-3": "peer-checked/input:bg-dark-3",
+      "dark-4": "peer-checked/input:bg-dark-1",
+      transparent: "peer-checked/input:bg-transparent",
+      black: "peer-checked/input:bg-black",
+      white: "peer-checked/input:bg-white"
+    }, s = {
+      primary: "before:text-primary",
+      secondary: "before:text-secondary",
+      success: "before:text-success",
+      info: "before:text-info",
+      warning: "before:text-warning",
+      danger: "before:text-danger",
+      "light-1": "before:text-light-1",
+      "light-2": "before:text-light-2",
+      "light-3": "before:text-light-3",
+      "light-4": "before:text-light-4",
+      "dark-1": "before:text-dark-1",
+      "dark-2": "before:text-dark-2",
+      "dark-3": "before:text-dark-3",
+      "dark-4": "before:text-dark-1",
+      transparent: "before:text-transparent",
+      black: "before:text-black",
+      white: "before:text-white"
+    }, e = a, c = z(a, "modelValue"), o = O(), h = i, y = () => {
+      var t;
+      (t = o.value) == null || t.click();
+    }, x = (t) => {
+      var w;
+      const f = t.target.value;
+      h(
+        "checkbox-click",
+        t,
+        o.value.checked,
+        (w = o.value) != null && w.checked ? f : ""
+      );
+    }, r = v(() => {
+      const { inputSize: t } = e;
+      return t === "sm" ? "h-xs w-xs" : t === "lg" ? "h-md w-md" : "h-sm w-sm";
+    }), u = v(() => {
+      const {
+        bgColor: t,
+        borderColor: f,
+        displayShadow: w,
+        rounded: S,
+        checkedBgColor: F,
+        checkColor: B
+      } = e, E = [
+        l("BGCOLOR", t),
+        l("BORDER", f),
+        s[B],
+        d[F]
+      ];
+      return w && E.push("drop-shadow-md"), S && E.push("rounded-md"), E.join(" ");
+    });
+    return (t, f) => (g(), k("div", _e, [
+      T(p("input", {
+        id: t.id,
+        ref_key: "checkboxRef",
+        ref: o,
+        type: "checkbox",
+        value: t.value,
+        checked: t.checked,
+        "onUpdate:modelValue": f[0] || (f[0] = (w) => c.value = w),
+        class: "appearance-none peer/input",
+        onChange: x
+      }, null, 40, Le), [
+        [H, c.value]
+      ]),
+      p("span", {
+        class: b(["relative border peer-checked/input:border-2 inline-block p-3xs hover:bg-opacity-60 peer-checked/input:hover:bg-opacity-60 peer-checked/input:before:content-['\\2713'] peer-checked/input:before:inline-block peer-checked/input:before:absolute before:top-1/2 before:-translate-y-1/2 before:left-1/2 before:-translate-x-1/2 transition-colors duration-200 ease-linear", [u.value, r.value]]),
+        onClick: y
+      }, null, 2)
     ]));
   }
 });
 export {
-  Ve as MclFormGroup,
-  Te as MclInputFile,
+  je as MclCheckbox,
+  Te as MclFormGroup,
+  ze as MclInputFile,
   Fe as MclInputRadio,
-  $e as MclInputSwitch,
-  Ee as MclInputText,
+  Ee as MclInputSwitch,
+  Ge as MclInputText,
   Ie as MclSelect,
-  ze as MclTextArea
+  Ae as MclTextArea
 };