Merge remote-tracking branch 'origin/master'

src/Components/Field.svelte

@@ -16,9 +16,9 @@
     import Message from './Message.svelte';
     import Header from "./Header.svelte";
     import RadioMulti from "./RadioMulti.svelte";
-    import Star from "./Star.svelte";
+    import Footer from "./Footer.svelte";
 
-    // Declar variables;
+    // Declare variables;
     export let fields = [];
     let isValidForm = true;
     let values = {};
@@ -88,12 +88,16 @@
       ? field.prefix.classes
         ? field.prefix.classes
         : 'form-group'
-      : 'form-group'}
+      : 'svelte-' + field.type}
     >
         <!-- Label -->
         {#if field.attributes}
             {#if field.attributes.label}
+                {#if field.type === "footer"}
+                    <label for={field.id} class="footer-text">{field.attributes.label}</label>
+                    {:else}
                 <label for={field.id} class="label">{field.attributes.label}</label>
+                    {/if}
             {/if}
         {/if}
 
@@ -124,6 +128,8 @@
             <Header {field}/>
         {:else if field.type === 'star'}
             <Star {field} on:changeValue={changeValueHander}/>
+        {:else if field.type === 'footer'}
+            <Footer {field}/>
         {/if}
 
         <!-- Description -->

src/Components/Footer.svelte

@@ -0,0 +1,41 @@
+<script>
+    import {afterUpdate, createEventDispatcher} from 'svelte';
+    import clsx from 'clsx';
+
+    import {scanValue} from '../lib/helpers';
+
+    // Declare variables.
+    export let field = {};
+    const defaultAttributes = {
+        id: '',
+        classes: '',
+        disabled: false,
+        readonly: false,
+        description: '',
+    };
+    const fieldAttributes = field.attributes ? field.attributes : {};
+    field.attributes = {...defaultAttributes, ...fieldAttributes};
+    field.description = ''; // don't update description as the header should just take the value of the field
+    let classes = "bg-black";
+    let defaultClasses = null;
+
+    // Dispatch
+    const dispatch = createEventDispatcher();
+
+    // Lifecycle.
+    afterUpdate(() => {
+        field.value = field.value == undefined ? null : field.value;
+    });
+</script>
+
+<div
+        disabled={field.attributes.disabled}
+        readonly={field.attributes.readonly}
+        name={field.name}
+        id={field.attributes.id}
+        class={clsx(field.attributes.classes)}
+>
+    {#if field.value}
+        {field.value}
+    {/if}
+</div>

src/Components/RadioMulti.svelte

@@ -76,7 +76,7 @@
 {#if topics.length == 0}
     Missing topics in this question!
 {:else}
-    <div class="grid grid-flow-row gap-4 grid-cols-{items.length+1} grid-rows-{topics.length+1} justify-around">
+    <div class="grid grid-flow-row gap-4 grid-cols-{items.length+1} grid-rows-{topics.length+1} justify-items-center">
         {#if field.error}
             <div class="grid grid-flow-row grid-cols-1">
                 <div class="italic text-red-400">{field.error}</div>