fix(frontend): MkPopupMenuがドロワーで子メニューの出現と同時にpopupをresolveさせるのをやめさせる

This commit is contained in:
tamaina 2023-08-01 07:32:22 +00:00
parent 8a72a05958
commit 8a6191374c
2 changed files with 17 additions and 5 deletions
packages/frontend/src/components

View File

@ -82,6 +82,7 @@ const props = defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'close', actioned?: boolean): void; (ev: 'close', actioned?: boolean): void;
(ev: 'hide'): void;
}>(); }>();
let itemsEl = $shallowRef<HTMLDivElement>(); let itemsEl = $shallowRef<HTMLDivElement>();
@ -166,8 +167,12 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
} }
if (props.asDrawer) { if (props.asDrawer) {
os.popupMenu(children, ev.currentTarget ?? ev.target); os.popupMenu(children, ev.currentTarget ?? ev.target, {
close(); onClosing: () => {
close();
}
});
emit('hide');
} else { } else {
childTarget = ev.currentTarget ?? ev.target; childTarget = ev.currentTarget ?? ev.target;
childMenu = children; childMenu = children;

View File

@ -4,13 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkModal ref="modal" v-slot="{ type, maxHeight }" :zPriority="'high'" :src="src" :transparentBg="true" @click="modal.close()" @close="emit('closing')" @closed="emit('closed')"> <MkModal ref="modal" v-slot="{ type, maxHeight }" :zPriority="'high'" :src="src" :transparentBg="true" @click="close" @close="emit('closing')" @closed="emit('closed')">
<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="modal.close()"/> <MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="close" @hide="manualShowing = false"/>
</MkModal> </MkModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { ref } from 'vue';
import MkModal from './MkModal.vue'; import MkModal from './MkModal.vue';
import MkMenu from './MkMenu.vue'; import MkMenu from './MkMenu.vue';
import { MenuItem } from '@/types/menu'; import { MenuItem } from '@/types/menu';
@ -29,6 +29,13 @@ const emit = defineEmits<{
}>(); }>();
let modal = $shallowRef<InstanceType<typeof MkModal>>(); let modal = $shallowRef<InstanceType<typeof MkModal>>();
const manualShowing = ref(true);
function close() {
if (!modal) return;
manualShowing.value = false;
modal.close();
}
</script> </script>
<style lang="scss" module> <style lang="scss" module>