feat(CommandPalette): add autofocus prop (#2942)

This commit is contained in:
Bruno Belloni
2024-12-20 08:21:05 -03:00
committed by GitHub
parent 0f37aca317
commit 1b3c919222

View File

@@ -68,6 +68,11 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
* @defaultValue 'Type a command or search...' * @defaultValue 'Type a command or search...'
*/ */
placeholder?: InputProps['placeholder'] placeholder?: InputProps['placeholder']
/**
* Automatically focus the input when component is mounted.
* @defaultValue true
*/
autofocus?: boolean
/** /**
* Display a close button in the input (useful when inside a Modal for example). * Display a close button in the input (useful when inside a Modal for example).
* `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"} * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -141,7 +146,8 @@ import UInput from './Input.vue'
const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), { const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
modelValue: '', modelValue: '',
placeholder: 'Type a command or search...', placeholder: 'Type a command or search...',
labelKey: 'label' labelKey: 'label',
autofocus: true
}) })
const emits = defineEmits<CommandPaletteEmits<T>>() const emits = defineEmits<CommandPaletteEmits<T>>()
const slots = defineSlots<CommandPaletteSlots<G, T>>() const slots = defineSlots<CommandPaletteSlots<G, T>>()
@@ -239,7 +245,7 @@ const groups = computed(() => {
<ListboxFilter v-model="searchTerm" as-child> <ListboxFilter v-model="searchTerm" as-child>
<UInput <UInput
variant="none" variant="none"
autofocus :autofocus="autofocus"
size="lg" size="lg"
v-bind="inputProps" v-bind="inputProps"
:icon="icon || appConfig.ui.icons.search" :icon="icon || appConfig.ui.icons.search"