Svelte component

README.md

Svelte component

This gist was generated by the Svelte REPL. Visit https://svelte.technology/repl?gist=this_gist_id to see it.

App.html

<div>
  {{#each tags as tag}}<span class="tag">{{tag}}<i on:click="remove(tag)"/></span> {{/each}}
  <input type="text" on:keyup="update(event.key)" ref:input placeholder="Tags (separate with commas)">
</div>

<script>
  export default {
    methods: {
      remove(tag) {
        this.set({
          tags: this.get('tags').filter(t => t !== tag)
        });
      },
      update(key) {
        if(key !== ',') return;
        let value = this.refs.input.value.trim();
        let tags = this.get('tags');
        value.split(',').map(x => tags.includes(x) || x && tags.push(x));
        this.set({'tags': tags});
        this.refs.input.value = '';
      },
      addTag() {
        let value = this.refs.input.value.trim();
        if(!value) return;
        let tags = this.get('tags');
        tags.includes(value) || tags.push(value);
        this.set({'tags': tags});
        this.refs.input.value = '';
      }
    }
  }
</script>

<style>
  div {
   display: flex;
   flex-wrap: wrap;
   line-height: 1.5;
   vertical-align: baseline;
	}
  input {
   min-width: 6em;
   flex: 1 1 0;
   margin: 0.2em 0.2em;
  }

  .tag {
    background-color: #efefef;
    border: 1px solid #cdcfd3;
    margin: 0.2em 0.2em;
    padding: 0.2em 0.2em;
    border-radius: 1em;
    white-space: nowrap;
  }
  .tag i:hover {
    font-weight: bold;
    cursor: pointer;
  }
  .tag i:before {
    content: ' \24e7';
    font-style: normal;
    font-size: larger;
    color:red;
  }
</style>

data.json

{
  "tags": [
    "fun",
    "stuff",
    "is",
    "super",
    "holy",
    "cow",
    "this",
    "is .  ",
    "varrry",
    "fast"
  ]
}