element-plus
Version:
A Component Library for Vue 3
1 lines • 4.31 kB
Source Map (JSON)
{"version":3,"file":"radio-group2.mjs","sources":["../../../../../../packages/components/radio/src/radio-group.vue"],"sourcesContent":["<template>\n <div\n ref=\"radioGroupRef\"\n :class=\"ns.b('group')\"\n role=\"radiogroup\"\n @keydown=\"handleKeydown\"\n >\n <slot></slot>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n nextTick,\n provide,\n onMounted,\n ref,\n reactive,\n toRefs,\n watch,\n} from 'vue'\nimport { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { radioGroupKey } from '@element-plus/tokens'\nimport { useFormItem, useNamespace } from '@element-plus/hooks'\nimport { radioGroupEmits, radioGroupProps } from './radio-group'\nimport type { RadioGroupProps } from '..'\n\nexport default defineComponent({\n name: 'ElRadioGroup',\n props: radioGroupProps,\n emits: radioGroupEmits,\n\n setup(props, ctx) {\n const ns = useNamespace('radio')\n const radioGroupRef = ref<HTMLDivElement>()\n const { formItem } = useFormItem()\n\n const changeEvent = (value: RadioGroupProps['modelValue']) => {\n ctx.emit(UPDATE_MODEL_EVENT, value)\n nextTick(() => ctx.emit('change', value))\n }\n\n const handleKeydown = (e: KeyboardEvent) => {\n if (!radioGroupRef.value) return\n\n // 左右上下按键 可以在 radio 组内切换不同选项\n const target = e.target as HTMLInputElement\n const className =\n target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]'\n const radios =\n radioGroupRef.value.querySelectorAll<HTMLInputElement>(className)\n const length = radios.length\n const index = Array.from(radios).indexOf(target)\n const roleRadios =\n radioGroupRef.value.querySelectorAll<HTMLInputElement>('[role=radio]')\n\n let nextIndex: number | null = null\n switch (e.code) {\n case EVENT_CODE.left:\n case EVENT_CODE.up:\n e.stopPropagation()\n e.preventDefault()\n nextIndex = index === 0 ? length - 1 : index - 1\n break\n case EVENT_CODE.right:\n case EVENT_CODE.down:\n e.stopPropagation()\n e.preventDefault()\n nextIndex = index === length - 1 ? 0 : index + 1\n break\n default:\n break\n }\n if (nextIndex === null) return\n roleRadios[nextIndex].click()\n roleRadios[nextIndex].focus()\n }\n\n onMounted(() => {\n const radios =\n radioGroupRef.value!.querySelectorAll<HTMLInputElement>('[type=radio]')\n const firstLabel = radios[0]\n if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {\n firstLabel.tabIndex = 0\n }\n })\n\n provide(\n radioGroupKey,\n reactive({\n ...toRefs(props),\n changeEvent,\n })\n )\n\n watch(\n () => props.modelValue,\n () => formItem?.validate('change')\n )\n\n return {\n ns,\n radioGroupRef,\n handleKeydown,\n }\n },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;;AA4BA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,KAAK;AAChB,UAAM,KAAK,aAAa;AACxB,UAAM,gBAAgB;AACtB,UAAM,EAAE,aAAa;AAErB,UAAM,cAAc,CAAC,UAAyC;AAC5D,UAAI,KAAK,oBAAoB;AAC7B,eAAS,MAAM,IAAI,KAAK,UAAU;AAAA;AAGpC,UAAM,gBAAgB,CAAC,MAAqB;AAC1C,UAAI,CAAC,cAAc;AAAO;AAG1B,YAAM,SAAS,EAAE;AACjB,YAAM,YACJ,OAAO,aAAa,UAAU,iBAAiB;AACjD,YAAM,SACJ,cAAc,MAAM,iBAAmC;AACzD,YAAM,SAAS,OAAO;AACtB,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ;AACzC,YAAM,aACJ,cAAc,MAAM,iBAAmC;AAEzD,UAAI,YAA2B;AAC/B,cAAQ,EAAE;AAAA,aACH,WAAW;AAAA,aACX,WAAW;AACd,YAAE;AACF,YAAE;AACF,sBAAY,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC/C;AAAA,aACG,WAAW;AAAA,aACX,WAAW;AACd,YAAE;AACF,YAAE;AACF,sBAAY,UAAU,SAAS,IAAI,IAAI,QAAQ;AAC/C;AAAA;AAEA;AAAA;AAEJ,UAAI,cAAc;AAAM;AACxB,iBAAW,WAAW;AACtB,iBAAW,WAAW;AAAA;AAGxB,cAAU,MAAM;AACd,YAAM,SACJ,cAAc,MAAO,iBAAmC;AAC1D,YAAM,aAAa,OAAO;AAC1B,UAAI,CAAC,MAAM,KAAK,QAAQ,KAAK,CAAC,UAAU,MAAM,YAAY,YAAY;AACpE,mBAAW,WAAW;AAAA;AAAA;AAI1B,YACE,eACA,SAAS;AAAA,SACJ,OAAO;AAAA,MACV;AAAA;AAIJ,UACE,MAAM,MAAM,YACZ,MAAM,mBAAmB;AAG3B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;2BAvGJ,wBAOM;SANAA,aAAeC;AAAA,IAClB,KAAK;AAAA,IACN,OAAKC,eAAY;AAAA,IAChB;AAAA;KAED;AAAA;;;;;;;"}