@mozaic-ds/vue 0.22.0 → 0.23.0-beta.1

package/package.json

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

package/src/components/tabs/MTab.vue

@@ -13,8 +13,18 @@
         class="mc-tabs__item"
         role="presentation"
       >
+        <component
+          :is="`${tab.router}`"
+          v-if="tab.router"
+          v-bind="tab.attrs"
+          :to="tab.to"
+          active-class="mc-tabs__link--selected"
+        >
+          {{ tab.text }}
+        </component>
         <component
           :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
+          v-else
           :id="tab.id"
           ref="tab"
           :href="tab.href ? (!tab.disabled ? tab.href : null) : null"
@@ -23,14 +33,9 @@
           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)"
+          v-bind="tab.attrs"
+          @click="onTabClicked($event, tab, index)"
         >
           {{ tab.text }}
         </component>
@@ -82,38 +87,41 @@ export default {
     },
     activeIndex: {
       type: Number,
-      default: 0,
+      default: null,
     },
   },
 
   data() {
     return {
       tablist: null,
+      localActiveIndex: null,
     };
   },
 
   computed: {
     setClasses() {
-      const classes = [
-        {
-          'mc-tabs--full': this.align === 'full',
-          'mc-tabs--full-centered': this.align === 'centered',
-          'mc-tabs--dropdown': this.type === 'dropdown',
-          'mc-tabs--no-shadow': !this.shadow,
-        },
-      ];
-
-      return classes;
+      return {
+        'mc-tabs--full': this.align === 'full',
+        'mc-tabs--full-centered': this.align === 'centered',
+        'mc-tabs--dropdown': this.type === 'dropdown',
+        'mc-tabs--no-shadow': !this.shadow,
+      };
     },
   },
 
   watch: {
     activeIndex(newValue) {
-      const tab = this.getTabFromIndex(newValue);
-      if (tab && this.tabs[newValue]) {
-        this.manageTabs(tab, null, Object.assign({index: newValue}, this.tabs[newValue]));
-      }
-    }
+      this.localActiveIndex = newValue;
+    },
+    localActiveIndex: {
+      handler: function (newValue) {
+        const selectedTab = this.getTabFromIndex(newValue);
+        if (selectedTab) {
+          this.setTabState(selectedTab);
+        }
+      },
+      immediate: true,
+    },
   },
 
   mounted: function () {
@@ -122,17 +130,16 @@ export default {
         this.tablist = this.$refs.tablist;
 
         if (this.activeIndex) {
-          const tab = this.getTabFromIndex(this.activeIndex);
-          if (tab) {
-            this.manageTabs(tab);
-          }
+          this.localActiveIndex = this.activeIndex;
         } else {
-          const isActive = this.tabs.some((tab) =>
-              Object.prototype.hasOwnProperty.call(tab, 'active')
+          const isActive = this.tabs.some(
+            (tab) =>
+              Object.prototype.hasOwnProperty.call(tab, 'active') &&
+              tab.active === true
           );
+
           if (!isActive) {
-            const firstTab = this.tablist.querySelector('.mc-tabs__link');
-            this.manageTabs(firstTab);
+            this.localActiveIndex = 0;
           }
         }
       }
@@ -140,40 +147,50 @@ export default {
   },
 
   methods: {
-    setActiveClass: function (tab) {
-      const tabClasses = [];
-
-      if (tab.active) {
-        tabClasses.push('mc-tabs__link--selected');
-      }
-
-      if (tab.disabled) {
-        tabClasses.push('mc-tabs__link--disabled');
-      }
-
-      return tabClasses;
+    setLinkClass: function (tab) {
+      return {
+        'mc-tabs__link--selected': tab.active,
+        'mc-tabs__link--disabled': tab.disabled,
+      };
     },
-    manageTabs: function (el, e, tab) {
-      if (tab && tab.disabled) {
-        return;
-      }
-      if (e) {
-        this.$emit('tab-clicked', e.target, tab);
-      }
+    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');
+    },
+    setTabState(tab) {
       this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
         el.classList.remove('mc-tabs__link--selected');
         el.setAttribute('aria-selected', 'false');
       });
 
-      el.classList.add('mc-tabs__link--selected');
-      el.setAttribute('aria-selected', 'true');
+      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]) {
+      if (
+        this.tablist &&
+        this.tablist.children[index] &&
+        this.tablist.children[index].children[0]
+      ) {
         return this.tablist.children[index].children[0];
       }
     },
+    onTabClicked(e, tab, index) {
+      if (tab && tab.disabled) {
+        return;
+      }
+
+      if (typeof this.activeIndex !== 'number') {
+        this.localActiveIndex = index;
+      }
+
+      this.$emit('tab-clicked', e.target, Object.assign({ index: index }, tab));
+    },
   },
 };
 </script>