2021-04-12 17:10:55 +02:00
|
|
|
<script>
|
2021-04-23 09:41:49 +02:00
|
|
|
import Popover from "../Popover/Popover.svelte"
|
|
|
|
import Menu from "../Menu/Menu.svelte"
|
2021-04-26 17:34:28 +02:00
|
|
|
|
|
|
|
export let supressOpen = false
|
|
|
|
|
2021-04-23 09:41:49 +02:00
|
|
|
let anchor
|
|
|
|
let dropdown
|
2021-04-12 17:10:55 +02:00
|
|
|
|
2021-04-23 09:41:49 +02:00
|
|
|
// This is needed because display: contents is considered "invisible".
|
|
|
|
// It should only ever be an action button, so should be fine.
|
|
|
|
function getAnchor(node) {
|
|
|
|
anchor = node.firstChild
|
|
|
|
}
|
|
|
|
|
|
|
|
export const hide = () => {
|
|
|
|
dropdown.hide()
|
|
|
|
}
|
|
|
|
export const show = () => {
|
|
|
|
dropdown.show()
|
|
|
|
}
|
2021-04-26 14:14:05 +02:00
|
|
|
|
|
|
|
const closeOnClickWrapper = (cb) => {
|
|
|
|
dropdown.hide()
|
|
|
|
cb()
|
|
|
|
}
|
2021-04-12 17:10:55 +02:00
|
|
|
</script>
|
|
|
|
|
2021-04-26 17:34:28 +02:00
|
|
|
<div class="contents" use:getAnchor>
|
2021-04-23 09:41:49 +02:00
|
|
|
<slot name="button" />
|
2021-04-12 17:10:55 +02:00
|
|
|
</div>
|
2021-04-21 16:03:12 +02:00
|
|
|
<Popover bind:this={dropdown} {anchor} align="left">
|
2021-04-23 09:41:49 +02:00
|
|
|
<Menu>
|
2021-04-26 14:31:32 +02:00
|
|
|
<slot open={show} closeOnClick={closeOnClickWrapper} />
|
2021-04-23 09:41:49 +02:00
|
|
|
</Menu>
|
2021-04-21 16:03:12 +02:00
|
|
|
</Popover>
|
2021-04-12 17:10:55 +02:00
|
|
|
|
|
|
|
<style>
|
2021-04-23 09:41:49 +02:00
|
|
|
div {
|
|
|
|
display: contents;
|
|
|
|
}
|
|
|
|
</style>
|