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.
60 lines
2.1 KiB
Plaintext
60 lines
2.1 KiB
Plaintext
---
|
|
import Icon from './Icon.astro'
|
|
import people from '@data/people.json'
|
|
import { firstLetters } from '@shared/lib/string-format'
|
|
|
|
interface Person {
|
|
full_name?: string
|
|
photo?: string
|
|
[key: string]: unknown
|
|
}
|
|
|
|
interface Props {
|
|
src?: string
|
|
placeholder?: string
|
|
personId?: number
|
|
person?: Person
|
|
link?: boolean
|
|
dropdown?: boolean
|
|
size?: string
|
|
thumb?: boolean
|
|
class?: string
|
|
shape?: string
|
|
color?: string
|
|
square?: boolean
|
|
status?: string
|
|
statusText?: string
|
|
statusIcon?: string
|
|
brand?: string
|
|
icon?: string
|
|
/** asset URL base — '.' for root-level pages, '..' for pages one level deep (e.g. marketing/) */
|
|
base?: string
|
|
/** remaining attributes (data-bs-toggle for tooltips, aria-*, …) are forwarded to the element */
|
|
[key: string]: unknown
|
|
}
|
|
|
|
const { src: srcProp, placeholder: placeholderProp, personId, person: personProp, link: linkProp = false, dropdown, size, thumb, class: className, shape, color, square, status, statusText, statusIcon, brand, icon, base = '.', ...rest } = Astro.props
|
|
|
|
let src = srcProp
|
|
let placeholder = placeholderProp
|
|
|
|
const person = personId ? (people as Person[])[personId - 1] : personProp
|
|
if (person) {
|
|
src = person.photo
|
|
if (!src) {
|
|
placeholder = firstLetters(person.full_name ?? '')
|
|
}
|
|
}
|
|
|
|
const link = linkProp || Boolean(dropdown)
|
|
const El = link ? 'a' : 'span'
|
|
|
|
const classes = ['avatar', size && `avatar-${size}`, thumb && 'avatar-thumb', className, shape && `avatar-${shape}`, color && `bg-${color}-lt`, square && 'avatar-square']
|
|
---
|
|
|
|
<El class:list={classes} style={src ? `background-image: url(${base}/${src})` : undefined} data-bs-toggle={dropdown ? 'dropdown' : undefined} {...rest}
|
|
>{status && <span class={`badge bg-${status}`}>{statusText ? statusText : statusIcon ? <Icon name={statusIcon} class="avatar-status-icon" /> : null}</span>}{brand && <span class="avatar-brand" style={`background-image: url(${base}/static/brands/${brand}.svg);`} />}{
|
|
src ? null : placeholder ? placeholder : icon ? <Icon name={icon} class="avatar-icon" /> : <Icon name="user" class="avatar-icon" />
|
|
}</El
|
|
>
|