mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-02-03 21:57:58 +01:00
fix(InputMenu): bind searchTerm with defineModel
This commit is contained in:
@@ -97,6 +97,8 @@ const props = withDefaults(defineProps<InputMenuProps<T>>(), {
|
|||||||
const emits = defineEmits<InputMenuEmits<T>>()
|
const emits = defineEmits<InputMenuEmits<T>>()
|
||||||
const slots = defineSlots<InputMenuSlots<T>>()
|
const slots = defineSlots<InputMenuSlots<T>>()
|
||||||
|
|
||||||
|
const searchTerm = defineModel<string>('searchTerm', { default: '' })
|
||||||
|
|
||||||
const appConfig = useAppConfig()
|
const appConfig = useAppConfig()
|
||||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen'), emits)
|
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen'), emits)
|
||||||
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
|
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
|
||||||
@@ -121,7 +123,7 @@ function displayValue(val: AcceptableValue) {
|
|||||||
return val.label
|
return val.label
|
||||||
}
|
}
|
||||||
|
|
||||||
return String(val)
|
return val && String(val)
|
||||||
}
|
}
|
||||||
|
|
||||||
function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: string): ArrayOrWrapped<AcceptableValue> {
|
function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: string): ArrayOrWrapped<AcceptableValue> {
|
||||||
@@ -165,9 +167,10 @@ onMounted(() => {
|
|||||||
<ComboboxRoot
|
<ComboboxRoot
|
||||||
:id="id"
|
:id="id"
|
||||||
v-slot="{ modelValue, open }"
|
v-slot="{ modelValue, open }"
|
||||||
|
v-bind="rootProps"
|
||||||
|
v-model:search-term="searchTerm"
|
||||||
:name="name"
|
:name="name"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
v-bind="rootProps"
|
|
||||||
:display-value="displayValue"
|
:display-value="displayValue"
|
||||||
:filter-function="filterFunction"
|
:filter-function="filterFunction"
|
||||||
:class="ui.root({ class: props.class })"
|
:class="ui.root({ class: props.class })"
|
||||||
|
|||||||
Reference in New Issue
Block a user