@mozaic-ds/vue 0.22.0 → 0.22.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.22.0",
+  "version": "0.22.1-beta.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {

package/src/components/tabs/MTab.vue

@@ -23,14 +23,8 @@
           class="mc-tabs__link"
           role="tab"
           :aria-selected="tab.active ? 'true' : 'false'"
-          :class="setActiveClass(tab)"
-          @click="
-            manageTabs(
-              $event.target,
-              $event,
-              Object.assign({ index: index }, tab)
-            )
-          "
+          :class="setLinkClass(tab)"
+          @click="onTabClicked($event, tab, index)"
         >
           {{ tab.text }}
         </component>
@@ -111,7 +105,7 @@ export default {
     activeIndex(newValue) {
       const tab = this.getTabFromIndex(newValue);
       if (tab && this.tabs[newValue]) {
-        this.manageTabs(tab, null, Object.assign({index: newValue}, this.tabs[newValue]));
+        this.setTabState(tab);
       }
     }
   },
@@ -124,7 +118,7 @@ export default {
         if (this.activeIndex) {
           const tab = this.getTabFromIndex(this.activeIndex);
           if (tab) {
-            this.manageTabs(tab);
+            this.setTabState(tab);
           }
         } else {
           const isActive = this.tabs.some((tab) =>
@@ -132,7 +126,7 @@ export default {
           );
           if (!isActive) {
             const firstTab = this.tablist.querySelector('.mc-tabs__link');
-            this.manageTabs(firstTab);
+            this.setTabState(firstTab);
           }
         }
       }
@@ -140,18 +134,25 @@ export default {
   },
 
   methods: {
-    setActiveClass: function (tab) {
-      const tabClasses = [];
-
-      if (tab.active) {
-        tabClasses.push('mc-tabs__link--selected');
+    setLinkClass: function (tab) {
+      return {
+        'mc-tabs__link--selected': tab.active,
+        'mc-tabs__link--disabled': tab.disabled,
+      };
+    },
+    onTabClicked(e, tab, index) {
+      if (tab && tab.disabled) {
+        return;
       }
 
-      if (tab.disabled) {
-        tabClasses.push('mc-tabs__link--disabled');
+      let selectedTab = this.getTabFromIndex(index);
+
+      if (this.activeIndex) {
+        selectedTab = this.getTabFromIndex(this.activeIndex);
       }
 
-      return tabClasses;
+      this.setTabState(selectedTab);
+      this.$emit('tab-clicked', e.target, Object.assign({ index: index }, tab));
     },
     manageTabs: function (el, e, tab) {
       if (tab && tab.disabled) {
@@ -169,6 +170,15 @@ export default {
       el.classList.add('mc-tabs__link--selected');
       el.setAttribute('aria-selected', 'true');
     },
+    setTabState(tab) {
+      this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
+        el.classList.remove('mc-tabs__link--selected');
+        el.setAttribute('aria-selected', 'false');
+      });
+
+      tab.classList.add('mc-tabs__link--selected');
+      tab.setAttribute('aria-selected', 'true');
+    },
     getTabFromIndex: function (index) {
       if (this.tablist && this.tablist.children[index] && this.tablist.children[index].children[0]) {
         return this.tablist.children[index].children[0];