Skip to content

Commit cfd30ee

Browse files
matt-sandersmatt-sanders
committed
list items almost upgraded to v2.0
1 parent 80c9f9e commit cfd30ee

File tree

2 files changed

+130
-118
lines changed

2 files changed

+130
-118
lines changed

‎src/fields/fieldList.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<div class="checkbox" :id="form[key].id" :class="form[key].classes">
2+
<div class="checkbox formly-list" :id="to.id" :class="to.classes">
33

4-
<label v-for="option in form[key].options">
5-
<input :type="form[key].inputType || 'checkbox'" v-model="form[key].value" :value="option.value || option" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="form[key].atts"> {{option.label || option}}
4+
<label v-for="option in field.options">
5+
<input type="checkbox" v-model="model[field.key]" :value="option.value || option" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts" v-formly-input-type="to.type"> {{option.label || option}}
66
</label>
77

88
</div>
@@ -14,8 +14,8 @@
1414
mixins: [baseField],
1515
created: function(){
1616
//set the default value to be an array if it's a checkbox
17-
let type = this.form[this.key].inputType;
18-
if ( (!type || type == 'checkbox') && this.form[this.key].value == '') this.$set('form.'+this.key+'.value', []);
17+
let type = this.to.type;
18+
if ( (!type || type == 'checkbox') && this.model[ this.field.key ] == '') this.$set(this.model, this.field.key, []);
1919
}
2020
}
2121
</script>

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

Lines changed: 125 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,16 @@ describe('Bootstrap Field Inputs', () => {
250250
let input = inputs[0];
251251
expect(input.type).to.equal('text');
252252
});
253+
254+
it('supports other input types', () => {
255+
data.fields[0].type = 'input';
256+
data.fields[0].templateOptions.type = 'password';
257+
createForm(data);
258+
259+
let inputs = vm.$el.querySelectorAll('input');
260+
let input = inputs[0];
261+
expect(input.type).to.equal('password');
262+
});
253263

254264
});
255265

@@ -322,117 +332,119 @@ describe('Bootstrap Field Inputs', () => {
322332
expect(inputs).to.be.length(1);
323333
});
324334
});
325-
/*
326-
describe("List", () => {
327-
describe('checkbox functions', ()=>{
328-
describeFunctions('list', 'input', 'checkbox', ['one']);
329-
});
330-
describe('classes & attributes', () => {
331-
/*
332-
it('classes', () => {
333-
data.form.test.classes = {
334-
'class-a': true,
335-
'class-b': false
336-
};
337-
createForm();
338-
let input = vm.$el.querySelectorAll(inputElement)[0];
339-
expect(input.className).to.equal('form-control class-a');
340-
});
341-
342-
it('id', () => {
343-
data.form.test.id = 'someId';
344-
createForm();
345-
let input = vm.$el.querySelectorAll(inputElement)[0];
346-
let label = vm.$el.querySelectorAll('label')[0];
347-
expect(input.id).to.equal(data.form.test.id);
348-
expect(label.htmlFor).to.equal(data.form.test.id);
349-
});
350-
*/
351-
/*
352-
});
353-
354-
it('array options', () => {
355-
data.form.test.type = 'list';
356-
data.form.test.inputType = 'checkbox';
357-
data.form.test.options = ['one', 'two', 'three'];
358-
createForm();
359-
360-
let inputs = vm.$el.querySelectorAll('input');
361-
let labels = vm.$el.querySelectorAll('label');
362-
expect(inputs).to.be.length(3);
363-
expect(inputs[0].value).to.equal('one');
364-
expect(labels[0].textContent).to.contain('one');
365-
expect(inputs[1].value).to.equal('two');
366-
expect(labels[1].textContent).to.contain('two');
367-
});
368-
369-
it('object options', () => {
370-
data.form.test.type = 'list';
371-
data.form.test.inputType = 'checkbox'
372-
data.form.test.options = [
373-
{ label: 'Foo', value: 'bar' },
374-
{ label: 'Bar', value: 'foo' }
375-
];
376-
createForm();
377-
378-
let inputs = vm.$el.querySelectorAll('input');
379-
let labels = vm.$el.querySelectorAll('label');
380-
expect(inputs).to.be.length(2);
381-
expect(inputs[0].value).to.equal('bar');
382-
expect(labels[0].textContent).to.contain('Foo');
383-
expect(inputs[1].value).to.equal('foo');
384-
expect(labels[1].textContent).to.contain('Bar');
385-
});
386-
387-
it('sets defaults', () => {
388-
data.form.test.type = 'list';
389-
data.form.test.options = ['one', 'two'];
390-
createForm();
391-
392-
expect(vm.$el.querySelectorAll('input')[0].type).to.equal('checkbox');
393-
expect(vm.form.test.value).to.be.length(0);
394-
expect(vm.form.test.value).to.deep.equal([]);
395-
});
396-
397-
it("shouldn't overwrite defaults", () => {
398-
data.form.test.type = 'list';
399-
data.form.test.options = ['one', 'two'];
400-
data.form.test.value = ['one'];
401-
createForm();
402-
403-
expect(vm.form.test.value).to.be.length(1);
404-
expect(vm.form.test.value[0]).to.equal('one');
405-
});
406-
407-
it('multiple values', (done) => {
408-
data.form.test.type = 'list';
409-
data.form.test.inputType = 'checkbox';
410-
data.form.test.options = ['one', 'two'];
411-
createForm();
412-
413-
vm.form.test.value = ['one', 'two'];
414-
setTimeout(()=>{
415-
let inputs = vm.$el.querySelectorAll('input');
416-
expect(inputs[0].checked).to.be.true;
417-
expect(inputs[1].checked).to.be.true;
418-
done();
419-
}, 0);
420-
});
421-
422-
it('single value', (done) => {
423-
data.form.test.type = 'list';
424-
data.form.test.inputType = 'radio';
425-
data.form.test.options = ['one', 'two'];
426-
createForm();
427-
428-
vm.form.test.value = 'two';
429-
setTimeout(()=>{
430-
let inputs = vm.$el.querySelectorAll('input');
431-
expect(inputs[0].checked).to.be.false;
432-
expect(inputs[1].checked).to.be.true;
433-
done();
434-
}, 0);
435-
});
436-
});
437-
*/
335+
336+
describe("List", () => {
337+
describe('checkbox functions', ()=>{
338+
describeFunctions('list', 'input', 'checkbox', ['one']);
339+
});
340+
describe('classes & attributes', () => {
341+
/*
342+
it('classes', () => {
343+
data.fields[0].classes = {
344+
'class-a': true,
345+
'class-b': false
346+
};
347+
createForm();
348+
let input = vm.$el.querySelectorAll(inputElement)[0];
349+
expect(input.className).to.equal('form-control class-a');
350+
});
351+
352+
it('id', () => {
353+
data.fields[0].id = 'someId';
354+
createForm();
355+
let input = vm.$el.querySelectorAll(inputElement)[0];
356+
let label = vm.$el.querySelectorAll('label')[0];
357+
expect(input.id).to.equal(data.fields[0].id);
358+
expect(label.htmlFor).to.equal(data.fields[0].id);
359+
});
360+
*/
361+
362+
});
363+
364+
it('array options', () => {
365+
data.fields[0].type = 'list';
366+
data.fields[0].templateOptions.type = 'checkbox';
367+
data.fields[0].options = ['one', 'two', 'three'];
368+
createForm();
369+
370+
let inputs = vm.$el.querySelectorAll('input');
371+
let labels = vm.$el.querySelectorAll('label');
372+
expect(inputs).to.be.length(3);
373+
expect(inputs[0].value).to.equal('one');
374+
expect(labels[0].textContent).to.contain('one');
375+
expect(inputs[1].value).to.equal('two');
376+
expect(labels[1].textContent).to.contain('two');
377+
});
378+
379+
it('object options', () => {
380+
data.fields[0].type = 'list';
381+
data.fields[0].templateOptions.type = 'checkbox'
382+
data.fields[0].options = [
383+
{ label: 'Foo', value: 'bar' },
384+
{ label: 'Bar', value: 'foo' }
385+
];
386+
createForm();
387+
388+
let inputs = vm.$el.querySelectorAll('input');
389+
let labels = vm.$el.querySelectorAll('label');
390+
expect(inputs).to.be.length(2);
391+
expect(inputs[0].value).to.equal('bar');
392+
expect(labels[0].textContent).to.contain('Foo');
393+
expect(inputs[1].value).to.equal('foo');
394+
expect(labels[1].textContent).to.contain('Bar');
395+
});
396+
397+
it('sets defaults', () => {
398+
data.fields[0].type = 'list';
399+
data.fields[0].options = ['one', 'two'];
400+
createForm();
401+
402+
expect(vm.$el.querySelectorAll('input')[0].type).to.equal('checkbox');
403+
expect(vm.model.test).to.be.length(0);
404+
expect(vm.model.test).to.deep.equal([]);
405+
});
406+
407+
it("shouldn't overwrite defaults", () => {
408+
data.fields[0].type = 'list';
409+
data.fields[0].options = ['one', 'two'];
410+
data.model.test = ['one'];
411+
createForm();
412+
413+
expect(vm.model.test).to.be.length(1);
414+
expect(vm.model.test[0]).to.equal('one');
415+
let inputs = vm.$el.querySelectorAll('input');
416+
expect(inputs[0].checked).to.be.true;
417+
});
418+
419+
it('multiple values', (done) => {
420+
data.fields[0].type = 'list';
421+
data.fields[0].templateOptions.type = 'checkbox';
422+
data.fields[0].options = ['one', 'two'];
423+
createForm();
424+
425+
vm.model.test = ['one', 'two'];
426+
setTimeout(()=>{
427+
let inputs = vm.$el.querySelectorAll('input');
428+
expect(inputs[0].checked).to.be.true;
429+
expect(inputs[1].checked).to.be.true;
430+
done();
431+
}, 0);
432+
});
433+
434+
it('single value', (done) => {
435+
data.fields[0].type = 'list';
436+
data.fields[0].templateOptions.type = 'radio';
437+
data.fields[0].options = ['one', 'two'];
438+
createForm();
439+
440+
vm.model.test = 'two';
441+
setTimeout(()=>{
442+
let inputs = vm.$el.querySelectorAll('input');
443+
expect(inputs[0].checked).to.be.false;
444+
expect(inputs[1].checked).to.be.true;
445+
done();
446+
}, 0);
447+
});
448+
});
449+
438450
});

0 commit comments

Comments
 (0)