diff --git a/packages/vue/src/modal/index.ts b/packages/vue/src/modal/index.ts index 3fb64c5acd..b0499ad176 100644 --- a/packages/vue/src/modal/index.ts +++ b/packages/vue/src/modal/index.ts @@ -15,33 +15,88 @@ import { MsgQueue } from '@opentiny/vue-renderless/modal' import TINYModal from './src/index' import Popconfirm from '@opentiny/vue-popconfirm' import { version } from './package.json' +import type { ComponentPublicInstance } from '@opentiny/vue-common' + +// 定义Modal选项接口 +interface ModalOptions { + id?: string + events?: { + hide?: (params: any) => void + confirm?: (params: any) => void + show?: (params: any) => void + } + componentType?: 'alert' | 'confirm' | 'message' | 'popconfirm' + message?: string + title?: string + showFooter?: boolean + type?: string + status?: string + mask?: boolean + lockView?: boolean + showHeader?: boolean + showClose?: boolean + [key: string]: any +} + +// 定义ModalPromise接口,扩展Promise +interface ModalPromise extends Promise { + vm?: ComponentPublicInstance +} + +// 定义TINYModal接口 +interface TINYModalInstance extends ComponentPublicInstance { + version: string + model: { + prop: string + event: string + } + tiny_mode?: boolean + tiny_theme?: string + installed: boolean + alert: (message: string | ModalOptions, title?: string, options?: ModalOptions) => ModalPromise + confirm: (message: string | ModalOptions, title?: string, options?: ModalOptions) => ModalPromise + message: (message: string | ModalOptions, title?: string, options?: ModalOptions) => ModalPromise + popconfirm: (message: string | ModalOptions, title?: string, options?: ModalOptions) => ModalPromise + install: (Vue: any) => void +} + +// 定义setupComponent接口 +interface SetupComponent { + TINYModal: { + install: (Vue: any) => void + init: (root: any) => void + } +} + +// 扩展TINYModal类型 +const TINYModalComponent = TINYModal as unknown as TINYModalInstance -TINYModal.version = version +TINYModalComponent.version = version -TINYModal.model = { +TINYModalComponent.model = { prop: 'modelValue', event: 'update:modelValue' } -export function Modal(options) { - const modalPromise = new Promise((resolve) => { +export function Modal(options: ModalOptions): ModalPromise { + const modalPromise = new Promise((resolve) => { if (options && options.id && MsgQueue.some((comp) => comp.id === options.id)) { resolve('exist') } else { let events = options.events || {} - let $modal + let $modal: ComponentPublicInstance options.events = Object.assign({}, events, { - hide(params) { + hide(params: any) { events.hide && events.hide.call(this, params) - if ($modal.beforeUnmouted) { - $modal.beforeUnmouted() + if ($modal && 'beforeUnmouted' in $modal) { + ;($modal as any).beforeUnmouted() } resolve(params.type) }, - confirm(params) { + confirm(params: any) { events.confirm && events.confirm.call(this, params) }, - show(params) { + show(params: any) { events.show && events.show.call(this, params) } }) @@ -50,27 +105,30 @@ export function Modal(options) { el: document.createElement('div'), propsData: Object.assign( { - 'tiny_mode': TINYModal.tiny_mode, - 'tiny_theme': TINYModal.tiny_theme + 'tiny_mode': TINYModalComponent.tiny_mode, + 'tiny_theme': TINYModalComponent.tiny_theme }, options ), - component: options.componentType === 'popconfirm' ? Popconfirm : TINYModal + component: options.componentType === 'popconfirm' ? Popconfirm : TINYModalComponent }) - const open = $modal[options.componentType === 'popconfirm' ? 'show' : 'open'] + const open = $modal[options.componentType === 'popconfirm' ? 'show' : 'open'] as Function if (open) { open() } - setTimeout(() => (modalPromise.vm = $modal), 0) + setTimeout(() => { + ;(modalPromise as ModalPromise).vm = $modal + }, 0) } - }) + }) as ModalPromise return modalPromise } const modal = Modal -const types = ['alert', 'confirm', 'message', 'popconfirm'] +const types = ['alert', 'confirm', 'message', 'popconfirm'] as const +type ModalType = (typeof types)[number] -const defOpts = { +const defOpts: Record> = { alert: { showFooter: true, type: 'alert' @@ -91,8 +149,12 @@ const defOpts = { } types.forEach((type) => { - TINYModal[type] = Modal[type] = function (message, title, options) { - let opts + TINYModalComponent[type] = Modal[type] = function ( + message: string | ModalOptions, + title?: string, + options?: ModalOptions + ): ModalPromise { + let opts: Partial = {} if (typeof message === 'object' && message !== null) { opts = message @@ -119,20 +181,20 @@ export const message = (Modal as any).message export const confirm = (Modal as any).confirm export const popconfirm = (Modal as any).popconfirm -TINYModal.installed = false -setupComponent.TINYModal = { - install(Vue) { - if (TINYModal.installed) return +TINYModalComponent.installed = false +;(setupComponent as SetupComponent).TINYModal = { + install(Vue: any) { + if (TINYModalComponent.installed) return // vue3 或 vue2 const isVue2 = !!Vue.component const tinyMode = isVue2 ? Vue.prototype.tiny_mode : Vue.config.globalProperties.tiny_mode const tinyTheme = isVue2 ? Vue.prototype.tiny_theme : Vue.config.globalProperties.tiny_theme const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null - TINYModal.tiny_mode = specifyPc || (tinyMode && tinyMode.value) - TINYModal.tiny_theme = tinyTheme && tinyTheme.value - TINYModal.installed = true + TINYModalComponent.tiny_mode = specifyPc || (tinyMode && tinyMode.value) + TINYModalComponent.tiny_theme = tinyTheme && tinyTheme.value + TINYModalComponent.installed = true }, - init(root) { + init(root: any) { let prefix = root.$TinyModalApiPrefix || root.$apiPrefix || '$' root[`${prefix}alert`] = (Modal as any).alert @@ -142,8 +204,8 @@ setupComponent.TINYModal = { } } -TINYModal.install = function (Vue) { - Vue.component(TINYModal.name, TINYModal) +TINYModalComponent.install = function (Vue: any) { + Vue.component(TINYModalComponent.name, TINYModalComponent) } -export default TINYModal +export default TINYModalComponent