diff --git a/src/runtime/components/OverlayProvider.vue b/src/runtime/components/OverlayProvider.vue index 6fa5542d..50bc3762 100644 --- a/src/runtime/components/OverlayProvider.vue +++ b/src/runtime/components/OverlayProvider.vue @@ -22,7 +22,7 @@ const onClose = (id: symbol, value: any) => { v-for="overlay in mountedOverlays" :key="overlay.id" v-bind="overlay.props" - v-model:open="overlay.modelValue" + v-model:open="overlay.isOpen" @close="(value:any) => onClose(overlay.id, value)" @after:leave="onAfterLeave(overlay.id)" /> diff --git a/src/runtime/composables/useOverlay.ts b/src/runtime/composables/useOverlay.ts index a607d2b5..9497cb4a 100644 --- a/src/runtime/composables/useOverlay.ts +++ b/src/runtime/composables/useOverlay.ts @@ -12,17 +12,19 @@ export type OverlayOptions> = { destroyOnClose?: boolean } -type ManagedOverlayOptionsPrivate = { +interface ManagedOverlayOptionsPrivate { component?: T id: symbol isMounted: boolean - modelValue: boolean - resolvePromise?: (value: unknown) => void + isOpen: boolean + resolvePromise?: (value: any) => void } export type Overlay = OverlayOptions & ManagedOverlayOptionsPrivate -interface OverlayInstance { - open: (props?: ComponentProps) => Promise>> +interface OverlayInstance extends Omit, 'component'> { + id: symbol + result: Promise>> + open: (props?: ComponentProps) => Omit, 'open' | 'close' | 'patch' | 'modelValue' | 'resolvePromise'> close: (value?: any) => void patch: (props: Partial>) => void } @@ -35,7 +37,7 @@ function _useOverlay() { const options = reactive({ id: Symbol(import.meta.dev ? 'useOverlay' : ''), - modelValue: !!defaultOpen, + isOpen: !!defaultOpen, component: markRaw(component!), isMounted: !!defaultOpen, destroyOnClose: !!destroyOnClose, @@ -45,13 +47,15 @@ function _useOverlay() { overlays.push(options) return { + ...options, + result: new Promise(() => {}), open: (props?: ComponentProps) => open(options.id, props), close: value => close(options.id, value), patch: (props: Partial>) => patch(options.id, props) } } - const open = (id: symbol, props?: ComponentProps): Promise => { + const open = (id: symbol, props?: ComponentProps) => { const overlay = getOverlay(id) // If props are provided, update the overlay's props @@ -59,19 +63,23 @@ function _useOverlay() { patch(overlay.id, props) } - overlay.modelValue = true + overlay.isOpen = true overlay.isMounted = true - // Return a new promise that will be resolved when close is called - return new Promise((resolve) => { - overlay.resolvePromise = resolve - }) + return { + id, + isMounted: overlay.isMounted, + isOpen: overlay.isOpen, + result: new Promise((resolve) => { + overlay.resolvePromise = resolve + }) + } } const close = (id: symbol, value?: any): void => { const overlay = getOverlay(id) - overlay.modelValue = false + overlay.isOpen = false // Resolve the promise if it exists if (overlay.resolvePromise) {