├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .releaserc.yml ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── jest.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── components │ ├── Fields │ │ ├── Checkbox.vue │ │ ├── Control.vue │ │ ├── Input.spec.js │ │ ├── Input.vue │ │ ├── Label.spec.js │ │ ├── Label.vue │ │ ├── Radio.vue │ │ ├── Select.spec.js │ │ ├── Select.vue │ │ ├── Textarea.spec.js │ │ └── Textarea.vue │ └── Form │ │ ├── Form.spec.js │ │ ├── Form.vue │ │ ├── FormAttr.spec.js │ │ ├── FormComponent.spec.js │ │ ├── FormError.spec.js │ │ ├── FormHtml.spec.js │ │ ├── FormRules.spec.js │ │ ├── FormSlot.spec.js │ │ ├── fields.json │ │ └── index.js ├── helpers │ ├── index.js │ ├── index.spec.js │ └── test.js ├── main.js └── mixins │ └── fields.js ├── vue.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | not IE 11 -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | jest: true 6 | }, 7 | extends: [ 8 | 'plugin:vue/recommended', 9 | 'plugin:jest/recommended', 10 | 'standard' 11 | ], 12 | plugins: [ 13 | 'vue', 14 | 'jest' 15 | ], 16 | rules: { 17 | // 0 = off, 1 = warn, 2 = error 18 | 'no-console': process.env.NODE_ENV === 'production' ? 2 : 0, 19 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 20 | 'array-callback-return': 0 21 | }, 22 | parserOptions: { 23 | parser: 'babel-eslint' 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | 5 | # Log files 6 | *.log 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | 12 | coverage 13 | 14 | .history 15 | *.zip 16 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.releaserc.yml: -------------------------------------------------------------------------------- 1 | verifyConditions: 2 | - "@semantic-release/changelog" 3 | - "@semantic-release/npm" 4 | - "@semantic-release/github" 5 | - "@semantic-release/git" 6 | 7 | prepare: 8 | - "@semantic-release/changelog" 9 | - "@semantic-release/npm" 10 | - 11 | path: "@semantic-release/git" 12 | assets": 13 | - "package.json" 14 | - "dist" 15 | message: "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}" 16 | 17 | publish: 18 | - "@semantic-release/npm" 19 | - 20 | path: "@semantic-release/github" 21 | assets: 22 | - path: "dist" 23 | 24 | success: 25 | - "@semantic-release/github" 26 | 27 | fail: 28 | - "@semantic-release/github" 29 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | cache: yarn 3 | notifications: 4 | email: false 5 | node_js: 6 | - '12' 7 | 8 | stages: 9 | - test 10 | - name: deploy 11 | if: branch = master 12 | 13 | jobs: 14 | include: 15 | - stage: test 16 | before_script: 17 | - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter 18 | - chmod +x ./cc-test-reporter 19 | - ./cc-test-reporter before-build 20 | script: 21 | - yarn lint -f ./node_modules/eslint-junit/index.js 22 | - yarn test 23 | after_script: 24 | - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT 25 | 26 | - stage: deploy 27 | script: 28 | - if [ "$TRAVIS_PULL_REQUEST" == "false" ] && [ "$TRAVIS_BRANCH" == "master" ]; then yarn semantic-release; fi 29 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # [3.1.0](https://github.com/14nrv/vue-form-json/compare/v3.0.1...v3.1.0) (2020-10-24) 2 | 3 | 4 | ### Features 5 | 6 | * slugify label in ValidationProvider name ([fe326f3](https://github.com/14nrv/vue-form-json/commit/fe326f3b5ed87f2ed70cd077c6512a28a3afda88)) 7 | * **label:** add for attr ([0568eb2](https://github.com/14nrv/vue-form-json/commit/0568eb26b46b6b219b4a32deb57cffe6a9a57ecb)) 8 | * add alternativeLabel & for attr ([c72bab3](https://github.com/14nrv/vue-form-json/commit/c72bab32f143672dad29068a18485f54129c6f40)) 9 | 10 | ## [3.0.1](https://github.com/14nrv/vue-form-json/compare/v3.0.0...v3.0.1) (2020-10-10) 11 | 12 | 13 | ### Bug Fixes 14 | 15 | * use ValidationProvider of user ([8765a2d](https://github.com/14nrv/vue-form-json/commit/8765a2d2cce3e54c82cc56a220baa69b8b2ff33f)) 16 | 17 | # [3.0.0](https://github.com/14nrv/vue-form-json/compare/v2.0.0...v3.0.0) (2020-10-04) 18 | 19 | 20 | ### chore 21 | 22 | * bump npm dependencies ([39beab7](https://github.com/14nrv/vue-form-json/commit/39beab792da168e0e483d398f53e75d1a8a374a5)) 23 | 24 | 25 | ### BREAKING CHANGES 26 | 27 | * renamed validation to rules, defaultMinLength to defaultMin, defaultMaxLength to defaultMax, defaultMin to defaultMinValue, defaultMax to defaultMaxValue, minLength to rules.min, maxLength to rules.max, min to rules.min_value, max to rules.max_value 28 | 29 | # [2.0.0](https://github.com/14nrv/vue-form-json/compare/v1.1.1...v2.0.0) (2020-07-19) 30 | 31 | 32 | ### Features 33 | 34 | * allow custom attr on btn reset & submit ([f92c961](https://github.com/14nrv/vue-form-json/commit/f92c961)) 35 | * allow custom attr on btn reset & submit ([b4116cc](https://github.com/14nrv/vue-form-json/commit/b4116cc)) 36 | 37 | 38 | ### BREAKING CHANGES 39 | 40 | * btnSubmitText will become btnSubmit.value same for btnResetText 41 | 42 | ## [1.1.1](https://github.com/14nrv/vue-form-json/compare/v1.1.0...v1.1.1) (2019-07-07) 43 | 44 | 45 | ### Bug Fixes 46 | 47 | * **slugify:** return non ASCII characters ([10f57ca](https://github.com/14nrv/vue-form-json/commit/10f57ca)) 48 | 49 | # [1.1.0](https://github.com/14nrv/vue-form-json/compare/v1.0.0...v1.1.0) (2019-02-09) 50 | 51 | 52 | ### Features 53 | 54 | * allow VeeValidate simple validation rules ([78da861](https://github.com/14nrv/vue-form-json/commit/78da861)) 55 | 56 | # [1.0.0](https://github.com/14nrv/vue-form-json/compare/v0.7.0...v1.0.0) (2019-02-09) 57 | 58 | 59 | ### Features 60 | 61 | * allow custom attr ([de67d77](https://github.com/14nrv/vue-form-json/commit/de67d77)) 62 | 63 | 64 | ### BREAKING CHANGES 65 | 66 | * replace parentClass by field.attr.class or attr.class 67 | 68 | # [0.7.0](https://github.com/14nrv/vue-form-json/compare/v0.6.0...v0.7.0) (2019-02-02) 69 | 70 | 71 | ### Features 72 | 73 | * allow custom css classes ([bb1a356](https://github.com/14nrv/vue-form-json/commit/bb1a356)) 74 | * allow custom css classes ([3a5f5f5](https://github.com/14nrv/vue-form-json/commit/3a5f5f5)) 75 | 76 | # [0.6.0](https://github.com/14nrv/vue-form-json/compare/v0.5.0...v0.6.0) (2019-02-02) 77 | 78 | 79 | ### Features 80 | 81 | * allow slot ([2d04d3c](https://github.com/14nrv/vue-form-json/commit/2d04d3c)) 82 | 83 | # [0.5.0](https://github.com/14nrv/vue-form-json/compare/v0.4.0...v0.5.0) (2018-12-12) 84 | 85 | 86 | ### Features 87 | 88 | * allow html inside formFields props ([2a1ad16](https://github.com/14nrv/vue-form-json/commit/2a1ad16)) 89 | 90 | # [0.4.0](https://github.com/14nrv/vue-form-json/compare/v0.3.2...v0.4.0) (2018-11-17) 91 | 92 | 93 | ### Bug Fixes 94 | 95 | * set defaultMinLength props to false by default ([3eacdd3](https://github.com/14nrv/vue-form-json/commit/3eacdd3)) 96 | 97 | 98 | ### Features 99 | 100 | * add hasIcon prop ([41a0a54](https://github.com/14nrv/vue-form-json/commit/41a0a54)) 101 | * add pattern validation rule ([c98b194](https://github.com/14nrv/vue-form-json/commit/c98b194)) 102 | 103 | ## [0.3.2](https://github.com/14nrv/vue-form-json/compare/v0.3.1...v0.3.2) (2018-11-10) 104 | 105 | 106 | ### Bug Fixes 107 | 108 | * responsive form ([d283c66](https://github.com/14nrv/vue-form-json/commit/d283c66)) 109 | 110 | ## [0.3.1](https://github.com/14nrv/vue-form-json/compare/v0.3.0...v0.3.1) (2018-11-09) 111 | 112 | 113 | ### Bug Fixes 114 | 115 | * export css file for npm ([efdeb0e](https://github.com/14nrv/vue-form-json/commit/efdeb0e)) 116 | 117 | # [0.3.0](https://github.com/14nrv/vue-form-json/compare/v0.2.0...v0.3.0) (2018-11-09) 118 | 119 | 120 | ### Bug Fixes 121 | 122 | * validation on blur ([889e07d](https://github.com/14nrv/vue-form-json/commit/889e07d)) 123 | * validation on blur for input radio ([5cadbe6](https://github.com/14nrv/vue-form-json/commit/5cadbe6)) 124 | 125 | 126 | ### Features 127 | 128 | * allow initial value ([4d3f990](https://github.com/14nrv/vue-form-json/commit/4d3f990)) 129 | * trim value ([848d9fb](https://github.com/14nrv/vue-form-json/commit/848d9fb)) 130 | 131 | # [0.2.0](https://github.com/14nrv/vue-form-json/compare/v0.1.3...v0.2.0) (2018-09-30) 132 | 133 | 134 | ### Bug Fixes 135 | 136 | * checkbox value ([6863c5b](https://github.com/14nrv/vue-form-json/commit/6863c5b)) 137 | * form validation ([176bf56](https://github.com/14nrv/vue-form-json/commit/176bf56)) 138 | 139 | 140 | ### Features 141 | 142 | * add min, max, minLength, maxLength props ([39da3c3](https://github.com/14nrv/vue-form-json/commit/39da3c3)) 143 | * add resetFormAfterSubmit props ([cfe1ea3](https://github.com/14nrv/vue-form-json/commit/cfe1ea3)) 144 | * **label:** add help props ([9208a4c](https://github.com/14nrv/vue-form-json/commit/9208a4c)) 145 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![NPM Version](https://img.shields.io/npm/v/vue-form-json.svg)](https://www.npmjs.com/package/vue-form-json) 2 | [![Build Status](https://travis-ci.com/14nrv/vue-form-json.svg?branch=dev)](https://travis-ci.com/14nrv/vue-form-json) 3 | [![Test Coverage](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/test_coverage)](https://codeclimate.com/github/14nrv/vue-form-json/test_coverage) 4 | [![Maintainability](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/maintainability)](https://codeclimate.com/github/14nrv/vue-form-json/maintainability) 5 | [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) 6 | 7 | # vue-form-json 8 | 9 | [![Edit vue-form-json-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-form-json-demo-t97l5?file=/src/main.js) 10 | 11 | ## Generate a vue form with validation from [an array](https://github.com/14nrv/vue-form-json/blob/master/src/components/Form/fields.json) 12 | All fields are required and input text by default. 13 | Once submitted, an event 'formSubmitted' is emitted on $root with the formName and all values. 14 | 15 | ## Features 16 | * **Generate a form** from an array (formFields prop) 17 | * **Bulma classes** by default (that can be overwritten) 18 | * **Responsive** 19 | * Fields on **multiples columns** 20 | ```js 21 | const formFields = [ [{ label: 'label one' }, { label: 'label two' }] ] 22 | ``` 23 | * **Pre filled values** 24 | ```js 25 | const formFields = [{ label: 'the label', value: 'the value' }] 26 | ``` 27 | * [**Simple rules validation**](https://logaretm.github.io/vee-validate/guide/rules.html#rules) 28 | ```js 29 | const formFields = [{ label: 'the label', rules: { is_not: 'label' } }] 30 | ``` 31 | * **Cross field validation** (see password confirmation example in the CodeSandbox link) 32 | * **Custom attr** (class, data-*, ...) on .field & real fields (input, textarea...) 33 | ```js 34 | const formFields = [{ 35 | attr: { class: 'classOnInput' }, 36 | alternativeLabel: 'an alternative label text that will be displayed', 37 | field: { attr: { class: 'classOnFieldClassName' } }, 38 | label: 'the label' 39 | }] 40 | ``` 41 | * **Help text** (putted right after the label, see the age field on the CodeSandbox link) 42 | ```js 43 | const formFields = [{ 44 | label: 'label one', 45 | help: 'help text content' 46 | }] 47 | ``` 48 | * **Scoped slot support** everywhere inside the form 49 | ```js 50 | const formFields = [{ slot: 'nameOfTheSlot', props: { foo: 'bar' } }] 51 | ``` 52 | * **Custom fields support** 53 | * for a simple field ([with `is` attribute + `components` prop](https://codesandbox.io/s/vue-form-demo-pgpbd)) 54 | ```js 55 | const formFields = [{ is: 'CustomFieldName' }] 56 | ``` 57 | 58 | * [inside a scoped slot](https://codesandbox.io/s/vue-form-json-demo-dgk2n?file=/src/App.vue) for more flexibility 59 | ```html 60 |