Merge branch 'next' into feature/vue-demi-test

Author: alvarosabu

dev/typescript/App.vue

@@ -9,6 +9,7 @@
           <div class="relative card p-6 bg-white">
             <h1 class="title mb-16 text-bg">{{ title }}</h1>
             <dynamic-form
+              class="awiwi"
               :form="form"
               @submitted="handleSubmit"
               @change="valueChanged"
@@ -245,6 +246,9 @@ export default defineComponent({
           readonly: true,
         }),
       },
+      options: {
+        customClass: 'mandalorian',
+      },
     }));
 
     function handleSubmit(values) {

src/components/dynamic-form/DynamicForm.vue

@@ -82,7 +82,6 @@ const components = {
  */
 export default defineComponent({
   name: 'asDynamicForm',
-  inheritAttrs: false,
   props,
   components,
   setup(props, ctx) {
@@ -141,15 +140,20 @@ export default defineComponent({
     });
 
     const formattedOptions = computed(() => {
-      if (options?.form) {
+      let opts = {
+        ...options?.form,
+        ...props.form?.options,
+      };
+
+      if (opts) {
         const {
           customClass,
           customStyles,
           method,
           netlify,
           netlifyHoneypot,
           autocomplete,
-        } = options?.form;
+        } = opts;
         return {
           class: customClass,
           style: customStyles,

src/core/models.ts

@@ -26,6 +26,7 @@ export interface DynamicForm {
   id: string;
   fields: FormFields;
   fieldOrder?: string[];
+  options?: FormOptions;
 }
 
 export interface ErrorMessage {
@@ -151,8 +152,8 @@ export type FormControl<T extends InputType> = T & {
 };
 
 export interface FormOptions {
-  customClass?: string | string[] | BindingObject | BindingObject[];
-  customStyles?: string | string[] | BindingObject | BindingObject[];
+  customClass?: string | string[] | BindingObject | BindingObject[] | unknown;
+  customStyles?: string | string[] | BindingObject | BindingObject[] | unknown;
   method?: string;
   netlify?: boolean;
   netlifyHoneypot?: string;

src/dynamicForms.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue-demi';
+import { App, isVue2 } from 'vue-demi';
 import { dynamicFormsSymbol } from './useApi';
 import DynamicForm from './components/dynamic-form/DynamicForm.vue';
 import { FormOptions } from './core/models';
@@ -20,6 +20,15 @@ export function createDynamicForms(
     options,
     install(app: App) {
       const self = this;
+
+      if (isVue2) {
+        // Vue 2 only
+        console.log('IS VUEEEE 222');
+      } else {
+        // Vue 3 only
+        console.log('IS VUEEEE 333');
+      }
+
       app.component('dynamic-form', DynamicForm);
       app.provide(dynamicFormsSymbol, self);
     },