mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-20 06:51:46 +01:00
feat(module)!: migrate to reka-ui (#2448)
This commit is contained in:
Benjamin Canac
GitHub
@@ -84,7 +84,7 @@ provide('navigation', mappedNavigation)
|
||||
<NuxtLoadingIndicator color="#FFF" />
|
||||
|
||||
<template v-if="!route.path.startsWith('/examples')">
|
||||
<Banner />
|
||||
<!-- <Banner /> -->
|
||||
|
||||
<Header :links="links" />
|
||||
</template>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
@@ -7,7 +7,7 @@ const { frameworks } = useSharedData()
|
||||
v-slot="{ open }"
|
||||
:modal="false"
|
||||
:items="frameworks"
|
||||
:ui="{ content: 'w-(--radix-dropdown-menu-trigger-width)' }"
|
||||
:ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)' }"
|
||||
>
|
||||
<UButton
|
||||
color="neutral"
|
||||
|
||||
@@ -30,7 +30,7 @@ defineShortcuts({
|
||||
v-slot="{ open }"
|
||||
:modal="false"
|
||||
:items="[{ label: `v${config.version}`, active: true, color: 'primary', checked: true, type: 'checkbox' }, { label: 'v2.19', to: 'https://ui.nuxt.com' }]"
|
||||
:ui="{ content: 'w-(--radix-dropdown-menu-trigger-width) min-w-0' }"
|
||||
:ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
|
||||
size="xs"
|
||||
>
|
||||
<UButton
|
||||
|
||||
@@ -280,7 +280,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
|
||||
container: 'mt-0'
|
||||
}"
|
||||
>
|
||||
<USelectMenu
|
||||
<USelect
|
||||
v-if="option.items?.length"
|
||||
:model-value="getComponentProp(option.name)"
|
||||
:items="option.items"
|
||||
@@ -288,7 +288,6 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
class="rounded-[var(--ui-radius)] rounded-l-none min-w-12"
|
||||
:search-input="false"
|
||||
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
|
||||
:ui="{ itemLeadingChip: 'size-2' }"
|
||||
@update:model-value="setComponentProp(option.name, $event)"
|
||||
@@ -303,7 +302,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
|
||||
class="size-2"
|
||||
/>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</USelect>
|
||||
<UInput
|
||||
v-else
|
||||
:type="option.type?.includes('number') ? 'number' : 'text'"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Slot } from 'radix-vue'
|
||||
import { Slot } from 'reka-ui'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { CalendarDate } from '@internationalized/date'
|
||||
import type { Matcher } from 'radix-vue/date'
|
||||
import type { Matcher } from 'reka-ui/date'
|
||||
|
||||
const modelValue = shallowRef({
|
||||
start: new CalendarDate(2022, 1, 1),
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { CalendarDate } from '@internationalized/date'
|
||||
import type { Matcher } from 'radix-vue/date'
|
||||
import type { Matcher } from 'reka-ui/date'
|
||||
|
||||
const modelValue = shallowRef({
|
||||
start: new CalendarDate(2022, 1, 1),
|
||||
|
||||
@@ -14,7 +14,7 @@ const groups = computed(() => [{
|
||||
id: 'users',
|
||||
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
|
||||
items: users.value || [],
|
||||
filter: false
|
||||
ignoreFilter: true
|
||||
}])
|
||||
</script>
|
||||
|
||||
@@ -11,8 +11,8 @@ const items = [
|
||||
level: 2
|
||||
},
|
||||
{
|
||||
id: '/getting-started#radix-vue-3',
|
||||
label: 'Radix Vue',
|
||||
id: '/getting-started#reka-ui-radix-vue',
|
||||
label: 'Reka UI',
|
||||
level: 3
|
||||
},
|
||||
{
|
||||
|
||||
@@ -72,7 +72,7 @@ const users = [
|
||||
}
|
||||
]
|
||||
|
||||
const searchTerm = ref('')
|
||||
const searchTerm = ref('B')
|
||||
|
||||
function onSelect() {
|
||||
searchTerm.value = ''
|
||||
|
||||
@@ -13,7 +13,7 @@ const groups = computed(() => [{
|
||||
id: 'users',
|
||||
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
|
||||
items: users.value || [],
|
||||
filter: false
|
||||
ignoreFilter: true
|
||||
}])
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
|
||||
const value = ref('Backlog')
|
||||
|
||||
function onCreate(item: string) {
|
||||
items.value.push(item)
|
||||
|
||||
value.value = item
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UInputMenu
|
||||
v-model="value"
|
||||
create-item
|
||||
:items="items"
|
||||
class="w-48"
|
||||
@create="onCreate"
|
||||
/>
|
||||
</template>
|
||||
@@ -16,7 +16,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
|
||||
<UInputMenu
|
||||
:items="users || []"
|
||||
:loading="status === 'pending'"
|
||||
:filter="['label', 'email']"
|
||||
:filter-fields="['label', 'email']"
|
||||
icon="i-lucide-user"
|
||||
placeholder="Select user"
|
||||
class="w-80"
|
||||
|
||||
@@ -20,7 +20,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
|
||||
v-model:search-term="searchTerm"
|
||||
:items="users || []"
|
||||
:loading="status === 'pending'"
|
||||
:filter="false"
|
||||
ignore-filter
|
||||
icon="i-lucide-user"
|
||||
placeholder="Select user"
|
||||
>
|
||||
@@ -13,7 +13,7 @@ const groups = computed(() => [{
|
||||
id: 'users',
|
||||
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
|
||||
items: users.value || [],
|
||||
filter: false
|
||||
ignoreFilter: true
|
||||
}])
|
||||
</script>
|
||||
|
||||
|
||||
@@ -61,7 +61,7 @@ const items = [
|
||||
:items="items"
|
||||
class="justify-center"
|
||||
:ui="{
|
||||
viewport: 'sm:w-[var(--radix-navigation-menu-viewport-width)]',
|
||||
viewport: 'sm:w-[var(--reka-navigation-menu-viewport-width)]',
|
||||
childList: 'sm:w-96',
|
||||
childLinkDescription: 'text-balance line-clamp-2'
|
||||
}"
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
|
||||
const value = ref('Backlog')
|
||||
|
||||
function onCreate(item: string) {
|
||||
items.value.push(item)
|
||||
|
||||
value.value = item
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelectMenu
|
||||
v-model="value"
|
||||
create-item
|
||||
:items="items"
|
||||
class="w-48"
|
||||
@create="onCreate"
|
||||
/>
|
||||
</template>
|
||||
@@ -16,7 +16,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
|
||||
<USelectMenu
|
||||
:items="users || []"
|
||||
:loading="status === 'pending'"
|
||||
:filter="['label', 'email']"
|
||||
:filter-fields="['label', 'email']"
|
||||
icon="i-lucide-user"
|
||||
placeholder="Select user"
|
||||
class="w-80"
|
||||
|
||||
@@ -20,7 +20,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
|
||||
v-model:search-term="searchTerm"
|
||||
:items="users || []"
|
||||
:loading="status === 'pending'"
|
||||
:filter="false"
|
||||
ignore-filter
|
||||
icon="i-lucide-user"
|
||||
placeholder="Select user"
|
||||
class="w-48"
|
||||
@@ -26,7 +26,7 @@ function getUserAvatar(value: string) {
|
||||
<template #leading="{ modelValue, ui }">
|
||||
<UAvatar
|
||||
v-if="modelValue"
|
||||
v-bind="getUserAvatar(modelValue)"
|
||||
v-bind="getUserAvatar(modelValue as string)"
|
||||
:size="ui.leadingAvatarSize()"
|
||||
:class="ui.leadingAvatar()"
|
||||
/>
|
||||
|
||||
@@ -34,7 +34,7 @@ function getChip(value: string) {
|
||||
<template #leading="{ modelValue, ui }">
|
||||
<UChip
|
||||
v-if="modelValue"
|
||||
v-bind="getChip(modelValue)"
|
||||
v-bind="getChip(modelValue as string)"
|
||||
inset
|
||||
standalone
|
||||
:size="ui.itemLeadingChipSize()"
|
||||
|
||||
@@ -143,14 +143,13 @@ const data = ref<Payment[]>([{
|
||||
const columns: TableColumn<Payment>[] = [{
|
||||
id: 'select',
|
||||
header: ({ table }) => h(UCheckbox, {
|
||||
'modelValue': table.getIsAllPageRowsSelected(),
|
||||
'indeterminate': table.getIsSomePageRowsSelected(),
|
||||
'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
|
||||
'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
|
||||
'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
|
||||
'ariaLabel': 'Select all'
|
||||
}),
|
||||
cell: ({ row }) => h(UCheckbox, {
|
||||
'modelValue': row.getIsSelected(),
|
||||
'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
|
||||
'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
|
||||
'ariaLabel': 'Select row'
|
||||
}),
|
||||
enableSorting: false,
|
||||
|
||||
@@ -48,14 +48,13 @@ const data = ref<Payment[]>([{
|
||||
const columns: TableColumn<Payment>[] = [{
|
||||
id: 'select',
|
||||
header: ({ table }) => h(UCheckbox, {
|
||||
'modelValue': table.getIsAllPageRowsSelected(),
|
||||
'indeterminate': table.getIsSomePageRowsSelected(),
|
||||
'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
|
||||
'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
|
||||
'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
|
||||
'ariaLabel': 'Select all'
|
||||
}),
|
||||
cell: ({ row }) => h(UCheckbox, {
|
||||
'modelValue': row.getIsSelected(),
|
||||
'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
|
||||
'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
|
||||
'ariaLabel': 'Select row'
|
||||
})
|
||||
}, {
|
||||
|
||||
@@ -91,7 +91,7 @@ provide('navigation', mappedNavigation)
|
||||
<UApp>
|
||||
<NuxtLoadingIndicator color="#FFF" />
|
||||
|
||||
<Banner />
|
||||
<!-- <Banner /> -->
|
||||
|
||||
<Header :links="links" />
|
||||
|
||||
|
||||
@@ -8,12 +8,12 @@ We're thrilled to introduce this major update to our UI library, bringing signif
|
||||
|
||||
## What's New in v3?
|
||||
|
||||
### Radix Vue
|
||||
### Reka UI (Radix Vue)
|
||||
|
||||
We've transitioned from [Headless UI](https://headlessui.com/) to [Radix Vue](https://www.radix-vue.com/) as our core component foundation. This shift brings several key advantages:
|
||||
We've transitioned from [Headless UI](https://headlessui.com/) to [Reka UI](https://reka-ui.com/) as our core component foundation. This shift brings several key advantages:
|
||||
|
||||
- **Extensive Component Library**: With 55+ primitives, Radix Vue significantly expands our component offerings.
|
||||
- **Active Development**: Radix Vue's growing popularity ensures ongoing improvements and updates.
|
||||
- **Extensive Component Library**: With 55+ primitives, Reka UI significantly expands our component offerings.
|
||||
- **Active Development**: Reka UI's growing popularity ensures ongoing improvements and updates.
|
||||
- **Enhanced Accessibility**: Built-in accessibility features align with our commitment to inclusive design.
|
||||
- **Vue 3 Optimization**: Seamless integration with Vue 3 and the Composition API.
|
||||
|
||||
@@ -103,7 +103,7 @@ Key points to consider:
|
||||
::
|
||||
|
||||
::accordion-item{label="How does Nuxt UI v3 handle accessibility?"}
|
||||
Nuxt UI v3 enhances accessibility through Radix Vue integration. This provides automatic ARIA attributes, keyboard navigation support, intelligent focus management, and screen reader announcements. While offering a strong foundation, proper implementation and testing in your specific use case remains crucial for full accessibility compliance. For more detailed information, refer to [Radix Vue's accessibility documentation](https://www.radix-vue.com/overview/accessibility.html).
|
||||
Nuxt UI v3 enhances accessibility through Reka UI integration. This provides automatic ARIA attributes, keyboard navigation support, intelligent focus management, and screen reader announcements. While offering a strong foundation, proper implementation and testing in your specific use case remains crucial for full accessibility compliance. For more detailed information, refer to [Reka UI's accessibility documentation](https://reka-ui.com/docs/overview/accessibility).
|
||||
::
|
||||
|
||||
::accordion-item{label="What is the testing approach for Nuxt UI v3?"}
|
||||
|
||||
@@ -18,7 +18,7 @@ const toast = useToast()
|
||||
- When removing a toast, there's a 200ms delay before it's actually removed from the state, allowing for exit animations.
|
||||
|
||||
::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/toast"}
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"}
|
||||
|
||||
@@ -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"}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"@nuxt/content": "https://pkg.pr.new/@nuxt/content@c5b1a4f",
|
||||
"@nuxt/image": "^1.8.1",
|
||||
"@nuxt/ui": "latest",
|
||||
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@3cbc7f0",
|
||||
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@4fc0904",
|
||||
"@nuxthub/core": "^0.8.7",
|
||||
"@nuxtjs/plausible": "^1.2.0",
|
||||
"@octokit/rest": "^21.0.2",
|
||||
|
||||
Reference in New Issue
Block a user