arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 23:11:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(App): add global portal prop (#3688)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Nathanaël Louison
2025-04-21 17:42:55 +02:00
committed by GitHub
parent 7a35baebc7
commit 29fa46276d
15 changed files with 82 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/runtime/components/SelectMenu.vue
View File

@@ -78,7 +78,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
* Render the menu in a portal.
* @defaultValue true
*/
portal?: boolean
portal?: boolean | string | HTMLElement
/**
* When `items` is an array of objects, select the field to use as the value instead of the object itself.
* @defaultValue undefined
@@ -170,6 +170,7 @@ import { useButtonGroup } from '../composables/useButtonGroup'
import { useComponentIcons } from '../composables/useComponentIcons'
import { useFormField } from '../composables/useFormField'
import { useLocale } from '../composables/useLocale'
import { usePortal } from '../composables/usePortal'
import { compare, get, isArrayOfArray } from '../utils'
import { tv } from '../utils/tv'
import UIcon from './Icon.vue'
@@ -196,6 +197,7 @@ const appConfig = useAppConfig() as SelectMenu['AppConfig']
const { contains } = useFilter({ sensitivity: 'base' })
const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'resetSearchTermOnSelect', 'highlightOnHover'), emits)
const portalProps = usePortal(toRef(() => props.portal))
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t('selectMenu.search'), variant: 'none' }) as InputProps)
@@ -396,7 +398,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
</ComboboxTrigger>
</ComboboxAnchor>
<ComboboxPortal :disabled="!portal">
<ComboboxPortal v-bind="portalProps">
<ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
<FocusScope trapped :class="ui.focusScope({ class: props.ui?.focusScope })">
<ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>