mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 17:00:36 +01:00
chore: use new syntax for css variables (#3258)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
GitHub
@@ -182,7 +182,7 @@ export default defineConfig({
|
||||
::
|
||||
|
||||
::note
|
||||
Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"} theme picker in the header above to change `primary` and `neutral` colors.
|
||||
Try the :prose-icon{name="i-lucide-swatch-book" class="text-(--ui-primary)"} theme picker in the header above to change `primary` and `neutral` colors.
|
||||
::
|
||||
|
||||
These colors are used to style the components but also to generate the `color` variants:
|
||||
@@ -287,7 +287,7 @@ Nuxt UI automatically creates a CSS variable for each color alias you define whi
|
||||
::
|
||||
|
||||
::note
|
||||
You can use these variables in classes like `text-[var(--ui-primary)]`, it will automatically adapt to the current color scheme.
|
||||
You can use these variables in classes like `text-(--ui-primary)`, it will automatically adapt to the current color scheme.
|
||||
::
|
||||
|
||||
::tip
|
||||
@@ -468,7 +468,7 @@ Nuxt UI automatically applies a text and background color on the `<body>` elemen
|
||||
|
||||
```css
|
||||
body {
|
||||
@apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)];
|
||||
@apply antialiased text-(--ui-text) bg-(--ui-bg);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -532,7 +532,7 @@ Nuxt UI uses a global `--ui-radius` CSS variable for consistent border rounding.
|
||||
```
|
||||
|
||||
::note
|
||||
Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"} theme picker in the header above to change the base radius value.
|
||||
Try the :prose-icon{name="i-lucide-swatch-book" class="text-(--ui-primary)"} theme picker in the header above to change the base radius value.
|
||||
::
|
||||
|
||||
::tip
|
||||
@@ -636,7 +636,7 @@ Components in Nuxt UI can have multiple `slots`, each representing a distinct HT
|
||||
```ts [src/theme/card.ts]
|
||||
export default {
|
||||
slots: {
|
||||
root: 'bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm',
|
||||
root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm',
|
||||
header: 'p-4 sm:px-6',
|
||||
body: 'p-4 sm:p-6',
|
||||
footer: 'p-4 sm:px-6'
|
||||
@@ -670,7 +670,7 @@ Some components don't have slots, they are just composed of a single root elemen
|
||||
|
||||
```ts [src/theme/container.ts]
|
||||
export default {
|
||||
base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'
|
||||
base: 'max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
|
||||
}
|
||||
```
|
||||
|
||||
@@ -695,7 +695,7 @@ Nuxt UI components use `variants` to change the `slots` styles based on props. H
|
||||
```ts [src/theme/avatar.ts]
|
||||
export default {
|
||||
slots: {
|
||||
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)]',
|
||||
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated)',
|
||||
image: 'h-full w-full rounded-[inherit] object-cover'
|
||||
},
|
||||
variants: {
|
||||
|
||||
@@ -256,7 +256,7 @@ props:
|
||||
color: neutral
|
||||
variant: outline
|
||||
ui:
|
||||
leadingIcon: 'text-[var(--ui-primary)]'
|
||||
leadingIcon: 'text-(--ui-primary)'
|
||||
slots:
|
||||
default: |
|
||||
|
||||
|
||||
@@ -95,12 +95,12 @@ props:
|
||||
slots:
|
||||
default: |
|
||||
|
||||
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] 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-[var(--ui-border-accented)] 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
|
||||
@@ -137,12 +137,12 @@ props:
|
||||
slots:
|
||||
default: |
|
||||
|
||||
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] 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-[var(--ui-border-accented)] 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
|
||||
@@ -171,12 +171,12 @@ props:
|
||||
slots:
|
||||
default: |
|
||||
|
||||
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] 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-[var(--ui-border-accented)] 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
|
||||
|
||||
@@ -224,7 +224,7 @@ Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
<UApp>
|
||||
<div class="bg-[var(--ui-bg)]" 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-[var(--ui-bg)]'
|
||||
'class': 'bg-(--ui-bg)'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -194,12 +194,12 @@ This will give you access to the following:
|
||||
|
||||
| Name | Type |
|
||||
| ---- | ---- |
|
||||
| `submit()`{lang="ts-type"} | `Promise<void>`{lang="ts-type"} <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Triggers form submission.</p> |
|
||||
| `validate(opts: { name?: keyof T \| (keyof T)[], silent?: boolean, nested?: boolean, transform?: boolean })`{lang="ts-type"} | `Promise<T>`{lang="ts-type"} <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</p> |
|
||||
| `clear(path?: keyof T)`{lang="ts-type"} | `void` <br> <div class="text-[var(--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?: keyof T)`{lang="ts-type"} | `FormError[]`{lang="ts-type"} <br> <div class="text-[var(--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?: keyof T)`{lang="ts-type"} | `void` <br> <div class="text-[var(--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-[var(--ui-text-toned)] 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(opts: { name?: keyof T \| (keyof T)[], silent?: boolean, nested?: boolean, transform?: 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?: keyof T)`{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?: keyof T)`{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?: keyof T)`{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"} |
|
||||
| `dirty`{lang="ts-type"} | `Ref<boolean>`{lang="ts-type"} `true` if at least one form field has been updated by the user.|
|
||||
| `dirtyFields`{lang="ts-type"} | `DeepReadonly<Set<keyof T>>`{lang="ts-type"} Tracks fields that have been modified by the user. |
|
||||
|
||||
@@ -66,7 +66,7 @@ props:
|
||||
raw: true
|
||||
to: /components/link
|
||||
activeClass: 'font-bold'
|
||||
inactiveClass: 'text-[var(--ui-text-muted)]'
|
||||
inactiveClass: 'text-(--ui-text-muted)'
|
||||
slots:
|
||||
default: Link
|
||||
---
|
||||
|
||||
@@ -334,7 +334,7 @@ props:
|
||||
- label: Help
|
||||
icon: i-lucide-circle-help
|
||||
disabled: true
|
||||
class: 'data-[orientation=horizontal]:border-b border-[var(--ui-border)] data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48'
|
||||
class: 'data-[orientation=horizontal]:border-b border-(--ui-border) data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -838,7 +838,7 @@ name: 'navigation-menu-content-slot-example'
|
||||
::
|
||||
|
||||
::note
|
||||
In this example, we add the `sm:w-[var(--reka-navigation-menu-viewport-width)]` class on the `viewport` to have a dynamic width. This requires to set a width on the content's first child.
|
||||
In this example, we add the `sm:w-(--reka-navigation-menu-viewport-width)` class on the `viewport` to have a dynamic width. This requires to set a width on the content's first child.
|
||||
::
|
||||
|
||||
## API
|
||||
|
||||
@@ -74,13 +74,13 @@ props:
|
||||
|
||||
Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/latest/docs/api/core/column-def) objects with properties like:
|
||||
|
||||
- `accessorKey`: [The key of the row object to use when extracting the value for the column.]{class="text-[var(--ui-text-muted)]"}
|
||||
- `header`: [The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).]{class="text-[var(--ui-text-muted)]"}
|
||||
- `cell`: [The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).]{class="text-[var(--ui-text-muted)]"}
|
||||
- `meta`: [Extra properties for the column.]{class="text-[var(--ui-text-muted)]"}
|
||||
- `accessorKey`: [The key of the row object to use when extracting the value for the column.]{class="text-(--ui-text-muted)"}
|
||||
- `header`: [The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).]{class="text-(--ui-text-muted)"}
|
||||
- `cell`: [The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).]{class="text-(--ui-text-muted)"}
|
||||
- `meta`: [Extra properties for the column.]{class="text-(--ui-text-muted)"}
|
||||
- `class`:
|
||||
- `td`: [The classes to apply to the `td` element.]{class="text-[var(--ui-text-muted)]"}
|
||||
- `th`: [The classes to apply to the `th` element.]{class="text-[var(--ui-text-muted)]"}
|
||||
- `td`: [The classes to apply to the `td` element.]{class="text-(--ui-text-muted)"}
|
||||
- `th`: [The classes to apply to the `th` element.]{class="text-(--ui-text-muted)"}
|
||||
|
||||
In order to render components or other HTML elements, you will need to use the Vue [`h` function](https://vuejs.org/api/render-function.html#h) inside the `header` and `cell` props. This is different from other components that use slots but allows for more flexibility.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user