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/ui/Alert.astro
+83 -69
View File
@@ -1,81 +1,95 @@
---
import Icon from './Icon.astro'
import ButtonList from './ButtonList.astro'
import Icon from './Icon.astro';
import ButtonList from './ButtonList.astro';
interface Props {
type?: string
icon?: string
important?: boolean
minor?: boolean
showClose?: boolean
avatar?: boolean
class?: string
title?: string
description?: string
list?: string[]
action?: string
link?: string
buttons?: boolean
type?: string;
icon?: string;
important?: boolean;
minor?: boolean;
showClose?: boolean;
avatar?: boolean;
class?: string;
title?: string;
description?: string;
list?: string[];
action?: string;
link?: string;
buttons?: boolean;
}
const { type = 'success', icon: iconProp, important, minor, showClose, avatar, class: className, title = 'This is a custom alert box!', description, list, action, link, buttons } = Astro.props
const {
type = 'success',
icon: iconProp,
important,
minor,
showClose,
avatar,
class: className,
title = 'This is a custom alert box!',
description,
list,
action,
link,
buttons,
} = Astro.props;
const defaultIcons: Record<string, string> = {
success: 'check',
warning: 'alert-triangle',
danger: 'alert-circle',
info: 'info-circle',
}
const icon = iconProp ?? defaultIcons[type]
success: 'check',
warning: 'alert-triangle',
danger: 'alert-circle',
info: 'info-circle',
};
const icon = iconProp ?? defaultIcons[type];
const classes = [
'alert',
important ? 'alert-important' : minor ? 'alert-minor' : undefined,
`alert-${type}`,
showClose && 'alert-dismissible',
avatar && 'alert-avatar',
className,
]
const classes = ['alert', important ? 'alert-important' : minor ? 'alert-minor' : undefined, `alert-${type}`, showClose && 'alert-dismissible', avatar && 'alert-avatar', className]
---
<div class:list={classes} role="alert">
<div class="alert-icon">{icon && <Icon name={icon} class="alert-icon" />}</div>
{
description || list ? (
<div>
{/* Liquid doesn't escape {{ include.title }} — set:html preserves entities like &hellip; */}
<h4 class="alert-heading" set:html={title} />
<div class="alert-description">
<Fragment set:html={description ?? ''} />
{list && list.length > 0 && (
<ul class="alert-list">
{list.map((item) => (
<li>{item}</li>
))}
</ul>
)}
</div>
</div>
) : (
<Fragment>
<Fragment set:html={title} />
{/* prettier-ignore — anchor on one line as in Liquid (whitespace ends up in the code panel) */}
{action ? (
<a href="#" class="alert-action">
{action}
</a>
) : link ? (
<a href="#" class="alert-link">
{link}
</a>
) : null}
</Fragment>
)
}
{
buttons && (
<ButtonList>
<a href="#" class={`btn btn-${type}`}>
Okay
</a>
<a href="#" class="btn">
Cancel
</a>
</ButtonList>
)
}
{showClose && <a class="btn-close" data-bs-dismiss="alert" aria-label="close" />}
<div class="alert-icon">{icon && <Icon name={icon} class="alert-icon" />}</div>
{
description || list ? (
<div>
{/* set:html preserves entities like &hellip; in the title */}
<h4 class="alert-heading" set:html={title} />
<div class="alert-description">
<Fragment set:html={description ?? ''} />
{list && list.length > 0 && (
<ul class="alert-list">
{list.map((item) => (
<li>{item}</li>
))}
</ul>
)}
</div>
</div>
) : (
<Fragment>
<Fragment set:html={title} />
{/* prettier-ignore — anchor on one line (whitespace ends up in the code panel) */}
{action ? (
<a href="#" class="alert-action">{action}</a>
) : link ? (
<a href="#" class="alert-link">{link}</a>
) : null}
</Fragment>
)
}
{
buttons && (
<ButtonList>
<a href="#" class={`btn btn-${type}`}>Okay</a>
<a href="#" class="btn">Cancel</a>
</ButtonList>
)
}
{showClose && <a class="btn-close" data-bs-dismiss="alert" aria-label="close" />}
</div>