Skip to content

Commit ba0a07e

Browse files
matt-sandersmatt-sanders
committed
beginning port to 2.0
1 parent 923bc3c commit ba0a07e

File tree

6 files changed

+103
-76
lines changed

6 files changed

+103
-76
lines changed

‎package.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
},
1010
"repository": {
1111
"type": "git",
12-
"url": "git+https://github.com/matt-sanders/vue-formly-bootstrap.git"
12+
"url": "git+https://github.com/formly-js/vue-formly-bootstrap.git"
1313
},
1414
"keywords": [
1515
"vue",
@@ -18,9 +18,12 @@
1818
],
1919
"license": "MIT",
2020
"bugs": {
21-
"url": "https://github.com/matt-sanders/vue-formly-bootstrap/issues"
21+
"url": "https://github.com/formly-js/vue-formly-bootstrap/issues"
22+
},
23+
"homepage": "https://github.com/formly-js/vue-formly-bootstrap#readme",
24+
"peerDependencies": {
25+
"vue-formly": "2.x"
2226
},
23-
"homepage": "https://github.com/matt-sanders/vue-formly-bootstrap#readme",
2427
"devDependencies": {
2528
"babel-core": "6.11.4",
2629
"babel-loader": "6.2.4",
@@ -71,7 +74,8 @@
7174
"sinon-chai": "2.8.0",
7275
"style-loader": "0.13.1",
7376
"uglify-js": "^2.6.4",
74-
"vue": "1.0.26",
77+
"vue" : "~2.0.0",
78+
"vue-formly": "~2.0.0",
7579
"vue-hot-reload-api": "1.3.2",
7680
"vue-html-loader": "1.2.3",
7781
"vue-loader": "8.5.3",

‎src/directives/index.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
export default function(Vue){
2-
/**
3-
* Allows the user to pass extra attributes that should be added to the element. Such as placeholder etc etc
4-
* @param {Object} value
5-
*/
6-
Vue.directive('formly-atts', function(value){
7-
if ( typeof value == 'undefined' ) return;
8-
Object.keys(value).forEach((key) => {
9-
this.el.setAttribute(key, value[key]);
10-
});
2+
/**
3+
* Allows the user to pass extra attributes that should be added to the element. Such as placeholder etc etc
4+
* @param {Object} value
5+
*/
6+
Vue.directive('formly-atts', function(value){
7+
if ( typeof value == 'undefined' ) return;
8+
/*
9+
Object.keys(value).forEach((key) => {
10+
this.el.setAttribute(key, value[key]);
1111
});
12+
*/
13+
});
1214
}

‎src/fields/baseField.js

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,43 @@
11
export default
22
{
3-
props: [
4-
'form',
5-
'key'
6-
],
7-
created: function(){
8-
this.$set('form.'+this.key+'.$dirty', false);
9-
this.$set('form.'+this.key+'.$active', false);
3+
props: [
4+
'form',
5+
'field',
6+
'model',
7+
'to'
8+
],
9+
created: function(){
10+
let state = {
11+
'$dirty': false,
12+
'$active': false
13+
};
14+
this.$set(this.form, this.field.key, state);
15+
},
16+
methods: {
17+
runFunction: function(action, e){
18+
if ( typeof this.to[action] == 'function' ) this.to[action].call(this, e);
1019
},
11-
methods: {
12-
runFunction: function(action, e){
13-
if ( typeof this.form[this.key][action] == 'function' ) this.form[this.key][action].call(this, e);
14-
},
15-
onFocus: function(e){
16-
this.$set('form.'+this.key+'.$active', true);
17-
this.runFunction('onFocus', e);
18-
},
19-
onBlur: function(e){
20-
this.$set('form.'+this.key+'.$dirty', true);
21-
this.$set('form.'+this.key+'.$active', false);
22-
this.runFunction('onBlur', e);
23-
},
24-
onClick: function(e){
25-
this.runFunction('onClick', e);
26-
},
27-
onChange: function(e){
28-
this.$set('form.'+this.key+'.$dirty', true);
29-
this.runFunction('onChange', e);
30-
},
31-
onKeyup: function(e){
32-
this.runFunction('onKeyup', e);
33-
},
34-
onKeydown: function(e){
35-
this.runFunction('onKeydown', e);
36-
}
37-
}
20+
onFocus: function(e){
21+
this.$set('form.'+this.field.key+'.$active', true);
22+
this.runFunction('onFocus', e);
23+
},
24+
onBlur: function(e){
25+
this.$set('form.'+this.field.key+'.$dirty', true);
26+
this.$set('form.'+this.field.key+'.$active', false);
27+
this.runFunction('onBlur', e);
28+
},
29+
onClick: function(e){
30+
this.runFunction('onClick', e);
31+
},
32+
onChange: function(e){
33+
this.$set('form.'+this.field.key+'.$dirty', true);
34+
this.runFunction('onChange', e);
35+
},
36+
onKeyup: function(e){
37+
this.runFunction('onKeyup', e);
38+
},
39+
onKeydown: function(e){
40+
this.runFunction('onKeydown', e);
41+
}
42+
}
3843
};

‎src/fields/fieldInput.vue

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
<template>
2-
<div class="form-group formly-input" :class="[ form[key].inputType, {'formly-has-value': form[key].value, 'formly-has-focus': form[key].$active}]">
3-
<label v-if="form[key].label" :for="form[key].id ? form[key].id : null">{{form[key].label}}</label>
4-
<input class="form-control" :class="form[key].classes" :id="form[key].id ? form[key].id : null" :type="form[key].inputType || text" v-model="form[key].value" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="form[key].atts">
2+
<div class="form-group formly-input" :class="[ to.type, {'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active}]">
3+
<label v-if="to.label" :for="to.id ? to.id : null">{{to.label}}</label>
4+
<input class="form-control" :class="to.classes" :id="to.id ? to.id : null" :type="to.type || text" v-model="model[field.key]" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts">
55
</div>
66
</template>
77

88
<script>
99
import baseField from './baseField';
1010
export default {
11-
mixins: [baseField],
12-
methods: {
13-
onChange: function(e){
14-
this.$set('form.'+this.key+'.$dirty', true);
15-
this.runFunction('onChange', e);
16-
if ( this.form[this.key].inputType == 'file' ){
17-
this.$set('form.'+this.key+'.files', this.$el.querySelector('input').files);
18-
}
19-
}
11+
mixins: [baseField],
12+
methods: {
13+
onChange: function(e){
14+
/*
15+
this.$set('form.'+this.key+'.$dirty', true);
16+
this.runFunction('onChange', e);
17+
if ( this.form[this.key].inputType == 'file' ){
18+
this.$set('form.'+this.key+'.files', this.$el.querySelector('input').files);
19+
}
20+
*/
2021
}
22+
}
2123
}
2224
</script>

‎test/unit/specs/index.spec.js

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ let el, vm, data, spy;
1414

1515
function createForm(){
1616
el = document.createElement('div');
17-
el.innerHTML = '<formly-form :form="form"></formly-form>';
17+
//el.innerHTML = '<formly-form :form="form" :model="model" :fields="fields"></formly-form>';
1818
vm = new Vue({
19-
el: el,
20-
data: data
21-
});
19+
data: data,
20+
template: '<formly-form :form="form" :model="model" :fields="fields"></formly-form>'
21+
}).$mount(el);
2222

2323
return [el, vm];
2424
}
@@ -32,18 +32,19 @@ function trigger (target, event, process) {
3232

3333
function describeFunctions(formlyElement, inputElement, inputType = 'text', options){
3434
beforeEach(() => {
35-
data.form.test.type = formlyElement;
36-
data.form.test.inputType = inputType;
37-
if ( typeof options != 'undefined' ) data.form.test.options = options;
35+
data.fields[0].type = formlyElement;
36+
data.fields[0].templateOptions.type = inputType;
37+
if ( typeof options != 'undefined' ) data.fields[0].options = options;
3838
spy = sinon.spy();
3939
});
4040

4141
it('dirty/active', () => {
4242
createForm();
43-
expect(vm.form.test.$dirty).to.be.false;
44-
expect(vm.form.test.$active).to.be.false;
43+
//expect(vm.form.test.$dirty).to.be.false;
44+
//expect(vm.form.test.$active).to.be.false;
4545
});
46-
46+
47+
/*
4748
it('blur', ()=>{
4849
let copy = {};
4950
data.form.test.onBlur = function(e){
@@ -94,6 +95,7 @@ function describeFunctions(formlyElement, inputElement, inputType = 'text', opti
9495
trigger(vm.$el.querySelectorAll(inputElement)[0], 'keydown');
9596
expect(spy.called).to.be.true;
9697
});
98+
*/
9799
};
98100

99101
function describeAttributes(inputElement, testPlaceholder = true){
@@ -158,11 +160,18 @@ describe('Bootstrap Field Inputs', () => {
158160

159161
beforeEach(() => {
160162
data = {
161-
form: {
162-
test: {
163-
label: 'Test'
164-
}
163+
form: {},
164+
model: {
165+
test: ''
166+
},
167+
fields: [
168+
{
169+
key: 'test',
170+
templateOptions: {
171+
label: 'test'
172+
}
165173
}
174+
]
166175
};
167176
});
168177

@@ -171,6 +180,7 @@ describe('Bootstrap Field Inputs', () => {
171180
describe('functions',() =>{
172181
describeFunctions('input', 'input');
173182
});
183+
/*
174184
describe('classes & attributes', () => {
175185
describeAttributes('input');
176186
it('should have input type as a class', () => {
@@ -235,10 +245,12 @@ describe('Bootstrap Field Inputs', () => {
235245
let input = inputs[0];
236246
expect(input.type).to.equal('text');
237247
});
248+
*/
238249
});
239250

240251

241252

253+
/*
242254
describe('Select', () => {
243255
describe('functions', ()=>{
244256
describeFunctions('select', 'select');
@@ -333,7 +345,8 @@ describe('Bootstrap Field Inputs', () => {
333345
expect(input.id).to.equal(data.form.test.id);
334346
expect(label.htmlFor).to.equal(data.form.test.id);
335347
});
336-
*/
348+
*/
349+
/*
337350
});
338351
339352
it('array options', () => {
@@ -419,5 +432,5 @@ describe('Bootstrap Field Inputs', () => {
419432
}, 0);
420433
});
421434
});
422-
435+
*/
423436
});

‎test/unit/webpack.test.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@ module.exports = {
5656
packageAlias: 'browser',
5757
alias: {
5858
'src': sourceDir,
59-
'sinon': 'sinon/pkg/sinon'
59+
'sinon': 'sinon/pkg/sinon',
60+
'vue': 'vue/dist/vue.js'
6061
}
6162
},
6263
plugins: [

0 commit comments

Comments
 (0)