PLG_Development/PLG-MuDiCS
3
0
Fork 0
mirror of https://codeberg.org/PLG-Development/PLG-MuDiCS synced 2026-07-06 00:47:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(control): add focus_on_start to TextInput

Browse Source
This commit is contained in:
E44
2025-11-19 17:12:26 +01:00
parent 23b54c7b13
commit 7ae607cc50
2 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/components/TextInput.svelte
+10 -10
View File
@@ -10,7 +10,8 @@
bg = 'bg-stone-750', bg = 'bg-stone-750',
title, title,
placeholder = '', placeholder = '',
is_valid_function = null is_valid_function = null,
focused_on_start = false
} = $props<{ } = $props<{
current_value: string; current_value: string;
current_valid: boolean; current_valid: boolean;
@@ -19,11 +20,13 @@
title: string; title: string;
placeholder?: string; placeholder?: string;
is_valid_function?: ((input: string) => [boolean, string]) | null; is_valid_function?: ((input: string) => [boolean, string]) | null;
focused_on_start?: boolean;
}>(); }>();
let focus_bg = get_shifted_color(bg, 100); let focus_bg = get_shifted_color(bg, 100);
let focussed = $state(false); let focused: boolean = $state(false);
let current_info = $state(''); let current_info = $state('');
let input_element: HTMLInputElement;
function validate_input() { function validate_input() {
if (!is_valid_function) return; if (!is_valid_function) return;
@@ -40,15 +43,16 @@
} }
onMount(() => { onMount(() => {
validate_input(); validate_input();
if (focused_on_start && input_element) input_element.focus();
}); });
</script> </script>
<div class="flex flex-col {className}"> <div class="flex flex-col {className}">
<div class="flex flex-row justify-between text-sm px-1"> <div class="flex flex-row justify-between text-sm px-1 gap-4">
<div class="text-stone-400"> <div class="text-stone-400">
{title}: {title}:
</div> </div>
{#if is_valid_function && focussed} {#if is_valid_function && focused}
<div <div
class={current_valid ? 'text-green-400' : 'text-red-400'} class={current_valid ? 'text-green-400' : 'text-red-400'}
transition:fade={{ duration: 100 }} transition:fade={{ duration: 100 }}
@@ -58,15 +62,11 @@
{/if} {/if}
</div> </div>
<input <input
bind:this={input_element}
bind:value={current_value} bind:value={current_value}
bind:focused
type="text" type="text"
oninput={validate_input} 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()}" class="{bg} focus:{focus_bg} outline-none py-2 px-3 rounded-xl transition-all duration-100 {get_highlighting_string()}"
{placeholder} {placeholder}
/> />
control/frontend/src/routes/+page.svelte
+2 -1
View File
@@ -137,6 +137,7 @@
{#snippet add_new_display_popup(existing_display_id: string | null = null)} {#snippet add_new_display_popup(existing_display_id: string | null = null)}
<TextInput <TextInput
focused_on_start
bind:current_value={text_inputs_valid.name.value} bind:current_value={text_inputs_valid.name.value}
bind:current_valid={text_inputs_valid.name.valid} bind:current_valid={text_inputs_valid.name.valid}
title="Anzeigename" title="Anzeigename"
@@ -250,5 +251,5 @@
<FileView /> <FileView />
</div> </div>
</div> </div>
<PopUp content={popup_content} close_function={popup_close_function} className="bg-white/10" /> <PopUp content={popup_content} close_function={popup_close_function} className="bg-white/10" snippet_container_class="min-w-115" />
</main> </main>