Merge pull request #212 from asigloo/bugfix/form-options

Bugfix/form options

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;