UNPKG

@aplus-frontend/antdv

Version:

Vue basic component library maintained based on ant-design-vue

183 lines 6.4 kB
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; import { defineComponent, onBeforeMount, ref, computed, onMounted, nextTick, watch, createVNode as _createVNode } from 'vue'; import LoadingOutlined from "@ant-design/icons-vue/es/icons/LoadingOutlined"; import PropTypes from '../_util/vue-types'; import KeyCode from '../_util/KeyCode'; import Wave from '../_util/wave'; import warning from '../_util/warning'; import { tuple, withInstall } from '../_util/type'; import { getPropsSlot } from '../_util/props-util'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useInjectFormItemContext } from '../form/FormItemContext'; import omit from '../_util/omit'; import useStyle from './style'; import { useInjectDisabled } from '../config-provider/DisabledContext'; export const SwitchSizes = tuple('small', 'default'); export const switchProps = () => ({ id: String, prefixCls: String, size: PropTypes.oneOf(SwitchSizes), disabled: { type: Boolean, default: undefined }, checkedChildren: PropTypes.any, unCheckedChildren: PropTypes.any, tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), autofocus: { type: Boolean, default: undefined }, loading: { type: Boolean, default: undefined }, checked: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.looseBool]), checkedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.looseBool]).def(true), unCheckedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.looseBool]).def(false), onChange: { type: Function }, onClick: { type: Function }, onKeydown: { type: Function }, onMouseup: { type: Function }, 'onUpdate:checked': { type: Function }, onBlur: Function, onFocus: Function }); const Switch = defineComponent({ compatConfig: { MODE: 3 }, name: 'ASwitch', __ANT_SWITCH: true, inheritAttrs: false, props: switchProps(), slots: Object, // emits: ['update:checked', 'mouseup', 'change', 'click', 'keydown', 'blur'], setup(props, _ref) { let { attrs, slots, expose, emit } = _ref; const formItemContext = useInjectFormItemContext(); const disabledContext = useInjectDisabled(); const mergedDisabled = computed(() => { var _a; return (_a = props.disabled) !== null && _a !== void 0 ? _a : disabledContext.value; }); onBeforeMount(() => { warning(!('defaultChecked' in attrs), 'Switch', `'defaultChecked' is deprecated, please use 'v-model:checked'`); warning(!('value' in attrs), 'Switch', '`value` is not validate prop, do you mean `checked`?'); }); const checked = ref(props.checked !== undefined ? props.checked : attrs.defaultChecked); const checkedStatus = computed(() => checked.value === props.checkedValue); watch(() => props.checked, () => { checked.value = props.checked; }); const { prefixCls, direction, size } = useConfigInject('switch', props); const [wrapSSR, hashId] = useStyle(prefixCls); const refSwitchNode = ref(); const focus = () => { var _a; (_a = refSwitchNode.value) === null || _a === void 0 ? void 0 : _a.focus(); }; const blur = () => { var _a; (_a = refSwitchNode.value) === null || _a === void 0 ? void 0 : _a.blur(); }; expose({ focus, blur }); onMounted(() => { nextTick(() => { if (props.autofocus && !mergedDisabled.value) { refSwitchNode.value.focus(); } }); }); const setChecked = (check, e) => { if (mergedDisabled.value) { return; } emit('update:checked', check); emit('change', check, e); formItemContext.onFieldChange(); }; const handleBlur = e => { emit('blur', e); }; const handleClick = e => { focus(); const newChecked = checkedStatus.value ? props.unCheckedValue : props.checkedValue; setChecked(newChecked, e); emit('click', newChecked, e); }; const handleKeyDown = e => { if (e.keyCode === KeyCode.LEFT) { setChecked(props.unCheckedValue, e); } else if (e.keyCode === KeyCode.RIGHT) { setChecked(props.checkedValue, e); } emit('keydown', e); }; const handleMouseUp = e => { var _a; (_a = refSwitchNode.value) === null || _a === void 0 ? void 0 : _a.blur(); emit('mouseup', e); }; const classNames = computed(() => ({ [`${prefixCls.value}-small`]: size.value === 'small', [`${prefixCls.value}-loading`]: props.loading, [`${prefixCls.value}-checked`]: checkedStatus.value, [`${prefixCls.value}-disabled`]: mergedDisabled.value, [prefixCls.value]: true, [`${prefixCls.value}-rtl`]: direction.value === 'rtl', [hashId.value]: true })); return () => { var _a; return wrapSSR(_createVNode(Wave, null, { default: () => [_createVNode("button", _objectSpread(_objectSpread(_objectSpread({}, omit(props, ['prefixCls', 'checkedChildren', 'unCheckedChildren', 'checked', 'autofocus', 'checkedValue', 'unCheckedValue', 'id', 'onChange', 'onUpdate:checked'])), attrs), {}, { "id": (_a = props.id) !== null && _a !== void 0 ? _a : formItemContext.id.value, "onKeydown": handleKeyDown, "onClick": handleClick, "onBlur": handleBlur, "onMouseup": handleMouseUp, "type": "button", "role": "switch", "aria-checked": checked.value, "disabled": mergedDisabled.value || props.loading, "class": [attrs.class, classNames.value], "ref": refSwitchNode }), [_createVNode("div", { "class": `${prefixCls.value}-handle` }, [props.loading ? _createVNode(LoadingOutlined, { "class": `${prefixCls.value}-loading-icon` }, null) : null]), _createVNode("span", { "class": `${prefixCls.value}-inner` }, [_createVNode("span", { "class": `${prefixCls.value}-inner-checked` }, [getPropsSlot(slots, props, 'checkedChildren')]), _createVNode("span", { "class": `${prefixCls.value}-inner-unchecked` }, [getPropsSlot(slots, props, 'unCheckedChildren')])])])] })); }; } }); export default withInstall(Switch);