elk/components/emoji/Emoji.vue

31 lines
638 B
Vue
Raw Normal View History

2023-12-22 12:16:46 +00:00
<script setup lang="ts">
const { as, alt, dataEmojiId } = defineProps<{
2023-12-22 12:16:46 +00:00
as: string
alt?: string
dataEmojiId?: string
}>()
const title = ref<string | undefined>()
2023-12-22 12:16:46 +00:00
if (alt) {
if (alt.startsWith(':')) {
title.value = alt.replace(/:/g, '')
2023-12-22 12:16:46 +00:00
}
else {
import('node-emoji').then(({ find }) => {
title.value = find(alt)?.key.replace(/_/g, ' ')
2023-12-22 12:16:46 +00:00
})
}
}
// if it has a data-emoji-id, use that as the title instead
if (dataEmojiId)
title.value = dataEmojiId
2023-12-22 12:16:46 +00:00
</script>
<template>
<component :is="as" v-bind="$attrs" :alt="alt" :data-emoji-id="dataEmojiId" :title="title">
<slot />
</component>
</template>