Number Input Field

This commit is contained in:
Neshura 2023-10-11 21:17:03 +02:00
parent 9dcc10a191
commit c7375caef1
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
5 changed files with 58 additions and 10 deletions

View file

@ -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;

View file

@ -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>

View file

@ -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>

View file

@ -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%;
height: auto;
aspect-ratio: 1;
width: 64px;
height: 64px;
background-color: grey;
transition: border-color 0.25s;
cursor: pointer;

View file

@ -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;