722452aa5a7545b01b5f333f4e75dafe86604dee1c1d220d26f14dcfd0aba6ec0edd3589696de746b6b2842ad4ab523b1b1a0dc4a082a58361cbe35e5fc791 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import { defineComponent, ref, onMounted, computed, provide, reactive, toRefs, watch, openBlock, createElementBlock, unref, normalizeClass, renderSlot, Fragment, renderList, createBlock, mergeProps, nextTick } from 'vue';
  2. import { radioGroupProps, radioGroupEmits, radioDefaultProps } from './radio-group.mjs';
  3. import { radioGroupKey } from './constants.mjs';
  4. import { isEqual } from 'lodash-unified';
  5. import Radio from './radio.mjs';
  6. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  7. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  8. import { useId } from '../../../hooks/use-id/index.mjs';
  9. import { useFormItem, useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';
  10. import { debugWarn } from '../../../utils/error.mjs';
  11. import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
  12. const __default__ = defineComponent({
  13. name: "ElRadioGroup"
  14. });
  15. const _sfc_main = /* @__PURE__ */ defineComponent({
  16. ...__default__,
  17. props: radioGroupProps,
  18. emits: radioGroupEmits,
  19. setup(__props, { emit }) {
  20. const props = __props;
  21. const ns = useNamespace("radio");
  22. const radioId = useId();
  23. const radioGroupRef = ref();
  24. const { formItem } = useFormItem();
  25. const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {
  26. formItemContext: formItem
  27. });
  28. const changeEvent = (value) => {
  29. emit(UPDATE_MODEL_EVENT, value);
  30. nextTick(() => emit(CHANGE_EVENT, value));
  31. };
  32. onMounted(() => {
  33. const radios = radioGroupRef.value.querySelectorAll("[type=radio]");
  34. const firstLabel = radios[0];
  35. if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {
  36. firstLabel.tabIndex = 0;
  37. }
  38. });
  39. const name = computed(() => {
  40. return props.name || radioId.value;
  41. });
  42. const aliasProps = computed(() => ({
  43. ...radioDefaultProps,
  44. ...props.props
  45. }));
  46. const getOptionProps = (option) => {
  47. const base = {
  48. label: option[aliasProps.value.label],
  49. value: option[aliasProps.value.value],
  50. disabled: option[aliasProps.value.disabled]
  51. };
  52. return { ...option, ...base };
  53. };
  54. provide(radioGroupKey, reactive({
  55. ...toRefs(props),
  56. changeEvent,
  57. name
  58. }));
  59. watch(() => props.modelValue, (newVal, oldValue) => {
  60. if (props.validateEvent && !isEqual(newVal, oldValue)) {
  61. formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
  62. }
  63. });
  64. return (_ctx, _cache) => {
  65. return openBlock(), createElementBlock("div", {
  66. id: unref(groupId),
  67. ref_key: "radioGroupRef",
  68. ref: radioGroupRef,
  69. class: normalizeClass(unref(ns).b("group")),
  70. role: "radiogroup",
  71. "aria-label": !unref(isLabeledByFormItem) ? _ctx.ariaLabel || "radio-group" : void 0,
  72. "aria-labelledby": unref(isLabeledByFormItem) ? unref(formItem).labelId : void 0
  73. }, [
  74. renderSlot(_ctx.$slots, "default", {}, () => [
  75. (openBlock(true), createElementBlock(Fragment, null, renderList(props.options, (item, index) => {
  76. return openBlock(), createBlock(Radio, mergeProps({ key: index }, getOptionProps(item)), null, 16);
  77. }), 128))
  78. ])
  79. ], 10, ["id", "aria-label", "aria-labelledby"]);
  80. };
  81. }
  82. });
  83. var RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "radio-group.vue"]]);
  84. export { RadioGroup as default };
  85. //# sourceMappingURL=radio-group2.mjs.map