maz-ui/components/MazRadioButtons.mjs

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

import { defineComponent as C, defineAsyncComponent as S, ref as $, openBlock as u, createElementBlock as c, createElementVNode as y, normalizeClass as i, Fragment as E, renderList as V, normalizeStyle as b, createVNode as k, Transition as R, withCtx as F, withDirectives as N, unref as q, vShow as D, createCommentVNode as _, renderSlot as I, createTextVNode as M, toDisplayString as z } from "vue";
import './assets/MazRadioButtons.CB6qMCtm.css';const O = { class: "m-radio-buttons m-reset-css" }, K = ["for", "aria-checked", "onKeydown", "onBlur", "onFocus"], T = ["id", "name", "value", "onChange"], W = {
  key: 0,
  class: "m-radio-buttons__items__checkbox"
}, A = /* @__PURE__ */ C({
  __name: "MazRadioButtons",
  props: {
    modelValue: { default: void 0 },
    options: {},
    name: { default: "MazButtonsRadio" },
    color: { default: "primary" },
    elevation: { type: Boolean, default: !1 },
    orientation: { default: "row" },
    noWrap: { type: Boolean, default: !1 },
    equalSize: { type: Boolean, default: !1 },
    selector: { type: Boolean, default: !1 },
    block: { type: Boolean, default: !1 },
    error: { type: Boolean },
    success: { type: Boolean },
    warning: { type: Boolean },
    hint: {}
  },
  emits: ["update:model-value", "change", "blur", "focus"],
  setup(d, { emit: f }) {
    const l = d, s = f, m = S(() => import("./chunks/check.BmubdHc_.mjs"));
    function h(e) {
      s("update:model-value", e.value);
    }
    function n(e) {
      return l.modelValue === e;
    }
    function B(e, t) {
      ["Space"].includes(e.code) && (e.preventDefault(), h(t));
    }
    function v(e, t) {
      return `option-${t}-${e.value.toString()}-${l.name}`;
    }
    const p = $();
    function g(e, t) {
      var a, o;
      (o = (a = p.value) == null ? void 0 : a[e]) == null || o.dispatchEvent(new Event("blur")), s("blur", t);
    }
    function w(e, t) {
      var a, o;
      (o = (a = p.value) == null ? void 0 : a[e]) == null || o.dispatchEvent(new Event("focus")), s("focus", t);
    }
    return (e, t) => (u(), c("div", O, [
      y(
        "div",
        {
          class: i(["m-radio-buttons__wrapper", [`--${e.orientation}`, { "--no-wrap": e.noWrap, "--block": e.block }]])
        },
        [
          (u(!0), c(
            E,
            null,
            V(e.options, (a, o) => (u(), c("label", {
              key: v(a, o),
              for: v(a, o),
              class: i(["m-radio-buttons__items maz-group", [
                {
                  "--is-selected": n(a.value),
                  "--elevation": e.elevation,
                  "--equal-size": e.equalSize
                },
                a.classes
              ]]),
              tabindex: "0",
              style: b([
                n(a.value) ? {
                  color: `var(--maz-color-${e.color}-contrast)`,
                  backgroundColor: `var(--maz-color-${e.color})`
                } : {},
                a.style
              ]),
              role: "radio",
              "aria-checked": n(a.value),
              onKeydown: (r) => B(r, a),
              onBlur: (r) => g(o, r),
              onFocus: (r) => w(o, r)
            }, [
              y("input", {
                id: v(a, o),
                ref_for: !0,
                ref_key: "inputRef",
                ref: p,
                type: "radio",
                tabindex: "-1",
                name: e.name,
                value: a.value,
                class: "maz-hidden",
                onChange: (r) => h(a)
              }, null, 40, T),
              e.selector ? (u(), c("div", W, [
                y(
                  "span",
                  {
                    class: i({
                      "--is-selected": n(a.value)
                    }),
                    style: b([
                      n(a.value) ? { backgroundColor: `var(--maz-color-${l.color}-600)` } : {}
                    ])
                  },
                  [
                    k(
                      R,
                      {
                        name: "maz-radio-buttons-scale",
                        persisted: ""
                      },
                      {
                        default: F(() => [
                          N(k(
                            q(m),
                            { class: "maz-h-full maz-w-full" },
                            null,
                            512
                            /* NEED_PATCH */
                          ), [
                            [D, n(a.value)]
                          ])
                        ]),
                        _: 2
                        /* DYNAMIC */
                      },
                      1024
                      /* DYNAMIC_SLOTS */
                    )
                  ],
                  6
                  /* CLASS, STYLE */
                )
              ])) : _("v-if", !0),
              I(e.$slots, "default", {
                option: a,
                selected: n(a.value)
              }, () => [
                M(
                  z(a.label),
                  1
                  /* TEXT */
                )
              ], !0)
            ], 46, K))),
            128
            /* KEYED_FRAGMENT */
          ))
        ],
        2
        /* CLASS */
      ),
      e.hint ? (u(), c(
        "span",
        {
          key: 0,
          class: i(["m-radio-buttons__hint", {
            "--error": e.error,
            "--success": e.success,
            "--warning": e.warning
          }])
        },
        z(e.hint),
        3
        /* TEXT, CLASS */
      )) : _("v-if", !0)
    ]));
  }
}), H = (d, f) => {
  const l = d.__vccOpts || d;
  for (const [s, m] of f)
    l[s] = m;
  return l;
}, j = /* @__PURE__ */ H(A, [["__scopeId", "data-v-4dea30c9"]]);
export {
  j as default
};