95 lines
2.3 KiB
Vue
95 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex flex-wrap gap-1">
|
|
<Button
|
|
ref="emails"
|
|
v-for="value in values"
|
|
:key="value"
|
|
:label="value"
|
|
theme="gray"
|
|
variant="subtle"
|
|
class="rounded-full"
|
|
@keydown.delete.capture.stop="removeLastValue"
|
|
>
|
|
<template #suffix>
|
|
<FeatherIcon
|
|
class="h-3.5"
|
|
name="x"
|
|
@click.stop="removeValue(value)"
|
|
/>
|
|
</template>
|
|
</Button>
|
|
<TextInput
|
|
class="min-w-20 flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
|
|
v-model="currentValue"
|
|
@keydown.enter.capture.stop="addValue"
|
|
@keydown.tab.capture.stop="addValue"
|
|
@keydown.delete.capture.stop="removeLastValue"
|
|
/>
|
|
</div>
|
|
<ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineModel } from 'vue'
|
|
|
|
const props = defineProps({
|
|
validate: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
errorMessage: {
|
|
type: Function,
|
|
default: (value) => `${value} is an Invalid value`,
|
|
},
|
|
})
|
|
|
|
const values = defineModel()
|
|
const currentValue = ref('')
|
|
|
|
const emails = ref([])
|
|
const search = ref(null)
|
|
const error = ref(null)
|
|
|
|
const addValue = () => {
|
|
error.value = null
|
|
if (currentValue.value) {
|
|
const splitValues = currentValue.value.split(',')
|
|
splitValues.forEach((value) => {
|
|
value = value.trim()
|
|
if (value) {
|
|
// check if value is not already in the values array
|
|
if (!values.value.includes(value)) {
|
|
// check if value is valid
|
|
if (value && props.validate && !props.validate(value)) {
|
|
error.value = props.errorMessage(value)
|
|
return
|
|
}
|
|
// add value to values array
|
|
values.value.push(value)
|
|
currentValue.value = currentValue.value.replace(value, '')
|
|
}
|
|
}
|
|
})
|
|
!error.value && (currentValue.value = '')
|
|
}
|
|
}
|
|
|
|
const removeValue = (value) => {
|
|
values.value = values.value.filter((v) => v !== value)
|
|
}
|
|
|
|
const removeLastValue = () => {
|
|
if (!currentValue.value) {
|
|
values.value.pop()
|
|
}
|
|
}
|
|
|
|
function setFocus() {
|
|
search.value.$el.focus()
|
|
}
|
|
|
|
defineExpose({ setFocus })
|
|
</script>
|