feat(copy): support legacy copy to clipboard for older browser (#581)

src/tools/benchmark-builder/benchmark-builder.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { Plus, Trash } from '@vicons/tabler';
-import { useClipboard, useStorage } from '@vueuse/core';
+import { useStorage } from '@vueuse/core';
 import _ from 'lodash';
 
 import { arrayToMarkdownTable, computeAverage, computeVariance } from './benchmark-builder.models';
 import DynamicValues from './dynamic-values.vue';
+import { useCopy } from '@/composable/copy';
 
 const suites = useStorage('benchmark-builder:suites', [
   { title: 'Suite 1', data: [5, 10] },
@@ -47,7 +48,7 @@ const results = computed(() => {
     });
 });
 
-const { copy } = useClipboard();
+const { copy } = useCopy({ createToast: false });
 
 const header = {
   title: 'Suite',

src/tools/mac-address-lookup/mac-address-lookup.vue

@@ -8,7 +8,7 @@ const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '')
 const macAddress = ref('20:37:06:12:34:56');
 const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);
 
-const { copy } = useCopy({ source: details, text: 'Vendor info copied to the clipboard' });
+const { copy } = useCopy({ source: () => details.value ?? '', text: 'Vendor info copied to the clipboard' });
 </script>
 
 <template>

src/tools/otp-code-generator-and-validator/token-display.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core';
+import { useCopy } from '@/composable/copy';
 
 const props = defineProps<{ tokens: { previous: string; current: string; next: string } }>();
-const { copy: copyPrevious, copied: previousCopied } = useClipboard();
-const { copy: copyCurrent, copied: currentCopied } = useClipboard();
-const { copy: copyNext, copied: nextCopied } = useClipboard();
+const { copy: copyPrevious, isJustCopied: previousCopied } = useCopy({ createToast: false });
+const { copy: copyCurrent, isJustCopied: currentCopied } = useCopy({ createToast: false });
+const { copy: copyNext, isJustCopied: nextCopied } = useCopy({ createToast: false });
 
 const { tokens } = toRefs(props);
 </script>

src/tools/roman-numeral-converter/roman-numeral-converter.vue

@@ -36,7 +36,7 @@ const validationRoman = useValidation({
 });
 
 const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' });
-const { copy: copyArabic } = useCopy({ source: outputNumeral, text: 'Arabic number copied to the clipboard' });
+const { copy: copyArabic } = useCopy({ source: () => String(outputNumeral), text: 'Arabic number copied to the clipboard' });
 </script>
 
 <template>

src/tools/string-obfuscator/string-obfuscator.vue

@@ -39,7 +39,7 @@ const { copy } = useCopy({ source: obfuscatedString });
         {{ obfuscatedString }}
       </div>
 
-      <c-button @click="copy">
+      <c-button @click="copy()">
         <icon-mdi:content-copy />
       </c-button>
     </c-card>

src/tools/uuid-generator/uuid-generator.vue

@@ -34,7 +34,7 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
     />
 
     <div flex justify-center gap-3>
-      <c-button autofocus @click="copy">
+      <c-button autofocus @click="copy()">
         Copy
       </c-button>
       <c-button @click="refreshUUIDs">