1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-08-09 07:25:18 +02:00

fix: Output input style optimization

This commit is contained in:
Jeffrey 2024-05-28 14:32:28 +08:00
parent 316da760c9
commit a17d70e4d0
No known key found for this signature in database
GPG key ID: 4EBDD62196D54E75
2 changed files with 11 additions and 4 deletions

1
components.d.ts vendored
View file

@ -92,6 +92,7 @@ declare module '@vue/runtime-core' {
'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default'] 'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default'] 'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['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'] IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default'] IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
IconMdiClose: typeof import('~icons/mdi/close')['default'] IconMdiClose: typeof import('~icons/mdi/close')['default']

View file

@ -1,6 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { useCopy } from '@/composable/copy';
const inputValue = ref(''); const inputValue = ref('');
const outputValue = ref(''); const outputValue = ref('');
const { copy } = useCopy({ source: outputValue, text: 'Output copied to the clipboard' });
function toSentenceCase(input: string) { function toSentenceCase(input: string) {
return input.replace(/.+?[\.\?\!](\s|$)/g, (sentence) => { return input.replace(/.+?[\.\?\!](\s|$)/g, (sentence) => {
@ -49,8 +52,8 @@ function handleCaseChange(type: string) {
<template> <template>
<div> <div>
<c-input-text <c-input-text
v-model:value="inputValue" rows="3" placeholder="Enter your text..." v-model:value="inputValue" label="Input" rows="3" placeholder="Enter your text..." multiline monospace
multiline monospace autosize mt-5 autosize mt-5
/> />
</div> </div>
@ -82,7 +85,10 @@ function handleCaseChange(type: string) {
</c-button> </c-button>
</div> </div>
</div> </div>
<div> <c-input-text :value="outputValue" rows="3" label="Output" readonly multiline monospace autosize mt-5 />
<TextareaCopyable :value="outputValue" mb-1 mt-1 copy-placement="outside" /> <div mt-5 flex justify-center>
<c-button @click="copy()">
Copy Output
</c-button>
</div> </div>
</template> </template>