1
0
forked from noxious/client

npm update & npm run format

This commit is contained in:
2024-09-10 12:58:30 +02:00
parent c03c71a1b5
commit 5edf197533
17 changed files with 329 additions and 337 deletions

View File

@ -2,22 +2,9 @@
<div class="flex flex-wrap items-center input-cyan gap-1">
<div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
<span class="text-xs">{{ chip }}</span>
<button
type="button"
class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50"
@click="deleteChip(i)"
aria-label="Remove chip"
>
×
</button>
<button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)" aria-label="Remove chip">×</button>
</div>
<input
class="outline-none border-none p-1"
placeholder="Tag name"
v-model="currentInput"
@keypress.enter.prevent="addChip"
@keydown.backspace="handleBackspace"
/>
<input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
</div>
</template>
@ -41,9 +28,13 @@ const currentInput: Ref<string> = ref('')
const internalValue = ref<string[]>([])
// Initialize internalValue with props.modelValue
watch(() => props.modelValue, (newValue) => {
internalValue.value = newValue ? [...newValue] : []
}, { immediate: true })
watch(
() => props.modelValue,
(newValue) => {
internalValue.value = newValue ? [...newValue] : []
},
{ immediate: true }
)
const addChip = () => {
const trimmedInput = currentInput.value.trim()
@ -65,4 +56,4 @@ const handleBackspace = (event: KeyboardEvent) => {
emit('update:modelValue', internalValue.value)
}
}
</script>
</script>