Sync with Server

src/components/Form/Checkbox.svelte

@@ -6,6 +6,7 @@
   export let isEditable = false;
   export let disabled = false;
   export let className = '';
+  export let onChange;
 </script>
 
 <label
@@ -27,6 +28,7 @@
       type="text"
       placeholder="Your option"
       bind:value={label}
+      on:change={onChange}
     />
   {:else}
     <span class="ml-2">{label}</span>

src/components/Form/RadioItem.svelte

@@ -1,11 +1,12 @@
 <script>
-  export let label;
-  export let value;
-  export let checked;
-  export let name;
+  export let label = '';
+  export let value = '';
+  export let checked = false;
+  export let name = '';
   export let isEditable = false;
   export let disabled = false;
   export let className = '';
+  export let onChange = () => {}; // This is to know if element is 'dirty'
 </script>
 
 <label
@@ -27,6 +28,7 @@
       type="text"
       placeholder="Your option"
       bind:value={label}
+      on:change={onChange}
     />
   {:else}
     <span class="ml-2">{label}</span>

src/components/Form/Select.svelte

@@ -1,9 +1,10 @@
 <script>
-  export let label;
-  export let value;
+  export let label = '';
+  export let value = '';
   export let options = [];
-  export let valueKey = 'id';
+  export let labelKey = 'label';
   export let isRequired = false;
+  export let onChange = () => {}; // This is to know if element is 'dirty'
 </script>
 
 <label class="block">
@@ -12,10 +13,11 @@
     bind:value
     class="form-select block w-full mt-1"
     required={isRequired}
+    on:blur={onChange}
   >
     {#each options as option}
-      <option value={option[valueKey]}>
-        {option.text}
+      <option value={option}>
+        {option[labelKey]}
       </option>
     {/each}
   </select>

src/components/Form/TextArea.svelte

@@ -1,37 +1,60 @@
 <script>
-  export let label;
-  export let placeholder = "Write your answer...";
-  export let value;
-  export let rows = "3";
-  export let maxRows;
+  export let label = '';
+  export let placeholder = 'Write your answer...';
+  export let value = '';
+  export let rows = '3';
+  export let maxRows = 3;
+  export let className = '';
+  export let helperMessage = '';
+  export let errorMessage = '';
+  export let isRequired = false;
+  export let onChange = () => {}; // This is to know if element is 'dirty'
 
   $: minHeight = `${1 + parseInt(rows, 10) * 1.2}em`;
   $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
 </script>
 
-<label class="block w-full relative">
+<label class="block w-full relative {className}">
   {#if label}
-    <span class="text-gray-700">{label}</span>
+    <p for="text-field" class="">
+      {label}
+
+      {#if isRequired}
+        <span class="text-red-700">*</span>
+      {/if}
+    </p>
   {/if}
 
-  <pre
+  <!-- <pre
     aria-hidden="true"
     style="min-height: {minHeight}; max-height: {maxHeight}">
     {value + '\n'}
-  </pre>
+  </pre> -->
 
   <textarea
     {rows}
     {placeholder}
     bind:value
-    class="form-textarea block w-full bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+    required={isRequired}
+    class="form-textarea mt-1 block w-full bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1 {!!errorMessage
+      ? 'border-red-500'
+      : 'border-gray-300'}"
+    on:change={onChange}
   />
-
+  {#if !!errorMessage}
+    <p class="text-sm text-red-500">
+      {errorMessage}
+    </p>
+  {:else if helperMessage}
+    <p class="text-sm text-gray-500">
+      {helperMessage}
+    </p>
+  {/if}
   <slot name="iconbutton" />
 </label>
 
 <style>
-  pre,
+  /* pre,
   textarea {
     font-family: inherit;
     padding: 0.5em;
@@ -39,13 +62,16 @@
     border: 1px solid #eee;
     line-height: 1.2;
     overflow: hidden;
-  }
+  } */
 
-  textarea {
+  /* textarea {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     resize: none;
   }
+  textarea.has-label {
+    top: 30px;
+  } */
 </style>

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>