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

feat(module)!: migrate to reka-ui (#2448)

Browse Source
This commit is contained in:
Benjamin Canac
2024-12-03 16:11:32 +01:00
committed by GitHub
parent c440c91a29
commit 81ac076219
229 changed files with 13487 additions and 13466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/content/3.components/0.app.md
View File

@@ -9,13 +9,13 @@ links:
## Usage
This component implements Radix Vue [ConfigProvider](https://www.radix-vue.com/utilities/config-provider.html) to provide global configuration to all components:
This component implements Reka UI [ConfigProvider](https://reka-ui.com/docs/utilities/config-provider) to provide global configuration to all components:
- Enables all primitives to inherit global reading direction.
- Enables changing the behavior of scroll body when setting body lock.
- Much more controls to prevent layout shifts.
It's also using [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) and [TooltipProvider](https://www.radix-vue.com/components/tooltip.html#provider) to provide global toasts and tooltips, as well as programmatic modals and slideovers.
It's also using [ToastProvider](https://reka-ui.com/docs/components/toast#provider) and [TooltipProvider](https://reka-ui.com/docs/components/tooltip#provider) to provide global toasts and tooltips, as well as programmatic modals and slideovers.
Use it as at the root of your app:

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

@@ -2,8 +2,8 @@
description: A stacked set of collapsible panels.
links:
- label: Accordion
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/accordion.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/accordion
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Accordion.vue
@@ -104,6 +104,38 @@ props:
---
::
### Unmount
Use the `unmount-on-hide` prop to prevent the content from being unmounted when the accordion is collapsed. Defaults to `true`.
::component-code
---
ignore:
- items
external:
- items
hide:
- class
props:
class: 'px-4'
unmountOnHide: false
items:
- label: 'Icons'
icon: 'i-lucide-smile'
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-lucide-swatch-book'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Components'
icon: 'i-lucide-box'
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
---
::
::note
You can inspect the DOM to see each item's content being rendered.
::
### Disabled
Use the `disabled` property to disable the Accordion.

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

@@ -2,8 +2,8 @@
description: An img element with fallback and Nuxt Image support.
links:
- label: Avatar
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/avatar.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/avatar
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Avatar.vue

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

@@ -3,8 +3,8 @@ title: Calendar
description: A calendar component for selecting single dates, multiple dates or date ranges.
links:
- label: Calendar
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/calendar.html
icon: i-custom-reka-ui
to: https://www.reka-ui.com/components/calendar.html
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Calendar.vue

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

@@ -2,8 +2,8 @@
description: An input element to toggle between checked and unchecked states.
links:
- label: Checkbox
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/checkbox.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/checkbox
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Checkbox.vue
@@ -37,12 +37,14 @@ props:
### Indeterminate
Use the `indeterminate` prop to set the Checkbox to an [indeterminate state](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
Use the `indeterminate` value in the `v-model` directive or `default-value` prop to set the Checkbox to an [indeterminate state](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
::component-code
---
ignore:
- defaultValue
props:
indeterminate: true
defaultValue: 'indeterminate'
---
::
@@ -52,8 +54,10 @@ Use the `indeterminate-icon` prop to customize the indeterminate icon. Defaults
::component-code
---
ignore:
- defaultValue
props:
indeterminate: true
defaultValue: 'indeterminate'
indeterminateIcon: 'i-lucide-plus'
---
::

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

@@ -2,8 +2,8 @@
description: A collapsible element to toggle visibility of its content.
links:
- label: Collapsible
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/collapsible.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/collapsible
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Collapsible.vue
@@ -38,6 +38,38 @@ slots:
:placeholder{class="h-48"}
::
### Unmount
Use the `unmount-on-hide` prop to prevent the content from being unmounted when the Collapsible is collapsed. Defaults to `true`.
::component-code
---
prettier: true
ignore:
- class
props:
unmountOnHide: false
class: 'flex flex-col gap-2 w-48'
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down" block />
content: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down" block}
#content
:placeholder{class="h-48"}
::
::note
You can inspect the DOM to see the content being rendered.
::
### Disabled
Use the `disabled` prop to disable the Collapsible.

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

@@ -6,8 +6,8 @@ links:
to: https://fusejs.io/
target: _blank
- label: Combobox
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/combobox.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/combobox
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CommandPalette.vue
@@ -29,7 +29,7 @@ The CommandPalette component filters groups and ranks matching commands by relev
- `label?: string`{lang="ts-type"}
- `slot?: string`{lang="ts-type"}
- `items?: CommandPaletteItem[]`{lang="ts-type"}
- [`filter?: boolean`{lang="ts-type"}](#without-internal-search)
- [`ignoreFilter?: boolean`{lang="ts-type"}](#with-ignore-filter)
- [`postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}](#with-post-filtered-items)
- `highlightedIcon?: string`{lang="ts-type"}
@@ -478,14 +478,14 @@ class: '!p-0'
---
::
### Without internal search
### With ignore filter
You can set the `filter` field to `false` on a group to disable the internal search and use your own search logic.
You can set the `ignoreFilter` field to `true` on a group to disable the internal search and use your own search logic.
::component-example
---
collapse: true
name: 'command-palette-filter-example'
name: 'command-palette-ignore-filter-example'
class: '!p-0'
---
::

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

@@ -3,8 +3,8 @@ title: ContextMenu
description: A menu to display actions when right-clicking on an element.
links:
- label: ContextMenu
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/context-menu.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/context-menu
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/ContextMenu.vue

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

@@ -2,8 +2,8 @@
description: A drawer that smoothly slides in & out of the screen.
links:
- label: Drawer
icon: i-custom-radix-vue
to: https://github.com/radix-vue/vaul-vue
icon: i-custom-reka-ui
to: https://github.com/unovue/vaul-vue
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Drawer.vue

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

@@ -3,8 +3,8 @@ title: DropdownMenu
description: A menu to display actions when clicking on an element.
links:
- label: DropdownMenu
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/dropdown-menu.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/dropdown-menu
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/DropdownMenu.vue

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

@@ -3,8 +3,8 @@ title: InputMenu
description: An autocomplete input with real-time suggestions.
links:
- label: Combobox
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/combobox.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/combobox
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputMenu.vue
@@ -15,7 +15,7 @@ links:
Use the `v-model` directive to control the value of the InputMenu or the `default-value` prop to set the initial value when you do not need to control its state.
::tip
Use this over an [`Input`](/components/input) to take advantage of Radix Vue's [`Combobox`](https://www.radix-vue.com/components/combobox.html) component that offers autocomplete capabilities.
Use this over an [`Input`](/components/input) to take advantage of Reka UI's [`Combobox`](https://reka-ui.com/docs/components/combobox) component that offers autocomplete capabilities.
::
::note
@@ -222,42 +222,6 @@ props:
---
::
### Create Item
Use the `create-item` prop to allow user input.
::component-code
---
prettier: true
ignore:
- modelValue
- items
external:
- items
- modelValue
items:
createItem:
- true
- 'always'
props:
modelValue: 'Backlog'
items:
- Backlog
- Todo
- In Progress
- Done
createItem: true
---
::
::note
The create option shows when no match is found by default. Set it to `always` to show it even when similar values exist.
::
::tip{to="#emits"}
Use the `@create` event to handle the creation of the item. You will receive the event and the item as arguments.
::
### Content
Use the `content` prop to control how the InputMenu content is rendered, like its `align` or `side` for example.
@@ -282,7 +246,7 @@ items:
- top
- bottom
props:
modelValue: Backlog
modelValue: 'Backlog'
content:
align: center
side: bottom
@@ -310,7 +274,7 @@ external:
- items
- modelValue
props:
modelValue: Backlog
modelValue: 'Backlog'
arrow: true
items:
- Backlog
@@ -734,6 +698,25 @@ name: 'input-menu-icon-example'
---
::
### With create item
Use the `create-item` prop to enable users to add custom values that aren't in the predefined options.
::component-example
---
collapse: true
name: 'input-menu-create-item-example'
---
::
::note
The create option shows when no match is found by default. Set it to `always` to show it even when similar values exist.
::
::tip{to="#emits"}
Use the `@create` event to handle the creation of the item. You will receive the event and the item as arguments.
::
### With fetched items
You can fetch items from an API and use them in the InputMenu.
@@ -745,14 +728,14 @@ name: 'input-menu-fetch-example'
---
::
### Without internal search
### With ignore filter
Set the `filter` prop to `false` to disable the internal search and use your own search logic.
Set the `ignore-filter` prop to `true` to disable the internal search and use your own search logic.
::component-example
---
collapse: true
name: 'input-menu-filter-example'
name: 'input-menu-ignore-filter-example'
---
::
@@ -760,9 +743,9 @@ name: 'input-menu-filter-example'
This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
::
### With custom search
### With filter fields
Use the `filter` prop with an array of fields to filter on. Defaults to `[labelKey]`.
Use the `filter-fields` prop with an array of fields to filter on. Defaults to `[labelKey]`.
::component-example
---

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

@@ -3,8 +3,8 @@ title: InputNumber
description: Input numerical values with a customizable range.
links:
- label: Number Field
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/number-field
icon: i-custom-reka-ui
to: https://www.reka-ui.com/components/input-number
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputNumber.vue

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

@@ -2,8 +2,8 @@
description: A dialog window that can be used to display a message or request user input.
links:
- label: Dialog
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/dialog.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/dialog
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Modal.vue

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

@@ -3,8 +3,8 @@ title: NavigationMenu
description: A list of links that can be displayed horizontally or vertically.
links:
- label: NavigationMenu
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/navigation-menu.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/navigation-menu
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/NavigationMenu.vue
@@ -249,7 +249,7 @@ external:
- items
props:
highlight: true
highlightColor: ''
highlightColor: 'primary'
orientation: 'horizontal'
items:
- - label: Guide
@@ -538,6 +538,98 @@ props:
The arrow is animated to follow the active item.
::
### Unmount
Use the `unmount-on-hide` prop to control the content unmounting behavior. Defaults to `true`.
::component-code
---
collapse: true
ignore:
- items
- arrow
- class
external:
- items
props:
unmountOnHide: false
items:
- label: Guide
icon: i-lucide-book-open
to: /getting-started
children:
- label: Introduction
description: Fully styled and customizable components for Nuxt.
icon: i-lucide-house
- label: Installation
description: Learn how to install and configure Nuxt UI in your application.
icon: i-lucide-cloud-download
- label: 'Icons'
icon: 'i-lucide-smile'
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-lucide-swatch-book'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Theme'
icon: 'i-lucide-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
- label: Composables
icon: i-lucide-database
to: /composables
children:
- label: defineShortcuts
icon: i-lucide-file-text
description: Define shortcuts for your application.
to: /composables/define-shortcuts
- label: useModal
icon: i-lucide-file-text
description: Display a modal within your application.
to: /composables/use-modal
- label: useSlideover
icon: i-lucide-file-text
description: Display a slideover within your application.
to: /composables/use-slideover
- label: useToast
icon: i-lucide-file-text
description: Display a toast within your application.
to: /composables/use-toast
- label: Components
icon: i-lucide-box
to: /components
active: true
children:
- label: Link
icon: i-lucide-file-text
description: Use NuxtLink with superpowers.
to: /components/link
- label: Modal
icon: i-lucide-file-text
description: Display a modal within your application.
to: /components/modal
- label: NavigationMenu
icon: i-lucide-file-text
description: Display a list of links.
to: /components/navigation-menu
- label: Pagination
icon: i-lucide-file-text
description: Display a list of pages.
to: /components/pagination
- label: Popover
icon: i-lucide-file-text
description: Display a non-modal dialog that floats around a trigger element.
to: /components/popover
- label: Progress
icon: i-lucide-file-text
description: Show a horizontal bar to indicate task progression.
to: /components/progress
class: 'justify-center'
---
::
::note
You can inspect the DOM to see each item's content being rendered.
::
## Examples
### Control active item
@@ -592,7 +684,7 @@ name: 'navigation-menu-content-slot-example'
::
::note
In this example, we add the `sm:w-[var(--radix-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-[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.
::
## API

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

@@ -2,8 +2,8 @@
description: A list of buttons or links to navigate through pages.
links:
- label: Pagination
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/pagination.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/pagination
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Pagination.vue

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

@@ -1,9 +1,12 @@
---
description: A non-modal dialog that floats around a trigger element.
links:
- label: HoverCard
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/hover-card
- label: Popover
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/popover.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/popover
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Popover.vue
@@ -64,7 +67,7 @@ slots:
::
::note
When using the `hover` mode, the Radix Vue [`HoverCard`](https://www.radix-vue.com/components/hover-card.html) component is used instead of the [`Popover`](https://www.radix-vue.com/components/popover.html).
When using the `hover` mode, the Reka UI [`HoverCard`](https://reka-ui.com/docs/components/hover-card) component is used instead of the [`Popover`](https://reka-ui.com/docs/components/popover).
::
### Delay

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

@@ -2,8 +2,8 @@
description: An indicator showing the progress of a task.
links:
- label: Progress
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/progress.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/progress
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Progress.vue

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

@@ -3,8 +3,8 @@ title: RadioGroup
description: A set of radio buttons to select a single option from a list.
links:
- label: RadioGroup
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/radio-group.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/radio-group
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/RadioGroup.vue

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

@@ -3,8 +3,8 @@ title: SelectMenu
description: An advanced searchable select element.
links:
- label: Combobox
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/combobox.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/combobox
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/SelectMenu.vue
@@ -15,7 +15,7 @@ links:
Use the `v-model` directive to control the value of the SelectMenu or the `default-value` prop to set the initial value when you do not need to control its state.
::tip
Use this over a [`Select`](/components/select) to take advantage of Radix Vue's [`Combobox`](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
Use this over a [`Select`](/components/select) to take advantage of Reka UI's [`Combobox`](https://reka-ui.com/docs/components/combobox) component that offers search capabilities and multiple selection.
::
::note
@@ -239,44 +239,6 @@ props:
You can set the `search-input` prop to `false` to hide the search input.
::
### Create Item
Use the `create-item` prop to allow user input.
::component-code
---
prettier: true
ignore:
- modelValue
- items
- class
external:
- items
- modelValue
items:
createItem:
- true
- 'always'
props:
modelValue: 'Backlog'
createItem: true
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-48'
---
::
::note
The create option shows when no match is found by default. Set it to `always` to show it even when similar values exist.
::
::tip{to="#emits"}
Use the `@create` event to handle the creation of the item. You will receive the event and the item as arguments.
::
### Content
Use the `content` prop to control how the SelectMenu content is rendered, like its `align` or `side` for example.
@@ -302,7 +264,7 @@ items:
- top
- bottom
props:
modelValue: Backlog
modelValue: 'Backlog'
content:
align: center
side: bottom
@@ -332,7 +294,7 @@ external:
- items
- modelValue
props:
modelValue: Backlog
modelValue: 'Backlog'
arrow: true
items:
- Backlog
@@ -769,6 +731,25 @@ name: 'select-menu-icon-example'
---
::
### With create item
Use the `create-item` prop to enable users to add custom values that aren't in the predefined options.
::component-example
---
collapse: true
name: 'select-menu-create-item-example'
---
::
::note
The create option shows when no match is found by default. Set it to `always` to show it even when similar values exist.
::
::tip{to="#emits"}
Use the `@create` event to handle the creation of the item. You will receive the event and the item as arguments.
::
### With fetched items
You can fetch items from an API and use them in the SelectMenu.
@@ -780,14 +761,14 @@ name: 'select-menu-fetch-example'
---
::
### Without internal search
### With ignore filter
Set the `filter` prop to `false` to disable the internal search and use your own search logic.
Set the `ignore-filter` prop to `true` to disable the internal search and use your own search logic.
::component-example
---
collapse: true
name: 'select-menu-filter-example'
name: 'select-menu-ignore-filter-example'
---
::
@@ -795,9 +776,9 @@ name: 'select-menu-filter-example'
This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
::
### With custom search
### With filter fields
Use the `filter` prop with an array of fields to filter on. Defaults to `[labelKey]`.
Use the `filter-fields` prop with an array of fields to filter on. Defaults to `[labelKey]`.
::component-example
---

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

@@ -2,8 +2,8 @@
description: A select element to choose from a list of options.
links:
- label: Select
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/select.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/select
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Select.vue
@@ -135,6 +135,39 @@ props:
---
::
### Multiple
Use the `multiple` prop to allow multiple selections, the selected items will be separated by a comma in the trigger.
::component-code
---
prettier: true
ignore:
- modelValue
- items
- multiple
- class
external:
- items
- modelValue
props:
modelValue:
- Backlog
- Todo
multiple: true
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-48'
---
::
::caution
Ensure to pass an array to the `default-value` prop or the `v-model` directive.
::
### Placeholder
Use the `placeholder` prop to set a placeholder text.
@@ -160,11 +193,7 @@ props:
### Content
Use the `content` prop to control how the Select content is rendered, like its `align`, `side` or `position` for example.
::warning
The `content.align`, `content.side`, etc. properties only apply when `content.position` is set to `popper`.
::
Use the `content` prop to control how the Select content is rendered, like its `align` or `side` for example.
::component-code
---
@@ -177,9 +206,6 @@ external:
- items
- modelValue
items:
content.position:
- 'item-aligned'
- 'popper'
content.align:
- start
- center
@@ -190,9 +216,8 @@ items:
- top
- bottom
props:
modelValue: 'Todo'
modelValue: 'Backlog'
content:
position: 'item-aligned'
align: center
side: bottom
sideOffset: 8
@@ -205,11 +230,6 @@ props:
---
::
::note{to="https://www.radix-vue.com/components/select.html#change-the-positioning-mode"}
Read more about the `content.position` prop in the **Radix Vue** documentation.
::
<!--
### Arrow
Use the `arrow` prop to display an arrow on the Select.
@@ -226,7 +246,7 @@ external:
- items
- modelValue
props:
modelValue: 'Todo'
modelValue: 'Backlog'
arrow: true
items:
- Backlog
@@ -237,8 +257,6 @@ props:
---
::
-->
### Color
Use the `color` prop to change the ring color when the Select is focused.

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

@@ -2,8 +2,8 @@
description: Separates content horizontally or vertically.
links:
- label: Separator
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/separator.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/separator
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Separator.vue

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

@@ -2,8 +2,8 @@
description: A dialog that slides in from any side of the screen.
links:
- label: Dialog
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/dialog.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/dialog
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Slideover.vue

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

@@ -2,8 +2,8 @@
description: An input to select a numeric value within a range.
links:
- label: Slider
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/slider.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/slider
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Slider.vue

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

@@ -2,8 +2,8 @@
description: A control that toggles between two states.
links:
- label: Switch
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/switch.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/switch
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Switch.vue

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

@@ -2,8 +2,8 @@
description: A set of tab panels that are displayed one at a time.
links:
- label: Tabs
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/tabs.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/tabs
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tabs.vue
@@ -44,9 +44,7 @@ props:
### Content
Use the `content` prop to control how the Tabs are rendered.
You can set it to `false` to prevent the Tabs from rendering any content and act as a toggle.
Set the `content` prop to `false` to turn the Tabs into a toggle-only control without displaying any content. Defaults to `true`.
::component-code
---
@@ -69,20 +67,20 @@ props:
---
::
You can also choose to only render the content of the active tab by setting `content.forceMount` to `false`.
### Unmount
Use the `unmount-on-hide` prop to prevent the content from being unmounted when the Tabs is collapsed. Defaults to `true`.
::component-code
---
prettier: true
ignore:
- content.forceMount
- content
- items
- class
external:
- items
props:
content:
forceMount: false
unmountOnHide: false
items:
- label: Account
icon: 'i-lucide-user'
@@ -95,7 +93,7 @@ props:
::
::note
You can inspect the DOM to see that the content of the inactive tab is not rendered.
You can inspect the DOM to see each item's content being rendered.
::
### Color

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

@@ -2,8 +2,8 @@
description: A succinct message to provide information or feedback to the user.
links:
- label: Toast
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/toast.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/toast
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Toast.vue
@@ -14,7 +14,7 @@ links:
Use the [useToast](/composables/use-toast) composable to display a toast in your application.
::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.
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://reka-ui.com/docs/components/toast#provider) component from Reka UI.
::
::tip{to="/components/app#props"}

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

@@ -2,8 +2,8 @@
description: A popup that reveals information when hovering over an element.
links:
- label: Tooltip
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/tooltip.html
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/tooltip
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tooltip.vue
@@ -14,7 +14,7 @@ links:
Use a [Button](/components/button) or any other component in the default slot of the Tooltip.
::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.
Make sure to wrap your app with the [`App`](/components/app) component which uses the [`TooltipProvider`](https://reka-ui.com/docs/components/tooltip#provider) component from Reka UI.
::
::tip{to="/components/app#props"}