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

Switch large table search to submit

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 18:33:28 +02:00
parent 83c1eaaf34
commit c5492ff8df
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/data-display.html
+10 -3
View File
@@ -80,7 +80,7 @@
<article class="sg-card sg-large-table" data-component="large-table" role="table" aria-label="Beispiel Large Table"> <article class="sg-card sg-large-table" data-component="large-table" role="table" aria-label="Beispiel Large Table">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-large-table__title-segment" data-component-part="large-table-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-large-table__title-segment" data-component-part="large-table-header">
<div class="sg-strong">Large Table</div> <div class="sg-strong">Large Table</div>
<span class="sg-search-field-row" data-component="search-field"> <form class="sg-search-field-row" data-component="search-field" data-large-table-search-form>
<span class="sg-input-single-line-wrap" data-has-value="false" data-component="single-line-input" data-component-state="inactive-selectable"> <span class="sg-input-single-line-wrap" data-has-value="false" data-component="single-line-input" data-component-state="inactive-selectable">
<input <input
class="sg-interaction-element sg-input-single-line sg-search-field-input sg-input-single-line--inactive-selectable sg-form-inactive-selectable" class="sg-interaction-element sg-input-single-line sg-search-field-input sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
@@ -91,7 +91,7 @@
> >
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button> <button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
</span> </span>
</span> </form>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--header" role="row" data-component-part="large-table-header-row"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--header" role="row" data-component-part="large-table-header-row">
@@ -224,6 +224,7 @@
const searchInput = table.querySelector('[data-large-table-search]'); const searchInput = table.querySelector('[data-large-table-search]');
const searchFieldWrap = table.querySelector('[data-component="single-line-input"]'); const searchFieldWrap = table.querySelector('[data-component="single-line-input"]');
const searchClearButton = table.querySelector('.sg-input-clear-button'); const searchClearButton = table.querySelector('.sg-input-clear-button');
const searchForm = table.querySelector('[data-large-table-search-form]');
const state = { const state = {
columnIndex: 0, columnIndex: 0,
direction: 'ascending', direction: 'ascending',
@@ -316,10 +317,16 @@
if (searchInput) { if (searchInput) {
searchInput.addEventListener('input', () => { searchInput.addEventListener('input', () => {
state.query = searchInput.value.trim().toLowerCase();
if (searchFieldWrap) { if (searchFieldWrap) {
searchFieldWrap.setAttribute('data-has-value', searchInput.value ? 'true' : 'false'); searchFieldWrap.setAttribute('data-has-value', searchInput.value ? 'true' : 'false');
} }
});
}
if (searchForm && searchInput) {
searchForm.addEventListener('submit', (event) => {
event.preventDefault();
state.query = searchInput.value.trim().toLowerCase();
renderRows(); renderRows();
}); });
} }