@aplus-frontend/antdv
Version:
Vue basic component library maintained based on ant-design-vue
215 lines • 7.17 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { defineComponent, Fragment as _Fragment, createVNode as _createVNode } from 'vue';
import classNames from '../_util/classNames';
import Dialog from '../vc-dialog';
import PropTypes from '../_util/vue-types';
import addEventListener from '../vc-util/Dom/addEventListener';
import CloseOutlined from "@ant-design/icons-vue/es/icons/CloseOutlined";
import Button from '../button';
import { convertLegacyProps } from '../button/buttonTypes';
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
import initDefaultProps from '../_util/props-util/initDefaultProps';
import { objectType } from '../_util/type';
import { canUseDocElement } from '../_util/styleChecker';
import useConfigInject from '../config-provider/hooks/useConfigInject';
import { getTransitionName } from '../_util/transition';
import warning from '../_util/warning';
import useStyle from './style';
let mousePosition;
// ref: https://github.com/ant-design/ant-design/issues/15795
const getClickPosition = e => {
mousePosition = {
x: e.pageX,
y: e.pageY
};
// 100ms 内发生过点击事件,则从点击位置动画展示
// 否则直接 zoom 展示
// 这样可以兼容非点击方式展开
setTimeout(() => mousePosition = null, 100);
};
// 只有点击事件支持从鼠标位置动画展开
if (canUseDocElement()) {
addEventListener(document.documentElement, 'click', getClickPosition, true);
}
export const modalProps = () => ({
prefixCls: String,
/** @deprecated Please use `open` instead. */
visible: {
type: Boolean,
default: undefined
},
open: {
type: Boolean,
default: undefined
},
confirmLoading: {
type: Boolean,
default: undefined
},
title: PropTypes.any,
closable: {
type: Boolean,
default: undefined
},
closeIcon: PropTypes.any,
onOk: Function,
onCancel: Function,
'onUpdate:visible': Function,
'onUpdate:open': Function,
onChange: Function,
afterClose: Function,
centered: {
type: Boolean,
default: undefined
},
width: [String, Number],
footer: PropTypes.any,
okText: PropTypes.any,
okType: String,
cancelText: PropTypes.any,
icon: PropTypes.any,
maskClosable: {
type: Boolean,
default: undefined
},
forceRender: {
type: Boolean,
default: undefined
},
okButtonProps: objectType(),
cancelButtonProps: objectType(),
destroyOnClose: {
type: Boolean,
default: undefined
},
wrapClassName: String,
maskTransitionName: String,
transitionName: String,
getContainer: {
type: [String, Function, Boolean, Object],
default: undefined
},
zIndex: Number,
bodyStyle: objectType(),
maskStyle: objectType(),
mask: {
type: Boolean,
default: undefined
},
keyboard: {
type: Boolean,
default: undefined
},
wrapProps: Object,
focusTriggerAfterClose: {
type: Boolean,
default: undefined
},
modalRender: Function,
mousePosition: objectType()
});
export default defineComponent({
compatConfig: {
MODE: 3
},
name: 'AModal',
inheritAttrs: false,
props: initDefaultProps(modalProps(), {
width: 520,
confirmLoading: false,
okType: 'primary'
}),
setup(props, _ref) {
let {
emit,
slots,
attrs
} = _ref;
const [locale] = useLocaleReceiver('Modal');
const {
prefixCls,
rootPrefixCls,
direction,
getPopupContainer
} = useConfigInject('modal', props);
const [wrapSSR, hashId] = useStyle(prefixCls);
warning(props.visible === undefined, 'Modal', `\`visible\` will be removed in next major version, please use \`open\` instead.`);
const handleCancel = e => {
emit('update:visible', false);
emit('update:open', false);
emit('cancel', e);
emit('change', false);
};
const handleOk = e => {
emit('ok', e);
};
const renderFooter = () => {
var _a, _b;
const {
okText = (_a = slots.okText) === null || _a === void 0 ? void 0 : _a.call(slots),
okType,
cancelText = (_b = slots.cancelText) === null || _b === void 0 ? void 0 : _b.call(slots),
confirmLoading
} = props;
return _createVNode(_Fragment, null, [_createVNode(Button, _objectSpread({
"onClick": handleCancel
}, props.cancelButtonProps), {
default: () => [cancelText || locale.value.cancelText]
}), _createVNode(Button, _objectSpread(_objectSpread({}, convertLegacyProps(okType)), {}, {
"loading": confirmLoading,
"onClick": handleOk
}, props.okButtonProps), {
default: () => [okText || locale.value.okText]
})]);
};
return () => {
var _a, _b;
const {
prefixCls: customizePrefixCls,
visible,
open,
wrapClassName,
centered,
getContainer,
closeIcon = (_a = slots.closeIcon) === null || _a === void 0 ? void 0 : _a.call(slots),
focusTriggerAfterClose = true
} = props,
restProps = __rest(props, ["prefixCls", "visible", "open", "wrapClassName", "centered", "getContainer", "closeIcon", "focusTriggerAfterClose"]);
const wrapClassNameExtended = classNames(wrapClassName, {
[`${prefixCls.value}-centered`]: !!centered,
[`${prefixCls.value}-wrap-rtl`]: direction.value === 'rtl'
});
return wrapSSR(_createVNode(Dialog, _objectSpread(_objectSpread(_objectSpread({}, restProps), attrs), {}, {
"rootClassName": hashId.value,
"class": classNames(hashId.value, attrs.class),
"getContainer": getContainer || (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value),
"prefixCls": prefixCls.value,
"wrapClassName": wrapClassNameExtended,
"visible": open !== null && open !== void 0 ? open : visible,
"onClose": handleCancel,
"focusTriggerAfterClose": focusTriggerAfterClose,
"transitionName": getTransitionName(rootPrefixCls.value, 'zoom', props.transitionName),
"maskTransitionName": getTransitionName(rootPrefixCls.value, 'fade', props.maskTransitionName),
"mousePosition": (_b = restProps.mousePosition) !== null && _b !== void 0 ? _b : mousePosition
}), _extends(_extends({}, slots), {
footer: slots.footer || renderFooter,
closeIcon: () => {
return _createVNode("span", {
"class": `${prefixCls.value}-close-x`
}, [closeIcon || _createVNode(CloseOutlined, {
"class": `${prefixCls.value}-close-icon`
}, null)]);
}
})));
};
}
});