maz-ui/components/chunks/MazCheckbox.CYeDQcMp.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

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.BtL5to1U.mjs";
import '../assets/MazCheckbox.CA7GJd2c.css';const H = ["for", "aria-checked"], K = ["id", "checked", "disabled", "name"], P = { class: "m-checkbox__text" }, T = /* @__PURE__ */ N({
  inheritAttrs: !1,
  __name: "MazCheckbox",
  props: {
    style: { default: void 0 },
    class: { default: void 0 },
    modelValue: { default: void 0 },
    id: { default: void 0 },
    color: { default: "primary" },
    value: { type: [String, Number, Boolean], default: void 0 },
    name: { default: "m-checkbox" },
    size: { default: "md" },
    label: { default: void 0 },
    disabled: { type: Boolean, default: !1 },
    error: { type: Boolean },
    success: { type: Boolean },
    warning: { type: Boolean },
    hint: {}
  },
  emits: ["update:model-value", "change", "blur", "focus"],
  setup(z, { emit: g }) {
    const o = z, l = g, i = $({
      componentName: "MazCheckbox",
      providedId: o.id
    }), m = r(
      () => typeof o.value != "boolean" && Array.isArray(o.modelValue) ? o.modelValue.includes(o.value) : typeof o.modelValue == "boolean" ? o.modelValue : !1
    ), f = r(() => {
      switch (o.size) {
        case "xl":
          return "2rem";
        case "lg":
          return "1.75rem";
        case "sm":
          return "1.25rem";
        case "xs":
          return "1rem";
        case "mini":
          return "0.75rem";
        default:
          return "1.5rem";
      }
    }), V = r(() => {
      switch (o.size) {
        case "xl":
          return "maz-text-2xl";
        case "lg":
          return "maz-text-xl";
        case "sm":
          return "maz-text-base";
        case "xs":
          return "maz-text-sm";
        case "mini":
          return "maz-text-xs";
        default:
          return "maz-text-lg";
      }
    }), 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 p(e) {
      const a = S(e);
      l("update:model-value", a), l("change", a);
    }
    const n = E();
    function B(e) {
      var a;
      (a = n.value) == null || a.dispatchEvent(new Event("blur")), l("blur", e);
    }
    function I(e) {
      var a;
      (a = n.value) == null || a.dispatchEvent(new Event("focus")), l("focus", e);
    }
    return (e, a) => (v(), k("label", {
      for: c(i),
      class: u(["m-checkbox m-reset-css", [{ "--disabled": e.disabled, "--error": e.error, "--warning": e.warning, "--success": e.success }, o.class]]),
      tabindex: "0",
      style: t([e.style, { "--checkbox-selected-color": w.value, "--checkbox-box-shadow-color": h.value }]),
      role: "checkbox",
      "aria-checked": m.value,
      onKeydown: C,
      onBlur: B,
      onFocus: I
    }, [
      d("input", A({
        id: c(i),
        ref_key: "inputRef",
        ref: n,
        checked: m.value
      }, e.$attrs, {
        tabindex: "-1",
        disabled: e.disabled,
        name: e.name,
        type: "checkbox",
        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, 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 ? (v(), k(
          "span",
          {
            key: 0,
            class: u(["m-checkbox__hint", {
              "--error": e.error,
              "--success": e.success,
              "--warning": e.warning
            }]),
            style: t({ boxShadow: `0 0 0 0.125rem ${h.value}` })
          },
          y(e.hint),
          7
          /* TEXT, CLASS, STYLE */
        )) : R("v-if", !0)
      ])
    ], 46, H));
  }
}), L = /* @__PURE__ */ F(T, [["__scopeId", "data-v-66c21eaf"]]);
export {
  L as default
};