From d0d017126b2ee6526db04532e787870279096170 Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Tue, 6 May 2025 23:08:12 +0200
Subject: [PATCH] (refactor) replace clipboard dependency by useClipboard

---
 components/ClipboardLinkButton.vue        | 39 +++++++--------------
 components/LinkInput.vue                  | 42 +++++++++--------------
 components/pronouns/PronounsGenerator.vue |  4 +--
 package.json                              |  1 -
 pnpm-lock.yaml                            |  3 --
 5 files changed, 31 insertions(+), 58 deletions(-)

diff --git a/components/ClipboardLinkButton.vue b/components/ClipboardLinkButton.vue
index 536e62351..afc3cd83b 100644
--- a/components/ClipboardLinkButton.vue
+++ b/components/ClipboardLinkButton.vue
@@ -1,31 +1,16 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+
+const props = defineProps<{
+    link: string;
+}>();
+
+const { copy, copied } = useClipboard({ source: props.link });
+</script>
+
 <template>
-    <button ref="clipboard" :class="['btn', clipboardFeedback ? 'btn-success' : 'btn-outline-primary', 'm-1']" :data-clipboard-text="link">
-        <Icon :v="clipboardFeedback ? 'clipboard-check' : 'clipboard'" />
+    <button type="button" :class="['btn', copied ? 'btn-success' : 'btn-outline-primary', 'm-1']" @click="copy()">
+        <Icon :v="copied ? 'clipboard-check' : 'clipboard'" />
         <T>crud.copy</T>
     </button>
 </template>
-
-<script>
-import ClipboardJS from 'clipboard';
-
-export default {
-    props: {
-        link: { required: true },
-    },
-    data() {
-        return {
-            clipboardFeedback: false,
-        };
-    },
-    mounted() {
-        if (!this.$refs.clipboard) {
-            return;
-        }
-        const clipboard = new ClipboardJS(this.$refs.clipboard);
-        clipboard.on('success', () => {
-            this.clipboardFeedback = true;
-            setTimeout(() => this.clipboardFeedback = false, 3000);
-        });
-    },
-};
-</script>
diff --git a/components/LinkInput.vue b/components/LinkInput.vue
index b5cc830e7..ab154ac3e 100644
--- a/components/LinkInput.vue
+++ b/components/LinkInput.vue
@@ -1,37 +1,29 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+
+const props = defineProps<{
+    link: string;
+}>();
+
+const value = computed(() => props.link.replace('https://', '').replace('http://', ''));
+
+const { copy, copied } = useClipboard({ source: value });
+</script>
+
 <template>
     <div class="input-group my-2">
-        <input id="link" ref="link" class="form-control" readonly :value="link.replace('https://', '').replace('http://', '')">
+        <input ref="linkInput" class="form-control" readonly :value>
         <button
-            ref="clipboard"
-            class="btn btn-outline-secondary"
-            data-clipboard-target="#link"
-            :data-clipboard-text="link"
+            type="button"
+            :class="['btn', copied ? 'btn-success' : 'btn-outline-secondary']"
             :aria-label="$t('crud.copy')"
             :title="$t('crud.copy')"
-            @click="focusLink"
+            @click="copy()"
         >
-            <Icon v="clipboard" />
+            <Icon :v="copied ? 'clipboard-check' : 'clipboard'" />
         </button>
         <a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
             <Icon v="external-link" />
         </a>
     </div>
 </template>
-
-<script>
-import ClipboardJS from 'clipboard';
-
-export default {
-    props: {
-        link: { required: true },
-    },
-    mounted() {
-        new ClipboardJS(this.$refs.clipboard);
-    },
-    methods: {
-        focusLink() {
-            setTimeout((_) => this.$refs.link.select(), 100);
-        },
-    },
-};
-</script>
diff --git a/components/pronouns/PronounsGenerator.vue b/components/pronouns/PronounsGenerator.vue
index f6816d9ea..73d7a7e27 100644
--- a/components/pronouns/PronounsGenerator.vue
+++ b/components/pronouns/PronounsGenerator.vue
@@ -42,8 +42,8 @@ const link = computed((): string | null => {
         <div class="card-body">
             <slot></slot>
         </div>
-        <div v-if="path" class="card-footer">
-            <LinkInput v-if="addPronoun === undefined" :link="link" />
+        <div v-if="path && link" class="card-footer">
+            <LinkInput v-if="addPronoun === undefined" :link />
             <div v-else class="input-group my-2">
                 <input class="form-control" readonly :value="path">
                 <button
diff --git a/package.json b/package.json
index ce1ade4c2..e5110cc6a 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,6 @@
         "avris-vue-share": "^1.0.1",
         "bootstrap": "^5.3.1",
         "chart.js": "4.4.8",
-        "clipboard": "^2.0.6",
         "eslint": "^9.22.0",
         "eslint-formatter-gitlab": "^5.1.0",
         "eslint-plugin-json-schema-validator": "^5.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c4f08a47..329a7ed80 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -237,9 +237,6 @@ importers:
       chart.js:
         specifier: 4.4.8
         version: 4.4.8
-      clipboard:
-        specifier: ^2.0.6
-        version: 2.0.11
       eslint:
         specifier: ^9.22.0
         version: 9.22.0(jiti@2.4.2)