mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 03:42:27 +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.
57 lines
1.8 KiB
Plaintext
57 lines
1.8 KiB
Plaintext
---
|
|
import icons from '@data/icons.json'
|
|
import CaptureScript from '../components/CaptureScript.astro'
|
|
|
|
interface Props {
|
|
id?: string
|
|
icon?: string
|
|
color?: string
|
|
size?: string
|
|
value?: number
|
|
}
|
|
|
|
const { id: idProp, icon = 'star', color, size, value } = Astro.props
|
|
|
|
const id = idProp ?? (Astro.props.icon ? icon : undefined) ?? 'default'
|
|
|
|
const starClasses = ['icon', 'gl-star-full', color && `text-${color}`, size && `icon-${size}`].filter(Boolean).join(' ')
|
|
|
|
const iconData = (icons as Record<string, { svg: Record<string, string | null> }>)[icon]
|
|
let star = iconData?.svg?.filled ?? ''
|
|
star = star.replace('<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '')
|
|
star = star.replace(/class="[^"]+"/, `aria-hidden="true" focusable="false" class="${starClasses}"`)
|
|
|
|
const ratingSelector = `#rating-${id}`
|
|
const ratingKey = `rating-${id}`
|
|
---
|
|
|
|
<select id={`rating-${id}`}>
|
|
<option value="">Select a rating</option>
|
|
<option value="5" selected={value === 5}>Excellent</option>
|
|
<option value="4" selected={value === 4}>Very Good</option>
|
|
<option value="3" selected={value === 3}>Average</option>
|
|
<option value="2" selected={value === 2}>Poor</option>
|
|
<option value="1" selected={value === 1}>Terrible</option>
|
|
</select>
|
|
<CaptureScript>
|
|
<!-- BEGIN RATING -->
|
|
<script define:vars={{ ratingSelector, ratingKey, star }}>
|
|
window.tabler_rating ??= {}
|
|
|
|
function initRating() {
|
|
const rating = new StarRating(ratingSelector, {
|
|
tooltip: false,
|
|
clearable: false,
|
|
stars: (el) => {
|
|
el.innerHTML = star
|
|
},
|
|
classNames: {},
|
|
})
|
|
window.tabler_rating[ratingKey] = rating
|
|
}
|
|
|
|
document.readyState !== 'loading' ? initRating() : document.addEventListener('DOMContentLoaded', initRating, { once: true })
|
|
</script>
|
|
<!-- END RATING -->
|
|
</CaptureScript>
|