maz-ui 3.47.2-beta.2 → 3.47.2-beta.21

package/components/chunks/{MazCheckbox-B22OcHt8.mjs → MazCheckbox-CCma_qyQ.mjs}

@@ -1,7 +1,7 @@
-import { defineComponent as I, useCssVars as N, computed as r, ref as E, openBlock as p, createElementBlock as h, unref as s, normalizeClass as c, normalizeStyle as A, createElementVNode as u, mergeProps as _, createVNode as M, renderSlot as D, createTextVNode as R, toDisplayString as b, createCommentVNode as q } from "vue";
-import { u as F, _ as H } from "./MazPhoneNumberInput-BbssOUzo.mjs";
-import K from "./check-C9Q_W85g.mjs";
-import '../assets/MazCheckbox.css';const P = ["for", "aria-checked"], T = ["id", "checked", "disabled", "name"], U = { class: "m-checkbox__text" }, $ = /* @__PURE__ */ I({
+import { defineComponent as N, computed as r, ref as E, openBlock as v, createElementBlock as k, unref as c, normalizeClass as u, normalizeStyle as t, createElementVNode as d, mergeProps as A, createVNode as M, renderSlot as _, createTextVNode as D, toDisplayString as y, createCommentVNode as R } from "vue";
+import { u as $, _ as q } from "./MazSelect-CH3JdigO.mjs";
+import F from "./check-C9Q_W85g.mjs";
+import '../assets/MazCheckbox.css';const H = ["for", "aria-checked"], K = ["id", "checked", "disabled", "name"], P = { class: "m-checkbox__text" }, T = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "MazCheckbox",
   props: {
@@ -21,19 +21,13 @@ import '../assets/MazCheckbox.css';const P = ["for", "aria-checked"], T = ["id",
     hint: {}
   },
   emits: ["update:model-value", "change", "blur", "focus"],
-  setup(v, { emit: k }) {
-    N((e) => ({
-      b7df6194: V.value,
-      "89a0ef50": y.value,
-      "199d7f11": g.value,
-      b0e1d658: x.value
-    }));
-    const o = v, l = k, d = F({
+  setup(z, { emit: g }) {
+    const o = z, l = g, i = $({
       componentName: "MazCheckbox",
       providedId: o.id
-    }), i = r(
+    }), m = r(
       () => typeof o.value != "boolean" && Array.isArray(o.modelValue) ? o.modelValue.includes(o.value) : typeof o.modelValue == "boolean" ? o.modelValue : !1
-    ), y = r(() => {
+    ), f = r(() => {
       switch (o.size) {
         case "xl":
           return "2rem";
@@ -48,7 +42,7 @@ import '../assets/MazCheckbox.css';const P = ["for", "aria-checked"], T = ["id",
         default:
           return "1.5rem";
       }
-    }), z = r(() => {
+    }), V = r(() => {
       switch (o.size) {
         case "xl":
           return "maz-text-2xl";
@@ -63,83 +57,93 @@ import '../assets/MazCheckbox.css';const P = ["for", "aria-checked"], T = ["id",
         default:
           return "maz-text-lg";
       }
-    }), V = r(() => o.color === "theme" ? "var(--maz-color-bg)" : `var(--maz-color-${o.color}-contrast)`), g = r(() => o.color === "theme" ? "var(--maz-color-bg-theme)" : `var(--maz-color-${o.color})`), x = r(() => o.error ? "var(--maz-color-danger)" : o.warning ? "var(--maz-color-warning)" : o.success ? "var(--maz-color-success)" : ["black", "transparent", "theme"].includes(o.color) ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-alpha)`);
-    function w(e) {
-      ["Space"].includes(e.code) && (e.preventDefault(), m(o.value ?? !o.modelValue));
-    }
+    }), x = r(() => o.color === "theme" ? "var(--maz-color-bg)" : `var(--maz-color-${o.color}-contrast)`), w = r(() => o.color === "theme" ? "var(--maz-color-bg-theme)" : `var(--maz-color-${o.color})`), h = r(() => o.error ? "var(--maz-color-danger)" : o.warning ? "var(--maz-color-warning)" : o.success ? "var(--maz-color-success)" : ["black", "transparent", "theme"].includes(o.color) ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-alpha)`);
     function C(e) {
+      ["Space"].includes(e.code) && (e.preventDefault(), b(o.value ?? !o.modelValue));
+    }
+    function S(e) {
       return typeof e == "boolean" && (typeof o.modelValue == "boolean" || o.modelValue === void 0 || o.modelValue === null) ? !o.modelValue : Array.isArray(o.modelValue) && typeof e != "boolean" ? o.modelValue.includes(e) ? o.modelValue.filter((a) => a !== e) : [...o.modelValue, e] : [e];
     }
-    function m(e) {
-      const a = C(e);
+    function b(e) {
+      const a = S(e);
       l("update:model-value", a), l("change", a);
     }
-    const t = E();
+    const n = E();
     function B(e) {
       var a;
-      (a = t.value) == null || a.dispatchEvent(new Event("blur")), l("blur", e);
+      (a = n.value) == null || a.dispatchEvent(new Event("blur")), l("blur", e);
     }
-    function S(e) {
+    function I(e) {
       var a;
-      (a = t.value) == null || a.dispatchEvent(new Event("focus")), l("focus", e);
+      (a = n.value) == null || a.dispatchEvent(new Event("focus")), l("focus", e);
     }
-    return (e, a) => (p(), h("label", {
-      for: s(d),
-      class: c(["m-checkbox", [{ "--disabled": e.disabled, "--error": e.error, "--warning": e.warning, "--success": e.success }, o.class]]),
+    return (e, a) => (v(), k("label", {
+      for: c(i),
+      class: u(["m-checkbox", [{ "--disabled": e.disabled, "--error": e.error, "--warning": e.warning, "--success": e.success }, o.class]]),
       tabindex: "0",
-      style: A(e.style),
+      style: t([e.style, { "--checkbox-selected-color": w.value, "--checkbox-box-shadow-color": h.value }]),
       role: "checkbox",
-      "aria-checked": i.value,
-      onKeydown: w,
+      "aria-checked": m.value,
+      onKeydown: C,
       onBlur: B,
-      onFocus: S
+      onFocus: I
     }, [
-      u("input", _({
-        id: s(d),
+      d("input", A({
+        id: c(i),
         ref_key: "inputRef",
-        ref: t,
-        checked: i.value
+        ref: n,
+        checked: m.value
       }, e.$attrs, {
         tabindex: "-1",
         disabled: e.disabled,
         name: e.name,
         type: "checkbox",
-        onChange: a[0] || (a[0] = (n) => {
-          var f;
-          return m(e.value ?? ((f = n == null ? void 0 : n.target) == null ? void 0 : f.checked));
+        onChange: a[0] || (a[0] = (s) => {
+          var p;
+          return b(e.value ?? ((p = s == null ? void 0 : s.target) == null ? void 0 : p.checked));
         })
-      }), null, 16, T),
-      u("span", null, [
-        M(s(K), {
-          class: c(["check-icon", z.value])
-        }, null, 8, ["class"])
-      ]),
-      u("div", U, [
-        D(e.$slots, "default", { value: e.value }, () => [
-          R(
-            b(e.label),
+      }), null, 16, K),
+      d(
+        "span",
+        {
+          style: t({ width: f.value, height: f.value })
+        },
+        [
+          M(c(F), {
+            class: u(["check-icon", V.value]),
+            style: t({ color: x.value })
+          }, null, 8, ["class", "style"])
+        ],
+        4
+        /* STYLE */
+      ),
+      d("div", P, [
+        _(e.$slots, "default", { value: e.value }, () => [
+          D(
+            y(e.label),
             1
             /* TEXT */
           )
         ], !0),
-        e.hint ? (p(), h(
+        e.hint ? (v(), k(
           "span",
           {
             key: 0,
-            class: c(["m-checkbox__hint", {
+            class: u(["m-checkbox__hint", {
               "--error": e.error,
               "--success": e.success,
               "--warning": e.warning
-            }])
+            }]),
+            style: t({ boxShadow: `0 0 0 0.125rem ${h.value}` })
           },
-          b(e.hint),
-          3
-          /* TEXT, CLASS */
-        )) : q("v-if", !0)
+          y(e.hint),
+          7
+          /* TEXT, CLASS, STYLE */
+        )) : R("v-if", !0)
       ])
-    ], 46, P));
+    ], 46, H));
   }
-}), L = /* @__PURE__ */ H($, [["__scopeId", "data-v-178c6a46"]]);
+}), J = /* @__PURE__ */ q(T, [["__scopeId", "data-v-65d7fb3b"]]);
 export {
-  L as default
+  J as default
 };

package/components/chunks/{MazCheckbox-Db6sPUbV.mjs → MazCheckbox-eOEEACaM.mjs}

@@ -1,8 +1,8 @@
-import { defineComponent as I, useCssVars as N, computed as r, ref as E, openBlock as p, createElementBlock as h, unref as s, normalizeClass as c, normalizeStyle as A, createElementVNode as u, mergeProps as _, createVNode as M, renderSlot as D, createTextVNode as R, toDisplayString as b, createCommentVNode as q } from "vue";
-import { u as F } from "./useInstanceUniqId-DW9jO1Sz.mjs";
-import H from "./check-C9Q_W85g.mjs";
-import { _ as K } from "./MazTable-BJDPdIJB.mjs";
-import '../assets/MazCheckbox.css';const P = ["for", "aria-checked"], T = ["id", "checked", "disabled", "name"], U = { class: "m-checkbox__text" }, $ = /* @__PURE__ */ I({
+import { defineComponent as N, computed as r, ref as E, openBlock as v, createElementBlock as k, unref as c, normalizeClass as u, normalizeStyle as t, createElementVNode as d, mergeProps as A, createVNode as M, renderSlot as _, createTextVNode as D, toDisplayString as y, createCommentVNode as R } from "vue";
+import { u as $ } from "./useInstanceUniqId-BkOfxhk8.mjs";
+import q from "./check-C9Q_W85g.mjs";
+import { _ as F } from "./MazTable-BU3Hluiu.mjs";
+import '../assets/MazCheckbox.css';const H = ["for", "aria-checked"], K = ["id", "checked", "disabled", "name"], P = { class: "m-checkbox__text" }, T = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "MazCheckbox",
   props: {
@@ -22,19 +22,13 @@ import '../assets/MazCheckbox.css';const P = ["for", "aria-checked"], T = ["id",
     hint: {}
   },
   emits: ["update:model-value", "change", "blur", "focus"],
-  setup(v, { emit: k }) {
-    N((e) => ({
-      b7df6194: V.value,
-      "89a0ef50": y.value,
-      "199d7f11": g.value,
-      b0e1d658: x.value
-    }));
-    const o = v, l = k, d = F({
+  setup(z, { emit: g }) {
+    const o = z, l = g, i = $({
       componentName: "MazCheckbox",
       providedId: o.id
-    }), i = r(
+    }), m = r(
       () => typeof o.value != "boolean" && Array.isArray(o.modelValue) ? o.modelValue.includes(o.value) : typeof o.modelValue == "boolean" ? o.modelValue : !1
-    ), y = r(() => {
+    ), f = r(() => {
       switch (o.size) {
         case "xl":
           return "2rem";
@@ -49,7 +43,7 @@ import '../assets/MazCheckbox.css';const P = ["for", "aria-checked"], T = ["id",
         default:
           return "1.5rem";
       }
-    }), z = r(() => {
+    }), V = r(() => {
       switch (o.size) {
         case "xl":
           return "maz-text-2xl";
@@ -64,83 +58,93 @@ import '../assets/MazCheckbox.css';const P = ["for", "aria-checked"], T = ["id",
         default:
           return "maz-text-lg";
       }
-    }), V = r(() => o.color === "theme" ? "var(--maz-color-bg)" : `var(--maz-color-${o.color}-contrast)`), g = r(() => o.color === "theme" ? "var(--maz-color-bg-theme)" : `var(--maz-color-${o.color})`), x = r(() => o.error ? "var(--maz-color-danger)" : o.warning ? "var(--maz-color-warning)" : o.success ? "var(--maz-color-success)" : ["black", "transparent", "theme"].includes(o.color) ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-alpha)`);
-    function w(e) {
-      ["Space"].includes(e.code) && (e.preventDefault(), m(o.value ?? !o.modelValue));
-    }
+    }), x = r(() => o.color === "theme" ? "var(--maz-color-bg)" : `var(--maz-color-${o.color}-contrast)`), w = r(() => o.color === "theme" ? "var(--maz-color-bg-theme)" : `var(--maz-color-${o.color})`), h = r(() => o.error ? "var(--maz-color-danger)" : o.warning ? "var(--maz-color-warning)" : o.success ? "var(--maz-color-success)" : ["black", "transparent", "theme"].includes(o.color) ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-alpha)`);
     function C(e) {
+      ["Space"].includes(e.code) && (e.preventDefault(), p(o.value ?? !o.modelValue));
+    }
+    function S(e) {
       return typeof e == "boolean" && (typeof o.modelValue == "boolean" || o.modelValue === void 0 || o.modelValue === null) ? !o.modelValue : Array.isArray(o.modelValue) && typeof e != "boolean" ? o.modelValue.includes(e) ? o.modelValue.filter((a) => a !== e) : [...o.modelValue, e] : [e];
     }
-    function m(e) {
-      const a = C(e);
+    function p(e) {
+      const a = S(e);
       l("update:model-value", a), l("change", a);
     }
-    const t = E();
+    const n = E();
     function B(e) {
       var a;
-      (a = t.value) == null || a.dispatchEvent(new Event("blur")), l("blur", e);
+      (a = n.value) == null || a.dispatchEvent(new Event("blur")), l("blur", e);
     }
-    function S(e) {
+    function I(e) {
       var a;
-      (a = t.value) == null || a.dispatchEvent(new Event("focus")), l("focus", e);
+      (a = n.value) == null || a.dispatchEvent(new Event("focus")), l("focus", e);
     }
-    return (e, a) => (p(), h("label", {
-      for: s(d),
-      class: c(["m-checkbox", [{ "--disabled": e.disabled, "--error": e.error, "--warning": e.warning, "--success": e.success }, o.class]]),
+    return (e, a) => (v(), k("label", {
+      for: c(i),
+      class: u(["m-checkbox", [{ "--disabled": e.disabled, "--error": e.error, "--warning": e.warning, "--success": e.success }, o.class]]),
       tabindex: "0",
-      style: A(e.style),
+      style: t([e.style, { "--checkbox-selected-color": w.value, "--checkbox-box-shadow-color": h.value }]),
       role: "checkbox",
-      "aria-checked": i.value,
-      onKeydown: w,
+      "aria-checked": m.value,
+      onKeydown: C,
       onBlur: B,
-      onFocus: S
+      onFocus: I
     }, [
-      u("input", _({
-        id: s(d),
+      d("input", A({
+        id: c(i),
         ref_key: "inputRef",
-        ref: t,
-        checked: i.value
+        ref: n,
+        checked: m.value
       }, e.$attrs, {
         tabindex: "-1",
         disabled: e.disabled,
         name: e.name,
         type: "checkbox",
-        onChange: a[0] || (a[0] = (n) => {
-          var f;
-          return m(e.value ?? ((f = n == null ? void 0 : n.target) == null ? void 0 : f.checked));
+        onChange: a[0] || (a[0] = (s) => {
+          var b;
+          return p(e.value ?? ((b = s == null ? void 0 : s.target) == null ? void 0 : b.checked));
         })
-      }), null, 16, T),
-      u("span", null, [
-        M(s(H), {
-          class: c(["check-icon", z.value])
-        }, null, 8, ["class"])
-      ]),
-      u("div", U, [
-        D(e.$slots, "default", { value: e.value }, () => [
-          R(
-            b(e.label),
+      }), null, 16, K),
+      d(
+        "span",
+        {
+          style: t({ width: f.value, height: f.value })
+        },
+        [
+          M(c(q), {
+            class: u(["check-icon", V.value]),
+            style: t({ color: x.value })
+          }, null, 8, ["class", "style"])
+        ],
+        4
+        /* STYLE */
+      ),
+      d("div", P, [
+        _(e.$slots, "default", { value: e.value }, () => [
+          D(
+            y(e.label),
             1
             /* TEXT */
           )
         ], !0),
-        e.hint ? (p(), h(
+        e.hint ? (v(), k(
           "span",
           {
             key: 0,
-            class: c(["m-checkbox__hint", {
+            class: u(["m-checkbox__hint", {
               "--error": e.error,
               "--success": e.success,
               "--warning": e.warning
-            }])
+            }]),
+            style: t({ boxShadow: `0 0 0 0.125rem ${h.value}` })
           },
-          b(e.hint),
-          3
-          /* TEXT, CLASS */
-        )) : q("v-if", !0)
+          y(e.hint),
+          7
+          /* TEXT, CLASS, STYLE */
+        )) : R("v-if", !0)
       ])
-    ], 46, P));
+    ], 46, H));
   }
-}), O = /* @__PURE__ */ K($, [["__scopeId", "data-v-178c6a46"]]);
+}), L = /* @__PURE__ */ F(T, [["__scopeId", "data-v-65d7fb3b"]]);
 export {
-  O as default
+  L as default
 };