Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-29 13:21:29 +04:00
Code Issues Projects Releases Wiki Activity

Render Modal as real markup; drain scripts via CaptureScript (#2742)

Browse Source 
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
Paweł Kuna
2026-08-03 00:55:32 +02:00
committed by GitHub
co-authored by StarDev
parent 66dc336726
commit 575d68572f
200 changed files with 10670 additions and 10096 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/components/modals/Modal.astro
+40 -27
View File
@@ -1,37 +1,50 @@
---
// 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'
// Modal shell markup. Wrap with <CaptureModal> at the call site to emit at the
// end of <body> (see PageModals). For inline gallery demos use ModalInline.
interface Props {
modalId?: string
size?: string
top?: boolean
scrollable?: boolean
class?: string
show?: boolean
style?: string
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 {
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(' ')
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">
<!-- BEGIN MODAL -->
<div
class={modalClass}
style={style}
id={`modal-${modalId}`}
tabindex="-1"
role="dialog"
aria-hidden={show ? 'false' : 'true'}
>
<div class={dialogClass} role="document">
<div class="modal-content">
${content}
<slot />
</div>
</div>
</div>
<!-- END MODAL -->`,
),
)
---
<!-- END MODAL -->