Merge pull request #116 from alvarosaburido/feature/library-options-for-next

Feature/library options for next

Author: alvarosabu

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: ci
 on:
   pull_request:
     branches:
-      - master
+      - 0.x
       - next
       - dev
 

.github/workflows/release.yml

@@ -2,7 +2,7 @@ name: Release
 on:
   push:
     branches:
-      - master
+      - 0.x
       - next
 jobs:
   release:

dev/typescript/App.vue

@@ -56,8 +56,9 @@ import {
   CheckboxInput,
   RadioInput,
   InputBase,
+  email,
+  pattern,
 } from '../../src';
-import { email, pattern } from '@/core/utils';
 
 export default defineComponent({
   name: 'app',

dev/typescript/main.ts

@@ -3,10 +3,17 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import './styles/main.scss';
 
-import { createDynamicForms } from '../../src';
+// import { createDynamicForms } from '../../src';
+import { createDynamicForms } from '../../dist/as-dynamic-forms.esm';
 
 const VueDynamicForms = createDynamicForms({
-  theme: 'material',
+  autoValidate: true,
+  form: {
+    customClass: 'plugin-options-class-added',
+    method: 'POST',
+    netlify: false,
+    netlifyHoneypot: null,
+  },
 });
 
 export const app = createApp(App);

dev/vue/App.vue

@@ -34,9 +34,10 @@ import {
   EmailInput,
   FormValidation,
   PasswordInput,
+  email,
+  pattern,
   TextAreaInput,
-} from '../../dist/as-dynamic-forms.esm';
-import { email, pattern } from '@/core/utils';
+} from '../../src';
 
 export default defineComponent({
   name: 'app',

dev/vue/styles/_vendors.scss

@@ -8,7 +8,7 @@
 $input-border-radius: 50px; */
 // @import '../../src/styles/themes/default.scss';
 
-@import '@/styles/themes/default.scss';
+/* @import '@/styles/themes/default.scss'; */
 
 // Third-party
 

package-lock.json

@@ -16,7 +16,7 @@
   },
   "release": {
     "branches": [
-      "master",
+      "0.x",
       "next"
     ]
   },
@@ -41,13 +41,13 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.9.19",
+    "@microsoft/api-extractor": "^7.9.22",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.3",
-    "@typescript-eslint/eslint-plugin": "^4.1.1",
-    "@typescript-eslint/parser": "^4.1.1",
+    "@typescript-eslint/eslint-plugin": "^4.2.0",
+    "@typescript-eslint/parser": "^4.2.0",
     "@vue/cli-plugin-babel": "4.5.6",
     "@vue/cli-plugin-eslint": "4.5.6",
     "@vue/cli-plugin-typescript": "~4.5.6",
@@ -61,14 +61,14 @@
     "babel-eslint": "10.1.0",
     "babel-jest": "26.3.0",
     "chalk": "^4.1.0",
-    "eslint": "7.9.0",
+    "eslint": "7.10.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.0.0-0",
     "node-sass": "4.14.1",
     "prettier": "2.1.2",
-    "rollup": "^2.27.1",
+    "rollup": "^2.28.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.27.2",
+    "rollup-plugin-typescript2": "^0.27.3",
     "rollup-plugin-vue": "^6.0.0-beta.10",
     "sass-loader": "10.0.2",
     "semantic-release": "17.1.2",
@@ -77,6 +77,9 @@
     "typescript": "~4.0.3",
     "vue": "^3.0.0",
     "vue-select": "3.10.8",
-    "vuepress": "1.5.4"
+    "vuepress": "1.6.0"
+  },
+  "dependencies": {
+    "rollup-plugin-scss": "^2.6.0"
   }
 }

package.json

@@ -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-form/DynamicForm.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':