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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.23.0-beta.1",
+  "version": "0.23.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,9 +23,9 @@
     "postinstall.js"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "^1.38.0",
-    "@mozaic-ds/icons": "1.40.0",
-    "@mozaic-ds/styles": "^1.39.1",
+    "@mozaic-ds/css-dev-tools": "1.38.0",
+    "@mozaic-ds/icons": "1.41.0",
+    "@mozaic-ds/styles": "1.41.0",
     "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "1.9.50",

package/src/components/autocomplete/MAutocomplete.vue

@@ -7,7 +7,7 @@
     :style="tagStyle"
   >
     <m-tag
-      v-if="multiple && tagValue.length > 1"
+      v-if="multiple && tagValue.length > 0"
       type="removable"
       :label="tagValue.length.toString() + ' ' + tagLabel"
       class="mc-autocomplete__tag"
@@ -128,8 +128,6 @@ export default {
   data() {
     return {
       itemListForDropdown: this.items,
-      selected: this.items,
-      itemDisplayed: '',
       isOpen: this.open,
       tagWidth: '0px',
       maxWidth: '17.875rem',
@@ -151,17 +149,20 @@ export default {
 
   watch: {
     listboxValue: function (newValue) {
+      const textToDisplay = [];
       const valueExpr = this.dataValueExpr;
       const textExpr = this.dataTextExpr;
 
-      if (newValue.length === 1) {
-        const valueToDisplay = this.items.find(
-          (item) => item[valueExpr] == newValue
+      this.tagValue = newValue;
+
+      if (newValue.length) {
+        const selectedItems = this.items.filter((item) =>
+          newValue.includes(item[valueExpr])
         );
-        this.inputValue = valueToDisplay[textExpr];
-      } else {
-        this.inputValue = '';
-        this.tagValue = newValue;
+
+        selectedItems.forEach((item) => textToDisplay.push(item[textExpr]));
+
+        this.inputValue = textToDisplay.join(', ');
       }
     },
 
@@ -196,6 +197,7 @@ export default {
 
     clearAutocomplete() {
       this.listboxValue = [];
+      this.inputValue = '';
       this.onChange();
       this.$emit('clear');
     },
@@ -219,6 +221,10 @@ export default {
 
     onChange() {
       this.$emit('change', this.listboxValue);
+
+      if (!this.multiple) {
+        this.onClickOutside();
+      }
     },
   },
 };
@@ -231,9 +237,20 @@ export default {
 
 .mc-autocomplete {
   max-width: var(--max-width);
+
+  &__tag {
+    position: absolute;
+    top: 0;
+    -webkit-transform: translateY(50%);
+    -ms-transform: translateY(50%);
+    transform: translateY(50%);
+  }
 }
 
 .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/icon/MIcon.vue

@@ -25,6 +25,7 @@ export default {
       viewbox: null,
       size: null,
       paths: null,
+      type: null,
     };
   },
 
@@ -79,8 +80,17 @@ export default {
         this.viewbox = selectedIcon.viewBox;
         this.size = selectedIcon.size;
         this.paths = selectedIcon.paths;
+        this.type = selectedIcon.type;
       });
     },
+    setSizeFromViewbox(viewbox) {
+      const viewboxSizes = viewbox.split(' ').filter((size) => size > 0);
+
+      return {
+        width: `${viewboxSizes[0]}px`,
+        height: `${viewboxSizes[1]}px`,
+      };
+    },
   },
 
   render: function (createElement) {
@@ -88,8 +98,14 @@ export default {
     const svgAttrs = {
       id: `MIcon-${this.name}-${this.id}`,
       viewBox: this.viewbox,
-      height: this.size,
-      width: this.size,
+      height:
+        this.type !== 'logotypes'
+          ? this.size
+          : this.setSizeFromViewbox(this.viewbox).height,
+      width:
+        this.type !== 'logotypes'
+          ? this.size
+          : this.setSizeFromViewbox(this.viewbox).width,
       fill: this.color,
       'aria-hidden': 'true',
     };

package/src/components/phonenumber/MPhoneNumber.vue

@@ -146,7 +146,7 @@ export default {
   }),
   computed: {
     hasValue() {
-      return this.phoneNumber !== '';
+      return this.value !== '';
     },
     placeholder() {
       return getExampleNumber(
@@ -162,6 +162,9 @@ export default {
   },
   created() {
     this.init();
+    if (!this.hasValue) {
+      this.selectedCountry = this.countries[0];
+    }
   },
   methods: {
     init() {
@@ -185,7 +188,6 @@ export default {
               : this.selectedCountry;
         }
       } else {
-        this.selectedCountry = this.countries[0];
         this.phoneNumber = '';
       }
     },

package/src/components/tabs/MTab.vue

@@ -18,6 +18,8 @@
           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 }}
@@ -162,15 +164,6 @@ export default {
       tab.classList.add('mc-tabs__link--selected');
       tab.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 &&