12
12
All fields are required and input text by default.
13
13
Once submitted, an event 'formSubmitted' is emitted on $root with the formName and all values.
14
14
15
- ## Key Features
16
- - [x] Generate a form from json / array (formFields props )
17
- - [x] Bulma classes by default (that can be overwritten)
18
- - [x] Responsive
19
- - [x] Fields on multiples columns
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
20
``` js
21
21
const formFields = [ [{ label: ' label one' }, { label: ' label two' }] ]
22
22
```
23
- - [x] Pre filled values
23
+ * ** Pre filled values**
24
24
``` js
25
25
const formFields = [{ label: ' the label' , value: ' the value' }]
26
26
```
27
- - [x] [ Simple rules validation] ( https://logaretm.github.io/vee-validate/guide/rules.html#rules )
27
+ * [ ** Simple rules validation** ] ( https://logaretm.github.io/vee-validate/guide/rules.html#rules )
28
28
``` js
29
29
const formFields = [{ label: ' the label' , rules: { is_not: ' label' } }]
30
30
```
31
- - [x] Cross field validation (see password confirmation example in the CodeSandbox link)
32
- - [x] Custom attr (class, data-* , ...) on .field & real fields (input, textarea...)
31
+ * ** Cross field validation** (see password confirmation example in the CodeSandbox link)
32
+ * ** Custom attr** (class, data-* , ...) on .field & real fields (input, textarea...)
33
33
``` js
34
34
const formFields = [{
35
35
attr: { class: ' classOnInput' },
@@ -38,23 +38,23 @@ Once submitted, an event 'formSubmitted' is emitted on $root with the formName a
38
38
label: ' the label'
39
39
}]
40
40
```
41
- - [x] Scoped slot everywhere inside the form
41
+ * ** Scoped slot support ** everywhere inside the form
42
42
``` js
43
43
const formFields = [{ slot: ' nameOfTheSlot' , props: { foo: ' bar' } }]
44
44
```
45
- - [x] Custom fields support inside scoped slot
45
+ * [ ** Custom fields support** ] ( https://codesandbox.io/s/vue-form-json-demo-dgk2n?file=/src/App.vue ) inside scoped slot
46
46
``` html
47
47
<template #nameOfTheSlot =" { foo, updateFormValues, isFormReseted }" >
48
48
```
49
- - [x] Html support
49
+ * ** Html support**
50
50
``` js
51
51
const formFields = [{ html: ' <p>Your html content</p>' }]
52
52
```
53
53
54
54
## Install
55
55
``` sh
56
56
yarn add vue-form-json
57
- # Optional: bulma @fortawesome/fontawesome-free (fontawesome is not needed if hasIcon props is false)
57
+ # Optional: bulma @fortawesome/fontawesome-free (fontawesome is not needed if hasIcon prop is false)
58
58
```
59
59
60
60
## Usage
0 commit comments