This commit encapsulates the positioning logic of the Popover component
into a reusable hook. It also improves this logic by adding more
positioning directions and functionalities.
Before:
- only 4 directions (top, bottom, right, left : all middle aligned)
- the whole window viewport serves as a direction toggler
Now:
- 12 positions are available and are composed by 4 directions and 3
variants: {top,bottom,right,left}-{start,middle,end}
- the positioned element container is configurable. Default: window
Description:
When you use this hook, you make sure that your `popper` element (the
one you would like to position) is always placed at the given `position`
from the `reference` element. If positioning it so the `popper` element
is clipped off the `container` element, sensible fallback positions are
tried. If none is fully visible without being clipped off `container`,
the original position is used.
Usage:
usePosition(
reference, // [mandatory] HTMLElement or function giving HTMLElement
options // [optional] configure behaviour through options object
)
Options:
- popper (string): a t-ref reference. If none, component.el is used
- container (HTMLElement)
- margin (number)
- position (string): {top,bottom,right,left}-{start,middle,end}
Taskid-2578926
Bruno Boi
67b1fdcd39