v-form-builder1.4.0 • Public • Published
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)
- Extensibility (Extend-able): Help you to import your own Control
- Validation & Custom Control Validation Supported.
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/production :D! Thank you!
The library is built & ready for production but if you meet any bugs or issues, feel free to open!
Demo Online: http://vue-form-builder.sethphat.com
Demo Project: https://github.com/sethsandaru/demo-vue-form-builder
Current latest version of the Vue Form Builder: 1.4.0.
- Refactored most code, easily to read, develop & maintain now.
- Able to add more control (extendable)
- Fix some minor bugs
- Update devDependency that got security problem.
- VueJS 2.x
- JQuery/JQuery UI
- 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.4.0:
- Refactored, the code is more easy to view & read.
- Able to extend a custom control.
- Fix some minor bugs.
- Version 1.3.0:
- Milestone 3 released.
- Able to validate the form.
- Able to styling the label (bold, italic, underline).
- Able to set control 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.
Supporting the project
If you really like this project & want to contribute a little for the development. You can buy me a coffee. Thank you very much for your supporting <3.
Copyright © 2018 by Seth Phat aka Phat Tran Minh!