mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-20 14:56:17 -04:00
fix(Search tools): show more tools
In Search of tools, show up to 25 tools (configurable by VITE_MAX_SEARCH_RESULT) and show a scrollbar if needed Fix #1430 (since there are many json related tools)
This commit is contained in:
parent
08d977b8cd
commit
8f6a8e100e
2 changed files with 8 additions and 2 deletions
|
@ -11,6 +11,8 @@ import BugIcon from '~icons/mdi/bug-outline';
|
|||
import DiceIcon from '~icons/mdi/dice-5';
|
||||
import InfoIcon from '~icons/mdi/information-outline';
|
||||
|
||||
const maxSearchResultsPerCategory = import.meta.env.VITE_MAX_SEARCH_RESULT || 25;
|
||||
|
||||
export const useCommandPaletteStore = defineStore('command-palette', () => {
|
||||
const toolStore = useToolStore();
|
||||
const styleStore = useStyleStore();
|
||||
|
@ -82,7 +84,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
|
|||
});
|
||||
|
||||
const filteredSearchResult = computed(() =>
|
||||
_.chain(searchResult.value).groupBy('category').mapValues(categoryOptions => _.take(categoryOptions, 5)).value());
|
||||
_.chain(searchResult.value).groupBy('category').mapValues(categoryOptions => _.take(categoryOptions, maxSearchResultsPerCategory)).value());
|
||||
|
||||
return {
|
||||
filteredSearchResult,
|
||||
|
|
|
@ -124,7 +124,7 @@ function activateOption(option: PaletteOption) {
|
|||
</span>
|
||||
</c-button>
|
||||
|
||||
<c-modal v-model:open="isModalOpen" class="palette-modal" shadow-xl important:max-w-650px important:pa-12px @keydown="handleKeydown">
|
||||
<c-modal v-model:open="isModalOpen" class="palette-modal" overflow-y-auto shadow-xl important:max-w-650px pretty-scrollbar important:pa-12px @keydown="handleKeydown">
|
||||
<c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />
|
||||
|
||||
<div v-for="(options, category) in filteredSearchResult" :key="category">
|
||||
|
@ -147,6 +147,10 @@ function activateOption(option: PaletteOption) {
|
|||
}
|
||||
}
|
||||
|
||||
::v-deep(.palette-modal) {
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.c-modal--overlay {
|
||||
align-items: flex-start !important;
|
||||
padding-top: 80px;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue