mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-08-08 23:15:19 +02:00
fix: Output input style optimization
This commit is contained in:
parent
316da760c9
commit
a17d70e4d0
2 changed files with 11 additions and 4 deletions
1
components.d.ts
vendored
1
components.d.ts
vendored
|
@ -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']
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue