Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update MkEmojiPicker.vue

Browse source
This commit is contained in:
syuilo 2023-01-09 16:27:09 +09:00
parent 3ece2dc990
commit 4d66077f85
1 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/frontend/src/components/MkEmojiPicker.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer, asWindow }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"> <div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer, asWindow }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
<input ref="search" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @input="input()" @paste.stop="paste" @keyup.enter="done()"> <input ref="search" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @input="input()" @paste.stop="paste" @keyup.enter="done()">
<div ref="emojis" class="emojis"> <div v-if="customEmojis != null && customEmojiCategories != null" ref="emojisEl" class="emojis">
<section class="result"> <section class="result">
<div v-if="searchResultCustom.length > 0" class="body"> <div v-if="searchResultCustom.length > 0" class="body">
<button <button
@ -104,9 +104,17 @@ const emit = defineEmits<{
(ev: 'chosen', v: string): void; (ev: 'chosen', v: string): void;
}>(); }>();
const customEmojis = await getCustomEmojis(); let customEmojis = $ref(null);
getCustomEmojis().then((x) => {
customEmojis = x;
});
let customEmojiCategories = $ref(null);
getCustomEmojiCategories().then((x) => {
customEmojiCategories = x;
});
const search = shallowRef<HTMLInputElement>(); const search = shallowRef<HTMLInputElement>();
const emojis = shallowRef<HTMLDivElement>(); const emojisEl = shallowRef<HTMLDivElement>();
const { const {
reactions: pinned, reactions: pinned,
@ -120,14 +128,13 @@ const {
const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1); const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3); const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2); const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
const customEmojiCategories = await getCustomEmojiCategories();
const q = ref<string>(''); const q = ref<string>('');
const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]); const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
const searchResultUnicode = ref<UnicodeEmojiDef[]>([]); const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index'); const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
watch(q, () => { watch(q, () => {
if (emojis.value) emojis.value.scrollTop = 0; if (emojisEl.value) emojisEl.value.scrollTop = 0;
if (q.value === '') { if (q.value === '') {
searchResultCustom.value = []; searchResultCustom.value = [];
@ -276,7 +283,7 @@ function focus() {
} }
function reset() { function reset() {
if (emojis.value) emojis.value.scrollTop = 0; if (emojisEl.value) emojisEl.value.scrollTop = 0;
q.value = ''; q.value = '';
} }