Skip to content

Commit 0b1df2c

Browse files
author
Lionel Bijaoui
committed
[wip] modification to work with vuejs 2.0.
1 parent d90d343 commit 0b1df2c

25 files changed

+411
-369
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
}

‎dev/app.vue

+54-44
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,27 @@
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 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

@@ -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/index.html

+14-14
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/master/lib/vue-multiselect.min.js"></script>
28+
<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/2.0/lib/vue-multiselect.min.js"></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>
38+
<div id="app"></div>
3939
<script src="/app.js"></script>
4040
</body>
4141
</html>

‎dev/main.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
/* global Vue */
2-
$(function() {
3-
let App = require("./App.vue");
42

5-
let app = new Vue({
6-
el: "body",
7-
components: {
8-
App
9-
}
10-
});
11-
});
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');

‎dev/schema.js

+19-26
Original file line numberDiff line numberDiff line change
@@ -158,55 +158,48 @@ module.exports = {
158158
label: "Search USELESS",
159159
model: "search",
160160
placeholder: "Entrez un mot-clef",
161-
styleClasses: "half-width",
162-
visible(model){return model.checkbox}
161+
styleClasses: "half-width"
163162
},
164163
{
165164
type: "input",
166165
inputType: "radio",
167166
label: "radio USELESS",
168167
model: "radio",
169-
styleClasses: "half-width",
170-
visible(model){return model.checkbox}
168+
styleClasses: "half-width"
171169
},
172170
{
173171
type: "input",
174172
inputType: "file",
175173
label: "File USELESS",
176-
model: "file",
177-
visible(model){return model.checkbox}
174+
model: "file"
178175
},
179176
{
180177
type: "input",
181178
inputType: "image",
182179
label: "Image USELESS",
183180
model: "image",
184-
styleClasses: "half-width",
185-
visible(model){return model.checkbox}
181+
styleClasses: "half-width"
186182
},
187183
{
188184
type: "input",
189185
inputType: "button",
190186
label: "Button USELESS",
191187
model: "button",
192-
styleClasses: "half-width",
193-
visible(model){return model.checkbox}
188+
styleClasses: "half-width"
194189
},
195190
{
196191
type: "input",
197192
inputType: "reset",
198193
label: "Reset USELESS",
199194
model: "reset",
200-
styleClasses: "half-width",
201-
visible(model){return model.checkbox}
195+
styleClasses: "half-width"
202196
},
203197
{
204198
type: "input",
205199
inputType: "submit",
206200
label: "Submit USELESS",
207201
model: "submit",
208-
styleClasses: "half-width",
209-
visible(model){return model.checkbox}
202+
styleClasses: "half-width"
210203
},
211204

212205
/**************/
@@ -415,18 +408,18 @@ module.exports = {
415408
styleClasses: ["half-width", "first"],
416409
validator: validators.required
417410
},
418-
{
419-
type: "selectEx",
420-
label: "Country (selectEx field)",
421-
model: "address.country",
422-
multi: true,
423-
required: true,
424-
values: ["United Kingdom", "France", "Germany"],
425-
//default: "United Kingdom",
426-
multiSelect: false,
427-
selectOptions: {
428-
// https://silviomoreto.github.io/bootstrap-select/options/
429-
liveSearch: true,
411+
// {
412+
// type: "selectEx",
413+
// label: "Country (selectEx field)",
414+
// model: "address.country",
415+
// multi: true,
416+
// required: true,
417+
// values: ["United Kingdom", "France", "Germany"],
418+
// //default: "United Kingdom",
419+
// multiSelect: false,
420+
// selectOptions: {
421+
// // https://silviomoreto.github.io/bootstrap-select/options/
422+
// liveSearch: true,
430423
size: 10,
431424
noneSelectedText: "Nincs kijelölve"
432425
},

‎package.json

+10-10
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,17 @@
3939
"author": "Icebob",
4040
"license": "MIT",
4141
"devDependencies": {
42-
"babel-core": "6.14.0",
42+
"babel-core": "6.17.0",
4343
"babel-loader": "6.2.5",
4444
"babel-plugin-transform-runtime": "6.15.0",
45-
"babel-preset-es2015": "6.14.0",
46-
"babel-preset-stage-0": "6.5.0",
45+
"babel-preset-es2015": "6.16.0",
46+
"babel-preset-stage-2": "6.17.0",
4747
"chai": "3.5.0",
4848
"conventional-changelog-cli": "1.2.0",
4949
"conventional-github-releaser": "1.1.3",
5050
"coveralls": "2.11.14",
5151
"css-loader": "0.25.0",
52-
"eslint": "3.6.1",
52+
"eslint": "3.7.1",
5353
"eslint-friendly-formatter": "2.0.6",
5454
"eslint-loader": "1.5.0",
5555
"eslint-plugin-html": "1.5.3",
@@ -73,22 +73,22 @@
7373
"karma-sourcemap-loader": "0.3.7",
7474
"karma-spec-reporter": "0.0.26",
7575
"karma-webpack": "1.8.0",
76-
"lodash": "4.16.2",
76+
"lodash": "4.16.3",
7777
"lolex": "1.5.1",
7878
"mocha": "2.5.3",
7979
"mocha-generators": "1.2.0",
8080
"mocha-loader": "0.7.1",
8181
"moment": "2.15.1",
82-
"node-sass": "3.10.0",
83-
"phantomjs-prebuilt": "2.1.12",
82+
"node-sass": "3.10.1",
83+
"phantomjs-prebuilt": "2.1.13",
8484
"sass-loader": "3.2.0",
8585
"sinon": "1.17.6",
8686
"sinon-chai": "2.8.0",
8787
"stats-webpack-plugin": "0.4.2",
8888
"style-loader": "0.13.1",
89-
"vue-hot-reload-api": "1.3.2",
89+
"vue-hot-reload-api": "2.0.6",
9090
"vue-html-loader": "1.2.3",
91-
"vue-loader": "8.5.4",
91+
"vue-loader": "9.5.1",
9292
"vue-style-loader": "1.0.0",
9393
"webpack": "1.13.2",
9494
"webpack-dev-middleware": "1.8.3",
@@ -97,6 +97,6 @@
9797
},
9898
"dependencies": {
9999
"babel-runtime": "6.11.6",
100-
"vue": "1.0.27"
100+
"vue": "2.0.1"
101101
}
102102
}

0 commit comments

Comments
 (0)