arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-02 13:17:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(CommandPalette): add slot for command icon

Browse Source
This commit is contained in:
Benjamin Canac
2023-02-28 16:49:50 +01:00
parent 9719ea3858
commit 6970c2d665
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/runtime/components/navigation/CommandPaletteGroup.vue
View File

@@ -15,14 +15,16 @@
> >
<div :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']"> <div :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
<div class="flex items-center gap-2 min-w-0"> <div class="flex items-center gap-2 min-w-0">
<Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" /> <slot :name="`${group.key}-icon`" :group="group" :command="command">
<Avatar <Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
v-else-if="command.avatar" <Avatar
v-bind="{ size: 'xxxs', ...command.avatar }" v-else-if="command.avatar"
class="flex-shrink-0" v-bind="{ size: 'xxxs', ...command.avatar }"
aria-hidden="true" class="flex-shrink-0"
/> aria-hidden="true"
<span v-else-if="command.chip" class="flex-shrink-0 w-2 h-2 mx-1 rounded-full" :style="{ background: `#${command.chip}` }" /> />
<span v-else-if="command.chip" class="flex-shrink-0 w-2 h-2 mx-1 rounded-full" :style="{ background: `#${command.chip}` }" />
</slot>
<div class="flex items-center gap-1.5 min-w-0" :class="{ 'opacity-50': command.disabled }"> <div class="flex items-center gap-1.5 min-w-0" :class="{ 'opacity-50': command.disabled }">
<slot :name="`${group.key}-command`" :group="group" :command="command"> <slot :name="`${group.key}-command`" :group="group" :command="command">