Merge pull request #25 from alvarosaburido/feature/vue_press_docs

Feature/vue press docs

Author: alvarosabu

.npmignore

@@ -2,6 +2,7 @@
 .vuegenerator
 .eslintrc.js
 .eslintignore
+netlify.toml
 jest.config.js
 babel.config.js
 vue.config.js

README.md

@@ -1,4 +1,4 @@
-![repository-banner.png](https://res.cloudinary.com/alvarosaburido/image/upload/v1564929632/as-readme-banner_tqdgrx.png)
+![Library Banner](https://res.cloudinary.com/alvarosaburido/image/upload/v1589993773/portfolio/web/vue-dynamic-forms/open-graph-preview_kv4glm.png)
 
 # Vue Dynamic Forms
 
@@ -15,20 +15,21 @@
 </p>
 
 Implementing handcrafted forms can be:
+
 1. Costly
 2. Time-consuming
 
-Specially if you need to create a very large form, in which the inputs are similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.
+Especially if you need to create a very large form, in which the inputs are similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.
 
-So, will not be more economical to create the forms dynamically? Based on metadata that describes the business object model?
+So, wouldn't it be more economical to create the forms dynamically? Based on metadata that describes the business object model?
 
 That's Vue Dynamic Forms.
 
 ## Documentation
 
 Complete documentation and examples available at
 
-- **[API Documentation]()** (soon)
+- **[Documentation](https://vue-dynamic-forms.netlify.app)**
 - **[Sandbox Demo](https://codesandbox.io/s/vue-dynamic-forms-ftzes)**
 
 ## Installation
@@ -73,207 +74,6 @@ export {
 }
 ```
 
-### 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" />
-  <button type="submit" :form="testForm.id">Submit</button>
-</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',
-          }),
-          new FormField({
-            type: 'email',
-            label: 'Email',
-            name: 'email',
-          }),
-        ],
-      },
-    };
-  },
-};
-
-export default yourAwesomeComponent;
-```
-
-Each `FormField` has a set of properties to customize your input field:
-
-| Property    | Type             | Default | Description                                                                                            |
-| :---------- | :--------------- | :------ | :----------------------------------------------------------------------------------------------------- |
-| type        | String           | text    | Define the nature of the field, can be `text|email|url|password|number|radio|checkbox|textarea|select` |
-| label       | String           | null    | Defines the text in the input label                                                                    |
-| placeholder | String           | null    | Defines short hint that describes the expected value of an input field                                 |
-| name        | String           | null    | Name property for the field inside of the form data                                                    |
-| value       | any              | null    | Initial value of the input field                                                                       |
-| disabled    | Boolean          | false   | Whenever the input field is disabled or not                                                            |
-| customClass | String           | null    | Allows the user to set custom classes to the input for styling purpouses                               |
-| options     | Array of Objects | []      | Options for input type `select`                                                                        |
-| inline      | Boolean          | false   | Specifies if options for `radio|checkbox` should be inline                                             |
-| validations | Array of Objects | []      | Array of `FormValidation` objects, specify validations and messages for the input                      |
-
-### Events and Submit
-
-| Event        | Type | Emitter       | Description                                                                                                                    |
-| :----------- | :--- | :------------ | :----------------------------------------------------------------------------------------------------------------------------- |
-| `submit`     |      | `DynamicForm` | Emits whenever the submit button has been clicked and the form is valid (no errors), returns all the form values in an Object  |
-| `form-error` |      | `DynamicForm` | Emits whenever the submit button has been clicked and the form is invalid (with errors), returns all errors                    |
-| `change`     |      | `DynamicForm` | Emits every time there is a value changed on the form, returns all the form values in an Object without the need ob submitting |
-
-A small example of a form without submit button
-
-```html
-<template>
-  <dynamic-form
-    :id="testForm.id"
-    :fields="testForm.fields"
-    @change="valuesChanged"
-  />
-</template>
-```
-
-```js
-...
-const yourAwesomeComponent = {
-  name: 'your-awesome',
-  methods: {
-    valuesChanged(values) {
-      this.formData = {
-        ...this.formData,
-        ...values,
-      };
-    },
-  }
-}
-...
-```
-
-### Select input
-
-```js
-...
-new FormField({
-  type: 'select',
-  label: 'Category',
-  name: 'category',
-  options: [
-    { value: null, text: 'Please select an option' },
-    { value: 'arduino', text: 'Arduino' },
-    { value: 'transistors', text: 'Transistors' },
-  ],
-}),
-...
-```
-
-### Radio and Checkboxes
-
-```js
-...
-new FormField({
-  type: 'checkbox',
-  label: 'Read the conditions',
-  name: 'conditions',
-  inline: false,
-}),
-new FormField({
-  type: 'radio',
-  label: 'Prefered Animal',
-  name: 'animal',
-  inline: true,
-  options: [
-    { text: 'Dogs', value: 'dogs' },
-    { text: 'Cats', value: 'cats' },
-    { text: 'Others', value: 'others' },
-  ],
-}),
-...
-```
-
-### Validation
-
-This library offers a simple validation system using the property `validations` as an array of `FormValidation`objects containing the validation function and the text in case of error.
-
-To use it you need the following code:
-
-```js
-import {
-  FormField,
-  FormValidation,
-  required,
-  email,
-  pattern,
-} 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',
-          }),
-          new FormField({
-            type: 'email',
-            label: 'Email',
-            name: 'email',
-            validations: [
-              new FormValidation(required, 'This field is required'),
-              new FormValidation(email, 'Format of email is incorrect'),
-            ],
-          }),
-          new FormField({
-            type: 'password',
-            label: 'Password',
-            name: 'password',
-            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',
-              ),
-            ],
-          }),
-        ],
-      },
-    };
-  },
-};
-
-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 in `src/styles/themes/`
-
-```scss
-@import '~@asigloo/vue-dynamic-forms/src/styles/themes/default.scss';
-```
-
 ## Development
 
 ### Project setup
@@ -324,7 +124,7 @@ This are the features I have planned for next versions of this library
 - [ ] Form Mixins for fields manipulation (for example, change values of a field depending of other)
 - [ ] More complex input types.
 - [ ] Nuxt plugin istall
-- [ ] Better docs & online examples
+- [x] Better docs & online examples
 - [ ] Storybook
 
 ## License

dev/App.vue

@@ -10,19 +10,22 @@
             :options="testForm.options"
             @change="valuesChanged"
           >
-            <template slot="custom-field-1" slot-scope="props">
-              <div class="pika-field">
+            <template
+              slot="custom-field-1"
+              slot-scope="{ control, valueChange, onFocus, onBlur }"
+            >
+              <div class="avocado-field">
                 <input
-                  v-if="props.field"
+                  v-if="control"
                   class="form-control"
-                  v-model="props.field.value"
-                  :type="props.field.type"
-                  :name="props.field.name"
-                  @change="props.valueChange()"
-                  @focus="props.onFocus()"
-                  @blur="props.onBlur()"
+                  v-model="control.value"
+                  :type="control.type"
+                  :name="control.name"
+                  @change="valueChange()"
+                  @focus="onFocus()"
+                  @blur="onBlur()"
                 />
-                <img src="./assets/pika.png" alt="" />
+                <i>🥑</i>
               </div>
             </template>
           </dynamic-form>
@@ -159,7 +162,7 @@ const data = () => ({
       }),
     ],
     options: {
-      // autoValidate: true,
+      autoValidate: true,
       customClass: 'row',
       netlify: true,
     },
@@ -183,10 +186,16 @@ export default {
 };
 </script>
 <style lang="scss">
-.pika-field {
+.avocado-field {
   position: relative;
 
-  img {
+  .form-control {
+    border-color: #aec64c;
+    background-color: #e2eb5d52;
+    border-radius: 16px;
+  }
+
+  i {
     position: absolute;
     top: 5px;
     right: 5px;

docs/.vuepress/components/Features.vue

@@ -0,0 +1,36 @@
+<template>
+  <ul class="features">
+    <li v-for="feature in features" class="feature">
+      <h3 class="title">{{ feature.title }}</h3>
+      <p class="text">{{ feature.text }}</p>
+    </li>
+  </ul>
+</template>
+
+<script>
+import features from '../data/features';
+
+export default {
+  name: 'Features',
+  data: () => ({
+    features,
+  }),
+};
+</script>
+
+<style lang="scss">
+.features {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-left: -15px;
+  margin-right: -15px;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+.feature {
+  padding: 15px;
+  width: 45%;
+}
+</style>