Justin Edmund
df3dd1abd9
- Create CloseButton.svelte with configurable size, color, strokeWidth props - Replace inline close button SVGs in 7 components - Update Modal, Lightbox, MediaDetailsModal, MediaInput, GalleryManager, AlbumSelectorModal, UnifiedMediaModal 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
66 lines
No EOL
1.1 KiB
Svelte
66 lines
No EOL
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> |