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

More Tailwind conversion

Browse Source
This commit is contained in:
Colin Kallemein
2024-07-06 18:47:07 +02:00
parent c544e0a12a
commit f40297485f
9 changed files with 35 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<template>
<div class="chip-container">
<div v-for="(chip, i) in modelValue" :key="i" class="chip">
<div class="chip-container flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
<div v-for="(chip, i) in modelValue" :key="i" class="chip flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
<span>{{ chip }}</span>
<i class="delete-icon" @click="deleteChip(i)">X</i>
<i class="delete-icon 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" @keyup.enter="saveChip" @keydown.delete="backspaceDelete" />
</div>
@ -31,36 +31,4 @@ const backspaceDelete = (event) => {
modelValue.value = modelValue.value.slice(0, -1)
}
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/main.scss';
.chip-container {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid #e0e0e0;
.chip {
display: flex;
gap: 10px;
align-items: center;
background-color: $cyan;
border-radius: 5px;
padding: 5px 10px;
margin: 4px;
.delete-icon {
cursor: pointer;
color: $white;
font-weight: 300;
font-family: $default;
font-style: normal;
&:hover {
color: $light-gray;
}
}
}
}
</style>
</script>