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

Render Modal as real markup; drain scripts via CaptureScript (#2742)

Browse Source 
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
Paweł Kuna
2026-08-03 00:55:32 +02:00
committed by GitHub
co-authored by StarDev
parent 66dc336726
commit 575d68572f
200 changed files with 10670 additions and 10096 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/ui/Colorpicker.astro
+42 -31
View File
@@ -1,47 +1,58 @@
---
// Port of ui/colorpicker.html.
// The Coloris init <script> renders directly here (no more page-scripts registry),
// wrapping the instance in window.tabler_colorpicker.
import site from '@data/site.json'
import site from '@data/site.json';
import CaptureScript from '../components/CaptureScript.astro';
interface Props {
value?: string
id?: string | number
alpha?: boolean
format?: string | false
/** swatches-only param in ui/colorpicker.html */
swatchesOnly?: boolean
class?: string
value?: string;
id?: string | number;
alpha?: boolean;
format?: string | false;
swatchesOnly?: boolean;
class?: string;
}
const { value, id = 'default', alpha = false, format = false, swatchesOnly, class: className } = Astro.props
const {
value,
id = 'default',
alpha = false,
format = false,
swatchesOnly,
class: className,
} = Astro.props;
const colors = site.colors as Record<string, { prop: string }>
const swatchProps = Object.values(colors).map((color) => color.prop)
const colors = site.colors as Record<string, { prop: string }>;
const swatchProps = Object.values(colors).map((color) => color.prop);
const colorpickerId = `colorpicker-${id}`
const colorpickerSelector = `#colorpicker-${id}`
const colorpickerId = `colorpicker-${id}`;
const colorpickerSelector = `#colorpicker-${id}`;
---
<input type="text" class={`form-control d-block${className ? ` ${className}` : ''}`} id={colorpickerId} value={value} />
<input
type="text"
class={`form-control d-block${className ? ` ${className}` : ''}`}
id={colorpickerId}
value={value}
/>
<CaptureScript>
<!-- BEGIN COLORPICKER -->
<script define:vars={{ colorpickerId, colorpickerSelector, alpha, format, swatchesOnly, swatchProps }}>
function initColorpicker() {
window.tabler_colorpicker ??= {}
function initColorpicker() {
window.tabler_colorpicker ??= {};
const swatches = swatchProps.map((prop) => window.getComputedStyle(document.body).getPropertyValue(prop))
const swatches = swatchProps.map((prop) => window.getComputedStyle(document.body).getPropertyValue(prop));
window.Coloris &&
(window.tabler_colorpicker[colorpickerId] = Coloris({
el: colorpickerSelector,
selectInput: false,
alpha,
...(format ? { format } : {}),
...(swatchesOnly ? { swatchesOnly: true } : {}),
swatches,
}))
}
window.Coloris &&
(window.tabler_colorpicker[colorpickerId] = Coloris({
el: colorpickerSelector,
selectInput: false,
alpha,
...(format ? { format } : {}),
...(swatchesOnly ? { swatchesOnly: true } : {}),
swatches,
}));
}
document.readyState !== 'loading' ? initColorpicker() : document.addEventListener('DOMContentLoaded', initColorpicker, { once: true })
document.readyState !== 'loading' ? initColorpicker() : document.addEventListener('DOMContentLoaded', initColorpicker, { once: true });
</script>
<!-- END COLORPICKER -->
</CaptureScript>