maz-ui 2.3.12 → 2.3.13

package/lib/maz-phone-number-input.js

@@ -2919,15 +2919,11 @@ var render = function () {
               color: _vm.color,
             },
             on: {
-              keydown: function (e) {
-                _vm.lastKeyPressed = e.keyCode
-              },
+              keydown: _vm.onKeydown,
               focus: function ($event) {
                 return _vm.$emit("focus", $event)
               },
-              blur: function ($event) {
-                return _vm.$emit("blur", $event)
-              },
+              blur: _vm.onBlur,
               change: function ($event) {
                 return _vm.$emit("change", $event)
               },
@@ -3042,9 +3038,8 @@ var utils_getResultsFromPhoneNumber = function getResultsFromPhoneNumber(phoneNu
   var parsing = phoneNumber ? Object(external_libphonenumber_js_["parsePhoneNumberFromString"])(phoneNumber, countryCode) : null;
   var results = {
     countryCode: countryCode,
-    isValid: false,
-    phoneNumber: phoneNumber // useful for identifying non-numeric characters being entered.
-
+    phoneNumber: phoneNumber,
+    isValid: false
   };
 
   if (parsing) {
@@ -3417,7 +3412,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
     return {
       results: {},
       countryCode: this.defaultCountryCode,
-      lastKeyPressed: null,
+      cursorPosition: null,
       asYouTypeNumber: this.defaultPhoneNumber
     };
   },
@@ -3604,34 +3599,23 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var _this6 = this;
 
       return _mainvue_type_script_lang_js_asyncToGenerator( /*#__PURE__*/regenerator_default.a.mark(function _callee2() {
-        var asYouTypeNumber, lastKeyPressed, countryCode, value, backSpacePressed, lastCharacOfPhoneNumber, _this6$results, isValid, e164, valueToEmit;
+        var countryCode, value, hasDeletedCharac, _this6$results, isValid, e164, cursorIsAtEnd, shouldUseAsYouType, valueToEmit;
 
         return regenerator_default.a.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                asYouTypeNumber = _this6.asYouTypeNumber, lastKeyPressed = _this6.lastKeyPressed, countryCode = _this6.countryCode, value = _this6.value;
-                backSpacePressed = lastKeyPressed === 8;
-                _context2.next = 4;
+                countryCode = _this6.countryCode, value = _this6.value;
+                _context2.next = 3;
                 return _this6.$nextTick();
 
-              case 4:
-                lastCharacOfPhoneNumber = asYouTypeNumber ? asYouTypeNumber.slice(asYouTypeNumber.length - 1) : false;
-
-                if (backSpacePressed && lastCharacOfPhoneNumber && lastCharacOfPhoneNumber === ')') {
-                  _this6.asYouTypeNumber = asYouTypeNumber.slice(0, -1);
-                }
-
-                _context2.next = 8;
-                return utils_getResultsFromPhoneNumber(phoneNumber, countryCode);
-
-              case 8:
-                _this6.results = _context2.sent;
-                _context2.next = 11;
-                return utils_getAsYouTypeFormat(phoneNumber, countryCode);
-
-              case 11:
-                _this6.asYouTypeNumber = _context2.sent;
+              case 3:
+                hasDeletedCharac = _this6.asYouTypeNumber && phoneNumber && _this6.asYouTypeNumber.length > phoneNumber.length;
+                _this6.results = utils_getResultsFromPhoneNumber(phoneNumber, countryCode);
+                _this6$results = _this6.results, isValid = _this6$results.isValid, e164 = _this6$results.e164;
+                cursorIsAtEnd = _this6.asYouTypeNumber && _this6.cursorPosition ? _this6.cursorPosition + 1 >= _this6.asYouTypeNumber.length : true;
+                shouldUseAsYouType = !hasDeletedCharac && cursorIsAtEnd || isValid;
+                _this6.asYouTypeNumber = shouldUseAsYouType ? utils_getAsYouTypeFormat(phoneNumber, countryCode) : phoneNumber;
 
                 if (!noAutoUpdateCountryCode && _this6.results && _this6.results.countryCode && countryCode !== _this6.results.countryCode) {
                   _this6.setCountryCode(_this6.results.countryCode);
@@ -3641,22 +3625,21 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
                 _this6.$emit('update', _this6.results);
 
-                _this6$results = _this6.results, isValid = _this6$results.isValid, e164 = _this6$results.e164;
                 valueToEmit = isValid ? e164 : _this6.asYouTypeNumber;
 
                 if (!(!valueToEmit && valueToEmit === value)) {
-                  _context2.next = 18;
+                  _context2.next = 14;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 18:
+              case 14:
                 // sent when the user tape
                 // @arg Phone number value formatted in e164 format (international format)
                 _this6.$emit('input', valueToEmit);
 
-              case 19:
+              case 15:
               case "end":
                 return _context2.stop();
             }
@@ -3664,6 +3647,17 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
         }, _callee2);
       }))();
     },
+    onBlur: function onBlur(event) {
+      this.$emit('blur', event);
+
+      if (this.countryCode) {
+        this.asYouTypeNumber = utils_getAsYouTypeFormat(this.asYouTypeNumber, this.countryCode);
+      }
+    },
+    onKeydown: function onKeydown(event) {
+      var target = event.target;
+      this.cursorPosition = target === null || target === void 0 ? void 0 : target.selectionStart;
+    },
     setCountryCode: function setCountryCode(locale, focusPhoneNumberInput) {
       var _this7 = this;
 

package/lib/maz-ui.common.js

@@ -126,7 +126,7 @@ module.exports = require("vue-zoom-img");
 /* 6 */
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"2.3.12\"}");
+module.exports = JSON.parse("{\"a\":\"2.3.13\"}");
 
 /***/ }),
 /* 7 */
@@ -12315,15 +12315,11 @@ var _mainvue_type_template_id_0022c02d_render = function () {
               color: _vm.color,
             },
             on: {
-              keydown: function (e) {
-                _vm.lastKeyPressed = e.keyCode
-              },
+              keydown: _vm.onKeydown,
               focus: function ($event) {
                 return _vm.$emit("focus", $event)
               },
-              blur: function ($event) {
-                return _vm.$emit("blur", $event)
-              },
+              blur: _vm.onBlur,
               change: function ($event) {
                 return _vm.$emit("change", $event)
               },
@@ -12434,9 +12430,8 @@ var utils_getResultsFromPhoneNumber = function getResultsFromPhoneNumber(phoneNu
   var parsing = phoneNumber ? Object(external_libphonenumber_js_["parsePhoneNumberFromString"])(phoneNumber, countryCode) : null;
   var results = {
     countryCode: countryCode,
-    isValid: false,
-    phoneNumber: phoneNumber // useful for identifying non-numeric characters being entered.
-
+    phoneNumber: phoneNumber,
+    isValid: false
   };
 
   if (parsing) {
@@ -13873,7 +13868,7 @@ function MazPhoneNumberInput_mainvue_type_script_lang_js_typeof(obj) { "@babel/h
     return {
       results: {},
       countryCode: this.defaultCountryCode,
-      lastKeyPressed: null,
+      cursorPosition: null,
       asYouTypeNumber: this.defaultPhoneNumber
     };
   },
@@ -14060,34 +14055,23 @@ function MazPhoneNumberInput_mainvue_type_script_lang_js_typeof(obj) { "@babel/h
       var _this6 = this;
 
       return MazPhoneNumberInput_mainvue_type_script_lang_js_asyncToGenerator( /*#__PURE__*/regenerator_default.a.mark(function _callee2() {
-        var asYouTypeNumber, lastKeyPressed, countryCode, value, backSpacePressed, lastCharacOfPhoneNumber, _this6$results, isValid, e164, valueToEmit;
+        var countryCode, value, hasDeletedCharac, _this6$results, isValid, e164, cursorIsAtEnd, shouldUseAsYouType, valueToEmit;
 
         return regenerator_default.a.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                asYouTypeNumber = _this6.asYouTypeNumber, lastKeyPressed = _this6.lastKeyPressed, countryCode = _this6.countryCode, value = _this6.value;
-                backSpacePressed = lastKeyPressed === 8;
-                _context2.next = 4;
+                countryCode = _this6.countryCode, value = _this6.value;
+                _context2.next = 3;
                 return _this6.$nextTick();
 
-              case 4:
-                lastCharacOfPhoneNumber = asYouTypeNumber ? asYouTypeNumber.slice(asYouTypeNumber.length - 1) : false;
-
-                if (backSpacePressed && lastCharacOfPhoneNumber && lastCharacOfPhoneNumber === ')') {
-                  _this6.asYouTypeNumber = asYouTypeNumber.slice(0, -1);
-                }
-
-                _context2.next = 8;
-                return utils_getResultsFromPhoneNumber(phoneNumber, countryCode);
-
-              case 8:
-                _this6.results = _context2.sent;
-                _context2.next = 11;
-                return utils_getAsYouTypeFormat(phoneNumber, countryCode);
-
-              case 11:
-                _this6.asYouTypeNumber = _context2.sent;
+              case 3:
+                hasDeletedCharac = _this6.asYouTypeNumber && phoneNumber && _this6.asYouTypeNumber.length > phoneNumber.length;
+                _this6.results = utils_getResultsFromPhoneNumber(phoneNumber, countryCode);
+                _this6$results = _this6.results, isValid = _this6$results.isValid, e164 = _this6$results.e164;
+                cursorIsAtEnd = _this6.asYouTypeNumber && _this6.cursorPosition ? _this6.cursorPosition + 1 >= _this6.asYouTypeNumber.length : true;
+                shouldUseAsYouType = !hasDeletedCharac && cursorIsAtEnd || isValid;
+                _this6.asYouTypeNumber = shouldUseAsYouType ? utils_getAsYouTypeFormat(phoneNumber, countryCode) : phoneNumber;
 
                 if (!noAutoUpdateCountryCode && _this6.results && _this6.results.countryCode && countryCode !== _this6.results.countryCode) {
                   _this6.setCountryCode(_this6.results.countryCode);
@@ -14097,22 +14081,21 @@ function MazPhoneNumberInput_mainvue_type_script_lang_js_typeof(obj) { "@babel/h
 
                 _this6.$emit('update', _this6.results);
 
-                _this6$results = _this6.results, isValid = _this6$results.isValid, e164 = _this6$results.e164;
                 valueToEmit = isValid ? e164 : _this6.asYouTypeNumber;
 
                 if (!(!valueToEmit && valueToEmit === value)) {
-                  _context2.next = 18;
+                  _context2.next = 14;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 18:
+              case 14:
                 // sent when the user tape
                 // @arg Phone number value formatted in e164 format (international format)
                 _this6.$emit('input', valueToEmit);
 
-              case 19:
+              case 15:
               case "end":
                 return _context2.stop();
             }
@@ -14120,6 +14103,17 @@ function MazPhoneNumberInput_mainvue_type_script_lang_js_typeof(obj) { "@babel/h
         }, _callee2);
       }))();
     },
+    onBlur: function onBlur(event) {
+      this.$emit('blur', event);
+
+      if (this.countryCode) {
+        this.asYouTypeNumber = utils_getAsYouTypeFormat(this.asYouTypeNumber, this.countryCode);
+      }
+    },
+    onKeydown: function onKeydown(event) {
+      var target = event.target;
+      this.cursorPosition = target === null || target === void 0 ? void 0 : target.selectionStart;
+    },
     setCountryCode: function setCountryCode(locale, focusPhoneNumberInput) {
       var _this7 = this;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maz-ui",
-  "version": "2.3.12",
+  "version": "2.3.13",
   "main": "lib/maz-ui.common.js",
   "description": "A stand-alone components library for Vue.Js & Nuxt.Js",
   "author": "Louis Mazel <me@loicmazuel.com>",