Checkbox.js 5.1 KB

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