Merge pull request #182 from asigloo/feature/custom-styles-attr-next

feat(forms): added CustomStyles attr for forms and inputs

dev/typescript/App.vue

@@ -61,14 +61,14 @@ import {
   ColorInput,
   NumberInput,
   CustomInput,
+  BindingObject,
 } from '../../src';
 /* } from '../../dist/as-dynamic-forms.esm'; */
 export default defineComponent({
   name: 'app',
   setup() {
     const title = ref('Vue Dynamic Forms');
     const formValues = reactive({});
-
     const emailValidator: FormValidation = {
       validator: email,
       text: 'Email format is incorrect',
@@ -96,6 +96,7 @@ export default defineComponent({
         'awesomeness',
         'color',
         'customField1',
+        'customStyles',
       ],
       fields: {
         name: {
@@ -108,6 +109,16 @@ export default defineComponent({
           label: 'Email',
           type: 'email',
           validations: [emailValidator],
+          /*      customClass: 'active text-red', */
+          customClass: {
+            active: true,
+            'text-blue': true,
+          },
+          /* customClass: {
+            active: true,
+            'text-blue': true,
+          }, */
+          /*  customClass: ['active', 'text-red'], */
         } as EmailInput,
         password: {
           label: 'Password',
@@ -189,6 +200,14 @@ export default defineComponent({
           type: 'color',
           value: '#4DBA87',
         } as ColorInput,
+        customStyles: {
+          label: 'Custom Styles',
+          type: 'text',
+          required: true,
+          customStyles: {
+            border: '1px solid teal',
+          },
+        } as TextInput,
       },
     });
 

dev/typescript/main.ts

@@ -11,6 +11,10 @@ const VueDynamicForms = createDynamicForms({
   autoValidate: true,
   form: {
     customClass: 'plugin-options-class-added',
+    customStyles: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
     method: 'POST',
     netlify: false,
     netlifyHoneypot: null,