Merge branch 'v3' into docs/og-image-component

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()
-
-function open() {
-  count.value++
-
-  modal.open(LazyModalExample, {
-    description: 'And you can even provide a description!',
-    count: count.value,
-    onSuccess() {
-      toast.add({
-        title: 'Success !',
-        id: 'modal-success'
-      })
-    }
+const overlay = useOverlay()
+
+const modal = overlay.create(LazyModalExample, {
+  props: {
+    count: count.value
+  }
+})
+
+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/navigation-menu/NavigationMenuModelValueExample.vue

@@ -41,14 +41,9 @@ const items = [
         description: 'Define shortcuts for your application.'
       },
       {
-        label: 'useModal',
+        label: 'useOverlay',
         icon: 'i-lucide-file-text',
-        description: 'Display a modal within your application.'
-      },
-      {
-        label: 'useSlideover',
-        icon: 'i-lucide-file-text',
-        description: 'Display a slideover within your application.'
+        description: 'Display a modal/slideover within your application.'
       },
       {
         label: 'useToast',

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()
-
-function open() {
-  count.value++
-
-  slideover.open(LazySlideoverExample, {
-    title: 'Slideover',
-    count: count.value,
-    onSuccess() {
-      toast.add({
-        title: 'Success !',
-        id: 'modal-success'
-      })
-    }
+const overlay = useOverlay()
+
+const slideover = overlay.create(LazySlideoverExample, {
+  props: {
+    count: count.value
+  }
+})
+
+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>

docs/content/1.getting-started/2.installation/1.nuxt.md

@@ -102,7 +102,7 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.
 ```
 
 ::note{to="/components/app"}
-The `App` component provides global configurations and is required for **Toast** and **Tooltip** components to work.
+The `App` component provides global configurations and is required for **Toast**, **Tooltip** components to work as well as **Programmatic Overlays**.
 ::
 
 ::

docs/content/1.getting-started/2.installation/2.vue.md

@@ -161,7 +161,7 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.
 ```
 
 ::note{to="/components/app"}
-The `App` component provides global configurations and is required for **Toast** and **Tooltip** components to work.
+The `App` component provides global configurations and is required for **Toast**, **Tooltip** components to work as well as **Programmatic Overlays**.
 ::
 
 ::