59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import type { ResolvedCommand } from '~/composables/command'
|
|
|
|
const {
|
|
cmd,
|
|
index,
|
|
active = false,
|
|
} = defineProps<{
|
|
cmd: ResolvedCommand
|
|
index: number
|
|
active?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'activate'): void
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex px-3 py-2 my-1 items-center rounded-lg hover:bg-active transition-all duration-65 ease-in-out cursor-pointer scroll-m-10"
|
|
:class="{ 'bg-active': active }"
|
|
:data-index="index"
|
|
@click="emit('activate')"
|
|
>
|
|
<div v-if="cmd.icon" me-2 :class="cmd.icon" />
|
|
|
|
<div class="flex-1 flex items-baseline gap-2">
|
|
<div :class="{ 'font-medium': active }">
|
|
{{ cmd.name }}
|
|
</div>
|
|
<div v-if="cmd.description" class="text-xs text-secondary">
|
|
{{ cmd.description }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="cmd.onComplete"
|
|
class="flex items-center gap-1 transition-all duration-65 ease-in-out"
|
|
:class="active ? 'opacity-100' : 'opacity-0'"
|
|
>
|
|
<div class="text-xs text-secondary">
|
|
{{ $t('command.complete') }}
|
|
</div>
|
|
<CommandKey name="Tab" />
|
|
</div>
|
|
<div
|
|
v-if="cmd.onActivate"
|
|
class="flex items-center gap-1 transition-all duration-65 ease-in-out"
|
|
:class="active ? 'opacity-100' : 'opacity-0'"
|
|
>
|
|
<div class="text-xs text-secondary">
|
|
{{ $t('command.activate') }}
|
|
</div>
|
|
<CommandKey name="Enter" />
|
|
</div>
|
|
</div>
|
|
</template>
|