refactor(input): trailing element background

greymass · Dec 5, 2024 · 2ab8860 · 2ab8860
1 parent 4bb4cf9
commit 2ab8860
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 79 deletions.
diff --git a/src/lib/components/input/asset.svelte b/src/lib/components/input/asset.svelte
@@ -121,31 +121,17 @@
 	}
 </script>
 
-<div class="relative">
-	<TextInput
-		bind:ref
-		bind:value={input}
-		placeholder={String(zeroValue.value)}
-		{autofocus}
-		inputmode="decimal"
-		step="any"
-		{...props}
-	/>
-
-	<span
-		class="
-				text-muted
-				pointer-events-none
-				absolute
-				inset-y-0
-				right-0
-				flex
-				items-center
-				pr-4"
-	>
-		{String(symbol.code)}
-	</span>
-</div>
+<TextInput
+	bind:ref
+	bind:value={input}
+	placeholder={String(zeroValue.value)}
+	{autofocus}
+	inputmode="decimal"
+	step="any"
+	{...props}
+>
+	{String(symbol.code)}
+</TextInput>
 
 {#if debug}
 	<h3>Component State</h3>

diff --git a/src/lib/components/input/bytes.svelte b/src/lib/components/input/bytes.svelte
@@ -155,27 +155,26 @@
 	}
 </script>
 
-<div class="relative">
-	<TextInput
-		bind:ref
-		bind:value={input}
-		placeholder="0 {unit}"
-		step="any"
-		inputmode="decimal"
-		{autofocus}
-		onblur={handleBlur}
-		oninput={handleInput}
-		{...props}
-	/>
+<TextInput
+	bind:ref
+	bind:value={input}
+	placeholder="0 {unit}"
+	step="any"
+	inputmode="decimal"
+	{autofocus}
+	onblur={handleBlur}
+	oninput={handleInput}
+	{...props}
+>
 	<button
 		onclick={cycleUnit}
 		type="button"
-		class="absolute inset-y-0 right-0 flex select-none items-center gap-1 rounded-md bg-transparent px-4 text-skyBlue-500 hover:text-skyBlue-300 focus:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-solar-500"
+		class="flex h-full select-none items-center gap-1 rounded-md bg-transparent text-skyBlue-500 hover:text-skyBlue-300 focus:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-solar-500"
 	>
 		<span class="text-sm font-medium">{unit}</span>
 		<ArrowUpDown class="size-4" />
 	</button>
-</div>
+</TextInput>
 
 {#if debug}
 	<div class="mt-4">

diff --git a/src/lib/components/input/number.svelte b/src/lib/components/input/number.svelte
@@ -40,33 +40,20 @@
 </script>
 
 {#if unit}
-	<div class="relative">
-		<TextInput
-			bind:ref
-			bind:value={inputValue}
-			placeholder="0"
-			inputmode="decimal"
-			step="any"
-			{...props}
-		/>
-
-		<span
-			class="
-			text-gray-500
-			pointer-events-none
-			absolute
-			inset-y-0
-			right-0
-			flex
-			items-center
-			pr-4"
-		>
-			{unit}
-		</span>
-	</div>
+	<TextInput
+		bind:ref
+		bind:value={inputValue}
+		placeholder="0"
+		inputmode="decimal"
+		step="any"
+		{...props}
+	>
+		{unit}
+	</TextInput>
 {:else}
 	<TextInput bind:ref bind:value={inputValue} placeholder="0" type="number" {...props} />
 {/if}
+
 {#if debug}
 	<div class="mt-4">
 		<h3>Component State</h3>

diff --git a/src/lib/components/input/text.svelte b/src/lib/components/input/text.svelte
@@ -1,30 +1,20 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	interface TextInputProps extends HTMLInputAttributes {
 		ref?: HTMLInputElement;
+		children?: Snippet;
 	}
 
 	let { ref = $bindable(), value = $bindable(), ...props }: TextInputProps = $props();
 </script>
 
-<div class="relative">
+<div
+	class="relative flex h-12 gap-2 rounded-lg border-2 border-mineShaft-600 px-4 *:content-center focus-within:border-skyBlue-500 focus-within:ring focus-within:ring-1 focus-within:ring-inset focus-within:ring-skyBlue-500"
+>
 	<input
-		class="
-			h-12
-			w-full
-			rounded-lg
-			border-2
-			border-mineShaft-600
-			bg-transparent
-			px-4
-			font-medium
-			focus:border-skyBlue-500
-			focus:outline-none
-			focus:ring
-			focus:ring-1
-			focus:ring-inset
-			focus:ring-skyBlue-500"
+		class="placeholder:text-muted w-full rounded-lg bg-transparent font-medium focus:outline-none"
 		type="text"
 		autocorrect="off"
 		autocomplete="off"
@@ -33,4 +23,8 @@
 		bind:value
 		{...props}
 	/>
+
+	<div class="text-muted select-none">
+		{@render props.children?.()}
+	</div>
 </div>