feat: make use of useState to show and hide context menu rather than manually rendering and unrendering

This commit is contained in:
SauceyRed 2025-07-30 16:26:06 +02:00
parent a146eb001a
commit 78d43ca0c8
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
7 changed files with 47 additions and 29 deletions

View file

@ -1,11 +1,13 @@
<template>
<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
{{ item.name }}
<div id="context-menu">
<button v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
</button>
</div>
</template>
<script lang="ts" setup>
import type { ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const props = defineProps<{ menuItems: ContextMenuItem[], cursorX: number, cursorY: number }>();
@ -19,7 +21,8 @@ onMounted(() => {
function runCallback(item: ContextMenuItem) {
removeContextMenu();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
removeContextMenu(contextMenu);
item.callback();
}