mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-08-09 15:35: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: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']
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue