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

package/dist/mozaic-vue.umd.js

@@ -42865,12 +42865,11 @@ MStepper.install = function (Vue) {
 };
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tabs/MTab.vue?vue&type=template&id=48690377&
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tabs/MTab.vue?vue&type=template&id=05f049d4&
 
 
 
-
-var MTabvue_type_template_id_48690377_render = function render() {
+var MTabvue_type_template_id_05f049d4_render = function render() {
   var _vm = this,
       _c = _vm._self._c;
 
@@ -42890,12 +42889,18 @@ var MTabvue_type_template_id_48690377_render = function render() {
       attrs: {
         "role": "presentation"
       }
-    }, [_c(tab.href ? tab.disabled ? 'span' : 'a' : 'button', {
+    }, [tab.router ? _c("".concat(tab.router), _vm._b({
+      tag: "component",
+      attrs: {
+        "to": tab.to,
+        "active-class": "mc-tabs__link--selected"
+      }
+    }, 'component', tab.attrs, false), [_vm._v(" " + _vm._s(tab.text) + " ")]) : _c(tab.href ? tab.disabled ? 'span' : 'a' : 'button', _vm._b({
       ref: "tab",
       refInFor: true,
       tag: "component",
       staticClass: "mc-tabs__link",
-      class: _vm.setActiveClass(tab),
+      class: _vm.setLinkClass(tab),
       attrs: {
         "id": tab.id,
         "href": tab.href ? !tab.disabled ? tab.href : null : null,
@@ -42906,12 +42911,10 @@ var MTabvue_type_template_id_48690377_render = function render() {
       },
       on: {
         "click": function click($event) {
-          _vm.manageTabs($event.target, $event, Object.assign({
-            index: index
-          }, tab));
+          return _vm.onTabClicked($event, tab, index);
         }
       }
-    }, [_vm._v(" " + _vm._s(tab.text) + " ")])], 1);
+    }, 'component', tab.attrs, false), [_vm._v(" " + _vm._s(tab.text) + " ")])], 1);
   }), 0) : _c('m-select', _vm._b({
     attrs: {
       "options": _vm.tabs
@@ -42919,13 +42922,17 @@ var MTabvue_type_template_id_48690377_render = function render() {
   }, 'm-select', _vm.selectAttributes, false))], 1);
 };
 
-var MTabvue_type_template_id_48690377_staticRenderFns = [];
+var MTabvue_type_template_id_05f049d4_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/tabs/MTab.vue?vue&type=template&id=48690377&
+;// CONCATENATED MODULE: ./src/components/tabs/MTab.vue?vue&type=template&id=05f049d4&
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tabs/MTab.vue?vue&type=script&lang=js&
 
 
+var _methods;
+
+
+
 
 
 
@@ -42971,34 +42978,38 @@ var MTabvue_type_template_id_48690377_staticRenderFns = [];
     },
     activeIndex: {
       type: Number,
-      default: 0
+      default: null
     }
   },
   data: function data() {
     return {
-      tablist: null
+      tablist: null,
+      localActiveIndex: null
     };
   },
   computed: {
     setClasses: function setClasses() {
-      var 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
-      }];
-      return classes;
+      };
     }
   },
   watch: {
     activeIndex: function activeIndex(newValue) {
-      var tab = this.getTabFromIndex(newValue);
+      this.localActiveIndex = newValue;
+    },
+    localActiveIndex: {
+      handler: function handler(newValue) {
+        var selectedTab = this.getTabFromIndex(newValue);
 
-      if (tab && this.tabs[newValue]) {
-        this.manageTabs(tab, null, Object.assign({
-          index: newValue
-        }, this.tabs[newValue]));
-      }
+        if (selectedTab) {
+          this.setTabState(selectedTab);
+        }
+      },
+      immediate: true
     }
   },
   mounted: function mounted() {
@@ -43009,68 +43020,65 @@ var MTabvue_type_template_id_48690377_staticRenderFns = [];
         _this.tablist = _this.$refs.tablist;
 
         if (_this.activeIndex) {
-          var tab = _this.getTabFromIndex(_this.activeIndex);
-
-          if (tab) {
-            _this.manageTabs(tab);
-          }
+          _this.localActiveIndex = _this.activeIndex;
         } else {
           var isActive = _this.tabs.some(function (tab) {
-            return Object.prototype.hasOwnProperty.call(tab, 'active');
+            return Object.prototype.hasOwnProperty.call(tab, 'active') && tab.active === true;
           });
 
           if (!isActive) {
-            var firstTab = _this.tablist.querySelector('.mc-tabs__link');
-
-            _this.manageTabs(firstTab);
+            _this.localActiveIndex = 0;
           }
         }
       }
     });
   },
-  methods: {
-    setActiveClass: function setActiveClass(tab) {
-      var tabClasses = [];
-
-      if (tab.active) {
-        tabClasses.push('mc-tabs__link--selected');
-      }
-
-      if (tab.disabled) {
-        tabClasses.push('mc-tabs__link--disabled');
-      }
-
-      return tabClasses;
+  methods: (_methods = {
+    setLinkClass: function setLinkClass(tab) {
+      return {
+        'mc-tabs__link--selected': tab.active,
+        'mc-tabs__link--disabled': tab.disabled
+      };
     },
-    manageTabs: function manageTabs(el, e, tab) {
-      if (tab && tab.disabled) {
-        return;
-      }
-
-      if (e) {
-        this.$emit('tab-clicked', e.target, tab);
-      }
-
+    setTabState: function setTabState(tab) {
       this.tablist.querySelectorAll('.mc-tabs__link').forEach(function (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');
-    },
-    getTabFromIndex: function getTabFromIndex(index) {
-      if (this.tablist && this.tablist.children[index] && this.tablist.children[index].children[0]) {
-        return this.tablist.children[index].children[0];
-      }
+      tab.classList.add('mc-tabs__link--selected');
+      tab.setAttribute('aria-selected', 'true');
     }
-  }
+  }, _defineProperty(_methods, "setTabState", function setTabState(tab) {
+    this.tablist.querySelectorAll('.mc-tabs__link').forEach(function (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');
+  }), _defineProperty(_methods, "getTabFromIndex", function getTabFromIndex(index) {
+    if (this.tablist && this.tablist.children[index] && this.tablist.children[index].children[0]) {
+      return this.tablist.children[index].children[0];
+    }
+  }), _defineProperty(_methods, "onTabClicked", function 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));
+  }), _methods)
 });
 ;// CONCATENATED MODULE: ./src/components/tabs/MTab.vue?vue&type=script&lang=js&
  /* harmony default export */ var tabs_MTabvue_type_script_lang_js_ = (MTabvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tabs/MTab.vue?vue&type=style&index=0&id=48690377&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tabs/MTab.vue?vue&type=style&index=0&id=05f049d4&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/tabs/MTab.vue?vue&type=style&index=0&id=48690377&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/tabs/MTab.vue?vue&type=style&index=0&id=05f049d4&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/tabs/MTab.vue
 
@@ -43083,8 +43091,8 @@ var MTabvue_type_template_id_48690377_staticRenderFns = [];
 
 var MTab_component = normalizeComponent(
   tabs_MTabvue_type_script_lang_js_,
-  MTabvue_type_template_id_48690377_render,
-  MTabvue_type_template_id_48690377_staticRenderFns,
+  MTabvue_type_template_id_05f049d4_render,
+  MTabvue_type_template_id_05f049d4_staticRenderFns,
   false,
   null,
   null,