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

chore(CommandPalette): improve component

Browse Source
This commit is contained in:
Benjamin Canac
2022-07-18 14:31:23 +02:00
parent 76ffbf4cf3
commit 9e0edc27ab
3 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/runtime/components/navigation/CommandPalette.vue
View File

@@ -91,8 +91,7 @@ const fuse = props.groups.reduce((acc, group) => {
const groups = computed(() => props.groups.map((group) => { const groups = computed(() => props.groups.map((group) => {
return { return {
key: group.key, ...group,
label: group.label,
commands: fuse[group.key].results.value.map(result => result.item).slice(0, group.options?.resultLimit || options.value.resultLimit) commands: fuse[group.key].results.value.map(result => result.item).slice(0, group.options?.resultLimit || options.value.resultLimit)
} }
}).filter(group => group.commands.length)) }).filter(group => group.commands.length))

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

@@ -13,14 +13,29 @@
:disabled="command.disabled" :disabled="command.disabled"
as="template" as="template"
> >
<li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 u-text-gray-400', 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', 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 min-w-0 gap-3"> <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.iconColor, command.iconClass]" class="flex-shrink-0" aria-hidden="true" /> <UIcon v-if="command.icon" :name="command.icon" :class="['h-4 w-4', command.iconClass]" class="flex-shrink-0" aria-hidden="true" />
<UAvatar v-else-if="command.avatar" :src="command.avatar" :alt="command.label" :rounded="false" size="xxxs" /> <UAvatar
<div class="flex items-center flex-1 w-full truncate u-text-gray-400" :class="{ 'opacity-50': command.disabled }"> v-else-if="command.avatar"
<span class="u-text-gray-700">{{ command.label }}</span> :src="command.avatar"
:alt="command.label"
: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> </div>
</div> </div>
<span v-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>
</li> </li>
</ComboboxOption> </ComboboxOption>
</ul> </ul>
@@ -30,11 +45,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ComboboxOption } from '@headlessui/vue' import { ComboboxOption } from '@headlessui/vue'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import type { ComputedGroup } from '../../types/command-palette' import type { Group } from '../../types/command-palette'
defineProps({ defineProps({
group: { group: {
type: Object as PropType<ComputedGroup>, type: Object as PropType<Group>,
required: true required: true
} }
}) })

17
src/runtime/types/command-palette.d.ts vendored
View File

@@ -1,23 +1,20 @@
import type { UseFuseOptions } from '@vueuse/integrations/useFuse' import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
import Fuse from 'fuse.js'
export interface Command { export interface Command {
disabled?: boolean prefix?: string
suffix?: string
label: string
icon?: string icon?: string
iconColor?: string
iconClass?: string iconClass?: string
avatar?: string avatar?: string
label: string chip?: string
group?: string disabled?: boolean
shortcuts?: string[]
} }
export interface Group { export interface Group {
key: string key: string
label: string label: string
commands: Command[] commands: Command[]
options: Partial<UseFuseOptions<Command>> options?: Partial<UseFuseOptions<Command>>
}
export interface ComputedGroup extends Omit<Group, 'options' | 'commands'> {
commands: Fuse.FuseResult<Command>[]
} }