feat(ux): copyable input

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

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