aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Tools/InputTemplate.svelte
diff options
context:
space:
mode:
authorFuwn <[email protected]>2024-10-28 15:32:46 -0700
committerFuwn <[email protected]>2024-10-28 15:32:46 -0700
commit39b677404558ae3b7eb34e818d7ca308f62f9cb0 (patch)
tree7f19fca39ecd4237e3c0d1aef2d8e9fa3cec7845 /src/lib/Tools/InputTemplate.svelte
parentfeat(graphql): paged badges query (diff)
downloaddue.moe-svelte-5.tar.xz
due.moe-svelte-5.zip
feat: update to svelte 5svelte-5
Diffstat (limited to 'src/lib/Tools/InputTemplate.svelte')
-rw-r--r--src/lib/Tools/InputTemplate.svelte50
1 files changed, 33 insertions, 17 deletions
diff --git a/src/lib/Tools/InputTemplate.svelte b/src/lib/Tools/InputTemplate.svelte
index 72e2f807..52b9fd46 100644
--- a/src/lib/Tools/InputTemplate.svelte
+++ b/src/lib/Tools/InputTemplate.svelte
@@ -3,33 +3,49 @@
import { onMount } from 'svelte';
import SettingHint from '$lib/Settings/SettingHint.svelte';
- export let field: string;
- export let submission: string;
- export let event: string | undefined = undefined;
- export let submitText: string;
- export let saveParameters: string[] = [];
- export let onSubmit = () => {
+ interface Props {
+ field: string;
+ submission: string;
+ event?: string | undefined;
+ submitText: string;
+ saveParameters?: string[];
+ onSubmit?: any;
+ preserveCase?: boolean;
+ prompt?: any;
+ hint?: string | undefined;
+ children?: import('svelte').Snippet;
+ }
+
+ let {
+ field,
+ submission = $bindable(),
+ event = undefined,
+ submitText,
+ saveParameters = [],
+ onSubmit = () => {
return;
- };
- export let preserveCase = false;
- export let prompt = `Enter a ${
+ },
+ preserveCase = false,
+ prompt = `Enter a ${
preserveCase ? field : field.toLowerCase()
- } to search for to continue.`;
- export let hint: string | undefined = undefined;
+ } to search for to continue.`,
+ hint = undefined,
+ children
+ }: Props = $props();
- let input = '';
+ let input = $state('');
onMount(() => clearAllParameters(saveParameters));
</script>
<div class="card">
<p>
- <!-- svelte-ignore missing-declaration -->
+ <!-- svelte-ignore missing_declaration -->
<input
type="text"
placeholder={field}
bind:value={input}
- on:keypress={(e) => {
+ onkeypress={(e) => {
if (e.key === 'Enter') {
submission = input;
@@ -42,7 +58,7 @@
/>
<button
class="button-lined"
- on:click={() => {
+ onclick={() => {
submission = input;
onSubmit();
@@ -62,9 +78,9 @@
</p>
{#if submission !== ''}
- <slot />
+ {@render children?.()}
{:else}
- <p />
+ <p></p>
{prompt}
{/if}