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

fix(InputMenu/SelectMenu): invalid label with value-attribute and async search

Browse Source 
Resolves #1780
This commit is contained in:
Benjamin Canac
2024-06-19 12:19:12 +02:00
parent 6b6b03d59f
commit 4d5f250902
2 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/runtime/components/forms/InputMenu.vue
View File

@@ -309,7 +309,7 @@ export default defineComponent({
} }
if (props.valueAttribute) { if (props.valueAttribute) {
const option = props.options.find(option => option[props.valueAttribute] === props.modelValue) const option = options.value.find(option => option[props.valueAttribute] === props.modelValue)
return option ? option[props.optionAttribute] : null return option ? option[props.optionAttribute] : null
} else { } else {
return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute] return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute]
@@ -391,16 +391,22 @@ export default defineComponent({
const debouncedSearch = props.search && typeof props.search === 'function' ? useDebounceFn(props.search, props.debounce) : undefined const debouncedSearch = props.search && typeof props.search === 'function' ? useDebounceFn(props.search, props.debounce) : undefined
const filteredOptions = computedAsync(async () => { const options = computedAsync(async () => {
if (debouncedSearch) { if (props.search && debouncedSearch) {
return await debouncedSearch(query.value) return await debouncedSearch(query.value)
} }
if (query.value === '') { return props.options || []
return props.options }, [], {
lazy: props.searchLazy
})
const filteredOptions = computed(() => {
if (!query.value) {
return options.value
} }
return (props.options as any[]).filter((option: any) => { return options.value.filter((option: any) => {
return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute: any) => { return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute: any) => {
if (['string', 'number'].includes(typeof option)) { if (['string', 'number'].includes(typeof option)) {
return String(option).search(new RegExp(query.value, 'i')) !== -1 return String(option).search(new RegExp(query.value, 'i')) !== -1
@@ -411,8 +417,6 @@ export default defineComponent({
return child !== null && child !== undefined && String(child).search(new RegExp(query.value, 'i')) !== -1 return child !== null && child !== undefined && String(child).search(new RegExp(query.value, 'i')) !== -1
}) })
}) })
}, [], {
lazy: props.searchLazy
}) })
watch(container, (value) => { watch(container, (value) => {

20
src/runtime/components/forms/SelectMenu.vue
View File

@@ -368,7 +368,7 @@ export default defineComponent({
} }
} else if (props.modelValue !== undefined && props.modelValue !== null) { } else if (props.modelValue !== undefined && props.modelValue !== null) {
if (props.valueAttribute) { if (props.valueAttribute) {
const option = props.options.find(option => option[props.valueAttribute] === props.modelValue) const option = options.value.find(option => option[props.valueAttribute] === props.modelValue)
return option ? option[props.optionAttribute] : null return option ? option[props.optionAttribute] : null
} else { } else {
return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute] return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute]
@@ -452,18 +452,24 @@ export default defineComponent({
) )
}) })
const debouncedSearch = typeof props.searchable === 'function' ? useDebounceFn(props.searchable, props.debounce) : undefined const debouncedSearch = props.searchable && typeof props.searchable === 'function' ? useDebounceFn(props.searchable, props.debounce) : undefined
const filteredOptions = computedAsync(async () => { const options = computedAsync(async () => {
if (props.searchable && debouncedSearch) { if (props.searchable && debouncedSearch) {
return await debouncedSearch(query.value) return await debouncedSearch(query.value)
} }
if (query.value === '') { return props.options || []
return props.options }, [], {
lazy: props.searchableLazy
})
const filteredOptions = computed(() => {
if (!query.value) {
return options.value
} }
return (props.options as any[]).filter((option: any) => { return options.value.filter((option: any) => {
return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute: any) => { return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute: any) => {
if (['string', 'number'].includes(typeof option)) { if (['string', 'number'].includes(typeof option)) {
return String(option).search(new RegExp(query.value, 'i')) !== -1 return String(option).search(new RegExp(query.value, 'i')) !== -1
@@ -474,8 +480,6 @@ export default defineComponent({
return child !== null && child !== undefined && String(child).search(new RegExp(query.value, 'i')) !== -1 return child !== null && child !== undefined && String(child).search(new RegExp(query.value, 'i')) !== -1
}) })
}) })
}, [], {
lazy: props.searchableLazy
}) })
const createOption = computed(() => { const createOption = computed(() => {