diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 8bb136dd..00000000 --- a/.babelrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "presets": ["es2015", "stage-3"], - "plugins": ["transform-runtime"], - "comments": false -} diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index e291365a..00000000 --- a/.editorconfig +++ /dev/null @@ -1,9 +0,0 @@ -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 4 -end_of_line = lf -insert_final_newline = true -trim_trailing_whitespace = true diff --git a/.gitignore b/.gitignore index 15115487..c2b66ff6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,11 +1,20 @@ .DS_Store -node_modules/ -npm-debug.log -yarn-error.log +node_modules + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* # Editor directories and files .idea +.vscode *.suo *.ntvs* *.njsproj *.sln +*.sw? diff --git a/LICENSE b/LICENSE index b97168d0..5660607e 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2018 Phat Tran +Copyright (c) 2020 Phat Tran Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 7f4a572f..79488621 100644 --- a/README.md +++ b/README.md @@ -4,212 +4,101 @@ [](http://hits.dwyl.io/sethsandaru/vue-form-builder) [](https://github.com/sethsandaru/vue-form-builder/wiki) -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. +A simple builder to help you generate a super form for your features/modules/sites,... Easy to use, create, upgrade, maintain,... +Why need to code the form when you can use `Vue-Form-Builder` and render it with some extra steps :D Advantages: -- 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. -- ... +- Less code in development (No need to do `
` this by your own) +- Easy to maintain, update your Form in the future. +- Setup your Form with a super friendly UI/UX. +- Extensibility (Your custom control, styling,...) +- Form Validation? I got you fam. +- Included HTML5 structure, no tricks or cheats. -Fully documentation in this Repo's Wiki. Check it out! +Give this repo a ⭐ (star) if you actually like this and might use it for your project :D! Thank you! -Give this repo a ⭐ (star) if you actually like this and will use it for your development/production :D! Thank you! +Feel free to open an issue if you reach any bugs or issues. Thanks. -The library is built & ready for production but if you meet any bugs or issues, feel free to open! +[Vue Form Builder Documentation](https://phattranminh96.gitbook.io/vue-form-builder/) -Demo Online: http://vue-form-builder.sethphat.com -Demo Project: https://github.com/sethsandaru/demo-vue-form-builder +## Demo +- Demo Online: [Vue Form Builder ONLINE](https://vue-form-builder.herokuapp.com/) +- Demo Form (Real Life Example): + - [Vue Form Builder Real Life Example](http://vue-form-builder.sethphat.com/) + - Repo: https://github.com/sethsandaru/demo-vue-form-builder -## Big Announcement +## Supported Browsers -### Preview v2.0.0 + |  |  |  |  +--- | --- | --- | --- | --- | +Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | 6.1+ ✔ | -Here: https://vue-form-builder.herokuapp.com/ - -### Announcement -Hey guys, seem likes I have ignored the project for nearly 1 year. Still a lot of problems left to make the form become better, like: -- The library itself is too highly depended from many libraries. This cost us a lot (including the final bundle size, too heavy) -- Multilingual - One of the must-have feature. -- Better approaches in the library, implement most of the good features from Vue, less depend on JQuery,... -- Extendable (yes it extendable, but still, not perfect enough) -- ... - -I got a plan to build a new version which is **v2.0.0**, to rebuild the library and make it better. - -You can send me an email to: `vue-form-builder@sethphat.com`, I would love to receive your feedback, ideas for the next version of Vue Form Builder. Together for the better. - -### New Plan - v2.0.0 -- A new structural for the Vue-Form-Builder. New codebase, new everything new. -- Still Vue, Still 2.5+ -- Less dependencies -- Style Injection - not only Bootstrap, you can use any CSS Framework as you want, even your own CSS Styling. -- More controls: - - Date Range (Start date - End date) - - File Upload (Interact with RestAPI) - - ... (your ideas here) -- ... - -## Current version -Current latest version of the Vue Form Builder: **1.4.1-rc1**. +## How to install? -Updated/Features: -- Update dependencies that got security problem. -- Placeholder for Sortable (drag n' drop section, row, control to order) -- Update some CSS, JS +### NPM / Yarn +```php +npm i v-form-builder --save +``` -## Technologies/Libraries using -- Javascript -- VueJS 2.x -- Webpack -- JQuery/JQuery UI -- Bootstrap 4 -- ... +### Browser +- Download the Latest [Release](https://github.com/sethsandaru/vue-form-builder/releases) +```html + -**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. - +### CDN +Coming soon (hopefully :v) -- GUI: is where the form will be built by your configuration. - +## Installation Note +- For the best experience, please install the latest version! +- Version below **@v2.0.0** has been deprecated. No maintain & fix bugs. Please use 2.0.0 or above. -For more information please visit this Repo's wiki, thanks :D! +## Documentation -## How to install? -Run this command to install: -```php -npm i v-form-builder --save -``` +[Main Documentation of Vue-Form-Builder](https://phattranminh96.gitbook.io/vue-form-builder/) -NPMJS: [https://www.npmjs.com/package/v-form-builder](https://www.npmjs.com/package/v-form-builder) +## How to implement for a beginner? -**Notes:** -- For the best experience, please install the latest version! -- Please don't install the old version below **v1.1.1**. Thank you! +- [Turning Up The Form](https://phattranminh96.gitbook.io/vue-form-builder/getting-started/turning-up-the-form) +- [Form Builder](https://phattranminh96.gitbook.io/vue-form-builder/getting-started/form-builder-starter) +- [Form Renderer](https://phattranminh96.gitbook.io/vue-form-builder/getting-started/form-renderer-starter) -## How to implement? +### Usage / Use-cases -### Import into your project -1/ Import as global component -```javascript -import FormBuilder from 'v-form-builder'; -Vue.component('FormBuilder', FormBuilder); -``` +[Some of the use-cases I mentioned](https://phattranminh96.gitbook.io/vue-form-builder/use-cases) -2/ Import as single component -```javascript -import FormBuilder from 'v-form-builder'; +### APIs / Extending / Hard-core stuff -export default { - components: {FormBuilder} - ... -} -``` +[Visit Documentation](https://phattranminh96.gitbook.io/vue-form-builder/extending/plugin-options) -**Note:** you should have your own Bootstrap 4 stylesheet imported inside your project in order to use the Form Builder normally. +## Dependencies +I carefully watch the dependencies of the Vue Form Builder, from the version **2.0.0** and above. Here is the list: -### Usage -```php - -