@bobbykim/mcl-forms 0.6.0 → 0.7.0

package/dist/mcl-forms.js

@@ -0,0 +1,589 @@
+(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({
+  __name: "MclFormGroup",
+  props: {
+    labelFor: {},
+    textColor: { default: "dark-3" },
+    textSize: { default: "md" },
+    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)
+      ];
+      return v && e.push("font-bold"), e.join(" ");
+    });
+    return (i, n) => (p(), y("div", null, [
+      c("label", {
+        for: i.labelFor,
+        class: "inline-block"
+      }, [
+        z(i.$slots, "label", {}, () => [
+          c("p", {
+            class: m(["mb-2xs", r.value])
+          }, E(i.label), 3)
+        ])
+      ], 8, se),
+      z(i.$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({
+  __name: "MclInputFile",
+  props: {
+    id: {},
+    displayBorder: { type: Boolean, default: !1 },
+    borderColor: { default: "light-4" },
+    rounded: { type: Boolean, default: !1 },
+    bgColor: { default: "light-1" },
+    buttonText: { default: "Browse File" },
+    buttonTextColor: { default: "dark-3" },
+    buttonColor: { default: "light-4" },
+    displayShadow: { type: Boolean, default: !0 },
+    textColor: { default: "black" },
+    displayClear: { type: Boolean, default: !1 },
+    isRequired: { type: Boolean, default: !1 },
+    accept: { default: "image/jpg,image/jpeg,image/png" },
+    modelValue: {}
+  },
+  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)
+      ];
+      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 (t, k) => (p(), y("div", {
+      class: m(["flex items-center overflow-hidden", x.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(), y("input", {
+        type: "file",
+        id: t.id,
+        ref_key: "inputRef",
+        ref: n,
+        class: m(["file:hidden w-full bg-transparent", [l.value]]),
+        required: t.isRequired,
+        accept: t.accept,
+        key: v.value,
+        onChange: s
+      }, null, 42, ie)),
+      t.displayClear ? (p(), y("div", {
+        key: 0,
+        class: "self-stretch my-3xs mr-3xs",
+        onClick: d
+      }, [
+        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]]),
+          "aria-label": "clear"
+        }, [
+          (p(), y("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 384 512",
+            class: m(["h-xs", L(o)("SVGFILL", t.buttonTextColor)])
+          }, ue, 2))
+        ], 2)
+      ])) : F("", !0)
+    ], 2));
+  }
+}), ce = { class: "flex items-center" }, pe = ["id", "value", "checked"], Fe = /* @__PURE__ */ R({
+  __name: "MclInputRadio",
+  props: {
+    id: {},
+    radioSize: { default: "md" },
+    bgColor: { default: "success" },
+    checkedColor: { default: "light-1" },
+    displayShadow: { type: Boolean, default: !1 },
+    value: { default: "" },
+    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)
+      ];
+      return w && t.push("drop-shadow-md"), t.join(" ");
+    }), x = (l) => {
+      const C = l.target.value;
+      n("change", l, C);
+    };
+    return (l, C) => (p(), y("div", ce, [
+      c("input", {
+        id: l.id,
+        type: "radio",
+        class: "appearance-none peer",
+        ref_key: "radioRef",
+        ref: i,
+        value: l.value,
+        checked: l.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, 2)
+    ]));
+  }
+}), he = ["id"], fe = /* @__PURE__ */ R({
+  __name: "MclInputSwitch",
+  props: {
+    id: {},
+    sliderColor: { default: "light-1" },
+    onColor: { default: "success" },
+    offColor: { default: "dark-1" },
+    switchSize: { default: "md" },
+    rounded: { type: Boolean, default: !0 },
+    modelValue: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(u, { emit: f }) {
+    const r = u, i = f, n = B(), v = {
+      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"
+    }, 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" ? {
+      "--switch-width": "30px",
+      "--switch-height": "17px",
+      "--slider-size": "13px",
+      "--gutter-size": "2px"
+    } : r.switchSize === "lg" ? {
+      "--switch-width": "60px",
+      "--switch-height": "34px",
+      "--slider-size": "26px",
+      "--gutter-size": "4px"
+    } : {
+      "--switch-width": "45px",
+      "--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]
+      ];
+      return t && k.push("rounded-full before:rounded-full"), k.join(" ");
+    });
+    return (l, C) => (p(), y("div", {
+      class: "switch relative",
+      style: M(d.value),
+      onClick: e
+    }, [
+      I(c("input", {
+        id: l.id,
+        class: "hidden peer/input",
+        "onUpdate:modelValue": C[0] || (C[0] = (w) => s.value = w),
+        ref_key: "inputRef",
+        ref: n,
+        type: "checkbox"
+      }, null, 8, he), [
+        [W, s.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])
+      }, 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({
+  __name: "InputHighlight",
+  props: {
+    color: { default: "primary" },
+    rounded: { type: Boolean, default: !1 },
+    offset: { default: 1 }
+  },
+  setup(u) {
+    const f = u, r = {
+      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(" ");
+    });
+    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])
+    }, 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({
+  __name: "MclInputText",
+  props: {
+    id: {},
+    displayBorder: { type: Boolean, default: !1 },
+    borderColor: { default: "light-4" },
+    rounded: { type: Boolean, default: !1 },
+    displayHighlight: { type: Boolean, default: !0 },
+    highlightColor: { default: "primary" },
+    textcolor: { default: "black" },
+    bgColor: { default: "light-1" },
+    placeholder: { default: "" },
+    type: { default: "text" },
+    displayShadow: { type: Boolean, default: !0 },
+    required: { type: Boolean, default: !1 },
+    modelValue: {},
+    invalidFeedback: {},
+    minLength: {},
+    maxLength: {},
+    pattern: {}
+  },
+  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(() => {
+      const {
+        bgColor: e,
+        displayBorder: s,
+        borderColor: d,
+        displayHighlight: x,
+        displayShadow: l,
+        rounded: C,
+        textcolor: w
+      } = r, t = [
+        o("BGCOLOR", e),
+        o("TEXTCOLOR", w)
+      ];
+      return s && (t.push("border-2"), t.push(o("BORDER", d))), x || (t.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(" ");
+    });
+    return (e, s) => (p(), y("div", null, [
+      I(c("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),
+        placeholder: e.placeholder,
+        required: e.required,
+        minlength: e.minLength,
+        maxlength: e.maxLength,
+        pattern: e.pattern
+      }, null, 10, ge), [
+        [Y, n.value]
+      ]),
+      e.displayHighlight ? (p(), A(q, {
+        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)
+        ])
+      ])
+    ]));
+  }
+}), 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 = {
+  key: 0,
+  class: "absolute"
+}, Be = ["onClick"], _e = /* @__PURE__ */ R({
+  __name: "MclSelect",
+  props: {
+    id: {},
+    displayBorder: { type: Boolean, default: !1 },
+    borderColor: { default: "light-4" },
+    rounded: { type: Boolean, default: !1 },
+    displayHighlight: { type: Boolean, default: !0 },
+    highlightColor: { default: "primary" },
+    textcolor: { default: "black" },
+    bgColor: { default: "light-1" },
+    iconColor: { default: "dark-4" },
+    placeholder: { default: "" },
+    displayShadow: { type: Boolean, default: !0 },
+    required: { type: Boolean, default: !1 },
+    options: {},
+    selectColor: { default: "primary" },
+    invalidFeedback: { default: "No match." },
+    modelValue: {}
+  },
+  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(() => {
+      const {
+        bgColor: a,
+        displayBorder: g,
+        borderColor: b,
+        displayHighlight: $,
+        displayShadow: S,
+        rounded: U,
+        textcolor: X
+      } = r, T = [
+        o("BGCOLOR", a),
+        o("TEXTCOLOR", X)
+      ];
+      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 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"]),
+      ref_key: "componentRef",
+      ref: n
+    }, [
+      c("div", {
+        class: m(["p-2xs flex relative gap-3xs", [
+          !a.displayHighlight && s.value && L(o)("RINGCOLOR", a.borderColor) + " ring-4",
+          _.value
+        ]])
+      }, [
+        I(c("input", {
+          id: a.id,
+          type: "text",
+          class: "w-full bg-transparent outline-none",
+          "onUpdate:modelValue": g[0] || (g[0] = (b) => d.value = b),
+          ref_key: "inputBox",
+          ref: v,
+          role: "combobox",
+          placeholder: a.placeholder,
+          "aria-autocomplete": "list",
+          "aria-expanded": s.value,
+          onFocus: x
+        }, null, 40, ye), [
+          [H, d.value]
+        ]),
+        c("div", {
+          class: m(["flex items-center px-3xs", [
+            d.value === "" ? "hidden cursor-text" : "block cursor-pointer"
+          ]]),
+          onClick: t
+        }, [
+          (p(), y("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 384 512",
+            class: m(["h-xs opacity-70", [L(o)("SVGFILL", a.iconColor)]])
+          }, Ce, 2))
+        ], 2),
+        c("div", {
+          class: "flex items-center px-3xs",
+          onClick: w
+        }, [
+          (p(), y("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 320 512",
+            class: m(["h-xs", [
+              s.value ? "rotate-180" : "rotate-0",
+              "transition-transform duration-300 ease-in",
+              L(o)("SVGFILL", a.iconColor)
+            ]])
+          }, we, 2))
+        ])
+      ], 2),
+      a.displayHighlight ? (p(), y("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)
+        ]])
+      }, 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),
+              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)]]),
+                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", {
+                key: 0,
+                class: m(["p-2xs cursor-pointer", [L(o)("HVBGCOLOR", a.selectColor)]])
+              }, [
+                z(a.$slots, "no-match", {}, () => [
+                  c("span", null, E(a.invalidFeedback), 1)
+                ], !0)
+              ], 2)) : F("", !0)
+            ], 6)
+          ])) : F("", !0)
+        ]),
+        _: 3
+      })
+    ], 32)), [
+      [L(re), C]
+    ]);
+  }
+});
+const Ie = /* @__PURE__ */ j(_e, [["__scopeId", "data-v-aa593ff3"]]), Oe = ["id", "placeholder", "required", "rows"], ze = /* @__PURE__ */ R({
+  __name: "MclTextArea",
+  props: {
+    id: {},
+    displayBorder: { type: Boolean, default: !1 },
+    borderColor: { default: "light-4" },
+    rounded: { type: Boolean, default: !1 },
+    displayHighlight: { type: Boolean, default: !0 },
+    highlightColor: { default: "primary" },
+    bgColor: { default: "light-1" },
+    textcolor: { default: "black" },
+    placeholder: { default: "" },
+    displayShadow: { type: Boolean, default: !0 },
+    required: { type: Boolean, default: !1 },
+    rows: { default: 5 },
+    modelValue: {}
+  },
+  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(() => {
+      const {
+        bgColor: e,
+        displayBorder: s,
+        borderColor: d,
+        displayHighlight: x,
+        displayShadow: l,
+        rounded: C,
+        textcolor: w
+      } = r, t = [
+        o("BGCOLOR", e),
+        o("TEXTCOLOR", w)
+      ];
+      return s && (t.push("border-2"), t.push(o("BORDER", d))), x || (t.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(" ");
+    });
+    return (e, s) => (p(), y("div", null, [
+      I(c("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),
+        placeholder: e.placeholder,
+        required: e.required,
+        rows: e.rows
+      }, null, 10, Oe), [
+        [H, n.value]
+      ]),
+      e.displayHighlight ? (p(), A(q, {
+        key: 0,
+        color: e.highlightColor,
+        rounded: e.rounded,
+        offset: 2.5
+      }, null, 8, ["color", "rounded"])) : F("", !0)
+    ]));
+  }
+});
+export {
+  Ve as MclFormGroup,
+  Te as MclInputFile,
+  Fe as MclInputRadio,
+  $e as MclInputSwitch,
+  Ee as MclInputText,
+  Ie as MclSelect,
+  ze as MclTextArea
+};

package/dist/mcl-forms.umd.cjs

@@ -0,0 +1,2 @@
+(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)}})();
+(function(b,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme","@vueuse/core"],e):(b=typeof globalThis<"u"?globalThis:b||self,e(b.MclForms={},b.Vue,b.ManguitoTheme,b.core))})(this,function(b,e,l,L){"use strict";const N=["for"],T=e.defineComponent({__name:"MclFormGroup",props:{labelFor:{},textColor:{default:"dark-3"},textSize:{default:"md"},textBold:{type:Boolean,default:!1},label:{}},setup(p){const u=p;e.useSlots();const n=e.computed(()=>{const{textColor:d,textSize:s,textBold:m}=u,o=[l("TEXTCOLOR",d),l("BODYTEXT",s)];return m&&o.push("font-bold"),o.join(" ")});return(d,s)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("label",{for:d.labelFor,class:"inline-block"},[e.renderSlot(d.$slots,"label",{},()=>[e.createElementVNode("p",{class:e.normalizeClass(["mb-2xs",n.value])},e.toDisplayString(d.label),3)])],8,N),e.renderSlot(d.$slots,"default")]))}}),M={class:"shrink-0 my-3xs ml-3xs mr-xs"},F=["id","required","accept"],$=[e.createElementVNode("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)],I=e.defineComponent({__name:"MclInputFile",props:{id:{},displayBorder:{type:Boolean,default:!1},borderColor:{default:"light-4"},rounded:{type:Boolean,default:!1},bgColor:{default:"light-1"},buttonText:{default:"Browse File"},buttonTextColor:{default:"dark-3"},buttonColor:{default:"light-4"},displayShadow:{type:Boolean,default:!0},textColor:{default:"black"},displayClear:{type:Boolean,default:!1},isRequired:{type:Boolean,default:!1},accept:{default:"image/jpg,image/jpeg,image/png"},modelValue:{}},emits:["update:modelValue"],setup(p,{emit:u}){const n=p,d=u,s=e.ref(),m=e.ref(0),o=()=>{s.value.click()},i=t=>{const y=t.target.files[0];d("update:modelValue",y)},c=()=>{d("update:modelValue",null),m.value++},B=e.computed(()=>{const{rounded:t,displayBorder:y,borderColor:C,displayShadow:_,bgColor:O}=n,w=[l("BGCOLOR",O)];return t&&w.push("rounded-md"),y&&(w.push("border-2"),w.push(l("BORDER",C))),_&&w.push("shadow-md"),w.join(" ")}),r=e.computed(()=>{const{textColor:t}=n;return[l("TEXTCOLOR",t)].join(" ")}),g=e.computed(()=>{const{buttonColor:t,buttonTextColor:y,rounded:C}=n,_=[l("BGCOLOR",t),l("TEXTCOLOR",y)];return C&&_.push("rounded-l-md"),_.join(" ")}),k=e.computed(()=>{const{buttonColor:t,rounded:y}=n,C=[l("BGCOLOR",t)];return y&&C.push("rounded-r-md"),C.join(" ")});return(t,y)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center overflow-hidden",B.value])},[e.createElementVNode("div",M,[e.createElementVNode("button",{class:e.normalizeClass(["px-xs py-2xs hover:bg-opacity-70 transition-all duration-200 ease-linear max-w-full",g.value]),onClick:o},e.toDisplayString(t.buttonText),3)]),(e.openBlock(),e.createElementBlock("input",{type:"file",id:t.id,ref_key:"inputRef",ref:s,class:e.normalizeClass(["file:hidden w-full bg-transparent",[r.value]]),required:t.isRequired,accept:t.accept,key:m.value,onChange:i},null,42,F)),t.displayClear?(e.openBlock(),e.createElementBlock("div",{key:0,class:"self-stretch my-3xs mr-3xs",onClick:c},[e.createElementVNode("button",{class:e.normalizeClass(["px-xs py-2xs h-full flex items-center hover:bg-opacity-70 transition-all duration-200 ease-linear",[k.value]]),"aria-label":"clear"},[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",class:e.normalizeClass(["h-xs",e.unref(l)("SVGFILL",t.buttonTextColor)])},$,2))],2)])):e.createCommentVNode("",!0)],2))}}),G={class:"flex items-center"},D=["id","value","checked"],j=e.defineComponent({__name:"MclInputRadio",props:{id:{},radioSize:{default:"md"},bgColor:{default:"success"},checkedColor:{default:"light-1"},displayShadow:{type:Boolean,default:!1},value:{default:""},checked:{type:Boolean,default:!1}},emits:["change"],setup(p,{emit:u}){const n=p,d=e.ref(),s=u,m=()=>{var r;(r=d.value)==null||r.click()},o=e.computed(()=>{const{radioSize:r}=n;return r==="sm"?"h-xs w-xs":r==="lg"?"h-md w-md":"h-sm w-sm"}),i=e.computed(()=>{const{radioSize:r}=n;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]"}),c=e.computed(()=>{const{bgColor:r,checkedColor:g,displayShadow:k}=n,t=[l("BGCOLOR",r),l("BEFOREBG",g)];return k&&t.push("drop-shadow-md"),t.join(" ")}),B=r=>{const g=r.target.value;s("change",r,g)};return(r,g)=>(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("input",{id:r.id,type:"radio",class:"appearance-none peer",ref_key:"radioRef",ref:d,value:r.value,checked:r.checked,onChange:B},null,40,D),e.createElementVNode("span",{class:e.normalizeClass(["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,i.value,c.value]]),onClick:m},null,2)]))}}),q=["id"],A=e.defineComponent({__name:"MclInputSwitch",props:{id:{},sliderColor:{default:"light-1"},onColor:{default:"success"},offColor:{default:"dark-1"},switchSize:{default:"md"},rounded:{type:Boolean,default:!0},modelValue:{type:Boolean}},emits:["update:modelValue"],setup(p,{emit:u}){const n=p,d=u,s=e.ref(),m={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"},o=()=>{var r;(r=s.value)==null||r.click()},i=e.computed({get(){return n.modelValue},set(r){d("update:modelValue",r)}}),c=e.computed(()=>n.switchSize==="sm"?{"--switch-width":"30px","--switch-height":"17px","--slider-size":"13px","--gutter-size":"2px"}:n.switchSize==="lg"?{"--switch-width":"60px","--switch-height":"34px","--slider-size":"26px","--gutter-size":"4px"}:{"--switch-width":"45px","--switch-height":"25.5px","--slider-size":"19.5px","--gutter-size":"3px"}),B=e.computed(()=>{const{sliderColor:r,onColor:g,offColor:k,rounded:t}=n,y=[l("BGCOLOR",k),l("BEFOREBG",r),m[g]];return t&&y.push("rounded-full before:rounded-full"),y.join(" ")});return(r,g)=>(e.openBlock(),e.createElementBlock("div",{class:"switch relative",style:e.normalizeStyle(c.value),onClick:o},[e.withDirectives(e.createElementVNode("input",{id:r.id,class:"hidden peer/input","onUpdate:modelValue":g[0]||(g[0]=k=>i.value=k),ref_key:"inputRef",ref:s,type:"checkbox"},null,8,q),[[e.vModelCheckbox,i.value]]),e.createElementVNode("span",{class:e.normalizeClass(["slider absolute inset-0 cursor-pointer transition-all duration-300 before:absolute before:transition-all before:duration-300",B.value])},null,2)],4))}}),ie="",S=(p,u)=>{const n=p.__vccOpts||p;for(const[d,s]of u)n[d]=s;return n},H=S(A,[["__scopeId","data-v-8df11a40"]]),R=e.defineComponent({__name:"InputHighlight",props:{color:{default:"primary"},rounded:{type:Boolean,default:!1},offset:{default:1}},setup(p){const u=p,n={1:"-top-1",2.5:"-top-2.5"},d=e.computed(()=>{const s=[l("BEFOREBG",u.color)];return u.rounded&&s.push("rounded-b-md"),s.push(n[u.offset]),s.join(" ")});return(s,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["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",d.value])},null,2))}}),U=["id","type","placeholder","required","minlength","maxlength","pattern"],X={class:"peer-valid/validation:hidden peer-inavlid/validation:block ml-3xs"},K={class:"text-xs text-danger"},W=e.defineComponent({__name:"MclInputText",props:{id:{},displayBorder:{type:Boolean,default:!1},borderColor:{default:"light-4"},rounded:{type:Boolean,default:!1},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},textcolor:{default:"black"},bgColor:{default:"light-1"},placeholder:{default:""},type:{default:"text"},displayShadow:{type:Boolean,default:!0},required:{type:Boolean,default:!1},modelValue:{},invalidFeedback:{},minLength:{},maxLength:{},pattern:{}},emits:["update:modelValue"],setup(p,{emit:u}){const n=p,d=u,s=e.computed({get(){return n.modelValue},set(o){d("update:modelValue",o)}}),m=e.computed(()=>{const{bgColor:o,displayBorder:i,borderColor:c,displayHighlight:B,displayShadow:r,rounded:g,textcolor:k}=n,t=[l("BGCOLOR",o),l("TEXTCOLOR",k)];return i&&(t.push("border-2"),t.push(l("BORDER",c))),B||(t.push("focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear"),t.push(l("FOCUSRING",c))),r&&t.push("shadow-md"),g&&t.push("rounded-md"),t.join(" ")});return(o,i)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives(e.createElementVNode("input",{id:o.id,type:o.type,class:e.normalizeClass(["w-full p-2xs outline-none peer peer/validation",m.value]),"onUpdate:modelValue":i[0]||(i[0]=c=>s.value=c),placeholder:o.placeholder,required:o.required,minlength:o.minLength,maxlength:o.maxLength,pattern:o.pattern},null,10,U),[[e.vModelDynamic,s.value]]),o.displayHighlight?(e.openBlock(),e.createBlock(R,{key:0,color:o.highlightColor,rounded:o.rounded},null,8,["color","rounded"])):e.createCommentVNode("",!0),e.createElementVNode("div",X,[e.renderSlot(o.$slots,"invalid-feedback",{},()=>[e.createElementVNode("span",K,e.toDisplayString(o.invalidFeedback),1)])])]))}}),z=p=>(e.pushScopeId("data-v-aa593ff3"),p=p(),e.popScopeId(),p),P=["id","placeholder","aria-expanded"],Y=[z(()=>e.createElementVNode("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))],J=[z(()=>e.createElementVNode("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))],Q={key:0,class:"absolute"},Z=["onClick"],v=e.defineComponent({__name:"MclSelect",props:{id:{},displayBorder:{type:Boolean,default:!1},borderColor:{default:"light-4"},rounded:{type:Boolean,default:!1},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},textcolor:{default:"black"},bgColor:{default:"light-1"},iconColor:{default:"dark-4"},placeholder:{default:""},displayShadow:{type:Boolean,default:!0},required:{type:Boolean,default:!1},options:{},selectColor:{default:"primary"},invalidFeedback:{default:"No match."},modelValue:{}},emits:["update:modelValue"],setup(p,{emit:u}){const n=p,d=u,s=e.ref(),m=e.ref(),o=e.ref(),i=e.ref(!1),c=e.ref(""),B=()=>{i.value=!0},r=()=>{var a;c.value="",i.value=!1,(a=m.value)==null||a.blur(),d("update:modelValue","")},g=()=>{i.value=!1},k=()=>{var a;i.value=!i.value,i.value===!0&&((a=m.value)==null||a.focus())},t=a=>{a.preventDefault(),c.value!==""&&(c.value=""),d("update:modelValue","")},y=(a,f)=>{a.preventDefault(),c.value=typeof f=="string"?f:f.text;const h=typeof f=="string"?f:f.value;d("update:modelValue",h),i.value=!1},C=e.computed(()=>{const{bgColor:a,displayBorder:f,borderColor:h,displayHighlight:E,displayShadow:x,rounded:re,textcolor:ne}=n,V=[l("BGCOLOR",a),l("TEXTCOLOR",ne)];return f&&(V.push("border-2"),V.push(l("BORDER",h))),E||V.push("ring-offset-2 transition-all duration-300 ease-linear"),x&&V.push("shadow-md"),re&&V.push("rounded-md"),V.join(" ")}),_=(a,f)=>{const h=[l("BEFOREBG",a)];return f&&h.push("rounded-b-md"),h.join(" ")},O=e.computed(()=>{const{displayHighlight:a,bgColor:f,borderColor:h,rounded:E}=n,x=[l("BGCOLOR",f),l("BORDER",h)];return a||x.push("mt-2xs"),E&&x.push("rounded-md"),x.join(" ")}),w=e.computed(()=>c.value===""?n.options:n.options.filter(f=>{const h=new RegExp(`${c.value}`,"gi");return typeof f=="string"?f.match(h):f.text.match(h)})),le=e.computed(()=>({width:`${o.value}px`}));return L.useResizeObserver(s,()=>{s.value&&(o.value=s.value.clientWidth)}),(a,f)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{onKeyup:e.withKeys(r,["esc"]),ref_key:"componentRef",ref:s},[e.createElementVNode("div",{class:e.normalizeClass(["p-2xs flex relative gap-3xs",[!a.displayHighlight&&i.value&&e.unref(l)("RINGCOLOR",a.borderColor)+" ring-4",C.value]])},[e.withDirectives(e.createElementVNode("input",{id:a.id,type:"text",class:"w-full bg-transparent outline-none","onUpdate:modelValue":f[0]||(f[0]=h=>c.value=h),ref_key:"inputBox",ref:m,role:"combobox",placeholder:a.placeholder,"aria-autocomplete":"list","aria-expanded":i.value,onFocus:B},null,40,P),[[e.vModelText,c.value]]),e.createElementVNode("div",{class:e.normalizeClass(["flex items-center px-3xs",[c.value===""?"hidden cursor-text":"block cursor-pointer"]]),onClick:t},[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",class:e.normalizeClass(["h-xs opacity-70",[e.unref(l)("SVGFILL",a.iconColor)]])},Y,2))],2),e.createElementVNode("div",{class:"flex items-center px-3xs",onClick:k},[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",class:e.normalizeClass(["h-xs",[i.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in",e.unref(l)("SVGFILL",a.iconColor)]])},J,2))])],2),a.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["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",[i.value?"before:w-full":"before:w-0",_(a.highlightColor,a.rounded)]])},null,2)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"options"},{default:e.withCtx(()=>[i.value?(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("ul",{class:e.normalizeClass([[O.value],"max-h-[200px] overflow-y-auto border-2"]),style:e.normalizeStyle(le.value),role:"listbox"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(w.value,(h,E)=>(e.openBlock(),e.createElementBlock("li",{key:E,class:e.normalizeClass(["p-2xs cursor-pointer",[e.unref(l)("HVBGCOLOR",a.highlightColor)]]),role:"option",onClick:x=>y(x,h)},e.toDisplayString(typeof h=="string"?h:h.text),11,Z))),128)),c.value!==""&&w.value.length===0?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass(["p-2xs cursor-pointer",[e.unref(l)("HVBGCOLOR",a.selectColor)]])},[e.renderSlot(a.$slots,"no-match",{},()=>[e.createElementVNode("span",null,e.toDisplayString(a.invalidFeedback),1)],!0)],2)):e.createCommentVNode("",!0)],6)])):e.createCommentVNode("",!0)]),_:3})],32)),[[e.unref(l.vClickOutside),g]])}}),ce="",ee=S(v,[["__scopeId","data-v-aa593ff3"]]),oe=["id","placeholder","required","rows"],te=e.defineComponent({__name:"MclTextArea",props:{id:{},displayBorder:{type:Boolean,default:!1},borderColor:{default:"light-4"},rounded:{type:Boolean,default:!1},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"light-1"},textcolor:{default:"black"},placeholder:{default:""},displayShadow:{type:Boolean,default:!0},required:{type:Boolean,default:!1},rows:{default:5},modelValue:{}},emits:["update:modelValue"],setup(p,{emit:u}){const n=p,d=u,s=e.computed({get(){return n.modelValue},set(o){d("update:modelValue",o)}}),m=e.computed(()=>{const{bgColor:o,displayBorder:i,borderColor:c,displayHighlight:B,displayShadow:r,rounded:g,textcolor:k}=n,t=[l("BGCOLOR",o),l("TEXTCOLOR",k)];return i&&(t.push("border-2"),t.push(l("BORDER",c))),B||(t.push("focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear"),t.push(l("FOCUSRING",c))),r&&t.push("shadow-md"),g&&t.push("rounded-md"),t.join(" ")});return(o,i)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives(e.createElementVNode("textarea",{id:o.id,class:e.normalizeClass(["w-full p-2xs outline-none input__text peer",m.value]),"onUpdate:modelValue":i[0]||(i[0]=c=>s.value=c),placeholder:o.placeholder,required:o.required,rows:o.rows},null,10,oe),[[e.vModelText,s.value]]),o.displayHighlight?(e.openBlock(),e.createBlock(R,{key:0,color:o.highlightColor,rounded:o.rounded,offset:2.5},null,8,["color","rounded"])):e.createCommentVNode("",!0)]))}});b.MclFormGroup=T,b.MclInputFile=I,b.MclInputRadio=j,b.MclInputSwitch=H,b.MclInputText=W,b.MclSelect=ee,b.MclTextArea=te,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});