@mozaic-ds/vue 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
@@ -18,10 +18,10 @@
     "@mozaic-ds/styles": "^1.28.0",
     "@mozaic-ds/web-fonts": "^1.22.0",
     "core-js": "^3.18.3",
-    "libphonenumber-js": "^1.9.37",
+    "libphonenumber-js": "1.9.50",
     "postcss-scss": "^4.0.1",
     "vue": "^2.6.14",
-    "vue-country-flag": "^2.2.0"
+    "vue-country-flag": "2.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",

package/postinstall.js

@@ -1,6 +1,3 @@
 const package = require('./package.json');
 
 console.log(`${package.name} installed`);
-console.log(
-  "MTextInput change coming on the 01/12/2021. All input events will be available and will receive the event object. The blur event won't receive the value anymore."
-);

package/src/components/modal/MModal.vue

@@ -97,17 +97,20 @@ export default {
   },
 
   watch: {
-    open(isOpen) {
-      this.$nextTick(() => {
-        if (isOpen) {
-          this.trapFocus();
-          this.setFocusOnModal();
-          this.setOverflow();
-          this.$emit('modal-opened');
-        } else {
-          this.$emit('modal-closed');
-        }
-      });
+    open: {
+      immediate: true,
+      handler: function (isOpen) {
+        this.$nextTick(() => {
+          if (isOpen) {
+            this.trapFocus();
+            this.setFocusOnModal();
+            this.setOverflow();
+            this.$emit('modal-opened');
+          } else {
+            this.$emit('modal-closed');
+          }
+        });
+      },
     },
   },
 

package/src/components/phonenumber/MPhoneNumber.vue

@@ -358,10 +358,14 @@ export default {
 
 .mc-phone-number {
   span.flag {
+    /* stylelint-disable */
     background-repeat: no-repeat;
-    padding-right: 1rem;
-    transform: scale(0.5, 1) !important;
-    height: 1rem;
+    transform: scale(0.46153846153);
+    // For information:
+    // The value 0.46153846153 is obtained by the calculation 24/52
+    // 24 being the width in pixel desired by the design of the component
+    // 52 being the width in pixel defined by the country-flag component
+    /* stylelint-enable */
   }
 
   &__indicator,

package/src/components/tabs/MTab.vue

@@ -16,6 +16,7 @@
         <component
           :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
           :id="tab.id"
+          ref="tab"
           :href="tab.href ? (!tab.disabled ? tab.href : null) : null"
           :type="!tab.href ? 'button' : null"
           :disabled="!tab.href && tab.disabled ? true : null"