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

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

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>