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

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

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
---