1
0
mirror of https://github.com/tabler/tabler.git synced 2026-08-07 03:42:27 +04:00
Files
tabler/shared/ui/Colorpicker.astro
codecalm f27c70ad38 Fix Prettier formatting regression and Astro type-check errors
`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.
2026-08-03 01:26:19 +02:00

47 lines
1.5 KiB
Plaintext

---
import site from '@data/site.json'
import CaptureScript from '../components/CaptureScript.astro'
interface Props {
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 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}`
---
<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 ??= {}
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,
}))
}
document.readyState !== 'loading' ? initColorpicker() : document.addEventListener('DOMContentLoaded', initColorpicker, { once: true })
</script>
<!-- END COLORPICKER -->
</CaptureScript>