elk/components/publish/PublishEmojiPicker.client.vue

71 lines
1.7 KiB
Vue
Raw Normal View History

2022-12-23 19:15:19 +00:00
<script setup lang="ts">
import importEmojiLang from 'virtual:emoji-mart-lang-importer'
2022-12-23 19:15:19 +00:00
import type { Picker } from 'emoji-mart'
const emit = defineEmits<{
(e: 'select', code: string): void
(e: 'selectCustom', image: any): void
2022-12-23 19:15:19 +00:00
}>()
const { locale } = useI18n()
const el = ref<HTMLElement>()
const picker = ref<Picker>()
const colorMode = useColorMode()
2022-12-23 19:15:19 +00:00
async function openEmojiPicker() {
await updateCustomEmojis()
if (picker.value) {
picker.value.update({
theme: colorMode,
custom: customEmojisData.value,
})
}
else {
const [Picker, dataPromise, i18n] = await Promise.all([
import('emoji-mart').then(({ Picker }) => Picker),
import('@emoji-mart/data/sets/14/twitter.json').then((r: any) => r.default).catch(() => {}),
importEmojiLang(locale.value.split('-')[0]),
])
picker.value = new Picker({
data: () => dataPromise,
onEmojiSelect({ native, src, alt, name }: any) {
native
? emit('select', native)
: emit('selectCustom', { src, alt, 'data-emoji-id': name })
2022-12-23 19:15:19 +00:00
},
set: 'twitter',
theme: colorMode,
2022-12-23 22:56:16 +00:00
custom: customEmojisData.value,
i18n,
2022-12-23 19:15:19 +00:00
})
}
2022-12-25 16:58:00 +00:00
await nextTick()
// TODO: custom picker
el.value?.appendChild(picker.value as any as HTMLElement)
2022-12-25 16:58:00 +00:00
}
function hideEmojiPicker() {
if (picker.value)
el.value?.removeChild(picker.value as any as HTMLElement)
2022-12-23 19:15:19 +00:00
}
</script>
<template>
<CommonTooltip :content="$t('tooltip.add_emojis')">
2023-01-04 10:41:19 +00:00
<VDropdown
auto-boundary-max-size
@apply-show="openEmojiPicker()"
@apply-hide="hideEmojiPicker()"
>
<slot />
<template #popper>
<div ref="el" min-w-10 min-h-10 />
</template>
</VDropdown>
</CommonTooltip>
2022-12-23 19:15:19 +00:00
</template>