egirlskey/packages/frontend/src/components/MkEmojiPickerDialog.vue

82 lines
1.8 KiB
Vue
Raw Normal View History

<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkModal
ref="modal"
v-slot="{ type, maxHeight }"
2023-05-19 04:58:09 +00:00
:zPriority="'middle'"
:preferType="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
:transparentBg="true"
:manualShowing="manualShowing"
:src="src"
@click="modal?.close()"
@opening="opening"
@close="emit('close')"
@closed="emit('closed')"
>
<MkEmojiPicker
ref="picker"
2023-05-27 02:35:26 +00:00
class="_popup _shadow"
:class="{ [$style.drawer]: type === 'drawer' }"
2023-05-19 04:58:09 +00:00
:showPinned="showPinned"
:asReactionPicker="asReactionPicker"
:asDrawer="type === 'drawer'"
:max-height="maxHeight"
@chosen="chosen"
/>
</MkModal>
</template>
<script lang="ts" setup>
import { shallowRef } from 'vue';
import MkModal from '@/components/MkModal.vue';
import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
import { defaultStore } from '@/store';
withDefaults(defineProps<{
manualShowing?: boolean | null;
src?: HTMLElement;
showPinned?: boolean;
asReactionPicker?: boolean;
}>(), {
manualShowing: null,
showPinned: true,
asReactionPicker: false,
});
const emit = defineEmits<{
2022-01-28 03:20:42 +00:00
(ev: 'done', v: any): void;
(ev: 'close'): void;
(ev: 'closed'): void;
}>();
const modal = shallowRef<InstanceType<typeof MkModal>>();
const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
function chosen(emoji: any) {
emit('done', emoji);
modal.value?.close();
}
function opening() {
picker.value?.reset();
picker.value?.focus();
// 何故かちょっと待たないとフォーカスされない
setTimeout(() => {
picker.value?.focus();
}, 10);
}
</script>
2023-05-27 02:35:26 +00:00
<style lang="scss" module>
.drawer {
border-radius: 24px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
</style>