Change how TextInput handles Buttons

Author: hhvrc

src/lib/components/input/EmailInput.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import TextInput from '$lib/components/input/TextInput.svelte';
-  import type { ButtonSettings } from '$lib/components/input/impl/ButtonSettings';
   import { validateEmail } from '$lib/inputvalidation/emailValidator';
   import type { AnyComponent } from '$lib/types/AnyComponent';
   import type { ValidationResult } from '$lib/types/ValidationResult';
+  import type { Snippet } from 'svelte';
   import type { FullAutoFill } from 'svelte/elements';
 
   interface Props {
@@ -14,7 +14,7 @@
     valid?: boolean;
     validate?: boolean;
     Icon?: AnyComponent;
-    button?: ButtonSettings;
+    after?: Snippet;
   }
 
   let {
@@ -25,7 +25,7 @@
     valid = $bindable(false),
     validate = true,
     Icon,
-    button,
+    after,
   }: Props = $props();
 
   let validationResult = $derived<ValidationResult | null>(
@@ -37,4 +37,4 @@
   });
 </script>
 
-<TextInput {label} {placeholder} {autocomplete} bind:value {validationResult} {Icon} {button} />
+<TextInput {label} {placeholder} {autocomplete} bind:value {validationResult} {Icon} {after} />

src/lib/components/input/PasswordInput.svelte

@@ -2,6 +2,7 @@
   import { Eye, EyeOff } from '@lucide/svelte';
   import { checkPwnedCount } from '$lib/api/pwnedPasswords';
   import TextInput from '$lib/components/input/TextInput.svelte';
+  import { Button } from '$lib/components/ui/button';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { validatePassword } from '$lib/inputvalidation/passwordValidator';
   import type { AnyComponent } from '$lib/types/AnyComponent';
@@ -131,11 +132,22 @@
   bind:value
   {validationResult}
   {Icon}
-  button={{
-    Icon: valueShown ? EyeOff : Eye,
-    class: 'cursor-pointer',
-    onClick: () => (valueShown = !valueShown),
-  }}
   onblur={() => (showPopup = false)}
   popup={showPopup ? popup : undefined}
-/>
+>
+  {#snippet after()}
+    <Button
+      type="button"
+      class="cursor-pointer"
+      onclick={() => (valueShown = !valueShown)}
+      variant="ghost"
+      disabled={validationResult === null || (validationResult && !validationResult.valid)}
+    >
+      {#if valueShown}
+        <EyeOff />
+      {:else}
+        <Eye />
+      {/if}
+    </Button>
+  {/snippet}
+</TextInput>

src/lib/components/input/TextInput.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
   import { Input } from '$lib/components/ui/input';
   import type { AnyComponent } from '$lib/types/AnyComponent';
   import { GetValResColor, type ValidationResult } from '$lib/types/ValidationResult';
   import type { Snippet } from 'svelte';
   import type { FocusEventHandler, FullAutoFill } from 'svelte/elements';
-  import type { ButtonSettings } from './impl/ButtonSettings';
 
   interface Props {
     type?: 'text' | 'password';
-    label: string;
+    label?: string;
     placeholder?: string;
     autocomplete?: FullAutoFill;
     value: string;
     validationResult?: ValidationResult | null;
     Icon?: AnyComponent;
-    button?: ButtonSettings;
+    after?: Snippet;
     popup?: Snippet;
     onblur?: FocusEventHandler<HTMLInputElement> | null;
   }
@@ -31,14 +29,16 @@
     value = $bindable(),
     validationResult,
     Icon,
-    button,
+    after,
     popup,
     onblur,
   }: Props = $props();
 </script>
 
 <label for={inputId} class="w-full">
-  <span>{label}</span>
+  {#if label}
+    <span>{label}</span>
+  {/if}
   <div class="relative flex grow flex-row items-center gap-2">
     {#if Icon}
       <Icon />
@@ -63,21 +63,8 @@
         {@render popup()}
       </div>
     {/if}
-    {#if button}
-      <Button
-        type="button"
-        class={button.class ?? 'disabled:opacity-50'}
-        onclick={button.onClick}
-        variant="ghost"
-        disabled={button.submits &&
-          (validationResult === null || (validationResult && !validationResult.valid))}
-      >
-        {#if 'Icon' in button}
-          <button.Icon />
-        {:else if 'text' in button}
-          {button.text}
-        {/if}
-      </Button>
+    {#if after}
+      {@render after()}
     {/if}
   </div>
   {#if validationResult?.message}

src/lib/components/input/UsernameInput.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { accountV2Api } from '$lib/api';
   import TextInput from '$lib/components/input/TextInput.svelte';
-  import type { ButtonSettings } from '$lib/components/input/impl/ButtonSettings';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import {
     UsernameCheckingAvailabilityValRes,
@@ -12,6 +11,7 @@
   import type { AnyComponent } from '$lib/types/AnyComponent';
   import type { ValidationResult } from '$lib/types/ValidationResult';
   import type { TimeoutHandle } from '$lib/types/WAPI';
+  import type { Snippet } from 'svelte';
   import type { FullAutoFill } from 'svelte/elements';
 
   interface Props {
@@ -22,7 +22,7 @@
     valid?: boolean;
     validate?: boolean;
     Icon?: AnyComponent;
-    button?: ButtonSettings;
+    after?: Snippet;
   }
 
   let {
@@ -33,7 +33,7 @@
     valid = $bindable(false),
     validate = true,
     Icon,
-    button,
+    after,
   }: Props = $props();
 
   let validationResult = $state<ValidationResult | null>(null);
@@ -83,4 +83,4 @@
   });
 </script>
 
-<TextInput {label} {placeholder} {autocomplete} bind:value {validationResult} {Icon} {button} />
+<TextInput {label} {placeholder} {autocomplete} bind:value {validationResult} {Icon} {after} />

src/routes/(authenticated)/settings/account/ChangeEmail.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Mail from '@lucide/svelte/icons/mail';
   import EmailInput from '$lib/components/input/EmailInput.svelte';
+  import { Button } from '$lib/components/ui/button';
   import type { ApiUserSelf } from '$lib/types/ApiUser';
 
   interface Props {
@@ -22,5 +23,8 @@
   autocomplete="off"
   bind:value={email}
   Icon={Mail}
-  button={{ text: 'Change', submits: true, onClick: submitEmail }}
-/>
+>
+  {#snippet after()}
+    <Button type="button" onclick={submitEmail} variant="ghost">Change</Button>
+  {/snippet}
+</EmailInput>

src/routes/(authenticated)/settings/account/ChangeUsername.svelte

@@ -2,6 +2,7 @@
   import User from '@lucide/svelte/icons/user';
   import { accountV1Api } from '$lib/api';
   import UsernameInput from '$lib/components/input/UsernameInput.svelte';
+  import { Button } from '$lib/components/ui/button';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { UserStore } from '$lib/stores/UserStore';
   import type { ApiUserSelf } from '$lib/types/ApiUser';
@@ -42,5 +43,8 @@
   autocomplete="off"
   bind:value={username}
   Icon={User}
-  button={{ text: 'Change', submits: true, onClick: submitUsername }}
-/>
+>
+  {#snippet after()}
+    <Button type="button" onclick={submitUsername} variant="ghost">Change</Button>
+  {/snippet}
+</UsernameInput>

src/routes/flashtool/+page.svelte

@@ -228,11 +228,10 @@
     >
       <pre id="terminal" class="text-left text-xs">{terminalText}</pre>
     </div>
-    <TextInput
-      label="Command"
-      placeholder="Command"
-      button={{ text: 'Run', onClick: RunCommand }}
-      bind:value={terminalCommand}
-    />
+    <TextInput label="Command" placeholder="Command" bind:value={terminalCommand}>
+      {#snippet after()}
+        <Button type="button" onclick={RunCommand} variant="ghost">Run</Button>
+      {/snippet}
+    </TextInput>
   </SheetContent>
 </Sheet>