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

Add quality gates: Prettier for Astro, astro check for shared, unused SCSS variable lint (#2749)

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:47:55 +02:00
committed by GitHub
co-authored by StarDev
parent 4d04c102d3
commit 8962710163
552 changed files with 18014 additions and 19559 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/ui/Colorpicker.astro
+28 -40
View File
@@ -2,58 +2,46 @@
// 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'
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
/** swatches-only param in ui/colorpicker.html */
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} />
<!-- 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 -->