chore: script setup components (#7299)

frontend/components/global/AppButtonCopy.vue

@@ -8,7 +8,7 @@
     close-delay="500"
     transition="slide-y-transition"
   >
-    <template #activator="{ props }">
+    <template #activator="{ props: hoverProps }">
       <v-btn
         variant="flat"
         :icon="icon"
@@ -16,7 +16,7 @@
         retain-focus-on-click
         :class="btnClass"
         :disabled="copyText !== '' ? false : true"
-        v-bind="props"
+        v-bind="hoverProps"
         @click="textToClipboard()"
       >
         <v-icon>{{ $globals.icons.contentCopy }}</v-icon>
@@ -33,66 +33,53 @@
   </v-tooltip>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useClipboard } from "@vueuse/core";
 
-export default defineNuxtComponent({
-  props: {
-    copyText: {
-      type: String,
-      required: true,
-    },
-    color: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: Boolean,
-      default: true,
-    },
-    btnClass: {
-      type: String,
-      default: "",
-    },
+const props = defineProps({
+  copyText: {
+    type: String,
+    required: true,
   },
-  setup(props) {
-    const { copy, copied, isSupported } = useClipboard();
-    const show = ref(false);
-    const copyToolTip = ref<VTooltip | null>(null);
-    const copiedSuccess = ref<boolean | null>(null);
-
-    async function textToClipboard() {
-      if (isSupported.value) {
-        await copy(props.copyText);
-        if (copied.value) {
-          copiedSuccess.value = true;
-          console.info(`Copied\n${props.copyText}`);
-        }
-        else {
-          copiedSuccess.value = false;
-          console.error("Copy failed: ", copied.value);
-        }
-      }
-      else {
-        console.warn("Clipboard is currently not supported by your browser. Ensure you're on a secure (https) site.");
-      }
-
-      show.value = true;
-      setTimeout(() => {
-        show.value = false;
-      }, 3000);
-    }
-
-    return {
-      show,
-      copyToolTip,
-      textToClipboard,
-      copied,
-      isSupported,
-      copiedSuccess,
-    };
+  color: {
+    type: String,
+    default: "",
+  },
+  icon: {
+    type: Boolean,
+    default: true,
+  },
+  btnClass: {
+    type: String,
+    default: "",
   },
 });
+
+const { copy, copied, isSupported } = useClipboard();
+const show = ref(false);
+const copiedSuccess = ref<boolean | null>(null);
+
+async function textToClipboard() {
+  if (isSupported.value) {
+    await copy(props.copyText);
+    if (copied.value) {
+      copiedSuccess.value = true;
+      console.info(`Copied\n${props.copyText}`);
+    }
+    else {
+      copiedSuccess.value = false;
+      console.error("Copy failed: ", copied.value);
+    }
+  }
+  else {
+    console.warn("Clipboard is currently not supported by your browser. Ensure you're on a secure (https) site.");
+  }
+
+  show.value = true;
+  setTimeout(() => {
+    show.value = false;
+  }, 3000);
+}
 </script>
 
 <style lang="scss" scoped></style>