It is a VueJS component of dynamic forms. It registers the Vuex
store-modlue in the this.$store.forms
variable. The
external data which are specified via the store-data
parameter are extracted from the $store
general storage. As you can see from the example below, this component allows creating a form with different input fields, checkboxes, and buttons as well as validating it before submitting.
Components
Example
<form-builder url="/api-url">
<!-- form fields and other components -->
</form-builder>
Component properties
Name |
Type |
Default |
Description |
name |
String |
form-builder-${uid} |
Identifier for calling and listening to the events |
url(*) |
String |
undefined |
Required field. Address where the form should be sent. Acceps a template, for example /api/update/{records[0].id} , will search for value in current form default data |
method |
String |
'post' |
Data submission method |
default |
Object |
null |
Object with data |
store-data |
String |
undefined |
Name of the data field in global $store |
disabled-dialog |
Boolean |
false |
Disable window closing check |
auto-submit |
Boolean |
false |
Automatic form submission |
send-text |
String |
'Send' |
Text in the “Send” button |
cancel-text |
String |
'Cancel' |
Text in the “Cancel” button |
loading-text |
String |
'Loading...' |
Text in the “Send” button while sending |
Component events
Name |
Type |
Description |
form-builder:before-send |
AWES |
It is called in the event bus before submitting the form |
send |
Vue |
If there is a handler for this event, the form will not be sent and the data will be transferred to the handler |
sended |
Vue |
It appears after sending the form and transfers data from the server to the handler |
cancel |
Vue |
The “Cancel” button is pressed. If there is no handler for this event, cancel button will not be shown |
Language variables
{
FORMS_SEND: 'Send',
FORMS_CANCEL: 'Cancel',
FORMS_LOADING: 'Loading...',
FORMS_CONFIRM: 'Are you sure? All not submitted data will be erased...',
FORMS_MULTIBLOCK_ADD: 'add',
FORMS_SELECT_LABEL: 'Select a value',
FORMS_SELECT_PLACEHOLDER: 'Pick a value',
FORMS_UPLOAD_DROP: 'Drag and drop file or',
FORMS_UPLOAD_ADD: 'Add file',
FORMS_UPLOAD_FORMAT: 'File formats only',
FORMS_UPLOAD_SIZE: 'Size of files no more then',
FORMS_UPLOAD_REMOVE: 'Remove file',
FORMS_UPLOADER_EXTENSION_ERROR: 'File %s has wrong extension',
FORMS_UPLOADER_SIZE_ERROR: 'File %s is too big',
FORMS_EDITOR_VISUAL: 'Visual',
FORMS_EDITOR_CODE: 'Code'
}