Overlay Provider

Demo

Component

OverlayProvider.vue

<script lang="ts">

</script>

<script setup lang="ts">
import type { Overlay } from '@/ui/composables/useOverlay'
import { useOverlay } from '@/ui/composables/useOverlay'
import { computed } from 'vue'

const { overlays, unMount, close } = useOverlay()

const mountedOverlays = computed(() => overlays.filter((overlay: Overlay) => overlay.isMounted))

function onAfterLeave(id: symbol) {
  close(id)
  unMount(id)
}

function onClose(id: symbol, value: any) {
  close(id, value)
}
</script>

<template>
  <component
    :is="overlay.component"
    v-for="overlay in mountedOverlays"
    :key="overlay.id"
    v-bind="overlay.props"
    v-model:open="overlay.modelValue"
    @close="(value:any) => onClose(overlay.id, value)"
    @after:leave="onAfterLeave(overlay.id)"
  />
</template>

OverlayProvider.vue

<script lang="ts">

</script>

<script setup lang="ts">
import type { Overlay } from '@/ui/composables/useOverlay'
import { useOverlay } from '@/ui/composables/useOverlay'
import { computed } from 'vue'

const { overlays, unMount, close } = useOverlay()

const mountedOverlays = computed(() => overlays.filter((overlay: Overlay) => overlay.isMounted))

function onAfterLeave(id: symbol) {
  close(id)
  unMount(id)
}

function onClose(id: symbol, value: any) {
  close(id, value)
}
</script>

<template>
  <component
    :is="overlay.component"
    v-for="overlay in mountedOverlays"
    :key="overlay.id"
    v-bind="overlay.props"
    v-model:open="overlay.modelValue"
    @close="(value:any) => onClose(overlay.id, value)"
    @after:leave="onAfterLeave(overlay.id)"
  />
</template>

Theme

overlay-provider.ts

export default {}

View Nuxt UI theme

overlay-provider.ts

export default {}

Test

To test this component, you can use the following test file:

OverlayProvider.test.ts

import { expect, it } from 'vitest'

// No tests for this component
it('passes', () => {
  expect(true).toBe(true)
})

OverlayProvider.test.ts

import { expect, it } from 'vitest'

// No tests for this component
it('passes', () => {
  expect(true).toBe(true)
})

Contributors

barbapapazes

Changelog

b11ae - feat: overlay provider (#166) on 3/26/2025