added better support for classes

Author: matt-sanders

README.md

@@ -105,6 +105,7 @@ These options are used by all the different field types. Some fields may have sp
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | 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'}]` |
+| labelClasses | `object` | `null` | Pass an object of classes to be added to the label surrounding the element. Follows the Vue bindings where each key matches a boolean value. eg `{ 'class-a': true, 'class-b': false }` In this case class-a will be attached. You may also pass an array. |
 
 ### Template Options
 These should be added to the `templateOptions` property. Some input types may have specific options which can be used here and will be specified below.
@@ -119,7 +120,8 @@ These should be added to the `templateOptions` property. Some input types may ha
 | onKeyup | `function(e)` | `null` | A function to run on @keyup event |
 | onKeydown | `function(e)` | `null` | A function to run on @keydown event |
 | atts | `object` | `null` | Pass an object of attributes to be added to the element. eg `{ placeholder: 'hello world' }` |
-| classes | `object` | `null` | Pass an object of classes to be added to the element. Follows the Vue bindings where each key matches a boolean value. eg `{ 'class-a': true, 'class-b': false }` In this case class-a will be attached. |
+| classes | `object` | `null` | Pass an object of classes to be added to the element. Follows the Vue bindings where each key matches a boolean value. eg `{ 'class-a': true, 'class-b': false }` In this case class-a will be attached. You may also pass an array |
+| wrapperClasses | `object` | `null` | Pass an object of classes to be added to the wrapper. Follows the Vue bindings where each key matches a boolean value. eg `{ 'class-a': true, 'class-b': false }` In this case class-a will be attached. You may also pass an array |
 | id | `string` | `null` | An ID string to attach to the element |
 
 #### Input options

dist/vue-formly-bootstrap.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-formly-bootstrap",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "A bootstrap based form input bundle for Vue Formly",
   "main": "dist/vue-formly-bootstrap.js",
   "scripts": {

dist/vue-formly-bootstrap.min.js

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-group formly-input" :class="[ to.inputType, {'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error has-danger': hasError}]">
+  <div class="form-group formly-input" :class="[ to.inputType, to.wrapperClasses, {'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error has-danger': hasError}]">
     <label v-if="to.label" :for="to.id ? to.id : null">{{to.label}}</label>
     <input class="form-control" :class="to.classes" :id="to.id ? to.id : null" type="text"  v-model="model[field.key]" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts" v-formly-input-type="to.inputType">
     <error-display :form="form" :field="field.key"></error-display>

package.json

@@ -1,9 +1,9 @@
 <template>
-  <div class="checkbox formly-list" :id="to.id" :class="[to.classes, {'has-error has-danger': hasError}]">
+  <div class="checkbox formly-list" :id="to.id" :class="[to.wrapperClasses, {'has-error has-danger': hasError}]">
 
-    <label v-for="option in field.options">
-      <input v-if="!to.inputType || to.inputType == 'checkbox'" 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">
-      <input v-if="to.inputType == 'radio'" type="radio" 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">
+    <label v-for="option in field.options" :class="to.labelClasses">
+      <input v-if="!to.inputType || to.inputType == 'checkbox'" 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" :class="to.classes">
+      <input v-if="to.inputType == 'radio'" type="radio" 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" :class="to.classes">
       {{option.label || option}}
     </label>
     <error-display :form="form" :field="field.key"></error-display>

src/fields/fieldInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-group formly-select" :class="{'has-error has-danger': hasError}">
+  <div class="form-group formly-select" :class="[to.wrapperClasses, {'has-error has-danger': hasError}]">
     <label v-if="to.label" :for="to.id ? to.id : null">{{to.label}}</label>
     <select class="form-control" :class="to.classes" :id="to.id ? to.id : null" v-model="model[field.key]" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts">
       <option v-for="option in field.options" :value="option.value || option">{{option.label || option}}</option>

src/fields/fieldList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-group formly-textarea" :class="{'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error has-danger': hasError}">
+  <div class="form-group formly-textarea" :class="[to.wrapperClasses, {'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error has-danger': hasError}]">
     <label v-if="to.label" :for="to.id ? to.id : null">{{to.label}}</label>
     <textarea class="form-control" :class="to.classes" :id="to.id ? to.id : null" v-model="model[field.key]" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts"></textarea>
     <error-display :form="form" :field="field.key"></error-display>

src/fields/fieldSelect.vue

@@ -120,13 +120,20 @@ function describeAttributes(inputElement, testPlaceholder = true){
   });
 
   it('classes', () => {
+    data.fields[0].templateOptions.wrapperClasses = ['foo', 'bar'];
     data.fields[0].templateOptions.classes = {
       'class-a': true,
       'class-b': false
     };
     createForm();
     let input = vm.$el.querySelectorAll(inputElement)[0];
     expect(input.className).to.equal('form-control class-a');
+
+    let foos = vm.$el.querySelectorAll('.foo');
+    expect(foos).to.be.length(1);
+
+    let fooBars = vm.$el.querySelectorAll('.bar.foo');
+    expect(fooBars).to.be.length(1);
   });
 
   it('id', () => {