{"version":3,"file":"radio-group2.mjs","sources":["../../../../../../packages/components/radio/src/radio-group.vue"],"sourcesContent":["<template>\r\n  <div\r\n    ref=\"radioGroupRef\"\r\n    class=\"sg-radio-group\"\r\n    role=\"radiogroup\"\r\n    @keydown=\"handleKeydown\"\r\n  >\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  nextTick,\r\n  provide,\r\n  onMounted,\r\n  ref,\r\n  reactive,\r\n  toRefs,\r\n  watch\r\n} from 'vue'\r\nimport { EVENT_CODE } from '@sgui-plus/utils/aria'\r\nimport { UPDATE_MODEL_EVENT } from '@sgui-plus/utils/constants'\r\nimport { useFormItem } from '@sgui-plus/hooks/use-form-item'\r\nimport { debugWarn } from '@sgui-plus/utils/error'\r\nimport { RadioGroupContextKey } from './constants'\r\nimport { radioGroupEmits, radioGroupProps } from './radio-group'\r\nimport type { RadioGroupProps } from '..'\r\n\r\nexport default defineComponent({\r\n  name: 'SgRadioGroup',\r\n  props: radioGroupProps,\r\n  emits: radioGroupEmits,\r\n\r\n  setup(props, ctx) {\r\n    const radioGroupRef = ref<HTMLDivElement>()\r\n    const { formItem } = useFormItem()\r\n\r\n    const changeEvent = (value: RadioGroupProps['modelValue']) => {\r\n      ctx.emit(UPDATE_MODEL_EVENT, value)\r\n      nextTick(() => ctx.emit('onChange', value))\r\n    }\r\n\r\n    const handleKeydown = (e: KeyboardEvent) => {\r\n      if (!radioGroupRef.value) return\r\n\r\n      // 左右上下按键 可以在 radio 组内切换不同选项\r\n      const target = e.target as HTMLInputElement\r\n      const className =\r\n        target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]'\r\n      const radios =\r\n        radioGroupRef.value.querySelectorAll<HTMLInputElement>(className)\r\n      const length = radios.length\r\n      const index = Array.from(radios).indexOf(target)\r\n      const roleRadios =\r\n        radioGroupRef.value.querySelectorAll<HTMLInputElement>('[role=radio]')\r\n\r\n      let nextIndex: number | null = null\r\n      switch (e.code) {\r\n        case EVENT_CODE.left:\r\n        case EVENT_CODE.up:\r\n          e.stopPropagation()\r\n          e.preventDefault()\r\n          nextIndex = index === 0 ? length - 1 : index - 1\r\n          break\r\n        case EVENT_CODE.right:\r\n        case EVENT_CODE.down:\r\n          e.stopPropagation()\r\n          e.preventDefault()\r\n          nextIndex = index === length - 1 ? 0 : index + 1\r\n          break\r\n        default:\r\n          break\r\n      }\r\n      if (nextIndex === null) return\r\n      roleRadios[nextIndex].click()\r\n      roleRadios[nextIndex].focus()\r\n    }\r\n\r\n    onMounted(() => {\r\n      const radios =\r\n        radioGroupRef.value!.querySelectorAll<HTMLInputElement>('[type=radio]')\r\n      const firstLabel = radios[0]\r\n      if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {\r\n        firstLabel.tabIndex = 0\r\n      }\r\n    })\r\n\r\n    provide(\r\n      RadioGroupContextKey,\r\n      reactive({\r\n        ...toRefs(props),\r\n        changeEvent,\r\n      })\r\n    )\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      () => {\r\n        if (props.validateEvent) {\r\n          formItem?.validate('change').catch((err) => debugWarn(err))\r\n        }\r\n      }\r\n    )\r\n\r\n    return {\r\n      radioGroupRef,\r\n      handleKeydown,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;SAEQ,WAAe,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACd,EAAA,OAAAA,SAAA,EAAiB,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IACtB,GAAI,EAAA,eAAA;AAAA,IACH,KAAA,EAAA,gBAAA;AAAA,IAAA,IAAA,EAAA,YAAA;IAED,SAAa,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,aAAA,IAAA,IAAA,CAAA,aAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,GAAA,EAAA;;;;;;;;"}