(refactor) replace clipboard dependency by useClipboard

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">
+    <button type="button" :class="['btn', copied ? 'btn-success' : 'btn-outline-primary', 'm-1']" @click="copy()">
-        <Icon :v="clipboardFeedback ? 'clipboard-check' : 'clipboard'" />
+        <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>

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"
+            type="button"
-            class="btn btn-outline-secondary"
+            :class="['btn', copied ? 'btn-success' : 'btn-outline-secondary']"
-            data-clipboard-target="#link"
-            :data-clipboard-text="link"
             :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>

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">
+        <div v-if="path && link" class="card-footer">
-            <LinkInput v-if="addPronoun === undefined" :link="link" />
+            <LinkInput v-if="addPronoun === undefined" :link />
             <div v-else class="input-group my-2">
                 <input class="form-control" readonly :value="path">
                 <button

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",

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)