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 * @IconifyIcon
*/ */
backIcon?: string backIcon?: string
/**
* Display a trailing icon in the input.
* @IconifyIcon
*/
inputTrailingIcon?: string
groups?: G[] groups?: G[]
/** /**
* Options for [useFuse](https://vueuse.org/integrations/useFuse). * 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 'empty'(props: { searchTerm?: string }): any
'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => 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 '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': SlotProps<T>
'item-leading': SlotProps<T> 'item-leading': SlotProps<T>
'item-label': SlotProps<T> 'item-label': SlotProps<T>
@@ -353,7 +359,15 @@ function onSelect(e: Event, item: T) {
</slot> </slot>
</template> </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"> <slot name="close" :ui="ui">
<UButton <UButton
v-if="close" v-if="close"

View File

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