feat: modal method add wrapClassName

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -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 (

components/menu/src/InlineSubMenuList.tsx

@@ -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>

components/message/index.tsx

@@ -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;

components/modal/ConfirmDialog.tsx

@@ -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=""

components/modal/Modal.tsx

@@ -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;

components/modal/__tests__/__snapshots__/demo.test.js.snap

@@ -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">
+<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><button class="ant-btn ant-btn-dashed" type="button">
+    </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><button class="ant-btn ant-btn-dashed" type="button">
+    </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">
+<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><button class="ant-btn" type="button">
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn" type="button">
       <!----><span>Success</span>
-  </button><button class="ant-btn" type="button">
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn" type="button">
       <!----><span>Error</span>
-  </button><button class="ant-btn" type="button">
+    </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`] = `

components/modal/demo/async.vue

@@ -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>
 

components/modal/demo/confirm.vue

@@ -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,
     };
   },
 });

components/modal/demo/info.vue

@@ -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';

components/modal/index.en-US.md

@@ -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 | - |  |

components/modal/index.zh-CN.md

@@ -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 | 无 |  |

components/vc-picker/panels/TimePanel/index.tsx

@@ -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> = {