feat(CommandPalette): add input-trailing-icon prop and slot

This commit is contained in:
HugoRCD
2025-06-25 16:26:27 +02:00
parent b0364b96b7
commit deae9eca84
2 changed files with 16 additions and 1 deletions

View File

@@ -116,6 +116,11 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
* @IconifyIcon
*/
backIcon?: string
/**
* Display a trailing icon in the input.
* @IconifyIcon
*/
inputTrailingIcon?: string
groups?: G[]
/**
* Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -149,6 +154,7 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
'empty'(props: { searchTerm?: string }): any
'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
'close'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
'input-trailing'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
'item': SlotProps<T>
'item-leading': SlotProps<T>
'item-label': SlotProps<T>
@@ -353,7 +359,15 @@ function onSelect(e: Event, item: T) {
</slot>
</template>
<template v-if="close || !!slots.close" #trailing>
<template v-if="inputTrailingIcon || !!slots['input-trailing'] || close || !!slots.close" #trailing>
<slot name="input-trailing" :ui="ui">
<UIcon
v-if="inputTrailingIcon"
:name="inputTrailingIcon"
class="shrink-0 size-5 text-dimmed"
/>
</slot>
<slot name="close" :ui="ui">
<UButton
v-if="close"

View File

@@ -6,6 +6,7 @@ export default (options: Required<ModuleOptions>) => ({
input: '[&>input]:h-12',
close: '',
back: 'p-0',
inputTrailingIcon: 'shrink-0 size-5 text-dimmed',
content: 'relative overflow-hidden flex flex-col',
viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none',
group: 'p-1 isolate',