Merge pull request #608 from skovhus/v-style-for-object

Added v-style support for objects

Author: yyx990803

src/directives/style.js

@@ -3,43 +3,55 @@ var importantRE = /!important;?$/
 
 module.exports = {
 
+  deep: true,
+
   bind: function () {
     var prop = this.arg
     if (!prop) return
-    if (prop.charAt(0) === '$') {
-      // properties that start with $ will be auto-prefixed
-      prop = prop.slice(1)
-      this.prefixed = true
-    }
     this.prop = prop
   },
 
   update: function (value) {
-    var prop = this.prop
+    if (this.prop) {
+      this.setCssProperty(this.prop, value)
+    } else {
+      if (typeof value === 'object') {
+        for (var prop in value) {
+          this.setCssProperty(prop, value[prop])
+        }
+      } else {
+        this.el.style.cssText = value
+      }
+    }
+  },
+
+  setCssProperty: function (prop, value) {
+    var prefixed = false
+    if (prop.charAt(0) === '$') {
+      // properties that start with $ will be auto-prefixed
+      prop = prop.slice(1)
+      prefixed = true
+    }
     // cast possible numbers/booleans into strings
     if (value != null) {
       value += ''
     }
-    if (prop) {
-      var isImportant = importantRE.test(value)
-        ? 'important'
-        : ''
-      if (isImportant) {
-        value = value.replace(importantRE, '').trim()
-      }
-      this.el.style.setProperty(prop, value, isImportant)
-      if (this.prefixed) {
-        var i = prefixes.length
-        while (i--) {
-          this.el.style.setProperty(
-            prefixes[i] + prop,
-            value,
-            isImportant
-          )
-        }
+    var isImportant = importantRE.test(value)
+      ? 'important'
+      : ''
+    if (isImportant) {
+      value = value.replace(importantRE, '').trim()
+    }
+    this.el.style.setProperty(prop, value, isImportant)
+    if (prefixed) {
+      var i = prefixes.length
+      while (i--) {
+        this.el.style.setProperty(
+          prefixes[i] + prop,
+          value,
+          isImportant
+        )
       }
-    } else {
-      this.el.style.cssText = value
     }
   }
 

test/unit/specs/directives/style_spec.js

@@ -1,5 +1,6 @@
 var _ = require('../../../../src/util')
 var def = require('../../../../src/directives/style')
+var Vue = require('../../../../src/vue')
 
 if (_.inBrowser) {
   describe('v-style', function () {
@@ -43,5 +44,37 @@ if (_.inBrowser) {
       expect(spy).toHaveBeenCalledWith('-webkit-transform', val, '')
     })
 
+    it('update with object', function () {
+      dir.bind()
+      dir.update({color: 'red', 'margin-right': '30px'})
+      expect(el.style.getPropertyValue('color')).toBe('red')
+      expect(el.style.getPropertyValue('margin-right')).toBe('30px')
+    })
+
+    it('update with object and auto prefix', function () {
+      var spy = el.style.setProperty = jasmine.createSpy()
+      dir.bind()
+      var scale = 'scale(0.5)';
+      dir.update({'$transform': scale})
+      expect(spy).toHaveBeenCalledWith('transform', scale, '')
+      expect(spy).toHaveBeenCalledWith('-ms-transform', scale, '')
+      expect(spy).toHaveBeenCalledWith('-moz-transform', scale, '')
+      expect(spy).toHaveBeenCalledWith('-webkit-transform', scale, '')
+    })
+
+    it('updates object deep', function (done) {
+      el.setAttribute('v-style', 'divStyling')
+      var vm = new Vue({
+        el: el,
+        data: {divStyling: { display: 'none'}}
+      })
+      expect(el.style.display).toBe('none')
+      vm.divStyling.display = 'block'
+      _.nextTick(function () {
+        expect(el.style.display).toBe('block')
+        done()
+      })
+    })
+
   })
 }