From cd7ab413f6351f25816f6315484e6d07c97633da Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 8 Apr 2025 12:58:31 +0200
Subject: [PATCH] docs(migration): describe `onClick` change

Resolves #3825
---
 docs/content/1.getting-started/2.migration.md | 47 +++++++++++++------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/docs/content/1.getting-started/2.migration.md b/docs/content/1.getting-started/2.migration.md
index 95165281..9494885b 100644
--- a/docs/content/1.getting-started/2.migration.md
+++ b/docs/content/1.getting-started/2.migration.md
@@ -180,7 +180,7 @@ In Nuxt UI v2, we had a mix between a design system with `primary`, `gray`, `err
 
 This change introduces several breaking changes that you need to be aware of:
 
-1. The `gray` color has been renamed to `neutral`
+- The `gray` color has been renamed to `neutral`
 
 ```diff
 <template>
@@ -203,7 +203,7 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
 ```
 ::
 
-2. The `DEFAULT` shade that let you write `text-primary` no longer exists, you can use [color shades](/getting-started/theme#color-shades) instead:
+- The `DEFAULT` shade that let you write `text-primary` no longer exists, you can use [color shades](/getting-started/theme#color-shades) instead:
 
 ```diff
 <template>
@@ -212,7 +212,7 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
 </template>
 ```
 
-3. The `gray`, `black` and `white` in the `color` props have been removed in favor of `neutral`:
+- The `gray`, `black` and `white` in the `color` props have been removed in favor of `neutral`:
 
 ```diff
 - <UButton color="black" />
@@ -225,7 +225,7 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
 + <UButton color="neutral" variant="outline" />
 ```
 
-4. You can no longer use Tailwind CSS colors in the `color` props, use the new aliases instead:
+- You can no longer use Tailwind CSS colors in the `color` props, use the new aliases instead:
 
 ```diff
 - <UButton color="red" />
@@ -236,7 +236,7 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
 Learn how to extend the design system to add new color aliases.
 ::
 
-5. The color configuration in `app.config.ts` has been moved into a `colors` object:
+- The color configuration in `app.config.ts` has been moved into a `colors` object:
 
 ```diff
 export default defineAppConfig({
@@ -255,7 +255,7 @@ export default defineAppConfig({
 
 Nuxt UI components are now styled using the [Tailwind Variants API](/getting-started/theme#components-theme), which makes all the overrides you made using the `app.config.ts` and the `ui` prop obsolete.
 
-1. Update your [`app.config.ts`](/getting-started/theme#config) to override components with their new theme:
+- Update your [`app.config.ts`](/getting-started/theme#config) to override components with their new theme:
 
 ```diff
 export default defineAppConfig({
@@ -278,7 +278,7 @@ export default defineAppConfig({
 })
 ```
 
-2. Update your [`ui` props](/getting-started/theme#props) to override each component's slots using their new theme:
+- Update your [`ui` props](/getting-started/theme#props) to override each component's slots using their new theme:
 
 ```diff
 <template>
@@ -351,7 +351,7 @@ Here are the Nuxt UI Pro components that have been renamed or removed:
 
 In addition to the renamed components, there are lots of changes to the components API. Let's detail the most important ones:
 
-1. The `links` and `options` props have been renamed to `items` for consistency:
+- The `links` and `options` props have been renamed to `items` for consistency:
 
 ```diff
 <template>
@@ -367,7 +367,25 @@ 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:
+- The `click` field in different components has been removed in favor of the native Vue `onClick` event:
+
+```diff
+<script setup lang="ts">
+const items = [{
+  label: 'Edit',
+-  click: () => {
++  onClick: () => {
+    console.log('Edit')
+  }
+}]
+</script>
+```
+
+::note
+This change affects the `Toast` component as well as all component that have `items` links like `NavigationMenu`, `DropdownMenu`, `CommandPalette`, etc.
+::
+
+- The global `Modals`, `Slideovers` and `Notifications` components have been removed in favor the [App](/components/app) component:
 
 ```diff [app.vue]
 <template>
@@ -380,7 +398,7 @@ This change affects the following components: `Breadcrumb`, `HorizontalNavigatio
 </template>
 ```
 
-3. The `v-model:open` directive and `default-open` prop are now used to control visibility:
+- The `v-model:open` directive and `default-open` prop are now used to control visibility:
 
 ```diff
 <template>
@@ -393,7 +411,7 @@ This change affects the following components: `Breadcrumb`, `HorizontalNavigatio
 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):
+- 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">
@@ -420,7 +438,7 @@ This change affects the following components: `ContextMenu`, `Modal` and `Slideo
 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:
+- A `#header`, `#body` and `#footer` slots have been added inside the `#content` slot like the `Card` component:
 
 ```diff
 <template>
@@ -439,10 +457,9 @@ This change affects the following components: `Modal`, `Popover`, `Slideover`, `
 This change affects the following components: `Modal`, `Slideover`.
 ::
 
-
 ### Changed composables
 
-1. The `useToast()` composable `timeout` prop has been renamed to `duration`:
+- The `useToast()` composable `timeout` prop has been renamed to `duration`:
 
 ```diff
 <script setup lang="ts">
@@ -453,7 +470,7 @@ const toast = useToast()
 </script>
 ```
 
-2. The `useModal` and `useSlideover` composables have been removed in favor of a more generic `useOverlay` composable:
+- The `useModal` and `useSlideover` composables have been removed in favor of a more generic `useOverlay` composable:
 
 Some important differences:
 - The `useOverlay` composable is now used to create overlay instances