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

refactor(module)!: implement design system with CSS variables (#2298)

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-07 14:48:02 +02:00
committed by GitHub
parent 3cf5535b2f
commit 9368c6a639
279 changed files with 6533 additions and 6994 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/content/3.components/accordion.md
View File

@@ -39,7 +39,7 @@ props:
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
@@ -68,7 +68,7 @@ props:
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
@@ -97,7 +97,7 @@ props:
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
@@ -127,7 +127,7 @@ props:
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
disabled: true
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
@@ -139,7 +139,7 @@ props:
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`.
::note
::tip
You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
::
@@ -161,7 +161,7 @@ props:
trailingIcon: 'i-heroicons-plus-20-solid'
- label: 'Colors'
icon: 'i-heroicons-swatch'
content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
@@ -202,7 +202,7 @@ props:
---
::
::note
::tip
The `#body` slot includes some pre-defined styles, use the [`#content` slot](#with-content-slot) if you want to start from scratch.
::

6
docs/content/3.components/alert.md
View File

@@ -78,7 +78,7 @@ ignore:
- description
- icon
props:
color: gray
color: neutral
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
icon: 'i-heroicons-command-line'
@@ -97,7 +97,7 @@ ignore:
- description
- icon
props:
color: gray
color: neutral
variant: solid
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
@@ -186,7 +186,7 @@ props:
actions:
- label: Action 1
- label: Action 2
color: gray
color: neutral
variant: subtle
---
::

4
docs/content/3.components/badge.md
View File

@@ -35,7 +35,7 @@ Use the `color` prop to change the color of the Badge.
::component-code
---
props:
color: gray
color: neutral
slots:
default: Badge
---
@@ -48,7 +48,7 @@ Use the `variant` props to change the variant of the Badge.
::component-code
---
props:
color: gray
color: neutral
variant: outline
slots:
default: Badge

32
docs/content/3.components/button-group.md
View File

@@ -17,11 +17,11 @@ prettier: true
slots:
default: |
<UButton color="gray" variant="subtle" label="Button" />
<UButton color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
<UButton color="neutral" variant="subtle" label="Button" />
<UButton color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
---
:u-button{color="gray" variant="subtle" label="Button"}
:u-button{color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
:u-button{color="neutral" variant="subtle" label="Button"}
:u-button{color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
::
### Size
@@ -36,11 +36,11 @@ props:
slots:
default: |
<UButton color="gray" variant="subtle" label="Button" />
<UButton color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
<UButton color="neutral" variant="subtle" label="Button" />
<UButton color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
---
:u-button{color="gray" variant="subtle" label="Button"}
:u-button{color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
:u-button{color="neutral" variant="subtle" label="Button"}
:u-button{color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
::
### Orientation
@@ -55,11 +55,11 @@ props:
slots:
default: |
<UButton color="gray" variant="subtle" label="Submit" />
<UButton color="gray" variant="outline" label="Cancel" />
<UButton color="neutral" variant="subtle" label="Submit" />
<UButton color="neutral" variant="outline" label="Cancel" />
---
:u-button{color="gray" variant="subtle" label="Submit"}
:u-button{color="gray" variant="outline" label="Cancel"}
:u-button{color="neutral" variant="subtle" label="Submit"}
:u-button{color="neutral" variant="outline" label="Cancel"}
::
## Examples
@@ -74,12 +74,12 @@ prettier: true
slots:
default: |
<UInput color="gray" variant="outline" placeholder="Enter token" />
<UInput color="neutral" variant="outline" placeholder="Enter token" />
<UButton color="gray" variant="subtle" icon="i-heroicons-clipboard-document" />
<UButton color="neutral" variant="subtle" icon="i-heroicons-clipboard-document" />
---
:u-input{color="gray" variant="outline" placeholder="Enter token"}
:u-button{color="gray" variant="subtle" icon="i-heroicons-clipboard-document"}
:u-input{color="neutral" variant="outline" placeholder="Enter token"}
:u-button{color="neutral" variant="subtle" icon="i-heroicons-clipboard-document"}
::
### With tooltip

8
docs/content/3.components/button.md
View File

@@ -52,7 +52,7 @@ Use the `color` prop to change the color of the Button.
::component-code
---
props:
color: gray
color: neutral
slots:
default: Button
---
@@ -65,7 +65,7 @@ Use the `variant` prop to change the variant of the Button.
::component-code
---
props:
color: gray
color: neutral
variant: outline
slots:
default: Button
@@ -211,10 +211,10 @@ ignore:
- icon
props:
icon: i-heroicons-rocket-launch
color: gray
color: neutral
variant: outline
ui:
leadingIcon: 'text-primary-500 dark:text-primary-400'
leadingIcon: 'text-[--ui-primary]'
slots:
default: |

2
docs/content/3.components/carousel.md
View File

@@ -7,7 +7,7 @@ links:
navigation:
badge:
label: Todo
color: gray
color: neutral
disabled: true
---

2
docs/content/3.components/checkbox.md
View File

@@ -129,7 +129,7 @@ ignore:
- label
- defaultValue
props:
color: gray
color: neutral
defaultValue: true
label: Check me
---

22
docs/content/3.components/chip.md
View File

@@ -16,9 +16,9 @@ prettier: true
slots:
default: |
<UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
<UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
---
:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
::
### Color
@@ -29,13 +29,13 @@ Use the `color` prop to change the color of the Chip.
---
prettier: true
props:
color: gray
color: neutral
slots:
default: |
<UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
<UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
---
:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
::
### Size
@@ -50,9 +50,9 @@ props:
slots:
default: |
<UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
<UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
---
:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
::
### Text
@@ -68,9 +68,9 @@ props:
slots:
default: |
<UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
<UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
---
:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
::
### Position
@@ -85,9 +85,9 @@ props:
slots:
default: |
<UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
<UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
---
:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
::
### Inset

8
docs/content/3.components/collapsible.md
View File

@@ -25,14 +25,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
content: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block}
#content
:placeholder{class="h-48"}
@@ -53,14 +53,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
content: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block}
#content
:placeholder{class="h-48"}

2
docs/content/3.components/command-palette.md
View File

@@ -355,7 +355,7 @@ class: '!p-0'
---
::
::note
::tip
You can also use the `select` field on each item and/or the `@update:model-value` event.
::

12
docs/content/3.components/context-menu.md
View File

@@ -90,12 +90,12 @@ props:
slots:
default: |
<div class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
Right click here
</div>
---
:div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here]
:div{class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"}[Right click here]
::
::note
@@ -131,12 +131,12 @@ props:
slots:
default: |
<div class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
Right click here
</div>
---
:div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here]
:div{class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"}[Right click here]
::
### Disabled
@@ -164,12 +164,12 @@ props:
slots:
default: |
<div class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
Right click here
</div>
---
:div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here]
:div{class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"}[Right click here]
::
## Examples

38
docs/content/3.components/drawer.md
View File

@@ -21,14 +21,14 @@ prettier: true
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
content: |
<Placeholder class="h-48 m-4" />
---
:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
#content
:placeholder{class="h-48 m-4"}
@@ -48,14 +48,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
#body
:placeholder{class="h-48"}
@@ -76,14 +76,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
#body
:placeholder{class="h-48"}
@@ -105,14 +105,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
content: |
<Placeholder class="h-96 m-4" />
---
:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
#content
:placeholder{class="h-96 m-4"}
@@ -130,14 +130,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
content: |
<Placeholder class="w-96 m-4" />
---
:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
#content
:placeholder{class="w-96 m-4"}
@@ -155,14 +155,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
content: |
<Placeholder class="h-48 m-4" />
---
:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
#content
:placeholder{class="h-48 m-4"}
@@ -180,14 +180,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
content: |
<Placeholder class="h-48 m-4" />
---
:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
#content
:placeholder{class="h-48 m-4"}
@@ -205,26 +205,26 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
content: |
<Placeholder class="h-48 m-4" />
---
:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
#content
:placeholder{class="h-screen m-4"}
::
::important
::warning
Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your app to make this work.
```vue [app.vue]
<template>
<UApp>
<div class="bg-white dark:bg-gray-900" vaul-drawer-wrapper>
<div class="bg-[--ui-bg]" vaul-drawer-wrapper>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
@@ -238,7 +238,7 @@ export default defineNuxtConfig({
app: {
rootAttrs: {
'vaul-drawer-wrapper': '',
'class': 'bg-white dark:bg-gray-900'
'class': 'bg-[--ui-bg]'
}
}
})

22
docs/content/3.components/dropdown-menu.md
View File

@@ -91,10 +91,10 @@ props:
slots:
default: |
<UButton icon="i-heroicons-bars-3" color="gray" variant="outline" />
<UButton icon="i-heroicons-bars-3" color="neutral" variant="outline" />
---
:u-button{icon="i-heroicons-bars-3" color="gray" variant="outline"}
:u-button{icon="i-heroicons-bars-3" color="neutral" variant="outline"}
::
::note
@@ -143,10 +143,10 @@ props:
slots:
default: |
<UButton label="Open" icon="i-heroicons-bars-3" color="gray" variant="outline" />
<UButton label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
---
:u-button{label="Open" icon="i-heroicons-bars-3" color="gray" variant="outline"}
:u-button{label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
::
### Arrow
@@ -175,10 +175,10 @@ props:
slots:
default: |
<UButton label="Open" icon="i-heroicons-bars-3" color="gray" variant="outline" />
<UButton label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
---
:u-button{label="Open" icon="i-heroicons-bars-3" color="gray" variant="outline"}
:u-button{label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
::
### Size
@@ -209,13 +209,13 @@ props:
slots:
default: |
<UButton size="xl" label="Open" icon="i-heroicons-bars-3" color="gray" variant="outline" />
<UButton size="xl" label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
---
:u-button{size="xl" label="Open" icon="i-heroicons-bars-3" color="gray" variant="outline"}
:u-button{size="xl" label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
::
::caution
::warning
The `size` prop will not be proxied to the Button, you need to set it yourself.
::
@@ -248,10 +248,10 @@ props:
slots:
default: |
<UButton label="Open" icon="i-heroicons-bars-3" color="gray" variant="outline" />
<UButton label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
---
:u-button{label="Open" icon="i-heroicons-bars-3" color="gray" variant="outline"}
:u-button{label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
::
## Examples

2
docs/content/3.components/form-field.md
View File

@@ -138,7 +138,7 @@ slots:
:u-input{placeholder="Enter your email" class="w-full"}
::
::tip{to="/getting-started/colors"}
::tip{to="/getting-started/theme#colors"}
This sets the `color` to `error` on the form control. You can change it globally in your `app.config.ts`.
::

12
docs/content/3.components/form.md
View File

@@ -171,10 +171,10 @@ When accessing the component via a template ref, you can use the following:
| Name | Type |
| ---- | ---- |
| `submit()`{lang="ts-type"} | `Promise<void>`{lang="ts-type"} <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>Triggers form submission.</p> |
| `validate(path?: string \| string[], opts: { silent?: boolean })`{lang="ts-type"} | `Promise<T>`{lang="ts-type"} <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</p> |
| `clear(path?: string)`{lang="ts-type"} | `void` <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>Clears form errors associated with a specific path. If no path is provided, clears all form errors.</p> |
| `getErrors(path?: string)`{lang="ts-type"} | `FormError[]`{lang="ts-type"} <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.</p></div> |
| `setErrors(errors: FormError[], path?: string)`{lang="ts-type"} | `void` <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>Sets form errors for a given path. If no path is provided, overrides all errors.</p> |
| `errors`{lang="ts-type"} | `Ref<FormError[]>`{lang="ts-type"} <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>A reference to the array containing validation errors. Use this to access or manipulate the error information.</p> |
| `submit()`{lang="ts-type"} | `Promise<void>`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>Triggers form submission.</p> |
| `validate(path?: string \| string[], opts: { silent?: boolean })`{lang="ts-type"} | `Promise<T>`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</p> |
| `clear(path?: string)`{lang="ts-type"} | `void` <br> <div class="text-[--ui-text-toned] mt-1"><p>Clears form errors associated with a specific path. If no path is provided, clears all form errors.</p> |
| `getErrors(path?: string)`{lang="ts-type"} | `FormError[]`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.</p></div> |
| `setErrors(errors: FormError[], path?: string)`{lang="ts-type"} | `void` <br> <div class="text-[--ui-text-toned] mt-1"><p>Sets form errors for a given path. If no path is provided, overrides all errors.</p> |
| `errors`{lang="ts-type"} | `Ref<FormError[]>`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>A reference to the array containing validation errors. Use this to access or manipulate the error information.</p> |
| `disabled`{lang="ts-type"} | `Ref<boolean>`{lang="ts-type"} |

2
docs/content/3.components/icon.md
View File

@@ -18,6 +18,6 @@ props:
---
::
::caution
::tip
It's highly recommended to install the icons collections you need, read more about this in [Icons](/getting-started/icons#collections).
::

4
docs/content/3.components/input-menu.md
View File

@@ -266,7 +266,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
color: gray
color: neutral
highlight: true
items:
- Backlog
@@ -295,7 +295,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
color: gray
color: neutral
variant: subtle
highlight: false
items:

4
docs/content/3.components/input.md
View File

@@ -65,7 +65,7 @@ Use the `color` prop to change the ring color when the Input is focused.
ignore:
- placeholder
props:
color: gray
color: neutral
highlight: true
placeholder: 'Search...'
---
@@ -84,7 +84,7 @@ Use the `variant` prop to change the variant of the Input.
ignore:
- placeholder
props:
color: gray
color: neutral
variant: subtle
highlight: false
placeholder: 'Search...'

2
docs/content/3.components/link.md
View File

@@ -65,7 +65,7 @@ props:
raw: true
to: /components/link
activeClass: 'font-bold'
inactiveClass: 'text-gray-500 dark:text-gray-500'
inactiveClass: 'text-[--ui-text-muted]'
slots:
default: Link
---

38
docs/content/3.components/modal.md
View File

@@ -21,14 +21,14 @@ prettier: true
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
content: |
<Placeholder class="h-48 m-4" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#content
:placeholder{class="h-48 m-4"}
@@ -48,14 +48,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-48"}
@@ -76,14 +76,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-48"}
@@ -111,14 +111,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-48"}
@@ -143,14 +143,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-48"}
@@ -175,14 +175,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-48"}
@@ -203,14 +203,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-48"}
@@ -232,14 +232,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-full"}
@@ -261,14 +261,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-48"}
@@ -298,7 +298,7 @@ This allows you to move the trigger outside of the Modal or remove it entirely.
You can use the [`useModal`](/composables/use-modal) composable to open a Modal programatically.
::important
::warning
Make sure to wrap your app with the [App](/components/app) component which uses the [ModalProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/ModalProvider.vue) component.
::

18
docs/content/3.components/navigation-menu.md
View File

@@ -54,7 +54,7 @@ props:
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Theme'
icon: 'i-heroicons-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
@@ -203,12 +203,12 @@ props:
badge: 3.8k
to: https://github.com/nuxt/ui
target: _blank
class: 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-gray-200 dark:border-gray-800'
class: 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[--ui-border]'
---
::
::note
In this example, the `border-l` and `border-b` classes are applied to display a gray line, this is not done by default to let you have a clean slate to work with.
In this example, the `border-l` and `border-b` classes are applied to display a border, this is not done by default to let you have a clean slate to work with.
::
### Color
@@ -222,7 +222,7 @@ ignore:
external:
- items
props:
color: 'gray'
color: neutral
items:
- - label: Guide
icon: i-heroicons-book-open
@@ -253,8 +253,8 @@ ignore:
external:
- items
props:
color: 'gray'
variant: 'link'
color: neutral
variant: link
highlight: false
items:
- - label: Guide
@@ -283,7 +283,7 @@ The `highlight` prop changes the `pill` variant active item style. Try it out to
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`. This icon is only displayed when an item has children.
::note
::tip
You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
::
@@ -313,7 +313,7 @@ props:
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Theme'
icon: 'i-heroicons-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
@@ -405,7 +405,7 @@ props:
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Theme'
icon: 'i-heroicons-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'

102
docs/content/3.components/pagination.md
View File

@@ -116,7 +116,7 @@ props:
### Color
Use the `color` prop to set the color of the inactive controls. Defaults to `gray`.
Use the `color` prop to set the color of the inactive controls. Defaults to `neutral`.
::component-code
---
@@ -130,24 +130,12 @@ model:
items:
color:
- primary
- green
- red
- orange
- amber
- yellow
- lime
- emerald
- teal
- cyan
- sky
- blue
- indigo
- violet
- purple
- fuchsia
- pink
- rose
- gray
- secondary
- success
- info
- warning
- error
- neutral
props:
page: 5
color: primary
@@ -171,24 +159,12 @@ model:
items:
color:
- primary
- green
- red
- orange
- amber
- yellow
- lime
- emerald
- teal
- cyan
- sky
- blue
- indigo
- violet
- purple
- fuchsia
- pink
- rose
- gray
- secondary
- success
- info
- warning
- error
- neutral
variant:
- solid
- outline
@@ -198,7 +174,7 @@ items:
- link
props:
page: 5
color: gray
color: neutral
variant: subtle
total: 100
---
@@ -220,27 +196,15 @@ model:
items:
activeColor:
- primary
- green
- red
- orange
- amber
- yellow
- lime
- emerald
- teal
- cyan
- sky
- blue
- indigo
- violet
- purple
- fuchsia
- pink
- rose
- gray
- secondary
- success
- info
- warning
- error
- neutral
props:
page: 5
activeColor: gray
activeColor: neutral
total: 100
---
::
@@ -261,24 +225,12 @@ model:
items:
activeColor:
- primary
- green
- red
- orange
- amber
- yellow
- lime
- emerald
- teal
- cyan
- sky
- blue
- indigo
- violet
- purple
- fuchsia
- pink
- rose
- gray
- secondary
- success
- info
- warning
- error
- neutral
activeVariant:
- solid
- outline

20
docs/content/3.components/popover.md
View File

@@ -21,14 +21,14 @@ prettier: true
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
content: |
<Placeholder class="size-48 m-4 inline-flex" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#content
:placeholder{class="size-48 m-4 inline-flex"}
@@ -50,14 +50,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
content: |
<Placeholder class="size-48 m-4 inline-flex" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#content
:placeholder{class="size-48 m-4 inline-flex"}
@@ -83,14 +83,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
content: |
<Placeholder class="size-48 m-4 inline-flex" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#content
:placeholder{class="size-48 m-4 inline-flex"}
@@ -121,14 +121,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
content: |
<Placeholder class="size-48 m-4 inline-flex" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#content
:placeholder{class="size-48 m-4 inline-flex"}
@@ -148,14 +148,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
content: |
<Placeholder class="size-48 m-4 inline-flex" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#content
:placeholder{class="size-48 m-4 inline-flex"}

2
docs/content/3.components/progress.md
View File

@@ -115,7 +115,7 @@ Use the `color` prop to change the color of the Slider.
::component-code
---
props:
color: gray
color: neutral
---
::

4
docs/content/3.components/radio-group.md
View File

@@ -66,7 +66,7 @@ props:
---
::
::note
::caution
When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
::
@@ -156,7 +156,7 @@ ignore:
external:
- items
props:
color: 'gray'
color: neutral
defaultValue: 'System'
items:
- 'System'

6
docs/content/3.components/select-menu.md
View File

@@ -74,7 +74,7 @@ props:
---
::
::note
::caution
Unlike the [Select](/components/select) component, the SelectMenu expects the whole object to be passed to the `v-model` directive or the `default-value` prop by default.
::
@@ -274,7 +274,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
color: gray
color: neutral
highlight: true
items:
- Backlog
@@ -303,7 +303,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
color: gray
color: neutral
variant: subtle
highlight: false
items:

8
docs/content/3.components/select.md
View File

@@ -68,7 +68,7 @@ props:
---
::
::note
::caution
When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
::
@@ -152,7 +152,7 @@ props:
Use the `content` prop to control how the Select content is rendered, like its its `align`, `side` or `position` for example. Defaults to `popper` to match other components.
::caution
::warning
The `content.align`, `content.side`, etc. properties only apply when `content.position` is set to `popper`.
::
@@ -209,7 +209,7 @@ ignore:
external:
- items
props:
color: gray
color: neutral
highlight: true
defaultValue: 'Backlog'
items:
@@ -237,7 +237,7 @@ ignore:
external:
- items
props:
color: gray
color: neutral
variant: subtle
highlight: false
defaultValue: 'Backlog'

6
docs/content/3.components/separator.md
View File

@@ -74,13 +74,13 @@ props:
### Color
Use the `color` prop to change the color of the Separator. Defaults to `gray`.
Use the `color` prop to change the color of the Separator. Defaults to `neutral`.
::component-code
---
class: 'p-8'
props:
color: 'primary'
color: primary
type: solid
---
::
@@ -105,7 +105,7 @@ Use the `size` prop to change the size of the Separator. Defaults to `xs`.
---
class: 'p-8'
props:
size: 'lg'
size: lg
---
::

38
docs/content/3.components/slideover.md
View File

@@ -21,14 +21,14 @@ prettier: true
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
content: |
<Placeholder class="h-full m-4" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#content
:placeholder{class="h-full m-4"}
@@ -48,14 +48,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-full"}
@@ -76,14 +76,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-full"}
@@ -111,14 +111,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-full"}
@@ -143,14 +143,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-full"}
@@ -175,14 +175,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full min-h-48" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-full min-h-48"}
@@ -203,14 +203,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-full"}
@@ -231,14 +231,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-full"}
@@ -260,14 +260,14 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-full" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-full"}
@@ -297,7 +297,7 @@ This allows you to move the trigger outside of the Slideover or remove it entire
You can use the [`useSlideover`](/composables/use-slideover) composable to open a Slideover programatically.
::important
::warning
Make sure to wrap your app with the [App](/components/app) component which uses the [SlideoverProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/SlideoverProvider.vue) component.
::

2
docs/content/3.components/slider.md
View File

@@ -116,7 +116,7 @@ Use the `color` prop to change the color of the Slider.
ignore:
- defaultValue
props:
color: gray
color: neutral
defaultValue: 50
---
::

2
docs/content/3.components/switch.md
View File

@@ -137,7 +137,7 @@ ignore:
- label
- defaultValue
props:
color: gray
color: neutral
defaultValue: true
label: Check me
---

2
docs/content/3.components/table.md
View File

@@ -7,7 +7,7 @@ links:
navigation:
badge:
label: Todo
color: gray
color: neutral
disabled: true
---

4
docs/content/3.components/tabs.md
View File

@@ -111,7 +111,7 @@ ignore:
external:
- items
props:
color: gray
color: neutral
content: false
items:
- label: Account
@@ -133,7 +133,7 @@ ignore:
external:
- items
props:
color: gray
color: neutral
variant: link
content: false
items:

4
docs/content/3.components/textarea.md
View File

@@ -41,7 +41,7 @@ Use the `color` prop to change the ring color when the Textarea is focused.
ignore:
- placeholder
props:
color: gray
color: neutral
highlight: true
placeholder: 'Type something...'
---
@@ -60,7 +60,7 @@ Use the `variant` prop to change the variant of the Textarea.
ignore:
- placeholder
props:
color: gray
color: neutral
variant: subtle
highlight: false
placeholder: 'Type something...'

28
docs/content/3.components/toast.md
View File

@@ -13,7 +13,7 @@ links:
Use the [useToast](/composables/use-toast) composable to display a toast in your application.
::important
::warning
Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
::
@@ -91,27 +91,15 @@ Pass a `color` field to the `toast.add` method to change the color of the Toast.
options:
- name: 'color'
label: 'color'
default: 'gray'
default: neutral
items:
- primary
- green
- red
- orange
- amber
- yellow
- lime
- emerald
- teal
- cyan
- sky
- blue
- indigo
- violet
- purple
- fuchsia
- pink
- rose
- gray
- secondary
- success
- info
- warning
- error
- neutral
name: 'toast-color-example'
---
::

26
docs/content/3.components/tooltip.md
View File

@@ -13,7 +13,7 @@ links:
Use a [Button](/components/button) or any other component in the default slot of the Tooltip.
::important
::warning
Make sure to wrap your app with the [App](/components/app) component which uses the [TooltipProvider](https://www.radix-vue.com/components/tooltip.html#provider) component from Radix Vue.
::
@@ -33,10 +33,10 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
::
### Kbds
@@ -57,10 +57,10 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
::
::tip
@@ -82,10 +82,10 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
::
::tip
@@ -120,10 +120,10 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
::
### Arrow
@@ -142,10 +142,10 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
::
### Disabled
@@ -163,10 +163,10 @@ props:
slots:
default: |
<UButton label="Open" color="gray" variant="subtle" />
<UButton label="Open" color="neutral" variant="subtle" />
---
:u-button{label="Open" color="gray" variant="subtle"}
:u-button{label="Open" color="neutral" variant="subtle"}
::
## Examples