Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
a18f608
updated to latest npm packages, added new "basic" dev samples, fixed …
zoul0813 Dec 1, 2017
a1f31d3
updated core field tests to use modified nextTick with exception hand…
zoul0813 Dec 4, 2017
2e192ae
skipping optional fields, proposing these be moved into separate pack…
zoul0813 Dec 4, 2017
cf90bd6
disabled "color" test for fieldInput.spec to enable build
zoul0813 Dec 4, 2017
1cb15d8
Merge branch 'master' into feature/vue-2.5.9
zoul0813 Dec 5, 2017
b017ffd
Merge branch 'feature/345-debounced-validate-fix' into feature/vue-2.5.9
zoul0813 Dec 5, 2017
dc9c88f
Merge branch 'feature/345-debounced-validate-fix' into feature/vue-2.5.9
zoul0813 Dec 5, 2017
55dff90
build
zoul0813 Dec 5, 2017
244abb9
Merge pull request #355 from zoul0813/feature/vue-2.5.9
icebob Dec 5, 2017
163fdc9
Update to Webpack 3. Almost all dependency are updated. Reorganisatio…
Dec 6, 2017
49043ab
Update configuration and dependency
Feb 15, 2018
056d9db
Fix and correction to pass Eslint and other checks
Feb 15, 2018
5c48f52
Merge remote-tracking branch 'upstream/master' into v3
Feb 15, 2018
e97420e
WIP on the unit test
Feb 16, 2018
2d74a15
WIP on unit test
Feb 19, 2018
ebf2202
Dependency updated
Feb 26, 2018
166ee43
Progress on test
Feb 26, 2018
59aaf2b
Progress on test
Feb 27, 2018
a858da6
Work on the code coverage
Feb 28, 2018
057a1ad
Merge pull request #2 from lionel-bijaoui/unit_test
lionel-bijaoui Mar 2, 2018
49c789c
Progress on test
Mar 5, 2018
6bf1cd2
Cleaning of the test
Mar 5, 2018
4498e6b
Merge pull request #3 from lionel-bijaoui/unit_test
lionel-bijaoui Mar 5, 2018
632911e
Correction of build and small corrections
Mar 5, 2018
e932b58
Remove config file
Mar 9, 2018
64d0421
Merge pull request #357 from lionel-bijaoui/v3
icebob Mar 9, 2018
4b7f551
updated abstractField and fieldImage to clean up errors generated by …
zoul0813 Mar 9, 2018
25e7efb
created a new "attributes" directive that binds input/wrapper (with s…
zoul0813 Mar 9, 2018
e7859b7
added tests and fixed v-attributes binding on components
zoul0813 Mar 13, 2018
3594edf
cleaned up the "clean up"
zoul0813 Mar 14, 2018
3249775
added brackets to conditional
zoul0813 Mar 14, 2018
70d6798
Merge pull request #414 from zoul0813/v3
zoul0813 Mar 14, 2018
5fdf339
Merge branch 'v3' into v3-features/dynamic-html-attributes
zoul0813 Mar 14, 2018
e21a0de
Merge pull request #415 from zoul0813/v3-features/dynamic-html-attrib…
zoul0813 Mar 14, 2018
d19e098
Merge branch 'v3' into v3_update
Jun 18, 2018
b9ea983
Fix test and update dependency
Jun 19, 2018
26960e6
Merge pull request #4 from lionel-bijaoui/v3_update
lionel-bijaoui Jun 19, 2018
3f52a20
Rework of formGenerator to use a component
Jun 19, 2018
90c4673
Fix URL, rename and move mixinsUtils.js, modify a comment
Jun 26, 2018
aaaa3c0
Merge branch 'master' into Rework_and_HTML_for_label_hint
lionel-bijaoui Jun 26, 2018
e061755
Fix version number
Jun 26, 2018
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime", "lodash"],
"comments": false
}
"presets": [
[
"env",
{
"modules": false,
"useBuiltIns": "entry"
}
],
"stage-2"
],
"plugins": ["transform-runtime", "lodash"],
"env": {
"test": {
"plugins": ["istanbul"]
}
}
}
9 changes: 9 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
root = true

[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true
4 changes: 4 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
dist/*.js
build/*.js
config/*.js
!.eslintrc.js
70 changes: 26 additions & 44 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,45 +1,27 @@
module.exports = {
root: true,
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jquery": false,
"mocha": true
},
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
},
"plugins": [
"html"
],
"rules": {
"indent": [
"warn",
"tab",
{ SwitchCase: 1 }
],
"quotes": [
"warn",
"double"
],
"semi": [
"error",
"always"
],
"no-var": [
"error"
],
"no-console": [
"off"
],
"no-unused-vars": [
"warn"
]
}
};
root: true,
parser: "vue-eslint-parser",
parserOptions: {
sourceType: "module",
parser: "babel-eslint"
},
env: {
browser: true,
commonjs: true
},
globals: {
process: true
},
extends: ["eslint:recommended", "plugin:vue/essential"],
plugins: ["prettier"],
rules: {
indent: [1, "tab", { SwitchCase: 1 }],
quotes: [1, "double", { allowTemplateLiterals: true }],
semi: [2, "always"],
"no-var": [2],
"no-console": [0],
"no-unused-vars": [1],
"no-throw-literal": 0,
eqeqeq: [2, "smart"]
}
};
3 changes: 1 addition & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
.DS_Store
node_modules/
coverage/
docs/_book/
npm-debug.log
selenium-debug.log
test/unit/coverage
test/e2e/reports
stats.json
typings/
typings.json
typings.json
6 changes: 0 additions & 6 deletions .jsbeautifyrc

This file was deleted.

94 changes: 59 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
# vue-form-generator [![NPM version](https://img.shields.io/npm/v/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator) ![VueJS v2.x compatible](https://img.shields.io/badge/vue%202.x-compatible-green.svg)

A schema-based form generator component for Vue.js.

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/d27be05a35bf459b9292b8172e314a08)](https://www.codacy.com/app/mereg-norbert/vue-form-generator_2?utm_source=github.com&utm_medium=referral&utm_content=vue-generators/vue-form-generator&utm_campaign=Badge_Grade)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/d27be05a35bf459b9292b8172e314a08)](https://www.codacy.com/app/mereg-norbert/vue-form-generator_2?utm_source=github.com&utm_medium=referral&utm_content=vue-generators/vue-form-generator&utm_campaign=Badge_Grade)
[![Build Status](https://travis-ci.org/vue-generators/vue-form-generator.svg?branch=master)](https://travis-ci.org/vue-generators/vue-form-generator)
[![Coverage Status](https://coveralls.io/repos/github/vue-generators/vue-form-generator/badge.svg?branch=master)](https://coveralls.io/github/vue-generators/vue-form-generator?branch=master)
[![NPMS.io score](https://badges.npms.io/vue-form-generator.svg)]()
Expand All @@ -13,51 +14,61 @@ A schema-based form generator component for Vue.js.
[![Downloads](https://img.shields.io/npm/dm/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator)

## Demo

[JSFiddle simple example](https://jsfiddle.net/icebob/0mg1v81e/)

[![Screenshot](https://icebob.gitbooks.io/vueformgenerator/content/assets/vfg-example1.png)](https://jsfiddle.net/icebob/0mg1v81e/)

## Features
- reactive forms based on schemas
- multiple object editing
- 21 field types
- built-in validators
- core & full bundles (11kb and 19kb gzipped)
- Bootstrap friendly templates
- customizable styles
- can be extended easily with custom fields
- ...etc

* reactive forms based on schemas
* multiple object editing
* 21 field types
* built-in validators
* core & full bundles (11kb and 19kb gzipped)
* Bootstrap friendly templates
* customizable styles
* can be extended easily with custom fields
* ...etc

## Documentation

[Online documentation on Gitbook](https://icebob.gitbooks.io/vueformgenerator/content/)

## Dependencies

vue-form-generator uses [fecha](https://github.com/taylorhakes/fecha) and [lodash](https://lodash.com/) internally.

While built-in fields don't need external dependencies, optional fields may need other libraries.
While built-in fields don't need external dependencies, optional fields may need other libraries.
These dependencies fall into two camps: jQuery or Vanilla. You can find almost the same functionality in both flavors.
In the end, it's your choice to depend on jQuery or not.

You can find details about dependencies in the official [documentation](https://icebob.gitbooks.io/vueformgenerator/content/) under each specific component.

## Installation

### NPM

You can install it via [NPM](http://npmjs.org/) or [yarn](https://yarnpkg.com/).

#### Latest version for Vue 2.x

```
$ npm install vue-form-generator
```

#### Legacy version for Vue 1.0.x

```
$ npm install vue-form-generator@0.6.1
```

### Manual

Download zip package and unpack and add the vfg.css and vfg.js file to your project from dist folder.

```
https://github.com/icebob/vue-form-generator/archive/master.zip
https://github.com/vue-generators/vue-form-generator/archive/master.zip
```

### Core vs Full version
Expand All @@ -66,10 +77,10 @@ VueFormGenerator come in two version : `core` and `full`.
Core is a more minimal version with only half the fields.
Full is core + other fields.

* Full bundle: 75 kB (gzipped: 19 kB)
* Core bundle: 39 kB (gzipped: 11 kB)
* Full bundle: 75 kB (gzipped: 19 kB)
* Core bundle: 39 kB (gzipped: 11 kB)

If you don't know what to choose, don't worry, the full is the default version.
If you don't know what to choose, don't worry, the full is the default version.
If you want the slim down version, here is the changes:

```js
Expand All @@ -87,6 +98,7 @@ If you want the slim down version, here is the changes:
```

## Usage

```html
<template>
<div class="panel-body">
Expand All @@ -101,23 +113,23 @@ Vue.use(VueFormGenerator);

export default {
data: {
model: {

model: {
id: 1,
name: "John Doe",
password: "J0hnD03!x4",
skills: ["Javascript", "VueJS"],
email: "john.doe@gmail.com",
status: true
},

schema: {
fields: [{
type: "input",
inputType: "text",
label: "ID (disabled text field)",
model: "id",
readonly: true,
readonly: true,
disabled: true
},{
type: "input",
Expand All @@ -139,7 +151,7 @@ export default {
},{
type: "select",
label: "Skills",
model: "skills",
model: "skills",
values: ["Javascript", "VueJS", "CSS3", "HTML5"]
},{
type: "input",
Expand All @@ -165,57 +177,69 @@ export default {
```

Usage in local components

```js
import VueFormGenerator from "vue-form-generator";

//component javascript
export default{
components:{
"vue-form-generator": VueFormGenerator.component
}
}
export default {
components: {
"vue-form-generator": VueFormGenerator.component
}
};
```

## Development

This command will start a `webpack-dev-server` with content of `dev` folder.

```bash
npm run dev
```

## Build

This command will build a distributable version in the `dist` directory.

```bash
npm run build
```

## Test

```bash
npm test
```
or

or

```bash
npm run ci
```

## More fields *new*
VueFormGenerator supports custom fields. If you decide to release your custom field into the wild, please open a new issue so we can add you to a list here! Please try to use this naming convention for your custom field : vfg-field-* Example :
## More fields _new_

- `vfg-field-myfield`
- `vfg-field-calendar`
- `vfg-field-awesome-dropdown`
VueFormGenerator supports custom fields. If you decide to release your custom field into the wild, please open a new issue so we can add you to a list here! Please try to use this naming convention for your custom field : vfg-field-\* Example :

* `vfg-field-myfield`
* `vfg-field-calendar`
* `vfg-field-awesome-dropdown`

This way, it will be easier for everyone to find it. Thank you !

### Public Custom Fields

- [vue-tel-input](https://github.com/EducationLink/vue-tel-input) - International Telephone Input Boilerplate with Vue (integrated with VueFormGenerator).
- [vfg-field-sourcecode](https://github.com/gwenaelp/vfg-field-sourcecode) - A source code field for vue-form-generator
- [vfg-field-array](https://github.com/gwenaelp/vfg-field-array) - A vue-form-generator field to handle arrays of items of any type.
- [vfg-field-object](https://github.com/gwenaelp/vfg-field-object) - A vue-form-generator field to handle objects, with or without schemas.
* [vue-tel-input](https://github.com/EducationLink/vue-tel-input) - International Telephone Input Boilerplate with Vue (integrated with VueFormGenerator).
* [vfg-field-sourcecode](https://github.com/gwenaelp/vfg-field-sourcecode) - A source code field for vue-form-generator
* [vfg-field-array](https://github.com/gwenaelp/vfg-field-array) - A vue-form-generator field to handle arrays of items of any type.
* [vfg-field-object](https://github.com/gwenaelp/vfg-field-object) - A vue-form-generator field to handle objects, with or without schemas.

## Contribution

Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.

## License

vue-form-generator is available under the [MIT license](https://tldrlegal.com/license/mit-license).

## Contact
Expand Down
Loading