maz-ui/dist/components/MazRadio.js

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

import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, mergeProps, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazRadio.B0B3P1QS.css';const _hoisted_1 = ["for", "aria-checked"], _hoisted_2 = ["id", "value", "disabled", "name", "checked"], _hoisted_3 = { class: "m-radio__text" }, _sfc_main = /* @__PURE__ */ defineComponent({
  __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(__props, { emit: __emit }) {
    const props = __props, emits = __emit, instanceId = useInstanceUniqId({
      componentName: "MazRadio",
      providedId: props.id
    }), inputRef = ref(), isFocused = ref(!1), isSelected = computed(() => props.modelValue === props.value), radioSize = computed(() => {
      switch (props.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";
      }
    }), radioSelectedColor = computed(() => `hsl(var(--maz-${props.color}))`), radioBoxShadow = computed(() => props.error && !isFocused.value ? "hsl(var(--maz-destructive))" : props.warning && !isFocused.value ? "hsl(var(--maz-warning))" : props.success && !isFocused.value ? "hsl(var(--maz-success))" : ["transparent", "contrast"].includes(props.color) ? "hsl(var(--maz-muted))" : `hsl(var(--maz-${props.color}) / 60%)`);
    function keyboardHandler(event) {
      ["Space"].includes(event.code) && (event.preventDefault(), emitValue());
    }
    function emitValue() {
      emits("update:model-value", props.value), emits("change", props.value);
    }
    function onBlur(event) {
      isFocused.value = !1, inputRef.value?.dispatchEvent(new Event("blur")), emits("blur", event);
    }
    function onFocus(event) {
      isFocused.value = !0, inputRef.value?.dispatchEvent(new Event("focus")), emits("focus", event);
    }
    return (_ctx, _cache) => (openBlock(), createElementBlock("label", {
      for: unref(instanceId),
      class: normalizeClass(["m-radio m-reset-css", [{ "--selected": isSelected.value, "--error": __props.error, "--warning": __props.warning, "--success": __props.success }, props.class]]),
      tabindex: "0",
      role: "radio",
      style: normalizeStyle([__props.style, { "--radio-size": radioSize.value, "--radio-selected-color": radioSelectedColor.value, "--radio-box-shadow": radioBoxShadow.value }]),
      "aria-checked": isSelected.value,
      onBlur,
      onFocus,
      onKeydown: keyboardHandler
    }, [
      createElementVNode("input", mergeProps({
        id: unref(instanceId),
        ref_key: "inputRef",
        ref: inputRef,
        value: __props.value
      }, _ctx.$attrs, {
        tabindex: "-1",
        disabled: __props.disabled,
        name: __props.name,
        type: "radio",
        checked: isSelected.value,
        onChange: _cache[0] || (_cache[0] = ($event) => emitValue())
      }), null, 16, _hoisted_2),
      _cache[1] || (_cache[1] = createElementVNode("span", null, [
        createElementVNode("span", { class: "round" })
      ], -1)),
      createElementVNode("div", _hoisted_3, [
        renderSlot(_ctx.$slots, "default", {
          isSelected: isSelected.value,
          value: __props.value
        }, () => [
          createTextVNode(toDisplayString(__props.label), 1)
        ], !0),
        __props.hint ? (openBlock(), createElementBlock("span", {
          key: 0,
          class: normalizeClass(["m-radio__hint", {
            "--error": __props.error,
            "--success": __props.success,
            "--warning": __props.warning
          }])
        }, toDisplayString(__props.hint), 3)) : createCommentVNode("", !0)
      ])
    ], 46, _hoisted_1));
  }
}), MazRadio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c9f427c1"]]);
export {
  MazRadio as default
};