arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 03:38:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(CommandPalette): support selected with modelValue

Browse Source
This commit is contained in:
Benjamin Canac
2022-07-18 15:08:10 +02:00
parent 9e0edc27ab
commit 8a57ab60c7
2 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,12 +8,12 @@
<ComboboxOption
v-for="(command, index) of group.commands"
:key="`${group.key}-${index}`"
v-slot="{ active }"
v-slot="{ active, selected }"
:value="command"
:disabled="command.disabled"
as="template"
>
<li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 u-text-gray-400 gap-3', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
<li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 u-text-gray-400 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 flex-1 gap-3 min-w-0">
<UIcon v-if="command.icon" :name="command.icon" :class="['h-4 w-4', command.iconClass]" class="flex-shrink-0" aria-hidden="true" />
<UAvatar
@@ -32,7 +32,10 @@
</div>
</div>
<span v-if="active && command.suffix" class="flex-none u-text-gray-500">{{ command.suffix }}</span>
<span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-2 u-text-gray-900">
<UIcon name="heroicons-outline:check" class="h-5 w-5" aria-hidden="true" />
</span>
<span v-else-if="active && command.suffix" class="flex-none u-text-gray-500">{{ command.suffix }}</span>
<span v-else-if="command.shortcuts?.length" class="flex-none text-xs font-semibold u-text-gray-500">
<kbd v-for="shortcut of command.shortcuts" :key="shortcut" class="font-sans">{{ shortcut }}</kbd>
</span>