Guide
Types
The exported types in VueFinalModal.
ModalId
export type ModalId = number | string | symbol
Template
The template object accepted by useModal() and defineTemplate() (from vue-use-template):
export interface Template<T extends Component> {
component: T
attrs?: MaybeRefOrGetter<ComponentProps<T>>
emits?: MaybeRefOrGetter<PickComponentEmits<ComponentProps<T>>>
props?: MaybeRefOrGetter<PickComponentProps<ComponentProps<T>>>
/** A string slot is rendered as raw HTML, like `v-html`: never pass user-provided content as a string. */
slots?: {
[K in keyof ComponentSlots<T>]?: string | Component | Template<Component>
}
}
ModalTemplate
The template of a modal, accepted by defineModal():
export type ModalTemplate<T extends Component> = Template<T>
UseModalOptions
The options of useModal():
export type UseModalOptions<T extends Component> = Omit<ModalTemplate<T>, 'component'> & {
defaultModelValue?: boolean
keepAlive?: boolean
component?: T
}
UseModalReturnType
The return value of useModal():
export interface UseModalReturnType {
open: () => Promise<string>
close: () => Promise<string>
destroy: () => void
}
Vfm
The instance returned by useVfm():
export type Vfm = {
install: (app: App) => void
modals: ComputedRef<ModalExposed>[]
openedModals: ComputedRef<ModalExposed>[]
openedModalOverlays: ComputedRef<ModalExposed>[]
get: (modalId: ModalId) => undefined | ComputedRef<ModalExposed>
toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>
open: (modalId: ModalId) => undefined | Promise<string>
close: (modalId: ModalId) => undefined | Promise<string>
closeAll: () => Promise<PromiseSettledResult<string>[]>
}
ModalExposed
export type ModalExposed = {
modalId: Ref<undefined | ModalId>
hideOverlay: Ref<undefined | boolean>
overlayBehavior: Ref<undefined | 'auto' | 'persist'>
overlayVisible: Ref<boolean>
toggle: (show?: boolean) => Promise<string>
}