From a6f58cba14da0a61de91970165970fb599e449c1 Mon Sep 17 00:00:00 2001
From: Jakub Andrzejewski <jakub.andrzejewski.dev@gmail.com>
Date: Thu, 6 Mar 2025 11:42:16 +0100
Subject: [PATCH] docs(migration): improve changed components section (#3449)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/1.getting-started/2.migration.md | 85 ++++++++++++++++++-
 1 file changed, 84 insertions(+), 1 deletion(-)

diff --git a/docs/content/1.getting-started/2.migration.md b/docs/content/1.getting-started/2.migration.md
index 9ad932af..8859b6a2 100644
--- a/docs/content/1.getting-started/2.migration.md
+++ b/docs/content/1.getting-started/2.migration.md
@@ -359,7 +359,7 @@ In addition to the renamed components, there are lots of changes to the componen
 + <USelect :items="countries" />
 
 - <UHorizontalNavigation :links="links" />
-+ <UNavigationMenu :items="items" />
++ <UNavigationMenu :items="links" />
 </template>
 ```
 
@@ -367,6 +367,89 @@ In addition to the renamed components, there are lots of changes to the componen
 This change affects the following components: `Breadcrumb`, `HorizontalNavigation`, `InputMenu`, `RadioGroup`, `Select`, `SelectMenu`, `VerticalNavigation`.
 ::
 
+2. The global `Modals`, `Slideovers` and `Notifications` components have been removed in favor the [App](/components/app) component:
+
+```diff [app.vue]
+<template>
++  <UApp>
++    <NuxtPage />
++  </UApp>
+-  <UModals />
+-  <USlideovers />
+-  <UNotifications />
+</template>
+```
+
+3. The `v-model:open` directive and `default-open` prop are now used to control visibility:
+
+```diff
+<template>
+- <UModal v-model="open" />
++ <UModal v-model:open="open" />
+</template>
+```
+
+::note
+This change affects the following components: `ContextMenu`, `Modal` and `Slideover` and enables controlling visibility for `InputMenu`, `Select`, `SelectMenu` and `Tooltip`.
+::
+
+4. The default slot is now used for the trigger and the content goes inside the `#content` slot (you don't need to use a `v-model:open` directive with this method):
+
+```diff
+<script setup lang="ts">
+- const open = ref(false)
+</script>
+
+<template>
+- <UButton label="Open" @click="open = true" />
+
+- <UModal v-model="open">
++ <UModal>
++   <UButton label="Open" />
+
++   <template #content>
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
++   </template>
+  </UModal>
+</template>
+```
+
+::note
+This change affects the following components: `Modal`, `Popover`, `Slideover`, `Tooltip`.
+::
+
+5. A `#header`, `#body` and `#footer` slots have been added inside the `#content` slot like the `Card` component:
+
+```diff
+<template>
+- <UModal>
++ <UModal title="Title" description="Description">
+-   <div class="p-4">
++   <template #body>
+      <Placeholder class="h-48" />
++   </template>
+-   </div>
+  </UModal>
+</template>
+```
+
+::note
+This change affects the following components: `Modal`, `Slideover`.
+::
+
+6. The `Toast` component `timeout` prop has been renamed to `duration`:
+
+```diff
+<script setup lang="ts">
+const toast = useToast()
+
+- toast.add({ title: 'Invitation sent', timeout: 0 })
++ toast.add({ title: 'Invitation sent', duration: 0 })
+</script>
+```
+
 ---
 
 ::warning