Skip to content

Commit

Permalink
[wip] modification to work with vuejs 2.0.
Browse files Browse the repository at this point in the history
  • Loading branch information
Lionel Bijaoui committed Oct 7, 2016
1 parent d90d343 commit 0b1df2c
Show file tree
Hide file tree
Showing 25 changed files with 411 additions and 369 deletions.
2 changes: 1 addition & 1 deletion .babelrc
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"presets": ["es2015", "stage-0"],
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}
98 changes: 54 additions & 44 deletions dev/app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,27 @@
<template lang="jade">
.row
.col-md-10.col-md-offset-1
data-table(:rows="rows", :selected="selected", :select="selectRow")

.row(v-show="model")
.col-md-5.col-md-offset-1
.control-buttons.text-center
button.btn.btn-default.new(@click="newModel")
i.fa.fa-plus
| New
button.btn.btn-primary.save(@click="saveModel")
i.fa.fa-floppy-o
| Save
i.fa.fa-warning(v-if="showWarning()")
button.btn.btn-danger.delete(@click="deleteModel")
i.fa.fa-trash
| Delete

.errors.text-center
div.alert.alert-danger(v-for="item in validationErrors", track-by="$index") {{ item.field.label}}:
strong {{ item.error }}

vue-form-generator(:schema='schema', :model='model', :options='formOptions', :multiple="selected.length > 1", v-ref:form, :is-new-model="isNewModel")


.col-md-6
pre(v-if='model') {{{ model | prettyJSON }}}
<template>
<div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<data-table :rows="rows" :selected="selected" :select="selectRow"></data-table>
</div>
</div>
<div v-show="model" class="row">
<div class="col-md-5 col-md-offset-1">
<div class="control-buttons text-center">
<button @click="newModel" class="btn btn-default new"> <i class="fa fa-plus"></i>New</button>
<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>
<button @click="deleteModel" class="btn btn-danger delete"> <i class="fa fa-trash"></i>Delete</button>
</div>
<div class="errors text-center">
<div v-for="item in validationErrors" track-by="$index" class="alert alert-danger">{{ item.field.label}}: <strong>{{ item.error }}</strong></div>
</div>
<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>
</div>
<div class="col-md-6">
<pre v-if="model" v-html="prettyModel"></pre>
</div>
</div>
</div>

</template>

Expand Down Expand Up @@ -82,6 +78,9 @@
return this.$refs.form.errors;
return [];
},
prettyModel(){
return filters.prettyJSON(this.model);
}
},
Expand All @@ -95,10 +94,12 @@
selectRow(event, row, add) {
this.isNewModel = false;
if ( (add || (event && event.ctrlKey))) {
if (this.selected.indexOf(row) != -1)
this.selected.$remove(row);
else
if (this.selected.indexOf(row) != -1){
var index = this.selected.indexOf(row);
this.selected.splice(index, 1);
} else {
this.selected.push(row);
}
} else {
this.clearSelection();
this.selected.push(row);
Expand All @@ -114,12 +115,11 @@
generateModel() {
if (this.selected.length == 1) {
this.model = cloneDeep(this.selected[0]);
}
else if (this.selected.length > 1) {
} else if (this.selected.length > 1) {
this.model = VueFormGenerator.schema.mergeMultiObjectFields(Schema, this.selected);
}
else
} else {
this.model = null;
}
},
newModel() {
Expand All @@ -146,6 +146,7 @@
}
} else {
console.warn("Error saving model...");
// Validation error
}
},
Expand All @@ -162,7 +163,8 @@
deleteModel() {
if (this.selected.length > 0) {
each(this.selected, (row) => {
this.rows.$remove(row);
let index = this.rows.indexOf(row);
this.rows.splice(index, 1)
})
this.clearSelection();
}
Expand All @@ -180,22 +182,30 @@
},
validate() {
console.log("validate", this.$refs.form, this.$refs.form.validate());
return this.$refs.form.validate();
},
modelUpdated(newVal, schema) {
console.log("main model has updated", newVal, schema);
// this.model[schema] = newVal;
}
},
ready() {
window.app = this;
mounted() {
this.$nextTick(function () {
window.app = this;
if (users.length > 0) {
this.selectRow(null, fakerator.random.arrayElement(users));
}
if (users.length > 0) {
this.selectRow(null, fakerator.random.arrayElement(users));
}
// Localize validate errors
VueFormGenerator.validators.resources.fieldIsRequired = "Ezt a mezőt kötelező kitölteni!";
VueFormGenerator.validators.resources.textTooSmall = "A szöveg túl rövid! Jelenleg: {0}, minimum: {1}";
// Localize validate errors
// VueFormGenerator.validators.resources.fieldIsRequired = "Ezt a mezőt kötelező kitölteni!";
// VueFormGenerator.validators.resources.textTooSmall = "A szöveg túl rövid! Jelenleg: {0}, minimum: {1}";
})
}
}
Expand Down
28 changes: 14 additions & 14 deletions dev/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,39 @@
<head>
<meta charset="utf-8">
<title>vue-form-generator development</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinHTML5.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/css/pikaday.min.css">


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
<!-- jQuery dependent -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
<!-- Vanilla libs -->
<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/2.0/lib/vue-multiselect.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/nosir/cleave.js/master/dist/cleave.min.js"></script>
<script type="text/javascript" src="https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCEz-sX9bRJorDS-D_JL0JkZVZe2gzoUMw&amp;libraries=places"></script>

</head>
<body>
<div class="container-fluid"></div>
<app></app>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>
20 changes: 11 additions & 9 deletions dev/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
/* global Vue */
$(function() {
let App = require("./App.vue");

let app = new Vue({
el: "body",
components: {
App
}
});
});
// var App = require('./app.vue');
// $(function() {
// App.$mount('#app');
// });

import Vue from 'vue';
import App from './app.vue';

new Vue({
...App
}).$mount('#app');
45 changes: 19 additions & 26 deletions dev/schema.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,55 +158,48 @@ module.exports = {
label: "Search USELESS",
model: "search",
placeholder: "Entrez un mot-clef",
styleClasses: "half-width",
visible(model){return model.checkbox}
styleClasses: "half-width"
},
{
type: "input",
inputType: "radio",
label: "radio USELESS",
model: "radio",
styleClasses: "half-width",
visible(model){return model.checkbox}
styleClasses: "half-width"
},
{
type: "input",
inputType: "file",
label: "File USELESS",
model: "file",
visible(model){return model.checkbox}
model: "file"
},
{
type: "input",
inputType: "image",
label: "Image USELESS",
model: "image",
styleClasses: "half-width",
visible(model){return model.checkbox}
styleClasses: "half-width"
},
{
type: "input",
inputType: "button",
label: "Button USELESS",
model: "button",
styleClasses: "half-width",
visible(model){return model.checkbox}
styleClasses: "half-width"
},
{
type: "input",
inputType: "reset",
label: "Reset USELESS",
model: "reset",
styleClasses: "half-width",
visible(model){return model.checkbox}
styleClasses: "half-width"
},
{
type: "input",
inputType: "submit",
label: "Submit USELESS",
model: "submit",
styleClasses: "half-width",
visible(model){return model.checkbox}
styleClasses: "half-width"
},

/**************/
Expand Down Expand Up @@ -415,18 +408,18 @@ module.exports = {
styleClasses: ["half-width", "first"],
validator: validators.required
},
{
type: "selectEx",
label: "Country (selectEx field)",
model: "address.country",
multi: true,
required: true,
values: ["United Kingdom", "France", "Germany"],
//default: "United Kingdom",
multiSelect: false,
selectOptions: {
// https://silviomoreto.github.io/bootstrap-select/options/
liveSearch: true,
// {
// type: "selectEx",
// label: "Country (selectEx field)",
// model: "address.country",
// multi: true,
// required: true,
// values: ["United Kingdom", "France", "Germany"],
// //default: "United Kingdom",
// multiSelect: false,
// selectOptions: {
// // https://silviomoreto.github.io/bootstrap-select/options/
// liveSearch: true,
size: 10,
noneSelectedText: "Nincs kijelölve"
},
Expand Down
20 changes: 10 additions & 10 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,17 +39,17 @@
"author": "Icebob",
"license": "MIT",
"devDependencies": {
"babel-core": "6.14.0",
"babel-core": "6.17.0",
"babel-loader": "6.2.5",
"babel-plugin-transform-runtime": "6.15.0",
"babel-preset-es2015": "6.14.0",
"babel-preset-stage-0": "6.5.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-stage-2": "6.17.0",
"chai": "3.5.0",
"conventional-changelog-cli": "1.2.0",
"conventional-github-releaser": "1.1.3",
"coveralls": "2.11.14",
"css-loader": "0.25.0",
"eslint": "3.6.1",
"eslint": "3.7.1",
"eslint-friendly-formatter": "2.0.6",
"eslint-loader": "1.5.0",
"eslint-plugin-html": "1.5.3",
Expand All @@ -73,22 +73,22 @@
"karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "1.8.0",
"lodash": "4.16.2",
"lodash": "4.16.3",
"lolex": "1.5.1",
"mocha": "2.5.3",
"mocha-generators": "1.2.0",
"mocha-loader": "0.7.1",
"moment": "2.15.1",
"node-sass": "3.10.0",
"phantomjs-prebuilt": "2.1.12",
"node-sass": "3.10.1",
"phantomjs-prebuilt": "2.1.13",
"sass-loader": "3.2.0",
"sinon": "1.17.6",
"sinon-chai": "2.8.0",
"stats-webpack-plugin": "0.4.2",
"style-loader": "0.13.1",
"vue-hot-reload-api": "1.3.2",
"vue-hot-reload-api": "2.0.6",
"vue-html-loader": "1.2.3",
"vue-loader": "8.5.4",
"vue-loader": "9.5.1",
"vue-style-loader": "1.0.0",
"webpack": "1.13.2",
"webpack-dev-middleware": "1.8.3",
Expand All @@ -97,6 +97,6 @@
},
"dependencies": {
"babel-runtime": "6.11.6",
"vue": "1.0.27"
"vue": "2.0.1"
}
}
Loading

0 comments on commit 0b1df2c

Please sign in to comment.