From a17d70e4d0f38da5f77f803ebf5d65d0cdc82145 Mon Sep 17 00:00:00 2001
From: Jeffrey <1115378579@qq.com>
Date: Tue, 28 May 2024 14:32:28 +0800
Subject: [PATCH] fix: Output input style optimization

---
 components.d.ts                                    |  1 +
 .../text-case-converter/text-case-converter.vue    | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 489a3ef8..565278d7 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -92,6 +92,7 @@ declare module '@vue/runtime-core' {
     'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
     IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
diff --git a/src/tools/text-case-converter/text-case-converter.vue b/src/tools/text-case-converter/text-case-converter.vue
index 36107b42..cb4cfb95 100644
--- a/src/tools/text-case-converter/text-case-converter.vue
+++ b/src/tools/text-case-converter/text-case-converter.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+
 const inputValue = ref('');
 const outputValue = ref('');
+const { copy } = useCopy({ source: outputValue, text: 'Output copied to the clipboard' });
 
 function toSentenceCase(input: string) {
   return input.replace(/.+?[\.\?\!](\s|$)/g, (sentence) => {
@@ -49,8 +52,8 @@ function handleCaseChange(type: string) {
 <template>
   <div>
     <c-input-text
-      v-model:value="inputValue" rows="3" placeholder="Enter your text..."
-      multiline monospace autosize mt-5
+      v-model:value="inputValue" label="Input" rows="3" placeholder="Enter your text..." multiline monospace
+      autosize mt-5
     />
   </div>
 
@@ -82,7 +85,10 @@ function handleCaseChange(type: string) {
       </c-button>
     </div>
   </div>
-  <div>
-    <TextareaCopyable :value="outputValue" mb-1 mt-1 copy-placement="outside" />
+  <c-input-text :value="outputValue" rows="3" label="Output" readonly multiline monospace autosize mt-5 />
+  <div mt-5 flex justify-center>
+    <c-button @click="copy()">
+      Copy Output
+    </c-button>
   </div>
 </template>