Preparing the library

Author: alvarosabu

.eslintignore

@@ -0,0 +1 @@
+dist/

README.md

@@ -18,12 +18,10 @@ Easy way to dynamically create reactive forms in vue based on varying business o
 
 Complete documentation and examples available at
 
-- **[API Documentation]()**
-- **[Sandbox Demo]()**
-- **[CodePen Template]()**
-- **[GitHub Projects]()**
+- **[API Documentation]()** (soon)
+- **[Sandbox Demo]()** (soon)
 
-## Install
+## Installation
 
 ```bash
 $ npm install @asigloo/vue-dynamic-forms
@@ -35,7 +33,11 @@ or if you prefer yarn
 $ yarn add @asigloo/vue-dynamic-forms
 ```
 
-Register the component
+## Usage
+
+### Global
+
+Register the component globally in your `main.js`:
 
 ```js
 import Vue from 'vue';
@@ -44,6 +46,63 @@ import VueDynamicForms from '@asigloo/vue-dynamic-forms';
 Vue.use(VueDynamicForms);
 ```
 
+### Local
+
+You can include the dynamic form directly to your component.
+
+```js
+import Vue from 'vue';
+import { DynamicForm } from '@asigloo/vue-dynamic-forms';
+
+const components = { DynamicForm };
+
+export {
+    ...
+    components,
+    ...
+}
+```
+
+### Form Composition
+
+The dynamic form component is really easy to use, you will only need to add it to your template like this:
+
+```html
+<template>
+  <dynamic-form :id="testForm.id" :fields="testForm.fields" />
+</template>
+```
+
+And then create the fields on your component's data structure, to create the fields you can import the factory function `FormField` from the library core:
+
+```js
+import { FormField } from '@asigloo/vue-dynamic-forms';
+
+const yourAwesomeComponent = {
+  name: 'your-awesome',
+  data() {
+    return {
+      testForm: {
+        id: 'test-form',
+        fields: [
+          new FormField({
+            type: 'text',
+            label: 'Name',
+            name: 'name',
+          }),
+        ],
+      },
+    };
+  },
+};
+
+export default yourAwesomeComponent;
+```
+
+### Styling themes
+
+The components are unstyled by default, so you can customize them with your own styles. If you want a more "ready to go" solution you can import on of the themes we have included
+
 ## Development
 
 ### Project setup

dev/App.vue

@@ -25,10 +25,14 @@
 </template>
 
 <script>
-import { email, required, pattern } from '../src/core/utils/validators';
-import { FormField } from '../src/core/utils/form-control.model';
-
-const DynamicForm = () => import('@/components/dynamic-form/DynamicForm.vue');
+import {
+  FormField,
+  FormValidation,
+  required,
+  email,
+  pattern,
+  /* } from '../dist/as-dynamic-forms.common'; */
+} from '../src/main';
 
 const data = () => ({
   formData: {},
@@ -45,34 +49,32 @@ const data = () => ({
         label: 'Email',
         name: 'email',
         validations: [
-          { validator: required, text: 'This field is required' },
-          { validator: email, text: 'Format of email is incorrect' },
+          new FormValidation(required, 'This field is required'),
+          new FormValidation(email, 'Format of email is incorrect'),
         ],
       }),
       new FormField({
         type: 'password',
         label: 'Password',
         name: 'password',
-        /*         validations: [
-          required,
-          pattern(
-            '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&]).{8,10}$',
+        validations: [
+          new FormValidation(required, 'This field is required'),
+          new FormValidation(
+            pattern(
+              '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&]).{8,10}$',
+            ),
+            'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
           ),
-        ], */
+        ],
+
         value: 'sdsdsd',
-        /*         errorTexts: [
-          'This field is required',
-          'Password must contain at least 1 Upercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
-        ], */
       }),
       new FormField({
         type: 'textarea',
         label: 'Bio',
         name: 'bio',
         cols: 30,
         rows: 5,
-        /*         validations: [required],
-        errorTexts: ['This field is required'], */
       }),
       new FormField({
         type: 'select',
@@ -89,14 +91,11 @@ const data = () => ({
         label: 'Read the conditions',
         name: 'conditions',
         inline: false,
-        /*         validations: [required],
-        errorTexts: ['This field is required'], */
       }),
       new FormField({
         type: 'radio',
         label: 'Prefered Animal',
         name: 'animal',
-        /*         validations: [], */
         inline: true,
         options: [
           { text: 'Dogs', value: 'dogs' },
@@ -109,17 +108,11 @@ const data = () => ({
         label: 'Number',
         name: 'number',
         value: 0,
-        /*         validations: [required],
-        errorTexts: ['This field is required'], */
       }),
     ],
   },
 });
 
-const components = {
-  DynamicForm,
-};
-
 const methods = {
   valuesChanged(values) {
     this.$forceUpdate(); // this is only to refresh the fields on the <pre> tags, not necessary for other purpouses
@@ -134,9 +127,6 @@ const methods = {
 export default {
   name: 'app',
   data,
-  components,
   methods,
 };
 </script>
-
-<style lang="scss"></style>

dev/main.js

@@ -1,7 +1,10 @@
 import Vue from 'vue';
 import App from './App.vue';
 import './styles/main.scss';
-
+/* import VueDynamicForms from '../dist/as-dynamic-forms.common';
+ */
+import VueDynamicForms from '../src/main';
 Vue.config.productionTip = false;
+Vue.use(VueDynamicForms);
 
 new Vue({ render: h => h(App) }).$mount('#app');