Checkbox.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  4. var _excluded = ["indeterminate", "skipGroup", "id"],
  5. _excluded2 = ["onMouseenter", "onMouseleave", "onInput", "class", "style"];
  6. import { createVNode as _createVNode } from "vue";
  7. import { watchEffect, onMounted, defineComponent, inject, onBeforeUnmount, ref } from 'vue';
  8. import classNames from '../_util/classNames';
  9. import VcCheckbox from '../vc-checkbox/Checkbox';
  10. import { flattenChildren } from '../_util/props-util';
  11. import warning from '../_util/warning';
  12. import { useInjectFormItemContext } from '../form/FormItemContext';
  13. import useConfigInject from '../_util/hooks/useConfigInject';
  14. import { CheckboxGroupContextKey, checkboxProps } from './interface';
  15. export default defineComponent({
  16. compatConfig: {
  17. MODE: 3
  18. },
  19. name: 'ACheckbox',
  20. inheritAttrs: false,
  21. __ANT_CHECKBOX: true,
  22. props: checkboxProps(),
  23. // emits: ['change', 'update:checked'],
  24. setup: function setup(props, _ref) {
  25. var emit = _ref.emit,
  26. attrs = _ref.attrs,
  27. slots = _ref.slots,
  28. expose = _ref.expose;
  29. var formItemContext = useInjectFormItemContext();
  30. var _useConfigInject = useConfigInject('checkbox', props),
  31. prefixCls = _useConfigInject.prefixCls,
  32. direction = _useConfigInject.direction;
  33. var checkboxGroup = inject(CheckboxGroupContextKey, undefined);
  34. var uniId = Symbol('checkboxUniId');
  35. watchEffect(function () {
  36. if (!props.skipGroup && checkboxGroup) {
  37. checkboxGroup.registerValue(uniId, props.value);
  38. }
  39. });
  40. onBeforeUnmount(function () {
  41. if (checkboxGroup) {
  42. checkboxGroup.cancelValue(uniId);
  43. }
  44. });
  45. onMounted(function () {
  46. warning(props.checked !== undefined || checkboxGroup || props.value === undefined, 'Checkbox', '`value` is not validate prop, do you mean `checked`?');
  47. });
  48. var handleChange = function handleChange(event) {
  49. var targetChecked = event.target.checked;
  50. emit('update:checked', targetChecked);
  51. emit('change', event);
  52. };
  53. var checkboxRef = ref();
  54. var focus = function focus() {
  55. var _checkboxRef$value;
  56. (_checkboxRef$value = checkboxRef.value) === null || _checkboxRef$value === void 0 ? void 0 : _checkboxRef$value.focus();
  57. };
  58. var blur = function blur() {
  59. var _checkboxRef$value2;
  60. (_checkboxRef$value2 = checkboxRef.value) === null || _checkboxRef$value2 === void 0 ? void 0 : _checkboxRef$value2.blur();
  61. };
  62. expose({
  63. focus: focus,
  64. blur: blur
  65. });
  66. return function () {
  67. var _slots$default, _classNames;
  68. var children = flattenChildren((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
  69. var indeterminate = props.indeterminate,
  70. skipGroup = props.skipGroup,
  71. _props$id = props.id,
  72. id = _props$id === void 0 ? formItemContext.id.value : _props$id,
  73. restProps = _objectWithoutProperties(props, _excluded);
  74. var onMouseenter = attrs.onMouseenter,
  75. onMouseleave = attrs.onMouseleave,
  76. onInput = attrs.onInput,
  77. className = attrs.class,
  78. style = attrs.style,
  79. restAttrs = _objectWithoutProperties(attrs, _excluded2);
  80. var checkboxProps = _objectSpread(_objectSpread({}, restProps), {}, {
  81. id: id,
  82. prefixCls: prefixCls.value
  83. }, restAttrs);
  84. if (checkboxGroup && !skipGroup) {
  85. checkboxProps.onChange = function () {
  86. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  87. args[_key] = arguments[_key];
  88. }
  89. emit.apply(void 0, ['change'].concat(args));
  90. checkboxGroup.toggleOption({
  91. label: children,
  92. value: props.value
  93. });
  94. };
  95. checkboxProps.name = checkboxGroup.name.value;
  96. checkboxProps.checked = checkboxGroup.mergedValue.value.indexOf(props.value) !== -1;
  97. checkboxProps.disabled = props.disabled || checkboxGroup.disabled.value;
  98. checkboxProps.indeterminate = indeterminate;
  99. } else {
  100. checkboxProps.onChange = handleChange;
  101. }
  102. var classString = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-wrapper"), true), _defineProperty(_classNames, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _defineProperty(_classNames, "".concat(prefixCls.value, "-wrapper-checked"), checkboxProps.checked), _defineProperty(_classNames, "".concat(prefixCls.value, "-wrapper-disabled"), checkboxProps.disabled), _classNames), className);
  103. var checkboxClass = classNames(_defineProperty({}, "".concat(prefixCls.value, "-indeterminate"), indeterminate));
  104. return _createVNode("label", {
  105. "class": classString,
  106. "style": style,
  107. "onMouseenter": onMouseenter,
  108. "onMouseleave": onMouseleave
  109. }, [_createVNode(VcCheckbox, _objectSpread(_objectSpread({}, checkboxProps), {}, {
  110. "class": checkboxClass,
  111. "ref": checkboxRef
  112. }), null), children.length ? _createVNode("span", null, [children]) : null]);
  113. };
  114. }
  115. });