PLG-MuDiCS/control/frontend/src/components/TextInput.svelte

<script lang="ts">
	import { fade } from 'svelte/transition';
	import { get_shifted_color } from '../ts/stores/ui_behavior';
	import { onMount } from 'svelte';

	let {
		current_value = $bindable(),
		current_valid = $bindable(),
		className = '',
		bg = 'bg-stone-750',
		title,
		placeholder = '',
		is_valid_function = null
	} = $props<{
		current_value: string;
		current_valid: boolean;
		className?: string;
		bg?: string;
		title: string;
		placeholder?: string;
		is_valid_function?: ((input: string) => [boolean, string]) | null;
	}>();

	let focus_bg = get_shifted_color(bg, 100);
	let focussed = $state(false);
	let current_info = $state('');

	function validate_input() {
		if (!is_valid_function) return;
		[current_valid, current_info] = is_valid_function(current_value.trim());
	}

	function get_highlighting_string(): string {
		if (!is_valid_function) return '';
		if (current_valid) {
			return 'focus:inset-ring-2 focus:inset-ring-green-400';
		} else {
			return 'inset-ring-2 inset-ring-red-400';
		}
	}
	onMount(() => {
		validate_input();
	});
</script>

<div class="flex flex-col {className}">
	<div class="flex flex-row justify-between text-sm px-1">
		<div class="text-stone-400">
			{title}:
		</div>
		{#if is_valid_function && focussed}
			<div class={current_valid ? "text-green-400" : "text-red-400"} transition:fade={{ duration: 100 }}>
				{current_info}
			</div>
		{/if}
	</div>
	<input
		bind:value={current_value}
		type="text"
		oninput={validate_input}
		onfocus={() => {
			focussed = true;
		}}
		onfocusout={() => {
			focussed = false;
		}}
		class="{bg} focus:{focus_bg} outline-none py-2 px-3 rounded-xl transition-all duration-100 {get_highlighting_string()}"
		{placeholder}
	/>
</div>