github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: modal (#5129), close #5096 

* fix: can not scroll when close dialog #5096

* refactor: modal
pull/5147/head
tangjinzhou 2022-01-06 16:08:53 +08:00 committed by GitHub
parent ab2df12cce
commit 98755f332c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 1178 additions and 2368 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/_util/switchScrollingEffect.js
View File

@ -1,20 +0,0 @@
import getScrollBarSize from './getScrollBarSize';
export default close => {
const bodyIsOverflowing =
document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) &&
window.innerWidth > document.body.offsetWidth;
if (!bodyIsOverflowing) {
return;
}
if (close) {
document.body.style.position = '';
document.body.style.width = '';
return;
}
const scrollBarSize = getScrollBarSize();
if (scrollBarSize) {
document.body.style.position = 'relative';
document.body.style.width = `calc(100% - ${scrollBarSize}px)`;
}
};

42
components/_util/switchScrollingEffect.ts Normal file
View File

@ -0,0 +1,42 @@
import getScrollBarSize from './getScrollBarSize';
import setStyle from './setStyle';
function isBodyOverflowing() {
return (
document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) &&
window.innerWidth > document.body.offsetWidth
);
}
let cacheStyle = {};
export default (close?: boolean) => {
if (!isBodyOverflowing() && !close) {
return;
}
// https://github.com/ant-design/ant-design/issues/19729
const scrollingEffectClassName = 'ant-scrolling-effect';
const scrollingEffectClassNameReg = new RegExp(`${scrollingEffectClassName}`, 'g');
const bodyClassName = document.body.className;
if (close) {
if (!scrollingEffectClassNameReg.test(bodyClassName)) return;
setStyle(cacheStyle);
cacheStyle = {};
document.body.className = bodyClassName.replace(scrollingEffectClassNameReg, '').trim();
return;
}
const scrollBarSize = getScrollBarSize();
if (scrollBarSize) {
cacheStyle = setStyle({
position: 'relative',
width: `calc(100% - ${scrollBarSize}px)`,
});
if (!scrollingEffectClassNameReg.test(bodyClassName)) {
const addClassName = `${bodyClassName} ${scrollingEffectClassName}`;
document.body.className = addClassName.trim();
}
}
};

168
components/modal/ActionButton.tsx
View File

@ -1,89 +1,113 @@
import type { ExtractPropTypes, PropType } from 'vue';
import { defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import { onMounted, ref, defineComponent, onBeforeUnmount } from 'vue';
import Button from '../button';
import BaseMixin from '../_util/BaseMixin';
import type { ButtonProps } from '../button';
import type { LegacyButtonType } from '../button/buttonTypes';
import { convertLegacyProps } from '../button/buttonTypes';
import { getSlot, findDOMNode } from '../_util/props-util';
const ActionButtonProps = {
const actionButtonProps = {
type: {
type: String as PropType<LegacyButtonType>,
},
actionFn: PropTypes.func,
closeModal: PropTypes.func,
autofocus: PropTypes.looseBool,
buttonProps: PropTypes.object,
actionFn: Function as PropType<(...args: any[]) => any | PromiseLike<any>>,
close: Function,
autofocus: Boolean,
prefixCls: String,
buttonProps: Object as PropType<ButtonProps>,
emitEvent: Boolean,
quitOnNullishReturnValue: Boolean,
};
export type IActionButtonProps = ExtractPropTypes<typeof ActionButtonProps>;
export type ActionButtonProps = ExtractPropTypes<typeof actionButtonProps>;
function isThenable(thing?: PromiseLike<any>): boolean {
return !!(thing && !!thing.then);
}
export default defineComponent({
mixins: [BaseMixin],
props: ActionButtonProps,
setup() {
return {
timeoutId: undefined,
};
},
data() {
return {
loading: false,
};
},
mounted() {
if (this.autofocus) {
this.timeoutId = setTimeout(() => findDOMNode(this).focus());
}
},
beforeUnmount() {
clearTimeout(this.timeoutId);
},
methods: {
onClick() {
const { actionFn, closeModal } = this;
if (actionFn) {
let ret: any;
if (actionFn.length) {
ret = actionFn(closeModal);
} else {
ret = actionFn();
if (!ret) {
closeModal();
}
}
if (ret && ret.then) {
this.setState({ loading: true });
ret.then(
(...args: any[]) => {
// It's unnecessary to set loading=false, for the Modal will be unmounted after close.
// this.setState({ loading: false });
closeModal(...args);
},
(e: Event) => {
// Emit error when catch promise reject
// eslint-disable-next-line no-console
console.error(e);
// See: https://github.com/ant-design/ant-design/issues/6183
this.setState({ loading: false });
},
);
}
} else {
closeModal();
name: 'ActionButton',
props: actionButtonProps,
setup(props, { slots }) {
const clickedRef = ref<boolean>(false);
const buttonRef = ref();
const loading = ref(false);
let timeoutId: any;
onMounted(() => {
if (props.autofocus) {
timeoutId = setTimeout(() => buttonRef.value.$el?.focus());
}
},
},
});
onBeforeUnmount(() => {
clearTimeout(timeoutId);
});
render() {
const { type, loading, buttonProps } = this;
const props = {
...convertLegacyProps(type),
onClick: this.onClick,
loading,
...buttonProps,
const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
const { close } = props;
if (!isThenable(returnValueOfOnOk)) {
return;
}
loading.value = true;
returnValueOfOnOk!.then(
(...args: any[]) => {
loading.value = false;
close(...args);
clickedRef.value = false;
},
(e: Error) => {
// Emit error when catch promise reject
// eslint-disable-next-line no-console
console.error(e);
// See: https://github.com/ant-design/ant-design/issues/6183
loading.value = false;
clickedRef.value = false;
},
);
};
const onClick = (e: MouseEvent) => {
const { actionFn, close = () => {} } = props;
if (clickedRef.value) {
return;
}
clickedRef.value = true;
if (!actionFn) {
close();
return;
}
let returnValueOfOnOk;
if (props.emitEvent) {
returnValueOfOnOk = actionFn(e);
if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
clickedRef.value = false;
close(e);
return;
}
} else if (actionFn.length) {
returnValueOfOnOk = actionFn(close);
// https://github.com/ant-design/ant-design/issues/23358
clickedRef.value = false;
} else {
returnValueOfOnOk = actionFn();
if (!returnValueOfOnOk) {
close();
return;
}
}
handlePromiseOnOk(returnValueOfOnOk);
};
return () => {
const { type, prefixCls, buttonProps } = props;
return (
<Button
{...convertLegacyProps(type)}
onClick={onClick}
loading={loading.value}
prefixCls={prefixCls}
{...buttonProps}
ref={buttonRef}
v-slots={slots}
></Button>
);
};
return <Button {...props}>{getSlot(this)}</Button>;
},
});

48
components/modal/ConfirmDialog.tsx
View File

@ -4,14 +4,17 @@ import Dialog from './Modal';
import ActionButton from './ActionButton';
import { defineComponent } from 'vue';
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
import { getTransitionName } from '../_util/transition';
interface ConfirmDialogProps extends ModalFuncProps {
afterClose?: () => void;
close?: (...args: any[]) => void;
autoFocusButton?: null | 'ok' | 'cancel';
rootPrefixCls: string;
iconPrefixCls?: string;
}
function renderSomeContent(_name, someContent) {
function renderSomeContent(someContent: any) {
if (typeof someContent === 'function') {
return someContent();
}
@ -50,6 +53,12 @@ export default defineComponent<ConfirmDialogProps>({
'type',
'title',
'content',
'direction',
'rootPrefixCls',
'bodyStyle',
'closeIcon',
'modalRender',
'focusTriggerAfterClose',
] as any,
setup(props, { attrs }) {
const [locale] = useLocaleReceiver('Modal');
@ -73,22 +82,24 @@ export default defineComponent<ConfirmDialogProps>({
width = 416,
mask = true,
maskClosable = false,
maskTransitionName = 'fade',
transitionName = 'zoom',
type,
title,
content,
// closable = false,
direction,
closeIcon,
modalRender,
focusTriggerAfterClose,
rootPrefixCls,
bodyStyle,
} = props;
const okType = props.okType || 'primary';
const prefixCls = props.prefixCls || 'ant-modal';
const contentPrefixCls = `${prefixCls}-confirm`;
const style = attrs.style || {};
const okText =
renderSomeContent('okText', props.okText) ||
renderSomeContent(props.okText) ||
(okCancel ? locale.value.okText : locale.value.justOkText);
const cancelText =
renderSomeContent('cancelText', props.cancelText) || locale.value.cancelText;
const cancelText = renderSomeContent(props.cancelText) || locale.value.cancelText;
const autoFocusButton =
props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
@ -96,15 +107,17 @@ export default defineComponent<ConfirmDialogProps>({
contentPrefixCls,
`${contentPrefixCls}-${type}`,
`${prefixCls}-${type}`,
{ [`${contentPrefixCls}-rtl`]: direction === 'rtl' },
attrs.class,
);
const cancelButton = okCancel && (
<ActionButton
actionFn={onCancel}
closeModal={close}
close={close}
autofocus={autoFocusButton === 'cancel'}
buttonProps={cancelButtonProps}
prefixCls={`${rootPrefixCls}-btn`}
>
{cancelText}
</ActionButton>
@ -118,13 +131,14 @@ export default defineComponent<ConfirmDialogProps>({
onCancel={e => close({ triggerCancel: true }, e)}
visible={visible}
title=""
transitionName={transitionName}
footer=""
maskTransitionName={maskTransitionName}
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
mask={mask}
maskClosable={maskClosable}
maskStyle={maskStyle}
style={style}
bodyStyle={bodyStyle}
width={width}
zIndex={zIndex}
afterClose={afterClose}
@ -132,25 +146,27 @@ export default defineComponent<ConfirmDialogProps>({
centered={centered}
getContainer={getContainer}
closable={closable}
closeIcon={closeIcon}
modalRender={modalRender}
focusTriggerAfterClose={focusTriggerAfterClose}
>
<div class={`${contentPrefixCls}-body-wrapper`}>
<div class={`${contentPrefixCls}-body`}>
{renderSomeContent('icon', icon)}
{renderSomeContent(icon)}
{title === undefined ? null : (
<span class={`${contentPrefixCls}-title`}>{renderSomeContent('title', title)}</span>
<span class={`${contentPrefixCls}-title`}>{renderSomeContent(title)}</span>
)}
<div class={`${contentPrefixCls}-content`}>
{renderSomeContent('content', content)}
</div>
<div class={`${contentPrefixCls}-content`}>{renderSomeContent(content)}</div>
</div>
<div class={`${contentPrefixCls}-btns`}>
{cancelButton}
<ActionButton
type={okType}
actionFn={onOk}
closeModal={close}
close={close}
autofocus={autoFocusButton === 'ok'}
buttonProps={okButtonProps}
prefixCls={`${rootPrefixCls}-btn`}
>
{okText}
</ActionButton>

275
components/modal/Modal.tsx
View File

@ -1,5 +1,5 @@
import type { ExtractPropTypes, CSSProperties, PropType } from 'vue';
import { defineComponent, inject } from 'vue';
import { defineComponent } from 'vue';
import classNames from '../_util/classNames';
import Dialog from '../vc-dialog';
import PropTypes from '../_util/vue-types';
@ -7,12 +7,14 @@ import addEventListener from '../vc-util/Dom/addEventListener';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import Button from '../button';
import type { ButtonProps as ButtonPropsType, LegacyButtonType } from '../button/buttonTypes';
import buttonTypes, { convertLegacyProps } from '../button/buttonTypes';
import { convertLegacyProps } from '../button/buttonTypes';
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
import { getComponent, getSlot } from '../_util/props-util';
import initDefaultProps from '../_util/props-util/initDefaultProps';
import { defaultConfigProvider } from '../config-provider';
import type { Direction } from '../config-provider';
import type { VueNode } from '../_util/type';
import { canUseDocElement } from '../_util/styleChecker';
import useConfigInject from '../_util/hooks/useConfigInject';
import { getTransitionName } from '../_util/transition';
let mousePosition: { x: number; y: number } | null = null;
// ref: https://github.com/ant-design/ant-design/issues/15795
@ -28,68 +30,51 @@ const getClickPosition = (e: MouseEvent) => {
};
// 只有点击事件支持从鼠标位置动画展开
if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
if (canUseDocElement()) {
addEventListener(document.documentElement, 'click', getClickPosition, true);
}
function noop() {}
const modalProps = {
prefixCls: PropTypes.string,
/** 对话框是否可见*/
visible: PropTypes.looseBool,
/** 确定按钮 loading*/
confirmLoading: PropTypes.looseBool,
/** 标题*/
const modalProps = () => ({
prefixCls: String,
visible: { type: Boolean, default: undefined },
confirmLoading: { type: Boolean, default: undefined },
title: PropTypes.any,
/** 是否显示右上角的关闭按钮*/
closable: PropTypes.looseBool,
closable: { type: Boolean, default: undefined },
closeIcon: PropTypes.any,
/** 点击确定回调*/
onOk: {
type: Function as PropType<(e: MouseEvent) => void>,
},
/** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调*/
onCancel: {
type: Function as PropType<(e: MouseEvent) => void>,
},
afterClose: PropTypes.func.def(noop),
/** 垂直居中 */
centered: PropTypes.looseBool,
/** 宽度*/
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** 底部内容*/
onOk: Function as PropType<(e: MouseEvent) => void>,
onCancel: Function as PropType<(e: MouseEvent) => void>,
'onUpdate:visible': Function as PropType<(visible: boolean) => void>,
onChange: Function as PropType<(visible: boolean) => void>,
afterClose: Function as PropType<() => void>,
centered: { type: Boolean, default: undefined },
width: [String, Number],
footer: PropTypes.any,
/** 确认按钮文字*/
okText: PropTypes.any,
/** 确认按钮类型*/
okType: {
type: String as PropType<LegacyButtonType>,
},
/** 取消按钮文字*/
okType: String as PropType<LegacyButtonType>,
cancelText: PropTypes.any,
icon: PropTypes.any,
/** 点击蒙层是否允许关闭*/
maskClosable: PropTypes.looseBool,
/** 强制渲染 Modal*/
forceRender: PropTypes.looseBool,
okButtonProps: PropTypes.shape(buttonTypes).loose,
cancelButtonProps: PropTypes.shape(buttonTypes).loose,
destroyOnClose: PropTypes.looseBool,
wrapClassName: PropTypes.string,
maskTransitionName: PropTypes.string,
transitionName: PropTypes.string,
getContainer: PropTypes.any,
zIndex: PropTypes.number,
bodyStyle: PropTypes.style,
maskStyle: PropTypes.style,
mask: PropTypes.looseBool,
keyboard: PropTypes.looseBool,
wrapProps: PropTypes.object,
focusTriggerAfterClose: PropTypes.looseBool,
};
maskClosable: { type: Boolean, default: undefined },
forceRender: { type: Boolean, default: undefined },
okButtonProps: Object as PropType<ButtonPropsType>,
cancelButtonProps: Object as PropType<ButtonPropsType>,
destroyOnClose: { type: Boolean, default: undefined },
wrapClassName: String,
maskTransitionName: String,
transitionName: String,
getContainer: [String, Function, Boolean, Object] as PropType<
string | HTMLElement | getContainerFunc | false
>,
zIndex: Number,
bodyStyle: Object as PropType<CSSProperties>,
maskStyle: Object as PropType<CSSProperties>,
mask: { type: Boolean, default: undefined },
keyboard: { type: Boolean, default: undefined },
wrapProps: Object,
focusTriggerAfterClose: { type: Boolean, default: undefined },
modalRender: Function as PropType<(arg: { originVNode: VueNode }) => VueNode>,
});
export type ModalProps = ExtractPropTypes<typeof modalProps>;
export type ModalProps = Partial<ExtractPropTypes<ReturnType<typeof modalProps>>>;
export interface ModalFuncProps {
prefixCls?: string;
@ -101,6 +86,7 @@ export interface ModalFuncProps {
// TODO: find out exact types
onOk?: (...args: any[]) => any;
onCancel?: (...args: any[]) => any;
afterClose?: () => void;
okButtonProps?: ButtonPropsType;
cancelButtonProps?: ButtonPropsType;
centered?: boolean;
@ -117,12 +103,17 @@ export interface ModalFuncProps {
okCancel?: boolean;
style?: CSSProperties | string;
maskStyle?: CSSProperties;
type?: string;
type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';
keyboard?: boolean;
getContainer?: getContainerFunc | boolean | string;
getContainer?: string | HTMLElement | getContainerFunc | false;
autoFocusButton?: null | 'ok' | 'cancel';
transitionName?: string;
maskTransitionName?: string;
direction?: Direction;
bodyStyle?: CSSProperties;
closeIcon?: string | (() => VueNode) | VueNode;
modalRender?: (arg: { originVNode: VueNode }) => VueNode;
focusTriggerAfterClose?: boolean;
/** @deprecated please use `appContext` instead */
parentContext?: any;
@ -147,7 +138,7 @@ export const destroyFns = [];
export default defineComponent({
name: 'AModal',
inheritAttrs: false,
props: initDefaultProps(modalProps, {
props: initDefaultProps(modalProps(), {
width: 520,
transitionName: 'zoom',
maskTransitionName: 'fade',
@ -155,90 +146,92 @@ export default defineComponent({
visible: false,
okType: 'primary',
}),
emits: ['update:visible', 'cancel', 'change', 'ok'],
setup() {
setup(props, { emit, slots, attrs }) {
const [locale] = useLocaleReceiver('Modal');
return {
locale,
configProvider: inject('configProvider', defaultConfigProvider),
};
},
data() {
return {
sVisible: !!this.visible,
};
},
watch: {
visible(val) {
this.sVisible = val;
},
},
methods: {
handleCancel(e: MouseEvent) {
this.$emit('update:visible', false);
this.$emit('cancel', e);
this.$emit('change', false);
},
handleOk(e: MouseEvent) {
this.$emit('ok', e);
},
renderFooter() {
const { okType, confirmLoading, locale } = this;
const cancelBtnProps = { onClick: this.handleCancel, ...(this.cancelButtonProps || {}) };
const okBtnProps = {
onClick: this.handleOk,
...convertLegacyProps(okType),
loading: confirmLoading,
...(this.okButtonProps || {}),
};
return (
<div>
<Button {...cancelBtnProps}>
{getComponent(this, 'cancelText') || locale.cancelText}
</Button>
<Button {...okBtnProps}>{getComponent(this, 'okText') || locale.okText}</Button>
</div>
);
},
},
render() {
const {
prefixCls: customizePrefixCls,
sVisible: visible,
wrapClassName,
centered,
getContainer,
$attrs,
} = this;
const children = getSlot(this);
const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
const prefixCls = getPrefixCls('modal', customizePrefixCls);
const defaultFooter = this.renderFooter();
const closeIcon = getComponent(this, 'closeIcon');
const closeIconToRender = (
<span class={`${prefixCls}-close-x`}>
{closeIcon || <CloseOutlined class={`${prefixCls}-close-icon`} />}
</span>
const { prefixCls, rootPrefixCls, direction, getPopupContainer } = useConfigInject(
'modal',
props,
);
const footer = getComponent(this, 'footer');
const title = getComponent(this, 'title');
const dialogProps = {
...this.$props,
...$attrs,
getContainer: getContainer === undefined ? getContextPopupContainer : getContainer,
prefixCls,
wrapClassName: classNames({ [`${prefixCls}-centered`]: !!centered }, wrapClassName),
title,
footer: footer === undefined ? defaultFooter : footer,
visible,
mousePosition,
closeIcon: closeIconToRender,
onClose: this.handleCancel,
const handleCancel = (e: MouseEvent) => {
emit('update:visible', false);
emit('cancel', e);
emit('change', false);
};
const handleOk = (e: MouseEvent) => {
emit('ok', e);
};
const renderFooter = () => {
const {
okText = slots.okText?.(),
okType,
cancelText = slots.cancelText?.(),
confirmLoading,
} = props;
return (
<>
<Button onClick={handleCancel} {...props.cancelButtonProps}>
{cancelText || locale.value.cancelText}
</Button>
<Button
{...convertLegacyProps(okType)}
loading={confirmLoading}
onClick={handleOk}
{...props.okButtonProps}
>
{okText || locale.value.okText}
</Button>
</>
);
};
return () => {
const {
prefixCls: customizePrefixCls,
visible,
wrapClassName,
centered,
getContainer,
closeIcon = slots.closeIcon?.(),
focusTriggerAfterClose = true,
...restProps
} = props;
const wrapClassNameExtended = classNames(wrapClassName, {
[`${prefixCls.value}-centered`]: !!centered,
[`${prefixCls.value}-wrap-rtl`]: direction.value === 'rtl',
});
return (
<Dialog
{...restProps}
{...attrs}
getContainer={getPopupContainer}
prefixCls={prefixCls.value}
wrapClassName={wrapClassNameExtended}
visible={visible}
mousePosition={mousePosition}
onClose={handleCancel}
focusTriggerAfterClose={focusTriggerAfterClose}
transitionName={getTransitionName(rootPrefixCls.value, 'zoom', props.transitionName)}
maskTransitionName={getTransitionName(
rootPrefixCls.value,
'fade',
props.maskTransitionName,
)}
v-slots={{
...slots,
footer: slots.footer || renderFooter,
closeIcon: () => {
return (
<span class={`${prefixCls.value}-close-x`}>
{closeIcon || <CloseOutlined class={`${prefixCls.value}-close-icon`} />}
</span>
);
},
}}
></Dialog>
);
};
return <Dialog {...dialogProps}>{children}</Dialog>;
},
});

70
components/modal/__tests__/__snapshots__/Modal.test.js.snap
View File

@ -5,21 +5,19 @@ exports[`Modal render correctly 1`] = `
<div></div>
<div class="ant-modal-root">
<div class="ant-modal-mask"></div>
<div tabindex="-1" class="ant-modal-wrap " role="dialog">
<div role="document" style="width: 520px;" class="ant-modal">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
<div tabindex="-1" class="ant-modal-wrap" role="dialog">
<div style="width: 520px;" class="ant-modal" role="document">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
<div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
<!---->
<div class="ant-modal-body">Here is content of Modal</div>
<div class="ant-modal-footer">
<div><button class="ant-btn" type="button">
<!----><span>Cancel</span>
</button><button class="ant-btn ant-btn-primary" type="button">
<!----><span>OK</span>
</button></div>
</div>
<div class="ant-modal-footer"><button class="ant-btn" type="button">
<!----><span>Cancel</span>
</button><button class="ant-btn ant-btn-primary" type="button">
<!----><span>OK</span>
</button></div>
</div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
</div>
</div>
</div>
@ -31,21 +29,19 @@ exports[`Modal render correctly 2`] = `
<div></div>
<div class="ant-modal-root">
<div class="ant-modal-mask"></div>
<div tabindex="-1" class="ant-modal-wrap " role="dialog">
<div role="document" style="width: 520px;" class="ant-modal">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
<div tabindex="-1" class="ant-modal-wrap" role="dialog">
<div style="width: 520px;" class="ant-modal" role="document">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
<div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
<!---->
<div class="ant-modal-body">Here is content of Modal</div>
<div class="ant-modal-footer">
<div><button class="ant-btn" type="button">
<!----><span>Cancel</span>
</button><button class="ant-btn ant-btn-primary" type="button">
<!----><span>OK</span>
</button></div>
</div>
<div class="ant-modal-footer"><button class="ant-btn" type="button">
<!----><span>Cancel</span>
</button><button class="ant-btn ant-btn-primary" type="button">
<!----><span>OK</span>
</button></div>
</div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
</div>
</div>
</div>
@ -57,15 +53,15 @@ exports[`Modal render without footer 1`] = `
<div></div>
<div class="ant-modal-root">
<div class="ant-modal-mask"></div>
<div tabindex="-1" class="ant-modal-wrap " role="dialog">
<div role="document" style="width: 520px;" class="ant-modal">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
<div tabindex="-1" class="ant-modal-wrap" role="dialog">
<div style="width: 520px;" class="ant-modal" role="document">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
<div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
<!---->
<div class="ant-modal-body">Here is content of Modal</div>
<!---->
</div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
</div>
</div>
</div>
@ -75,21 +71,21 @@ exports[`Modal render without footer 1`] = `
exports[`Modal should work with getContainer=false 1`] = `
<div class="ant-modal-root">
<div class="ant-modal-mask"></div>
<div tabindex="-1" class="ant-modal-wrap " role="dialog">
<div role="document" style="width: 520px;" class="ant-modal">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
<div tabindex="-1" class="ant-modal-wrap" role="dialog">
<div style="width: 520px;" class="ant-modal" role="document">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
<div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
<!---->
<div class="ant-modal-body"></div>
<div class="ant-modal-footer">
<div><button class="ant-btn" type="button">
<!----><span>Cancel</span>
</button><button class="ant-btn ant-btn-primary" type="button">
<!----><span>OK</span>
</button></div>
<div class="ant-modal-body">
<!---->
</div>
<div class="ant-modal-footer"><button class="ant-btn" type="button">
<!----><span>Cancel</span>
</button><button class="ant-btn ant-btn-primary" type="button">
<!----><span>OK</span>
</button></div>
</div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
</div>
</div>
</div>

8
components/modal/__tests__/__snapshots__/demo.test.js.snap
View File

@ -90,6 +90,14 @@ exports[`renders ./components/modal/demo/manual.vue correctly 1`] = `
</button>
`;
exports[`renders ./components/modal/demo/modal-render.vue correctly 1`] = `
<div><button class="ant-btn ant-btn-primary" type="button">
<!----><span>Open Draggable Modal</span>
</button>
<!---->
</div>
`;
exports[`renders ./components/modal/demo/position.vue correctly 1`] = `
<div id="components-modal-demo-position"><button class="ant-btn ant-btn-primary" type="button">
<!----><span>Display a modal dialog at 20px to Top</span>

14
components/modal/__tests__/confirm.test.js
View File

@ -5,7 +5,11 @@ jest.mock('../../_util/Portal');
describe('Modal.confirm triggers callbacks correctly', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
document.createDocumentFragment = () => {
const container = document.createElement('div');
document.body.appendChild(container);
return container;
};
afterEach(() => {
errorSpy.mockReset();
document.body.innerHTML = '';
@ -94,7 +98,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
});
it('trigger onCancel once when click on cancel button', async () => {
const arr = ['info', 'success', 'warning', 'error'];
const arr = ['info'];
for (let type of arr) {
Modal[type]({
title: 'title',
@ -102,9 +106,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
});
await sleep();
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
$$('.ant-btn')[0].click();
await sleep(500);
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
// $$('.ant-btn')[0].click();
// await sleep(2000);
// expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
}
});

116
components/modal/confirm.tsx
View File

@ -4,42 +4,32 @@ import type { ModalFuncProps } from './Modal';
import { destroyFns } from './Modal';
import ConfigProvider, { globalConfigForApi } from '../config-provider';
import omit from '../_util/omit';
import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined';
import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
type ConfigUpdate = ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps);
export type ModalFunc = (props: ModalFuncProps) => {
destroy: () => void;
update: (configUpdate: ConfigUpdate) => void;
};
const confirm = (config: ModalFuncProps) => {
const div = document.createElement('div');
document.body.appendChild(div);
const container = document.createDocumentFragment();
let currentConfig = {
...omit(config, ['parentContext', 'appContext']),
close,
visible: true,
} as any;
let confirmDialogInstance = null;
function close(this: typeof close, ...args: any[]) {
currentConfig = {
...currentConfig,
visible: false,
afterClose: destroy.bind(this, ...args),
};
update(currentConfig);
}
function update(newConfig: ModalFuncProps) {
currentConfig = {
...currentConfig,
...newConfig,
};
if (confirmDialogInstance) {
Object.assign(confirmDialogInstance.component.props, currentConfig);
confirmDialogInstance.component.update();
}
}
function destroy(...args: any[]) {
if (confirmDialogInstance && div.parentNode) {
if (confirmDialogInstance) {
// destroy
vueRender(null, div);
vueRender(null, container as any);
confirmDialogInstance.component.update();
confirmDialogInstance = null;
div.parentNode.removeChild(div);
}
const triggerCancel = args.some(param => param && param.triggerCancel);
if (config.onCancel && triggerCancel) {
@ -53,20 +43,49 @@ const confirm = (config: ModalFuncProps) => {
}
}
}
function close(this: typeof close, ...args: any[]) {
currentConfig = {
...currentConfig,
visible: false,
afterClose: () => {
if (typeof config.afterClose === 'function') {
config.afterClose();
}
destroy.apply(this, args);
},
};
update(currentConfig);
}
function update(configUpdate: ConfigUpdate) {
if (typeof configUpdate === 'function') {
currentConfig = configUpdate(currentConfig);
} else {
currentConfig = {
...currentConfig,
...configUpdate,
};
}
if (confirmDialogInstance) {
Object.assign(confirmDialogInstance.component.props, currentConfig);
confirmDialogInstance.component.update();
}
}
const Wrapper = (p: ModalFuncProps) => {
const global = globalConfigForApi;
const rootPrefixCls = global.prefixCls;
const prefixCls = p.prefixCls || `${rootPrefixCls}-modal`;
return (
<ConfigProvider {...(global as any)} notUpdateGlobalConfig={true} prefixCls={rootPrefixCls}>
<ConfirmDialog {...p} prefixCls={prefixCls}></ConfirmDialog>
<ConfirmDialog {...p} rootPrefixCls={rootPrefixCls} prefixCls={prefixCls}></ConfirmDialog>
</ConfigProvider>
);
};
function render(props: ModalFuncProps) {
const vm = createVNode(Wrapper, { ...props });
vm.appContext = config.parentContext || config.appContext || vm.appContext;
vueRender(vm, div);
vueRender(vm, container as any);
return vm;
}
@ -79,3 +98,48 @@ const confirm = (config: ModalFuncProps) => {
};
export default confirm;
export function withWarn(props: ModalFuncProps): ModalFuncProps {
return {
icon: () => <ExclamationCircleOutlined />,
okCancel: false,
...props,
type: 'warning',
};
}
export function withInfo(props: ModalFuncProps): ModalFuncProps {
return {
icon: () => <InfoCircleOutlined />,
okCancel: false,
...props,
type: 'info',
};
}
export function withSuccess(props: ModalFuncProps): ModalFuncProps {
return {
icon: () => <CheckCircleOutlined />,
okCancel: false,
...props,
type: 'success',
};
}
export function withError(props: ModalFuncProps): ModalFuncProps {
return {
icon: () => <CloseCircleOutlined />,
okCancel: false,
...props,
type: 'error',
};
}
export function withConfirm(props: ModalFuncProps): ModalFuncProps {
return {
icon: () => <ExclamationCircleOutlined />,
okCancel: true,
...props,
type: 'confirm',
};
}

99
components/modal/demo/modal-render.vue Normal file
View File

@ -0,0 +1,99 @@
<docs>
---
order: 13
title:
zh-CN: 自定义渲染对话框
en-US: Custom modal content render
debugger: true
---
## zh-CN
自定义渲染对话框, 可通过 `react-draggable` 来实现拖拽。
## en-US
Custom modal content render. use `react-draggable` implements draggable.
</docs>
<template>
<div>
<a-button type="primary" @click="showModal">Open Draggable Modal</a-button>
<a-modal v-model:visible="visible" @ok="handleOk">
<template #title>
<div
class="drag"
style="width: 100%; cursor: move"
@mouseover="handleMouseover"
@mouseout="handleMouseout"
@focus="() => {}"
@blur="() => {}"
>
Draggable Modal
</div>
</template>
<p>
Just don&apos;t learn physics at school and your life will be full of magic and miracles.
</p>
<br />
<p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
<template #modalRender="{ originVNode }">
<VueDragResize is-active drag-handle=".drag" :is-resizable="false">
<component :is="originVNode"></component>
</VueDragResize>
</template>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import VueDragResize from 'vue-drag-resize';
export default defineComponent({
components: {
VueDragResize,
},
setup() {
const visible = ref<boolean>(false);
const draggleRef = ref();
const disabled = ref(true);
const bounds = ref({ left: 0, top: 0, width: 520, height: 0 });
const showModal = () => {
visible.value = true;
};
const handleOk = (e: MouseEvent) => {
console.log(e);
visible.value = false;
};
const onStart = (event, uiData) => {
const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = draggleRef.value?.getBoundingClientRect();
if (!targetRect) {
return;
}
bounds.value = {
left: `${-targetRect.left + uiData.x}px`,
right: `${clientWidth - (targetRect.right - uiData.x)}`,
top: `${-targetRect.top + uiData.y}`,
bottom: `${clientHeight - (targetRect.bottom - uiData.y)}`,
};
};
return {
visible,
showModal,
handleOk,
onStart,
handleMouseover() {
if (disabled.value) {
disabled.value = false;
}
},
handleMouseout() {
disabled.value = true;
},
};
},
});
</script>

70
components/modal/index.tsx
View File

@ -1,70 +1,34 @@
import type { App, Plugin } from 'vue';
import type { ModalFunc, ModalFuncProps } from './Modal';
import Modal, { destroyFns } from './Modal';
import modalConfirm from './confirm';
import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined';
import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
import confirm, { withWarn, withInfo, withSuccess, withError, withConfirm } from './confirm';
export type { IActionButtonProps as ActionButtonProps } from './ActionButton';
export type { ActionButtonProps } from './ActionButton';
export type { ModalProps, ModalFuncProps } from './Modal';
const info = function (props: ModalFuncProps) {
const config = {
type: 'info',
icon: () => <InfoCircleOutlined />,
okCancel: false,
...props,
};
return modalConfirm(config);
function modalWarn(props: ModalFuncProps) {
return confirm(withWarn(props));
}
Modal.info = function infoFn(props: ModalFuncProps) {
return confirm(withInfo(props));
};
const success = function (props: ModalFuncProps) {
const config = {
type: 'success',
icon: () => <CheckCircleOutlined />,
okCancel: false,
...props,
};
return modalConfirm(config);
Modal.success = function successFn(props: ModalFuncProps) {
return confirm(withSuccess(props));
};
const error = function (props: ModalFuncProps) {
const config = {
type: 'error',
icon: () => <CloseCircleOutlined />,
okCancel: false,
...props,
};
return modalConfirm(config);
Modal.error = function errorFn(props: ModalFuncProps) {
return confirm(withError(props));
};
const warning = function (props: ModalFuncProps) {
const config = {
type: 'warning',
icon: () => <ExclamationCircleOutlined />,
okCancel: false,
...props,
};
return modalConfirm(config);
};
const warn = warning;
Modal.warning = modalWarn;
const confirm = function confirmFn(props: ModalFuncProps) {
const config = {
type: 'confirm',
okCancel: true,
...props,
};
return modalConfirm(config);
Modal.warn = modalWarn;
Modal.confirm = function confirmFn(props: ModalFuncProps) {
return confirm(withConfirm(props));
};
Modal.info = info;
Modal.success = success;
Modal.error = error;
Modal.warning = warning;
Modal.warn = warn;
Modal.confirm = confirm;
Modal.destroyAll = function destroyAllFn() {
while (destroyFns.length) {

4
components/modal/style/confirm.less
View File

@ -8,7 +8,7 @@
}
.@{ant-prefix}-modal-body {
padding: 32px 32px 24px;
padding: @modal-confirm-body-padding;
}
&-body-wrapper {
@ -49,7 +49,7 @@
float: right;
margin-top: 24px;
button + button {
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
margin-bottom: 0;
margin-left: 8px;
}

3
components/modal/style/index.less
View File

@ -2,3 +2,6 @@
@import '../../style/mixins/index';
@import './modal';
@import './confirm';
@import './rtl';
.popover-customize-bg(@dialog-prefix-cls, @popover-background);

0
components/modal/style/index.ts → components/modal/style/index.tsx
View File

63
components/modal/style/modal.less
View File

@ -1,36 +1,26 @@
@dialog-prefix-cls: ~'@{ant-prefix}-modal';
@table-prefix-cls: ~'@{ant-prefix}-table';
@modal-footer-padding-vertical: 10px;
@modal-footer-padding-horizontal: 16px;
.@{dialog-prefix-cls} {
.reset-component();
.modal-mask();
position: relative;
top: 100px;
width: auto;
max-width: calc(100vw - 32px);
margin: 0 auto;
padding-bottom: 24px;
pointer-events: none;
&-wrap {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
overflow: auto;
outline: 0;
-webkit-overflow-scrolling: touch;
}
&-title {
margin: 0;
color: @modal-heading-color;
font-weight: 500;
font-size: @font-size-lg;
line-height: 22px;
font-size: @modal-header-title-font-size;
line-height: @modal-header-title-line-height;
word-wrap: break-word;
}
@ -50,7 +40,7 @@
right: 0;
z-index: @zindex-popup-close;
padding: 0;
color: @text-color-secondary;
color: @modal-close-color;
font-weight: 700;
line-height: 1;
text-decoration: none;
@ -62,11 +52,11 @@
&-x {
display: block;
width: 56px;
height: 56px;
width: @modal-header-close-size;
height: @modal-header-close-size;
font-size: @font-size-lg;
font-style: normal;
line-height: 56px;
line-height: @modal-header-close-size;
text-align: center;
text-transform: none;
text-rendering: auto;
@ -80,10 +70,11 @@
}
&-header {
padding: 16px 24px;
padding: @modal-header-padding;
color: @text-color;
background: @modal-header-bg;
border-bottom: @border-width-base @border-style-base @modal-header-border-color-split;
border-bottom: @modal-header-border-width @modal-header-border-style
@modal-header-border-color-split;
border-radius: @border-radius-base @border-radius-base 0 0;
}
@ -98,38 +89,16 @@
padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
text-align: right;
background: @modal-footer-bg;
border-top: @border-width-base @border-style-base @modal-footer-border-color-split;
border-top: @modal-footer-border-width @modal-footer-border-style
@modal-footer-border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base;
button + button {
.@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
margin-bottom: 0;
margin-left: 8px;
}
}
&.zoom-enter,
&.zoom-appear {
transform: none; // reset scale avoid mousePosition bug
opacity: 0;
animation-duration: @animation-duration-slow;
user-select: none; // https://github.com/ant-design/ant-design/issues/11777
}
&-mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-mask;
height: 100%;
background-color: @modal-mask-bg;
filter: ~'alpha(opacity=50)';
&-hidden {
display: none;
}
}
&-open {
overflow: hidden;
}
@ -137,6 +106,7 @@
.@{dialog-prefix-cls}-centered {
text-align: center;
&::before {
display: inline-block;
width: 0;
@ -147,6 +117,7 @@
.@{dialog-prefix-cls} {
top: 0;
display: inline-block;
padding-bottom: 0;
text-align: left;
vertical-align: middle;
}

74
components/modal/style/rtl.less Normal file
View File

@ -0,0 +1,74 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@dialog-prefix-cls: ~'@{ant-prefix}-modal';
@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
.@{dialog-prefix-cls} {
&-wrap {
&-rtl {
direction: rtl;
}
}
&-close {
.@{dialog-wrap-rtl-cls} & {
right: initial;
left: 0;
}
}
&-footer {
.@{dialog-wrap-rtl-cls} & {
text-align: left;
}
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
.@{dialog-wrap-rtl-cls} & {
margin-right: 8px;
margin-left: 0;
}
}
}
&-confirm {
&-body {
.@{dialog-wrap-rtl-cls} & {
direction: rtl;
}
> .@{iconfont-css-prefix} {
.@{dialog-wrap-rtl-cls} & {
float: right;
margin-right: 0;
margin-left: 16px;
}
+ .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
.@{dialog-wrap-rtl-cls} & {
margin-right: 38px;
margin-left: 0;
}
}
}
}
&-btns {
.@{dialog-wrap-rtl-cls} & {
float: left;
}
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
.@{dialog-wrap-rtl-cls} & {
margin-right: 8px;
margin-left: 0;
}
}
}
}
}
.@{dialog-prefix-cls}-centered {
.@{dialog-prefix-cls} {
.@{dialog-wrap-rtl-cls}& {
text-align: right;
}
}
}

17
components/style/themes/default.less
View File

@ -522,17 +522,28 @@
// Modal
// --
@modal-body-padding: 24px;
@modal-header-padding-vertical: @padding-md;
@modal-header-padding-horizontal: @padding-lg;
@modal-body-padding: @padding-lg;
@modal-header-bg: @component-background;
@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
@modal-header-border-width: @border-width-base;
@modal-header-border-style: @border-style-base;
@modal-header-title-line-height: 22px;
@modal-header-title-font-size: @font-size-lg;
@modal-header-border-color-split: @border-color-split;
@modal-header-close-size: 56px;
@modal-content-bg: @component-background;
@modal-heading-color: @heading-color;
@modal-close-color: @text-color-secondary;
@modal-footer-bg: transparent;
@modal-footer-border-color-split: @border-color-split;
@modal-mask-bg: fade(@black, 45%);
@modal-close-color: @text-color-secondary;
@modal-footer-border-style: @border-style-base;
@modal-footer-padding-vertical: 10px;
@modal-footer-padding-horizontal: 16px;
@modal-footer-border-width: @border-width-base;
@modal-mask-bg: fade(@black, 45%);
@modal-confirm-body-padding: 32px 32px 24px;
// Progress
// --

154
components/vc-dialog/Content.tsx Normal file
View File

@ -0,0 +1,154 @@
import type { CSSProperties, PropType } from 'vue';
import { computed, ref, defineComponent, nextTick } from 'vue';
import type { MouseEventHandler } from '../_util/EventInterface';
import Transition, { getTransitionProps } from '../_util/transition';
import dialogPropTypes from './IDialogPropTypes';
import { offset } from './util';
const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' };
export type ContentRef = {
focus: () => void;
changeActive: (next: boolean) => void;
};
export default defineComponent({
name: 'Content',
inheritAttrs: false,
props: {
...dialogPropTypes(),
motionName: String,
ariaId: String,
onVisibleChanged: Function as PropType<(visible: boolean) => void>,
onMousedown: Function as PropType<MouseEventHandler>,
onMouseup: Function as PropType<MouseEventHandler>,
},
setup(props, { expose, slots, attrs }) {
const sentinelStartRef = ref<HTMLDivElement>();
const sentinelEndRef = ref<HTMLDivElement>();
const dialogRef = ref<HTMLDivElement>();
expose({
focus: () => {
sentinelStartRef.value?.focus();
},
changeActive: next => {
const { activeElement } = document;
if (next && activeElement === sentinelEndRef.value) {
sentinelStartRef.value.focus();
} else if (!next && activeElement === sentinelStartRef.value) {
sentinelEndRef.value.focus();
}
},
});
const transformOrigin = ref<string>();
const contentStyleRef = computed(() => {
const { width, height } = props;
const contentStyle: CSSProperties = {};
if (width !== undefined) {
contentStyle.width = typeof width === 'number' ? `${width}px` : width;
}
if (height !== undefined) {
contentStyle.height = typeof height === 'number' ? `${height}px` : height;
}
if (transformOrigin.value) {
contentStyle.transformOrigin = transformOrigin.value;
}
return contentStyle;
});
const onPrepare = () => {
nextTick(() => {
if (dialogRef.value) {
const elementOffset = offset(dialogRef.value);
transformOrigin.value = props.mousePosition
? `${props.mousePosition.x - elementOffset.left}px ${
props.mousePosition.y - elementOffset.top
}px`
: '';
}
});
};
const onVisibleChanged = (visible: boolean) => {
props.onVisibleChanged(visible);
};
return () => {
const {
prefixCls,
footer = slots.footer?.(),
title = slots.title?.(),
ariaId,
closable,
closeIcon = slots.closeIcon?.(),
onClose,
bodyStyle,
bodyProps,
onMousedown,
onMouseup,
visible,
modalRender = slots.modalRender,
destroyOnClose,
motionName,
} = props;
let footerNode: any;
if (footer) {
footerNode = <div class={`${prefixCls}-footer`}>{footer}</div>;
}
let headerNode: any;
if (title) {
headerNode = (
<div class={`${prefixCls}-header`}>
<div class={`${prefixCls}-title`} id={ariaId}>
{title}
</div>
</div>
);
}
let closer: any;
if (closable) {
closer = (
<button type="button" onClick={onClose} aria-label="Close" class={`${prefixCls}-close`}>
{closeIcon || <span class={`${prefixCls}-close-x`} />}
</button>
);
}
const content = (
<div class={`${prefixCls}-content`}>
{closer}
{headerNode}
<div class={`${prefixCls}-body`} style={bodyStyle} {...bodyProps}>
{slots.default?.()}
</div>
{footerNode}
</div>
);
const transitionProps = getTransitionProps(motionName);
return (
<Transition
{...transitionProps}
onBeforeEnter={onPrepare}
onAfterEnter={() => onVisibleChanged(true)}
onAfterLeave={() => onVisibleChanged(false)}
>
{visible || !destroyOnClose ? (
<div
{...attrs}
ref={dialogRef}
v-show={visible}
key="dialog-element"
role="document"
style={{ ...contentStyleRef.value, ...(attrs.style as any) }}
class={[prefixCls, attrs.class]}
onMousedown={onMousedown}
onMouseup={onMouseup}
>
<div tabindex={0} ref={sentinelStartRef} style={sentinelStyle} aria-hidden="true" />
{modalRender ? modalRender({ originVNode: content }) : content}
<div tabindex={0} ref={sentinelEndRef} style={sentinelStyle} aria-hidden="true" />
</div>
) : null}
</Transition>
);
};
},
});

435
components/vc-dialog/Dialog.jsx
View File

@ -1,435 +0,0 @@
import { defineComponent, provide } from 'vue';
import { initDefaultProps, getSlot, findDOMNode } from '../_util/props-util';
import KeyCode from '../_util/KeyCode';
import contains from '../vc-util/Dom/contains';
import LazyRenderBox from './LazyRenderBox';
import BaseMixin from '../_util/BaseMixin';
import { getTransitionProps, Transition } from '../_util/transition';
import switchScrollingEffect from '../_util/switchScrollingEffect';
import getDialogPropTypes from './IDialogPropTypes';
import warning from '../_util/warning';
const IDialogPropTypes = getDialogPropTypes();
let uuid = 0;
function noop() {}
function getScroll(w, top) {
let ret = w[`page${top ? 'Y' : 'X'}Offset`];
const method = `scroll${top ? 'Top' : 'Left'}`;
if (typeof ret !== 'number') {
const d = w.document;
ret = d.documentElement[method];
if (typeof ret !== 'number') {
ret = d.body[method];
}
}
return ret;
}
function setTransformOrigin(node, value) {
const style = node.style;
['Webkit', 'Moz', 'Ms', 'ms'].forEach(prefix => {
style[`${prefix}TransformOrigin`] = value;
});
style[`transformOrigin`] = value;
}
function offset(el) {
const rect = el.getBoundingClientRect();
const pos = {
left: rect.left,
top: rect.top,
};
const doc = el.ownerDocument;
const w = doc.defaultView || doc.parentWindow;
pos.left += getScroll(w);
pos.top += getScroll(w, true);
return pos;
}
let cacheOverflow = {};
export default defineComponent({
name: 'VcDialog',
mixins: [BaseMixin],
inheritAttrs: false,
props: initDefaultProps(IDialogPropTypes, {
mask: true,
visible: false,
keyboard: true,
closable: true,
maskClosable: true,
destroyOnClose: false,
prefixCls: 'rc-dialog',
getOpenCount: () => null,
focusTriggerAfterClose: true,
}),
data() {
warning(!this.dialogClass, 'Modal', 'dialogClass is deprecated, please use class instead.');
warning(!this.dialogStyle, 'Modal', 'dialogStyle is deprecated, please use style instead.');
return {
inTransition: false,
titleId: `rcDialogTitle${uuid++}`,
dialogMouseDown: undefined,
};
},
watch: {
visible(val) {
this.$nextTick(() => {
this.updatedCallback(!val);
});
},
},
created() {
provide('dialogContext', this);
},
mounted() {
this.$nextTick(() => {
this.updatedCallback(false);
// if forceRender is true, set element style display to be none;
if ((this.forceRender || (this.getContainer === false && !this.visible)) && this.$refs.wrap) {
this.$refs.wrap.style.display = 'none';
}
});
},
beforeUnmount() {
const { visible, getOpenCount } = this;
if ((visible || this.inTransition) && !getOpenCount()) {
this.switchScrollingEffect();
}
clearTimeout(this.timeoutId);
},
methods: {
// 对外暴露的 api 不要更改名称或删除
getDialogWrap() {
return this.$refs.wrap;
},
updatedCallback(visible) {
const mousePosition = this.mousePosition;
const { mask, focusTriggerAfterClose } = this;
if (this.visible) {
// first show
if (!visible) {
this.openTime = Date.now();
// this.lastOutSideFocusNode = document.activeElement
this.switchScrollingEffect();
// this.$refs.wrap.focus()
this.tryFocus();
const dialogNode = findDOMNode(this.$refs.dialog);
if (mousePosition) {
const elOffset = offset(dialogNode);
setTransformOrigin(
dialogNode,
`${mousePosition.x - elOffset.left}px ${mousePosition.y - elOffset.top}px`,
);
} else {
setTransformOrigin(dialogNode, '');
}
}
} else if (visible) {
this.inTransition = true;
if (mask && this.lastOutSideFocusNode && focusTriggerAfterClose) {
try {
this.lastOutSideFocusNode.focus();
} catch (e) {
this.lastOutSideFocusNode = null;
}
this.lastOutSideFocusNode = null;
}
}
},
tryFocus() {
if (!contains(this.$refs.wrap, document.activeElement)) {
this.lastOutSideFocusNode = document.activeElement;
this.$refs.sentinelStart.focus();
}
},
onAnimateLeave() {
const { afterClose } = this;
// need demo?
// https://github.com/react-component/dialog/pull/28
if (this.$refs.wrap) {
this.$refs.wrap.style.display = 'none';
}
this.inTransition = false;
this.switchScrollingEffect();
if (afterClose) {
afterClose();
}
},
onDialogMouseDown() {
this.dialogMouseDown = true;
},
onMaskMouseUp() {
if (this.dialogMouseDown) {
this.timeoutId = setTimeout(() => {
this.dialogMouseDown = false;
}, 0);
}
},
onMaskClick(e) {
// android trigger click on open (fastclick??)
if (Date.now() - this.openTime < 300) {
return;
}
if (e.target === e.currentTarget && !this.dialogMouseDown) {
this.close(e);
}
},
onKeydown(e) {
const props = this.$props;
if (props.keyboard && e.keyCode === KeyCode.ESC) {
e.stopPropagation();
this.close(e);
return;
}
// keep focus inside dialog
if (props.visible) {
if (e.keyCode === KeyCode.TAB) {
const activeElement = document.activeElement;
const sentinelStart = this.$refs.sentinelStart;
if (e.shiftKey) {
if (activeElement === sentinelStart) {
this.$refs.sentinelEnd.focus();
}
} else if (activeElement === this.$refs.sentinelEnd) {
sentinelStart.focus();
}
}
}
},
getDialogElement() {
const {
closable,
prefixCls,
width,
height,
title,
footer: tempFooter,
bodyStyle,
visible,
bodyProps,
forceRender,
closeIcon,
dialogStyle = {},
dialogClass = '',
} = this;
const dest = { ...dialogStyle };
if (width !== undefined) {
dest.width = typeof width === 'number' ? `${width}px` : width;
}
if (height !== undefined) {
dest.height = typeof height === 'number' ? `${height}px` : height;
}
let footer;
if (tempFooter) {
footer = (
<div key="footer" class={`${prefixCls}-footer`} ref="footer">
{tempFooter}
</div>
);
}
let header;
if (title) {
header = (
<div key="header" class={`${prefixCls}-header`} ref="header">
<div class={`${prefixCls}-title`} id={this.titleId}>
{title}
</div>
</div>
);
}
let closer;
if (closable) {
closer = (
<button
type="button"
key="close"
onClick={this.close || noop}
aria-label="Close"
class={`${prefixCls}-close`}
>
{closeIcon || <span class={`${prefixCls}-close-x`} />}
</button>
);
}
const { style: stl, class: className } = this.$attrs;
const style = { ...stl, ...dest };
const sentinelStyle = { width: 0, height: 0, overflow: 'hidden' };
const cls = [prefixCls, className, dialogClass];
const transitionName = this.getTransitionName();
const dialogElement = (
<LazyRenderBox
v-show={visible}
key="dialog-element"
role="document"
ref="dialog"
style={style}
class={cls}
forceRender={forceRender}
onMousedown={this.onDialogMouseDown}
>
<div tabindex={0} ref="sentinelStart" style={sentinelStyle} aria-hidden="true" />
<div class={`${prefixCls}-content`}>
{closer}
{header}
<div key="body" class={`${prefixCls}-body`} style={bodyStyle} ref="body" {...bodyProps}>
{getSlot(this)}
</div>
{footer}
</div>
<div tabindex={0} ref="sentinelEnd" style={sentinelStyle} aria-hidden="true" />
</LazyRenderBox>
);
const dialogTransitionProps = getTransitionProps(transitionName, {
onAfterLeave: this.onAnimateLeave,
});
return (
<Transition key="dialog" {...dialogTransitionProps}>
{visible || !this.destroyOnClose ? dialogElement : null}
</Transition>
);
},
getZIndexStyle() {
const style = {};
const props = this.$props;
if (props.zIndex !== undefined) {
style.zIndex = props.zIndex;
}
return style;
},
getWrapStyle() {
return { ...this.getZIndexStyle(), ...this.wrapStyle };
},
getMaskStyle() {
return { ...this.getZIndexStyle(), ...this.maskStyle };
},
getMaskElement() {
const props = this.$props;
let maskElement;
if (props.mask) {
const maskTransition = this.getMaskTransitionName();
const tempMaskElement = (
<LazyRenderBox
v-show={props.visible}
style={this.getMaskStyle()}
key="mask"
class={`${props.prefixCls}-mask`}
{...(props.maskProps || {})}
/>
);
if (maskTransition) {
const maskTransitionProps = getTransitionProps(maskTransition);
maskElement = (
<Transition key="mask" {...maskTransitionProps}>
{tempMaskElement}
</Transition>
);
} else {
maskElement = tempMaskElement;
}
}
return maskElement;
},
getMaskTransitionName() {
const props = this.$props;
let transitionName = props.maskTransitionName;
const animation = props.maskAnimation;
if (!transitionName && animation) {
transitionName = `${props.prefixCls}-${animation}`;
}
return transitionName;
},
getTransitionName() {
const props = this.$props;
let transitionName = props.transitionName;
const animation = props.animation;
if (!transitionName && animation) {
transitionName = `${props.prefixCls}-${animation}`;
}
return transitionName;
},
// setScrollbar() {
// if (this.bodyIsOverflowing && this.scrollbarWidth !== undefined) {
// document.body.style.paddingRight = `${this.scrollbarWidth}px`;
// }
// },
switchScrollingEffect() {
const { getOpenCount } = this;
const openCount = getOpenCount();
if (openCount === 1) {
if (cacheOverflow.hasOwnProperty('overflowX')) {
return;
}
cacheOverflow = {
overflowX: document.body.style.overflowX,
overflowY: document.body.style.overflowY,
overflow: document.body.style.overflow,
};
switchScrollingEffect();
// Must be set after switchScrollingEffect
document.body.style.overflow = 'hidden';
} else if (!openCount) {
// IE browser doesn't merge overflow style, need to set it separately
// https://github.com/ant-design/ant-design/issues/19393
if (cacheOverflow.overflow !== undefined) {
document.body.style.overflow = cacheOverflow.overflow;
}
if (cacheOverflow.overflowX !== undefined) {
document.body.style.overflowX = cacheOverflow.overflowX;
}
if (cacheOverflow.overflowY !== undefined) {
document.body.style.overflowY = cacheOverflow.overflowY;
}
cacheOverflow = {};
switchScrollingEffect(true);
}
},
// removeScrollingEffect() {
// const { getOpenCount } = this;
// const openCount = getOpenCount();
// if (openCount !== 0) {
// return;
// }
// document.body.style.overflow = '';
// switchScrollingEffect(true);
// // this.resetAdjustments();
// },
close(e) {
this.__emit('close', e);
},
},
render() {
const { prefixCls, maskClosable, visible, wrapClassName, title, wrapProps } = this;
const style = this.getWrapStyle();
// clear hide display
// and only set display after async anim, not here for hide
if (visible) {
style.display = null;
}
return (
<div class={`${prefixCls}-root`}>
{this.getMaskElement()}
<div
tabindex={-1}
onKeydown={this.onKeydown}
class={`${prefixCls}-wrap ${wrapClassName || ''}`}
ref="wrap"
onClick={maskClosable ? this.onMaskClick : noop}
onMouseup={maskClosable ? this.onMaskMouseUp : noop}
role="dialog"
aria-labelledby={title ? this.titleId : null}
style={style}
{...wrapProps}
>
{this.getDialogElement()}
</div>
</div>
);
},
});

200
components/vc-dialog/Dialog.tsx Normal file
View File

@ -0,0 +1,200 @@
import type { PropType } from 'vue';
import { defineComponent, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
import contains from '../vc-util/Dom/contains';
import type ScrollLocker from '../vc-util/Dom/scrollLocker';
import classNames from '../_util/classNames';
import type { MouseEventHandler } from '../_util/EventInterface';
import KeyCode from '../_util/KeyCode';
import omit from '../_util/omit';
import pickAttrs from '../_util/pickAttrs';
import { initDefaultProps } from '../_util/props-util';
import type { ContentRef } from './Content';
import Content from './Content';
import dialogPropTypes from './IDialogPropTypes';
import Mask from './Mask';
import { getMotionName, getUUID } from './util';
export default defineComponent({
name: 'Dialog',
inheritAttrs: false,
props: initDefaultProps(
{
...dialogPropTypes(),
getOpenCount: Function as PropType<() => number>,
scrollLocker: Object as PropType<ScrollLocker>,
},
{
mask: true,
visible: false,
keyboard: true,
closable: true,
maskClosable: true,
destroyOnClose: false,
prefixCls: 'rc-dialog',
getOpenCount: () => null,
focusTriggerAfterClose: true,
},
),
setup(props, { attrs, slots }) {
const lastOutSideActiveElementRef = ref<HTMLElement>();
const wrapperRef = ref<HTMLDivElement>();
const contentRef = ref<ContentRef>();
const animatedVisible = ref(props.visible);
const ariaIdRef = ref<string>(`vcDialogTitle${getUUID()}`);
// ========================= Events =========================
const onDialogVisibleChanged = (newVisible: boolean) => {
if (newVisible) {
// Try to focus
if (!contains(wrapperRef.value, document.activeElement as HTMLElement)) {
lastOutSideActiveElementRef.value = document.activeElement as HTMLElement;
contentRef.value?.focus();
}
} else {
const preAnimatedVisible = animatedVisible.value;
// Clean up scroll bar & focus back
animatedVisible.value = false;
if (props.mask && lastOutSideActiveElementRef.value && props.focusTriggerAfterClose) {
try {
lastOutSideActiveElementRef.value.focus({ preventScroll: true });
} catch (e) {
// Do nothing
}
lastOutSideActiveElementRef.value = null;
}
// Trigger afterClose only when change visible from true to false
if (preAnimatedVisible) {
props.afterClose?.();
}
}
};
const onInternalClose = (e: Event) => {
props.onClose?.(e);
};
// >>> Content
const contentClickRef = ref(false);
const contentTimeoutRef = ref<any>();
// We need record content click incase content popup out of dialog
const onContentMouseDown: MouseEventHandler = () => {
clearTimeout(contentTimeoutRef.value);
contentClickRef.value = true;
};
const onContentMouseUp: MouseEventHandler = () => {
contentTimeoutRef.value = setTimeout(() => {
contentClickRef.value = false;
});
};
const onWrapperClick = (e: MouseEvent) => {
if (!props.maskClosable) return null;
if (contentClickRef.value) {
contentClickRef.value = false;
} else if (wrapperRef.value === e.target) {
onInternalClose(e);
}
};
const onWrapperKeyDown = (e: KeyboardEvent) => {
if (props.keyboard && e.keyCode === KeyCode.ESC) {
e.stopPropagation();
onInternalClose(e);
return;
}
// keep focus inside dialog
if (props.visible) {
if (e.keyCode === KeyCode.TAB) {
contentRef.value.changeActive(!e.shiftKey);
}
}
};
watch(
() => props.visible,
() => {
if (props.visible) {
animatedVisible.value = true;
}
},
{ flush: 'post' },
);
onBeforeUnmount(() => {
clearTimeout(contentTimeoutRef.value);
props.scrollLocker?.unLock();
});
watchEffect(() => {
props.scrollLocker?.unLock();
if (animatedVisible.value) {
props.scrollLocker?.lock();
}
});
return () => {
const {
prefixCls,
mask,
visible,
maskTransitionName,
maskAnimation,
zIndex,
wrapClassName,
wrapStyle,
closable,
maskProps,
maskStyle,
transitionName,
animation,
wrapProps,
title = slots.title,
} = props;
const { style, class: className } = attrs;
return (
<div class={`${prefixCls}-root`} {...pickAttrs(props, { data: true })}>
<Mask
prefixCls={prefixCls}
visible={mask && visible}
motionName={getMotionName(prefixCls, maskTransitionName, maskAnimation)}
style={{
zIndex,
...maskStyle,
}}
maskProps={maskProps}
/>
<div
tabIndex={-1}
onKeyDown={onWrapperKeyDown}
class={classNames(`${prefixCls}-wrap`, wrapClassName)}
ref={wrapperRef}
onClick={onWrapperClick}
role="dialog"
aria-labelledby={title ? ariaIdRef.value : null}
style={{ zIndex, ...wrapStyle, display: !animatedVisible.value ? 'none' : null }}
{...wrapProps}
>
<Content
{...omit(props, ['scrollLocker'])}
style={style}
class={className}
v-slots={slots}
onMousedown={onContentMouseDown}
onMouseup={onContentMouseUp}
ref={contentRef}
closable={closable}
ariaId={ariaIdRef.value}
prefixCls={prefixCls}
visible={visible}
onClose={onInternalClose}
onVisibleChanged={onDialogVisibleChanged}
motionName={getMotionName(prefixCls, transitionName, animation)}
/>
</div>
</div>
);
};
},
});

49
components/vc-dialog/DialogWrap.jsx
View File

@ -1,49 +0,0 @@
import Dialog from './Dialog';
import getDialogPropTypes from './IDialogPropTypes';
import Portal from '../_util/PortalWrapper';
import { getSlot } from '../_util/props-util';
import { defineComponent } from 'vue';
const IDialogPropTypes = getDialogPropTypes();
const DialogWrap = defineComponent({
inheritAttrs: false,
props: {
...IDialogPropTypes,
visible: IDialogPropTypes.visible.def(false),
},
render() {
const { visible, getContainer, forceRender } = this.$props;
let dialogProps = {
...this.$props,
...this.$attrs,
ref: '_component',
key: 'dialog',
};
// 渲染在当前 dom 里；
if (getContainer === false) {
return (
<Dialog
{...dialogProps}
getOpenCount={() => 2} // 不对 body 做任何操作。。
>
{getSlot(this)}
</Dialog>
);
}
return (
<Portal
visible={visible}
forceRender={forceRender}
getContainer={getContainer}
v-slots={{
default: childProps => {
dialogProps = { ...dialogProps, ...childProps };
return <Dialog {...dialogProps}>{getSlot(this)}</Dialog>;
},
}}
/>
);
},
});
export default DialogWrap;

72
components/vc-dialog/DialogWrap.tsx Normal file
View File

@ -0,0 +1,72 @@
import Dialog from './Dialog';
import type { IDialogChildProps } from './IDialogPropTypes';
import getDialogPropTypes from './IDialogPropTypes';
import Portal from '../_util/PortalWrapper';
import { defineComponent, ref, watch } from 'vue';
const IDialogPropTypes = getDialogPropTypes();
const DialogWrap = defineComponent({
name: 'DialogWrap',
inheritAttrs: false,
props: {
...IDialogPropTypes,
visible: IDialogPropTypes.visible.def(false),
},
setup(props, { attrs, slots }) {
const animatedVisible = ref(props.visible);
watch(
() => props.visible,
() => {
if (props.visible) {
animatedVisible.value = true;
}
},
{ flush: 'post' },
);
return () => {
const { visible, getContainer, forceRender, destroyOnClose = false, afterClose } = props;
let dialogProps = {
...props,
...attrs,
ref: '_component',
key: 'dialog',
} as IDialogChildProps;
// 渲染在当前 dom 里；
if (getContainer === false) {
return (
<Dialog
{...dialogProps}
getOpenCount={() => 2} // 不对 body 做任何操作。。
v-slots={slots}
></Dialog>
);
}
// Destroy on close will remove wrapped div
if (!forceRender && destroyOnClose && !animatedVisible.value) {
return null;
}
return (
<Portal
visible={visible}
forceRender={forceRender}
getContainer={getContainer}
v-slots={{
default: (childProps: IDialogChildProps) => {
dialogProps = {
...dialogProps,
...childProps,
afterClose: () => {
afterClose?.();
animatedVisible.value = false;
},
};
return <Dialog {...dialogProps} v-slots={slots}></Dialog>;
},
}}
/>
);
};
},
});
export default DialogWrap;

9
components/vc-dialog/IDialogPropTypes.js → components/vc-dialog/IDialogPropTypes.ts
View File

@ -1,11 +1,11 @@
import type { ExtractPropTypes } from 'vue';
import PropTypes from '../_util/vue-types';
function IDialogPropTypes() {
function dialogPropTypes() {
return {
keyboard: PropTypes.looseBool,
mask: PropTypes.looseBool,
afterClose: PropTypes.func,
// onClose: PropTypes. (e: SyntheticEvent<HTMLDivElement>) =>any,
closable: PropTypes.looseBool,
maskClosable: PropTypes.looseBool,
visible: PropTypes.looseBool,
@ -41,7 +41,8 @@ function IDialogPropTypes() {
// https://github.com/react-component/dialog/issues/95
focusTriggerAfterClose: PropTypes.looseBool,
onClose: PropTypes.func,
modalRender: PropTypes.func,
};
}
export default IDialogPropTypes;
export type IDialogChildProps = Partial<ExtractPropTypes<ReturnType<typeof dialogPropTypes>>>;
export default dialogPropTypes;

15
components/vc-dialog/LazyRenderBox.jsx
View File

@ -1,15 +0,0 @@
import PropTypes from '../_util/vue-types';
import { getSlot } from '../_util/props-util';
const ILazyRenderBoxPropTypes = {
visible: PropTypes.looseBool,
hiddenClassName: PropTypes.string,
forceRender: PropTypes.looseBool,
};
export default {
props: ILazyRenderBoxPropTypes,
render() {
return <div>{getSlot(this)}</div>;
},
};

23
components/vc-dialog/Mask.tsx Normal file
View File

@ -0,0 +1,23 @@
import { defineComponent } from 'vue';
import Transition, { getTransitionProps } from '../_util/transition';
export default defineComponent({
name: 'Mask',
props: {
prefixCls: String,
visible: Boolean,
motionName: String,
maskProps: Object,
},
setup(props, {}) {
return () => {
const { prefixCls, visible, maskProps, motionName } = props;
const transitionProps = getTransitionProps(motionName);
return (
<Transition {...transitionProps}>
<div v-show={visible} class={`${prefixCls}-mask`} {...maskProps} />
</Transition>
);
};
},
});

3
components/vc-dialog/assets/bootstrap.less
View File

@ -1,3 +0,0 @@
@prefixCls: rc-dialog;
@import './bootstrap/Dialog.less';
@import './index/Mask.less';

133
components/vc-dialog/assets/bootstrap/Dialog.less
View File

@ -1,133 +0,0 @@
@import './variables.less';
.clearfix() {
&:before,
&:after {
content: ' '; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
.@{prefixCls} {
// Container that the rc-dialog scrolls within
&-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
}
// Shell div to position the rc-dialog with bottom padding
position: relative;
width: auto;
margin: 10px;
// Actual rc-dialog
&-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
// Remove focus outline from opened rc-dialog
outline: 0;
}
// Modal header
// Top section of the rc-dialog w/ title and dismiss
&-header {
padding: @modal-title-padding;
border-bottom: 1px solid @modal-header-border-color;
&:extend(.clearfix all);
}
&-close {
cursor: pointer;
border: 0;
background: transparent;
font-size: 21px;
position: absolute;
right: 20px;
top: 12px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: 0.2;
text-decoration: none;
&-x:after {
content: '×';
}
&:hover {
opacity: 1;
filter: alpha(opacity=100);
text-decoration: none;
}
}
// Title text within header
&-title {
margin: 0;
line-height: @modal-title-line-height;
}
// Modal body
// Where all rc-dialog content resides (sibling of &-header and &-footer)
&-body {
position: relative;
padding: @modal-inner-padding;
}
// Footer (for actions)
&-footer {
padding: @modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color;
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
// but override that for button groups
.btn-group .btn + .btn {
margin-left: -1px;
}
// and override it for block buttons as well
.btn-block + .btn-block {
margin-left: 0;
}
}
}
// Scale up the rc-dialog
@media (min-width: @screen-sm-min) {
.@{prefixCls} {
// Automatically set rc-dialog's width for larger viewports
width: @modal-md;
margin: 30px auto;
&-content {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}
}
@import './effect.less';

43
components/vc-dialog/assets/bootstrap/effect.less
View File

@ -1,43 +0,0 @@
.@{prefixCls} {
&-slide-fade-enter,
&-slide-fade-appear {
transform: translate(0, -25%);
}
&-slide-fade-enter,
&-slide-fade-appear,
&-slide-fade-leave {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-timing-function: ease-out;
animation-play-state: paused;
}
&-slide-fade-enter&-slide-fade-enter-active,
&-slide-fade-appear&-slide-fade-appear-active {
animation-name: rcDialogSlideFadeIn;
animation-play-state: running;
}
&-slide-fade-leave&-slide-fade-leave-active {
animation-name: rcDialogSlideFadeOut;
animation-play-state: running;
}
@keyframes rcDialogSlideFadeIn {
0% {
transform: translate(0, -25%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes rcDialogSlideFadeOut {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -25%);
}
}
}

837
components/vc-dialog/assets/bootstrap/variables.less
View File

@ -1,837 +0,0 @@
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%); // #222
@gray-dark: lighten(@gray-base, 20%); // #333
@gray: lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
@body-bg: #fff;
//** Global text color on `<body>`.
@text-color: @gray-dark;
//** Global textual link color.
@link-color: @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
//** Link hover decoration.
@link-hover-decoration: underline;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, 'Times New Roman', Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
//** By default, this inherits from the `<body>`.
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
@icon-font-path: '../fonts/';
//** File name for all font files.
@icon-font-name: 'glyphicons-halflings-regular';
//** Element ID within SVG icon file.
@icon-font-svg-id: 'glyphicons_halflingsregular';
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicate dropdowns.
@caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
@caret-width-large: 5px;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s.
@table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 5px;
//** Default background color used for all tables.
@table-bg: transparent;
//** Background color used for `.table-striped`.
@table-bg-accent: #f9f9f9;
//** Background color used for `.table-hover`.
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
//** Border color for table and cell borders.
@table-border-color: #ddd;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
@btn-font-weight: normal;
@btn-default-color: #333;
@btn-default-bg: #fff;
@btn-default-border: #ccc;
@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-success-color: #fff;
@btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%);
@btn-info-color: #fff;
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-warning-color: #fff;
@btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%);
@btn-danger-color: #fff;
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-link-disabled-color: @gray-light;
// Allows for customizing button radius independently from global border radius
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-large: @border-radius-large;
@btn-border-radius-small: @border-radius-small;
//== Forms
//
//##
//** `<input>` background color
@input-bg: #fff;
//** `<input disabled>` background color
@input-bg-disabled: @gray-lighter;
//** Text color for `<input>`s
@input-color: @gray;
//** `<input>` border color
@input-border: #ccc;
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//** Default `.form-control` border radius
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
@input-border-radius: @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large: @border-radius-large;
//** Small `.form-control` border radius
@input-border-radius-small: @border-radius-small;
//** Border color for inputs on focus
@input-border-focus: #66afe9;
//** Placeholder text color
@input-color-placeholder: #999;
//** Default `.form-control` height
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
//** Large `.form-control` height
@input-height-large: (
ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2
);
//** Small `.form-control` height
@input-height-small: (
floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2
);
//** `.form-group` margin
@form-group-margin-bottom: 15px;
@legend-color: @gray-dark;
@legend-border-color: #e5e5e5;
//** Background color for textual input addons
@input-group-addon-bg: @gray-lighter;
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
//** Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Background for the dropdown menu.
@dropdown-bg: #fff;
//** Dropdown menu `border-color`.
@dropdown-border: rgba(0, 0, 0, 0.15);
//** Dropdown menu `border-color` **for IE8**.
@dropdown-fallback-border: #ccc;
//** Divider color for between dropdown items.
@dropdown-divider-bg: #e5e5e5;
//** Dropdown link text color.
@dropdown-link-color: @gray-dark;
//** Hover color for dropdown links.
@dropdown-link-hover-color: darken(@gray-dark, 5%);
//** Hover background for dropdown links.
@dropdown-link-hover-bg: #f5f5f5;
//** Active dropdown menu item text color.
@dropdown-link-active-color: @component-active-color;
//** Active dropdown menu item background color.
@dropdown-link-active-bg: @component-active-bg;
//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color: @gray-light;
//** Text color for headers within dropdown menus.
@dropdown-header-color: @gray-light;
//** Deprecated `@dropdown-caret-color` as of v3.1.0
@dropdown-caret-color: #000;
//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;
// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
@container-tablet: (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;
//== Navbar
//
//##
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #888;
@navbar-default-toggle-border-color: #ddd;
//=== Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: lighten(@gray-light, 15%);
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: lighten(@gray-light, 15%);
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
//== Navs
//
//##
//=== Shared nav styles
@nav-link-padding: 10px 15px;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
//== Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
//== Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
//== Pagination
//
//##
@pagination-color: @link-color;
@pagination-bg: #fff;
@pagination-border: #ddd;
@pagination-hover-color: @link-hover-color;
@pagination-hover-bg: @gray-lighter;
@pagination-hover-border: #ddd;
@pagination-active-color: #fff;
@pagination-active-bg: @brand-primary;
@pagination-active-border: @brand-primary;
@pagination-disabled-color: @gray-light;
@pagination-disabled-bg: #fff;
@pagination-disabled-border: #ddd;
//== Pager
//
//##
@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;
@pager-disabled-color: @pagination-disabled-color;
//== Jumbotron
//
//##
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil((@font-size-base * 1.5));
@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
@state-success-text: #3c763d;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #31708f;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-warning-text: #8a6d3b;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
@state-danger-text: #a94442;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
//== Tooltips
//
//##
//** Tooltip max width
@tooltip-max-width: 200px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #000;
@tooltip-opacity: 0.9;
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
//== Popovers
//
//##
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-max-width: 276px;
//** Popover border color
@popover-border-color: rgba(0, 0, 0, 0.2);
//** Popover fallback border color
@popover-fallback-border-color: #ccc;
//** Popover title background color
@popover-title-bg: darken(@popover-bg, 3%);
//** Popover arrow width
@popover-arrow-width: 10px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
//== Labels
//
//##
//** Default label background color
@label-default-bg: @gray-light;
//** Primary label background color
@label-primary-bg: @brand-primary;
//** Success label background color
@label-success-bg: @brand-success;
//** Info label background color
@label-info-bg: @brand-info;
//** Warning label background color
@label-warning-bg: @brand-warning;
//** Danger label background color
@label-danger-bg: @brand-danger;
//** Default label text color
@label-color: #fff;
//** Default text color of a linked label
@label-link-hover-color: #fff;
//== Modals
//
//##
//** Padding applied to the modal body
@modal-inner-padding: 15px;
//** Padding applied to the modal title
@modal-title-padding: 15px;
//** Modal title line-height
@modal-title-line-height: @line-height-base;
//** Background color of modal content area
@modal-content-bg: #fff;
//** Modal content border color
@modal-content-border-color: rgba(0, 0, 0, 0.2);
//** Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
//** Modal backdrop background color
@modal-backdrop-bg: #000;
//** Modal backdrop opacity
@modal-backdrop-opacity: 0.5;
//** Modal header border color
@modal-header-border-color: #e5e5e5;
//** Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
//== Alerts
//
//## Define alert colors, border radius, and padding.
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
//== Progress bars
//
//##
//** Background color of the whole progress component
@progress-bg: #f5f5f5;
//** Progress bar text color
@progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base;
//** Default progress bar color
@progress-bar-bg: @brand-primary;
//** Success progress bar color
@progress-bar-success-bg: @brand-success;
//** Warning progress bar color
@progress-bar-warning-bg: @brand-warning;
//** Danger progress bar color
@progress-bar-danger-bg: @brand-danger;
//** Info progress bar color
@progress-bar-info-bg: @brand-info;
//== List group
//
//##
//** Background color on `.list-group-item`
@list-group-bg: #fff;
//** `.list-group-item` border color
@list-group-border: #ddd;
//** List group border radius
@list-group-border-radius: @border-radius-base;
//** Background color of single list items on hover
@list-group-hover-bg: #f5f5f5;
//** Text color of active list items
@list-group-active-color: @component-active-color;
//** Background color of active list items
@list-group-active-bg: @component-active-bg;
//** Border color of active list elements
@list-group-active-border: @list-group-active-bg;
//** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
//** Text color of disabled list items
@list-group-disabled-color: @gray-light;
//** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter;
//** Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color;
@list-group-link-color: #555;
@list-group-link-hover-color: @list-group-link-color;
@list-group-link-heading-color: #333;
//== Panels
//
//##
@panel-bg: #fff;
@panel-body-padding: 15px;
@panel-heading-padding: 10px 15px;
@panel-footer-padding: @panel-heading-padding;
@panel-border-radius: @border-radius-base;
//** Border color for elements within panels
@panel-inner-border: #ddd;
@panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark;
@panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
//== Thumbnails
//
//##
//** Padding around the thumbnail image
@thumbnail-padding: 4px;
//** Thumbnail background color
@thumbnail-bg: @body-bg;
//** Thumbnail border color
@thumbnail-border: #ddd;
//** Thumbnail border radius
@thumbnail-border-radius: @border-radius-base;
//** Custom text color for thumbnail captions
@thumbnail-caption-color: @text-color;
//** Padding around the thumbnail caption
@thumbnail-caption-padding: 9px;
//== Wells
//
//##
@well-bg: #f5f5f5;
@well-border: darken(@well-bg, 7%);
//== Badges
//
//##
@badge-color: #fff;
//** Linked badge text color on hover
@badge-link-hover-color: #fff;
@badge-bg: @gray-light;
//** Badge text color in active nav link
@badge-active-color: @link-color;
//** Badge background color in active nav link
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
//== Breadcrumbs
//
//##
@breadcrumb-padding-vertical: 8px;
@breadcrumb-padding-horizontal: 15px;
//** Breadcrumb background color
@breadcrumb-bg: #f5f5f5;
//** Breadcrumb text color
@breadcrumb-color: #ccc;
//** Text color of current page in the breadcrumb
@breadcrumb-active-color: @gray-light;
//** Textual separator for between breadcrumb elements
@breadcrumb-separator: '/';
//== Carousel
//
//##
@carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: 0.5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
//== Close
//
//##
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
//== Code
//
//##
@code-color: #c7254e;
@code-bg: #f9f2f4;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
//== Type
//
//##
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
//** Text muted color
@text-muted: @gray-light;
//** Abbreviations and acronyms border color
@abbr-border-color: @gray-light;
//** Headings small color
@headings-small-color: @gray-light;
//** Blockquote small color
@blockquote-small-color: @gray-light;
//** Blockquote font size
@blockquote-font-size: (@font-size-base * 1.25);
//** Blockquote border color
@blockquote-border-color: @gray-lighter;
//** Page header border color
@page-header-border-color: @gray-lighter;
//** Width of horizontal description list titles
@dl-horizontal-offset: @component-offset-horizontal;
//** Point at which .dl-horizontal becomes horizontal
@dl-horizontal-breakpoint: @grid-float-breakpoint;
//** Horizontal line color.
@hr-border: @gray-lighter;

4
components/vc-dialog/assets/index.less
View File

@ -1,4 +0,0 @@
@prefixCls: rc-dialog;
@import './index/Dialog.less';
@import './index/Mask.less';

135
components/vc-dialog/assets/index/Dialog.less
View File

@ -1,135 +0,0 @@
.@{prefixCls} {
position: relative;
width: auto;
margin: 10px;
&-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
}
&-title {
margin: 0;
font-size: 14px;
line-height: 21px;
font-weight: bold;
}
&-content {
position: relative;
background-color: #ffffff;
border: none;
border-radius: 6px 6px;
background-clip: padding-box;
}
&-close {
cursor: pointer;
border: 0;
background: transparent;
font-size: 21px;
position: absolute;
right: 20px;
top: 12px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: 0.2;
text-decoration: none;
&-x:after {
content: '×';
}
&:hover {
opacity: 1;
filter: alpha(opacity=100);
text-decoration: none;
}
}
&-header {
padding: 13px 20px 14px 20px;
border-radius: 5px 5px 0 0;
background: #fff;
color: #666;
border-bottom: 1px solid #e9e9e9;
}
&-body {
padding: 20px;
}
&-footer {
border-top: 1px solid #e9e9e9;
padding: 10px 20px;
text-align: right;
border-radius: 0 0 5px 5px;
}
.effect() {
animation-duration: 0.3s;
animation-fill-mode: both;
}
&-zoom-enter,
&-zoom-appear {
opacity: 0;
.effect();
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
animation-play-state: paused;
}
&-zoom-leave {
.effect();
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
animation-play-state: paused;
}
&-zoom-enter&-zoom-enter-active,
&-zoom-appear&-zoom-appear-active {
animation-name: rcDialogZoomIn;
animation-play-state: running;
}
&-zoom-leave&-zoom-leave-active {
animation-name: rcDialogZoomOut;
animation-play-state: running;
}
@keyframes rcDialogZoomIn {
0% {
opacity: 0;
transform: scale(0, 0);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
@keyframes rcDialogZoomOut {
0% {
transform: scale(1, 1);
}
100% {
opacity: 0;
transform: scale(0, 0);
}
}
}
@media (min-width: 768px) {
.@{prefixCls} {
width: 600px;
margin: 30px auto;
}
}

65
components/vc-dialog/assets/index/Mask.less
View File

@ -1,65 +0,0 @@
.@{prefixCls} {
&-mask {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgb(55, 55, 55);
background-color: rgba(55, 55, 55, 0.6);
height: 100%;
filter: alpha(opacity=50);
z-index: 1050;
&-hidden {
display: none;
}
}
.fade-effect() {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
}
&-fade-enter,
&-fade-appear {
opacity: 0;
.fade-effect();
animation-play-state: paused;
}
&-fade-leave {
.fade-effect();
animation-play-state: paused;
}
&-fade-enter&-fade-enter-active,
&-fade-appear&-fade-appear-active {
animation-name: rcDialogFadeIn;
animation-play-state: running;
}
&-fade-leave&-fade-leave-active {
animation-name: rcDialogFadeOut;
animation-play-state: running;
}
@keyframes rcDialogFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes rcDialogFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
}

3
components/vc-dialog/index.js
View File

@ -1,3 +0,0 @@
// based on vc-dialog 7.5.14
import DialogWrap from './DialogWrap';
export default DialogWrap;

7
components/vc-dialog/index.ts Normal file
View File

@ -0,0 +1,7 @@
// based on vc-dialog 8.6.0
import DialogWrap from './DialogWrap';
import dialogProps from './IDialogPropTypes';
export { dialogProps };
export default DialogWrap;

46
components/vc-dialog/util.ts Normal file
View File

@ -0,0 +1,46 @@
// =============================== Motion ===============================
export function getMotionName(prefixCls: string, transitionName?: string, animationName?: string) {
let motionName = transitionName;
if (!motionName && animationName) {
motionName = `${prefixCls}-${animationName}`;
}
return motionName;
}
// ================================ UUID ================================
let uuid = -1;
export function getUUID() {
uuid += 1;
return uuid;
}
// =============================== Offset ===============================
function getScroll(w: Window, top?: boolean): number {
let ret = w[`page${top ? 'Y' : 'X'}Offset`];
const method = `scroll${top ? 'Top' : 'Left'}`;
if (typeof ret !== 'number') {
const d = w.document;
ret = d.documentElement[method];
if (typeof ret !== 'number') {
ret = d.body[method];
}
}
return ret;
}
type CompatibleDocument = {
parentWindow?: Window;
} & Document;
export function offset(el: Element) {
const rect = el.getBoundingClientRect();
const pos = {
left: rect.left,
top: rect.top,
};
const doc = el.ownerDocument as CompatibleDocument;
const w = doc.defaultView || doc.parentWindow;
pos.left += getScroll(w);
pos.top += getScroll(w, true);
return pos;
}

221
components/vc-drawer/assets/index.less
View File

@ -1,221 +0,0 @@
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@duration: 0.3s;
@drawer: drawer;
.@{drawer} {
position: fixed;
z-index: 9999;
transition: width 0s ease @duration, height 0s ease @duration, transform @duration @ease-in-out-circ;
>* {
transition: transform @duration @ease-in-out-circ, opacity @duration @ease-in-out-circ, box-shadow @duration @ease-in-out-circ;
}
&.@{drawer}-open {
transition: transform @duration @ease-in-out-circ;
}
& &-mask {
background: #000;
opacity: 0;
width: 100%;
height: 0;
position: absolute;
top: 0;
left: 0;
transition: opacity @duration @ease-in-out-circ,
height 0s ease @duration;
}
&-content-wrapper {
position: absolute;
background: #fff;
}
&-content {
overflow: auto;
z-index: 1;
position: relative;
}
&-handle {
position: absolute;
top: 72px;
width: 41px;
height: 40px;
cursor: pointer;
z-index: 0;
text-align: center;
line-height: 40px;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
&-icon {
width: 14px;
height: 2px;
background: #333;
position: relative;
transition: background @duration @ease-in-out-circ;
&:before,
&:after {
content: '';
display: block;
position: absolute;
background: #333;
width: 100%;
height: 2px;
transition: transform @duration @ease-in-out-circ;
}
&:before {
top: -5px;
}
&:after {
top: 5px;
}
}
}
&-left,
&-right {
width: 0%;
height: 100%;
.@{drawer}-content-wrapper,
.@{drawer}-content {
height: 100%;
}
&.@{drawer}-open {
width: 100%;
&.no-mask {
width: 0%;
}
}
}
&-left {
top: 0;
left: 0;
.@{drawer} {
&-handle {
right: -40px;
box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
border-radius: 0 4px 4px 0;
}
}
&.@{drawer}-open {
.@{drawer} {
&-content-wrapper {
box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
}
}
}
}
&-right {
top: 0;
right: 0;
.@{drawer} {
&-content-wrapper {
right: 0;
}
&-handle {
left: -40px;
box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
border-radius: 4px 0 0 4px;
}
}
&.@{drawer}-open {
& .@{drawer} {
&-content-wrapper {
box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
}
}
&.no-mask {
// https://github.com/ant-design/ant-design/issues/18607
right: 1px;
transform: translateX(1px);
}
}
}
&-top,
&-bottom {
width: 100%;
height: 0%;
.@{drawer}-content-wrapper,
.@{drawer}-content {
width: 100%;
}
.@{drawer}-content {
height: 100%;
}
&.@{drawer}-open {
height: 100%;
&.no-mask {
height: 0%;
}
}
.@{drawer} {
&-handle {
left: 50%;
margin-left: -20px;
}
}
}
&-top {
top: 0;
left: 0;
.@{drawer} {
&-handle {
top: auto;
bottom: -40px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
border-radius: 0 0 4px 4px;
}
}
&.@{drawer}-open {
.@{drawer} {
&-content-wrapper {
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
}
}
}
&-bottom {
bottom: 0;
left: 0;
.@{drawer} {
&-content-wrapper {
bottom: 0;
}
&-handle {
top: -40px;
box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
border-radius: 4px 4px 0 0;
}
}
&.@{drawer}-open {
.@{drawer} {
&-content-wrapper {
box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
}
}
&.no-mask {
// https://github.com/ant-design/ant-design/issues/18607
bottom: 1px;
transform: translateY(1px);
}
}
}
&.@{drawer}-open {
.@{drawer} {
&-mask {
opacity: .3;
height: 100%;
transition: opacity 0.3s @ease-in-out-circ;
}
&-handle {
&-icon {
background: transparent;
&:before {
transform: translateY(5px) rotate(45deg);
}
&:after {
transform: translateY(-5px) rotate(-45deg);
}
}
}
}
}
}

1
package.json
View File

@ -221,6 +221,7 @@
"vue": "^3.1.0",
"vue-antd-md-loader": "^1.2.1-beta.1",
"vue-clipboard2": "0.3.3",
"vue-drag-resize": "^2.0.3",
"vue-draggable-resizable": "^2.1.0",
"vue-eslint-parser": "^8.0.0",
"vue-i18n": "^9.1.7",