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

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

docs/app/components/content/examples/modal/ModalExample.vue

@@ -1,23 +1,17 @@
 <script setup lang="ts">
-const modal = useModal()
-
 defineProps<{
   count: number
 }>()
 
-const emit = defineEmits(['success'])
-
-function onSuccess() {
-  emit('success')
-}
+const emit = defineEmits<{ close: [boolean] }>()
 </script>
 
 <template>
-  <UModal :title="`This modal was opened programmatically ${count} times`">
+  <UModal :close="{ onClick: () => emit('close', false) }" :title="`This modal was opened programmatically ${count} times`">
     <template #footer>
       <div class="flex gap-2">
-        <UButton color="neutral" label="Close" @click="modal.close()" />
-        <UButton label="Success" @click="onSuccess" />
+        <UButton color="neutral" label="Dismiss" @click="emit('close', false)" />
+        <UButton label="Success" @click="emit('close', true)" />
       </div>
     </template>
   </UModal>

docs/app/components/content/examples/modal/ModalProgrammaticExample.vue

@@ -4,20 +4,37 @@ import { LazyModalExample } from '#components'
 const count = ref(0)
 
 const toast = useToast()
-const modal = useModal()
+const overlay = useOverlay()
 
-function open() {
-  count.value++
+const modal = overlay.create(LazyModalExample, {
+  props: {
+    count: count.value
+  }
+})
 
-  modal.open(LazyModalExample, {
-    description: 'And you can even provide a description!',
-    count: count.value,
-    onSuccess() {
-      toast.add({
-        title: 'Success !',
-        id: 'modal-success'
-      })
-    }
+async function open() {
+  const shouldIncrement = await modal.open()
+
+  if (shouldIncrement) {
+    count.value++
+
+    toast.add({
+      title: `Success: ${shouldIncrement}`,
+      color: 'success',
+      id: 'modal-success'
+    })
+
+    // Update the count
+    modal.patch({
+      count: count.value
+    })
+    return
+  }
+
+  toast.add({
+    title: `Dismissed: ${shouldIncrement}`,
+    color: 'error',
+    id: 'modal-dismiss'
   })
 }
 </script>

docs/app/components/content/examples/slideover/SlideoverExample.vue

@@ -1,27 +1,21 @@
 <script setup lang="ts">
-const slideover = useSlideover()
-
 defineProps<{
   count: number
 }>()
 
-const emit = defineEmits(['success'])
-
-function onSuccess() {
-  emit('success')
-}
+const emit = defineEmits<{ close: [boolean] }>()
 </script>
 
 <template>
-  <USlideover :description="`This slideover was opened programmatically ${count} times`">
+  <USlideover :close="{ onClick: () => emit('close', false) }" :description="`This slideover was opened programmatically ${count} times`">
     <template #body>
       <Placeholder class="h-full" />
     </template>
 
     <template #footer>
       <div class="flex gap-2">
-        <UButton color="neutral" label="Close" @click="slideover.close()" />
-        <UButton label="Success" @click="onSuccess" />
+        <UButton color="neutral" label="Dismiss" @click="emit('close', false)" />
+        <UButton label="Success" @click="emit('close', true)" />
       </div>
     </template>
   </USlideover>

docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue

@@ -4,20 +4,37 @@ import { LazySlideoverExample } from '#components'
 const count = ref(0)
 
 const toast = useToast()
-const slideover = useSlideover()
+const overlay = useOverlay()
 
-function open() {
-  count.value++
+const slideover = overlay.create(LazySlideoverExample, {
+  props: {
+    count: count.value
+  }
+})
 
-  slideover.open(LazySlideoverExample, {
-    title: 'Slideover',
-    count: count.value,
-    onSuccess() {
-      toast.add({
-        title: 'Success !',
-        id: 'modal-success'
-      })
-    }
+async function open() {
+  const shouldIncrement = await slideover.open()
+
+  if (shouldIncrement) {
+    count.value++
+
+    toast.add({
+      title: `Success: ${shouldIncrement}`,
+      color: 'success',
+      id: 'slideover-success'
+    })
+
+    // Update the count
+    slideover.patch({
+      count: count.value
+    })
+    return
+  }
+
+  toast.add({
+    title: `Dismissed: ${shouldIncrement}`,
+    color: 'error',
+    id: 'slideover-dismiss'
   })
 }
 </script>