|
| 1 | +# Form builder |
| 2 | + |
| 3 | +Is a schema-based builder to generate form with components and validation |
| 4 | + |
| 5 | +## Basic usage |
| 6 | + |
| 7 | +```example |
| 8 | +<template> |
| 9 | + <div> |
| 10 | + <vue-form-builder |
| 11 | + ref="form" |
| 12 | + v-model="model" |
| 13 | + :schema="schema" |
| 14 | + :options="schema.formOptions" |
| 15 | + @action="onAction" |
| 16 | + ></vue-form-builder> |
| 17 | + <!-- <pre>{{ model }}</pre> --> |
| 18 | + </div> |
| 19 | +</template> |
| 20 | +
|
| 21 | +<script> |
| 22 | +export default { |
| 23 | + data () { |
| 24 | + return { |
| 25 | + model: { |
| 26 | + id: 1, |
| 27 | + name: 'John Doe', |
| 28 | + password: '', |
| 29 | + passwordConfirm: '', |
| 30 | + skills: [1], |
| 31 | + email: 'john.doe@gmail.com', |
| 32 | + status: true, |
| 33 | + addons: [1, 3], |
| 34 | + delivery: 1, |
| 35 | + comment: 'Some comment' |
| 36 | + }, |
| 37 | + schema: { |
| 38 | + fields: [ |
| 39 | + { |
| 40 | + type: 'input', |
| 41 | + inputType: 'input', |
| 42 | + label: 'ID', |
| 43 | + name: 'input', |
| 44 | + model: 'id', |
| 45 | + readonly: true, |
| 46 | + disabled: true, |
| 47 | + validate: { |
| 48 | + required: true |
| 49 | + } |
| 50 | + }, |
| 51 | + { |
| 52 | + type: 'input', |
| 53 | + inputType: 'password', |
| 54 | + label: 'Password', |
| 55 | + name: 'password', |
| 56 | + placeholder: 'Type password', |
| 57 | + model: 'password', |
| 58 | + validate: { |
| 59 | + required: true |
| 60 | + } |
| 61 | + }, |
| 62 | + { |
| 63 | + type: 'input', |
| 64 | + inputType: 'password', |
| 65 | + label: 'Password confirm', |
| 66 | + name: 'passwordConfirm', |
| 67 | + placeholder: 'Confirm password', |
| 68 | + model: 'passwordConfirm', |
| 69 | + validate: { |
| 70 | + required: true, |
| 71 | + confirmed: 'password' |
| 72 | + } |
| 73 | + }, |
| 74 | + { |
| 75 | + type: 'select', |
| 76 | + label: 'Skills', |
| 77 | + model: 'skills', |
| 78 | + name: 'skills', |
| 79 | + placeholder: 'Select', |
| 80 | + options: [ |
| 81 | + { label: 'label 1', value: 1 }, |
| 82 | + { label: 'label 2', value: 2 }, |
| 83 | + { label: 'label 3', value: 3 } |
| 84 | + ], |
| 85 | + validate: { |
| 86 | + required: true, |
| 87 | + included: [1, 2] |
| 88 | + } |
| 89 | + }, |
| 90 | + { |
| 91 | + type: 'input', |
| 92 | + inputType: 'input', |
| 93 | + label: 'Email', |
| 94 | + name: 'email', |
| 95 | + placeholder: 'Type email', |
| 96 | + model: 'email', |
| 97 | + validate: { |
| 98 | + required: true, |
| 99 | + email: true |
| 100 | + } |
| 101 | + }, |
| 102 | + { |
| 103 | + type: 'checkbox', |
| 104 | + label: 'Status', |
| 105 | + name: 'status', |
| 106 | + checkboxLabel: 'Some text', |
| 107 | + model: 'status', |
| 108 | + validate: { |
| 109 | + required: [true] |
| 110 | + } |
| 111 | + }, |
| 112 | + { |
| 113 | + type: 'checkbox', |
| 114 | + label: 'Addons', |
| 115 | + name: 'addons', |
| 116 | + model: 'addons', |
| 117 | + options: [ |
| 118 | + { label: 'label 1', value: 1 }, |
| 119 | + { label: 'label 2', value: 2 }, |
| 120 | + { label: 'label 3', value: 3 } |
| 121 | + ], |
| 122 | + validate: { |
| 123 | + required: true |
| 124 | + } |
| 125 | + }, |
| 126 | + { |
| 127 | + type: 'radio', |
| 128 | + label: 'Delivery', |
| 129 | + name: 'delivery', |
| 130 | + model: 'delivery', |
| 131 | + options: [ |
| 132 | + { label: 'label 1', value: 1 }, |
| 133 | + { label: 'label 2', value: 2 }, |
| 134 | + { label: 'label 3', value: 3 } |
| 135 | + ], |
| 136 | + validate: { |
| 137 | + required: true |
| 138 | + } |
| 139 | + }, |
| 140 | + { |
| 141 | + type: 'input', |
| 142 | + inputType: 'textarea', |
| 143 | + name: 'comment', |
| 144 | + label: 'Comment', |
| 145 | + model: 'comment', |
| 146 | + validate: { |
| 147 | + required: true, |
| 148 | + min: 10 |
| 149 | + } |
| 150 | + }, |
| 151 | + { |
| 152 | + type: 'actions', |
| 153 | + buttons: [ |
| 154 | + { |
| 155 | + type: 'cancel', |
| 156 | + buttonType: 'default', |
| 157 | + buttonLabel: 'Cancel' |
| 158 | + }, |
| 159 | + { |
| 160 | + type: 'submit', |
| 161 | + buttonType: 'success', |
| 162 | + buttonLabel: 'Submit' |
| 163 | + } |
| 164 | + ] |
| 165 | + } |
| 166 | + ], |
| 167 | + formOptions: { |
| 168 | + labelPosition: 'right', |
| 169 | + labelWidth: '120px' |
| 170 | + } |
| 171 | + } |
| 172 | + } |
| 173 | + }, |
| 174 | +
|
| 175 | + methods: { |
| 176 | + async onAction (e) { |
| 177 | + if (e.type === 'submit') { |
| 178 | + const res = await this.$refs.form.$validator.validate() |
| 179 | + if (res) alert('Form is valid') |
| 180 | + } |
| 181 | + } |
| 182 | + } |
| 183 | +} |
| 184 | +</script> |
| 185 | +``` |
| 186 | + |
| 187 | +## Attributes |
| 188 | + |
| 189 | +| Attributes | Description | Type | Accepted values | Default | |
| 190 | +| ---------- | -------------------------------------------- | -------- | --------------- | ------- | |
| 191 | +| `model` | Model for form fields (components `v-model`) | `Object` | - | - | |
| 192 | +| `schema` | Schema to generate form | `Object` | - | - | |
| 193 | +| `options` | Options for <a href="#/components/form">Form</a> component: label position & label width | `Object` | - | - | |
| 194 | + |
| 195 | +## Schema |
| 196 | + |
| 197 | +| Property | Description | Type | Accepted values | |
| 198 | +| --------------------- | ----------------------------------------------------------- | ------------------ | ------------------------------------------------------- | |
| 199 | +| `type` | Type of field | `String` | input, select, checkbox, radio, actions | |
| 200 | +| `inputType` | Type of input | `String` | text, number, textarea, password and border<sup>1</sup> | |
| 201 | +| `buttons` | Form action buttons. Available if type is `actions` | `Array` | | |
| 202 | +| `buttons.type` | Type of button. Also event emitter type for `@action` | `String` | submit, cancel | |
| 203 | +| `buttons.buttonType` | Type of <a href="#/components/button">Button</a> component | `String` | primary, success, warning, danger | |
| 204 | +| `buttons.buttonLabel` | Label for button | `String` | | |
| 205 | +| `name` | Field detection to start validation and error messages | `Object` | | |
| 206 | +| `label` | Label of the form item | `String` | | |
| 207 | +| `model` | Name of property in the model | `String` | | |
| 208 | +| `disabled` | Disable the field | `Boolean` | | |
| 209 | +| `readonly` | Same as `readonly` in native input | `Boolean` | | |
| 210 | +| `placeholder` | Placeholder of value | `Boolean` | | |
| 211 | +| `options` | Options for list components, like Select or Checkbox | `Array` | | |
| 212 | +| `options.label` | Label of option | `String` | | |
| 213 | +| `options.value` | Value of option | `String`, `Number` | | |
| 214 | +| `validate` | VeeValidate <a href="https://baianat.github.io/vee-validate/guide/rules.html?ref=vfc">rules</a> | `Object` | | |
| 215 | + |
| 216 | + - <sup>1</sup> `border` is available only if `type` is checkbox or radio. |
| 217 | + |
| 218 | +## Form events |
| 219 | + |
| 220 | +| Name | Description | Payload | |
| 221 | +| -------- | --------------------------------- | --------------------- | |
| 222 | +| `action` | Triggers when clicked action button | Type of action button | |
0 commit comments