Make context menu look nicer and handle rendering using v-if #58

Merged
sauceyred merged 12 commits from improved-context-menu into main 2025-08-04 01:55:47 +00:00
Showing only changes of commit 82dc0fb0e3 - Show all commits

View file

@ -21,7 +21,7 @@
</template>
<script lang="ts" setup>
import type { ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[], localStorageName?: string }>();
@ -31,6 +31,8 @@ const resizableSidebar = ref<HTMLDivElement>();
const widthResizer = ref<HTMLDivElement>();
const storedWidth = ref<number>();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
const menuItems: ContextMenuItem[] = [
{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
]
@ -42,7 +44,7 @@ onMounted(() => {
widthResizer.value.addEventListener("pointerdown", (e) => {
e.preventDefault();
if (e.button == 2) {
createContextMenu(e, menuItems);
showContextMenu(e, contextMenu.value, menuItems);
return
};
document.body.style.cursor = "ew-resize";