Group.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import { nextTick, defineComponent, ref, watch, computed } from 'vue';
  4. import classNames from '../_util/classNames';
  5. import PropTypes from '../_util/vue-types';
  6. import Radio from './Radio';
  7. import useConfigInject from '../config-provider/hooks/useConfigInject';
  8. import { booleanType, stringType, arrayType, functionType } from '../_util/type';
  9. import { useInjectFormItemContext } from '../form/FormItemContext';
  10. import { useProvideRadioGroupContext } from './context';
  11. // CSSINJS
  12. import useStyle from './style';
  13. const RadioGroupSizeTypes = ['large', 'default', 'small'];
  14. export const radioGroupProps = () => ({
  15. prefixCls: String,
  16. value: PropTypes.any,
  17. size: stringType(),
  18. options: arrayType(),
  19. disabled: booleanType(),
  20. name: String,
  21. buttonStyle: stringType('outline'),
  22. id: String,
  23. optionType: stringType('default'),
  24. onChange: functionType(),
  25. 'onUpdate:value': functionType()
  26. });
  27. export default defineComponent({
  28. compatConfig: {
  29. MODE: 3
  30. },
  31. name: 'ARadioGroup',
  32. inheritAttrs: false,
  33. props: radioGroupProps(),
  34. // emits: ['update:value', 'change'],
  35. setup(props, _ref) {
  36. let {
  37. slots,
  38. emit,
  39. attrs
  40. } = _ref;
  41. const formItemContext = useInjectFormItemContext();
  42. const {
  43. prefixCls,
  44. direction,
  45. size
  46. } = useConfigInject('radio', props);
  47. // Style
  48. const [wrapSSR, hashId] = useStyle(prefixCls);
  49. const stateValue = ref(props.value);
  50. const updatingValue = ref(false);
  51. watch(() => props.value, val => {
  52. stateValue.value = val;
  53. updatingValue.value = false;
  54. });
  55. const onRadioChange = ev => {
  56. const lastValue = stateValue.value;
  57. const {
  58. value
  59. } = ev.target;
  60. if (!('value' in props)) {
  61. stateValue.value = value;
  62. }
  63. // nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
  64. if (!updatingValue.value && value !== lastValue) {
  65. updatingValue.value = true;
  66. emit('update:value', value);
  67. emit('change', ev);
  68. formItemContext.onFieldChange();
  69. }
  70. nextTick(() => {
  71. updatingValue.value = false;
  72. });
  73. };
  74. useProvideRadioGroupContext({
  75. onChange: onRadioChange,
  76. value: stateValue,
  77. disabled: computed(() => props.disabled),
  78. name: computed(() => props.name),
  79. optionType: computed(() => props.optionType)
  80. });
  81. return () => {
  82. var _a;
  83. const {
  84. options,
  85. buttonStyle,
  86. id = formItemContext.id.value
  87. } = props;
  88. const groupPrefixCls = `${prefixCls.value}-group`;
  89. const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
  90. [`${groupPrefixCls}-${size.value}`]: size.value,
  91. [`${groupPrefixCls}-rtl`]: direction.value === 'rtl'
  92. }, attrs.class, hashId.value);
  93. let children = null;
  94. if (options && options.length > 0) {
  95. children = options.map(option => {
  96. if (typeof option === 'string' || typeof option === 'number') {
  97. return _createVNode(Radio, {
  98. "key": option,
  99. "prefixCls": prefixCls.value,
  100. "disabled": props.disabled,
  101. "value": option,
  102. "checked": stateValue.value === option
  103. }, {
  104. default: () => [option]
  105. });
  106. }
  107. const {
  108. value,
  109. disabled,
  110. label
  111. } = option;
  112. return _createVNode(Radio, {
  113. "key": `radio-group-value-options-${value}`,
  114. "prefixCls": prefixCls.value,
  115. "disabled": disabled || props.disabled,
  116. "value": value,
  117. "checked": stateValue.value === value
  118. }, {
  119. default: () => [label]
  120. });
  121. });
  122. } else {
  123. children = (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
  124. }
  125. return wrapSSR(_createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  126. "class": classString,
  127. "id": id
  128. }), [children]));
  129. };
  130. }
  131. });