Sync with Server

src/components/Form/TextField.svelte

@@ -1,16 +1,20 @@
 <script>
   import { onMount } from 'svelte';
-  export let label;
-  export let placeholder;
-  export let value;
-  export let onKeyDown;
+  export let label = '';
+  export let placeholder = '';
+  export let value = '';
+  export let onKeyDown = () => {};
   export let className = '';
   export let inputClassName = '';
   export let type = 'text';
   export let autoFocus = false;
   export let isRequired = false;
   export let isDisabled = false;
-  export let errorMessage;
+  export let errorMessage = '';
+  export let helperMessage = '';
+  export let autoComplete = true;
+  export let onChange = () => {}; // This is to know if element is 'dirty'
+
   let ref;
 
   function typeAction(node) {
@@ -31,11 +35,14 @@
 <label class="block {className}">
   {#if label}
     <label for="text-field" class="m-0">
-      {label} <span class="text-red-700">*</span>
+      {label}
+
+      {#if isRequired}
+        <span class="text-red-700">*</span>
+      {/if}
     </label>
   {/if}
   <input
-    id="text-field"
     use:typeAction
     class="form-input p-2 mt-1 block w-full bg-white border {inputClassName} {errorMessage
       ? 'border-red-500'
@@ -46,8 +53,14 @@
     bind:this={ref}
     required={isRequired}
     disabled={isDisabled}
+    autocomplete={autoComplete ? 'on' : 'off'}
+    on:blur={onChange}
   />
   {#if errorMessage}
     <p class="text-sm text-red-500">{errorMessage}</p>
+  {:else if helperMessage}
+    <p class="text-sm">
+      {helperMessage}
+    </p>
   {/if}
 </label>