feat(useOverlay)!: handle programmatic modals and slideovers (#3279)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

playground/app/components/ModalExample.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-const modal = useModal()
-
 defineProps<{
   count: number
 }>()
+
+const emit = defineEmits(['close'])
 </script>
 
 <template>
   <UModal :title="`This modal was opened programmatically ${count} times`">
     <template #footer>
-      <UButton color="neutral" label="Close" @click="modal.close()" />
+      <UButton color="neutral" label="Close" @click="emit('close')" />
     </template>
   </UModal>
 </template>

playground/app/components/SlideoverExample.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-const slideover = useSlideover()
-
 defineProps<{
   count: number
 }>()
+
+const emit = defineEmits(['close'])
 </script>
 
 <template>
@@ -13,7 +13,7 @@ defineProps<{
     </template>
 
     <template #footer>
-      <UButton color="neutral" label="Close" @click="slideover.close()" />
+      <UButton color="neutral" label="Close" @click="emit('close')" />
     </template>
   </USlideover>
 </template>

playground/app/pages/components/modal.vue

@@ -5,16 +5,18 @@ const LazyModalExample = defineAsyncComponent(() => import('../../components/Mod
 
 const open = ref(false)
 const count = ref(0)
+const overlay = useOverlay()
 
-const modal = useModal()
+const modal = overlay.create(LazyModalExample, {
+  props: {
+    count: count.value
+  }
+})
 
 function openModal() {
   count.value++
 
-  modal.open(LazyModalExample, {
-    description: 'And you can even provide a description!',
-    count: count.value
-  })
+  modal.open({ count: count.value })
 }
 </script>
 

playground/app/pages/components/slideover.vue

@@ -5,16 +5,18 @@ const LazySlideoverExample = defineAsyncComponent(() => import('../../components
 
 const open = ref(false)
 const count = ref(0)
+const overlay = useOverlay()
 
-const slideover = useSlideover()
+const slideover = overlay.create(LazySlideoverExample, {
+  props: {
+    count: count.value
+  }
+})
 
 function openSlideover() {
   count.value++
 
-  slideover.open(LazySlideoverExample, {
-    title: 'Slideover',
-    count: count.value
-  })
+  slideover.open({ count: count.value })
 }
 </script>