Justin Edmund
1c38dc87e3
- Added menuNode state to capture the node position when menu opens - Updated all action functions to use menuNode instead of currentNode - This ensures drag handle actions (Turn into, Delete, etc.) always affect the block where the handle was clicked, not where the mouse currently hovers - Also formatted code with prettier 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
1.1 KiB
Svelte
60 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import BaseModal from './BaseModal.svelte'
|
|
import Button from './Button.svelte'
|
|
import CloseButton from '$components/icons/CloseButton.svelte'
|
|
|
|
interface Props {
|
|
isOpen: boolean
|
|
size?: 'small' | 'medium' | 'large' | 'jumbo' | 'full'
|
|
closeOnBackdrop?: boolean
|
|
closeOnEscape?: boolean
|
|
showCloseButton?: boolean
|
|
onClose?: () => void
|
|
}
|
|
|
|
let {
|
|
isOpen = $bindable(),
|
|
size = 'medium',
|
|
closeOnBackdrop = true,
|
|
closeOnEscape = true,
|
|
showCloseButton = true,
|
|
onClose
|
|
}: Props = $props()
|
|
|
|
function handleClose() {
|
|
isOpen = false
|
|
onClose?.()
|
|
}
|
|
</script>
|
|
|
|
<BaseModal bind:isOpen {size} {closeOnBackdrop} {closeOnEscape} {onClose}>
|
|
{#if showCloseButton}
|
|
<Button
|
|
variant="ghost"
|
|
iconOnly
|
|
onclick={handleClose}
|
|
aria-label="Close modal"
|
|
class="close-button"
|
|
>
|
|
<CloseButton slot="icon" />
|
|
</Button>
|
|
{/if}
|
|
|
|
<div class="modal-content">
|
|
<slot />
|
|
</div>
|
|
</BaseModal>
|
|
|
|
<style lang="scss">
|
|
:global(.close-button) {
|
|
position: absolute !important;
|
|
top: $unit-2x;
|
|
right: $unit-2x;
|
|
z-index: $z-index-base;
|
|
}
|
|
|
|
.modal-content {
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
</style>
|