index.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import { defineComponent, onBeforeMount, ref, computed, onMounted, nextTick, watch } from 'vue';
  4. import LoadingOutlined from "@ant-design/icons-vue/es/icons/LoadingOutlined";
  5. import PropTypes from '../_util/vue-types';
  6. import KeyCode from '../_util/KeyCode';
  7. import Wave from '../_util/wave';
  8. import warning from '../_util/warning';
  9. import { tuple, withInstall } from '../_util/type';
  10. import { getPropsSlot } from '../_util/props-util';
  11. import useConfigInject from '../config-provider/hooks/useConfigInject';
  12. import { useInjectFormItemContext } from '../form/FormItemContext';
  13. import omit from '../_util/omit';
  14. import useStyle from './style';
  15. import { useInjectDisabled } from '../config-provider/DisabledContext';
  16. export const SwitchSizes = tuple('small', 'default');
  17. export const switchProps = () => ({
  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. const Switch = defineComponent({
  58. compatConfig: {
  59. MODE: 3
  60. },
  61. name: 'ASwitch',
  62. __ANT_SWITCH: true,
  63. inheritAttrs: false,
  64. props: switchProps(),
  65. slots: Object,
  66. // emits: ['update:checked', 'mouseup', 'change', 'click', 'keydown', 'blur'],
  67. setup(props, _ref) {
  68. let {
  69. attrs,
  70. slots,
  71. expose,
  72. emit
  73. } = _ref;
  74. const formItemContext = useInjectFormItemContext();
  75. const disabledContext = useInjectDisabled();
  76. const mergedDisabled = computed(() => {
  77. var _a;
  78. return (_a = props.disabled) !== null && _a !== void 0 ? _a : disabledContext.value;
  79. });
  80. onBeforeMount(() => {
  81. warning(!('defaultChecked' in attrs), 'Switch', `'defaultChecked' is deprecated, please use 'v-model:checked'`);
  82. warning(!('value' in attrs), 'Switch', '`value` is not validate prop, do you mean `checked`?');
  83. });
  84. const checked = ref(props.checked !== undefined ? props.checked : attrs.defaultChecked);
  85. const checkedStatus = computed(() => checked.value === props.checkedValue);
  86. watch(() => props.checked, () => {
  87. checked.value = props.checked;
  88. });
  89. const {
  90. prefixCls,
  91. direction,
  92. size
  93. } = useConfigInject('switch', props);
  94. const [wrapSSR, hashId] = useStyle(prefixCls);
  95. const refSwitchNode = ref();
  96. const focus = () => {
  97. var _a;
  98. (_a = refSwitchNode.value) === null || _a === void 0 ? void 0 : _a.focus();
  99. };
  100. const blur = () => {
  101. var _a;
  102. (_a = refSwitchNode.value) === null || _a === void 0 ? void 0 : _a.blur();
  103. };
  104. expose({
  105. focus,
  106. blur
  107. });
  108. onMounted(() => {
  109. nextTick(() => {
  110. if (props.autofocus && !mergedDisabled.value) {
  111. refSwitchNode.value.focus();
  112. }
  113. });
  114. });
  115. const setChecked = (check, e) => {
  116. if (mergedDisabled.value) {
  117. return;
  118. }
  119. emit('update:checked', check);
  120. emit('change', check, e);
  121. formItemContext.onFieldChange();
  122. };
  123. const handleBlur = e => {
  124. emit('blur', e);
  125. };
  126. const handleClick = e => {
  127. focus();
  128. const newChecked = checkedStatus.value ? props.unCheckedValue : props.checkedValue;
  129. setChecked(newChecked, e);
  130. emit('click', newChecked, e);
  131. };
  132. const handleKeyDown = e => {
  133. if (e.keyCode === KeyCode.LEFT) {
  134. setChecked(props.unCheckedValue, e);
  135. } else if (e.keyCode === KeyCode.RIGHT) {
  136. setChecked(props.checkedValue, e);
  137. }
  138. emit('keydown', e);
  139. };
  140. const handleMouseUp = e => {
  141. var _a;
  142. (_a = refSwitchNode.value) === null || _a === void 0 ? void 0 : _a.blur();
  143. emit('mouseup', e);
  144. };
  145. const classNames = computed(() => ({
  146. [`${prefixCls.value}-small`]: size.value === 'small',
  147. [`${prefixCls.value}-loading`]: props.loading,
  148. [`${prefixCls.value}-checked`]: checkedStatus.value,
  149. [`${prefixCls.value}-disabled`]: mergedDisabled.value,
  150. [prefixCls.value]: true,
  151. [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
  152. [hashId.value]: true
  153. }));
  154. return () => {
  155. var _a;
  156. return wrapSSR(_createVNode(Wave, null, {
  157. default: () => [_createVNode("button", _objectSpread(_objectSpread(_objectSpread({}, omit(props, ['prefixCls', 'checkedChildren', 'unCheckedChildren', 'checked', 'autofocus', 'checkedValue', 'unCheckedValue', 'id', 'onChange', 'onUpdate:checked'])), attrs), {}, {
  158. "id": (_a = props.id) !== null && _a !== void 0 ? _a : formItemContext.id.value,
  159. "onKeydown": handleKeyDown,
  160. "onClick": handleClick,
  161. "onBlur": handleBlur,
  162. "onMouseup": handleMouseUp,
  163. "type": "button",
  164. "role": "switch",
  165. "aria-checked": checked.value,
  166. "disabled": mergedDisabled.value || props.loading,
  167. "class": [attrs.class, classNames.value],
  168. "ref": refSwitchNode
  169. }), [_createVNode("div", {
  170. "class": `${prefixCls.value}-handle`
  171. }, [props.loading ? _createVNode(LoadingOutlined, {
  172. "class": `${prefixCls.value}-loading-icon`
  173. }, null) : null]), _createVNode("span", {
  174. "class": `${prefixCls.value}-inner`
  175. }, [_createVNode("span", {
  176. "class": `${prefixCls.value}-inner-checked`
  177. }, [getPropsSlot(slots, props, 'checkedChildren')]), _createVNode("span", {
  178. "class": `${prefixCls.value}-inner-unchecked`
  179. }, [getPropsSlot(slots, props, 'unCheckedChildren')])])])]
  180. }));
  181. };
  182. }
  183. });
  184. export default withInstall(Switch);