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

Fix Prettier formatting regression and Astro type-check errors

Browse Source 
`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.
This commit is contained in:
codecalm
2026-08-03 01:26:19 +02:00
parent 5246f0b6fd
commit f27c70ad38
166 changed files with 9678 additions and 10612 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/ui/Alert.astro
+69 -83
View File
@@ -1,95 +1,81 @@
---
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];
const classes = [
'alert',
important ? 'alert-important' : minor ? 'alert-minor' : undefined,
`alert-${type}`,
showClose && 'alert-dismissible',
avatar && 'alert-avatar',
className,
]
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 &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 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>