gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pulldown single mode: show selected label instead of count

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-29 14:49:12 +02:00
parent f9520658c8
commit c1fb1a74a2
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+15 -2
View File
@@ -935,6 +935,7 @@
const updatePulldownSelectionState = (demo) => { const updatePulldownSelectionState = (demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger'); const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]'); const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
const selectionMode = demo.dataset.selectionMode || 'single';
const isActivatableInactive = demo.dataset.activatable === 'true' && demo.dataset.componentState !== 'active'; const isActivatableInactive = demo.dataset.activatable === 'true' && demo.dataset.componentState !== 'active';
if (!trigger || selectableOptions.length === 0) { if (!trigger || selectableOptions.length === 0) {
@@ -945,6 +946,10 @@
return option.getAttribute('aria-checked') === 'true'; return option.getAttribute('aria-checked') === 'true';
}).length; }).length;
const selectedOption = Array.from(selectableOptions).find((option) => {
return option.getAttribute('aria-checked') === 'true';
});
selectableOptions.forEach((option) => { selectableOptions.forEach((option) => {
const isSelected = option.getAttribute('aria-checked') === 'true'; const isSelected = option.getAttribute('aria-checked') === 'true';
const optionRow = option.closest('.sg-pulldown-option'); const optionRow = option.closest('.sg-pulldown-option');
@@ -967,8 +972,16 @@
}); });
const labelBase = trigger.dataset.labelBase || 'Auswahl'; const labelBase = trigger.dataset.labelBase || 'Auswahl';
if (selectionMode === 'multiple') {
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase; trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
} else if (selectedOption) {
const selectedText = selectedOption.closest('.sg-pulldown-option')?.querySelector('span')?.textContent?.trim()
|| selectedOption.closest('label')?.querySelector('span:last-child')?.textContent?.trim()
|| selectedOption.textContent?.trim();
trigger.textContent = selectedText || labelBase;
} else {
trigger.textContent = labelBase;
}
const isActivatableActive = demo.dataset.activatable === 'true' && demo.dataset.componentState === 'active'; const isActivatableActive = demo.dataset.activatable === 'true' && demo.dataset.componentState === 'active';
const showActiveState = !isActivatableInactive && (selectedCount > 0 || isActivatableActive); const showActiveState = !isActivatableInactive && (selectedCount > 0 || isActivatableActive);
trigger.classList.toggle('sg-pulldown--selected', showActiveState); trigger.classList.toggle('sg-pulldown--selected', showActiveState);