Merge branch 'master' into feature/material-theme

Author: alvarosabu

.npmignore

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

CHANGELOG.md

@@ -5,6 +5,49 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## 0.3.1 - 2020-06-17
+
+## Fixed
+
+- Undefined variables in theme ([#40](https://github.com/alvarosaburido/vue-dynamic-forms/issues/40))
+
+## 0.3.0 - 2020-06-17
+
+## Added
+
+- Customizable Default Theme ([#37](https://github.com/alvarosaburido/vue-dynamic-forms/issues/37))
+- Added missing models to docs ([#36](https://github.com/alvarosaburido/vue-dynamic-forms/issues/36))
+- Helper text/hint ([#26](https://github.com/alvarosaburido/vue-dynamic-forms/issues/26))
+- Url regex validation ([#28](https://github.com/alvarosaburido/vue-dynamic-forms/issues/28))
+- Configurable input `id` ([#31](https://github.com/alvarosaburido/vue-dynamic-forms/issues/31))
+
+## 0.2.2 - 2020-05-27
+
+### Fixed
+
+- Added build command to publish command
+
+## 0.2.1 - 2020-05-27
+
+### Fixed
+
+- Text Area methods ([#29](https://github.com/alvarosaburido/vue-dynamic-forms/issues/29))
+
+## 0.2.0 - 2020-05-26
+
+### Added
+
+- VuePress for Better documentation ([#15](https://github.com/alvarosaburido/vue-dynamic-forms/issues/15))
+- Allow Input validation on change and blur ([#21](https://github.com/alvarosaburido/vue-dynamic-forms/issues/21))
+- Custom fields via scoped slots ([#12](https://github.com/alvarosaburido/vue-dynamic-forms/issues/12))
+- Spread Form options and netlify forms support ([#19](https://github.com/alvarosaburido/vue-dynamic-forms/issues/19))
+
+### Fixed
+
+- Fixed missing github link in npm ([#6](https://github.com/alvarosaburido/vue-dynamic-forms/issues/6))
+- Custom classes ([#16](https://github.com/alvarosaburido/vue-dynamic-forms/issues/16))
+- Textarea validation and events not triggering ([#23](https://github.com/alvarosaburido/vue-dynamic-forms/issues/23))
+
 ## 0.1.2 - 2020-05-05
 
 ### Fixed

README.md

@@ -1,12 +1,12 @@
-![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
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@asigloo/vue-dynamic-forms">
     <img src="https://badgen.net/npm/v/@asigloo/vue-dynamic-forms" alt="Current npm version">
   </a>
-  <a href="https://bundlephobia.com/result?p=@asigloo/vue-dynamic-forms@0.1.2">
+  <a href="https://bundlephobia.com/result?p=@asigloo/vue-dynamic-forms@0.2.0">
     <img src="https://flat.badgen.net/bundlephobia/min/@asigloo/vue-dynamic-forms" alt="Minified size">
   </a>
   <a href="https://vuejs.org">
@@ -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