fix: can not scroll when close dialog #5096
tangjinzhou
parent
81ab68f696
commit
0f7e76bb14
|
|
@ -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)`;
|
||||
}
|
||||
};
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,6 @@
|
|||
@import '../../style/mixins/index';
|
||||
@import './modal';
|
||||
@import './confirm';
|
||||
@import './rtl';
|
||||
|
||||
.popover-customize-bg(@dialog-prefix-cls, @popover-background);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
// --
|
||||
|
|
|
|||
|
|
@ -0,0 +1,150 @@
|
|||
import type { CSSProperties, PropType } from 'vue';
|
||||
import { computed, ref, defineComponent } 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',
|
||||
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 }) {
|
||||
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 = () => {
|
||||
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}
|
||||
onEnter={onPrepare}
|
||||
// onBeforeEnter={onPrepare}
|
||||
onAfterEnter={() => onVisibleChanged(true)}
|
||||
onAfterLeave={() => onVisibleChanged(false)}
|
||||
>
|
||||
{visible || !destroyOnClose ? (
|
||||
<div
|
||||
ref={dialogRef}
|
||||
v-show={visible}
|
||||
key="dialog-element"
|
||||
role="document"
|
||||
style={contentStyleRef.value}
|
||||
class={prefixCls}
|
||||
onMousedown={onMousedown}
|
||||
onMouseup={onMouseup}
|
||||
>
|
||||
<div tabindex={0} ref={sentinelStartRef} style={sentinelStyle} aria-hidden="true" />
|
||||
{modalRender ? modalRender(content) : content}
|
||||
<div tabindex={0} ref={sentinelEndRef} style={sentinelStyle} aria-hidden="true" />
|
||||
</div>
|
||||
) : null}
|
||||
</Transition>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
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 {
|
||||
// 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 (animatedVisible.value) {
|
||||
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>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>;
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { defineComponent, Transition } from 'vue';
|
||||
import { 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>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@prefixCls: rc-dialog;
|
||||
@import './bootstrap/Dialog.less';
|
||||
@import './index/Mask.less';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@prefixCls: rc-dialog;
|
||||
|
||||
@import './index/Dialog.less';
|
||||
@import './index/Mask.less';
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// based on vc-dialog 7.5.14
|
||||
import DialogWrap from './DialogWrap';
|
||||
export default DialogWrap;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
// based on vc-dialog 8.6.0
|
||||
import DialogWrap from './DialogWrap';
|
||||
import dialogProps from './IDialogPropTypes';
|
||||
|
||||
export { dialogProps };
|
||||
|
||||
export default DialogWrap;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue