mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 03:42:27 +04:00
codecalm
f27c70ad38
`Render Modal as real markup` (#2742) reformatted ~140 files back to tabs/semicolons, breaking the Prettier config added by the Astro quality gates (#2749). Re-run prettier --write to restore it, and fix the type errors it had been masking: HTMLElement casts and `this` typing in ChangePasswordModalContent/ConfirmDeleteModalContent scripts, plain-JS syntax in the inline-injected progress.astro script, narrowed prop unions in Button/Check/Spinner, nullable icon svg casts in Icons/Rating, and a duplicate firstLetters/invalid `placeholder` attribute in Select.astro. Also fix shared/vitest.config.mts's stale `astro/lib/**/*.test.ts` include glob left over from the shared source restructure, which made `pnpm test` report zero test files.
82 lines
2.2 KiB
Plaintext
82 lines
2.2 KiB
Plaintext
---
|
|
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
|
|
}
|
|
|
|
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]
|
|
|
|
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>
|
|
{/* set:html preserves entities like … 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>
|