aboutsummaryrefslogtreecommitdiff
path: root/src/components/InputCopyable.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/InputCopyable.vue')
-rw-r--r--src/components/InputCopyable.vue19
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>