mirror of
https://github.com/tabler/tabler.git
synced 2026-08-28 12:56:24 +04:00
Paweł KunaandStarDev
39634cb4b9
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
81 lines
3.0 KiB
Plaintext
81 lines
3.0 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'
|
|
|
|
/**
|
|
* Demo area background:
|
|
* - surface-secondary — muted solid surface (default)
|
|
* - transparent — checkerboard pattern, for components with their own background
|
|
* - primary — theme-aware white (bg-surface)
|
|
*/
|
|
type ExampleBackground = 'surface-secondary' | 'transparent' | 'primary'
|
|
|
|
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
|
|
background?: ExampleBackground
|
|
class?: string
|
|
height?: string
|
|
column?: boolean
|
|
centered?: boolean
|
|
vertical?: boolean
|
|
columnFullWidth?: boolean
|
|
hideCode?: boolean
|
|
codeOnly?: boolean
|
|
}
|
|
|
|
const { html: htmlProp, code, raw, overflow = 'auto', background = 'surface-secondary', class: className, height, column, centered, vertical, columnFullWidth, hideCode, codeOnly } = Astro.props
|
|
|
|
const backgroundClasses: Record<ExampleBackground, string> = {
|
|
'surface-secondary': 'bg-surface-secondary',
|
|
'transparent': 'bg-pattern-rectangles',
|
|
'primary': 'bg-surface',
|
|
}
|
|
|
|
// 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', backgroundClasses[background], 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={code ?? html}>
|
|
<Icon name="clipboard" />
|
|
<Icon name="check" class="d-none" />
|
|
</a>
|
|
<Fragment set:html={highlighted} />
|
|
</div>
|
|
)
|
|
}
|
|
<!--/EXAMPLE-->
|