elk/components/publish/PublishEmojiPicker.client.vue

56 lines
1.3 KiB
Vue
Raw Normal View History

2022-12-23 19:15:19 +00:00
<script setup lang="ts">
import type { Picker } from 'emoji-mart'
2022-12-23 22:56:16 +00:00
import { updateCustomEmojis } from '~/composables/emojis'
2022-12-23 19:15:19 +00:00
const emit = defineEmits<{
(e: 'select', code: string): void
}>()
const el = $ref<HTMLElement>()
let picker = $ref<Picker>()
async function openEmojiPicker() {
await updateCustomEmojis()
if (picker) {
picker.update({
theme: isDark.value ? 'dark' : 'light',
custom: customEmojisData.value,
})
}
else {
2022-12-23 22:56:16 +00:00
const promise = import('@emoji-mart/data').then(r => r.default)
2022-12-23 19:15:19 +00:00
const { Picker } = await import('emoji-mart')
picker = new Picker({
2022-12-23 22:56:16 +00:00
data: () => promise,
2022-12-23 19:15:19 +00:00
onEmojiSelect(e: any) {
2022-12-23 22:56:16 +00:00
emit('select', e.native || e.shortcodes)
2022-12-23 19:15:19 +00:00
},
theme: isDark.value ? 'dark' : 'light',
2022-12-23 22:56:16 +00:00
custom: customEmojisData.value,
2022-12-23 19:15:19 +00:00
})
}
2022-12-25 16:58:00 +00:00
await nextTick()
// TODO: custom picker
el?.appendChild(picker as any as HTMLElement)
}
const hideEmojiPicker = () => {
2022-12-25 16:58:00 +00:00
if (picker)
el?.removeChild(picker as any as HTMLElement)
2022-12-23 19:15:19 +00:00
}
</script>
<template>
<VDropdown
@apply-show="openEmojiPicker()"
@apply-hide="hideEmojiPicker()"
2022-12-23 19:15:19 +00:00
>
<button btn-action-icon :title="$t('tooltip.emoji')">
<div i-ri:emotion-line />
</button>
<template #popper>
2022-12-23 22:56:16 +00:00
<div ref="el" min-w-10 min-h-10 />
2022-12-23 19:15:19 +00:00
</template>
</VDropdown>
</template>