elk/components/command/CommandKey.vue

40 lines
1.4 KiB
Vue
Raw Normal View History

<script setup lang="ts">
const props = defineProps<{
name: string
}>()
const isMac = useIsMac()
const keys = $computed(() => props.name.toLowerCase().split('+'))
</script>
<template>
<div class="flex items-center px-1">
<template v-for="(key, index) in keys" :key="key">
<div v-if="index > 0" class="inline-block px-.5">
+
</div>
<div
class="p-1 grid place-items-center rounded-lg shadow-sm"
text="xs secondary"
border="1 base"
>
<div v-if="key === 'enter'" i-material-symbols:keyboard-return-rounded />
<div v-else-if="key === 'meta' && isMac" i-material-symbols:keyboard-command-key />
<div v-else-if="key === 'meta' && !isMac" i-material-symbols:window-sharp />
<div v-else-if="key === 'alt' && isMac" i-material-symbols:keyboard-option-key-rounded />
<div v-else-if="key === 'arrowup'" i-ri:arrow-up-line />
<div v-else-if="key === 'arrowdown'" i-ri:arrow-down-line />
<div v-else-if="key === 'arrowleft'" i-ri:arrow-left-line />
<div v-else-if="key === 'arrowright'" i-ri:arrow-right-line />
<template v-else-if="key === 'escape'">
ESC
</template>
<div v-else :class="{ 'px-.5': key.length === 1 }">
{{ key[0].toUpperCase() + key.slice(1) }}
</div>
</div>
</template>
</div>
</template>