maz-ui/components/MazCheckbox.mjs

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

import { computed as t, useId as N, openBlock as h, createElementBlock as p, createElementVNode as u, defineComponent as E, ref as _, unref as m, normalizeClass as f, normalizeStyle as c, mergeProps as A, createVNode as $, renderSlot as M, createTextVNode as D, toDisplayString as w, createCommentVNode as R } from "vue";
import './assets/MazCheckbox.CA7GJd2c.css';function j({
  componentName: l,
  providedId: a
}) {
  return t(() => a ?? `${l}-${N().replace(/:/g, "")}`);
}
const q = {
  xmlns: "http://www.w3.org/2000/svg",
  width: "1em",
  height: "1em",
  fill: "none",
  viewBox: "0 0 24 24"
};
function F(l, a) {
  return h(), p("svg", q, a[0] || (a[0] = [
    u(
      "path",
      {
        stroke: "currentColor",
        "stroke-linecap": "round",
        "stroke-linejoin": "round",
        "stroke-width": "1.5",
        d: "m4.5 12.75 6 6 9-13.5"
      },
      null,
      -1
      /* HOISTED */
    )
  ]));
}
const H = { render: F }, K = ["for", "aria-checked"], O = ["id", "checked", "disabled", "name"], P = { class: "m-checkbox__text" }, T = /* @__PURE__ */ E({
  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(l, { emit: a }) {
    const o = l, n = a, s = j({
      componentName: "MazCheckbox",
      providedId: o.id
    }), b = t(
      () => typeof o.value != "boolean" && Array.isArray(o.modelValue) ? o.modelValue.includes(o.value) : typeof o.modelValue == "boolean" ? o.modelValue : !1
    ), v = t(() => {
      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";
      }
    }), z = t(() => {
      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 = t(() => o.color === "theme" ? "var(--maz-color-bg)" : `var(--maz-color-${o.color}-contrast)`), V = t(() => o.color === "theme" ? "var(--maz-color-bg-theme)" : `var(--maz-color-${o.color})`), k = t(() => 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(), y(o.value ?? !o.modelValue));
    }
    function B(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((r) => r !== e) : [...o.modelValue, e] : [e];
    }
    function y(e) {
      const r = B(e);
      n("update:model-value", r), n("change", r);
    }
    const d = _();
    function S(e) {
      var r;
      (r = d.value) == null || r.dispatchEvent(new Event("blur")), n("blur", e);
    }
    function I(e) {
      var r;
      (r = d.value) == null || r.dispatchEvent(new Event("focus")), n("focus", e);
    }
    return (e, r) => (h(), p("label", {
      for: m(s),
      class: f(["m-checkbox m-reset-css", [{ "--disabled": e.disabled, "--error": e.error, "--warning": e.warning, "--success": e.success }, o.class]]),
      tabindex: "0",
      style: c([e.style, { "--checkbox-selected-color": V.value, "--checkbox-box-shadow-color": k.value }]),
      role: "checkbox",
      "aria-checked": b.value,
      onKeydown: C,
      onBlur: S,
      onFocus: I
    }, [
      u("input", A({
        id: m(s),
        ref_key: "inputRef",
        ref: d,
        checked: b.value
      }, e.$attrs, {
        tabindex: "-1",
        disabled: e.disabled,
        name: e.name,
        type: "checkbox",
        onChange: r[0] || (r[0] = (i) => {
          var g;
          return y(e.value ?? ((g = i == null ? void 0 : i.target) == null ? void 0 : g.checked));
        })
      }), null, 16, O),
      u(
        "span",
        {
          style: c({ width: v.value, height: v.value })
        },
        [
          $(m(H), {
            class: f(["check-icon", z.value]),
            style: c({ color: x.value })
          }, null, 8, ["class", "style"])
        ],
        4
        /* STYLE */
      ),
      u("div", P, [
        M(e.$slots, "default", { value: e.value }, () => [
          D(
            w(e.label),
            1
            /* TEXT */
          )
        ], !0),
        e.hint ? (h(), p(
          "span",
          {
            key: 0,
            class: f(["m-checkbox__hint", {
              "--error": e.error,
              "--success": e.success,
              "--warning": e.warning
            }]),
            style: c({ boxShadow: `0 0 0 0.125rem ${k.value}` })
          },
          w(e.hint),
          7
          /* TEXT, CLASS, STYLE */
        )) : R("v-if", !0)
      ])
    ], 46, K));
  }
}), U = (l, a) => {
  const o = l.__vccOpts || l;
  for (const [n, s] of a)
    o[n] = s;
  return o;
}, J = /* @__PURE__ */ U(T, [["__scopeId", "data-v-66c21eaf"]]);
export {
  J as default
};