A simple form-builder with drag & drop to help you deal your own form. Less code in development and your site will be more generic, configurable.
- Less code in development
- Wide range of APIs
- Easily to maintain, update later
- Easily to config your form (drag & drop, control settings)
Fully documentation in this Repo's Wiki. Check it out!
Give this repo a ⭐ (star) if you actually like this and will use it for your development :D! Thank you!
The library is still in development, so if you meet any bugs or issues, feel free to open!
- VueJS 2.x
- Bootstrap 4
Note: From the version 1.2.0 to above, I don't import bootstrap 4 stylesheet into the bundle, you should include your own bootstrap 4 stylesheet in order to get both of GUI & Template working normally.
Form Builder Structure
Template: is where you can config/create/edit your own form.
GUI: is where the form will be built by your configuration.
For more information please visit this Repo's wiki, thanks :D!
How to install?
Run this command to install:
npm i v-form-builder --save
- For the best experience, please install the latest version!
- Please don't install the old version below v1.1.1. Thank you!
How to implement?
Import into your project
1/ Import as global component
2/ Import as single component
Note: you should have your own Bootstrap 4 stylesheet imported inside your project in order to use the Form Builder normally.
// form builder template// form builder gui
- type (String):
- Form Config (Template): template
- Form GUI: gui
- form (Object) - for Form GUI Only, where you passing the configuration data and the Form Builder will build the form by your configuration data.
V-Model for Form Builder Template
You can use v-model in Form Builder Template, it'll return to you the form configuration data that you're configurated (object) and also render the old configuration and let you edit/update that configuration.
The form config data would look like this:
sections: ...layout: "..."_uniqueId: "..."
Ideally, you need to convert that Object to JSON string and then save it in your database :D
V-Model for Form Builder GUI
You can use V-Model to get/set values from your built form.
The form values data would look like this:
section_key:control_name_1: "data"control_name_2: 123......
Please visit this Repo's Wiki.
- Version 1.3.0:
- Milestone 3 released.
- Able to validate the form.
- Able to styling the label (bold, italic, underline).
- Able to set label position for Section (horizontal or vertical)
- Fix some bugs
- Constraints for some Hooks
- APIs for Validate
- Version 1.2.1:
- Fix some minor bugs.
- Version 1.2.0:
- Hooks are available now for both Template & GUI.
- More options for controls, like:
- Select: Ajax data source (URL)
- Date Picker: date format
- Time Picker: time format
- Update control:
- Number Control to work properly with the decimal places.
- Time Picker: change to another time picker with a better APIs + options.
- Fix a problem that make the Date Picker icon didn't show.
- Stop import Bootstrap 4 CSS into the bundle.
- Version 1.1.1:
- First Release of Vue Form Builder
- Able to config form & render form by config data.
- Get/set value for both GUI & Template.
- First release - Released in 1.1.1
- Able to config form (Template)
- Render form by config data (GUI)
- Get/set value from GUI
- Hook will be available for several events. More options for some controls (like select with ajax data source, date format,...) - Released in 1.2.0
- Able to validate the form (required mostly), able to style the label (bold, italic, underline and location (top, left)). Released in 1.3.0
- Support formula to calculate inside the form.
Copyright © 2018 by Seth Phat aka Phat Tran Minh!