diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue index 8b0b7cf29a..acced44793 100644 --- a/packages/frontend/src/components/MkEmojiPicker.section.vue +++ b/packages/frontend/src/components/MkEmojiPicker.section.vue @@ -18,10 +18,10 @@ </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { ref, computed, Ref } from 'vue'; const props = defineProps<{ - emojis: string[]; + emojis: string[] | Ref<string[]>; initialShown?: boolean; }>(); @@ -29,5 +29,7 @@ const emit = defineEmits<{ (ev: 'chosen', v: string, event: MouseEvent): void; }>(); +const emojis = computed(() => Array.isArray(props.emojis) ? props.emojis : props.emojis.value); + const shown = ref(!!props.initialShown); </script> diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index 3399124e85..b288cb22fe 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/packages/frontend/src/components/MkEmojiPicker.vue @@ -60,7 +60,7 @@ </div> <div v-once class="group"> <header class="_acrylic">{{ i18n.ts.customEmojis }}</header> - <XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection> + <XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="computed(() => customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':'))" @chosen="chosen">{{ category || i18n.ts.other }}</XSection> </div> <div v-once class="group"> <header class="_acrylic">{{ i18n.ts.emoji }}</header>