Skip to content

Commit e27e26b

Browse files
icebobicebob
authored
Merge pull request #108 from icebob/next
Next version for Vue 2
2 parents d5d4508 + cfe892f commit e27e26b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+8714
-1436
lines changed

‎.babelrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"presets": ["es2015", "stage-0"],
2+
"presets": ["es2015", "stage-2"],
33
"plugins": ["transform-runtime"],
44
"comments": false
55
}

‎.travis.yml

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ cache:
33
directories:
44
- node_modules
55
node_js:
6+
- "7"
67
- "6"
7-
- "5"
8-
- "4"
98
after_success:
109
- npm run coverall

‎CHANGELOG.md

+121-55
Large diffs are not rendered by default.

‎README.md

+13-3
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,18 @@ You can find details about dependencies in [documentation](https://icebob.gitboo
4040

4141
## Installation
4242
### NPM
43-
You can install it via [NPM](http://npmjs.org/).
43+
You can install it via [NPM](http://npmjs.org/) or [yarn](https://yarnpkg.com/).
44+
45+
#### Latest version for Vue 2.x
4446
```
4547
$ npm install vue-form-generator
4648
```
49+
50+
#### Legacy version for Vue 1.0.x
51+
```
52+
$ npm install [email protected]
53+
```
54+
4755
### Manual
4856
Download zip package and unpack and add the `vue-form-generator.css` and `vue-form-generator.js` file to your project from dist folder.
4957
```
@@ -140,8 +148,10 @@ npm run build
140148
```bash
141149
npm test
142150
```
143-
144-
See: https://github.com/icebob/vue-form-generator/projects/1
151+
or
152+
```bash
153+
npm run ci
154+
```
145155

146156
## Contribution
147157
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.

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-form-generator",
3-
"version": "0.6.1",
3+
"version": "2.0.0-beta3",
44
"homepage": "https://github.com/icebob/vue-form-generator",
55
"authors": [
66
"Icebob"

‎dev/app.vue renamed to ‎dev/full/app.vue

+55-45
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,33 @@
1-
<template lang="jade">
2-
.row
3-
.col-md-10.col-md-offset-1
4-
data-table(:rows="rows", :selected="selected", :select="selectRow")
5-
6-
.row(v-show="model")
7-
.col-md-5.col-md-offset-1
8-
.control-buttons.text-center
9-
button.btn.btn-default.new(@click="newModel")
10-
i.fa.fa-plus
11-
| New
12-
button.btn.btn-primary.save(@click="saveModel")
13-
i.fa.fa-floppy-o
14-
| Save
15-
i.fa.fa-warning(v-if="showWarning()")
16-
button.btn.btn-danger.delete(@click="deleteModel")
17-
i.fa.fa-trash
18-
| Delete
19-
20-
.errors.text-center
21-
div.alert.alert-danger(v-for="item in validationErrors", track-by="$index") {{ item.field.label}}:
22-
strong {{ item.error }}
23-
24-
vue-form-generator(:schema='schema', :model='model', :options='formOptions', :multiple="selected.length > 1", v-ref:form, :is-new-model="isNewModel")
25-
26-
27-
.col-md-6
28-
pre(v-if='model') {{{ model | prettyJSON }}}
1+
<template>
2+
<div>
3+
<div class="row">
4+
<div class="col-md-10 col-md-offset-1">
5+
<data-table :rows="rows" :selected="selected" :select="selectRow"></data-table>
6+
</div>
7+
</div>
8+
<div v-show="model" class="row">
9+
<div class="col-md-5 col-md-offset-1">
10+
<div class="control-buttons text-center">
11+
<button @click="newModel" class="btn btn-default new"> <i class="fa fa-plus"></i>New</button>
12+
<button @click="saveModel" class="btn btn-primary save"> <i class="fa fa-floppy-o"></i>Save<i v-if="showWarning()" class="fa fa-warning"></i></button>
13+
<button @click="deleteModel" class="btn btn-danger delete"> <i class="fa fa-trash"></i>Delete</button>
14+
</div>
15+
<div class="errors text-center">
16+
<div v-for="(item, index) in validationErrors" track-by="index" class="alert alert-danger">{{ item.field.label}}: <strong>{{ item.error }}</strong></div>
17+
</div>
18+
<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated"></vue-form-generator>
19+
</div>
20+
<div class="col-md-6">
21+
<pre v-if="model" v-html="prettyModel"></pre>
22+
</div>
23+
</div>
24+
</div>
2925

3026
</template>
3127

3228
<script>
3329
import Vue from "vue";
34-
import VueFormGenerator from "../src";
30+
import VueFormGenerator from "../../src";
3531
import DataTable from "./dataTable.vue";
3632
import Fakerator from "fakerator";
3733
@@ -82,6 +78,9 @@
8278
return this.$refs.form.errors;
8379
8480
return [];
81+
},
82+
prettyModel(){
83+
return filters.prettyJSON(this.model);
8584
}
8685
},
8786
@@ -95,10 +94,12 @@
9594
selectRow(event, row, add) {
9695
this.isNewModel = false;
9796
if ( (add || (event && event.ctrlKey))) {
98-
if (this.selected.indexOf(row) != -1)
99-
this.selected.$remove(row);
100-
else
97+
if (this.selected.indexOf(row) != -1){
98+
var index = this.selected.indexOf(row);
99+
this.selected.splice(index, 1);
100+
} else {
101101
this.selected.push(row);
102+
}
102103
} else {
103104
this.clearSelection();
104105
this.selected.push(row);
@@ -114,12 +115,11 @@
114115
generateModel() {
115116
if (this.selected.length == 1) {
116117
this.model = cloneDeep(this.selected[0]);
117-
}
118-
else if (this.selected.length > 1) {
118+
} else if (this.selected.length > 1) {
119119
this.model = VueFormGenerator.schema.mergeMultiObjectFields(Schema, this.selected);
120-
}
121-
else
120+
} else {
122121
this.model = null;
122+
}
123123
},
124124
125125
newModel() {
@@ -146,6 +146,7 @@
146146
}
147147
148148
} else {
149+
console.warn("Error saving model...");
149150
// Validation error
150151
}
151152
},
@@ -162,7 +163,8 @@
162163
deleteModel() {
163164
if (this.selected.length > 0) {
164165
each(this.selected, (row) => {
165-
this.rows.$remove(row);
166+
let index = this.rows.indexOf(row);
167+
this.rows.splice(index, 1)
166168
})
167169
this.clearSelection();
168170
}
@@ -180,22 +182,30 @@
180182
},
181183
182184
validate() {
185+
console.log("validate", this.$refs.form, this.$refs.form.validate());
183186
return this.$refs.form.validate();
187+
},
188+
189+
modelUpdated(newVal, schema) {
190+
console.log("main model has updated", newVal, schema);
191+
// this.model[schema] = newVal;
184192
}
185193
186194
187195
},
188196
189-
ready() {
190-
window.app = this;
197+
mounted() {
198+
this.$nextTick(function () {
199+
window.app = this;
191200
192-
if (users.length > 0) {
193-
this.selectRow(null, fakerator.random.arrayElement(users));
194-
}
201+
if (users.length > 0) {
202+
this.selectRow(null, fakerator.random.arrayElement(users));
203+
}
195204
196-
// Localize validate errors
197-
VueFormGenerator.validators.resources.fieldIsRequired = "Ezt a mezőt kötelező kitölteni!";
198-
VueFormGenerator.validators.resources.textTooSmall = "A szöveg túl rövid! Jelenleg: {0}, minimum: {1}";
205+
// Localize validate errors
206+
// VueFormGenerator.validators.resources.fieldIsRequired = "Ezt a mezőt kötelező kitölteni!";
207+
// VueFormGenerator.validators.resources.textTooSmall = "A szöveg túl rövid! Jelenleg: {0}, minimum: {1}";
208+
})
199209
}
200210
}
201211

‎dev/data.js renamed to ‎dev/full/data.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Fakerator from 'fakerator';
2-
import moment from 'moment';
1+
import Fakerator from "fakerator";
2+
import moment from "moment";
33

44
let fakerator = new Fakerator();
55

@@ -8,7 +8,7 @@ let roles = [
88
{ id: "moderator", name: "Moderator"},
99
{ id: "user", name: "Registered User"},
1010
{ id: "visitor", name: "Visitor"}
11-
]
11+
];
1212

1313
let skills = [ "HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS" ];
1414

@@ -19,7 +19,7 @@ module.exports = {
1919
users: (function() {
2020
let res = [];
2121
for (let i = 0; i < 5; i++) {
22-
let lang = fakerator.random.arrayElement(['en-US', 'en-GB', 'de', 'fr', 'it']);
22+
let lang = fakerator.random.arrayElement(["en-US", "en-GB", "de", "fr", "it"]);
2323
let user = fakerator.entity.user();
2424
user.id = i + 1;
2525
user.type = fakerator.random.arrayElement(["personal", "business"]);
@@ -41,16 +41,17 @@ module.exports = {
4141
user.created = fakerator.date.recent(30).valueOf();
4242
user.dt = fakerator.date.recent(30).valueOf();
4343
user.favoriteColor = "#" + fakerator.internet.color();
44+
user.color = "#" + fakerator.internet.color();
4445

4546
if (user.type == "business")
4647
user.company = fakerator.entity.company();
4748

4849
user.income = [ fakerator.random.number(50000), fakerator.random.number(50000, 100000)];
4950

5051
res.push(user);
51-
console.log(user);
52+
// console.log(user);
5253
}
53-
//console.log(res);
54+
// console.log(res);
5455
return res;
5556
})()
56-
}
57+
};

‎dev/dataTable.vue renamed to ‎dev/full/dataTable.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
<script>
2727
import Vue from "vue";
28-
import VueFormGenerator from "../src";
28+
import VueFormGenerator from "../../src";
2929
import Schema from "./schema";
3030
import { find } from "lodash";
3131
import { users, roles } from "./data";

‎dev/fieldAwesome.vue renamed to ‎dev/full/fieldAwesome.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</template>
44

55
<script>
6-
import VueFormGenerator from "../src";
6+
import VueFormGenerator from "../../src";
77
88
export default {
99
mixins: [ VueFormGenerator.abstractField ]

‎dev/index.html renamed to ‎dev/full/index.html

+15-15
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,39 @@
33
<head>
44
<meta charset="utf-8">
55
<title>vue-form-generator development</title>
6-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
7-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
8-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
9-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
6+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
7+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
8+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">
9+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.css">
1010
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
1111
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.css">
1212
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinHTML5.css">
13-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
13+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.min.css">
1414
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/css/pikaday.min.css">
1515

1616

17-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
18-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
19-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
17+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
18+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
19+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
2020
<!-- jQuery dependent -->
21-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
22-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
23-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
21+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
22+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>
23+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
2424
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
2525
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
2626
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
2727
<!-- Vanilla libs -->
28-
<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/v1.1.4/lib/vue-multiselect.min.js"></script>
28+
<script type="text/javascript" src="https://unpkg.com/vue-multiselect@2.0.0-beta.13"></script>
2929
<script type="text/javascript" src="https://rawgit.com/nosir/cleave.js/master/dist/cleave.min.js"></script>
3030
<script type="text/javascript" src="https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js"></script>
31-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js"></script>
31+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.js"></script>
3232
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js"></script>
3333
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCEz-sX9bRJorDS-D_JL0JkZVZe2gzoUMw&amp;libraries=places"></script>
3434

3535
</head>
3636
<body>
3737
<div class="container-fluid"></div>
38-
<app></app>
39-
<script src="/app.js"></script>
38+
<div id="app"></div>
39+
<script src="/full.js"></script>
4040
</body>
4141
</html>

‎dev/full/main.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* global Vue */
2+
3+
// var App = require('./app.vue');
4+
// $(function() {
5+
// App.$mount('#app');
6+
// });
7+
8+
import Vue from 'vue';
9+
import App from './app.vue';
10+
11+
new Vue({
12+
...App
13+
}).$mount('#app');

0 commit comments

Comments
 (0)