radio-group2.mjs 2.9 KB

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