4 files changed, 30 insertions, 26 deletions
diff --git a/src/tools/case-converter/case-converter.vue b/src/tools/case-converter/case-converter.vue
index e4a8e02..ab8a211 100644
--- a/src/tools/case-converter/case-converter.vue
+++ b/src/tools/case-converter/case-converter.vue
@@ -11,39 +11,38 @@
 
       <n-divider />
 
-
       <n-form-item label="Camelcase:">
-        <n-input :value="camelCase(input)" />
+        <input-copyable :value="camelCase(input)" />
       </n-form-item>
       <n-form-item label="Capitalcase:">
-        <n-input :value="capitalCase(input)" />
+        <input-copyable :value="capitalCase(input)" />
       </n-form-item>
       <n-form-item label="Constantcase:">
-        <n-input :value="constantCase(input)" />
+        <input-copyable :value="constantCase(input)" />
       </n-form-item>
       <n-form-item label="Dotcase:">
-        <n-input :value="dotCase(input)" />
+        <input-copyable :value="dotCase(input)" />
       </n-form-item>
       <n-form-item label="Headercase:">
-        <n-input :value="headerCase(input)" />
+        <input-copyable :value="headerCase(input)" />
       </n-form-item>
       <n-form-item label="Nocase:">
-        <n-input :value="noCase(input)" />
+        <input-copyable :value="noCase(input)" />
       </n-form-item>
       <n-form-item label="Paramcase:">
-        <n-input :value="paramCase(input)" />
+        <input-copyable :value="paramCase(input)" />
       </n-form-item>
       <n-form-item label="Pascalcase:">
-        <n-input :value="pascalCase(input)" />
+        <input-copyable :value="pascalCase(input)" />
       </n-form-item>
       <n-form-item label="Pathcase:">
-        <n-input :value="pathCase(input)" />
+        <input-copyable :value="pathCase(input)" />
       </n-form-item>
       <n-form-item label="Sentencecase:">
-        <n-input :value="sentenceCase(input)" />
+        <input-copyable :value="sentenceCase(input)" />
       </n-form-item>
       <n-form-item label="Snakecase:">
-        <n-input :value="snakeCase(input)" />
+        <input-copyable :value="snakeCase(input)" />
       </n-form-item>
     </n-form>
   </n-card>
@@ -51,6 +50,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import InputCopyable from "../../components/InputCopyable.vue";
+
 import {
   camelCase,
   capitalCase,
diff --git a/src/tools/color-converter/color-converter.vue b/src/tools/color-converter/color-converter.vue
index 807ef99..1c29d73 100644
--- a/src/tools/color-converter/color-converter.vue
+++ b/src/tools/color-converter/color-converter.vue
@@ -12,43 +12,43 @@
         />
       </n-form-item>
       <n-form-item label="color name:">
-        <n-input
+        <input-copyable
           v-model:value="name"
           :on-input="(v: string) => onInputUpdated(v, 'name')"
         />
       </n-form-item>
       <n-form-item label="hex:">
-        <n-input
+        <input-copyable
           v-model:value="hex"
           :on-input="(v: string) => onInputUpdated(v, 'hex')"
         />
       </n-form-item>
       <n-form-item label="rgb:">
-        <n-input
+        <input-copyable
           v-model:value="rgb"
           :on-input="(v: string) => onInputUpdated(v, 'rgb')"
         />
       </n-form-item>
       <n-form-item label="hsl:">
-        <n-input
+        <input-copyable
           v-model:value="hsl"
           :on-input="(v: string) => onInputUpdated(v, 'hsl')"
         />
       </n-form-item>
       <n-form-item label="hwb:">
-        <n-input
+        <input-copyable
           v-model:value="hwb"
           :on-input="(v: string) => onInputUpdated(v, 'hwb')"
         />
       </n-form-item>
       <n-form-item label="lch:">
-        <n-input
+        <input-copyable
           v-model:value="lch"
           :on-input="(v: string) => onInputUpdated(v, 'lch')"
         />
       </n-form-item>
       <n-form-item label="cmyk:">
-        <n-input
+        <input-copyable
           v-model:value="cmyk"
           :on-input="(v: string) => onInputUpdated(v, 'cmyk')"
         />
@@ -60,6 +60,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { colord, extend } from "colord";
+import InputCopyable from "../../components/InputCopyable.vue";
 
 import cmykPlugin from "colord/plugins/cmyk";
 import hwbPlugin from "colord/plugins/hwb";
diff --git a/src/tools/date-time-converter/date-time-converter.vue b/src/tools/date-time-converter/date-time-converter.vue
index 00e5e41..dbc763b 100644
--- a/src/tools/date-time-converter/date-time-converter.vue
+++ b/src/tools/date-time-converter/date-time-converter.vue
@@ -40,7 +40,7 @@
           <n-input-group-label style="width: 150px;">
             {{ name }}
           </n-input-group-label>
-          <n-input :value="fromDate(date)" />
+          <input-copyable :value="fromDate(date)" />
         </n-input-group>
       </div>
     </n-card>
@@ -51,6 +51,7 @@
 import { useRafFn } from '@vueuse/core';
 import { formatISO, formatISO9075, formatRFC3339, formatRFC7231, fromUnixTime, getTime, getUnixTime, isDate, parseISO, parseJSON } from 'date-fns';
 import { ref } from 'vue'
+import InputCopyable from "../../components/InputCopyable.vue";
 
 const useCurrentDate = ref(true)
 const inputDate = ref('')
diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue
index 223ca00..abda8e7 100644
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -28,7 +28,7 @@
         <n-input-group-label style="width: 200px;">
           Binary (2):
         </n-input-group-label>
-        <n-input
+        <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })"
           readonly
         />
@@ -38,7 +38,7 @@
         <n-input-group-label style="width: 200px;">
           Octale (8):
         </n-input-group-label>
-        <n-input
+        <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })"
           readonly
         />
@@ -48,7 +48,7 @@
         <n-input-group-label style="width: 200px;">
           Decimal (10):
         </n-input-group-label>
-        <n-input
+        <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
           readonly
         />
@@ -58,7 +58,7 @@
         <n-input-group-label style="width: 200px;">
           Hexadecimal (16):
         </n-input-group-label>
-        <n-input
+        <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
           readonly
         />
@@ -68,7 +68,7 @@
         <n-input-group-label style="width: 200px;">
           Base64 (64):
         </n-input-group-label>
-        <n-input
+        <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
           readonly
         />
@@ -83,7 +83,7 @@
           max="64"
           min="2"
         />
-        <n-input
+        <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
           readonly
         />
@@ -95,6 +95,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { convertBase } from './integer-base-converter.model'
+import InputCopyable from "../../components/InputCopyable.vue";
 
 const inputNumber = ref(42)
 const inputBase = ref(10)