mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-26 01:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(ux): copyable input

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-16 01:15:23 +02:00
parent 7a7372df19
commit 1859a9a174
No known key found for this signature in database
GPG key ID: DBD997E935996158
5 changed files with 79 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/tools/case-converter/case-converter.vue
View file

@ -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,

15
src/tools/color-converter/color-converter.vue
View file

@ -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";

3
src/tools/date-time-converter/date-time-converter.vue
View file

@ -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('')

13
src/tools/integer-base-converter/integer-base-converter.vue
View file

@ -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)