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

feat: modal method add wrapClassName

feat-css-var
tangjinzhou 2022-03-05 14:13:04 +08:00
parent 41d8d0ec0f
commit d38ecce22c
12 changed files with 84 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -17,6 +17,7 @@ import type { PanelMode, RangeValue } from '../../vc-picker/interface';
import type { RangePickerSharedProps } from '../../vc-picker/RangePicker';
import devWarning from '../../vc-util/devWarning';
import { useInjectFormItemContext } from '../../form/FormItemContext';
import omit from '../../_util/omit';
export default function generateRangePicker<DateType, ExtraProps = {}>(
generateConfig: GenerateConfig<DateType>,
@ -160,7 +161,9 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
additionalOverrideProps = {
...additionalOverrideProps,
...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
...(picker === 'time' ? getTimeProps({ format, ...restProps, picker }) : {}),
...(picker === 'time'
? getTimeProps({ format, ...omit(restProps, ['disabledTime']), picker })
: {}),
};
const pre = prefixCls.value;
return (

11
components/menu/src/InlineSubMenuList.tsx
View File

@ -31,12 +31,10 @@ export default defineComponent({
},
{ flush: 'post' },
);
const style = ref({});
const className = ref('');
const mergedMotion = computed(() => {
const m =
motion.value || defaultMotions.value?.[fixedMode.value] || defaultMotions.value?.other;
const res = typeof m === 'function' ? m(undefined, style, className) : m;
const res = typeof m === 'function' ? m() : m;
return { ...res, appear: props.keyPath.length <= 1 };
});
return () => {
@ -46,12 +44,7 @@ export default defineComponent({
return (
<MenuContextProvider mode={fixedMode.value}>
<Transition {...mergedMotion.value}>
<SubMenuList
v-show={mergedOpen.value}
id={props.id}
style={style.value}
class={className.value}
>
<SubMenuList v-show={mergedOpen.value} id={props.id}>
{slots.default?.()}
</SubMenuList>
</Transition>

5
components/message/index.tsx
View File

@ -76,7 +76,7 @@ function getMessageInstance(args: MessageArgsProps, callback: (i: NotificationIn
transitionName,
hasTransitionName,
style: { top: defaultTop }, // 覆盖原来的样式
getContainer,
getContainer: getContainer || args.getPopupContainer,
maxCount,
name: 'message',
},
@ -91,7 +91,7 @@ function getMessageInstance(args: MessageArgsProps, callback: (i: NotificationIn
);
}
type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
export interface ThenableArgument {
(val: any): void;
@ -115,6 +115,7 @@ export interface MessageArgsProps {
type?: NoticeType;
prefixCls?: string;
rootPrefixCls?: string;
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
onClose?: () => void;
icon?: (() => VueNode) | VueNode;
key?: string | number;

6
components/modal/ConfirmDialog.tsx
View File

@ -91,6 +91,7 @@ export default defineComponent<ConfirmDialogProps>({
focusTriggerAfterClose,
rootPrefixCls,
bodyStyle,
wrapClassName,
} = props;
const okType = props.okType || 'primary';
const prefixCls = props.prefixCls || 'ant-modal';
@ -127,7 +128,10 @@ export default defineComponent<ConfirmDialogProps>({
<Dialog
prefixCls={prefixCls}
class={classString}
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
wrapClassName={classNames(
{ [`${contentPrefixCls}-centered`]: !!centered },
wrapClassName,
)}
onCancel={e => close({ triggerCancel: true }, e)}
visible={visible}
title=""

3
components/modal/Modal.tsx
View File

@ -98,6 +98,7 @@ export interface ModalFuncProps {
okType?: LegacyButtonType;
cancelText?: string | (() => VueNode) | VueNode;
icon?: (() => VueNode) | VueNode;
wrapClassName?: String;
/* Deprecated */
iconType?: string;
mask?: boolean;
@ -108,7 +109,7 @@ export interface ModalFuncProps {
maskStyle?: CSSProperties;
type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';
keyboard?: boolean;
getContainer?: string | HTMLElement | getContainerFunc | false;
getContainer?: string | HTMLElement | getContainerFunc | false | null;
autoFocusButton?: null | 'ok' | 'cancel';
transitionName?: string;
maskTransitionName?: string;

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

@ -25,13 +25,24 @@ exports[`renders ./components/modal/demo/button-props.vue correctly 1`] = `
`;
exports[`renders ./components/modal/demo/confirm.vue correctly 1`] = `
<div><button class="ant-btn" type="button">
<!----><span>Confirm</span>
</button><button class="ant-btn ant-btn-dashed" type="button">
<!----><span>Delete</span>
</button><button class="ant-btn ant-btn-dashed" type="button">
<!----><span>With extra props</span>
</button></div>
<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn" type="button">
<!----><span>Confirm</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn" type="button">
<!----><span>With promise</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-dashed" type="button">
<!----><span>Delete</span>
</button></div>
<!---->
<div class="ant-space-item" style="padding-bottom: 8px;"><button class="ant-btn ant-btn-dashed" type="button">
<!----><span>With extra props</span>
</button></div>
<!---->
</div>
`;
exports[`renders ./components/modal/demo/confirm-promise.vue correctly 1`] = `
@ -63,15 +74,24 @@ exports[`renders ./components/modal/demo/fullscreen.vue correctly 1`] = `
`;
exports[`renders ./components/modal/demo/info.vue correctly 1`] = `
<div><button class="ant-btn" type="button">
<!----><span>Info</span>
</button><button class="ant-btn" type="button">
<!----><span>Success</span>
</button><button class="ant-btn" type="button">
<!----><span>Error</span>
</button><button class="ant-btn" type="button">
<!----><span>Warning</span>
</button></div>
<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn" type="button">
<!----><span>Info</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn" type="button">
<!----><span>Success</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn" type="button">
<!----><span>Error</span>
</button></div>
<!---->
<div class="ant-space-item" style="padding-bottom: 8px;"><button class="ant-btn" type="button">
<!----><span>Warning</span>
</button></div>
<!---->
</div>
`;
exports[`renders ./components/modal/demo/locale.vue correctly 1`] = `

7
components/modal/demo/async.vue
View File

@ -12,8 +12,11 @@ title:
## en-US
Asynchronously close a modal dialog when a user clicked OK button, for example,
you can use this pattern when you submit a form.
Asynchronously close a modal dialog when the OK button is pressed.
For example, you can use this pattern when you submit a form.
</docs>

24
components/modal/demo/confirm.vue
View File

@ -17,11 +17,12 @@ To use `confirm()` to show a confirmation modal dialog.
</docs>
<template>
<div>
<a-space wrap>
<a-button @click="showConfirm">Confirm</a-button>
<a-button @click="showPromiseConfirm">With promise</a-button>
<a-button type="dashed" @click="showDeleteConfirm">Delete</a-button>
<a-button type="dashed" @click="showPropsConfirm">With extra props</a-button>
</div>
</a-space>
</template>
<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@ -78,10 +79,29 @@ export default defineComponent({
},
});
};
function showPromiseConfirm() {
Modal.confirm({
title: 'Do you want to delete these items?',
icon: createVNode(ExclamationCircleOutlined),
content: 'When clicked the OK button, this dialog will be closed after 1 second',
async onOk() {
try {
return await new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
});
} catch {
return console.log('Oops errors!');
}
},
onCancel() {},
});
}
return {
showConfirm,
showDeleteConfirm,
showPropsConfirm,
showPromiseConfirm,
};
},
});

4
components/modal/demo/info.vue
View File

@ -17,12 +17,12 @@ In the various types of information modal dialog, only one button to close dialo
</docs>
<template>
<div>
<a-space wrap>
<a-button @click="info">Info</a-button>
<a-button @click="success">Success</a-button>
<a-button @click="error">Error</a-button>
<a-button @click="warning">Warning</a-button>
</div>
</a-space>
</template>
<script lang="ts">
import { Modal } from 'ant-design-vue';

1
components/modal/index.en-US.md
View File

@ -82,6 +82,7 @@ The items listed above are all functions, expecting a settings object as paramet
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | |
| title | Title | string\|vNode \|function(h) | - | |
| width | Width of the modal dialog | string\|number | 416 | |
| wrapClassName | The class name of the container of the modal dialog | string | - | 3.0 |
| zIndex | The `z-index` of the Modal | Number | 1000 | |
| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - | |
| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - | |

1
components/modal/index.zh-CN.md
View File

@ -86,6 +86,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | |
| title | 标题 | string\|vNode \|function(h) | 无 | |
| width | 宽度 | string\|number | 416 | |
| wrapClassName | 对话框外层容器的类名 | string | - | 3.0 |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | |
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |

2
components/vc-picker/panels/TimePanel/index.tsx
View File

@ -28,7 +28,7 @@ export type SharedTimeProps<DateType> = {
/** @deprecated Please use `disabledTime` instead. */
disabledSeconds?: DisabledTimes['disabledSeconds'];
// disabledTime?: (date: DateType, type?: RangeType) => DisabledTimes;
disabledTime?: (date: DateType) => DisabledTimes;
};
export type TimePanelProps<DateType> = {