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

chore(CommandPalette): improve customization options (#71)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sylvain Marroufin
2022-07-21 15:46:05 +02:00
committed by GitHub
parent 1ff9fd4f69
commit ce28b04187
4 changed files with 57 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<li class="p-2">
<h2 v-if="group.label" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
{{ group.label }}
<h2 v-if="group[groupAttribute]" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
{{ group[groupAttribute] }}
</h2>
<ul class="text-sm u-text-gray-700">
@@ -13,32 +13,38 @@
: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 relative', 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 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" />
<UIcon v-if="command.icon" :name="command.icon" :class="['h-5 w-5 flex-shrink-0', active && 'u-text-gray-900', !active && 'u-text-gray-400', command.iconClass]" aria-hidden="true" />
<UAvatar
v-else-if="command.avatar"
:src="command.avatar"
:alt="command.label"
:alt="command[commandAttribute]"
:rounded="false"
size="xxxs"
class="flex-shrink-0"
/>
<span v-else-if="command.chip" class="flex-shrink-0 w-2 h-2 rounded-full" :style="{ background: `#${command.chip}` }" />
<div class="flex items-center flex-1 min-w-0 u-text-gray-400 gap-1.5" :class="{ 'opacity-50': command.disabled }">
<span v-if="command.prefix">{{ command.prefix }}</span>
<span class="u-text-gray-700 truncate">{{ command.label }}</span>
<div class="flex items-center flex-1 min-w-0 gap-1.5" :class="{ 'opacity-50': command.disabled }">
<slot :name="`${group.key}-command`" :group="group" :command="command">
<span v-if="command.prefix" class="u-text-gray-400">{{ command.prefix }}</span>
<span class="truncate">{{ command[commandAttribute] }}</span>
<span v-if="command.suffix" class="u-text-gray-400">{{ command.suffix }}</span>
</slot>
</div>
</div>
<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>
<UIcon v-if="selected" name="heroicons-outline:check" class="h-5 w-5 absolute right-2 u-text-gray-900" aria-hidden="true" />
<span v-else-if="active" class="flex-none u-text-gray-500">
<slot :name="`${group.key}-active`" :group="group" :command="command">{{ group.active }}</slot>
</span>
<slot v-else :name="`${group.key}-inactive`" :group="group" :command="command">
<span v-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>
<span v-else-if="!command.disabled && group.inactive" class="flex-none u-text-gray-500">{{ group.inactive }}</span>
</slot>
</li>
</ComboboxOption>
</ul>
@@ -54,6 +60,14 @@ defineProps({
group: {
type: Object as PropType<Group>,
required: true
},
groupAttribute: {
type: String,
required: true
},
commandAttribute: {
type: String,
required: true
}
})
</script>