[comp:modal] add modal component

[danranVm]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

API

ix-modal

ModalProps

名称	说明	类型	默认值	全局配置	备注
v-model:visible	是否可见	boolean	false	-	-
cancelButton	取消按钮的属性	ButtonProps	-	-	-
cancelText	取消按钮的文本	string	取消	-	-
centered	垂直居中展示	boolean	true	✅	-
closable	是否显示右上角的关闭按钮	boolean	true	✅	-
closeIcon	自定义关闭图标	string | #closeIcon	close	✅	-
closeOnEsc	是否支持键盘 esc 关闭	boolean	true	✅	-
confirmButton	确认按钮的属性	ButtonProps	-	-	-
confirmText	确认按钮的文本	string	确定	-	-
containerClass	浮层容器类名	string	-	-	-
destroyOnHide	关闭时销毁子元素	boolean	false	-	-
footer	自定义底部按钮	ModalButtonProps[] | VNode | #footer	-	-	传入 null 表示不显示
header	对话框标题	sting | HeaderProps | #header	-	-	-
icon	自定义图标	string | VNode | #icon	-	-	当 type 不为 default 时有效
mask	是否展示蒙层	boolean	true	✅	-
maskClosable	点击蒙层是否允许关闭	boolean	true	✅	-
title	对话框次标题	sting | VNode | #title	-	-	当 type 不为 default 时有效
type	对话框类型	'default' | 'confirm' | 'info' | 'success' | 'warning' | 'error'	default	-	-
width	对话框宽度	sting | number	640	✅	-
zIndex	设置对话框的 z-index	number	1000	✅	-
onAfterOpen	打开后的回调	() => void	-	-	-
onAfterClose	关闭后的回调	() => void	-	-	-
onClose	点击遮罩层或关闭图标的回调	(evt: Event) => void | boolean | Promise<void | boolean>	-	-	返回 false 的时候，将阻止关闭
onCancel	点击取消按钮的回调	(evt: Event) => void | boolean | Promise<void | boolean>	-	-	执行完回调后，默认会关闭对话框，返回 false 的时候，将阻止关闭
onConfirm	点击确认按钮的回调	(evt: Event) => void | boolean | Promise<void | boolean>	-	-	执行完回调后，默认会关闭对话框，返回 false 的时候，将阻止关闭

export interface ModalButtonProps extends ButtonProps {
  // 按钮的文本
  text?: string
  // 是否显示该按钮, 默认为 true
  visible?: boolean
  // 按钮点击回调
  onClick?: (evt: Event) => void
}

ModalBindings

export interface ModalBindings {
  // 打开当前对话框
  open: () => void
  // 关闭当前对话框, evt 参数将传给 onClose 回调
  close: (evt?: Event | unknown) => Promise<void>
  // 手动触发当前取消按钮, evt 参数将传给 onCancel 回调
  cancel: (evt?: Event | unknown) => Promise<void>
  // 手动触发当前确定按钮, evt 参数将传给 onConfirm 回调
  confirm: (evt?: Event | unknown) => Promise<void>
}

ix-modal-provider

如果你想通过 useModel 来创建对话框，则你需要把组件包裹在 ix-modal-provider 内部，因为这样才不会丢失应用的上下文信息。

<!-- App.vue -->
<ix-dialog-provider>
  <MyComponent />
</ix-dialog-provider>

<!-- MyComponent.vue -->
<template>
  <ix-button @click="openModal">Open</ix-button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useModal } from '@idux/components/modal'
export default defineComponent({
  setup() {
    const modal = useModal()
    const openModal = ()=> modal.open({ header: 'Basic Modal', content: 'Some contents..' })
    return { openModal }
  },
})
</script>

useModel

可以使用 useModal 来快速创建和管理对话框，需要注意以下几点。

• visible 默认为 true
• destroyOnHide 默认为 true, 并且销毁的不仅是子元素，而是组件实例, 会触发 onDestroy 回调

export const useModal: () => ModalProviderRef;

export interface ModalProviderRef {
  // 打开对话框
  open: (options: ModalOptions) => ModalRef
  confirm: (options: Omit<ModalOptions, 'type'>) => ModalRef
  info: (options: Omit<ModalOptions, 'type'>) => ModalRef
  success: (options: Omit<ModalOptions, 'type'>) => ModalRef
  warning: (options: Omit<ModalOptions, 'type'>) => ModalRef
  error: (options: Omit<ModalOptions, 'type'>) => ModalRef
  // 更新指定 id 的对话框的配置信息
  update: (id: string, options: ModalOptions) => void
  // 销毁指定 id 的对话框
  destroy: (id: string | string[]) => void
  // 销毁所有对话框
  destroyAll: () => void
}

export interface ModalOptions extends ModelProps {
  id?: string
  // 对话框的内容
  content?: string | VNode
  // 对话框销毁后的回调
  onDestroy?: (id: string) => void
}

export interface ModalRef extends ModalBindings {
  // 对话框的唯一标识
  id: string
  // 更新当前配置信息
  update: (options: Partial<ModalOptions>) => void
  // 销毁当前对话框
  destroy: () => void
}

modalToken

可以在子组件中注入该 token 来获取对话框的属性和方法，以便于控制对话框的行为。

export const modalToken: InjectionKey<ModalBindings & { props: ModalProps }>;

[idux-bot]

Translation of this issue:

[COMP: MODAL] Add MODAL COMPONENT

• [] I have search the [Issues] (https://github.com/iduxfe/idux/issues) of this repository and believe That this is not a duplicate.

What proBLEES THIS Feature SOLVE?

What does the proposed API Look Like?

API

ix-modal

MODALPROPS

Name	Description	Type	Default	Global Configuration	Remarks
v-model: Visible	Visible	Boolean	false
CancelButton	Cancel Button Properties	Buttonprops	-	-
CancelText	Will Cancel Buttons	String	Cancel	-
centered	Vertical home display	Boolean	false	✅	-
closable	Whether to display close button in the upper right corner	Boolean	True	✅
Closeicon	Custom Close Icon	` String \	V-Slot: Closeicon`	Close	✅
Closeonesc	Whether support keyboardsc Close	Boolean	True	✅	-
ConfirmButton	Confirm button properties	Buttonprops	-	-
Confirmtext	Confirm button text	String	Determine	-
destroyonhide	Close up time pin destroyed elements	Boolean	false	-	-
Footer	Custom Bottom button	` Null \	MODALBUTTON [] \	V-slot: Footer`	-
Mask	Whether to show mask	Boolean	True	✅
MaskClosable	Click on the mashed whether it is allowed to close	Boolean	True	✅
OverlayClassName	Floating container class name	string	-	-	-
Title	Title	Boolean	True	-
Width	Width	` Sting \	Number`	520
Zindex	Set Z-index	Number	1000	-
OnaFteropen	Open the callback	() => void	-	-
onfterclose	Turn back after close	() => void	-	-
onclose	Click the Mask layer or close icon's callback	` (EVT: Event) => void	Boolean	Promise <void	Boolean> `
oncancel	Click the callback of the Cancel button	` (EVT: Event) => void	Boolean	Promise <Void	Boolean> `
onconfirm	Click the Touch button for the confirmation button	` (EVT: Event) => void	Boolean	Promise <void	Boolean> `

export interface ModalButton extends ButtonProps {
  // 是否显示该按钮, 默认为 true
  show?: boolean
  // 按钮点击回调
  onClick?: (evt: Event) => void
}

ix-modal-provider

If you want to create a dialog via UseModel, you need to package the component inside the` ix-modal-provider. Because this will not lose the context information of the app.

<!-- App.vue -->
<ix-modal-provider>
  <MyComponent />
</ix-modal-provider>

<!-- MyComponent.vue -->
<template>
  <ix-button @click="openModal">
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useModal } from '@idux/components/modal'

export default defineComponent({
  setup() {
    const modal = useModal()
    const openModal = ()=> modal.open(options)
    return { openModal }
  },
})
</script>

usemodel

const { open, info, success, error, warning, confirm, destroy, destroyAll } = useModel()

export interface ModalOptions extends ModelProps {
  // 对话框内容
  content: string | VNode | () => VNode
}

export interface ModalBindings {
  // 对话框的唯一标识
  id: string
  // 关闭对话框
  close: () => void
  // 销毁对话框
  destroy: () => void
  // 手动触发取消按钮
  cancel: () => void
  // 手动触发确定按钮
  confirm: () => void
  // 更新配置信息
  update: (options: Partial<ModalOptions>) => void
}

export interface ModalInstance = InstanceType<DefineComponent<ModalProps>>

Calling UseModal Return to the object:

• Open, Info, Success, Error, Warning, Confirm both functions, create different scene dialogs, parameters are MODALOPTIONS, return value is ModalInstance
• DESTROY, DESTROYALL. Both functions, you can close the specified ID` or turn off all dialogs.

[danranVm]

支持两种使用方式

• 直接在 template 中使用 ix-modal
• 首先在父级组件中注入 ix-modal-provider, 然后使用 useModal() 来创建对话框。

[danranVm]

#356