Finished 2.1.1

Author: sethsandaru

.editorconfig

@@ -0,0 +1,15 @@
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

package-lock.json

@@ -31,11 +31,22 @@
                 </button>
 
                 <button class="btn btn-info mr-2" @click="setRandomData">Set Random Data</button>
+
+                <button
+                    class="btn btn-info mr-2"
+                    @click="setReadonly"
+                >
+                    <span v-show="readOnly">Turn off ReadOnly mode</span>
+                    <span v-show="!readOnly">Turn on ReadOnly mode</span>
+                </button>
             </div>
 
-            <FormRenderer :class="{'col-md-9': isShowData, 'col-md-12': !isShowData}"
-                          :form-configuration="formData"
-                          v-model="formInputData" />
+            <FormRenderer
+                v-model="formInputData"
+                :class="{'col-md-9': isShowData, 'col-md-12': !isShowData}"
+                :form-configuration="formData"
+                :read-only="readOnly"
+            />
 
             <div class="p-0" :class="{'col-md-3': isShowData, 'd-none': !isShowData}">
                 <h4>Form Input Data</h4>
@@ -63,7 +74,8 @@
             isShowDevNote: false,
             isRenderer: false,
             formInputData: null,
-            isShowData: false
+            isShowData: false,
+            readOnly: false,
         }),
         methods: {
             getData() {
@@ -106,6 +118,16 @@
                     "total_value": faker.finance.amount()
                 });
             },
+
+            setReadonly() {
+                if (this.readOnly) {
+                    this.readOnly = false;
+                    return;
+                }
+
+                this.setRandomData();
+                this.readOnly = true;
+            },
         }
     }
 </script>

src/App.vue

@@ -2,11 +2,12 @@
     <div :class="[styles.CONTAINER.FLUID, 'form-padding', 'vue-form-renderer']">
 
         <!-- Render Form Tag Or Not -->
-        <form v-if="formData.formConfig.renderFormTag"
-              :action="formData.formConfig.formActionURL"
-              :method="formData.formConfig.formMethod"
-              :id="formTagId"
-              @submit.prevent
+        <form
+            v-if="formData.formConfig.renderFormTag"
+            :action="formData.formConfig.formActionURL"
+            :method="formData.formConfig.formMethod"
+            :id="formTagId"
+            @submit.prevent
         >
             <!-- form headline -->
             <div class="form-headline-container" v-show="formData.formConfig.isShowHeadline">
@@ -15,13 +16,15 @@
             </div>
 
             <!-- sections of the form -->
-            <SectionContainer v-for="(sectionData) in sortedSections"
-                              :section="sectionData"
-                              :rows="formData.rows"
-                              :controls="formData.controls"
-                              :key="sectionData.uniqueId"
-                              :value-container="valueContainer"
-                              :validation-errors="validationErrors"
+            <SectionContainer
+                v-for="(sectionData) in sortedSections"
+                :section="sectionData"
+                :rows="formData.rows"
+                :controls="formData.controls"
+                :key="sectionData.uniqueId"
+                :value-container="valueContainer"
+                :validation-errors="validationErrors"
+                :read-only="readOnly"
             />
         </form>
         <template v-else>
@@ -33,13 +36,15 @@
             </div>
 
             <!-- sections of the form -->
-            <SectionContainer v-for="(sectionData) in sortedSections"
-                              :section="sectionData"
-                              :rows="formData.rows"
-                              :controls="formData.controls"
-                              :key="sectionData.uniqueId"
-                              :value-container="valueContainer"
-                              :validation-errors="validationErrors"
+            <SectionContainer
+                v-for="(sectionData) in sortedSections"
+                :section="sectionData"
+                :rows="formData.rows"
+                :controls="formData.controls"
+                :key="sectionData.uniqueId"
+                :value-container="valueContainer"
+                :validation-errors="validationErrors"
+                :read-only="readOnly"
             />
 
         </template>