1
0
Fork 0
mirror of synced 2024-10-06 04:54:52 +13:00

Add configurable dropdown to popovers to allow styling without needing data-cy

This commit is contained in:
Andrew Kingston 2023-02-01 08:28:50 +00:00
parent 4e9d952b52
commit f753116af4
2 changed files with 6 additions and 4 deletions

View file

@ -1,6 +1,6 @@
export default function positionDropdown(
element,
{ anchor, align, maxWidth, useAnchorWidth }
{ anchor, align, maxWidth, useAnchorWidth, offset = 5 }
) {
const update = () => {
if (!anchor) {
@ -20,9 +20,9 @@ export default function positionDropdown(
if (align === "right-outside") {
styles.top = anchorBounds.top
} else if (window.innerHeight - anchorBounds.bottom < 100) {
styles.top = anchorBounds.top - elementBounds.height - 5
styles.top = anchorBounds.top - elementBounds.height - offset
} else {
styles.top = anchorBounds.bottom + 5
styles.top = anchorBounds.bottom + offset
styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
}
@ -36,7 +36,7 @@ export default function positionDropdown(
if (align === "right") {
styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
} else if (align === "right-outside") {
styles.left = anchorBounds.right + 10
styles.left = anchorBounds.right + offset
} else {
styles.left = anchorBounds.left
}

View file

@ -17,6 +17,7 @@
export let open = false
export let useAnchorWidth = false
export let dismissible = true
export let offset = 5
$: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
@ -65,6 +66,7 @@
align,
maxWidth,
useAnchorWidth,
offset,
}}
use:clickOutside={{
callback: dismissible ? handleOutsideClick : () => {},