chore(CommandPalette): improve component

This commit is contained in:
Benjamin Canac
2022-07-18 15:28:39 +02:00
parent ea293bae0c
commit 222bb987a4
2 changed files with 11 additions and 5 deletions

View File

@@ -20,7 +20,7 @@
<UButton v-if="closeIcon" :icon="closeIcon" variant="transparent" class="absolute right-3" @click="onClear" /> <UButton v-if="closeIcon" :icon="closeIcon" variant="transparent" class="absolute right-3" @click="onClear" />
</div> </div>
<ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y u-divide-gray-100 scroll-py-2"> <ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2">
<CommandPaletteGroup v-for="group of groups" :key="group.key" :group="group" /> <CommandPaletteGroup v-for="group of groups" :key="group.key" :group="group" />
</ComboboxOptions> </ComboboxOptions>
@@ -126,7 +126,7 @@ function activateFirstOption () {
}, 0) }, 0)
} }
function onSelect (option) { function onSelect (option: Command) {
if (option.disabled) { if (option.disabled) {
return return
} }
@@ -140,9 +140,11 @@ function onSelect (option) {
emit('update:modelValue', option) emit('update:modelValue', option)
// waiting for modal to be closed // waiting for modal to be closed
setTimeout(() => { if (!option.prevent) {
query.value = '' setTimeout(() => {
}, 300) query.value = ''
}, 300)
}
} }
function onClear () { function onClear () {

View File

@@ -1,4 +1,5 @@
import type { UseFuseOptions } from '@vueuse/integrations/useFuse' import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
import type { RouteLocationRaw } from 'vue-router'
export interface Command { export interface Command {
prefix?: string prefix?: string
@@ -9,6 +10,9 @@ export interface Command {
avatar?: string avatar?: string
chip?: string chip?: string
disabled?: boolean disabled?: boolean
prevent?: boolean
click?: Function
to?: RouteLocationRaw
shortcuts?: string[] shortcuts?: string[]
} }