mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
feat(CommandPalette): add input-trailing-icon prop and slot
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user