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

1 files changed, 5 insertions, 14 deletions

diff --git a/src/components/InputCopyable.vue b/src/components/InputCopyable.vue
index db26f45..ed67895 100644
--- a/src/components/InputCopyable.vue
+++ b/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>