Skip to content

Commit 15ebaaf

Browse files
matt-sandersmatt-sanders
committed
added radio/checkbox
1 parent 9ae80f7 commit 15ebaaf

File tree

4 files changed

+149
-11
lines changed

4 files changed

+149
-11
lines changed

‎README.md

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,19 +90,24 @@ These options are used by all the different field types. Some fields may have sp
9090
| --- | --- | --- | --- |
9191
| options | `array` | `null` | Pass either an array of strings or objects. Objects require a `label` and `value` property. If a string is passed then it will be used for the value and the label. eg: `options: ['Foo', 'Bar']` or `options: [{ label: 'Foo', value: 'bar'},{label: 'Bar', value: 'foo'}] |
9292

93+
###List options
94+
| Property | Type | Default | Description |
95+
| --- | --- | --- | --- |
96+
| options | `array` | `null` | Pass either an array of strings or objects. Objects require a `label` and `value` property. If a string is passed then it will be used for the value and the label. eg: `options: ['Foo', 'Bar']` or `options: [{ label: 'Foo', value: 'bar'},{label: 'Bar', value: 'foo'}] |
97+
| inputType | `string` | `checkbox` | The 'type' attribute to pass to each input. Can be either 'checkbox' or 'radio' |
98+
9399
##Available Inputs
94100
* input
95101
* select
96102
* textarea
97-
* checkbox
98-
* radio
103+
* list ( radio/checkbox )
99104

100105
##To Do
101106
* [x] Input
102107
* [x] Select
103108
* [x] Text Area
104-
* [ ] Checkbox
105-
* [ ] Radio Buttons
109+
* [x] Checkbox
110+
* [x] Radio Buttons
106111
* [ ] Date Picker
107112
* [ ] Other funky form inputs
108113
* [x] Dirty/Clean checking

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-formly-bootstrap",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"description": "A bootstrap based form input bundle for Vue Formly",
55
"main": "dist/vue-formly-bootstrap.js",
66
"scripts": {

‎src/fields/fieldList.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div class="checkbox" :id="form[key].id" :class="form[key].classes">
3+
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}}
6+
</label>
7+
8+
</div>
9+
</template>
10+
11+
<script>
12+
import baseField from './baseField';
13+
export default {
14+
mixins: [baseField],
15+
created: function(){
16+
//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', []);
19+
}
20+
}
21+
</script>

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

Lines changed: 118 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,11 @@ function trigger (target, event, process) {
3030
target.dispatchEvent(e);
3131
}
3232

33-
function describeFunctions(inputElement){
33+
function describeFunctions(formlyElement, inputElement, inputType = 'text', options){
3434
beforeEach(() => {
35-
data.form.test.type = inputElement;
36-
data.form.test.inputType = 'text';
35+
data.form.test.type = formlyElement;
36+
data.form.test.inputType = inputType;
37+
if ( typeof options != 'undefined' ) data.form.test.options = options;
3738
spy = sinon.spy();
3839
});
3940

@@ -168,7 +169,7 @@ describe('Bootstrap Field Inputs', () => {
168169
describe('Input', () => {
169170

170171
describe('functions',() =>{
171-
describeFunctions('input');
172+
describeFunctions('input', 'input');
172173
});
173174
describe('classes & attributes', () => {
174175
describeAttributes('input');
@@ -215,7 +216,7 @@ describe('Bootstrap Field Inputs', () => {
215216

216217
describe('Select', () => {
217218
describe('functions', ()=>{
218-
describeFunctions('select');
219+
describeFunctions('select', 'select');
219220
});
220221
describe('classes & attributes', () => {
221222
describeAttributes('select', false);
@@ -263,7 +264,7 @@ describe('Bootstrap Field Inputs', () => {
263264

264265
describe('Textarea', () => {
265266
describe('functions', ()=>{
266-
describeFunctions('textarea');
267+
describeFunctions('textarea', 'textarea');
267268
});
268269
describe('classes & attributes', () => {
269270
describeAttributes('textarea');
@@ -282,5 +283,116 @@ describe('Bootstrap Field Inputs', () => {
282283
expect(inputs).to.be.length(1);
283284
});
284285
});
286+
287+
describe("List", () => {
288+
describe('checkbox functions', ()=>{
289+
describeFunctions('list', 'input', 'checkbox', ['one']);
290+
});
291+
describe('classes & attributes', () => {
292+
/*
293+
it('classes', () => {
294+
data.form.test.classes = {
295+
'class-a': true,
296+
'class-b': false
297+
};
298+
createForm();
299+
let input = vm.$el.querySelectorAll(inputElement)[0];
300+
expect(input.className).to.equal('form-control class-a');
301+
});
302+
303+
it('id', () => {
304+
data.form.test.id = 'someId';
305+
createForm();
306+
let input = vm.$el.querySelectorAll(inputElement)[0];
307+
let label = vm.$el.querySelectorAll('label')[0];
308+
expect(input.id).to.equal(data.form.test.id);
309+
expect(label.htmlFor).to.equal(data.form.test.id);
310+
});
311+
*/
312+
});
313+
314+
it('array options', () => {
315+
data.form.test.type = 'list';
316+
data.form.test.inputType = 'checkbox';
317+
data.form.test.options = ['one', 'two', 'three'];
318+
createForm();
319+
320+
let inputs = vm.$el.querySelectorAll('input');
321+
let labels = vm.$el.querySelectorAll('label');
322+
expect(inputs).to.be.length(3);
323+
expect(inputs[0].value).to.equal('one');
324+
expect(labels[0].textContent).to.contain('one');
325+
expect(inputs[1].value).to.equal('two');
326+
expect(labels[1].textContent).to.contain('two');
327+
});
328+
329+
it('object options', () => {
330+
data.form.test.type = 'list';
331+
data.form.test.inputType = 'checkbox'
332+
data.form.test.options = [
333+
{ label: 'Foo', value: 'bar' },
334+
{ label: 'Bar', value: 'foo' }
335+
];
336+
createForm();
337+
338+
let inputs = vm.$el.querySelectorAll('input');
339+
let labels = vm.$el.querySelectorAll('label');
340+
expect(inputs).to.be.length(2);
341+
expect(inputs[0].value).to.equal('bar');
342+
expect(labels[0].textContent).to.contain('Foo');
343+
expect(inputs[1].value).to.equal('foo');
344+
expect(labels[1].textContent).to.contain('Bar');
345+
});
346+
347+
it('sets defaults', () => {
348+
data.form.test.type = 'list';
349+
data.form.test.options = ['one', 'two'];
350+
createForm();
351+
352+
expect(vm.$el.querySelectorAll('input')[0].type).to.equal('checkbox');
353+
expect(vm.form.test.value).to.be.length(0);
354+
expect(vm.form.test.value).to.deep.equal([]);
355+
});
356+
357+
it("shouldn't overwrite defaults", () => {
358+
data.form.test.type = 'list';
359+
data.form.test.options = ['one', 'two'];
360+
data.form.test.value = ['one'];
361+
createForm();
362+
363+
expect(vm.form.test.value).to.be.length(1);
364+
expect(vm.form.test.value[0]).to.equal('one');
365+
});
366+
367+
it('multiple values', (done) => {
368+
data.form.test.type = 'list';
369+
data.form.test.inputType = 'checkbox';
370+
data.form.test.options = ['one', 'two'];
371+
createForm();
372+
373+
vm.form.test.value = ['one', 'two'];
374+
setTimeout(()=>{
375+
let inputs = vm.$el.querySelectorAll('input');
376+
expect(inputs[0].checked).to.be.true;
377+
expect(inputs[1].checked).to.be.true;
378+
done();
379+
}, 0);
380+
});
381+
382+
it('single value', (done) => {
383+
data.form.test.type = 'list';
384+
data.form.test.inputType = 'radio';
385+
data.form.test.options = ['one', 'two'];
386+
createForm();
387+
388+
vm.form.test.value = 'two';
389+
setTimeout(()=>{
390+
let inputs = vm.$el.querySelectorAll('input');
391+
expect(inputs[0].checked).to.be.false;
392+
expect(inputs[1].checked).to.be.true;
393+
done();
394+
}, 0);
395+
});
396+
});
285397

286398
});

0 commit comments

Comments
 (0)