Radio.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createVNode as _createVNode } from "vue";
  4. var __rest = this && this.__rest || function (s, e) {
  5. var t = {};
  6. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  7. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { computed, defineComponent, ref } from 'vue';
  13. import PropTypes from '../_util/vue-types';
  14. import VcCheckbox from '../vc-checkbox/Checkbox';
  15. import classNames from '../_util/classNames';
  16. import useConfigInject from '../config-provider/hooks/useConfigInject';
  17. import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext';
  18. import omit from '../_util/omit';
  19. import { useInjectRadioGroupContext, useInjectRadioOptionTypeContext } from './context';
  20. import { booleanType, functionType } from '../_util/type';
  21. // CSSINJS
  22. import useStyle from './style';
  23. import { useInjectDisabled } from '../config-provider/DisabledContext';
  24. export const radioProps = () => ({
  25. prefixCls: String,
  26. checked: booleanType(),
  27. disabled: booleanType(),
  28. isGroup: booleanType(),
  29. value: PropTypes.any,
  30. name: String,
  31. id: String,
  32. autofocus: booleanType(),
  33. onChange: functionType(),
  34. onFocus: functionType(),
  35. onBlur: functionType(),
  36. onClick: functionType(),
  37. 'onUpdate:checked': functionType(),
  38. 'onUpdate:value': functionType()
  39. });
  40. export default defineComponent({
  41. compatConfig: {
  42. MODE: 3
  43. },
  44. name: 'ARadio',
  45. inheritAttrs: false,
  46. props: radioProps(),
  47. setup(props, _ref) {
  48. let {
  49. emit,
  50. expose,
  51. slots,
  52. attrs
  53. } = _ref;
  54. const formItemContext = useInjectFormItemContext();
  55. const formItemInputContext = FormItemInputContext.useInject();
  56. const radioOptionTypeContext = useInjectRadioOptionTypeContext();
  57. const radioGroupContext = useInjectRadioGroupContext();
  58. const disabledContext = useInjectDisabled();
  59. const mergedDisabled = computed(() => {
  60. var _a;
  61. return (_a = disabled.value) !== null && _a !== void 0 ? _a : disabledContext.value;
  62. });
  63. const vcCheckbox = ref();
  64. const {
  65. prefixCls: radioPrefixCls,
  66. direction,
  67. disabled
  68. } = useConfigInject('radio', props);
  69. const prefixCls = computed(() => (radioGroupContext === null || radioGroupContext === void 0 ? void 0 : radioGroupContext.optionType.value) === 'button' || radioOptionTypeContext === 'button' ? `${radioPrefixCls.value}-button` : radioPrefixCls.value);
  70. const contextDisabled = useInjectDisabled();
  71. // Style
  72. const [wrapSSR, hashId] = useStyle(radioPrefixCls);
  73. const focus = () => {
  74. vcCheckbox.value.focus();
  75. };
  76. const blur = () => {
  77. vcCheckbox.value.blur();
  78. };
  79. expose({
  80. focus,
  81. blur
  82. });
  83. const handleChange = event => {
  84. const targetChecked = event.target.checked;
  85. emit('update:checked', targetChecked);
  86. emit('update:value', targetChecked);
  87. emit('change', event);
  88. formItemContext.onFieldChange();
  89. };
  90. const onChange = e => {
  91. emit('change', e);
  92. if (radioGroupContext && radioGroupContext.onChange) {
  93. radioGroupContext.onChange(e);
  94. }
  95. };
  96. return () => {
  97. var _a;
  98. const radioGroup = radioGroupContext;
  99. const {
  100. prefixCls: customizePrefixCls,
  101. id = formItemContext.id.value
  102. } = props,
  103. restProps = __rest(props, ["prefixCls", "id"]);
  104. const rProps = _extends(_extends({
  105. prefixCls: prefixCls.value,
  106. id
  107. }, omit(restProps, ['onUpdate:checked', 'onUpdate:value'])), {
  108. disabled: (_a = disabled.value) !== null && _a !== void 0 ? _a : contextDisabled.value
  109. });
  110. if (radioGroup) {
  111. rProps.name = radioGroup.name.value;
  112. rProps.onChange = onChange;
  113. rProps.checked = props.value === radioGroup.value.value;
  114. rProps.disabled = mergedDisabled.value || radioGroup.disabled.value;
  115. } else {
  116. rProps.onChange = handleChange;
  117. }
  118. const wrapperClassString = classNames({
  119. [`${prefixCls.value}-wrapper`]: true,
  120. [`${prefixCls.value}-wrapper-checked`]: rProps.checked,
  121. [`${prefixCls.value}-wrapper-disabled`]: rProps.disabled,
  122. [`${prefixCls.value}-wrapper-rtl`]: direction.value === 'rtl',
  123. [`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput
  124. }, attrs.class, hashId.value);
  125. return wrapSSR(_createVNode("label", _objectSpread(_objectSpread({}, attrs), {}, {
  126. "class": wrapperClassString
  127. }), [_createVNode(VcCheckbox, _objectSpread(_objectSpread({}, rProps), {}, {
  128. "type": "radio",
  129. "ref": vcCheckbox
  130. }), null), slots.default && _createVNode("span", null, [slots.default()])]));
  131. };
  132. }
  133. });