useFloating

Импорт

import { useFloating, floatingAvailableHeightVar, createFloatingAnchor } from '@feugene/granularity/composables/useFloating'

Экспорты

UseFloatingPlacementtype

type UseFloatingPlacement = Placement

floatingAvailableHeightVarconst

const floatingAvailableHeightVar = "--gr-floating-available-height"

Кастомное свойство, в которое слой пишет доступное место по вертикали — расстояние от панели до края вьюпорта на той стороне, куда её в итоге поставило.

GrFloatingAnchorRectinterface

interface GrFloatingAnchorRect

Прямоугольник в координатах вьюпорта — якорь, которого нет в DOM.

UseFloatingReferencetype

type UseFloatingReference = HTMLElement | VirtualElement | null

Ссылка позиционирования: элемент, виртуальный якорь или ничего.

createFloatingAnchorfunction

function createFloatingAnchor(get: () => GrFloatingAnchorRect | null | undefined, options?:

Виртуальный якорь: объект создаётся один раз, координаты читает геттер на каждом измерении.

UseFloatingOptionsinterface

interface UseFloatingOptions

UseFloatingReturninterface

interface UseFloatingReturn

useFloatingfunction

function useFloating(reference: Ref<HTMLElement | null> | (() => UseFloatingReference), floatingEl: Ref<HTMLElement | null>, open: Ref<boolean>, options?: UseFloatingOptions): UseFloatingReturn

Единый движок позиционирования floating-панелей (Dropdown/Select/TreeSelect/Tooltip) поверх `@floating-ui/dom`: flip (переворот при нехватке места), shift (клэмп к границам viewport), опциональный `size`-мидлвар для растягивания по ширине триггера.