@mozaic-ds/vue 0.32.0 → 0.32.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {

package/src/components/autocomplete/MAutocomplete.vue

@@ -194,8 +194,8 @@ export default {
     },
     setStyles() {
       return {
-        '--tag-width': this.tagWidth,
-        '--max-width': this.maxWidth,
+        '--autocomplete-tag-width': this.tagWidth,
+        '--autocomplete-width': this.maxWidth,
       };
     },
   },
@@ -349,32 +349,4 @@ export default {
 <style lang="scss">
 @import 'settings-tools/all-settings';
 @import 'components/c.autocomplete';
-
-.mc-autocomplete {
-  max-width: var(--max-width);
-
-  &__tag {
-    position: absolute;
-    top: 0;
-    transform: translateY(50%);
-  }
-
-  &__loader {
-    position: absolute;
-    right: $mu075;
-    top: $mu075;
-    z-index: 10;
-  }
-
-  &__trigger {
-    width: 100%;
-  }
-}
-
-.mc-autocomplete--multi .mc-autocomplete__trigger {
-  overflow: hidden;
-  padding-left: calc(2.9375rem + var(--tag-width));
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 </style>

package/src/components/datatable/MDataTable.vue

@@ -394,7 +394,7 @@ export default {
     source: {
       immediate: true,
       async handler(newValue, oldValue) {
-        if (deepEqual(newValue, oldValue)) {
+        if (deepEqual(newValue, oldValue) && !(newValue instanceof Function)) {
           return;
         }
 
@@ -467,7 +467,7 @@ export default {
   mounted() {
     this.load();
     this.created = true;
-    this.bodyStyleAttr = this.$refs.datatable.attributes.style.value;
+    this.bodyStyleAttr = this.$refs?.datatable?.attributes?.style?.value;
   },
 
   methods: {

package/src/components/listbox/MListBox.vue

@@ -139,8 +139,4 @@ export default {
 @import 'settings-tools/all-settings';
 @import 'components/c.checkbox';
 @import 'components/c.listbox';
-
-.mc-listbox__empty {
-  margin-top: 0;
-}
 </style>

package/src/components/optioncard/MOptionCard.vue

@@ -100,6 +100,8 @@ export default {
 
 <style lang="scss">
 @import 'settings-tools/all-settings';
+@import 'components/c.checkbox';
+@import 'components/c.radio';
 @import 'components/c.option-card';
 
 /* stylelint-disable */

package/src/components/pagination/MPagination.vue

@@ -107,10 +107,6 @@ export default {
         });
       }
 
-      if (this.currentPage > this.length) {
-        this.changePage(this.length);
-      }
-
       return pageOptions;
     },
   },
@@ -136,7 +132,7 @@ export default {
     },
     changePage(newPage) {
       this.$emit('on-update-page', newPage);
-      this.$emit('update:value',newPage);
+      this.$emit('update:value', newPage);
     },
     previousPage(newPage) {
       if (this.hasPreviousPageListener()) {

package/src/components/select/MSelect.vue

@@ -7,7 +7,7 @@
     :value="getSelectValue"
     :disabled="disabled"
     @change="onChange($event.target.value)"
-    v-on="inputListeners"
+    v-on="$listeners"
   >
     <option v-if="placeholder" value="" disabled="disabled">
       -- {{ placeholder }} --
@@ -102,15 +102,6 @@ export default {
 
       return classes;
     },
-    inputListeners: function () {
-      // see => https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
-      var vm = this;
-      return Object.assign({}, this.$listeners, {
-        change: function (event) {
-          vm.$emit('change', event.target.value);
-        },
-      });
-    },
   },
 
   mounted() {

package/src/components/tabs/MTab.vue

@@ -146,7 +146,12 @@ export default {
           const isActive = this.tabs.some((tab) =>
             Object.prototype.hasOwnProperty.call(tab, 'active')
           );
-          if (!isActive) {
+
+          const isRouterLink = this.tabs.some((tab) =>
+            Object.prototype.hasOwnProperty.call(tab, 'router')
+          );
+
+          if (!isActive && !isRouterLink) {
             const firstTab = this.tablist.querySelector('.mc-tabs__element');
             this.manageTabs(firstTab);
           }