Checkbox.js 5.6 KB

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