maz-ui/dist/components/MazRadioButtons.js

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

import { defineComponent, ref, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, Fragment, renderList, normalizeStyle, unref, renderSlot, createVNode, Transition, withCtx, withDirectives, vShow, createTextVNode, toDisplayString } from "vue";
import { MazCheck } from "@maz-ui/icons";
import { g as getColor } from "../chunks/types.D0Bp_UhS.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazRadioButtons.ThdNE411.css';const _hoisted_1 = { class: "m-radio-buttons m-reset-css" }, _hoisted_2 = ["for", "aria-checked", "onKeydown", "onBlur", "onFocus"], _hoisted_3 = ["id", "name", "value", "onChange"], _hoisted_4 = {
  key: 0,
  class: "m-radio-buttons__items__checkbox"
}, _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "MazRadioButtons",
  props: {
    modelValue: { default: void 0 },
    options: {},
    name: { default: "MazButtonsRadio" },
    color: { default: "primary" },
    elevation: { type: Boolean, default: !1 },
    orientation: { default: "row" },
    wrap: { type: Boolean, default: !0 },
    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: {},
    size: { default: "md" }
  },
  emits: ["update:model-value", "change", "blur", "focus"],
  setup(__props, { emit: __emit }) {
    const props = __props, emits = __emit;
    function selectOption(option) {
      emits("update:model-value", option.value), emits("change", option.value);
    }
    function isSelected(value) {
      return props.modelValue === value;
    }
    function keyboardHandler(event, option) {
      ["Space"].includes(event.code) && (event.preventDefault(), selectOption(option));
    }
    function getOptionId(option, i) {
      return `option-${i}-${option.value.toString()}-${props.name}`;
    }
    const inputRef = ref();
    function onBlur(index, event) {
      inputRef.value?.[index]?.dispatchEvent(new Event("blur")), emits("blur", event);
    }
    function onFocus(index, event) {
      inputRef.value?.[index]?.dispatchEvent(new Event("focus")), emits("focus", event);
    }
    return (_ctx, _cache) => (openBlock(), createElementBlock("div", _hoisted_1, [
      createElementVNode("div", {
        class: normalizeClass(["m-radio-buttons__wrapper", [`--${_ctx.orientation}`, { "--wrap": _ctx.wrap, "--block": _ctx.block }]])
      }, [
        (openBlock(!0), createElementBlock(Fragment, null, renderList(_ctx.options, (option, i) => (openBlock(), createElementBlock("label", {
          key: getOptionId(option, i),
          for: getOptionId(option, i),
          class: normalizeClass(["m-radio-buttons__items maz-group", [
            `--size-${_ctx.size}`,
            {
              "--is-selected": isSelected(option.value),
              "--elevation": _ctx.elevation,
              "--equal-size": _ctx.equalSize
            },
            option.classes
          ]]),
          tabindex: "0",
          style: normalizeStyle([
            isSelected(option.value) ? {
              color: `hsl(var(--maz-${unref(getColor)(_ctx.color)}-foreground))`,
              backgroundColor: `hsl(var(--maz-${unref(getColor)(_ctx.color)}))`
            } : {},
            option.style
          ]),
          role: "radio",
          "aria-checked": isSelected(option.value),
          onKeydown: ($event) => keyboardHandler($event, option),
          onBlur: ($event) => onBlur(i, $event),
          onFocus: ($event) => onFocus(i, $event)
        }, [
          createElementVNode("input", {
            id: getOptionId(option, i),
            ref_for: !0,
            ref_key: "inputRef",
            ref: inputRef,
            type: "radio",
            tabindex: "-1",
            name: _ctx.name,
            value: option.value,
            class: "maz-hidden",
            onChange: ($event) => selectOption(option)
          }, null, 40, _hoisted_3),
          _ctx.selector ? (openBlock(), createElementBlock("div", _hoisted_4, [
            createElementVNode("span", {
              class: normalizeClass({
                "--is-selected": isSelected(option.value)
              }),
              style: normalizeStyle([
                isSelected(option.value) ? { backgroundColor: `hsl(var(--maz-${unref(getColor)(props.color)}-600))` } : {}
              ])
            }, [
              createVNode(Transition, { name: "maz-radio-buttons-scale" }, {
                default: withCtx(() => [
                  withDirectives(createVNode(unref(MazCheck), { class: "maz-size-full" }, null, 512), [
                    [vShow, isSelected(option.value)]
                  ])
                ]),
                _: 2
              }, 1024)
            ], 6)
          ])) : createCommentVNode("", !0),
          renderSlot(_ctx.$slots, "default", {
            option,
            selected: isSelected(option.value)
          }, () => [
            createTextVNode(toDisplayString(option.label), 1)
          ], !0)
        ], 46, _hoisted_2))), 128))
      ], 2),
      _ctx.hint ? (openBlock(), createElementBlock("span", {
        key: 0,
        class: normalizeClass(["m-radio-buttons__hint", {
          "--error": _ctx.error,
          "--success": _ctx.success,
          "--warning": _ctx.warning
        }])
      }, toDisplayString(_ctx.hint), 3)) : createCommentVNode("", !0)
    ]));
  }
}), MazRadioButtons = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6936abec"]]);
export {
  MazRadioButtons as default
};