SPA & Text Inputs
This commit is contained in:
parent
c7375caef1
commit
85f86a36e8
10 changed files with 80 additions and 21 deletions
|
@ -14,14 +14,15 @@
|
|||
"@tauri-apps/api": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-static": "^2.0.3",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.4.2",
|
||||
"@tauri-apps/cli": "^1.4.0",
|
||||
"@tsconfig/svelte": "^5.0.0",
|
||||
"svelte": "^4.0.5",
|
||||
"svelte-check": "^3.4.6",
|
||||
"svelte-preprocess": "^5.0.0",
|
||||
"tslib": "^2.6.0",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.4",
|
||||
"@tauri-apps/cli": "^1.4.0"
|
||||
"vite": "^4.4.4"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"beforeDevCommand": "yarn dev",
|
||||
"beforeBuildCommand": "yarn build",
|
||||
"devPath": "http://localhost:1420",
|
||||
"distDir": "../dist",
|
||||
"distDir": "../build",
|
||||
"withGlobalTauri": false
|
||||
},
|
||||
"package": {
|
||||
|
@ -21,7 +21,7 @@
|
|||
"bundle": {
|
||||
"active": true,
|
||||
"targets": "all",
|
||||
"identifier": "com.tauri.dev",
|
||||
"identifier": "com.comicinfo.editor",
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
|
|
2
src/+layout.ts
Normal file
2
src/+layout.ts
Normal file
|
@ -0,0 +1,2 @@
|
|||
export const prerender = true
|
||||
export const ssr = false
|
|
@ -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();
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -36,8 +36,8 @@
|
|||
}
|
||||
|
||||
.sidebar-button img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
|
18
src/lib/TextInput.svelte
Normal file
18
src/lib/TextInput.svelte
Normal file
|
@ -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>
|
|
@ -1,5 +1,5 @@
|
|||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family: Courier New;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
@ -23,6 +23,7 @@ body, html {
|
|||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.app {
|
||||
|
|
|
@ -1,7 +1,15 @@
|
|||
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
|
||||
export default {
|
||||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
kit: {
|
||||
adapter: adapter({
|
||||
pages: 'build',
|
||||
assets: 'build',
|
||||
fallback: 'index.html'
|
||||
})
|
||||
},
|
||||
};
|
||||
|
|
|
@ -173,6 +173,11 @@
|
|||
"@nodelib/fs.scandir" "2.1.5"
|
||||
fastq "^1.6.0"
|
||||
|
||||
"@sveltejs/adapter-static@^2.0.3":
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-2.0.3.tgz#616836c30bdce4d673a2e26c0f5ffbd5c1bc7c67"
|
||||
integrity sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==
|
||||
|
||||
"@sveltejs/vite-plugin-svelte-inspector@^1.0.4":
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz#c99fcb73aaa845a3e2c0563409aeb3ee0b863add"
|
||||
|
|
Reference in a new issue