mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-26 18:00:43 +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
|
* @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"
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user