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

1 files changed, 4 insertions, 11 deletions

diff --git a/src/components/SpanCopyable.vue b/src/components/SpanCopyable.vue
index 17b1a59..7ab3a1d 100644
--- a/src/components/SpanCopyable.vue
+++ b/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>