Tags Input + Improved Date Input

src/lib/ListTextInput/ListTextInputElement.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+    export let id: number;
+    export let value: string;
+
+    let width: number;
+
+    $: width = Math.max(value.length + 3, 6);
+
+    const handleClick = () => {
+        dispatch('deleted', {
+            tagId: id,
+        });
+    }
+</script>
+
+<input id="tag-{id}" type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value}>
+<button on:click={handleClick}>X</button>
+
+<style>
+    .letterInput {
+        width: var(--valuelen);
+        padding-left: 1ch;
+    }
+</style>

src/lib/ListTextInput/NewListTextInput.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let id: string;
+    export let value: string;
+
+    const handleClick = () => {
+        value = "";
+    }
+</script>
+
+<button {id} class="letterInput" on:click={handleClick}>+</button>
+
+<style>
+    .letterInput {
+        padding-left: 1ch;
+    }
+</style>

src/lib/MetadataInput.svelte

@@ -3,6 +3,8 @@
   import type {Writable} from "svelte/store";
   import IntegerInput from "./IntegerInput.svelte";
   import TextInput from "./TextInput.svelte";
+  import NewListTextInput from "./ListTextInput/NewListTextInput.svelte";
+  import ListTextInputElement from "./ListTextInput/ListTextInputElement.svelte";
 
   let seriesTitle = "";
   let volumeTitle = "";
@@ -19,10 +21,25 @@
   let editor: string;
   let translator: string;
   let publisher: string;
-  let tags: Vec<string>;
+  let tags: Array<string> = [];
   let genre = "Hentai";
   let lang = "en";
   let ageRating = "18+";
+
+  $: {
+    if (releaseYear < 0) {
+      releaseMonth = -1;
+    }
+    if (releaseMonth < 0) {
+      releaseDay = -1;
+    }
+  }
+
+  function deleteTag(event: any) {
+    console.log("deleted")
+    tags.splice(event.detail.tagId, 1);
+    tags = tags;
+  }
 </script>
 
 <div class="metadataInput">
@@ -49,26 +66,36 @@
 
   <label for="release_date">Release Date:</label>
   <IntegerInput id="release_year" bind:value={releaseYear} defaultValue={new Date().getFullYear()} />
-  <IntegerInput id="release_month" bind:value={releaseMonth} defaultValue={new Date().getMonth()} />
-  <IntegerInput id="release_day" bind:value={releaseDay} defaultValue={new Date().getDay()} /><br>
+  {#if releaseYear > 0}
+    <IntegerInput id="release_month" bind:value={releaseMonth} defaultValue={new Date().getMonth()} />
+    {#if releaseMonth > 0}
+      <IntegerInput id="release_day" bind:value={releaseDay} defaultValue={new Date().getDay()} />
+    {/if}
+  {/if}
+  <br>
+  <!--TODO: if date element is 0 do not display finer element, also set finer element to -1-->
 
   <label for="author">Author:</label>
-  <TextInput id="author" bind:value={author} placeholder="Author" />
+  <TextInput id="author" bind:value={author} placeholder="Author" /><br>
 
   <label for="typesetter">Typesetter:</label>
-  <TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" />
+  <TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" /><br>
 
   <label for="editor">Editor:</label>
   <TextInput id="editor" bind:value={editor} placeholder="Editor" /><br>
 
-  <label for="translator">Translator</label>
-  <TextInput id="translator" bind:value={translator} placeholder="Translator" />
+  <label for="translator">Translator:</label>
+  <TextInput id="translator" bind:value={translator} placeholder="Translator" /><br>
 
-  <label for="publisher">Publisher</label>
+  <label for="publisher">Publisher:</label>
   <TextInput id="publisher" bind:value={publisher} placeholder="Publisher" /><br>
 
-  <label for="tags">Tags</label>
-  <input id="tags" type="text"><br>
+  <label for="new-tag">Tags:</label>
+  <!-- List of Tags, New Button -->
+  {#each tags as tag, id}
+    <ListTextInputElement {id} bind:value={tag} on:deleted={deleteTag}/>
+  {/each}
+  <NewListTextInput id="new-tag" bind:value={tags[tags.length]}/><br>
 
   <label for="genre">Genre</label>
   <TextInput id="genre" bind:value={genre} placeholder="Genre" />