Group.js 4.5 KB

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