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.
47 lines
1.4 KiB
Plaintext
47 lines
1.4 KiB
Plaintext
---
|
|
import Icon from './Icon.astro'
|
|
import Button from './Button.astro'
|
|
import Illustration from './Illustration.astro'
|
|
|
|
interface Props {
|
|
icon?: string
|
|
height?: number | string
|
|
bordered?: boolean
|
|
class?: string
|
|
/** illustration file name, e.g. "computer-fix.svg" */
|
|
illustration?: string
|
|
/** icon-text param — big text rendered instead of an icon/illustration */
|
|
iconText?: string
|
|
title?: string
|
|
subtitle?: string
|
|
buttonText?: string
|
|
buttonIcon?: string
|
|
}
|
|
|
|
const { icon = 'mood-sad', height = 256, bordered, class: className, illustration, iconText, title = 'No results found', subtitle = "Try adjusting your search or filter to find what you're looking for.", buttonText = 'Search again', buttonIcon = 'search' } = Astro.props
|
|
|
|
const classes = ['empty', bordered && 'empty-bordered', className]
|
|
---
|
|
|
|
<div class:list={classes}>
|
|
{
|
|
illustration ? (
|
|
<div class="empty-img">
|
|
<Illustration image={illustration} height={height} />
|
|
</div>
|
|
) : iconText ? (
|
|
<div class="empty-header" set:html={iconText} />
|
|
) : (
|
|
<div class="empty-icon">
|
|
<Icon name={icon} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<p class="empty-title" set:html={title} />
|
|
<p class="empty-subtitle text-secondary" set:html={subtitle} />
|
|
<div class="empty-action">
|
|
<Button text={buttonText} color="primary" icon={buttonIcon} href="." />
|
|
</div>
|
|
</div>
|