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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.22.1-beta.0",
+  "version": "0.23.0-beta.0",
   "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"
@@ -24,6 +34,7 @@
           role="tab"
           :aria-selected="tab.active ? 'true' : 'false'"
           :class="setLinkClass(tab)"
+          v-bind="tab.attrs"
           @click="onTabClicked($event, tab, index)"
         >
           {{ tab.text }}
@@ -83,31 +94,34 @@ export default {
   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.setTabState(tab);
-      }
-    }
+      this.localActiveIndex = newValue;
+    },
+    localActiveIndex: {
+      handler: function (newValue) {
+        const selectedTab = this.getTabFromIndex(newValue);
+        if (selectedTab) {
+          this.setTabState(selectedTab);
+        }
+      },
+      immediate: true,
+    },
   },
 
   mounted: function () {
@@ -116,17 +130,16 @@ export default {
         this.tablist = this.$refs.tablist;
 
         if (this.activeIndex) {
-          const tab = this.getTabFromIndex(this.activeIndex);
-          if (tab) {
-            this.setTabState(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.setTabState(firstTab);
+            this.localActiveIndex = 0;
           }
         }
       }
@@ -140,35 +153,14 @@ export default {
         'mc-tabs__link--disabled': tab.disabled,
       };
     },
-    onTabClicked(e, tab, index) {
-      if (tab && tab.disabled) {
-        return;
-      }
-
-      let selectedTab = this.getTabFromIndex(index);
-
-      if (this.activeIndex) {
-        selectedTab = this.getTabFromIndex(this.activeIndex);
-      }
-
-      this.setTabState(selectedTab);
-      this.$emit('tab-clicked', e.target, Object.assign({ index: index }, tab));
-    },
-    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');
       });
 
-      el.classList.add('mc-tabs__link--selected');
-      el.setAttribute('aria-selected', 'true');
+      tab.classList.add('mc-tabs__link--selected');
+      tab.setAttribute('aria-selected', 'true');
     },
     setTabState(tab) {
       this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
@@ -180,10 +172,25 @@ export default {
       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 (!this.activeIndex) {
+        this.localActiveIndex = index;
+      }
+
+      this.$emit('tab-clicked', e.target, Object.assign({ index: index }, tab));
+    },
   },
 };
 </script>