feat(forms): added CustomStyles attrs to form and inputs

Author: alvarosabu

dev/vue/App.vue

@@ -197,6 +197,15 @@ const data = () => ({
         customClass: 'col-6',
         options: ['Arduino', 'Pinguino'],
       }),
+      new FormField({
+        type: 'text',
+        label: 'Custom Style',
+        name: 'custom-style',
+        customStyles: {
+          boxShadow: '0 0 22px -1px rgba(0,0,0,0.2)',
+        },
+        customClass: 'col-12',
+      }),
     ],
     options: {
       autoValidate: true,

package-lock.json

@@ -77,6 +77,12 @@ const methods = {
 };
 
 const computed = {
+  getClasses() {
+    return this.options.customClass;
+  },
+  getStyles() {
+    return this.options.customStyles;
+  },
   isValid() {
     const control = this.controls.find(control => !control.valid);
     return control ? control.valid : true;

src/components/dynamic-form/DynamicForm.js

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

src/components/dynamic-form/DynamicForm.vue

@@ -92,6 +92,9 @@ const computed = {
       (this.submited || this.autoValidate)
     );
   },
+  getStyles() {
+    return this.formControl.customStyles;
+  },
   errorMessages() {
     const errors = Object.entries(this.formControl.errors);
     if (errors.length > 0) {

src/components/dynamic-input/DynamicInput.js

@@ -10,26 +10,31 @@
       "
       :formControl="formControl"
       @change="valueChange"
+      :style="getStyles"
     />
     <input-textarea
       v-if="formControl.type === 'textarea'"
       :formControl="formControl"
       @change="valueChange"
+      :style="getStyles"
     />
     <input-select
       v-if="formControl.type === 'select'"
       :formControl="formControl"
       @change="valueChange"
+      :style="getStyles"
     />
     <input-checkbox
       v-if="formControl.type === 'checkbox'"
       :formControl="formControl"
       @change="valueChange"
+      :style="getStyles"
     />
     <input-radio
       v-if="formControl.type === 'radio'"
       :formControl="formControl"
       @change="valueChange"
+      :style="getStyles"
     />
     <slot
       v-if="formControl.type === 'custom-field'"
@@ -38,6 +43,7 @@
       :valueChange="valueChange"
       :onFocus="onFocus"
       :onBlur="onBlur"
+      :style="getStyles"
     />
     <label
       class="form-label"

src/components/dynamic-input/DynamicInput.vue

@@ -7,6 +7,7 @@ export function FormControl({
   form,
   name = null,
   customClass = null,
+  customStyles = null,
   options = [],
   placeholder = null,
   rows = null,
@@ -26,6 +27,7 @@ export function FormControl({
   this.label = label;
   this.name = name;
   this.customClass = customClass;
+  this.customStyles = customStyles;
   this.options = options;
   this.placeholder = placeholder;
   this.disabled = disabled;
@@ -46,6 +48,7 @@ export function FormField({
   label = null,
   name = null,
   customClass = null,
+  customStyles = null,
   disabled = false,
   options = [],
   placeholder = null,
@@ -61,6 +64,7 @@ export function FormField({
   this.label = label;
   this.name = name;
   this.customClass = customClass;
+  this.customStyles = customStyles;
   this.disabled = disabled;
   this.options = options;
   this.placeholder = placeholder;
@@ -80,12 +84,14 @@ export function FormValidation(
 
 export function FormOptions({
   customClass = '',
+  customStyles = '',
   method = 'POST',
   autoValidate = false,
   netlify = false,
   netlifyHoneypot = null,
 }) {
   this.customClass = customClass;
+  this.customStyles = customStyles;
   this.method = method;
   this.autoValidate = autoValidate;
   this.netlify = netlify;