Files
tabler/shared/components/modals/Modal.astro
T

38 lines
1.2 KiB
Plaintext

---
// registers the modal in page-modals, and BaseLayout emits it at the end of <body>
// (like {% modals %}).
// NOTE: registration must be synchronous (a promise, not an awaited string) —
// see the comment in src/lib/page-modals.ts.
import { addPageModal } from '@shared/lib/page-modals'
interface Props {
modalId?: string
size?: string
top?: boolean
scrollable?: boolean
class?: string
show?: boolean
style?: string
}
const { modalId = 'simple', size, top, scrollable, class: className, show, style } = Astro.props
const modalClass = ['modal modal-blur fade', className, show && 'show'].filter(Boolean).join(' ')
const dialogClass = ['modal-dialog', size && `modal-${size}`, !top && 'modal-dialog-centered', scrollable && 'modal-dialog-scrollable'].filter(Boolean).join(' ')
addPageModal(
Astro.slots.render('default').then(
(content) =>
`<!-- BEGIN MODAL -->
<div class="${modalClass}"${style ? ` style="${style}"` : ''} id="modal-${modalId}" tabindex="-1" role="dialog" aria-hidden="${show ? 'false' : 'true'}">
<div class="${dialogClass}" role="document">
<div class="modal-content">
${content}
</div>
</div>
</div>
<!-- END MODAL -->`,
),
)
---