From 418848bae8e0d8d235aaf676d99108df0581c845 Mon Sep 17 00:00:00 2001
From: wryk <wryk@wryk.moe>
Date: Sat, 29 Feb 2020 02:00:32 +0100
Subject: [PATCH] wip tag input

---
 src/components/Settings.svelte |  9 +++---
 src/components/TagInput.svelte | 50 ++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/components/TagInput.svelte

diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
index ab99335..5de8688 100644
--- a/src/components/Settings.svelte
+++ b/src/components/Settings.svelte
@@ -17,9 +17,7 @@
                 <div class="settings-side__subtitle">What hashtags are fetched</div>
             </div>
             <div class="settings-main">
-                <Tags
-                    allowPaste={true}
-                />
+                <TagInput on:change={e => a = e.detail} value={a}/>
             </div>
         </div>
         <div class="settings-line">
@@ -48,7 +46,10 @@
 <script>
     import Portal from 'svelte-portal'
     import ContextPage from '/components/ContextPage'
-    import Tags from "svelte-tags-input";
+    import TagInput from '/components/TagInput'
+
+    let a = ['I', 'love', 'u']
+    $: console.log(a)
 
     let open = false
 
diff --git a/src/components/TagInput.svelte b/src/components/TagInput.svelte
new file mode 100644
index 0000000..f875b7e
--- /dev/null
+++ b/src/components/TagInput.svelte
@@ -0,0 +1,50 @@
+<div class="">
+    {#each tags as tag, index}
+        <span>{tag} <span class="" on:click={() => remove(index)}>×</span></span>
+    {/each}
+
+    <input type="text" on:keydown={onKeyDown} />
+</div>
+
+<script>
+    import { createEventDispatcher } from 'svelte'
+
+    export let value = []
+
+    const dispatch = createEventDispatcher()
+
+    $: tags = value
+
+    const add = tag => {
+        tags = [...tags, tag]
+        dispatch('change', tags)
+    }
+
+    const remove = index => {
+        tags = [...tags.slice(0, index), ...tags.slice(index + 1)]
+        dispatch('change', tags)
+    }
+
+    const onKeyDown = event => {
+        const { keyCode, target: { value } } = event
+
+        switch (keyCode) {
+            case 13:
+                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>
\ No newline at end of file