<div id="app" class="bg-grey-lighter px-8 py-16 min-h-screen">
<div class="max-w-sm w-full mx-auto">
<renderless-tags-input v-model="tags">
<div class="tags-input" slot-scope="{ tags, removeTag, inputAttrs, inputEvents }">
<span class="tags-input-tag" v-for="tag in tags">
<span>{{ tag }}</span>
<button type="button" class="tags-input-remove" @click="removeTag(tag)">×</button>
</span>
<input class="tags-input-text" placeholder="Add tag..." v-on="inputEvents" v-bind="inputAttrs">
</div>
</renderless-tags-input>
</div>
</div>
.tags-input {
display: flex;
flex-wrap: wrap;
background-color: #fff;
border-width: 1px;
border-radius: .25rem;
padding-left: .5rem;
padding-right: 1rem;
padding-top: .5rem;
padding-bottom: .25rem;
}
.tags-input-tag {
display: inline-flex;
line-height: 1;
align-items: center;
font-size: .875rem;
background-color: #bcdefa;
color: #1c3d5a;
border-radius: .25rem;
user-select: none;
padding: .25rem;
margin-right: .5rem;
margin-bottom: .25rem;
}
.tags-input-tag:last-of-type {
margin-right: 0;
}
.tags-input-remove {
color: #2779bd;
font-size: 1.125rem;
line-height: 1;
}
.tags-input-remove:first-child {
margin-right: .25rem;
}
.tags-input-remove:last-child {
margin-left: .25rem;
}
.tags-input-remove:focus {
outline: 0;
}
.tags-input-text {
flex: 1;
outline: 0;
padding-top: .25rem;
padding-bottom: .25rem;
margin-left: .5rem;
margin-bottom: .25rem;
min-width: 10rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
Vue.component('renderless-tags-input', {
props: ['value'],
data() {
return {
newTag: '',
}
},
methods: {
addTag() {
if (this.newTag.trim().length === 0 || this.value.includes(this.newTag.trim())) {
return
}
this.$emit('input', [...this.value, this.newTag.trim()])
this.newTag = ''
},
removeTag(tag) {
this.$emit('input', this.value.filter(t => t !== tag))
}
},
render() {
return this.$scopedSlots.default({
tags: this.value,
addTag: this.addTag,
removeTag: this.removeTag,
inputAttrs: {
value: this.newTag,
},
inputEvents: {
input: (e) => { this.newTag = e.target.value },
keydown: (e) => {
if (e.keyCode === 13) {
e.preventDefault()
this.addTag()
}
}
}
})
},
})
new Vue({
el: '#app',
data: {
tags: ['Testing', 'Design']
}
})
View Compiled