feat(classes): add validation classes

package.json

@@ -19,6 +19,7 @@
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-es2015-loose": "^7.0.0",
     "babel-preset-es2015-loose-rollup": "git+https://github.com/kazupon/babel-preset-es2015-loose-rollup.git#master",
+    "component-classes": "^1.2.6",
     "eslint": "^2.7.0",
     "eslint-config-standard": "^5.1.0",
     "eslint-loader": "^1.3.0",

src/util.js

@@ -127,3 +127,24 @@ export function trigger (el, event, args) {
 export function isPromise (p) {
   return p && typeof p.then === 'function'
 }
+
+/**
+ * Togging classes
+ *
+ * @param {Element} el
+ * @param {String} key
+ * @param {Function} fn
+ */
+
+export function toggleClasses (el, key, fn) {
+  key = key.trim()
+  if (key.indexOf(' ') === -1) {
+    fn(el, key)
+    return
+  }
+
+  let keys = key.split(/\s+/)
+  for (let i = 0, l = keys.length; i < l; i++) {
+    fn(el, keys[i])
+  }
+}

src/validations/base.js

@@ -1,4 +1,4 @@
-import util, { empty, each, trigger, isPromise } from '../util'
+import util, { empty, each, trigger, isPromise, toggleClasses } from '../util'
 
 
 /**
@@ -200,6 +200,8 @@ export default class BaseValidation {
       }
       _.extend(results, props)
 
+      this.updateClasses(results)
+
       cb(results)
     })
   }
@@ -221,6 +223,10 @@ export default class BaseValidation {
     this._init = this._getValue(this._el)
   }
 
+  updateClasses (results) {
+    this._updateClasses(this._el, results)
+  }
+
   guardValidate (el, type) {
     if (type && type === 'blur' && !this.detectBlur) {
       return true
@@ -270,6 +276,67 @@ export default class BaseValidation {
     }
   }
 
+  _updateClasses (el, results) {
+    this._toggleValid(el, results.valid)
+    this._toggleTouched(el, results.touched)
+    this._togglePristine(el, results.pristine)
+    this._toggleModfied(el, results.modified)
+  }
+
+  _toggleValid (el, valid) {
+    const { addClass, removeClass } = util.Vue.util
+    const validClass = 'valid'
+    const invalidClass = 'invalid'
+
+    if (valid) {
+      toggleClasses(el, validClass, addClass)
+      toggleClasses(el, invalidClass, removeClass)
+    } else {
+      toggleClasses(el, validClass, removeClass)
+      toggleClasses(el, invalidClass, addClass)
+    }
+  }
+
+  _toggleTouched (el, touched) {
+    const { addClass, removeClass } = util.Vue.util
+    const touchedClass = 'touched'
+    const untouchedClass = 'untouched'
+
+    if (touched) {
+      toggleClasses(el, touchedClass, addClass)
+      toggleClasses(el, untouchedClass, removeClass)
+    } else {
+      toggleClasses(el, touchedClass, removeClass)
+      toggleClasses(el, untouchedClass, addClass)
+    }
+  }
+
+  _togglePristine (el, pristine) {
+    const { addClass, removeClass } = util.Vue.util
+    const pristineClass = 'pristine'
+    const dirtyClass = 'dirty'
+
+    if (pristine) {
+      toggleClasses(el, pristineClass, addClass)
+      toggleClasses(el, dirtyClass, removeClass)
+    } else {
+      toggleClasses(el, pristineClass, removeClass)
+      toggleClasses(el, dirtyClass, addClass)
+    }
+  }
+
+  _toggleModfied (el, modified) {
+    const { addClass, removeClass } = util.Vue.util
+    const modifiedClass = 'modified'
+
+    if (modified) {
+      toggleClasses(el, modifiedClass, addClass)
+    } else {
+      toggleClasses(el, modifiedClass, removeClass)
+    }
+  }
+
+
   _applyFilters (value, oldValue, filters, write) {
     const resolveAsset = util.Vue.util.resolveAsset
     const scope = this._getScope()

src/validations/checkbox.js

@@ -82,6 +82,12 @@ export default class CheckboxValidation extends BaseValidation {
     })
   }
 
+  updateClasses (results) {
+    each(this._inits, (item, index) => {
+      this._updateClasses(item.el, results)
+    })
+  }
+
   _addItem (el) {
     const item = {
       el: el,

src/validations/radio.js

@@ -62,6 +62,12 @@ export default class RadioValidation extends BaseValidation {
     })
   }
 
+  updateClasses (results) {
+    each(this._inits, (item, index) => {
+      this._updateClasses(item.el, results)
+    })
+  }
+
   _addItem (el) {
     const item = {
       el: el,