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

package/src/components/tabs/MTab.vue

@@ -13,20 +13,8 @@
         class="mc-tabs__item"
         role="presentation"
       >
-        <component
-          :is="`${tab.router}`"
-          v-if="tab.router"
-          v-bind="tab.attrs"
-          :to="tab.to"
-          class="mc-tabs__link"
-          :class="setLinkClass(tab)"
-          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"
@@ -35,9 +23,14 @@
           class="mc-tabs__link"
           role="tab"
           :aria-selected="tab.active ? 'true' : 'false'"
-          :class="setLinkClass(tab)"
-          v-bind="tab.attrs"
-          @click="onTabClicked($event, tab, index)"
+          :class="setActiveClass(tab)"
+          @click="
+            manageTabs(
+              $event.target,
+              $event,
+              Object.assign({ index: index }, tab)
+            )
+          "
         >
           {{ tab.text }}
         </component>
@@ -89,41 +82,38 @@ export default {
     },
     activeIndex: {
       type: Number,
-      default: null,
+      default: 0,
     },
   },
 
   data() {
     return {
       tablist: null,
-      localActiveIndex: null,
     };
   },
 
   computed: {
     setClasses() {
-      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,
-      };
+      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;
     },
   },
 
   watch: {
     activeIndex(newValue) {
-      this.localActiveIndex = newValue;
-    },
-    localActiveIndex: {
-      handler: function (newValue) {
-        const selectedTab = this.getTabFromIndex(newValue);
-        if (selectedTab) {
-          this.setTabState(selectedTab);
-        }
-      },
-      immediate: true,
-    },
+      const tab = this.getTabFromIndex(newValue);
+      if (tab && this.tabs[newValue]) {
+        this.manageTabs(tab, null, Object.assign({index: newValue}, this.tabs[newValue]));
+      }
+    }
   },
 
   mounted: function () {
@@ -132,16 +122,17 @@ export default {
         this.tablist = this.$refs.tablist;
 
         if (this.activeIndex) {
-          this.localActiveIndex = this.activeIndex;
+          const tab = this.getTabFromIndex(this.activeIndex);
+          if (tab) {
+            this.manageTabs(tab);
+          }
         } else {
-          const isActive = this.tabs.some(
-            (tab) =>
-              Object.prototype.hasOwnProperty.call(tab, 'active') &&
-              tab.active === true
+          const isActive = this.tabs.some((tab) =>
+              Object.prototype.hasOwnProperty.call(tab, 'active')
           );
-
           if (!isActive) {
-            this.localActiveIndex = 0;
+            const firstTab = this.tablist.querySelector('.mc-tabs__link');
+            this.manageTabs(firstTab);
           }
         }
       }
@@ -149,41 +140,40 @@ export default {
   },
 
   methods: {
-    setLinkClass: function (tab) {
-      return {
-        'mc-tabs__link--selected': tab.active,
-        'mc-tabs__link--disabled': tab.disabled,
-      };
+    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;
     },
-    setTabState(tab) {
+    manageTabs: function (el, e, tab) {
+      if (tab && tab.disabled) {
+        return;
+      }
+      if (e) {
+        this.$emit('tab-clicked', e.target, 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');
+      el.classList.add('mc-tabs__link--selected');
+      el.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>

package/src/components/textinput/MTextInputField.vue

@@ -6,6 +6,7 @@
     :class="setClasses"
     :aria-invalid="isInvalid"
     :value="value"
+    @input="$emit('input', $event.target.value)"
     v-on="inputListeners"
   />
 </template>

package/src/index.js

@@ -37,7 +37,7 @@ export { MHero } from './components/hero';
 export { MIcon } from './components/icon';
 export { MLayer } from './components/layer';
 export { MLink } from './components/link';
-export { MListBox, MListBoxActions } from './components/listbox';
+export { MListBox } from './components/listbox';
 export { MLoader } from './components/loader';
 export { MModal } from './components/modal';
 export { MNotification } from './components/notification';