Merge pull request #19 from alvarosaburido/feature/spread_options

Added Spread Form Options and netlify support

Author: alvarosabu

dev/App.vue

@@ -7,7 +7,7 @@
           <dynamic-form
             :id="testForm.id"
             :fields="testForm.fields"
-            :customClass="'row'"
+            :options="testForm.options"
             @change="valuesChanged"
           >
             <template slot="custom-field-1" slot-scope="props">
@@ -149,6 +149,10 @@ const data = () => ({
         customClass: 'col-12 col-md-6',
       }),
     ],
+    options: {
+      customClass: 'row',
+      netlify: true,
+    },
   },
 });
 

src/components/dynamic-form/DynamicForm.js

@@ -1,4 +1,4 @@
-import { FormControl } from '@/core/utils';
+import { FormControl, FormOptions } from '@/core/utils';
 
 import DynamicInput from '@/components/dynamic-input/DynamicInput.vue';
 
@@ -17,17 +17,13 @@ const props = {
     default: null,
     type: String,
   },
-  method: {
-    default: 'POST',
-    type: String,
-  },
-  customClass: {
-    default: null,
-    type: String,
-  },
   fields: {
     type: Array,
   },
+  options: {
+    type: Object,
+    default: () => new FormOptions(),
+  },
 };
 
 const methods = {
@@ -111,6 +107,17 @@ const computed = {
         }, {})
       : {};
   },
+  formattedOptions() {
+    const { customClass, method, netlify, netlifyHoneyPot } = new FormOptions(
+      this.options,
+    );
+    return {
+      class: customClass,
+      method,
+      'data-netlify': netlify,
+      'data-netlify-honeypot': netlifyHoneyPot,
+    };
+  },
   deNormalizedScopedSlots() {
     return Object.keys(this.$scopedSlots);
   },

src/components/dynamic-form/DynamicForm.vue

@@ -4,8 +4,7 @@
       v-if="fields.length > 0 && !showFeedback"
       :id="id"
       :name="id"
-      :class="customClass"
-      :method="method"
+      v-bind="formattedOptions"
       novalidate
       @submit.prevent="handleSubmit()"
     >

src/core/utils/form-control.model.js

@@ -58,4 +58,16 @@ export function FormValidation(
   this.text = text;
 }
 
-export default { FormControl, FormField, FormValidation };
+export function FormOptions({
+  customClass = '',
+  method = 'POST',
+  netlify = false,
+  netlifyHoneypot = null,
+}) {
+  this.customClass = customClass;
+  this.method = method;
+  this.netlify = netlify;
+  this.netlifyHoneypot = netlifyHoneypot;
+}
+
+export default { FormControl, FormField, FormValidation, FormOptions };