wire-elements / spotlight

Livewire component that brings Spotlight/Alfred-like functionality to your Laravel application.
MIT License
911 stars 71 forks source link

Show all commands and them filter #27

Closed danpalmieri closed 3 years ago

danpalmieri commented 3 years ago

There is possible to show all available commands when spotlight is open and them filter when the user writes?

PhiloNL commented 3 years ago

Hi @danpalmieri At the moment, this is not possible, but feel free to add a PR to support this as an option.

modernben commented 2 years ago

Would love this as well. Got it kinda working but when I go to hit an option it treats it as a result.

<div class="border-t border-gray-800" x-show="filteredItems().length == 0" style="display: none;">
    <ul x-ref="results" style="max-height: 265px;" class="overflow-y-auto">
        <template x-for="(command, i) in commands" :key="command.id">
            <li>
                <button @click="go(command.id)" class="block w-full text-left px-6 py-3"
                        :class="{ 'bg-gray-700': selected === i, 'hover:bg-gray-800': selected !== i }">
                    <span x-text="command.name"
                          :class="{'text-gray-300': selected !== i, 'text-white': selected === i }"></span>
                    <span x-text="command.description" class="ml-1"
                          :class="{'text-gray-500': selected !== i, 'text-gray-400': selected === i }"></span>
                </button>
            </li>
        </template>
    </ul>
</div>