feature(next): form submission

Author: alvarosabu

.eslintrc.js

@@ -20,7 +20,7 @@ module.exports = {
       'error',
       {
         allowDestructuring: true, // Allow `const { props, state } = this`; false by default
-        allowedNames: ['self'], // Allow `const self = this`; `[]` by default
+        allowedNames: ['self', 'vdf'], // Allow `const self = this`; `[]` by default
       },
     ],
   },

dev/vue/App.vue

@@ -4,7 +4,14 @@
       <h1 class="title m-4">{{ title }}</h1>
       <div class="flex justify-between">
         <div class="card p-6">
-          <dynamic-form :form="form" />
+          <dynamic-form :form="form" @submited="handleSubmit" />
+          <button
+            class="btn bg-teal-500 text-white hover:bg-teal-700 mt-4"
+            submit="true"
+            :form="form?.id"
+          >
+            Submit Form
+          </button>
         </div>
         <div class="card p-6">
           <pre>{{ form }}</pre>
@@ -28,7 +35,7 @@ export default defineComponent({
   setup() {
     const title = ref('Vue Dynamic Forms');
     const form = reactive<DynamicForm>({
-      id: 'form',
+      id: 'example-form',
       fields: [
         new TextInput({
           label: 'Name',
@@ -57,6 +64,9 @@ export default defineComponent({
         }),
       ],
     });
+    function handleSubmit(values) {
+      console.log('Values Submitted', values);
+    }
     onMounted(() =>
       setTimeout(() => {
         form.fields[0].label = 'RockNRoll';
@@ -66,6 +76,7 @@ export default defineComponent({
     return {
       title,
       form,
+      handleSubmit,
     };
   },
 });

dev/vue/styles/base.scss

@@ -19,3 +19,7 @@
 pre {
   @apply bg-gray-900 text-white text-xs p-4 rounded-md;
 }
+
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+}

package-lock.json

@@ -26,7 +26,7 @@
   },
   "main": "dist/as-dynamic-forms.common.js",
   "dependencies": {
-    "vue": "^3.0.0-0"
+    "vue": "^3.0.0-rc.7"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^2.33.0",

package.json

@@ -1,5 +1,11 @@
 <template>
-  <form class="dynamic-form" novalidate :id="form.id">
+  <form
+    class="dynamic-form"
+    novalidate
+    :id="form.id"
+    :name="form.id"
+    @submit.prevent="handleSubmit"
+  >
     <dynamic-input
       v-for="control in controls"
       :key="control?.name"
@@ -40,6 +46,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const controls: Ref<FormControl<any>[] | undefined> = ref([]);
     const formValues = reactive({});
+    const submited = ref(false);
     watchEffect(() => {
       controls.value =
         props.form?.fields?.map(
@@ -64,21 +71,19 @@ export default defineComponent({
     function valueChanged(changedValue: any) {
       Object.assign(formValues, changedValue);
     }
-    /* const formValues = computed(() => {
-      return controls.value
-        ? controls.value.reduce((prev, curr) => {
-            const obj = {};
-            obj[curr.name] =
-              curr.type === 'number' ? parseFloat(curr.value) : curr.value;
-            return {
-              ...prev,
-              ...obj,
-            };
-          }, {})
-        : {};
-    }); */
 
-    return { controls, form: props.form, valueChanged, formValues };
+    function handleSubmit() {
+      submited.value = true;
+      emit('submited', formValues);
+    }
+
+    return {
+      controls,
+      form: props.form,
+      valueChanged,
+      formValues,
+      handleSubmit,
+    };
   },
 });
 </script>

src/components/dynamic-form/DynamicForm.vue

@@ -17,9 +17,9 @@ export function createDynamicForms(
   const vdf: DynamicFormsPlugin = {
     options,
     install(app: App) {
-      const vdf = this;
+      const self = this;
       app.component('dynamic-form', DynamicForm);
-      app.provide(dynamicFormsSymbol, vdf);
+      app.provide(dynamicFormsSymbol, self);
     },
   };