diff options
Diffstat (limited to 'src/components/InputCopyable.vue')
-rw-r--r-- | src/components/InputCopyable.vue | 19 |
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> |