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

fix icon search and debounce results

Browse Source
This commit is contained in:
Cory LaViska
2021-05-27 07:28:30 -04:00
parent 234d2380ef
commit 8d8b77ca07
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/components/icon.md
View File

@@ -500,6 +500,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
const loader = container.querySelector('.icon-loader');
const list = container.querySelector('.icon-list');
const queue = [];
let inputTimeout;
// Generate icons
icons.map(i => {
@@ -530,15 +531,18 @@ If you want to change the icons Shoelace uses internally, you can register an ic
// Filter as the user types
input.addEventListener('sl-input', () => {
[...list.querySelectorAll('.icon-list-item')].map(item => {
const filter = input.value.toLowerCase();
if (filter === '') {
item.hidden = false;
} else {
const terms = item.getAttribute('data-terms').toLowerCase();
item.hidden = terms.indexOf(filter) < 0;
}
});
clearTimeout(inputTimeout);
inputTimeout = setTimeout(() => {
[...list.querySelectorAll('.icon-list-item')].map(item => {
const filter = input.value.toLowerCase();
if (filter === '') {
item.hidden = false;
} else {
const terms = item.getAttribute('data-terms').toLowerCase();
item.hidden = terms.indexOf(filter) < 0;
}
});
}, 250);
});
// Sort by type and remember preference
@@ -559,6 +563,10 @@ If you want to change the icons Shoelace uses internally, you can register an ic
padding: var(--sl-spacing-medium);
}
.icon-search [hidden] {
display: none;
}
.icon-search-controls {
display: flex;
}