feat(options): added plugin options

Author: alvarosabu

src/components/dynamic-form/DynamicForm.vue

@@ -4,12 +4,14 @@
     novalidate
     :id="form.id"
     :name="form.id"
+    v-bind="formattedOptions"
     @submit.prevent="handleSubmit"
   >
     <dynamic-input
       v-for="control in controls"
       :key="control.name"
       :control="control"
+      :submited="submited"
       @changed="valueChange"
     >
       <template v-slot:customField="props">
@@ -42,11 +44,14 @@ import {
   computed,
   onMounted,
   watch,
+  inject,
 } from 'vue';
 import { DynamicForm } from './form';
 import DynamicInput from '../dynamic-input/DynamicInput.vue';
 
 import { InputBase, FormControl } from '../../core/models';
+import { dynamicFormsSymbol } from '../../useApi';
+import { warn } from '../../core/utils/warning';
 
 const props = {
   form: {
@@ -59,11 +64,15 @@ const components = {
   DynamicInput,
 };
 
+const AVAILABLE_THEMES = ['default', 'material'];
+
 export default defineComponent({
   name: 'asDynamicForm',
   props,
   components,
-  setup(props, { emit, slots }) {
+  setup(props, ctx) {
+    const { options } = inject(dynamicFormsSymbol);
+
     const controls: Ref<FormControl<any>[]> = ref([]);
     const formValues = reactive({});
     const submited = ref(false);
@@ -72,6 +81,31 @@ export default defineComponent({
       mapControls();
       initValues();
     });
+    //  TODO: enable again when plugin theme option is available
+
+    /* const validTheme = computed(
+      () => options.theme && AVAILABLE_THEMES.includes(options.theme),
+    );
+
+    if (!validTheme.value) {
+      warn(
+        `There isn't a theme: ${
+          options.theme
+        } just yet, please choose one of the available themes: ${AVAILABLE_THEMES.join(
+          ', ',
+        )}`,
+      );
+    } */
+
+    const deNormalizedScopedSlots = computed(() => Object.keys(ctx.slots));
+
+    const normalizedControls = computed(() => {
+      let normalizedControls = {};
+      controls.value.forEach(element => {
+        normalizedControls[element.name] = element;
+      });
+      return normalizedControls;
+    });
 
     const isValid = computed(() => {
       const control = controls?.value?.find(control => !control.valid);
@@ -95,9 +129,22 @@ export default defineComponent({
         : {};
     });
 
+    const formattedOptions = computed(() => {
+      const { customClass, method, netlify, netlifyHoneypot } = options.form;
+      return {
+        class: [
+          customClass,
+          /* validTheme.value ? `theme-${options.theme}` : null, */
+        ].join(' '),
+        method,
+        'data-netlify': netlify,
+        'data-netlify-honeypot': netlifyHoneypot,
+      };
+    });
+
     function valueChange(changedValue: any) {
       Object.assign(formValues, changedValue);
-      emit('changed', formValues);
+      ctx.emit('changed', formValues);
     }
 
     function mapControls(empty?) {
@@ -116,10 +163,10 @@ export default defineComponent({
     function handleSubmit() {
       submited.value = true;
       if (isValid.value) {
-        emit('submited', formValues);
+        ctx.emit('submited', formValues);
         resetForm();
       } else {
-        emit('error', formValues);
+        ctx.emit('error', formValues);
       }
     }
 
@@ -138,19 +185,9 @@ export default defineComponent({
             }, {})
           : {},
       );
-      emit('changed', formValues);
+      ctx.emit('changed', formValues);
     }
 
-    const deNormalizedScopedSlots = computed(() => Object.keys(slots));
-
-    const normalizedControls = computed(() => {
-      let normalizedControls = {};
-      controls.value.forEach(element => {
-        normalizedControls[element.name] = element;
-      });
-      return normalizedControls;
-    });
-
     watch(props, () => {
       mapControls();
     });
@@ -166,9 +203,8 @@ export default defineComponent({
       deNormalizedScopedSlots,
       normalizedControls,
       submited,
+      formattedOptions,
     };
   },
 });
 </script>
-
-<style></style>

src/components/dynamic-input/DynamicInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
-import { defineComponent, PropType, computed, h } from 'vue';
+import { defineComponent, PropType, computed, h, inject } from 'vue';
 import TextInput from '../text-input/TextInput.vue';
 import SelectInput from '../select-input/SelectInput.vue';
 import TextAreaInput from '../text-area-input/TextAreaInput.vue';
@@ -11,6 +11,7 @@ import RadioInput from '../radio-input/RadioInput.vue';
 import { FormControl } from '../../core/models';
 import { isEmpty, entries, values, keys } from '../../core/utils/helpers';
 import { useInputEvents } from '../../composables/input-events';
+import { dynamicFormsSymbol } from '../../useApi';
 
 const components = {
   TextInput,
@@ -25,16 +26,31 @@ const props = {
     type: Object as PropType<FormControl<any>>,
     required: true,
   },
+  submited: {
+    type: Boolean,
+    required: true,
+  },
 };
 export default defineComponent({
   name: 'asDynamicInput',
   components,
   props,
   setup(props, { emit, slots }) {
     const { onFocus, onBlur } = useInputEvents(props?.control, emit);
+    const { options } = inject(dynamicFormsSymbol);
 
     let component;
 
+    const attributes = computed(() => {
+      return {
+        control: props.control,
+        onChanged: valueChange,
+      };
+    });
+
+    const hasLabel = computed(() => props?.control?.type !== 'checkbox');
+    const isFieldSet = computed(() => props?.control?.type === 'radio');
+
     const getClasses = computed(() => {
       return [
         'dynamic-input',
@@ -49,16 +65,24 @@ export default defineComponent({
       ];
     });
 
+    const autoValidate = computed(
+      () => props?.control?.touched && options.autoValidate,
+    );
+
     const showErrors = computed(() => {
-      return props?.control?.errors && keys(props?.control?.errors).length > 0;
+      return (
+        props?.control?.errors &&
+        keys(props?.control?.errors).length > 0 &&
+        (props.submited || autoValidate.value)
+      );
       /* props.control.errors &&
         Object.keys(props.control.errors).length > 0 &&
         (this.submited || this.autoValidate) */
     });
 
     const errorMessages = computed(() => {
       const errors = values(props?.control?.errors || {});
-      if (errors.length > 0) {
+      if (errors.length > 0 && (props.submited || autoValidate.value)) {
         return errors.map(value => value.text);
       }
       return [];
@@ -93,7 +117,6 @@ export default defineComponent({
         }, {});
         props.control.errors = validation;
         props.control.valid = Object.keys(validation).length === 0;
-        console.log(props.control);
       }
     }
 
@@ -106,16 +129,6 @@ export default defineComponent({
       }
     }
 
-    const attributes = computed(() => {
-      return {
-        control: props.control,
-        onChanged: valueChange,
-      };
-    });
-
-    const hasLabel = computed(() => props?.control?.type !== 'checkbox');
-    const isFieldSet = computed(() => props?.control?.type === 'radio');
-
     return () => {
       switch (props?.control?.type) {
         case 'text':

src/dynamicForms.ts

@@ -1,9 +1,11 @@
 import { App } from 'vue';
 import { dynamicFormsSymbol } from './useApi';
 import DynamicForm from './components/dynamic-form/DynamicForm.vue';
+import { FormOptions } from './core/models';
 
 export interface DynamicFormsOptions {
-  theme?: string;
+  autoValidate?: boolean;
+  form?: FormOptions;
 }
 
 export interface DynamicFormsPlugin {

src/index.ts

@@ -1,3 +1,4 @@
 export * from './useApi';
 export * from './dynamicForms';
 export * from './core/models';
+export * from './core/utils';