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

package/src/components/listbox/MListBoxActions.vue

@@ -16,13 +16,13 @@
       aria-labelledby="listbox"
     >
       <ul
-        v-for="(list, index) in listItems"
-        :key="`${list}-${index}`"
+        v-for="(list, i) in listItems"
+        :key="`list${i}`"
         class="mc-listbox-options__list"
       >
         <li
-          v-for="item in list"
-          :key="item.id"
+          v-for="(item, j) in list"
+          :key="`item${j}`"
           class="mc-listbox-options__tile"
           :class="{ 'is-disabled': item.disabled }"
         >
@@ -36,10 +36,10 @@
             :is="item.href ? 'a' : 'button'"
             :href="item.href ? item.href : null"
             :type="item.href ? null : 'button'"
-            :disabled="item.href ? null : true"
+            :disabled="item.disabled ? true : null"
             class="mc-listbox-options__item"
             :class="{ 'is-danger': item.danger, 'is-disabled': item.disabled }"
-            @click.self="$emit('update:itemSelected', item)"
+            @click.self="onClickItem(item, i, j)"
           >
             {{ item.text }}
           </component>
@@ -118,6 +118,13 @@ export default {
     onClickOutside() {
       this.isOpen = false;
     },
+    onClickItem(item, listIndex, itemIndex) {
+      const valToEmit = Object.assign(
+        { listIndex: listIndex, itemIndex: itemIndex },
+        item
+      );
+      this.$emit('update:itemSelected', valToEmit);
+    },
   },
 };
 </script>

package/src/components/quantityselector/MQuantitySelector.vue

@@ -7,7 +7,7 @@
       icon-position="left"
       :aria-label="decrementAriaLabel"
       :aria-controls="id"
-      :disabled="currentValue === valuemin"
+      :disabled="disabled ? disabled : currentValue === valuemin"
       :size="small ? 's' : null"
       tabindex="-1"
       type="button"
@@ -26,6 +26,7 @@
       :aria-valuemax="valuemax"
       :placeholder="placeholder"
       :size="small ? 's' : null"
+      :disabled="disabled"
       role="spinbutton"
       @input="handle"
       @keypress="integerOnly && formatValue($event)"
@@ -39,7 +40,7 @@
       icon-position="right"
       :aria-label="incrementAriaLabel"
       :aria-controls="id"
-      :disabled="currentValue === valuemax"
+      :disabled="disabled ? disabled : currentValue === valuemax"
       :size="small ? 's' : null"
       tabindex="-1"
       type="button"
@@ -105,6 +106,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {

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];

package/src/components/textinput/MTextInputField.vue

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