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/Select.astro
+30 -28
View File
@@ -1,9 +1,11 @@
---
// Renders a <select id="select-{id}"> populated from @data/selects.json (+ people)
// and its TomSelect init <script>, rendered directly here (no more page-scripts registry).
// and its TomSelect init script.
// TODO: optgroup / flag / label indicator branches (unused on the modals page).
import selects from '@data/selects.json';
import people from '@data/people.json';
import { firstLetters } from '@shared/lib/string-format';
import CaptureScript from '../components/CaptureScript.astro';
interface Props {
id?: string;
@@ -93,7 +95,7 @@ const selectId = id ? `select-${id}` : undefined;
id && (
<select
class:list={selectClass}
{...({ placeholder } as unknown as astroHTML.JSX.SelectHTMLAttributes)}
placeholder={placeholder}
id={`select-${id}`}
value={value}
multiple={isMultiple ? '' : undefined}
@@ -123,34 +125,34 @@ const selectId = id ? `select-${id}` : undefined;
}
{
id && (
<Fragment>
<Fragment set:html={'<!-- BEGIN SELECT -->'} />
<script define:vars={{ selectId, showSearch }}>
function initSelect() {
window.tabler_select ??= {};
<CaptureScript>
<!-- BEGIN SELECT -->
<script define:vars={{ selectId, showSearch }}>
function initSelect() {
window.tabler_select ??= {};
const renderOption = (data, escape) => {
if (data.customProperties) {
return `<div><span class="dropdown-item-indicator">${data.customProperties}</span>${escape(data.text)}</div>`;
}
return `<div>${escape(data.text)}</div>`;
};
const renderOption = (data, escape) => {
if (data.customProperties) {
return `<div><span class="dropdown-item-indicator">${data.customProperties}</span>${escape(data.text)}</div>`;
}
return `<div>${escape(data.text)}</div>`;
};
window.TomSelect &&
(window.tabler_select[selectId] = new TomSelect(document.getElementById(selectId), {
copyClassesToDropdown: false,
dropdownParent: 'body',
...(showSearch ? {} : { controlInput: '<input>' }),
render: {
item: renderOption,
option: renderOption,
},
}));
}
window.TomSelect &&
(window.tabler_select[selectId] = new TomSelect(document.getElementById(selectId), {
copyClassesToDropdown: false,
dropdownParent: 'body',
...(showSearch ? {} : { controlInput: '<input>' }),
render: {
item: renderOption,
option: renderOption,
},
}));
}
document.readyState !== 'loading' ? initSelect() : document.addEventListener('DOMContentLoaded', initSelect, { once: true });
</script>
<Fragment set:html={'<!-- END SELECT -->'} />
</Fragment>
document.readyState !== 'loading' ? initSelect() : document.addEventListener('DOMContentLoaded', initSelect, { once: true });
</script>
<!-- END SELECT -->
</CaptureScript>
)
}