@mozaic-ds/vue 0.28.2 → 0.29.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.28.2",
+  "version": "0.29.1-beta.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,10 +23,10 @@
     "postinstall.js"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "^1.44.0",
-    "@mozaic-ds/icons": "^1.44.0",
-    "@mozaic-ds/styles": "^1.44.0",
-    "@mozaic-ds/web-fonts": "^1.22.0",
+    "@mozaic-ds/css-dev-tools": "1.44.0",
+    "@mozaic-ds/icons": "1.45.0",
+    "@mozaic-ds/styles": "1.45.1",
+    "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.25.5",
     "libphonenumber-js": "^1.10.14",
     "vue": "^2.6.14",

package/src/components/passwordinput/MPasswordInput.vue

@@ -6,6 +6,7 @@
       class="mc-text-input mc-password-input__control"
       :class="setInputClasses"
       :aria-invalid="isInvalid"
+      spellcheck="false"
     />
 
     <button

package/src/components/phonenumber/MPhoneNumber.vue

@@ -74,6 +74,7 @@
       :value="phoneNumber"
       :placeholder="placeholder"
       :maxlength="maxlength"
+      spellcheck="false"
       @blur="onChangePhoneNumber"
       @focus="(event) => (formatOnBlur ? cleanFormat(event) : null)"
       @keyup="onKeyPressPhoneNumber"

package/src/components/tabs/MTab.vue

@@ -19,7 +19,7 @@
           v-bind="tab.attrs"
           :to="tab.to"
           class="mc-tabs__element"
-          :class="setLinkClass(tab)"
+          :class="setActiveClass(tab)"
           active-class="mc-tabs__element--selected"
         >
           <span class="mc-tabs__text">{{ tab.text }}</span>
@@ -35,9 +35,14 @@
           class="mc-tabs__element"
           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)
+            )
+          "
         >
           <span class="mc-tabs__text">{{ tab.text }}</span>
         </component>
@@ -89,40 +94,41 @@ 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-divider': !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])
+        );
+      }
     },
   },
 
@@ -132,16 +138,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__element');
+            this.manageTabs(firstTab);
           }
         }
       }
@@ -149,20 +156,34 @@ export default {
   },
 
   methods: {
-    setLinkClass: function (tab) {
-      return {
-        'mc-tabs__element--selected': tab.active,
-        'mc-tabs__element--disabled': tab.disabled,
-      };
+    setActiveClass: function (tab) {
+      const tabClasses = [];
+
+      if (tab.active) {
+        tabClasses.push('mc-tabs__element--selected');
+      }
+
+      if (tab.disabled) {
+        tabClasses.push('mc-tabs__element--disabled');
+      }
+
+      return tabClasses;
     },
-    setTabState(tab) {
+    manageTabs: function (el, e, tab) {
+      if (tab && tab.disabled) {
+        return;
+      }
+      if (e) {
+        this.$emit('tab-clicked', e.currentTarget, tab);
+      }
+
       this.tablist.querySelectorAll('.mc-tabs__element').forEach((el) => {
         el.classList.remove('mc-tabs__element--selected');
         el.setAttribute('aria-selected', 'false');
       });
 
-      tab.classList.add('mc-tabs__element--selected');
-      tab.setAttribute('aria-selected', 'true');
+      el.classList.add('mc-tabs__element--selected');
+      el.setAttribute('aria-selected', 'true');
     },
     getTabFromIndex: function (index) {
       if (
@@ -173,22 +194,11 @@ export default {
         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>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.tabs';
+@import 'settings-tools/all-settings';
+@import 'components/c.tabs';
 </style>

package/src/components/textarea/MTextArea.vue

@@ -7,6 +7,7 @@
     ]"
     :aria-invalid="isInvalid"
     :value="value"
+    spellcheck="false"
     v-on="inputListeners"
   />
 </template>

package/src/components/textinput/MTextInputField.vue

@@ -6,6 +6,7 @@
     :class="setClasses"
     :aria-invalid="isInvalid"
     :value="value"
+    spellcheck="false"
     v-on="inputListeners"
   />
 </template>