ae5d052274
to keep things manageable i merged a lot of one off values into just a handful of common sizes, so some parts of the ui will look different than upstream even with the "Misskey" rounding mode
80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<!--
|
|
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 } from 'vue';
|
|
import MkModal from './MkModal.vue';
|
|
import MkMenu from './MkMenu.vue';
|
|
import { MenuItem } from '@/types/menu';
|
|
|
|
defineProps<{
|
|
items: MenuItem[];
|
|
align?: 'center' | string;
|
|
width?: number;
|
|
viaKeyboard?: boolean;
|
|
src?: any;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(ev: 'closed'): void;
|
|
(ev: 'closing'): void;
|
|
}>();
|
|
|
|
let 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?.close();
|
|
}
|
|
|
|
function close() {
|
|
manualShowing.value = false;
|
|
|
|
// closeは呼ぶ必要がある
|
|
modal?.close();
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.drawer {
|
|
border-radius: var(--radius-lg);
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
</style>
|