calckey/packages/client/src/components/MkMenu.child.vue

<template>
	<div ref="el" class="sfhdhdhr" tabindex="-1">
		<MkMenu
			ref="menu"
			:items="items"
			:align="align"
			:width="width"
			:as-drawer="false"
			@close="onChildClosed"
		/>
	</div>
</template>

<script lang="ts" setup>
import { on } from "events";
import {
	nextTick,
	onBeforeUnmount,
	onMounted,
	onUnmounted,
	ref,
	watch,
} from "vue";
import MkMenu from "./MkMenu.vue";
import { MenuItem } from "@/types/menu";

const props = defineProps<{
	items: MenuItem[];
	targetElement: HTMLElement;
	rootElement: HTMLElement;
	width?: number;
	viaKeyboard?: boolean;
}>();

const emit = defineEmits<{
	(ev: "closed"): void;
	(ev: "actioned"): void;
}>();

const el = ref<HTMLElement>();
const align = "left";

function setPosition() {
	const rootRect = props.rootElement.getBoundingClientRect();
	const rect = props.targetElement.getBoundingClientRect();
	const left = props.targetElement.offsetWidth;
	const top = rect.top - rootRect.top - 8;
	el.value.style.left = left + "px";
	el.value.style.top = top + "px";
}

function onChildClosed(actioned?: boolean) {
	if (actioned) {
		emit("actioned");
	} else {
		emit("closed");
	}
}

onMounted(() => {
	setPosition();
	nextTick(() => {
		setPosition();
	});
});

defineExpose({
	checkHit: (ev: MouseEvent) => {
		return ev.target === el.value || el.value.contains(ev.target);
	},
});
</script>

<style lang="scss" scoped>
.sfhdhdhr {
	position: absolute;
}
</style>