<!-- SPDX-FileCopyrightText: syuilo and other misskey contributors SPDX-License-Identifier: AGPL-3.0-only --> <template> <MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="click" @close="onModalClose" @closed="onModalClosed"> <MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="onMenuClose" @hide="hide"/> </MkModal> </template> <script lang="ts" setup> import { ref, shallowRef } from 'vue'; import MkModal from './MkModal.vue'; import MkMenu from './MkMenu.vue'; import { MenuItem } from '@/types/menu.js'; defineProps<{ items: MenuItem[]; align?: 'center' | string; width?: number; viaKeyboard?: boolean; src?: any; }>(); const emit = defineEmits<{ (ev: 'closed'): void; (ev: 'closing'): void; }>(); const modal = shallowRef<InstanceType<typeof MkModal>>(); const manualShowing = ref(true); const hiding = ref(false); function click() { close(); } function onModalClose() { emit('closing'); } function onMenuClose() { close(); if (hiding.value) { // hidingであればclosedを発火 emit('closed'); } } function onModalClosed() { if (!hiding.value) { // hidingでなければclosedを発火 emit('closed'); } } function hide() { manualShowing.value = false; hiding.value = true; // closeは呼ぶ必要がある modal.value?.close(); } function close() { manualShowing.value = false; // closeは呼ぶ必要がある modal.value?.close(); } </script> <style lang="scss" module> .drawer { border-radius: var(--radius-lg); border-bottom-right-radius: 0; border-bottom-left-radius: 0; } </style>