@oruga-ui/oruga-next/dist/esm/radio.mjs

UI components for Vue.js and CSS framework agnostic

/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
import { defineComponent, mergeModels, useTemplateRef, useSlots, useId, useModel, computed, useAttrs, createElementBlock, openBlock, normalizeClass, unref, withDirectives, createCommentVNode, createElementVNode, mergeProps, vModelRadio, renderSlot, createTextVNode, toDisplayString } from "vue";
import { g as getDefault, b as registerComponent } from "./config-Dl7tu_Ly.mjs";
import { d as defineClasses } from "./defineClasses-CWB9NuS-.mjs";
import { u as useInputHandler } from "./useInputHandler-Cv7NmM5J.mjs";
import { i as injectField } from "./fieldInjection-DJwnFcxS.mjs";
const _hoisted_1 = ["id", "name", "value", "required", "disabled", "autocomplete", "aria-checked", "aria-labelledby"];
const _hoisted_2 = ["id", "for"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    isOruga: true,
    name: "ORadio",
    configField: "radio",
    inheritAttrs: false
  },
  __name: "Radio",
  props: /* @__PURE__ */ mergeModels({
    override: { type: Boolean, default: void 0 },
    modelValue: { default: void 0 },
    variant: { default: () => getDefault("radio.variant") },
    size: { default: () => getDefault("radio.size") },
    label: { default: void 0 },
    nativeValue: { default: void 0 },
    disabled: { type: Boolean, default: false },
    required: { type: Boolean, default: false },
    name: { default: void 0 },
    autocomplete: { default: () => getDefault("radio.autocomplete", "off") },
    id: { default: () => useId() },
    useHtml5Validation: { type: Boolean, default: () => getDefault("useHtml5Validation", true) },
    customValidity: {},
    rootClass: {},
    sizeClass: {},
    variantClass: {},
    disabledClass: {},
    checkedClass: {},
    inputClass: {},
    labelClass: {}
  }, {
    "modelValue": { default: void 0 },
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["update:model-value", "input", "focus", "blur", "invalid"], ["update:modelValue"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    var _a, _b;
    const props = __props;
    const emits = __emit;
    const inputRef = useTemplateRef("inputElement");
    const { checkHtml5Validity, onBlur, onFocus, onInvalid, setFocus } = useInputHandler(
      inputRef,
      emits,
      props
    );
    const { parentField } = injectField();
    const labelId = !!parentField.value || !!props.label || !!useSlots().default ? ((_a = parentField.value) == null ? void 0 : _a.labelId) || useId() : void 0;
    if (!props.label && props.id) (_b = parentField.value) == null ? void 0 : _b.setInputId(props.id);
    const vmodel = useModel(__props, "modelValue");
    const isChecked = computed(() => vmodel.value === props.nativeValue);
    function onInput(event) {
      emits("input", vmodel.value, event);
    }
    const attrs = useAttrs();
    const inputBind = computed(() => {
      var _a2;
      return {
        ...(_a2 = parentField == null ? void 0 : parentField.value) == null ? void 0 : _a2.inputAttrs,
        ...attrs
      };
    });
    const rootClasses = defineClasses(
      ["rootClass", "o-radio"],
      [
        "sizeClass",
        "o-radio--",
        computed(() => props.size),
        computed(() => !!props.size)
      ],
      [
        "variantClass",
        "o-radio--",
        computed(() => props.variant),
        computed(() => !!props.variant)
      ],
      [
        "disabledClass",
        "o-radio--disabled",
        null,
        computed(() => props.disabled)
      ],
      ["checkedClass", "o-radio--checked", null, isChecked]
    );
    const inputClasses = defineClasses(["inputClass", "o-radio__input"]);
    const labelClasses = defineClasses(["labelClass", "o-radio__label"]);
    __expose({ checkHtml5Validity, focus: setFocus, value: vmodel });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        "data-oruga": "radio",
        class: normalizeClass(unref(rootClasses))
      }, [
        withDirectives(createElementVNode("input", mergeProps(inputBind.value, {
          id: _ctx.id,
          ref: "inputElement",
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vmodel.value = $event),
          type: "radio",
          "data-oruga-input": "radio",
          class: unref(inputClasses),
          name: _ctx.name,
          value: _ctx.nativeValue,
          required: _ctx.required,
          disabled: _ctx.disabled,
          autocomplete: _ctx.autocomplete,
          "aria-checked": isChecked.value,
          "aria-labelledby": unref(labelId),
          onBlur: _cache[1] || (_cache[1] = //@ts-ignore
          (...args) => unref(onBlur) && unref(onBlur)(...args)),
          onFocus: _cache[2] || (_cache[2] = //@ts-ignore
          (...args) => unref(onFocus) && unref(onFocus)(...args)),
          onInvalid: _cache[3] || (_cache[3] = //@ts-ignore
          (...args) => unref(onInvalid) && unref(onInvalid)(...args)),
          onChange: onInput
        }), null, 16, _hoisted_1), [
          [vModelRadio, vmodel.value]
        ]),
        _ctx.label || _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
          key: 0,
          id: unref(labelId),
          for: _ctx.id,
          class: normalizeClass(unref(labelClasses))
        }, [
          renderSlot(_ctx.$slots, "default", {}, () => [
            createTextVNode(toDisplayString(_ctx.label), 1)
          ])
        ], 10, _hoisted_2)) : createCommentVNode("", true)
      ], 2);
    };
  }
});
const index = {
  install(app) {
    registerComponent(app, _sfc_main);
  }
};
export {
  _sfc_main as ORadio,
  index as default
};
//# sourceMappingURL=radio.mjs.map