Tags Input + Improved Date Input
This commit is contained in:
parent
85f86a36e8
commit
2b5a19fdd6
3 changed files with 79 additions and 10 deletions
26
src/lib/ListTextInput/ListTextInputElement.svelte
Normal file
26
src/lib/ListTextInput/ListTextInputElement.svelte
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
export let id: number;
|
||||||
|
export let value: string;
|
||||||
|
|
||||||
|
let width: number;
|
||||||
|
|
||||||
|
$: width = Math.max(value.length + 3, 6);
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
dispatch('deleted', {
|
||||||
|
tagId: id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input id="tag-{id}" type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value}>
|
||||||
|
<button on:click={handleClick}>X</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.letterInput {
|
||||||
|
width: var(--valuelen);
|
||||||
|
padding-left: 1ch;
|
||||||
|
}
|
||||||
|
</style>
|
16
src/lib/ListTextInput/NewListTextInput.svelte
Normal file
16
src/lib/ListTextInput/NewListTextInput.svelte
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let id: string;
|
||||||
|
export let value: string;
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
value = "";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button {id} class="letterInput" on:click={handleClick}>+</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.letterInput {
|
||||||
|
padding-left: 1ch;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -3,6 +3,8 @@
|
||||||
import type {Writable} from "svelte/store";
|
import type {Writable} from "svelte/store";
|
||||||
import IntegerInput from "./IntegerInput.svelte";
|
import IntegerInput from "./IntegerInput.svelte";
|
||||||
import TextInput from "./TextInput.svelte";
|
import TextInput from "./TextInput.svelte";
|
||||||
|
import NewListTextInput from "./ListTextInput/NewListTextInput.svelte";
|
||||||
|
import ListTextInputElement from "./ListTextInput/ListTextInputElement.svelte";
|
||||||
|
|
||||||
let seriesTitle = "";
|
let seriesTitle = "";
|
||||||
let volumeTitle = "";
|
let volumeTitle = "";
|
||||||
|
@ -19,10 +21,25 @@
|
||||||
let editor: string;
|
let editor: string;
|
||||||
let translator: string;
|
let translator: string;
|
||||||
let publisher: string;
|
let publisher: string;
|
||||||
let tags: Vec<string>;
|
let tags: Array<string> = [];
|
||||||
let genre = "Hentai";
|
let genre = "Hentai";
|
||||||
let lang = "en";
|
let lang = "en";
|
||||||
let ageRating = "18+";
|
let ageRating = "18+";
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (releaseYear < 0) {
|
||||||
|
releaseMonth = -1;
|
||||||
|
}
|
||||||
|
if (releaseMonth < 0) {
|
||||||
|
releaseDay = -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteTag(event: any) {
|
||||||
|
console.log("deleted")
|
||||||
|
tags.splice(event.detail.tagId, 1);
|
||||||
|
tags = tags;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="metadataInput">
|
<div class="metadataInput">
|
||||||
|
@ -49,26 +66,36 @@
|
||||||
|
|
||||||
<label for="release_date">Release Date:</label>
|
<label for="release_date">Release Date:</label>
|
||||||
<IntegerInput id="release_year" bind:value={releaseYear} defaultValue={new Date().getFullYear()} />
|
<IntegerInput id="release_year" bind:value={releaseYear} defaultValue={new Date().getFullYear()} />
|
||||||
<IntegerInput id="release_month" bind:value={releaseMonth} defaultValue={new Date().getMonth()} />
|
{#if releaseYear > 0}
|
||||||
<IntegerInput id="release_day" bind:value={releaseDay} defaultValue={new Date().getDay()} /><br>
|
<IntegerInput id="release_month" bind:value={releaseMonth} defaultValue={new Date().getMonth()} />
|
||||||
|
{#if releaseMonth > 0}
|
||||||
|
<IntegerInput id="release_day" bind:value={releaseDay} defaultValue={new Date().getDay()} />
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
<br>
|
||||||
|
<!--TODO: if date element is 0 do not display finer element, also set finer element to -1-->
|
||||||
|
|
||||||
<label for="author">Author:</label>
|
<label for="author">Author:</label>
|
||||||
<TextInput id="author" bind:value={author} placeholder="Author" />
|
<TextInput id="author" bind:value={author} placeholder="Author" /><br>
|
||||||
|
|
||||||
<label for="typesetter">Typesetter:</label>
|
<label for="typesetter">Typesetter:</label>
|
||||||
<TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" />
|
<TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" /><br>
|
||||||
|
|
||||||
<label for="editor">Editor:</label>
|
<label for="editor">Editor:</label>
|
||||||
<TextInput id="editor" bind:value={editor} placeholder="Editor" /><br>
|
<TextInput id="editor" bind:value={editor} placeholder="Editor" /><br>
|
||||||
|
|
||||||
<label for="translator">Translator</label>
|
<label for="translator">Translator:</label>
|
||||||
<TextInput id="translator" bind:value={translator} placeholder="Translator" />
|
<TextInput id="translator" bind:value={translator} placeholder="Translator" /><br>
|
||||||
|
|
||||||
<label for="publisher">Publisher</label>
|
<label for="publisher">Publisher:</label>
|
||||||
<TextInput id="publisher" bind:value={publisher} placeholder="Publisher" /><br>
|
<TextInput id="publisher" bind:value={publisher} placeholder="Publisher" /><br>
|
||||||
|
|
||||||
<label for="tags">Tags</label>
|
<label for="new-tag">Tags:</label>
|
||||||
<input id="tags" type="text"><br>
|
<!-- List of Tags, New Button -->
|
||||||
|
{#each tags as tag, id}
|
||||||
|
<ListTextInputElement {id} bind:value={tag} on:deleted={deleteTag}/>
|
||||||
|
{/each}
|
||||||
|
<NewListTextInput id="new-tag" bind:value={tags[tags.length]}/><br>
|
||||||
|
|
||||||
<label for="genre">Genre</label>
|
<label for="genre">Genre</label>
|
||||||
<TextInput id="genre" bind:value={genre} placeholder="Genre" />
|
<TextInput id="genre" bind:value={genre} placeholder="Genre" />
|
||||||
|
|
Reference in a new issue