js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

add empty state

Browse Source
This commit is contained in:
Cory LaViska
2024-12-17 14:41:11 -05:00
parent 315dd40734
commit 752b8d462e
1 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/docs/components/index.md
View File

@@ -418,8 +418,13 @@ layout: page-outline
</a>
</div>
<div id="component-filter-empty" hidden>
No results
</div>
<script type="module">
const container = document.getElementById('component-filter');
const empty = document.getElementById('component-filter-empty');
const grid = document.getElementById('component-grid');
const input = container.querySelector('wa-input');
@@ -438,6 +443,13 @@ layout: page-outline
const isMatch = filter === '' || (content + keywords).includes(filter);
link.classList.toggle('hidden', !isMatch);
});
// Show empty state when there's a search filter and no results
if (filter !== '' && grid.querySelector('a:not(.hidden)') === null) {
empty.hidden = false;
} else {
empty.hidden = true;
}
}
input.addEventListener('wa-input', updateResults);
@@ -467,4 +479,14 @@ layout: page-outline
}
}
}
#component-filter-empty {
border: dashed var(--wa-border-width-m) var(--wa-color-neutral-border-quiet);
border-radius: var(--wa-border-radius-m);
font-size: var(--wa-font-size-l);
color: var(--wa-color-text-quiet);
text-align: center;
padding-block: var(--wa-space-2xl);
margin-block-start: 0
}
</style>