Merge pull request #28 from ahallhognason/master

Support adding/removing multiple classes for an element at once

dist/alpine.js

@@ -1297,11 +1297,15 @@ function () {
           el.setAttribute('class', value.join(' '));
         } else {
           // Use the class object syntax that vue uses to toggle them.
-          Object.keys(value).forEach(function (className) {
-            if (value[className]) {
-              el.classList.add(className);
+          Object.keys(value).forEach(function (classNames) {
+            if (value[classNames]) {
+              classNames.split(' ').forEach(function (className) {
+                return el.classList.add(className);
+              });
             } else {
-              el.classList.remove(className);
+              classNames.split(' ').forEach(function (className) {
+                return el.classList.remove(className);
+              });
             }
           });
         }

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/alpine.min.js": "/alpine.min.js?id=ed3d6a73430d8228e087",
-    "/alpine.js": "/alpine.js?id=173683fa4e0715ecbb0e"
+    "/alpine.min.js": "/alpine.min.js?id=842f7ee18cdc3f072072",
+    "/alpine.js": "/alpine.js?id=f0acb1fca2c9bd1b4843"
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "alpinejs",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/component.js

@@ -370,11 +370,11 @@ export default class Component {
                 el.setAttribute('class', value.join(' '))
             } else {
                 // Use the class object syntax that vue uses to toggle them.
-                Object.keys(value).forEach(className => {
-                    if (value[className]) {
-                        el.classList.add(className)
+                Object.keys(value).forEach(classNames => {
+                    if (value[classNames]) {
+                        classNames.split(' ').forEach(className => el.classList.add(className))
                     } else {
-                        el.classList.remove(className)
+                        classNames.split(' ').forEach(className => el.classList.remove(className))
                     }
                 })
             }

test/bind.spec.js

@@ -40,6 +40,32 @@ test('class attribute bindings are added by object syntax', async () => {
     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
 })
 
+test('multiple classes are added by object syntax', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ isOn: false }">
+            <span class="foo bar" x-bind:class="{ 'foo bar': isOn }"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').classList.contains('foo')).toBeFalsy()
+    expect(document.querySelector('span').classList.contains('bar')).toBeFalsy()
+})
+
+test('multiple classes are removed by object syntax', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ isOn: true }">
+            <span x-bind:class="{ 'foo bar': isOn }"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
+    expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
+})
+
 test('class attribute bindings are added by nested object syntax', async () => {
     document.body.innerHTML = `
         <div x-data="{ nested: { isOn: true } }">