@ishitatsuyuki/oruga-next/dist/esm/Radio-9975b20d.mjs

UI components for Vue.js and CSS framework agnostic

import { defineComponent, openBlock, createBlock, withModifiers, withKeys, withDirectives, createVNode, vModelRadio, renderSlot } from 'vue';
import { B as BaseComponentMixin } from './BaseComponentMixin-d78ed3dc.mjs';
import { C as CheckRadioMixin } from './CheckRadioMixin-f5b57344.mjs';

/**
 * Select an option from a set
 * @displayName Radio
 * @style _radio.scss
 */
var script = defineComponent({
    name: 'ORadio',
    mixins: [BaseComponentMixin, CheckRadioMixin],
    configField: 'radio',
    emits: [
        'input'
    ],
    props: {
        rootClass: [String, Function, Array],
        disabledClass: [String, Function, Array],
        checkCheckedClass: [String, Function, Array],
        checkClass: [String, Function, Array],
        labelClass: [String, Function, Array],
        sizeClass: [String, Function, Array],
        variantClass: [String, Function, Array]
    },
    computed: {
        isChecked() {
            return this.modelValue === this.nativeValue;
        },
        rootClasses() {
            return [
                this.computedClass('rootClass', 'o-radio'),
                { [this.computedClass('checkedClass', 'o-radio--checked')]: this.isChecked },
                { [this.computedClass('sizeClass', 'o-radio--', this.size)]: this.size },
                { [this.computedClass('disabledClass', 'o-radio--disabled')]: this.disabled },
                { [this.computedClass('variantClass', 'o-radio--', this.variant)]: this.variant }
            ];
        },
        checkClasses() {
            return [
                this.computedClass('checkClass', 'o-radio__check'),
                { [this.computedClass('checkCheckedClass', 'o-radio__check--checked')]: this.isChecked },
            ];
        },
        labelClasses() {
            return [
                this.computedClass('labelClass', 'o-radio__label')
            ];
        }
    }
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createBlock("label", {
    class: _ctx.rootClasses,
    ref: "label",
    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.focus(...args), ["stop"])),
    onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers($event => _ctx.$refs.label.click(), ["prevent"]), ["enter"]))
  }, [withDirectives(createVNode("input", {
    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.computedValue = $event),
    type: "radio",
    ref: "input",
    onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
    class: _ctx.checkClasses,
    disabled: _ctx.disabled,
    required: _ctx.required,
    name: _ctx.name,
    value: _ctx.nativeValue
  }, null, 10
  /* CLASS, PROPS */
  , ["disabled", "required", "name", "value"]), [[vModelRadio, _ctx.computedValue]]), createVNode("span", {
    class: _ctx.labelClasses
  }, [renderSlot(_ctx.$slots, "default")], 2
  /* CLASS */
  )], 34
  /* CLASS, HYDRATE_EVENTS */
  );
}

script.render = render;
script.__file = "src/components/radio/Radio.vue";

export { script as s };