Number Input Field

src/App.svelte

@@ -36,7 +36,7 @@
   .window {
     display: grid;
     grid-template-areas: "Nav Main";
-    grid-template-columns: 4rem calc(100% - 4rem);
+    grid-template-columns: 66px calc(100% - 66px);
     box-sizing: border-box;
     width: 100vw;
     height: 100vh;

src/lib/IntegerInput.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    export let id: string;
+    export let value: number;
+
+    export let negative = false;
+
+    function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) {
+        let newValue = event.currentTarget.value;
+
+        if (newValue.startsWith("0") && newValue.length > 1) {
+            newValue = newValue.slice(1, newValue.length)
+        }
+
+        if (!isNaN(Number(newValue))) {
+            value = Number(newValue);
+        }
+        else if (negative && newValue.startsWith("-")) {
+            if (isNaN(Number(newValue.slice(1, newValue.length)))) {
+                event.currentTarget.value = value.toString();
+            }
+        }
+        else if (newValue === "") {
+            event.currentTarget.value = "0";
+            value = 0;
+        }
+        else {
+            event.currentTarget.value = value.toString();
+        }
+    }
+</script>
+
+<input {id} type="text" class="digitInput" style="--valuelen: {value.toString().length + 3}ch" on:input|preventDefault={inputInteger} {value}>
+
+<style>
+    .digitInput {
+        width: var(--valuelen);
+        padding-left: 1ch;
+    }
+</style>

src/lib/MetadataInput.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
+  import {writable} from "svelte/store";
+  import type {Writable} from "svelte/store";
+  import IntegerInput from "./IntegerInput.svelte";
 
+  let volumeNumber = 0;
+  let chapterNumber = 0;
+  let pageCount = 0;
+  let chapterCount = 0;
 </script>
 
 <div class="metadataInput">
@@ -12,14 +19,14 @@
   <input id="title" type="text"><br>
 
   <label for="volume">Volume:</label>
-  <input id="volume" type="text">
+  <IntegerInput id="volume" bind:value={volumeNumber} />
   <label for="chapter">Chapter:</label>
-  <input id="chapter" type="text"> /
+  <IntegerInput id="chapter" bind:value={chapterNumber} /> /
 
-  <input id="chapter_count" type="text"><br>
+  <IntegerInput id="chapter_count" bind:value={chapterCount} negative={true}/><br>
 
   <label for="page_count">Page Count</label>
-  <input id="page_count" type="text"><br>
+  <IntegerInput id="page_count" bind:value={pageCount} /><br>
 
   <label for="summary">Summary:</label><br>
   <label for="summary"></label><input id="series" type="text"><br>

src/lib/Sidebar.svelte

@@ -22,14 +22,14 @@
         display: flex;
         flex-direction: column;
         border-right: 2px solid black;
+        width: 66px;
     }
 
     .sidebar-button {
         border: 2px solid transparent;
         border-radius: 0;
-        width: 100%;
+        width: 64px;
-        height: auto;
+        height: 64px;
-        aspect-ratio: 1;
         background-color: grey;
         transition: border-color 0.25s;
         cursor: pointer;

src/styles.css

@@ -71,6 +71,7 @@ h1 {
   text-align: center;
 }
 
+/*
 input,
 button {
   border-radius: 8px;
@@ -84,6 +85,7 @@ button {
   transition: border-color 0.25s;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
 }
+*/
 
 button {
   cursor: pointer;
@@ -97,10 +99,10 @@ button:active {
   background-color: #e8e8e8;
 }
 
-input,
+/*input,
 button {
   outline: none;
-}
+}*/
 
 #greet-input {
   margin-right: 5px;