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

.eslintrc.cjs

@@ -10,5 +10,12 @@ module.exports = {
     '@typescript-eslint/semi': ['error', 'always'],
     '@typescript-eslint/no-use-before-define': ['error', { allowNamedExports: true, functions: false }],
     'vue/no-empty-component-block': ['error'],
+    'no-restricted-imports': ['error', {
+      paths: [{
+        name: '@vueuse/core',
+        importNames: ['useClipboard'],
+        message: 'Please use local useCopy from src/composable/copy.ts instead of useClipboard.',
+      }],
+    }],
   },
 };

src/components/InputCopyable.vue

@@ -1,22 +1,13 @@
 <script setup lang="ts">
-import { useClipboard, useVModel } from '@vueuse/core';
+import { useVModel } from '@vueuse/core';
+import { useCopy } from '@/composable/copy';
 
 const props = defineProps<{ value: string }>();
 const emit = defineEmits(['update:value']);
 
 const value = useVModel(props, 'value', emit);
-const tooltipText = ref('Copy to clipboard');
-
-const { copy } = useClipboard({ source: value });
-
-function onCopyClicked() {
-  copy();
-  tooltipText.value = 'Copied!';
-
-  setTimeout(() => {
-    tooltipText.value = 'Copy to clipboard';
-  }, 2000);
-}
+const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
+const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : 'Copy to clipboard');
 </script>
 
 <template>
@@ -24,7 +15,7 @@ function onCopyClicked() {
     <template #suffix>
       <n-tooltip trigger="hover">
         <template #trigger>
-          <c-button circle variant="text" size="small" @click="onCopyClicked">
+          <c-button circle variant="text" size="small" @click="copy()">
             <icon-mdi-content-copy />
           </c-button>
         </template>

src/components/SpanCopyable.vue

@@ -1,26 +1,19 @@
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core';
+import { useCopy } from '@/composable/copy';
 
 const props = withDefaults(defineProps<{ value?: string }>(), { value: '' });
 const { value } = toRefs(props);
 
 const initialText = 'Copy to clipboard';
-const tooltipText = ref(initialText);
 
-const { copy } = useClipboard({ source: value });
-
-function handleClick() {
-  copy();
-  tooltipText.value = 'Copied!';
-
-  setTimeout(() => (tooltipText.value = initialText), 1000);
-}
+const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
+const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : initialText);
 </script>
 
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <span class="value" @click="handleClick">{{ value }}</span>
+      <span class="value" @click="copy()">{{ value }}</span>
     </template>
     {{ tooltipText }}
   </n-tooltip>

src/components/TextareaCopyable.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { Copy } from '@vicons/tabler';
-import { useClipboard, useElementSize } from '@vueuse/core';
+import { useElementSize } from '@vueuse/core';
 import hljs from 'highlight.js/lib/core';
 import jsonHljs from 'highlight.js/lib/languages/json';
 import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import iniHljs from 'highlight.js/lib/languages/ini';
+import { useCopy } from '@/composable/copy';
 
 const props = withDefaults(
   defineProps<{
@@ -33,17 +34,8 @@ hljs.registerLanguage('toml', iniHljs);
 const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
 
-const { copy } = useClipboard({ source: value });
-const tooltipText = ref(copyMessage.value);
-
-function onCopyClicked() {
-  copy();
-  tooltipText.value = 'Copied !';
-
-  setTimeout(() => {
-    tooltipText.value = copyMessage.value;
-  }, 2000);
-}
+const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
+const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.value);
 </script>
 
 <template>
@@ -61,7 +53,7 @@ function onCopyClicked() {
       <n-tooltip v-if="value" trigger="hover">
         <template #trigger>
           <div class="copy-button" :class="[copyPlacement]">
-            <c-button circle important:h-10 important:w-10 @click="onCopyClicked">
+            <c-button circle important:h-10 important:w-10 @click="copy()">
               <n-icon size="22" :component="Copy" />
             </c-button>
           </div>
@@ -70,7 +62,7 @@ function onCopyClicked() {
       </n-tooltip>
     </c-card>
     <div v-if="copyPlacement === 'outside'" mt-4 flex justify-center>
-      <c-button @click="onCopyClicked">
+      <c-button @click="copy()">
         {{ tooltipText }}
       </c-button>
     </div>

src/composable/copy.ts

@@ -1,11 +1,19 @@
-import { type MaybeRef, get, useClipboard } from '@vueuse/core';
+// eslint-disable-next-line no-restricted-imports
+import { useClipboard } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
+import type { MaybeRefOrGetter } from 'vue';
+
+export function useCopy({ source, text = 'Copied to the clipboard', createToast = true }: { source?: MaybeRefOrGetter<string>; text?: string; createToast?: boolean } = {}) {
+  const { copy, copied, ...rest } = useClipboard({
+    source,
+    legacy: true,
+  });
 
-export function useCopy({ source, text = 'Copied to the clipboard' }: { source?: MaybeRef<unknown>; text?: string } = {}) {
-  const { copy } = useClipboard(source ? { source: computed(() => String(get(source))) } : {});
   const message = useMessage();
 
   return {
+    ...rest,
+    isJustCopied: copied,
     async copy(content?: string, { notificationMessage }: { notificationMessage?: string } = {}) {
       if (source) {
         await copy();
@@ -14,7 +22,9 @@ export function useCopy({ source, text = 'Copied to the clipboard' }: { source?:
         await copy(content);
       }
 
-      message.success(notificationMessage ?? text);
+      if (createToast) {
+        message.success(notificationMessage ?? text);
+      }
     },
   };
 }

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