Skip to content

Commit fd09946

Browse files
matt-sandersmatt-sanders
committed
made sure that lists & selects can handle boolean values
1 parent 0f913f2 commit fd09946

File tree

4 files changed

+138
-36
lines changed

4 files changed

+138
-36
lines changed

‎src/fields/baseField.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ export default
1616
this.$set(this.form, this.field.key, state);
1717
},
1818
methods: {
19+
booleanValue(value){
20+
return ( value === 'true' || value === 'false' ) ? value === 'true' : value;
21+
},
1922
runFunction: function(action, e){
2023
if ( typeof this.to[action] == 'function' ) this.to[action].call(this, e);
2124
},

‎src/fields/fieldList.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,20 +53,21 @@ export default {
5353
keydown: this.onKeydown,
5454
change(event){
5555
const isChecked = event.target.checked;
56+
const val = self.booleanValue( event.target.value );
5657
// we need to add/remove differently depending on the type of input we're using
5758
if ( isArray ){
5859
if ( isChecked ){
5960
// if it's a checkbox, and hence an array, push it
60-
self.model[ self.field.key ].push( event.target.value );
61+
self.model[ self.field.key ].push( val );
6162
} else {
6263
// otherwise remove it
63-
const valueIdx = self.model[ self.field.key ].indexOf( event.target.value );
64+
const valueIdx = self.model[ self.field.key ].indexOf( val );
6465
if ( valueIdx > -1 ) self.model[ self.field.key ].splice( valueIdx, 1 );
6566
}
6667
} else {
67-
self.model[ self.field.key ] = isChecked ? event.target.value : null;
68+
self.model[ self.field.key ] = isChecked ? val : null;
6869
}
69-
self.$emit('change', event.target.value);
70+
self.$emit('change', val);
7071
if ( typeof self.onChange === 'function' ) self.onChange(event);
7172
}
7273
}

‎src/fields/fieldSelect.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,9 @@ export default {
5050
keyup: this.onKeyup,
5151
keydown: this.onKeydown,
5252
change(event){
53-
self.model[ self.field.key ] = event.target.value;
54-
self.$emit('change', event.target.value);
53+
const val = self.booleanValue( event.target.value );
54+
self.model[ self.field.key ] = val;
55+
self.$emit('change', val);
5556
if ( typeof self.onChange === 'function' ) self.onChange(event);
5657
}
5758
}

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

Lines changed: 127 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -347,20 +347,48 @@ describe('Bootstrap Field Inputs', () => {
347347
expect(option.innerHTML).to.equal('Foo');
348348
});
349349

350-
it('boolean options', done => {
351-
data.model.test = false;
352-
data.fields[0].type = 'select';
353-
data.fields[0].options = [
354-
{ label: 'Foo', value: true },
355-
{ label: 'Foo', value: false }
356-
];
357-
createForm();
358-
const select = vm.$el.querySelectorAll('select');
359-
expect(select[0].selectedIndex).to.equal(1);
360-
vm.model.test = true;
361-
setTimeout(() => {
362-
expect(select[0].selectedIndex).to.equal(0);
363-
done();
350+
describe('boolean options', () => {
351+
it('sets boolean values', done => {
352+
data.model.test = '';
353+
data.fields[0].type = 'select';
354+
data.fields[0].options = [
355+
{ label: 'Foo', value: true },
356+
{ label: 'Foo', value: false }
357+
];
358+
createForm();
359+
const select = vm.$el.querySelectorAll('select');
360+
select[0].value = 'false';
361+
trigger(select[0], 'change');
362+
setTimeout(() => {
363+
expect(vm.model.test).to.be.false;
364+
select[0].value = 'true';
365+
trigger(select[0], 'change');
366+
setTimeout(() => {
367+
expect(vm.model.test).to.be.true;
368+
done();
369+
});
370+
});
371+
});
372+
373+
it('takes boolean values', done => {
374+
data.model.test = false;
375+
data.fields[0].type = 'select';
376+
data.fields[0].options = [
377+
{ label: 'Foo', value: true },
378+
{ label: 'Foo', value: false }
379+
];
380+
createForm();
381+
const select = vm.$el.querySelectorAll('select');
382+
expect(select[0].selectedIndex).to.equal(1);
383+
vm.model.test = true;
384+
setTimeout(() => {
385+
expect(select[0].selectedIndex).to.equal(0);
386+
vm.model.test = false;
387+
setTimeout(() => {
388+
expect(select[0].selectedIndex).to.equal(1);
389+
done();
390+
});
391+
});
364392
});
365393
});
366394

@@ -451,22 +479,91 @@ describe('Bootstrap Field Inputs', () => {
451479
expect(labels[2].textContent).to.contain('Bar');
452480
});
453481

454-
it('boolean options', done => {
455-
data.fields[0].type = 'list';
456-
data.fields[0].options = [
457-
{ label: 'Foo', value: true },
458-
{ label: 'Bar', value: false }
459-
];
460-
data.model.test = [false];
461-
createForm();
462-
expect(vm.$el.querySelectorAll('input')[1].checked).to.be.true;
463-
data.model.test.push(true);
464-
setTimeout(()=>{
465-
expect(vm.$el.querySelectorAll('input')[0].checked).to.be.true;
466-
expect(vm.$el.querySelectorAll('input')[1].checked).to.be.true;
467-
done();
468-
});
469-
});
482+
describe('boolean options', () => {
483+
describe('checkbox', () => {
484+
it('sets boolean values', done => {
485+
data.fields[0].type = 'list';
486+
data.fields[0].options = [
487+
{ label: 'Foo', value: true },
488+
{ label: 'Bar', value: false }
489+
];
490+
createForm();
491+
492+
const inputs = vm.$el.querySelectorAll('input');
493+
inputs[0].checked = true;
494+
trigger(inputs[0], 'change');
495+
setTimeout(() => {
496+
expect(vm.model.test.indexOf(true)).to.equal(0);
497+
inputs[1].checked = true;
498+
trigger(inputs[1], 'change');
499+
setTimeout(() => {
500+
expect(vm.model.test.indexOf(false)).to.equal(1);
501+
done();
502+
});
503+
});
504+
});
505+
506+
it('takes boolean values', done => {
507+
data.fields[0].type = 'list';
508+
data.fields[0].options = [
509+
{ label: 'Foo', value: true },
510+
{ label: 'Bar', value: false }
511+
];
512+
data.model.test = [false];
513+
createForm();
514+
expect(vm.$el.querySelectorAll('input')[1].checked).to.be.true;
515+
data.model.test.push(true);
516+
setTimeout(()=>{
517+
expect(vm.$el.querySelectorAll('input')[0].checked).to.be.true;
518+
expect(vm.$el.querySelectorAll('input')[1].checked).to.be.true;
519+
done();
520+
});
521+
});
522+
});// checkbox
523+
524+
describe('radio', () => {
525+
it('sets boolean values', done => {
526+
data.fields[0].type = 'list';
527+
data.fields[0].templateOptions.inputType = 'radio';
528+
data.fields[0].options = [
529+
{ label: 'Foo', value: true },
530+
{ label: 'Bar', value: false }
531+
];
532+
createForm();
533+
534+
const inputs = vm.$el.querySelectorAll('input');
535+
inputs[0].checked = true;
536+
trigger(inputs[0], 'change');
537+
setTimeout(() => {
538+
expect(vm.model.test).to.be.true;
539+
inputs[1].checked = true;
540+
trigger(inputs[1], 'change');
541+
setTimeout(() => {
542+
expect(vm.model.test).to.be.false;
543+
done();
544+
});
545+
});
546+
});
547+
548+
it('takes boolean values', done => {
549+
data.fields[0].type = 'list';
550+
data.fields[0].templateOptions.inputType = 'radio';
551+
data.fields[0].options = [
552+
{ label: 'Foo', value: true },
553+
{ label: 'Bar', value: false }
554+
];
555+
data.model.test = false;
556+
createForm();
557+
expect(vm.$el.querySelectorAll('input')[1].checked).to.be.true;
558+
data.model.test = true;
559+
setTimeout(()=>{
560+
expect(vm.$el.querySelectorAll('input')[0].checked).to.be.true;
561+
expect(vm.$el.querySelectorAll('input')[1].checked).to.be.false;
562+
done();
563+
});
564+
});
565+
});// radio
566+
});// boolean values
470567

471568
it('sets defaults', () => {
472569
data.fields[0].type = 'list';

0 commit comments

Comments
 (0)