feat(components): add new content-top and content-bottom slots (#3886)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Guillaume Chau
2025-04-23 11:02:50 +02:00
committed by GitHub
parent 9ca213bd33
commit 1a46394668
9 changed files with 36 additions and 8 deletions

View File

@@ -156,6 +156,8 @@ export interface SelectMenuSlots<
'item-leading': SlotProps<T>
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
'content-top': (props?: {}) => any
'content-bottom': (props?: {}) => any
'create-item-label'(props: { item: string }): any
}
</script>
@@ -401,6 +403,8 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
<ComboboxPortal v-bind="portalProps">
<ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
<FocusScope trapped :class="ui.focusScope({ class: props.ui?.focusScope })">
<slot name="content-top" />
<ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
<UInput autofocus autocomplete="off" v-bind="searchInputProps" :class="ui.input({ class: props.ui?.input })" />
</ComboboxInput>
@@ -463,6 +467,8 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
<ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
</ComboboxViewport>
<slot name="content-bottom" />
</FocusScope>
<ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />