1
0
elk/components/publish/PublishEmojiPicker.client.vue

60 lines
1.4 KiB
Vue
Raw Normal View History

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