index.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import { createVNode as _createVNode } from "vue";
  4. import { defineComponent, onBeforeMount, ref, computed, onMounted, nextTick, watch } from 'vue';
  5. import LoadingOutlined from "@ant-design/icons-vue/es/icons/LoadingOutlined";
  6. import PropTypes from '../_util/vue-types';
  7. import KeyCode from '../_util/KeyCode';
  8. import Wave from '../_util/wave';
  9. import warning from '../_util/warning';
  10. import { tuple, withInstall } from '../_util/type';
  11. import { getPropsSlot } from '../_util/props-util';
  12. import useConfigInject from '../_util/hooks/useConfigInject';
  13. import { useInjectFormItemContext } from '../form/FormItemContext';
  14. import omit from '../_util/omit';
  15. export var SwitchSizes = tuple('small', 'default');
  16. export var switchProps = function switchProps() {
  17. return {
  18. id: String,
  19. prefixCls: String,
  20. size: PropTypes.oneOf(SwitchSizes),
  21. disabled: {
  22. type: Boolean,
  23. default: undefined
  24. },
  25. checkedChildren: PropTypes.any,
  26. unCheckedChildren: PropTypes.any,
  27. tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  28. autofocus: {
  29. type: Boolean,
  30. default: undefined
  31. },
  32. loading: {
  33. type: Boolean,
  34. default: undefined
  35. },
  36. checked: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.looseBool]),
  37. checkedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.looseBool]).def(true),
  38. unCheckedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.looseBool]).def(false),
  39. onChange: {
  40. type: Function
  41. },
  42. onClick: {
  43. type: Function
  44. },
  45. onKeydown: {
  46. type: Function
  47. },
  48. onMouseup: {
  49. type: Function
  50. },
  51. 'onUpdate:checked': {
  52. type: Function
  53. },
  54. onBlur: Function,
  55. onFocus: Function
  56. };
  57. };
  58. var Switch = defineComponent({
  59. compatConfig: {
  60. MODE: 3
  61. },
  62. name: 'ASwitch',
  63. __ANT_SWITCH: true,
  64. inheritAttrs: false,
  65. props: switchProps(),
  66. slots: ['checkedChildren', 'unCheckedChildren'],
  67. // emits: ['update:checked', 'mouseup', 'change', 'click', 'keydown', 'blur'],
  68. setup: function setup(props, _ref) {
  69. var attrs = _ref.attrs,
  70. slots = _ref.slots,
  71. expose = _ref.expose,
  72. emit = _ref.emit;
  73. var formItemContext = useInjectFormItemContext();
  74. onBeforeMount(function () {
  75. warning(!('defaultChecked' in attrs), 'Switch', "'defaultChecked' is deprecated, please use 'v-model:checked'");
  76. warning(!('value' in attrs), 'Switch', '`value` is not validate prop, do you mean `checked`?');
  77. });
  78. var checked = ref(props.checked !== undefined ? props.checked : attrs.defaultChecked);
  79. var checkedStatus = computed(function () {
  80. return checked.value === props.checkedValue;
  81. });
  82. watch(function () {
  83. return props.checked;
  84. }, function () {
  85. checked.value = props.checked;
  86. });
  87. var _useConfigInject = useConfigInject('switch', props),
  88. prefixCls = _useConfigInject.prefixCls,
  89. direction = _useConfigInject.direction,
  90. size = _useConfigInject.size;
  91. var refSwitchNode = ref();
  92. var focus = function focus() {
  93. var _refSwitchNode$value;
  94. (_refSwitchNode$value = refSwitchNode.value) === null || _refSwitchNode$value === void 0 ? void 0 : _refSwitchNode$value.focus();
  95. };
  96. var blur = function blur() {
  97. var _refSwitchNode$value2;
  98. (_refSwitchNode$value2 = refSwitchNode.value) === null || _refSwitchNode$value2 === void 0 ? void 0 : _refSwitchNode$value2.blur();
  99. };
  100. expose({
  101. focus: focus,
  102. blur: blur
  103. });
  104. onMounted(function () {
  105. nextTick(function () {
  106. if (props.autofocus && !props.disabled) {
  107. refSwitchNode.value.focus();
  108. }
  109. });
  110. });
  111. var setChecked = function setChecked(check, e) {
  112. if (props.disabled) {
  113. return;
  114. }
  115. emit('update:checked', check);
  116. emit('change', check, e);
  117. formItemContext.onFieldChange();
  118. };
  119. var handleBlur = function handleBlur(e) {
  120. emit('blur', e);
  121. };
  122. var handleClick = function handleClick(e) {
  123. focus();
  124. var newChecked = checkedStatus.value ? props.unCheckedValue : props.checkedValue;
  125. setChecked(newChecked, e);
  126. emit('click', newChecked, e);
  127. };
  128. var handleKeyDown = function handleKeyDown(e) {
  129. if (e.keyCode === KeyCode.LEFT) {
  130. setChecked(props.unCheckedValue, e);
  131. } else if (e.keyCode === KeyCode.RIGHT) {
  132. setChecked(props.checkedValue, e);
  133. }
  134. emit('keydown', e);
  135. };
  136. var handleMouseUp = function handleMouseUp(e) {
  137. var _refSwitchNode$value3;
  138. (_refSwitchNode$value3 = refSwitchNode.value) === null || _refSwitchNode$value3 === void 0 ? void 0 : _refSwitchNode$value3.blur();
  139. emit('mouseup', e);
  140. };
  141. var classNames = computed(function () {
  142. var _ref2;
  143. return _ref2 = {}, _defineProperty(_ref2, "".concat(prefixCls.value, "-small"), size.value === 'small'), _defineProperty(_ref2, "".concat(prefixCls.value, "-loading"), props.loading), _defineProperty(_ref2, "".concat(prefixCls.value, "-checked"), checkedStatus.value), _defineProperty(_ref2, "".concat(prefixCls.value, "-disabled"), props.disabled), _defineProperty(_ref2, prefixCls.value, true), _defineProperty(_ref2, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _ref2;
  144. });
  145. return function () {
  146. var _props$id;
  147. return _createVNode(Wave, {
  148. "insertExtraNode": true
  149. }, {
  150. default: function _default() {
  151. return [_createVNode("button", _objectSpread(_objectSpread(_objectSpread({}, omit(props, ['prefixCls', 'checkedChildren', 'unCheckedChildren', 'checked', 'autofocus', 'checkedValue', 'unCheckedValue', 'id', 'onChange', 'onUpdate:checked'])), attrs), {}, {
  152. "id": (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : formItemContext.id.value,
  153. "onKeydown": handleKeyDown,
  154. "onClick": handleClick,
  155. "onBlur": handleBlur,
  156. "onMouseup": handleMouseUp,
  157. "type": "button",
  158. "role": "switch",
  159. "aria-checked": checked.value,
  160. "disabled": props.disabled || props.loading,
  161. "class": [attrs.class, classNames.value],
  162. "ref": refSwitchNode
  163. }), [_createVNode("div", {
  164. "class": "".concat(prefixCls.value, "-handle")
  165. }, [props.loading ? _createVNode(LoadingOutlined, {
  166. "class": "".concat(prefixCls.value, "-loading-icon")
  167. }, null) : null]), _createVNode("span", {
  168. "class": "".concat(prefixCls.value, "-inner")
  169. }, [checkedStatus.value ? getPropsSlot(slots, props, 'checkedChildren') : getPropsSlot(slots, props, 'unCheckedChildren')])])];
  170. }
  171. });
  172. };
  173. }
  174. });
  175. export default withInstall(Switch);