Add UI functionality of questionnaire builder

2021-06-21 19:21:43 +03:00
parent b24b87d6d1
commit 1ceb5442bc
20 changed files with 504 additions and 5599 deletions
@@ -3,6 +3,7 @@
  export let value;
  export let checked;
  export let name;
+  export let isEditable = false;
 </script>

 <label class="inline-flex items-center">
@@ -11,7 +12,19 @@
    class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
    {name}
    {value}
+    disabled={isEditable}
    bind:checked
  />
-  <span class="ml-2">{label}</span>
+  {#if isEditable}
+    <input
+      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+      type="text"
+      placeholder="Your option"
+      bind:value={label}
+    />
+  {:else}
+    <span class="ml-2">{label}</span>
+  {/if}
+
+  <slot name="iconbutton" />
 </label>