From ae04d2b7b33506106e6d0b3335f1aa0dbec82b1d Mon Sep 17 00:00:00 2001
From: "Federico Pasqua (eisterman)" <federico.pasqua.96@gmail.com>
Date: Tue, 25 Mar 2025 11:57:21 +0100
Subject: [PATCH] Add first version of FormInput components

---
 src/lib/FormInput.svelte    | 35 ++++++++++++++++++++++++++
 src/lib/PwdFormInput.svelte | 49 +++++++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 src/lib/FormInput.svelte
 create mode 100644 src/lib/PwdFormInput.svelte

diff --git a/src/lib/FormInput.svelte b/src/lib/FormInput.svelte
new file mode 100644
index 0000000..90186ef
--- /dev/null
+++ b/src/lib/FormInput.svelte
@@ -0,0 +1,35 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import { Field, Control, FieldErrors } from "formsnap";
+  import type { FormPath, SuperForm } from "sveltekit-superforms";
+
+  let { form, type, label, name }: {
+    form: SuperForm<T>,
+    type: string,
+    label: string,
+    name: FormPath<T>,
+  } = $props();
+  const formData = form.form;
+
+</script>
+
+<div>
+  <Field {form} {name}>
+    <Control>
+      {#snippet children({ props })}
+        <label class="label floating-label w-full">
+          <span>{label}</span>
+          <input {type} class="input w-full aria-[invalid]:input-error" placeholder={label}
+                 bind:value={$formData[name]} {...props}
+          />
+        </label>
+      {/snippet}
+    </Control>
+    <FieldErrors>
+      {#snippet children({ errors, errorProps })}
+        {#each errors as err, idx (idx)}
+          <p class="text-error" {...errorProps}>{err}</p>
+        {/each}
+      {/snippet}
+    </FieldErrors>
+  </Field>
+</div>
diff --git a/src/lib/PwdFormInput.svelte b/src/lib/PwdFormInput.svelte
new file mode 100644
index 0000000..4ab44da
--- /dev/null
+++ b/src/lib/PwdFormInput.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import { Field, Control, FieldErrors } from "formsnap";
+  import type { FormPath, SuperForm } from "sveltekit-superforms";
+  import { scale } from 'svelte/transition';
+  import Icon from "@iconify/svelte";
+
+  let { form, label, name }: {
+    form: SuperForm<T>,
+    label: string,
+    name: FormPath<T>,
+  } = $props();
+  const formData = form.form;
+
+  let show = $state(false);
+  let type = $derived(show ? 'text' : 'password');
+</script>
+
+<div>
+  <Field {form} {name}>
+    <Control>
+      {#snippet children({ props })}
+        <div class="flex w-full gap-1">
+          <label class="label floating-label w-full">
+            <span>{label}</span>
+            <input {type} class="input w-full aria-[invalid]:input-error" placeholder={label}
+                   bind:value={$formData[name]} {...props}
+            />
+          </label>
+          <button class="btn btn-circle grid" onclick={() => show = !show} type="button">
+            {#if show}
+              <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2"><Icon
+                      icon="mdi:eye-off-outline"/></span>
+            {:else }
+              <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2"><Icon
+                      icon="mdi:eye-outline"/></span>
+            {/if}
+          </button>
+        </div>
+      {/snippet}
+    </Control>
+    <FieldErrors>
+      {#snippet children({ errors, errorProps })}
+        {#each errors as err, idx (idx)}
+          <p class="text-error" {...errorProps}>{err}</p>
+        {/each}
+      {/snippet}
+    </FieldErrors>
+  </Field>
+</div>