SPA & Text Inputs

src/lib/IntegerInput.svelte

@@ -4,6 +4,12 @@
 
     export let negative = false;
 
+    export let defaultValue = 0;
+
+    if (typeof value === "undefined") {
+        value = defaultValue;
+    }
+
     function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) {
         let newValue = event.currentTarget.value;
 
@@ -11,7 +17,7 @@
             newValue = newValue.slice(1, newValue.length)
         }
 
-        if (!isNaN(Number(newValue))) {
+        if (newValue != "" && !isNaN(Number(newValue))) {
             value = Number(newValue);
         }
         else if (negative && newValue.startsWith("-")) {
@@ -20,8 +26,8 @@
             }
         }
         else if (newValue === "") {
-            event.currentTarget.value = "0";
-            value = 0;
+            event.currentTarget.value = defaultValue.toString();
+            value = defaultValue;
         }
         else {
             event.currentTarget.value = value.toString();

src/lib/MetadataInput.svelte

@@ -2,21 +2,37 @@
   import {writable} from "svelte/store";
   import type {Writable} from "svelte/store";
   import IntegerInput from "./IntegerInput.svelte";
+  import TextInput from "./TextInput.svelte";
 
+  let seriesTitle = "";
+  let volumeTitle = "";
   let volumeNumber = 0;
   let chapterNumber = 0;
-  let pageCount = 0;
+  let pageCount = 1;
   let chapterCount = 0;
+  let summary = "";
+  let releaseYear: number;
+  let releaseMonth: number;
+  let releaseDay: number;
+  let author: string;
+  let typesetter: string;
+  let editor: string;
+  let translator: string;
+  let publisher: string;
+  let tags: Vec<string>;
+  let genre = "Hentai";
+  let lang = "en";
+  let ageRating = "18+";
 </script>
 
 <div class="metadataInput">
   <h1>Metadata</h1>
 
   <label for="series">Series:</label>
-  <input id="series" type="text"><br>
+  <TextInput id="series" bind:value={seriesTitle} placeholder="Series Title" /><br>
 
   <label for="title">Title:</label>
-  <input id="title" type="text"><br>
+  <TextInput id="title" bind:value={volumeTitle} placeholder="Volume Title" /><br>
 
   <label for="volume">Volume:</label>
   <IntegerInput id="volume" bind:value={volumeNumber} />
@@ -26,34 +42,36 @@
   <IntegerInput id="chapter_count" bind:value={chapterCount} negative={true}/><br>
 
   <label for="page_count">Page Count</label>
-  <IntegerInput id="page_count" bind:value={pageCount} /><br>
+  <IntegerInput id="page_count" bind:value={pageCount} defaultValue={1} /><br>
 
   <label for="summary">Summary:</label><br>
   <label for="summary"></label><input id="series" type="text"><br>
 
   <label for="release_date">Release Date:</label>
-  <input id="release_date" type="text"><br>
+  <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>
 
   <label for="author">Author:</label>
-  <input id="author" type="text">
+  <TextInput id="author" bind:value={author} placeholder="Author" />
 
   <label for="typesetter">Typesetter:</label>
-  <input id="typesetter" type="text">
+  <TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" />
 
   <label for="editor">Editor:</label>
-  <input id="editor" type="text"><br>
+  <TextInput id="editor" bind:value={editor} placeholder="Editor" /><br>
 
   <label for="translator">Translator</label>
-  <input id="translator" type="text">
+  <TextInput id="translator" bind:value={translator} placeholder="Translator" />
 
   <label for="publisher">Publisher</label>
-  <input id="publisher" type="text"><br>
+  <TextInput id="publisher" bind:value={publisher} placeholder="Publisher" /><br>
 
   <label for="tags">Tags</label>
   <input id="tags" type="text"><br>
 
   <label for="genre">Genre</label>
-  <input id="genre" type="text">
+  <TextInput id="genre" bind:value={genre} placeholder="Genre" />
 
   <label for="lang">Language</label>
   <input id="lang" type="text"><br>

src/lib/Sidebar.svelte

@@ -36,8 +36,8 @@
     }
 
     .sidebar-button img {
-        width: 100%;
-        height: 100%;
+        width: 70%;
+        height: 70%;
         object-fit: contain;
     }
 

src/lib/TextInput.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    export let id: string;
+    export let value: string = "";
+    export let placeholder: string = "";
+
+    let width: number;
+
+    $: width = Math.max(value.length + 3, placeholder.length + 3);
+</script>
+
+<input {id} type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value} {placeholder}>
+
+<style>
+    .letterInput {
+        width: var(--valuelen);
+        padding-left: 1ch;
+    }
+</style>