2020-02-29 02:21:36 +01:00
|
|
|
|
<div class="svelte-tags-input-layout">
|
2020-02-29 02:00:32 +01:00
|
|
|
|
{#each tags as tag, index}
|
2020-02-29 02:21:36 +01:00
|
|
|
|
<span class="svelte-tags-input-tag">{tag} <span class="svelte-tags-input-tag-remove" on:click={() => remove(index)}>×</span></span>
|
2020-02-29 02:00:32 +01:00
|
|
|
|
{/each}
|
2020-02-29 02:21:36 +01:00
|
|
|
|
<input type="text" class="svelte-tags-input" on:keydown={onKeyDown} />
|
2020-02-29 02:00:32 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { createEventDispatcher } from 'svelte'
|
|
|
|
|
|
|
|
|
|
export let value = []
|
|
|
|
|
|
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
|
|
|
|
|
|
$: tags = value
|
|
|
|
|
|
|
|
|
|
const add = tag => {
|
|
|
|
|
tags = [...tags, tag]
|
2020-03-04 01:10:36 +01:00
|
|
|
|
dispatch('change', tags)
|
2020-02-29 02:00:32 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const remove = index => {
|
|
|
|
|
tags = [...tags.slice(0, index), ...tags.slice(index + 1)]
|
2020-03-04 01:10:36 +01:00
|
|
|
|
dispatch('change', tags)
|
2020-02-29 02:00:32 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onKeyDown = event => {
|
|
|
|
|
const { keyCode, target: { value } } = event
|
|
|
|
|
|
|
|
|
|
switch (keyCode) {
|
|
|
|
|
case 13:
|
2020-03-04 01:10:36 +01:00
|
|
|
|
if (value === '') {
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
case 32:
|
|
|
|
|
case 188:
|
2020-02-29 02:00:32 +01:00
|
|
|
|
event.preventDefault()
|
|
|
|
|
|
|
|
|
|
if (value !== '' && tags.indexOf(value) === -1) {
|
|
|
|
|
add(value)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
event.target.value = ''
|
|
|
|
|
break
|
|
|
|
|
|
|
|
|
|
case 8:
|
|
|
|
|
if (tags.length > 0 && value === '') {
|
|
|
|
|
remove(tags.length - 1)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|