maz-ui/components/MazRadio.mjs

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

import { computed as l, useId as S, defineComponent as B, ref as $, openBlock as m, createElementBlock as v, unref as f, normalizeClass as p, normalizeStyle as E, createElementVNode as i, mergeProps as I, renderSlot as V, createTextVNode as C, toDisplayString as b, createCommentVNode as R } from "vue";
import './assets/MazRadio.El2ThGGg.css';function N({
  componentName: o,
  providedId: s
}) {
  return l(() => s ?? `${o}-${S().replace(/:/g, "")}`);
}
const M = ["for", "aria-checked"], D = ["id", "value", "disabled", "name", "checked"], _ = { class: "m-radio__text" }, q = /* @__PURE__ */ B({
  __name: "MazRadio",
  props: {
    style: { default: void 0 },
    class: { default: void 0 },
    id: { default: void 0 },
    modelValue: { default: void 0 },
    value: {},
    name: {},
    label: { default: void 0 },
    color: { default: "primary" },
    size: { default: "md" },
    disabled: { type: Boolean, default: !1 },
    error: { type: Boolean },
    success: { type: Boolean },
    warning: { type: Boolean },
    hint: {}
  },
  emits: ["update:model-value", "change", "blur", "focus"],
  setup(o, { emit: s }) {
    const a = o, n = s, t = N({
      componentName: "MazRadio",
      providedId: a.id
    }), d = l(() => a.modelValue === a.value), h = l(() => {
      switch (a.size) {
        case "xl":
          return "2.25rem";
        case "lg":
          return "2rem";
        case "sm":
          return "1.425rem";
        case "xs":
          return "1.325rem";
        case "mini":
          return "1.2rem";
        default:
          return "1.625rem";
      }
    }), g = l(() => `var(--maz-color-${a.color})`), y = l(() => a.error ? "var(--maz-color-danger)" : a.warning ? "var(--maz-color-warning)" : a.success ? "var(--maz-color-success)" : ["black", "transparent"].includes(a.color) ? "var(--maz-color-muted)" : `var(--maz-color-${a.color}-alpha)`);
    function z(e) {
      ["Space"].includes(e.code) && (e.preventDefault(), c());
    }
    function c() {
      n("update:model-value", a.value), n("change", a.value);
    }
    const u = $();
    function w(e) {
      var r;
      (r = u.value) == null || r.dispatchEvent(new Event("blur")), n("blur", e);
    }
    function k(e) {
      var r;
      (r = u.value) == null || r.dispatchEvent(new Event("focus")), n("focus", e);
    }
    return (e, r) => (m(), v("label", {
      for: f(t),
      class: p(["m-radio m-reset-css", [{ "--disabled": e.disabled, "--selected": d.value, "--error": e.error, "--warning": e.warning, "--success": e.success }, a.class]]),
      tabindex: "0",
      role: "radio",
      style: E([e.style, { "--radio-size": h.value, "--radio-selected-color": g.value, "--radio-box-shadow": y.value }]),
      "aria-checked": d.value,
      onBlur: w,
      onFocus: k,
      onKeydown: z
    }, [
      i("input", I({
        id: f(t),
        ref_key: "inputRef",
        ref: u,
        value: e.value
      }, e.$attrs, {
        tabindex: "-1",
        disabled: e.disabled,
        name: e.name,
        type: "radio",
        checked: d.value,
        onChange: r[0] || (r[0] = (H) => c())
      }), null, 16, D),
      r[1] || (r[1] = i(
        "span",
        null,
        [
          i("span", { class: "round" })
        ],
        -1
        /* HOISTED */
      )),
      i("div", _, [
        V(e.$slots, "default", {
          isSelected: d.value,
          value: e.value
        }, () => [
          C(
            b(e.label),
            1
            /* TEXT */
          )
        ], !0),
        e.hint ? (m(), v(
          "span",
          {
            key: 0,
            class: p(["m-radio__hint", {
              "--error": e.error,
              "--success": e.success,
              "--warning": e.warning
            }])
          },
          b(e.hint),
          3
          /* TEXT, CLASS */
        )) : R("v-if", !0)
      ])
    ], 46, M));
  }
}), F = (o, s) => {
  const a = o.__vccOpts || o;
  for (const [n, t] of s)
    a[n] = t;
  return a;
}, O = /* @__PURE__ */ F(q, [["__scopeId", "data-v-54e93b9f"]]);
export {
  O as default
};