63 lines
1.2 KiB
Svelte
63 lines
1.2 KiB
Svelte
|
<script>
|
||
|
|
import { contextMenuStore } from "stores/builder"
|
||
|
|
import { Popover, Menu, MenuItem } from "@budibase/bbui"
|
||
|
|
|
||
|
|
let dropdown
|
||
|
|
let anchor
|
||
|
|
|
||
|
|
const handleKeyDown = () => {
|
||
|
|
if ($contextMenuStore.visible) {
|
||
|
|
contextMenuStore.close()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleItemClick = async itemCallback => {
|
||
|
|
await itemCallback()
|
||
|
|
contextMenuStore.close()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<svelte:window on:keydown={handleKeyDown} />
|
||
|
|
{#key $contextMenuStore.position}
|
||
|
|
<div
|
||
|
|
bind:this={anchor}
|
||
|
|
class="anchor"
|
||
|
|
style:top={`${$contextMenuStore.position.y}px`}
|
||
|
|
style:left={`${$contextMenuStore.position.x}px`}
|
||
|
|
/>
|
||
|
|
{/key}
|
||
|
|
|
||
|
|
<Popover
|
||
|
|
open={$contextMenuStore.visible}
|
||
|
|
animate={false}
|
||
|
|
bind:this={dropdown}
|
||
|
|
{anchor}
|
||
|
|
resizable={false}
|
||
|
|
align="left"
|
||
|
|
on:close={contextMenuStore.close}
|
||
|
|
>
|
||
|
|
<Menu>
|
||
|
|
{#each $contextMenuStore.items as item}
|
||
|
|
{#if item.visible}
|
||
|
|
<MenuItem
|
||
|
|
icon={item.icon}
|
||
|
|
keyBind={item.keyBind}
|
||
|
|
on:click={() => handleItemClick(item.callback)}
|
||
|
|
disabled={item.disabled}
|
||
|
|
>
|
||
|
|
{item.name}
|
||
|
|
</MenuItem>
|
||
|
|
{/if}
|
||
|
|
{/each}
|
||
|
|
</Menu>
|
||
|
|
</Popover>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.anchor {
|
||
|
|
z-index: 100;
|
||
|
|
position: absolute;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
</style>
|