fix(components): specify collisionPadding to all menus

This commit is contained in:
Benjamin Canac
2024-11-29 16:39:35 +01:00
parent 1240a3b604
commit 148b02464d
6 changed files with 12 additions and 12 deletions

View File

@@ -52,7 +52,7 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
loadingIcon?: string
/**
* The content of the menu.
* @defaultValue { side: 'bottom', sideOffset: 8 }
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
*/
content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
/**
@@ -154,7 +154,7 @@ const emits = defineEmits<DropdownMenuEmits>()
const slots = defineSlots<DropdownMenuSlots<T>>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'modal'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as DropdownMenuContentProps)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as DropdownMenuContentProps)
const arrowProps = toRef(() => props.arrow as DropdownMenuArrowProps)
const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuSlots<T>[string]>

View File

@@ -64,7 +64,7 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
deleteIcon?: string
/**
* The content of the menu.
* @defaultValue { side: 'bottom', sideOffset: 8, position: 'popper' }
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
*/
content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
/**
@@ -168,7 +168,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
const appConfig = useAppConfig()
const { t } = useLocale()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), 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, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)

View File

@@ -18,7 +18,7 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
mode?: 'click' | 'hover'
/**
* The content of the popover.
* @defaultValue { side: 'bottom', sideOffset: 8 }
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
*/
content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'>
/**
@@ -68,7 +68,7 @@ const slots = defineSlots<PopoverSlots>()
const pick = props.mode === 'hover' ? reactivePick(props, 'defaultOpen', 'open', 'openDelay', 'closeDelay') : reactivePick(props, 'defaultOpen', 'open', 'modal')
const rootProps = useForwardPropsEmits(pick, emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as PopoverContentProps)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as PopoverContentProps)
const contentEvents = computed(() => {
if (props.preventClose) {
return {

View File

@@ -48,7 +48,7 @@ export interface SelectProps<T extends MaybeArrayOfArrayItem<I>, I extends Maybe
selectedIcon?: string
/**
* The content of the menu.
* @defaultValue { side: 'bottom', sideOffset: 8, position: 'popper' }
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
*/
content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'>
/**
@@ -124,7 +124,7 @@ const slots = defineSlots<SelectSlots<T>>()
const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as SelectContentProps)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as SelectContentProps)
const arrowProps = toRef(() => props.arrow as SelectArrowProps)
const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)

View File

@@ -56,7 +56,7 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
selectedIcon?: string
/**
* The content of the menu.
* @defaultValue { side: 'bottom', sideOffset: 8, position: 'popper' }
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
*/
content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
/**
@@ -161,7 +161,7 @@ const appConfig = useAppConfig()
const { t } = useLocale()
const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), 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, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: 'Search...', variant: 'none' }) as InputProps)

View File

@@ -18,7 +18,7 @@ export interface TooltipProps extends TooltipRootProps {
kbds?: KbdProps['value'][] | KbdProps[]
/**
* The content of the tooltip.
* @defaultValue { side: 'bottom', sideOffset: 8 }
* @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
*/
content?: Omit<TooltipContentProps, 'as' | 'asChild'>
/**
@@ -59,7 +59,7 @@ const emits = defineEmits<TooltipEmits>()
const slots = defineSlots<TooltipSlots>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration', 'disableHoverableContent', 'disableClosingTrigger', 'disabled', 'ignoreNonKeyboardFocus'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as TooltipContentProps)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as TooltipContentProps)
const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
// eslint-disable-next-line vue/no-dupe-keys