Checkbox.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.checkboxProps = void 0;
  7. var _vue = require("vue");
  8. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  9. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  10. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  11. var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
  12. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  13. var _propsUtil = require("../_util/props-util");
  14. var _excluded = ["prefixCls", "name", "id", "type", "disabled", "readonly", "tabindex", "autofocus", "value", "required"];
  15. var checkboxProps = {
  16. prefixCls: String,
  17. name: String,
  18. id: String,
  19. type: String,
  20. defaultChecked: {
  21. type: [Boolean, Number],
  22. default: undefined
  23. },
  24. checked: {
  25. type: [Boolean, Number],
  26. default: undefined
  27. },
  28. disabled: Boolean,
  29. tabindex: {
  30. type: [Number, String]
  31. },
  32. readonly: Boolean,
  33. autofocus: Boolean,
  34. value: _vueTypes.default.any,
  35. required: Boolean
  36. };
  37. exports.checkboxProps = checkboxProps;
  38. var _default = (0, _vue.defineComponent)({
  39. compatConfig: {
  40. MODE: 3
  41. },
  42. name: 'Checkbox',
  43. inheritAttrs: false,
  44. props: (0, _propsUtil.initDefaultProps)(checkboxProps, {
  45. prefixCls: 'rc-checkbox',
  46. type: 'checkbox',
  47. defaultChecked: false
  48. }),
  49. emits: ['click', 'change'],
  50. setup: function setup(props, _ref) {
  51. var attrs = _ref.attrs,
  52. emit = _ref.emit,
  53. expose = _ref.expose;
  54. var checked = (0, _vue.ref)(props.checked === undefined ? props.defaultChecked : props.checked);
  55. var inputRef = (0, _vue.ref)();
  56. (0, _vue.watch)(function () {
  57. return props.checked;
  58. }, function () {
  59. checked.value = props.checked;
  60. });
  61. expose({
  62. focus: function focus() {
  63. var _inputRef$value;
  64. (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 ? void 0 : _inputRef$value.focus();
  65. },
  66. blur: function blur() {
  67. var _inputRef$value2;
  68. (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 ? void 0 : _inputRef$value2.blur();
  69. }
  70. });
  71. var eventShiftKey = (0, _vue.ref)();
  72. var handleChange = function handleChange(e) {
  73. if (props.disabled) {
  74. return;
  75. }
  76. if (props.checked === undefined) {
  77. checked.value = e.target.checked;
  78. }
  79. e.shiftKey = eventShiftKey.value;
  80. var eventObj = {
  81. target: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
  82. checked: e.target.checked
  83. }),
  84. stopPropagation: function stopPropagation() {
  85. e.stopPropagation();
  86. },
  87. preventDefault: function preventDefault() {
  88. e.preventDefault();
  89. },
  90. nativeEvent: e
  91. };
  92. // fix https://github.com/vueComponent/ant-design-vue/issues/3047
  93. // 受控模式下维持现有状态
  94. if (props.checked !== undefined) {
  95. inputRef.value.checked = !!props.checked;
  96. }
  97. emit('change', eventObj);
  98. eventShiftKey.value = false;
  99. };
  100. var onClick = function onClick(e) {
  101. emit('click', e);
  102. // onChange没能获取到shiftKey,使用onClick hack
  103. eventShiftKey.value = e.shiftKey;
  104. };
  105. return function () {
  106. var _classNames;
  107. var prefixCls = props.prefixCls,
  108. name = props.name,
  109. id = props.id,
  110. type = props.type,
  111. disabled = props.disabled,
  112. readonly = props.readonly,
  113. tabindex = props.tabindex,
  114. autofocus = props.autofocus,
  115. value = props.value,
  116. required = props.required,
  117. others = (0, _objectWithoutProperties2.default)(props, _excluded);
  118. var className = attrs.class,
  119. onFocus = attrs.onFocus,
  120. onBlur = attrs.onBlur,
  121. onKeydown = attrs.onKeydown,
  122. onKeypress = attrs.onKeypress,
  123. onKeyup = attrs.onKeyup;
  124. var othersAndAttrs = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), attrs);
  125. var globalProps = Object.keys(othersAndAttrs).reduce(function (prev, key) {
  126. if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
  127. prev[key] = othersAndAttrs[key];
  128. }
  129. return prev;
  130. }, {});
  131. var classString = (0, _classNames2.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-checked"), checked.value), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
  132. var inputProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({
  133. name: name,
  134. id: id,
  135. type: type,
  136. readonly: readonly,
  137. disabled: disabled,
  138. tabindex: tabindex,
  139. class: "".concat(prefixCls, "-input"),
  140. checked: !!checked.value,
  141. autofocus: autofocus,
  142. value: value
  143. }, globalProps), {}, {
  144. onChange: handleChange,
  145. onClick: onClick,
  146. onFocus: onFocus,
  147. onBlur: onBlur,
  148. onKeydown: onKeydown,
  149. onKeypress: onKeypress,
  150. onKeyup: onKeyup,
  151. required: required
  152. });
  153. return (0, _vue.createVNode)("span", {
  154. "class": classString
  155. }, [(0, _vue.createVNode)("input", (0, _objectSpread2.default)({
  156. "ref": inputRef
  157. }, inputProps), null), (0, _vue.createVNode)("span", {
  158. "class": "".concat(prefixCls, "-inner")
  159. }, null)]);
  160. };
  161. }
  162. });
  163. exports.default = _default;