feat(ux): copyable input

1 files changed, 49 insertions, 0 deletions

diff --git a/src/components/InputCopyable.vue b/src/components/InputCopyable.vue
new file mode 100644
index 0000000..3e4aa94
--- /dev/null
+++ b/src/components/InputCopyable.vue
@@ -0,0 +1,49 @@
+<template>
+  <n-input v-model:value="value">
+    <template #suffix>
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-button
+            quaternary
+            circle
+            @click="onCopyClicked"
+          >
+            <n-icon :component="ContentCopyFilled" />
+          </n-button>
+        </template>
+        {{ tooltipText }}
+      </n-tooltip>
+    </template> 
+  </n-input>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { ContentCopyFilled } from '@vicons/material'
+
+import { useClipboard } from '@vueuse/core';
+import { ref } from 'vue';
+
+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)
+}
+</script>
+
+<style scoped>
+::v-deep(.n-input-wrapper) {
+    padding-right: 5px;
+}
+</style>
\ No newline at end of file