Number Input Field
This commit is contained in:
parent
9dcc10a191
commit
c7375caef1
5 changed files with 58 additions and 10 deletions
|
@ -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;
|
||||
|
|
39
src/lib/IntegerInput.svelte
Normal file
39
src/lib/IntegerInput.svelte
Normal 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>
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in a new issue