40 lines
1.4 KiB
Vue
40 lines
1.4 KiB
Vue
|
<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>
|