noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust chipsinput styling

Browse Source
This commit is contained in:
Colin Kallemein
2024-07-21 15:47:31 +02:00
parent efeef80c02
commit 25e16870b9
2 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/forms/ChipsInput.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
<div v-for="(chip, i) in modelValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
<span>{{ chip }}</span>
<i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
<div class="flex flex-wrap items-center input-cyan ">
<div v-for="(chip, i) in modelValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
<span class="text-xs">{{ chip }}</span>
<i class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
</div>
<input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keypress.enter.prevent="saveChip" @keydown.delete="backspaceDelete" />
<input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="saveChip" @keydown.delete="backspaceDelete" />
</div>
</template>