bao/portal-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add "no results found" empty state and refactor search filtering logic in the command palette.

Browse Source
This commit is contained in:
pbao9
2026-02-15 10:57:04 +07:00
parent 046f61df7e
commit eb123ba97c
1 changed files with 43 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/command-palette.blade.php
+43 -5
View File
@@ -42,6 +42,10 @@ $validMenuItems = collect($menuItems)->filter(fn($item) => Route::has($item['rou
@empty
<div class="cmdk-empty">No pages found</div>
@endforelse
<div class="cmdk-empty-state" id="cmdk-empty" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-box"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
<span>No results found</span>
</div>
</div>
</div>
</div>
@@ -56,6 +60,8 @@ $validMenuItems = collect($menuItems)->filter(fn($item) => Route::has($item['rou
var input = document.getElementById('cmdk-input');
var searchInput = document.getElementById('navbarForm');
var cmdkItems = document.querySelectorAll('.cmdk-item');
var cmdkEmpty = document.getElementById('cmdk-empty');
var cmdkList = document.getElementById('cmdk-list');
function showPalette() {
container.style.display = 'block';
@@ -64,6 +70,25 @@ $validMenuItems = collect($menuItems)->filter(fn($item) => Route::has($item['rou
cmdkItems.forEach(function(item) {
item.style.display = '';
});
if (cmdkEmpty) cmdkEmpty.style.display = 'none';
}
function hidePalette() {
container.style.display = 'none';
if (searchInput) searchInput.blur();
}
function filterItems(query) {
var visibleCount = 0;
cmdkItems.forEach(function(item) {
var value = item.dataset.value || item.textContent.toLowerCase();
var matches = query === '' || value.includes(query);
item.style.display = matches ? '' : 'none';
if (matches) visibleCount++;
});
if (cmdkEmpty) {
cmdkEmpty.style.display = visibleCount === 0 ? 'flex' : 'none';
}
}
function hidePalette() {
@@ -77,13 +102,13 @@ $validMenuItems = collect($menuItems)->filter(fn($item) => Route::has($item['rou
if (container.style.display === 'none') {
showPalette();
}
var query = e.target.value.toLowerCase();
cmdkItems.forEach(function(item) {
var value = item.dataset.value || item.textContent.toLowerCase();
item.style.display = (query === '' || value.includes(query)) ? '' : 'none';
});
filterItems(e.target.value.toLowerCase());
});
}
input.addEventListener('input', function(e) {
filterItems(e.target.value.toLowerCase());
});
document.addEventListener('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
@@ -183,6 +208,19 @@ $validMenuItems = collect($menuItems)->filter(fn($item) => Route::has($item['rou
color: var(--bs-secondary-color, #64748b);
}
.cmdk-empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 32px;
color: var(--bs-secondary-color, #64748b);
}
.cmdk-empty-state svg {
opacity: 0.5;
}
[data-bs-theme="dark"] .cmdk {
background: #1e293b;
border-color: #334155;