- {iconNode}
-
- {titleNode}
- {defaultNode}
+ bodyNode =
{defaultNode}
+ } else {
+ const classes = `${prefixCls} ${prefixCls}-${props.type}`
+ const iconNode = renderIcon(prefixCls, slots.icon, iconName.value)
+ const titleNode = renderTitle(prefixCls, slots.title, props.title)
+
+ bodyNode = (
+
+ {iconNode}
+
+ {titleNode}
+ {defaultNode}
+
-
- )
+ )
+ }
+
+ const spinProps = mergedSpin.value
+
+ if (!mergedSpinWithFullModal.value && spinProps) {
+ const spinSlots = {
+ default: slots.spinContent,
+ icon: slots.spinIcon,
+ }
+
+ return (
+
+ {bodyNode}
+
+ )
+ }
+
+ return bodyNode
}
},
})
diff --git a/packages/components/modal/src/ModalWrapper.tsx b/packages/components/modal/src/ModalWrapper.tsx
index c7699e60f..0f1c92d38 100644
--- a/packages/components/modal/src/ModalWrapper.tsx
+++ b/packages/components/modal/src/ModalWrapper.tsx
@@ -25,6 +25,7 @@ import { callEmit, convertCssPixel, getOffset } from '@idux/cdk/utils'
import { ɵFooter } from '@idux/components/_private/footer'
import { ɵHeader } from '@idux/components/_private/header'
import { type ModalConfig } from '@idux/components/config'
+import { IxSpin } from '@idux/components/spin'
import { useThemeToken } from '@idux/components/theme'
import ModalBody from './ModalBody'
@@ -45,6 +46,8 @@ export default defineComponent({
visible,
animatedVisible,
mergedVisible,
+ mergedSpin,
+ mergedSpinWithFullModal,
cancelLoading,
okLoading,
currentZIndex,
@@ -130,7 +133,7 @@ export default defineComponent({
onMounted(() => watchVisibleChange(props, wrapperRef, sentinelStartRef, movableRef, mask))
- return () => {
+ const renderContent = () => {
const prefixCls = mergedPrefixCls.value
const okButton = { size: 'md', ...props.okButton } as const
const cancelButton = { size: 'md', ...props.cancelButton } as const
@@ -139,7 +142,15 @@ export default defineComponent({
header: slots.header,
closeIcon: slots.closeIcon,
}
- const contentNodes = [
+
+ const spinSlots = {
+ default: slots.spinContent,
+ icon: slots.spinIcon,
+ }
+
+ const spinProps = mergedSpin.value
+
+ const children = [
<ɵHeader
ref={headerRef}
class={`${prefixCls}-header`}
@@ -159,6 +170,7 @@ export default defineComponent({
cancelLoading={cancelLoading.value}
cancelText={cancelText.value}
cancelVisible={cancelVisible.value}
+ disabled={spinProps?.spinning}
footer={props.footer}
ok={handleOk}
okButton={okButton}
@@ -167,6 +179,34 @@ export default defineComponent({
>,
]
+ const contentNode = props.draggable ? (
+
+ {children}
+
+ ) : (
+
{children}
+ )
+
+ if (mergedSpinWithFullModal.value && spinProps) {
+ return (
+
+ {contentNode}
+
+ )
+ }
+
+ return contentNode
+ }
+
+ return () => {
+ const prefixCls = mergedPrefixCls.value
+
return (
- {props.draggable ? (
-
- {contentNodes}
-
- ) : (
-
{contentNodes}
- )}
+ {renderContent()}
diff --git a/packages/components/modal/src/token.ts b/packages/components/modal/src/token.ts
index f3c836cb9..2a7f3b49a 100644
--- a/packages/components/modal/src/token.ts
+++ b/packages/components/modal/src/token.ts
@@ -8,6 +8,7 @@
import type { ModalBindings, ModalProps, ModalProviderRef } from './types'
import type { CommonConfig, ModalConfig } from '@idux/components/config'
import type { Locale } from '@idux/components/locales'
+import type { SpinProps } from '@idux/components/spin'
import type { ComputedRef, InjectionKey, Ref, Slots } from 'vue'
export interface ModalContext {
@@ -20,6 +21,8 @@ export interface ModalContext {
visible: ComputedRef
animatedVisible: Ref
mergedVisible: ComputedRef
+ mergedSpin: ComputedRef
+ mergedSpinWithFullModal: ComputedRef
cancelLoading: Ref
okLoading: Ref
currentZIndex: ComputedRef
diff --git a/packages/components/modal/src/types.ts b/packages/components/modal/src/types.ts
index 849839a12..6f93c60b7 100644
--- a/packages/components/modal/src/types.ts
+++ b/packages/components/modal/src/types.ts
@@ -11,6 +11,7 @@ import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey }
import type { ɵFooterButtonProps } from '@idux/components/_private/footer'
import type { ButtonProps } from '@idux/components/button'
import type { HeaderProps } from '@idux/components/header'
+import type { SpinProps } from '@idux/components/spin'
import type { DefineComponent, HTMLAttributes, PropType, VNode, VNodeChild, VNodeProps } from 'vue'
export type ModalType = 'default' | 'confirm' | 'info' | 'success' | 'warning' | 'error'
@@ -85,6 +86,8 @@ export const modalProps = {
okButton: Object as PropType,
okText: String,
scrollStrategy: Object as PropType,
+ spin: { type: [Boolean, Object] as PropType, default: undefined },
+ spinWithFullModal: { type: Boolean, default: undefined },
title: [String, Object, Function] as PropType VNodeChild)>,
type: {
type: String as PropType,