setup route for first user

src/components/ContextMenu.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    ref="contextMenu"
+    class="absolute flex flex-col gap-1 border border-gray-400 bg-white rounded-md select-none text-left shadow-md z-50 p-1"
+    v-show="show"
+    :style="contextMenuStyle"
+    @contextmenu.prevent
+    @click="closeContextMenu"
+  >
+    <component :is="component_ref" :data="data" />
+    <!-- <template v-for="item in contextMenu" :key="item">
+      <hr v-if="item.separator" />
+      <div v-else class="flex flex-row gap-2 rounded-md p-1 px-2 items-center"
+        :class="typeof item.click == 'function' ? 'cursor-pointer hover:bg-gray-200' : ''" @click="item.click">
+        <font-awesome-icon v-if="item.icon" class="text-md" :icon="[item.stroke || 'far', item.icon]" />
+        <span class="font-normal">{{ item.title }}</span>
+      </div>
+    </template> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { mapState, mapActions } from "pinia";
+import { useContextMenuStore } from "../stores/context-menu";
+</script>
+
+<script lang="ts">
+export default {
+  computed: {
+    ...mapState(useContextMenuStore, ["show", "contextMenuStyle", "component_ref", "data"]),
+  },
+  methods: {
+    ...mapActions(useContextMenuStore, ["closeContextMenu"]),
+  },
+  mounted() {
+    document.body.addEventListener("click", (event) => {
+      if (!(this.$refs.contextMenu as HTMLElement)?.contains(event.target as HTMLElement)) {
+        this.closeContextMenu();
+      }
+    });
+    // document.body.addEventListener("contextmenu", (event) => {
+    //   if (!this.$refs.contextMenu?.contains(event.target)) {
+    //     this.closeContextMenu();
+    //   }
+    // });
+  },
+};
+</script>

src/components/Modal.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    ref="contextMenu"
+    class="absolute inset-0 w-full h-full flex justify-center items-center bg-black/50 select-none z-50 p-2"
+    v-show="show"
+    @contextmenu.prevent
+    @click="closeModal"
+  >
+    <component :is="component_ref" :data="data" @click.stop class="p-4 bg-white rounded-lg" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "../stores/modal";
+</script>
+
+<script lang="ts">
+export default {
+  computed: {
+    ...mapState(useModalStore, ["show", "component_ref", "data"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+  },
+};
+</script>