|
<html> |
|
<head> |
|
<meta charset="utf-8"/> |
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" |
|
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> |
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script> |
|
</head> |
|
<body> |
|
<div class="row"> |
|
<div class="col-12 col-md-6 mx-auto"> |
|
<div x-data="Tags()" class="p-3" style="background-color: #e5e5e5"> |
|
<template x-for="tag in tags"> |
|
<input type="hidden" name="tags[]" :value="tag"> |
|
</template> |
|
<div class="form-control"> |
|
<div class="bg-white"> |
|
<template x-for="tag in tags" :key="tag"> |
|
<span class="badge p-1 me-1 my-1 bg-primary text-white"> |
|
<span x-text="tag"></span> |
|
<span type="button" class="btn btn-sm p-0 m-0 text-white" |
|
@click="remove(tag)">×</span> |
|
</span> |
|
</template> |
|
|
|
<input class="border-0 w-auto bg-transparent" style="outline: none;" |
|
placeholder="Add tag..." |
|
@keydown.enter.prevent="add($event)" |
|
@keydown.backspace="removeLast" |
|
x-model="newTag" |
|
/> |
|
<button type="button" class="btn btn-sm btn-danger m-0" |
|
@click="removeAllPrompt=true" x-show="tags.length>0 && !removeAllPrompt"> |
|
Remove All |
|
</button> |
|
<div class="btn-toolbar" :class="removeAllPrompt ? 'd-inline-block' : 'd-none' " role="toolbar" |
|
aria-label="" |
|
x-cloak |
|
> |
|
<div class="btn-group btn-group-sm" role="group" aria-label=""> |
|
<div class="input-group-text" id="btnGroupAddon">CLear all tags?</div> |
|
<button type="button" class="btn btn-outline-success" |
|
@click="removeAllPrompt=false">No |
|
</button> |
|
<button type="button" class="btn btn-outline-danger" |
|
@click="removeAll">Yes |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<small class="form-text text-danger" id="tagsHelp" |
|
x-html="error" |
|
></small> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
let Tags = function () { |
|
return { |
|
newTag: '', |
|
tags: [], |
|
error: '', |
|
removeAllPrompt: false, |
|
add(event) { |
|
let newTag = event.target.value; |
|
if (newTag.trim() === ''){ |
|
this.error = 'Please enter a tag.'; |
|
return; |
|
} |
|
|
|
if (!this.tags.includes(newTag)) { |
|
this.error = ''; |
|
this.tags.push(newTag.trim()); |
|
} else { |
|
this.error = `The tag <strong>${this.newTag}</strong> aready exists.`; |
|
} |
|
|
|
this.newTag = '' |
|
this.removeAllPrompt = false; |
|
}, |
|
|
|
removeLast(event) { |
|
let newTag = event.target.value; |
|
if (newTag.trim() === '') { |
|
this.tags.pop() |
|
} |
|
this.removeAllPrompt = false; |
|
}, |
|
remove(tag) { |
|
this.tags = this.tags.filter(i => i !== tag) |
|
this.removeAllPrompt = false; |
|
}, |
|
removeAll() { |
|
this.tags = [] |
|
this.removeAllPrompt = false; |
|
}, |
|
} |
|
} |
|
</script> |
|
</body> |
|
</html> |
