package-lock.json

@@ -18,6 +18,7 @@
         "@headlessui/vue": "^1.7.23",
         "@heroicons/vue": "^2.2.0",
         "@tailwindcss/vite": "^4.1.11",
+        "@vueuse/core": "^13.5.0",
         "axios": "^1.10.0",
         "event-source-polyfill": "^1.0.31",
         "grapesjs": "^0.22.11",
@@ -3967,6 +3968,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.36.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.36.0.tgz",
@@ -4613,6 +4620,44 @@
         }
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.5.0.tgz",
+      "integrity": "sha512-wV7z0eUpifKmvmN78UBZX8T7lMW53Nrk6JP5+6hbzrB9+cJ3jr//hUlhl9TZO/03bUkMK6gGkQpqOPWoabr72g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.5.0",
+        "@vueuse/shared": "13.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.5.0.tgz",
+      "integrity": "sha512-euhItU3b0SqXxSy8u1XHxUCdQ8M++bsRs+TYhOLDU/OykS7KvJnyIFfep0XM5WjIFry9uAPlVSjmVHiqeshmkw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.5.0.tgz",
+      "integrity": "sha512-K7GrQIxJ/ANtucxIXbQlUHdB0TPA8c+q5i+zbrjxuhJCnJ9GtBg75sBSnvmLSxHKPg2Yo8w62PWksl9kwH0Q8g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",

package.json

@@ -4,7 +4,7 @@
   "description": "Feuerwehr/Verein Mitgliederverwaltung UI",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
@@ -33,6 +33,7 @@
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.2.0",
     "@tailwindcss/vite": "^4.1.11",
+    "@vueuse/core": "^13.5.0",
     "axios": "^1.10.0",
     "event-source-polyfill": "^1.0.31",
     "grapesjs": "^0.22.11",

src/App.vue

@@ -2,11 +2,11 @@
   <Modal />
   <ContextMenu />
 
-  <Header @contextmenu.prevent />
+  <AppHeader />
-  <div class="grow overflow-x-hidden overflow-y-auto p-2 md:p-4" @contextmenu.prevent>
+  <div class="grow overflow-x-hidden overflow-y-auto p-2 md:p-4">
     <RouterView />
   </div>
-  <Footer @contextmenu.prevent />
+  <AppFooter />
   <Notification />
 
   <Teleport to="head">
@@ -18,10 +18,11 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { onLongPress } from "@vueuse/core";
 import { RouterView } from "vue-router";
-import Header from "./components/Header.vue";
+import AppHeader from "./components/Header.vue";
-import Footer from "./components/Footer.vue";
+import AppFooter from "./components/Footer.vue";
 import { mapActions, mapState } from "pinia";
 import { useAuthStore } from "./stores/auth";
 import { isAuthenticatedPromise } from "./router/authGuard";
@@ -31,6 +32,7 @@ import Notification from "./components/Notification.vue";
 import { config } from "./config";
 import { useConfigurationStore } from "@/stores/configuration";
 import { resetAllPiniaStores } from "@/helpers/piniaReset";
+import { useContextMenuStore } from "./stores/context-menu";
 </script>
 
 <script lang="ts">
@@ -40,6 +42,11 @@ export default defineComponent({
     ...mapState(useConfigurationStore, ["clubName"]),
   },
   mounted() {
+    document.body.addEventListener("contextmenu", (event) => {
+      this.handleContextMenu(event);
+    });
+    onLongPress(document.body, this.handleContextMenu);
+
     resetAllPiniaStores();
     this.configure();
 
@@ -52,6 +59,21 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useConfigurationStore, ["configure"]),
+    ...mapActions(useContextMenuStore, ["openContextMenu"]),
+    handleContextMenu(e: MouseEvent) {
+      e.preventDefault();
+
+      // TODO allow contextmenu on elements with special attribute with reduced selection
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+
+      if (["INPUT", "TEXTAREA", "P", "H1", "H2", "H3", "H4"].includes((target as HTMLElement).nodeName)) {
+        this.openContextMenu(e, {
+          component_ref: markRaw(defineAsyncComponent(() => import("@/components/CopyPasteContextMenu.vue"))),
+          data: ["INPUT", "TEXTAREA"].includes((e.target as HTMLElement).nodeName) ? "" : "nopaste",
+        });
+      }
+    },
   },
 });
 </script>

src/components/ContextMenu.vue

@@ -1,10 +1,9 @@
 <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"
+    class="absolute flex flex-col gap-1 border border-gray-400 bg-white rounded-md select-none text-left shadow-md z-[100] p-1"
     v-show="show"
     :style="contextMenuStyle"
-    @contextmenu.prevent
     @click="closeContextMenu"
   >
     <component :is="component_ref" :data="data" />

src/components/CopyPasteContextMenu.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex flex-row gap-2 cursor-pointer hover:bg-gray-300 p-1 rounded-md" @click="copy">
+    <DocumentDuplicateIcon class="w-5 h-5" />
+    <p>kopieren</p>
+  </div>
+  <div
+    v-if="data != 'nopaste'"
+    class="flex flex-row gap-2 cursor-pointer hover:bg-gray-300 p-1 rounded-md"
+    @click="paste"
+  >
+    <ClipboardDocumentIcon class="w-5 h-5" />
+    <p>einfügen</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { ClipboardDocumentIcon, DocumentDuplicateIcon } from "@heroicons/vue/24/outline";
+import { mapState } from "pinia";
+import { useContextMenuStore } from "@/stores/context-menu";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: ["data"],
+  data() {
+    return {
+      selectedText: "",
+    };
+  },
+  computed: {
+    ...mapState(useContextMenuStore, ["clickedOnEl"]),
+  },
+  mounted() {
+    this.selectedText =
+      document.getSelection()?.toString() || this.clickedOnEl.value || this.clickedOnEl.innerText || "";
+
+    let selection = document.getSelection()?.toString();
+    console.log(selection);
+    if (selection == "") {
+      console.log("jo");
+      const range = document.createRange();
+      range.selectNode(this.clickedOnEl);
+      console.log(range);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+    }
+  },
+  methods: {
+    copy() {
+      navigator.clipboard.writeText(this.selectedText);
+    },
+    paste() {
+      const el = this.clickedOnEl;
+      navigator.clipboard.readText().then((e) => {
+        el.value = e;
+      });
+    },
+  },
+});
+</script>

src/components/Modal.vue

@@ -3,21 +3,15 @@
     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" class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto" />
-    <component
-      :is="component_ref"
-      :data="data"
-      @click.stop
-      class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { mapState, mapActions } from "pinia";
 import { useModalStore } from "@/stores/modal";
+import { useContextMenuStore } from "@/stores/context-menu";
 </script>
 
 <script lang="ts">
@@ -27,6 +21,7 @@ export default {
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useContextMenuStore, ["closeContextMenu"]),
   },
 };
 </script>

src/stores/context-menu.ts

@@ -8,6 +8,7 @@ export const useContextMenuStore = defineStore("context-menu", {
       show: false,
       component_ref: null as any,
       data: null as any,
+      clickedOnEl: null as any,
     };
   },
   getters: {
@@ -16,16 +17,18 @@ export const useContextMenuStore = defineStore("context-menu", {
     },
   },
   actions: {
-    openContextMenu(e: MouseEvent, content: { component_ref: any; data: any }) {
+    openContextMenu(e: MouseEvent, content: { component_ref: any; data?: any }) {
       this.component_ref = content.component_ref;
       this.data = content.data;
       this.contextX = e.pageX;
       this.contextY = e.pageY;
+      this.clickedOnEl = e.target;
       this.show = true;
     },
     closeContextMenu() {
       this.component_ref = null;
       this.data = null;
+      this.clickedOnEl = null;
       this.show = false;
     },
   },