Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/14nrv/vue-form-json
Generate a vue form with validation from an array
https://github.com/14nrv/vue-form-json
bulma form form-builder form-generator form-schema schema vee-validate vue vue-component vue-form vue-form-generator vuejs
Last synced: 3 months ago
JSON representation
Generate a vue form with validation from an array
- Host: GitHub
- URL: https://github.com/14nrv/vue-form-json
- Owner: 14nrv
- License: mit
- Created: 2018-09-03T17:50:34.000Z (over 6 years ago)
- Default Branch: dev
- Last Pushed: 2021-10-12T20:32:59.000Z (over 3 years ago)
- Last Synced: 2024-10-03T09:33:21.754Z (4 months ago)
- Topics: bulma, form, form-builder, form-generator, form-schema, schema, vee-validate, vue, vue-component, vue-form, vue-form-generator, vuejs
- Language: JavaScript
- Homepage:
- Size: 1.09 MB
- Stars: 94
- Watchers: 7
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/vue-form-json)
[](https://travis-ci.com/14nrv/vue-form-json)
[](https://codeclimate.com/github/14nrv/vue-form-json/test_coverage)
[](https://codeclimate.com/github/14nrv/vue-form-json/maintainability)
[](https://github.com/semantic-release/semantic-release)
# vue-form-json
[](https://codesandbox.io/s/vue-form-json-demo-t97l5?file=/src/main.js)
## Generate a vue form with validation from [an array](https://github.com/14nrv/vue-form-json/blob/master/src/components/Form/fields.json)
All fields are required and input text by default.
Once submitted, an event 'formSubmitted' is emitted on $root with the formName and all values.
## Features
* **Generate a form** from an array (formFields prop)
* **Bulma classes** by default (that can be overwritten)
* **Responsive**
* Fields on **multiples columns**
```js
const formFields = [ [{ label: 'label one' }, { label: 'label two' }] ]
```
* **Pre filled values**
```js
const formFields = [{ label: 'the label', value: 'the value' }]
```
* [**Simple rules validation**](https://logaretm.github.io/vee-validate/guide/rules.html#rules)
```js
const formFields = [{ label: 'the label', rules: { is_not: 'label' } }]
```
* **Cross field validation** (see password confirmation example in the CodeSandbox link)
* **Custom attr** (class, data-*, ...) on .field & real fields (input, textarea...)
```js
const formFields = [{
attr: { class: 'classOnInput' },
alternativeLabel: 'an alternative label text that will be displayed',
field: { attr: { class: 'classOnFieldClassName' } },
label: 'the label'
}]
```
* **Help text** (putted right after the label, see the age field on the CodeSandbox link)
```js
const formFields = [{
label: 'label one',
help: 'help text content'
}]
```
* **Scoped slot support** everywhere inside the form
```js
const formFields = [{ slot: 'nameOfTheSlot', props: { foo: 'bar' } }]
```
* **Custom fields support**
* for a simple field ([with `is` attribute + `components` prop](https://codesandbox.io/s/vue-form-demo-pgpbd))
```js
const formFields = [{ is: 'CustomFieldName' }]
```
* [inside a scoped slot](https://codesandbox.io/s/vue-form-json-demo-dgk2n?file=/src/App.vue) for more flexibility
```html
```
* **Html support**
```js
const formFields = [{ html: '
Your html content
' }]
```
## Install
```sh
yarn add vue-form-json
# Optional: bulma @fortawesome/fontawesome-free (fontawesome is not needed if hasIcon prop is false)
```
## Usage
```js
// main.js
import { extend, ValidationProvider } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'
import { messages } from 'vee-validate/dist/locale/en.json'
// ...
Vue.component('ValidationProvider', ValidationProvider)
Object.keys(rules).forEach(rule => {
extend(rule, {
...rules[rule],
message: messages[rule]
})
})
// ...
```
```html
#app.section
form-json(:btnReset="{value: 'Reset'}",
:btnSubmit="{value: 'Submit'}",
:formFields="jsonFields",
formName="userProfil")
template(#slotNameAddedInJsonFields="{ prop }")
p Your slot content and {{ prop }}
// import 'bulma/css/bulma.min.css'
// import '@fortawesome/fontawesome-free/css/all.min.css'
// import 'vue-form-json/dist/vue-form-json.css'
import formJson from 'vue-form-json'
import jsonFields from './../assets/fields'
export default {
name: 'app',
components: {
formJson
},
mounted () {
this.$root.$on('formSubmitted', values => console.log(values))
},
computed: {
jsonFields: () => jsonFields
}
}
```
## Props available on formJson component
```js
props: {
formFields: {
type: Array,
required: true
},
formName: {
type: String,
required: true
},
hasAsteriskJustAfterLabel: {
type: Boolean,
default: false
},
mandatoryAsteriskLegend: {
type: String,
default: '* field required'
},
btnSubmit: {
type: Object,
default: () => ({})
},
btnReset: {
type: Object,
default: () => ({})
},
resetFormAfterSubmit: {
type: Boolean,
default: false
},
defaultMin: {
type: [Boolean, Number],
default: false
},
defaultMax: {
type: [Boolean, Number],
default: false
},
defaultMinValue: {
type: [Boolean, Number],
default: 0
},
defaultMaxValue: {
type: [Boolean, Number],
default: false
},
hasIcon: {
type: Boolean,
default: true
},
camelizePayloadKeys: {
type: Boolean,
default: false
},
components: {
type: Object,
default: () => ({})
},
}
```