├── .gitignore ├── LICENSE ├── package.json ├── readme.md └── src ├── classes ├── Errors.js ├── Form.js └── index.js ├── dynamic-form.vue ├── dynamic-input.vue ├── index.js └── places-input.vue /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 milandebuck 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-dynamic-forms", 3 | "version": "1.1.0", 4 | "description": "a dynamic form component for Vue.js", 5 | "main": "src/dynamic-form.vue", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack --config=webpack.config.js", 9 | "prod": "webpack -p --config=webpack.config.js" 10 | }, 11 | "author": "Milan De Buck", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/milandebuck/vue-dynamic-forms.git" 15 | }, 16 | "license": "MIT", 17 | "devDependencies": { 18 | "babel-core": "^6.24.0", 19 | "babel-loader": "^6.4.1", 20 | "babel-preset-env": "^1.6.1", 21 | "babel-preset-stage-2": "^6.24.1", 22 | "css-loader": "^0.28.0", 23 | "vue-loader": "^11.3.4", 24 | "vue-template-compiler": "^2.2.6", 25 | "vue-multiselect": "^2.0.0-beta.15", 26 | "webpack": "^2.3.2", 27 | "vue-tinymce-editor": "^1.6.2", 28 | "vue-datepicker": "^1.3.0" 29 | }, 30 | "dependencies": { 31 | "vue": "^2.2.6" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Dynamic forms 2 | 3 | ### Table of Contents 4 | 5 | - [Documentation](#documentation) 6 | - [Form](#form) 7 | - [data](#data) 8 | - [reset](#reset) 9 | - [submit](#submit) 10 | - [onFail](#onfail) 11 | - [Input](#input) 12 | - [Errors](#errors) 13 | - [has](#has) 14 | - [any](#any) 15 | - [get](#get) 16 | - [set](#set) 17 | - [clear](#clear) 18 | - [Example](#example) 19 | 20 | 21 | 22 | create dynamic forms with vue based on a json configuration 23 | 24 | ## Documetation 25 | 26 | 27 | 28 | ## Form 29 | 30 | **Parameters** 31 | 32 | - `inputs` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)** A list of all the required form fields with initial values form more info see the params section 33 | - `request` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** A object containing an optional the configuration for the requests (optional) 34 | - `request.headers` **[Headers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)** A Javascript Headers object containing custom headers (optional) 35 | - `request.credentials` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** set credentials option in the request (optional) default value='omit' 36 | - `request.url` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The url which the form will be send to (optional) default value = ''(self) 37 | - `request.method` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The method of the request (optional) default value = 'post' 38 | - `config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** the configuration of the whole form 39 | 40 | ### data 41 | 42 | groups all form values in a formData object 43 | 44 | Returns **[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)** data - a FormData object containing all form values 45 | 46 | ### reset 47 | 48 | Resets all values in the form + clears the errors 49 | 50 | ### submit 51 | 52 | Submit the form with the current values 53 | 54 | Returns **[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)** promise based on the succes or failure of a request done with the fetch API 55 | 56 | ### onFail 57 | 58 | Sets the Errors of the form 59 | 60 | **Parameters** 61 | 62 | - `errors` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)** An array containing error objects 63 | 64 | ## Input 65 | an input object in the inputs array 66 | 67 | **Parameters** 68 | - `input` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** an input configuration 69 | - `input.type` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** (Required) - The type of input **supported input types:** text,email,password,hidden,tel,date,number,select,textarea 70 | - `input.name` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** (Required) - The name of the input field 71 | - `input.value` (Optional) - The value of the input field 72 | - `input.label` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** (Optional) - The label of the input field 73 | - `input.class` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** (Optional) - The Css class(es) of the input field 74 | 75 | **Input specific parameters** 76 | 77 | - `input.min` minimum value of the input field(date,number) 78 | - `input.max` maximum value of the input field(date,number) 79 | - `input.step` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** increments of the value on increase & decrease(number) 80 | - `options` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)** all the options in a selectbox 81 | 82 | ## Errors 83 | 84 | ### has 85 | 86 | Check if an error exists 87 | 88 | **Parameters** 89 | 90 | - `field` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the name of the field you are looking for 91 | 92 | ### any 93 | 94 | Check if there are any Errors 95 | 96 | Returns **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** boolean 97 | 98 | ### get 99 | 100 | get an Error for a particular field 101 | 102 | **Parameters** 103 | 104 | - `field` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** the name of the field you are looking for 105 | 106 | Returns **any** if exists returns the error else returns false 107 | 108 | ### set 109 | 110 | Sets the error Object 111 | 112 | **Parameters** 113 | 114 | - `Errors` errors 115 | - `err` 116 | 117 | ### clear 118 | 119 | Clear all the erros 120 | 121 | 122 | ## Example 123 | 124 | add the component to the `components ` section of your Vue component 125 | 126 | `demo.vue` 127 | 128 | ```javascript 129 | 138 | 139 | 160 | 161 | 163 | 164 | ``` 165 | 166 | ### Configuration 167 | 168 | configuration in the `config.js` file 169 | 170 | ```javascript 171 | export fuction createDemo(){ 172 | 173 | return { 174 | //request options 175 | request:{ 176 | //post url 177 | url:'/register', 178 | //method 179 | method:'post', 180 | //adding the CSRF Token for laravel applications 181 | headers:new Headers({ 182 | 'X-CSRF-TOKEN':window.Laraval.csrfToken 183 | }), 184 | //include credentials 185 | credentials:'include' 186 | }, 187 | //title 188 | title:'Demo Form' 189 | //text of the submit button 190 | submitText:'Register', 191 | //inputs 192 | inputs:[ 193 | { 194 | type:'text', 195 | label:'Firtsname', 196 | name:'firstname', 197 | class:'form-control', 198 | value:'' 199 | }, 200 | { 201 | type:'text', 202 | label:'Lastname', 203 | name:'lastname', 204 | class:'form-control', 205 | value:'' 206 | }, 207 | { 208 | type:'email', 209 | label:'Email', 210 | name:'email', 211 | class:'form-control', 212 | value:'' 213 | }, 214 | { 215 | type:'password', 216 | label:'Password', 217 | name:'password', 218 | class:'form-control', 219 | value:'' 220 | }, 221 | { 222 | type:'password', 223 | label:'Confirm password', 224 | name:'password_confirmation', 225 | class:'form-control', 226 | value:'' 227 | }, 228 | { 229 | type:'date', 230 | label:'Date of birth', 231 | name:'dateofbirth', 232 | class:'form-control', 233 | value:'' 234 | }, 235 | { 236 | type:'tel', 237 | label:'Telephone', 238 | name:'phone', 239 | class:'form-control', 240 | value:'' 241 | }, 242 | { 243 | type:'select', 244 | label:'Gender', 245 | name:'gender', 246 | class:'form-control', 247 | options:['male','female'], 248 | value:"" 249 | }, 250 | 251 | ] 252 | } 253 | } 254 | ``` 255 | 256 | 257 | 258 | -------------------------------------------------------------------------------- /src/classes/Errors.js: -------------------------------------------------------------------------------- 1 | /* 2 | * based upon https://github.com/laracasts/Vue-Forms 3 | */ 4 | /** 5 | * @class creates an Error object 6 | */ 7 | export class Errors{ 8 | 9 | //constructor 10 | constructor(){ 11 | this.errors = {}; 12 | } 13 | 14 | /** 15 | * Check if an error exists 16 | * @param {String} field - the name of the field you are looking for 17 | * 18 | */ 19 | has(field){ 20 | return this.errors.hasOwnProperty(field); 21 | } 22 | 23 | /** 24 | * Check if there are any Errors 25 | * @returns {Boolean} boolean 26 | */ 27 | any(){ 28 | return Objects.keys(this.errors) > 0; 29 | } 30 | 31 | /** 32 | * get an Error for a particular field 33 | * @param {String} field - the name of the field you are looking for 34 | * @returns if exists returns the error else returns false 35 | */ 36 | get(field){ 37 | if(this.errors[field]) return this.errors[field]; 38 | return false; 39 | } 40 | 41 | /** 42 | * Sets the error Object 43 | * @param Errors - errors 44 | */ 45 | set(err){ 46 | this.errors=err; 47 | } 48 | 49 | /** 50 | * Clear all the erros 51 | */ 52 | clear(){ 53 | this.erros={}; 54 | } 55 | 56 | 57 | 58 | } 59 | -------------------------------------------------------------------------------- /src/classes/Form.js: -------------------------------------------------------------------------------- 1 | /* 2 | * based upon https://github.com/laracasts/Vue-Forms 3 | */ 4 | import { Errors } from './Errors'; 5 | 6 | /** 7 | * @class creates a new Form Objext 8 | * @param {Array} inputs - A list of all the required form fields with initial values form more info see the params section 9 | * @param {Object} request - A object containing an optional the configuration for the requests (optional) 10 | * @param {Headers} request.headers - A Javascript Headers object containing custom headers (optional) 11 | * @param {String} request.credentials - set credentials option in the request (optional) default value='omit' 12 | * @param {String} request.url - The url which the form will be send to (optional) default value = ''(self) 13 | * @param {String} request.method - The method of the request (optional) default value = 'post' 14 | */ 15 | export class Form{ 16 | 17 | //constructor 18 | constructor(inputs,request= {}){ 19 | //set custom http headers 20 | this.headers=request.headers || new Headers({ 21 | 'Content-Type':'application/json', 22 | 'Accept':'application/json' 23 | }) 24 | 25 | //allow for custom credentials 26 | this.credentials= request.credentials || 'omit' 27 | 28 | //post url 29 | this.url = request.url || '' 30 | 31 | //method of the form 32 | this.method = request.method || 'post' 33 | 34 | 35 | this.originalData = inputs; 36 | for (let field in inputs) { 37 | this[field] = inputs[field]; 38 | } 39 | this.errors = new Errors(); 40 | } 41 | 42 | /** 43 | * groups all form values in a formData object 44 | * @returns {FormData} data - a FormData object containing all form values 45 | */ 46 | data() { 47 | let data = {} 48 | for (let prop in this.originalData) { 49 | data[this[prop].name]=this[prop].value 50 | } 51 | return data; 52 | } 53 | 54 | /** 55 | *Resets all values in the form + clears the errors 56 | */ 57 | reset() { 58 | for (let field in this.originalData) { 59 | this[field] = ''; 60 | } 61 | this.errors.clear(); 62 | } 63 | 64 | /** 65 | * Submit the form with the current values 66 | * @returns {Promise} - promise based on the succes or failure of a request done with the fetch API 67 | */ 68 | submit() { 69 | let fetchData= { 70 | method:this.method, 71 | body:JSON.stringify(this.data()), 72 | headers:this.headers, 73 | credentials:this.credentials 74 | } 75 | 76 | 77 | return new Promise((resolve, reject) => { 78 | fetch(this.url, fetchData) 79 | .then(res => { 80 | if(res.status === 422 || res.status === 401)res.json().then(res => { 81 | this.onFail(res) 82 | reject(res) 83 | }) 84 | 85 | else res.json().then(resolve) 86 | }) 87 | .catch(reject) 88 | }) 89 | 90 | } 91 | 92 | /** 93 | * Sets the Errors of the form 94 | * @param {Array} errors - An array containing error objects 95 | */ 96 | onFail(errors) { 97 | this.errors.set(errors.errors); 98 | } 99 | } -------------------------------------------------------------------------------- /src/classes/index.js: -------------------------------------------------------------------------------- 1 | export * from './Form' 2 | export * from './Errors' -------------------------------------------------------------------------------- /src/dynamic-form.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 64 | 65 | -------------------------------------------------------------------------------- /src/dynamic-input.vue: -------------------------------------------------------------------------------- 1 | 93 | 146 | 147 | 162 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export * from './dynamic-form.vue' 2 | -------------------------------------------------------------------------------- /src/places-input.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 57 | 58 | --------------------------------------------------------------------------------