fix(InputMenu/SelectMenu): init filter with labelKey

This commit is contained in:
Benjamin Canac
2024-11-11 00:28:43 +01:00
parent bbc6bf2455
commit 18931acdb3
8 changed files with 16 additions and 15 deletions

View File

@@ -19,7 +19,6 @@ function onOpen() {
:items="countries || []"
:loading="status === 'pending'"
label-key="name"
:filter="['name']"
:search-input="{ icon: 'i-lucide-search' }"
placeholder="Select country"
class="w-48"

View File

@@ -16,7 +16,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<UInputMenu
:items="users || []"
:loading="status === 'pending'"
:filter="['name', 'email']"
:filter="['label', 'email']"
icon="i-lucide-user"
placeholder="Select user"
class="w-80"

View File

@@ -4,7 +4,8 @@ const { data: countries, status, execute } = await useLazyFetch<{
code: string
emoji: string
}[]>('/api/countries.json', {
immediate: false
immediate: false,
default: () => []
})
function onOpen() {
@@ -16,10 +17,9 @@ function onOpen() {
<template>
<USelectMenu
:items="countries || []"
:items="countries"
:loading="status === 'pending'"
label-key="name"
:filter="['name']"
:search-input="{ icon: 'i-lucide-search' }"
placeholder="Select country"
class="w-48"

View File

@@ -16,7 +16,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<USelectMenu
:items="users || []"
:loading="status === 'pending'"
:filter="['name', 'email']"
:filter="['label', 'email']"
icon="i-lucide-user"
placeholder="Select user"
class="w-80"

View File

@@ -694,7 +694,7 @@ This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebo
### With custom search
Use the `filter` prop with an array of fields to filter on.
Use the `filter` prop with an array of fields to filter on. Defaults to `[labelKey]`.
::component-example
---

View File

@@ -731,7 +731,7 @@ This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebo
### With custom search
Use the `filter` prop with an array of fields to filter on.
Use the `filter` prop with an array of fields to filter on. Defaults to `[labelKey]`.
::component-example
---

View File

@@ -78,9 +78,10 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
*/
portal?: boolean
/**
* Whether to filter items or not, can be an array of fields to filter.
* When `false`, items will not be filtered which is useful for custom filtering.
* @defaultValue ['label']
* Whether to filter items or not, can be an array of fields to filter. Defaults to `[labelKey]`.
* When `false`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
* `['label']`{lang="ts-type"}
* @defaultValue true
*/
filter?: boolean | string[]
/**
@@ -149,7 +150,7 @@ const props = withDefaults(defineProps<InputMenuProps<T, I, V, M>>(), {
type: 'text',
autofocusDelay: 0,
portal: true,
filter: () => ['label'],
filter: true,
labelKey: 'label' as never
})
const emits = defineEmits<InputMenuEmits<T, V, M>>()

View File

@@ -70,9 +70,10 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
*/
portal?: boolean
/**
* Whether to filter items or not, can be an array of fields to filter.
* Whether to filter items or not, can be an array of fields to filter. Defaults to `[labelKey]`.
* When `false`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
* @defaultValue ['label']
* `['label']`{lang="ts-type"}
* @defaultValue true
*/
filter?: boolean | string[]
/**
@@ -139,7 +140,7 @@ const props = withDefaults(defineProps<SelectMenuProps<T, I, V, M>>(), {
portal: true,
autofocusDelay: 0,
searchInput: true,
filter: () => ['label'],
filter: true,
labelKey: 'label' as never
})