mirror of
https://github.com/tabler/tabler.git
synced 2026-08-08 04:12:26 +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.
67 lines
2.5 KiB
Plaintext
67 lines
2.5 KiB
Plaintext
---
|
|
// Example code from the `html` prop or the rendered slot; copy button uses data-clipboard-text.
|
|
import Icon from '@ui/Icon.astro'
|
|
import { beautifyHtml, highlightCode, removeHref } from '@shared/lib/code-example'
|
|
|
|
interface Props {
|
|
/** raw HTML of the example; when absent — the slot is rendered */
|
|
html?: string
|
|
/** code shown in the panel instead of html */
|
|
code?: string
|
|
raw?: boolean
|
|
overflow?: string
|
|
bg?: string
|
|
class?: string
|
|
height?: string
|
|
column?: boolean
|
|
centered?: boolean
|
|
vertical?: boolean
|
|
columnFullWidth?: boolean
|
|
hideCode?: boolean
|
|
codeOnly?: boolean
|
|
}
|
|
|
|
const { html: htmlProp, code, raw, overflow = 'auto', bg, class: className, height, column, centered, vertical, columnFullWidth, hideCode, codeOnly } = Astro.props
|
|
|
|
// Strip empty lines from the example HTML.
|
|
let html = (htmlProp ?? (await Astro.slots.render('default'))).replace(/^\s*[\r\n]/gm, '')
|
|
|
|
// JSX reserializes the slot markup: empty SVG elements get explicit closing
|
|
// tags, and apostrophes in text are escaped. We restore the source form so the
|
|
// code in the panel looks like hand-written HTML.
|
|
html = html.replace(/<(path|circle|line|polyline|polygon|rect|ellipse)([^>]*?)\s*><\/\1>/g, '<$1$2 />').replace(/'/g, "'")
|
|
|
|
const exampleClasses = ['example fs-base border rounded my-5', !raw && 'd-flex flex-wrap justify-content-center', `overflow-${overflow}`, 'position-relative', bg ? `bg-${bg}` : 'bg-pattern-rectangles', className]
|
|
|
|
const innerClasses = ['p-6 w-full', column && 'd-flex gap-3 flex-column', !column && centered && `d-flex flex-fill flex-wrap gap-2 justify-content-center${vertical ? ' align-items-center flex-column' : ' justify-content-center'}`, columnFullWidth && 'd-flex flex-fill flex-column gap-2']
|
|
|
|
const highlighted = hideCode ? '' : await highlightCode(beautifyHtml(code ?? html), 'html')
|
|
---
|
|
|
|
<!--EXAMPLE-->{
|
|
!codeOnly && (
|
|
<div class:list={exampleClasses} style={height ? `height: ${height}` : undefined}>
|
|
{raw ? (
|
|
<Fragment set:html={removeHref(html)} />
|
|
) : (
|
|
<div class:list={innerClasses} style={column ? 'max-width: 25rem;' : undefined}>
|
|
<Fragment set:html={removeHref(html)} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
{
|
|
!hideCode && (
|
|
<div class="position-relative">
|
|
<a class="btn btn-icon btn-dark position-absolute m-2 top-0 end-0 z-3" data-clipboard-text={html}>
|
|
<Icon name="clipboard" />
|
|
<Icon name="check" class="d-none" />
|
|
</a>
|
|
<Fragment set:html={highlighted} />
|
|
</div>
|
|
)
|
|
}
|
|
<!--/EXAMPLE-->
|