@antsoo-lib/components 0.1.2 → 0.1.4

package/src/modal/Modal.tsx

@@ -0,0 +1,262 @@
+import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'
+
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
+import { defineComponent } from 'vue'
+
+import classNames from '../_util/classNames'
+import initDefaultProps from '../_util/props-util/initDefaultProps'
+import { canUseDocElement } from '../_util/styleChecker'
+import { getTransitionName } from '../_util/transition'
+import type { VueNode } from '../_util/type'
+import { objectType } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+import warning from '../_util/warning'
+import Button from '../button'
+import type { ButtonProps as ButtonPropsType, LegacyButtonType } from '../button/buttonTypes'
+import { convertLegacyProps } from '../button/buttonTypes'
+import type { Direction } from '../config-provider'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'
+import Dialog from '../vc-dialog'
+import addEventListener from '../vc-util/Dom/addEventListener'
+import useStyle from './style'
+
+type MousePosition = { x: number; y: number } | null
+
+let mousePosition: MousePosition
+// ref: https://github.com/ant-design/ant-design/issues/15795
+const getClickPosition = (e: MouseEvent) => {
+  mousePosition = {
+    x: e.pageX,
+    y: e.pageY,
+  }
+  // 100ms 内发生过点击事件，则从点击位置动画展示
+  // 否则直接 zoom 展示
+  // 这样可以兼容非点击方式展开
+  setTimeout(() => (mousePosition = null), 100)
+}
+
+// 只有点击事件支持从鼠标位置动画展开
+if (canUseDocElement()) {
+  addEventListener(document.documentElement, 'click', getClickPosition, true)
+}
+
+export const modalProps = () => ({
+  prefixCls: String,
+  /** @deprecated Please use `open` instead. */
+  visible: { type: Boolean, default: undefined },
+  open: { type: Boolean, default: undefined },
+  confirmLoading: { type: Boolean, default: undefined },
+  title: PropTypes.any,
+  closable: { type: Boolean, default: undefined },
+  closeIcon: PropTypes.any,
+  onOk: Function as PropType<(e: MouseEvent) => void>,
+  onCancel: Function as PropType<(e: MouseEvent) => void>,
+  'onUpdate:visible': Function as PropType<(visible: boolean) => void>,
+  'onUpdate:open': Function as PropType<(open: boolean) => void>,
+  onChange: Function as PropType<(open: boolean) => void>,
+  afterClose: Function as PropType<() => void>,
+  centered: { type: Boolean, default: undefined },
+  width: [String, Number],
+  footer: PropTypes.any,
+  okText: PropTypes.any,
+  okType: String as PropType<LegacyButtonType>,
+  cancelText: PropTypes.any,
+  icon: PropTypes.any,
+  maskClosable: { type: Boolean, default: undefined },
+  forceRender: { type: Boolean, default: undefined },
+  okButtonProps: objectType<ButtonPropsType>(),
+  cancelButtonProps: objectType<ButtonPropsType>(),
+  destroyOnClose: { type: Boolean, default: undefined },
+  wrapClassName: String,
+  maskTransitionName: String,
+  transitionName: String,
+  getContainer: {
+    type: [String, Function, Boolean, Object] as PropType<
+      string | HTMLElement | getContainerFunc | false
+    >,
+    default: undefined,
+  },
+  zIndex: Number,
+  bodyStyle: objectType<CSSProperties>(),
+  maskStyle: objectType<CSSProperties>(),
+  mask: { type: Boolean, default: undefined },
+  keyboard: { type: Boolean, default: undefined },
+  wrapProps: Object,
+  focusTriggerAfterClose: { type: Boolean, default: undefined },
+  modalRender: Function as PropType<(arg: { originVNode: VueNode }) => VueNode>,
+  mousePosition: objectType<MousePosition>(),
+})
+
+export type ModalProps = Partial<ExtractPropTypes<ReturnType<typeof modalProps>>>
+
+export interface ModalFuncProps {
+  prefixCls?: string
+  class?: string
+  open?: boolean
+  title?: string | (() => VueNode) | VueNode
+  footer?: string | (() => VueNode) | VueNode
+  closable?: boolean
+  content?: string | (() => VueNode) | VueNode
+  // TODO: find out exact types
+  onOk?: (...args: any[]) => any
+  onCancel?: (...args: any[]) => any
+  afterClose?: () => void
+  okButtonProps?: ButtonPropsType
+  cancelButtonProps?: ButtonPropsType
+  centered?: boolean
+  width?: string | number
+  okText?: string | (() => VueNode) | VueNode
+  okType?: LegacyButtonType
+  cancelText?: string | (() => VueNode) | VueNode
+  icon?: (() => VueNode) | VueNode
+  wrapClassName?: string
+  /* Deprecated */
+  iconType?: string
+  mask?: boolean
+  maskClosable?: boolean
+  zIndex?: number
+  okCancel?: boolean
+  style?: CSSProperties | string
+  maskStyle?: CSSProperties
+  type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm'
+  keyboard?: boolean
+  getContainer?: string | HTMLElement | getContainerFunc | false | null
+  autoFocusButton?: null | 'ok' | 'cancel'
+  transitionName?: string
+  maskTransitionName?: string
+  direction?: Direction
+  bodyStyle?: CSSProperties
+  closeIcon?: string | (() => VueNode) | VueNode
+  modalRender?: (arg: { originVNode: VueNode }) => VueNode
+  focusTriggerAfterClose?: boolean
+
+  /** @deprecated please use `appContext` instead */
+  parentContext?: any
+  appContext?: any
+
+  /** @deprecated please use `open` instead */
+  visible?: boolean
+}
+
+type getContainerFunc = () => HTMLElement
+
+export type ModalFunc = (props: ModalFuncProps) => {
+  destroy: () => void
+  update: (newConfig: ModalFuncProps) => void
+}
+
+export interface ModalLocale {
+  okText: string
+  cancelText: string
+  justOkText: string
+}
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'AModal',
+  inheritAttrs: false,
+  props: initDefaultProps(modalProps(), {
+    width: 520,
+    confirmLoading: false,
+    okType: 'primary',
+  }),
+  setup(props, { emit, slots, attrs }) {
+    const [locale] = useLocaleReceiver('Modal')
+    const { prefixCls, rootPrefixCls, direction, getPopupContainer } = useConfigInject(
+      'modal',
+      props,
+    )
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+
+    warning(
+      props.visible === undefined,
+      'Modal',
+      `\`visible\` will be removed in next major version, please use \`open\` instead.`,
+    )
+    const handleCancel = (e: MouseEvent) => {
+      emit('update:visible', false)
+      emit('update:open', false)
+      emit('cancel', e)
+      emit('change', false)
+    }
+
+    const handleOk = (e: MouseEvent) => {
+      emit('ok', e)
+    }
+
+    const renderFooter = () => {
+      const {
+        okText = slots.okText?.(),
+        okType,
+        cancelText = slots.cancelText?.(),
+        confirmLoading,
+      } = props
+      return (
+        <>
+          <Button onClick={handleCancel} {...props.cancelButtonProps}>
+            {cancelText || locale.value.cancelText}
+          </Button>
+          <Button
+            {...convertLegacyProps(okType)}
+            loading={confirmLoading}
+            onClick={handleOk}
+            {...props.okButtonProps}
+          >
+            {okText || locale.value.okText}
+          </Button>
+        </>
+      )
+    }
+    return () => {
+      const {
+        prefixCls: customizePrefixCls,
+        visible,
+        open,
+        wrapClassName,
+        centered,
+        getContainer,
+        closeIcon = slots.closeIcon?.(),
+        focusTriggerAfterClose = true,
+        ...restProps
+      } = props
+
+      const wrapClassNameExtended = classNames(wrapClassName, {
+        [`${prefixCls.value}-centered`]: !!centered,
+        [`${prefixCls.value}-wrap-rtl`]: direction.value === 'rtl',
+      })
+      return wrapSSR(
+        <Dialog
+          {...restProps}
+          {...attrs}
+          rootClassName={hashId.value}
+          class={classNames(hashId.value, attrs.class)}
+          getContainer={getContainer || getPopupContainer?.value}
+          prefixCls={prefixCls.value}
+          wrapClassName={wrapClassNameExtended}
+          visible={open ?? visible}
+          onClose={handleCancel}
+          focusTriggerAfterClose={focusTriggerAfterClose}
+          transitionName={getTransitionName(rootPrefixCls.value, 'zoom', props.transitionName)}
+          maskTransitionName={getTransitionName(
+            rootPrefixCls.value,
+            'fade',
+            props.maskTransitionName,
+          )}
+          mousePosition={restProps.mousePosition ?? mousePosition}
+          v-slots={{
+            ...slots,
+            footer: slots.footer || renderFooter,
+            closeIcon: () => {
+              return (
+                <span class={`${prefixCls.value}-close-x`}>
+                  {closeIcon || <CloseOutlined class={`${prefixCls.value}-close-icon`} />}
+                </span>
+              )
+            },
+          }}
+        ></Dialog>,
+      )
+    }
+  },
+})

package/src/modal/confirm.tsx

@@ -0,0 +1,146 @@
+import { createVNode, render as vueRender } from 'vue'
+
+import omit from '../_util/omit'
+import { triggerVNodeUpdate } from '../_util/vnode'
+import ConfigProvider, { globalConfigForApi } from '../config-provider'
+import ConfirmDialog from './ConfirmDialog'
+import type { ModalFuncProps } from './Modal'
+import destroyFns from './destroyFns'
+import { getConfirmLocale } from './locale'
+
+type ConfigUpdate = ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps)
+export type ModalStaticFunctions<T = ModalFunc> = Record<NonNullable<ModalFuncProps['type']>, T>
+
+export type ModalFunc = (props: ModalFuncProps) => {
+  destroy: () => void
+  update: (configUpdate: ConfigUpdate) => void
+}
+
+const confirm = (config: ModalFuncProps) => {
+  const container = document.createDocumentFragment()
+  let currentConfig = {
+    ...omit(config, ['parentContext', 'appContext']),
+    close,
+    open: true,
+  } as any
+  let confirmDialogInstance = null
+  function destroy(...args: any[]) {
+    if (confirmDialogInstance) {
+      // destroy
+      vueRender(null, container as any)
+      confirmDialogInstance = null
+    }
+    const triggerCancel = args.some((param) => param && param.triggerCancel)
+    if (config.onCancel && triggerCancel) {
+      config.onCancel(() => {}, ...args.slice(1))
+    }
+    for (let i = 0; i < destroyFns.length; i++) {
+      const fn = destroyFns[i]
+      if (fn === close) {
+        destroyFns.splice(i, 1)
+        break
+      }
+    }
+  }
+
+  function close(this: typeof close, ...args: any[]) {
+    currentConfig = {
+      ...currentConfig,
+      open: false,
+      afterClose: () => {
+        if (typeof config.afterClose === 'function') {
+          config.afterClose()
+        }
+        destroy.apply(this, args)
+      },
+    }
+    // Legacy support
+    if (currentConfig.visible) {
+      delete currentConfig.visible
+    }
+    update(currentConfig)
+  }
+  function update(configUpdate: ConfigUpdate) {
+    if (typeof configUpdate === 'function') {
+      currentConfig = configUpdate(currentConfig)
+    } else {
+      currentConfig = {
+        ...currentConfig,
+        ...configUpdate,
+      }
+    }
+    if (confirmDialogInstance) {
+      triggerVNodeUpdate(confirmDialogInstance, currentConfig, container)
+    }
+  }
+
+  const Wrapper = (p: ModalFuncProps) => {
+    const global = globalConfigForApi
+    const rootPrefixCls = global.prefixCls
+    const prefixCls = p.prefixCls || `${rootPrefixCls}-modal`
+    const iconPrefixCls = global.iconPrefixCls
+    const runtimeLocale = getConfirmLocale()
+    return (
+      <ConfigProvider {...(global as any)} prefixCls={rootPrefixCls}>
+        <ConfirmDialog
+          {...p}
+          rootPrefixCls={rootPrefixCls}
+          prefixCls={prefixCls}
+          iconPrefixCls={iconPrefixCls}
+          locale={runtimeLocale}
+          cancelText={p.cancelText || runtimeLocale.cancelText}
+        ></ConfirmDialog>
+      </ConfigProvider>
+    )
+  }
+  function render(props: ModalFuncProps) {
+    const vm = createVNode(Wrapper, { ...props })
+    vm.appContext = config.parentContext || config.appContext || vm.appContext
+    vueRender(vm, container as any)
+    return vm
+  }
+
+  confirmDialogInstance = render(currentConfig)
+  destroyFns.push(close)
+  return {
+    destroy: close,
+    update,
+  }
+}
+
+export default confirm
+
+export function withWarn(props: ModalFuncProps): ModalFuncProps {
+  return {
+    ...props,
+    type: 'warning',
+  }
+}
+
+export function withInfo(props: ModalFuncProps): ModalFuncProps {
+  return {
+    ...props,
+    type: 'info',
+  }
+}
+
+export function withSuccess(props: ModalFuncProps): ModalFuncProps {
+  return {
+    ...props,
+    type: 'success',
+  }
+}
+
+export function withError(props: ModalFuncProps): ModalFuncProps {
+  return {
+    ...props,
+    type: 'error',
+  }
+}
+
+export function withConfirm(props: ModalFuncProps): ModalFuncProps {
+  return {
+    ...props,
+    type: 'confirm',
+  }
+}

package/src/modal/destroyFns.ts

@@ -0,0 +1,2 @@
+const destroyFns: Array<Function> = []
+export default destroyFns

package/src/modal/index.en-US.md

@@ -0,0 +1,161 @@
+---
+category: Components
+type: Feedback
+title: Modal
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wM3qQ5XrhlcAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fBrgSJBmavgAAAAAAAAAAAAADrJ8AQ/original
+---
+
+Modal dialogs.
+
+## When To Use
+
+When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information. Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`, and so on.
+
+## API
+
+| Property          | Description                                                                         | Type                                   | Default               | Version |
+| ----------------- | ----------------------------------------------------------------------------------- | -------------------------------------- | --------------------- | ------- |
+| afterClose        | Specify a function that will be called when modal is closed completely.             | function                               | -                     |         |
+| bodyStyle         | Body style for modal body element. Such as height, padding etc.                     | object                                 | {}                    |         |
+| cancelButtonProps | The cancel button props                                                             | [ButtonProps](/components/button/#api) | -                     |         |
+| cancelText        | Text of the Cancel button                                                           | string\|slot                           | `Cancel`              |         |
+| centered          | Centered Modal                                                                      | boolean                                | `false`               |         |
+| closable          | Whether a close (x) button is visible on top right of the modal dialog or not       | boolean                                | true                  |         |
+| closeIcon         | custom close icon                                                                   | VNode \| slot                          | -                     |         |
+| confirmLoading    | Whether to apply loading visual effect for OK button or not                         | boolean                                | false                 |         |
+| destroyOnClose    | Whether to unmount child components on onClose                                      | boolean                                | false                 |         |
+| footer            | Footer content, set as `:footer="null"` when you don't need default buttons         | string\|slot                           | OK and Cancel buttons |         |
+| forceRender       | Force render Modal                                                                  | boolean                                | false                 |         |
+| getContainer      | Return the mount node for Modal                                                     | (instance): HTMLElement                | () => document.body   |         |
+| mask              | Whether show mask or not.                                                           | boolean                                | true                  |         |
+| maskClosable      | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean                                | true                  |         |
+| maskStyle         | Style for modal's mask element.                                                     | object                                 | {}                    |         |
+| okButtonProps     | The ok button props                                                                 | [ButtonProps](/components/button/#api) | -                     |         |
+| okText            | Text of the OK button                                                               | string\|slot                           | `OK`                  |         |
+| okType            | Button `type` of the OK button                                                      | string                                 | `primary`             |         |
+| title             | The modal dialog's title                                                            | string\|slot                           | -                     |         |
+| open(v-model)     | Whether the modal dialog is visible or not                                          | boolean                                | false                 |         |
+| width             | Width of the modal dialog                                                           | string\|number                         | 520                   |         |
+| wrapClassName     | The class name of the container of the modal dialog                                 | string                                 | -                     |         |
+| zIndex            | The `z-index` of the Modal                                                          | number                                 | 1000                  |         |
+
+### events
+
+| Events Name | Description                                                                                                | Arguments   |
+| ----------- | ---------------------------------------------------------------------------------------------------------- | ----------- |
+| cancel      | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) |
+| ok          | Specify a function that will be called when a user clicks the OK button                                    | function(e) |
+
+#### Note
+
+> The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set `destroyOnClose` on it.
+
+### Modal.method()
+
+There are five ways to display the information based on the content's nature:
+
+- `Modal.info`
+- `Modal.success`
+- `Modal.error`
+- `Modal.warning`
+- `Modal.confirm`
+
+The items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows:
+
+| Property          | Description                                                                                                                                                                                                                                                                              | Type                              | Default   | Version |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | --------- | ------- |
+| appContext        | The context of the pop-up window is generally used to obtain content such as global registered components, vuex, etc.                                                                                                                                                                    | -                                 | -         |         |
+| autoFocusButton   | Specify which button to autofocus                                                                                                                                                                                                                                                        | `null` \| `ok` \| `cancel`        | `ok`      |         |
+| cancelButtonProps | The cancel button props                                                                                                                                                                                                                                                                  | [ButtonProps](/components/button) | -         |         |
+| cancelText        | Text of the Cancel button                                                                                                                                                                                                                                                                | string                            | `Cancel`  |         |
+| centered          | Centered Modal                                                                                                                                                                                                                                                                           | boolean                           | `false`   |         |
+| class             | class of container                                                                                                                                                                                                                                                                       | string                            | -         |         |
+| closable          | Whether a close (x) button is visible on top right of the modal dialog or not                                                                                                                                                                                                            | boolean                           | `false`   |         |
+| content           | Content                                                                                                                                                                                                                                                                                  | string\|VNode \|function()        | -         |         |
+| footer            | Footer content, set as `footer: null` when you don't need default buttons                                                                                                                                                                                                                | string\|VNode \|function()        | -         | 4.0.0   |
+| icon              | custom icon (`Added in 1.14.0`)                                                                                                                                                                                                                                                          | VNode \|()=>VNode                 | -         |         |
+| keyboard          | Whether support press esc to close                                                                                                                                                                                                                                                       | boolean                           | true      |         |
+| mask              | Whether show mask or not.                                                                                                                                                                                                                                                                | boolean                           | true      |         |
+| maskClosable      | Whether to close the modal dialog when the mask (area outside the modal) is clicked                                                                                                                                                                                                      | boolean                           | `false`   |         |
+| okButtonProps     | The ok button props                                                                                                                                                                                                                                                                      | [ButtonProps](/components/button) | -         |         |
+| okText            | Text of the OK button                                                                                                                                                                                                                                                                    | string                            | `OK`      |         |
+| okType            | Button `type` of the OK button                                                                                                                                                                                                                                                           | string                            | `primary` |         |
+| title             | Title                                                                                                                                                                                                                                                                                    | string\|VNode \|function()        | -         |         |
+| width             | Width of the modal dialog                                                                                                                                                                                                                                                                | string\|number                    | 416       |         |
+| wrapClassName     | The class name of the container of the modal dialog                                                                                                                                                                                                                                      | string                            | -         | 3.2.3   |
+| 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                          | -         |         |
+
+All the `Modal.method`s will return a reference, and then we can update and close the modal dialog by the reference.
+
+```jsx
+const modal = Modal.info()
+
+modal.update({
+  title: 'Updated title',
+  content: 'Updated content',
+})
+
+modal.destroy()
+```
+
+- `Modal.destroyAll`
+
+`Modal.destroyAll()` could destroy all confirmation modal dialogs(Modal.info/Modal.success/Modal.error/Modal.warning/Modal.confirm). Usually, you can use it in router change event to destroy confirm modal dialog automatically without use modal reference to close( it's too complex to use for all modal dialogs)
+
+```jsx
+const router = new VueRouter({ ... })
+
+// router change
+router.beforeEach((to, from, next) => {
+  Modal.destroyAll();
+})
+```
+
+### Modal.useModal()
+
+When you need using Context, you can use `contextHolder` which created by `Modal.useModal` to insert into children. Modal created by hooks will get all the context where `contextHolder` are. Created `modal` has the same creating function with `Modal.method`.
+
+```html
+<template>
+  <contextHolder />
+  <!-- <component :is='contextHolder'/> -->
+</template>
+<script setup>
+  import { Modal } from 'ant-design-vue'
+
+  const [modal, contextHolder] = Modal.useModal()
+
+  modal.confirm({
+    // ...
+  })
+</script>
+```
+
+## FAQ
+
+### Why can't the Modal method obtain global registered components, context, vuex, etc. and ConfigProvider `locale/prefixCls/theme` configuration, and can't update data responsively?
+
+Call the Modal method directly, and the component will dynamically create a new Vue entity through `Vue.render`. Its context is not the same as the context where the current code is located, so the context information cannot be obtained.
+
+When you need context information (for example, using a globally registered component), you can use `Modal.useModal` to get `modal` instance and `contextHolder` node. And put it in your children:
+
+```html
+<template>
+  <contextHolder />
+  <!-- <component :is='contextHolder'/> -->
+</template>
+<script setup>
+  import { Modal } from 'ant-design-vue'
+
+  const [modal, contextHolder] = Modal.useModal()
+
+  modal.confirm({
+    // ...
+  })
+</script>
+```
+
+> [App Package Component](/components/app) can be used to simplify the problem of `useModal` and other methods that need to manually implant contextHolder.

package/src/modal/index.tsx

@@ -0,0 +1,84 @@
+import type { App, Plugin } from 'vue'
+
+import type { ModalFunc, ModalFuncProps } from './Modal'
+import Modal from './Modal'
+import confirm, { withConfirm, withError, withInfo, withSuccess, withWarn } from './confirm'
+import destroyFns from './destroyFns'
+import useModal from './useModal'
+
+export type { ActionButtonProps } from '../_util/ActionButton'
+export type { ModalFuncProps, ModalProps } from './Modal'
+
+function modalWarn(props: ModalFuncProps) {
+  return confirm(withWarn(props))
+}
+Modal.useModal = useModal
+Modal.info = function infoFn(props: ModalFuncProps) {
+  return confirm(withInfo(props))
+}
+
+Modal.success = function successFn(props: ModalFuncProps) {
+  return confirm(withSuccess(props))
+}
+
+Modal.error = function errorFn(props: ModalFuncProps) {
+  return confirm(withError(props))
+}
+
+Modal.warning = modalWarn
+
+Modal.warn = modalWarn
+
+Modal.confirm = function confirmFn(props: ModalFuncProps) {
+  return confirm(withConfirm(props))
+}
+
+Modal.addDestroyFn = (fn: () => void) => {
+  destroyFns.push(fn)
+}
+
+Modal.delDestroyFn = (fn: () => void) => {
+  for (let i = destroyFns.length - 1; i >= 0; i--) {
+    if (destroyFns[i] === fn) {
+      destroyFns.splice(i, 1)
+    }
+  }
+}
+
+Modal.destroyAll = function destroyAllFn() {
+  while (destroyFns.length) {
+    const close = destroyFns.pop()
+    if (close) {
+      close()
+    }
+  }
+}
+
+/* istanbul ignore next */
+Modal.install = function (app: App) {
+  app.component(Modal.name, Modal)
+  return app
+}
+
+export default Modal as typeof Modal &
+  Plugin & {
+    readonly info: ModalFunc
+
+    readonly success: ModalFunc
+
+    readonly error: ModalFunc
+
+    readonly warn: ModalFunc
+
+    readonly warning: ModalFunc
+
+    readonly confirm: ModalFunc
+
+    readonly addDestroyFn: (fn: () => void) => void
+
+    readonly delDestroyFn: (fn: () => void) => void
+
+    readonly destroyAll: () => void
+
+    readonly useModal: typeof useModal
+  }