arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 10:50:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(migration): describe onClick change

Browse Source 
Resolves #3825
This commit is contained in:
Benjamin Canac
2025-04-08 12:58:31 +02:00
parent cea881abdc
commit cd7ab413f6
1 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
docs/content/1.getting-started/2.migration.md
View File

@@ -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: 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 ```diff
<template> <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 ```diff
<template> <template>
@@ -212,7 +212,7 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
</template> </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 ```diff
- <UButton color="black" /> - <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" /> + <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 ```diff
- <UButton color="red" /> - <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. 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 ```diff
export default defineAppConfig({ 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. 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 ```diff
export default defineAppConfig({ 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 ```diff
<template> <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: 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 ```diff
<template> <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`. 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] ```diff [app.vue]
<template> <template>
@@ -380,7 +398,7 @@ This change affects the following components: `Breadcrumb`, `HorizontalNavigatio
</template> </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 ```diff
<template> <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`. 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 ```diff
<script setup lang="ts"> <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`. 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 ```diff
<template> <template>
@@ -439,10 +457,9 @@ This change affects the following components: `Modal`, `Popover`, `Slideover`, `
This change affects the following components: `Modal`, `Slideover`. This change affects the following components: `Modal`, `Slideover`.
:: ::
### Changed composables ### Changed composables
1. The `useToast()` composable `timeout` prop has been renamed to `duration`: - The `useToast()` composable `timeout` prop has been renamed to `duration`:
```diff ```diff
<script setup lang="ts"> <script setup lang="ts">
@@ -453,7 +470,7 @@ const toast = useToast()
</script> </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: Some important differences:
- The `useOverlay` composable is now used to create overlay instances - The `useOverlay` composable is now used to create overlay instances