Checkbox.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  11. var _Checkbox = _interopRequireDefault(require("../vc-checkbox/Checkbox"));
  12. var _propsUtil = require("../_util/props-util");
  13. var _warning = _interopRequireDefault(require("../_util/warning"));
  14. var _FormItemContext = require("../form/FormItemContext");
  15. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  16. var _DisabledContext = require("../config-provider/DisabledContext");
  17. var _interface = require("./interface");
  18. var _style = _interopRequireDefault(require("./style"));
  19. var __rest = void 0 && (void 0).__rest || function (s, e) {
  20. var t = {};
  21. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  22. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  23. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  24. }
  25. return t;
  26. };
  27. // CSSINJS
  28. var _default = exports.default = (0, _vue.defineComponent)({
  29. compatConfig: {
  30. MODE: 3
  31. },
  32. name: 'ACheckbox',
  33. inheritAttrs: false,
  34. __ANT_CHECKBOX: true,
  35. props: (0, _interface.checkboxProps)(),
  36. // emits: ['change', 'update:checked'],
  37. setup(props, _ref) {
  38. let {
  39. emit,
  40. attrs,
  41. slots,
  42. expose
  43. } = _ref;
  44. const formItemContext = (0, _FormItemContext.useInjectFormItemContext)();
  45. const formItemInputContext = _FormItemContext.FormItemInputContext.useInject();
  46. const {
  47. prefixCls,
  48. direction,
  49. disabled
  50. } = (0, _useConfigInject.default)('checkbox', props);
  51. const contextDisabled = (0, _DisabledContext.useInjectDisabled)();
  52. // style
  53. const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
  54. const checkboxGroup = (0, _vue.inject)(_interface.CheckboxGroupContextKey, undefined);
  55. const uniId = Symbol('checkboxUniId');
  56. const mergedDisabled = (0, _vue.computed)(() => {
  57. return (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled.value) || disabled.value;
  58. });
  59. (0, _vue.watchEffect)(() => {
  60. if (!props.skipGroup && checkboxGroup) {
  61. checkboxGroup.registerValue(uniId, props.value);
  62. }
  63. });
  64. (0, _vue.onBeforeUnmount)(() => {
  65. if (checkboxGroup) {
  66. checkboxGroup.cancelValue(uniId);
  67. }
  68. });
  69. (0, _vue.onMounted)(() => {
  70. (0, _warning.default)(!!(props.checked !== undefined || checkboxGroup || props.value === undefined), 'Checkbox', '`value` is not validate prop, do you mean `checked`?');
  71. });
  72. const handleChange = event => {
  73. const targetChecked = event.target.checked;
  74. emit('update:checked', targetChecked);
  75. emit('change', event);
  76. formItemContext.onFieldChange();
  77. };
  78. const checkboxRef = (0, _vue.ref)();
  79. const focus = () => {
  80. var _a;
  81. (_a = checkboxRef.value) === null || _a === void 0 ? void 0 : _a.focus();
  82. };
  83. const blur = () => {
  84. var _a;
  85. (_a = checkboxRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  86. };
  87. expose({
  88. focus,
  89. blur
  90. });
  91. return () => {
  92. var _a;
  93. const children = (0, _propsUtil.flattenChildren)((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
  94. const {
  95. indeterminate,
  96. skipGroup,
  97. id = formItemContext.id.value
  98. } = props,
  99. restProps = __rest(props, ["indeterminate", "skipGroup", "id"]);
  100. const {
  101. onMouseenter,
  102. onMouseleave,
  103. onInput,
  104. class: className,
  105. style
  106. } = attrs,
  107. restAttrs = __rest(attrs, ["onMouseenter", "onMouseleave", "onInput", "class", "style"]);
  108. const checkboxProps = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, restProps), {
  109. id,
  110. prefixCls: prefixCls.value
  111. }), restAttrs), {
  112. disabled: mergedDisabled.value
  113. });
  114. if (checkboxGroup && !skipGroup) {
  115. checkboxProps.onChange = function () {
  116. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  117. args[_key] = arguments[_key];
  118. }
  119. emit('change', ...args);
  120. checkboxGroup.toggleOption({
  121. label: children,
  122. value: props.value
  123. });
  124. };
  125. checkboxProps.name = checkboxGroup.name.value;
  126. checkboxProps.checked = checkboxGroup.mergedValue.value.includes(props.value);
  127. checkboxProps.disabled = mergedDisabled.value || contextDisabled.value;
  128. checkboxProps.indeterminate = indeterminate;
  129. } else {
  130. checkboxProps.onChange = handleChange;
  131. }
  132. const classString = (0, _classNames.default)({
  133. [`${prefixCls.value}-wrapper`]: true,
  134. [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
  135. [`${prefixCls.value}-wrapper-checked`]: checkboxProps.checked,
  136. [`${prefixCls.value}-wrapper-disabled`]: checkboxProps.disabled,
  137. [`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput
  138. }, className, hashId.value);
  139. const checkboxClass = (0, _classNames.default)({
  140. [`${prefixCls.value}-indeterminate`]: indeterminate
  141. }, hashId.value);
  142. const ariaChecked = indeterminate ? 'mixed' : undefined;
  143. return wrapSSR((0, _vue.createVNode)("label", {
  144. "class": classString,
  145. "style": style,
  146. "onMouseenter": onMouseenter,
  147. "onMouseleave": onMouseleave
  148. }, [(0, _vue.createVNode)(_Checkbox.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
  149. "aria-checked": ariaChecked
  150. }, checkboxProps), {}, {
  151. "class": checkboxClass,
  152. "ref": checkboxRef
  153. }), null), children.length ? (0, _vue.createVNode)("span", null, [children]) : null]));
  154. };
  155. }
  156. });