import { defineComponent, ref, nextTick, onMounted, provide, reactive, toRefs, watch } from 'vue';
import { EVENT_CODE } from '../../../utils/aria.mjs';
import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
import '../../../tokens/index.mjs';
import '../../../hooks/index.mjs';
import { radioGroupProps, radioGroupEmits } from './radio-group2.mjs';
import { useFormItem } from '../../../hooks/use-form-item/index.mjs';
import { radioGroupKey } from '../../../tokens/radio.mjs';

var script = defineComponent({
  name: "ElRadioGroup",
  props: radioGroupProps,
  emits: radioGroupEmits,
  setup(props, ctx) {
    const radioGroupRef = ref();
    const { size, disabled, formItem } = useFormItem({});
    const changeEvent = (value) => {
      ctx.emit(UPDATE_MODEL_EVENT, value);
      nextTick(() => ctx.emit("change", value));
    };
    const handleKeydown = (e) => {
      if (!radioGroupRef.value)
        return;
      const target = e.target;
      const className = target.nodeName === "INPUT" ? "[type=radio]" : "[role=radio]";
      const radios = radioGroupRef.value.querySelectorAll(className);
      const length = radios.length;
      const index = Array.from(radios).indexOf(target);
      const roleRadios = radioGroupRef.value.querySelectorAll("[role=radio]");
      let nextIndex = null;
      switch (e.code) {
        case EVENT_CODE.left:
        case EVENT_CODE.up:
          e.stopPropagation();
          e.preventDefault();
          nextIndex = index === 0 ? length - 1 : index - 1;
          break;
        case EVENT_CODE.right:
        case EVENT_CODE.down:
          e.stopPropagation();
          e.preventDefault();
          nextIndex = index === length - 1 ? 0 : index + 1;
          break;
        default:
          break;
      }
      if (nextIndex === null)
        return;
      roleRadios[nextIndex].click();
      roleRadios[nextIndex].focus();
    };
    onMounted(() => {
      const radios = radioGroupRef.value.querySelectorAll("[type=radio]");
      const firstLabel = radios[0];
      if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {
        firstLabel.tabIndex = 0;
      }
    });
    provide(radioGroupKey, reactive({
      ...toRefs(props),
      changeEvent
    }));
    watch(() => props.modelValue, () => formItem == null ? void 0 : formItem.validate("change"));
    return {
      size,
      disabled,
      radioGroupRef,
      handleKeydown
    };
  }
});

export { script as default };
//# sourceMappingURL=radio-group.vue_vue_type_script_lang.mjs.map
