vue-tel-input 5.5.0 → 5.6.3

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-<img width="100px" alt="In-action GIF" src="https://iamstevendao.github.io/vue-tel-input/hero.png"/>
+<img width="100" alt="vue-tel-input-logo" src="https://iamstevendao.github.io/vue-tel-input/hero.png"/>
 </p>
 
 # vue-tel-input
@@ -9,7 +9,7 @@ International Telephone Input with Vue.
 [![npm](https://img.shields.io/npm/dt/vue-tel-input.svg)](https://www.npmjs.com/package/vue-tel-input) [![stars](https://img.shields.io/github/stars/iamstevendao/vue-tel-input.svg)](https://github.com/iamstevendao/vue-tel-input)
 
 <p align="center">
-<img width="600px" alt="In-action GIF" src="https://thumbs.gfycat.com/EducatedPoliteBluefintuna-size_restricted.gif"/>
+<img width="600" alt="In-action GIF" src="https://thumbs.gfycat.com/EducatedPoliteBluefintuna-size_restricted.gif"/>
 </p>
 
 ## Documentation and Demo

package/dist/css/component.css

@@ -1 +1 @@
-.vue-tel-input{border-radius:3px;display:flex;border:1px solid #bbb;text-align:left}.vue-tel-input.disabled .dropdown,.vue-tel-input.disabled .selection,.vue-tel-input.disabled input{cursor:no-drop}.vue-tel-input:focus-within{box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);border-color:#66afe9}.vti__dropdown{display:flex;flex-direction:column;align-content:center;justify-content:center;position:relative;padding:7px;cursor:pointer}.vti__dropdown.show{max-height:300px;overflow:scroll}.vti__dropdown.open,.vti__dropdown:hover{background-color:#f3f3f3}.vti__selection{font-size:.8em;display:flex;align-items:center}.vti__selection .vti__country-code{color:#666}.vti__flag{margin-right:5px;margin-left:5px}.vti__dropdown-list{z-index:1;padding:0;margin:0;text-align:left;list-style:none;max-height:200px;overflow-y:scroll;position:absolute;left:-1px;background-color:#fff;border:1px solid #ccc;width:390px}.vti__dropdown-list.below{top:33px}.vti__dropdown-list.above{top:auto;bottom:100%}.vti__dropdown-arrow{transform:scaleY(.5);display:inline-block;color:#666}.vti__dropdown-item{cursor:pointer;padding:4px 15px}.vti__dropdown-item.highlighted{background-color:#f3f3f3}.vti__dropdown-item.last-preferred{border-bottom:1px solid #cacaca}.vti__dropdown-item .vti__flag{display:inline-block;margin-right:5px}.vti__input{border:none;border-radius:0 2px 2px 0;width:100%;outline:none;padding-left:7px}
+.vue-tel-input{border-radius:3px;display:flex;border:1px solid #bbb;text-align:left}.vue-tel-input.disabled .dropdown,.vue-tel-input.disabled .selection,.vue-tel-input.disabled input{cursor:no-drop}.vue-tel-input:focus-within{box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);border-color:#66afe9}.vti__dropdown{display:flex;flex-direction:column;align-content:center;justify-content:center;position:relative;padding:7px;cursor:pointer}.vti__dropdown.show{max-height:300px;overflow:scroll}.vti__dropdown.disabled,.vti__dropdown.open{background-color:#f3f3f3}.vti__dropdown.disabled{cursor:no-drop;outline:none}.vti__dropdown:hover{background-color:#f3f3f3}.vti__selection{font-size:.8em;display:flex;align-items:center}.vti__selection .vti__country-code{color:#666}.vti__flag{margin-right:5px;margin-left:5px}.vti__dropdown-list{z-index:1;padding:0;margin:0;text-align:left;list-style:none;max-height:200px;overflow-y:scroll;position:absolute;left:-1px;background-color:#fff;border:1px solid #ccc;width:390px}.vti__dropdown-list.below{top:33px}.vti__dropdown-list.above{top:auto;bottom:100%}.vti__dropdown-arrow{transform:scaleY(.5);display:inline-block;color:#666}.vti__dropdown-item{cursor:pointer;padding:4px 15px}.vti__dropdown-item.highlighted{background-color:#f3f3f3}.vti__dropdown-item.last-preferred{border-bottom:1px solid #cacaca}.vti__dropdown-item .vti__flag{display:inline-block;margin-right:5px}.vti__input{border:none;border-radius:0 2px 2px 0;width:100%;outline:none;padding-left:7px}

package/dist/vue-tel-input.common.js

@@ -5472,6 +5472,12 @@ var allProps = [{
   type: Object,
   description: 'Options for dropdown, see below',
   inDemo: false
+}, {
+  name: 'dropdownOptions.disabled',
+  default: false,
+  type: Boolean,
+  description: 'Disable dropdown',
+  inDemo: false
 }, {
   name: 'dropdownOptions.showDialCodeInList',
   default: true,
@@ -5527,6 +5533,12 @@ var allProps = [{
 //   inDemo: false,
 // },
 {
+  name: 'inputOptions.aria-describedby',
+  default: '',
+  type: String,
+  description: 'Native input <code>aria-describedby</code> attribute',
+  inDemo: false
+}, {
   name: 'inputOptions.id',
   default: '',
   type: String,
@@ -5544,6 +5556,12 @@ var allProps = [{
   type: String,
   description: 'Native input <code>name</code> attribute',
   inDemo: false
+}, {
+  name: 'inputOptions.showDialCode',
+  default: false,
+  type: Boolean,
+  description: 'Show dial code in input',
+  inDemo: false
 }, {
   name: 'inputOptions.placeholder',
   default: 'Enter a phone number',
@@ -5639,12 +5657,10 @@ var defaultOptions = [].concat(allProps).reduce(function (prv, crr) {
 /* harmony default export */ const utils = ({
   options: _objectSpread2({}, defaultOptions)
 });
-;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"18ea2030-vue-loader-template"}!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/vue-tel-input.vue?vue&type=template&id=30b1c1c9&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['vue-tel-input', _vm.styleClasses, { disabled: _vm.disabled }]},[_c('div',{directives:[{name:"click-outside",rawName:"v-click-outside",value:(_vm.clickedOutside),expression:"clickedOutside"}],class:['vti__dropdown', { open: _vm.open }],attrs:{"tabindex":_vm.dropdownOptions.tabindex},on:{"keydown":[_vm.keyboardNav,function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.reset.apply(null, arguments)}],"click":_vm.toggleDropdown}},[_c('span',{staticClass:"vti__selection"},[(_vm.dropdownOptions.showFlags)?_c('div',{class:['vti__flag', _vm.activeCountryCode.toLowerCase()]}):_vm._e(),(_vm.dropdownOptions.showDialCodeInSelection)?_c('span',{staticClass:"vti__country-code"},[_vm._v(" +"+_vm._s(_vm.activeCountry && _vm.activeCountry.dialCode)+" ")]):_vm._e(),_vm._t("arrow-icon",function(){return [_c('span',{staticClass:"vti__dropdown-arrow"},[_vm._v(_vm._s(_vm.open ? "▲" : "▼"))])]},{"open":_vm.open})],2),(_vm.open)?_vm._m(0):_vm._e()]),((_vm.inputOptions.type)==='checkbox')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.phone)?_vm._i(_vm.phone,null)>-1:(_vm.phone)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":_vm.onInput,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}],"change":function($event){var $$a=_vm.phone,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.phone=$$a.concat([$$v]))}else{$$i>-1&&(_vm.phone=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.phone=$$c}}}}):((_vm.inputOptions.type)==='radio')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"type":"radio"},domProps:{"checked":_vm._q(_vm.phone,null)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":_vm.onInput,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}],"change":function($event){_vm.phone=null}}}):_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"type":_vm.inputOptions.type},domProps:{"value":(_vm.phone)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":[function($event){if($event.target.composing){ return; }_vm.phone=$event.target.value},_vm.onInput],"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}]}}),_vm._t("icon-right")],2)}
-var staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{ref:"list",staticClass:"vti__dropdown-list",class:_vm.dropdownOpenDirection},_vm._l((_vm.sortedCountries),function(pb,index){return _c('li',{key:pb.iso2 + (pb.preferred ? '-preferred' : ''),class:['vti__dropdown-item', _vm.getItemClass(index, pb.iso2)],on:{"click":function($event){return _vm.choose(pb)},"mousemove":function($event){_vm.selectedIndex = index}}},[(_vm.dropdownOptions.showFlags)?_c('div',{class:['vti__flag', pb.iso2.toLowerCase()]}):_vm._e(),_c('strong',[_vm._v(_vm._s(pb.name))]),(_vm.dropdownOptions.showDialCodeInList)?_c('span',[_vm._v(" +"+_vm._s(pb.dialCode)+" ")]):_vm._e()])}),0)}]
-
+;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"10391616-vue-loader-template"}!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/vue-tel-input.vue?vue&type=template&id=fbdc7d32&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['vue-tel-input', _vm.styleClasses, { disabled: _vm.disabled }]},[_c('div',{directives:[{name:"click-outside",rawName:"v-click-outside",value:(_vm.clickedOutside),expression:"clickedOutside"}],class:['vti__dropdown', { open: _vm.open, disabled: _vm.dropdownOptions.disabled }],attrs:{"tabindex":_vm.dropdownOptions.tabindex},on:{"keydown":[_vm.keyboardNav,function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.reset.apply(null, arguments)}],"click":_vm.toggleDropdown}},[_c('span',{staticClass:"vti__selection"},[(_vm.dropdownOptions.showFlags)?_c('div',{class:['vti__flag', _vm.activeCountryCode.toLowerCase()]}):_vm._e(),(_vm.dropdownOptions.showDialCodeInSelection)?_c('span',{staticClass:"vti__country-code"},[_vm._v(" +"+_vm._s(_vm.activeCountry && _vm.activeCountry.dialCode)+" ")]):_vm._e(),_vm._t("arrow-icon",function(){return [_c('span',{staticClass:"vti__dropdown-arrow"},[_vm._v(_vm._s(_vm.open ? "▲" : "▼"))])]},{"open":_vm.open})],2),(_vm.open)?_c('ul',{ref:"list",staticClass:"vti__dropdown-list",class:_vm.dropdownOpenDirection},_vm._l((_vm.sortedCountries),function(pb,index){return _c('li',{key:pb.iso2 + (pb.preferred ? '-preferred' : ''),class:['vti__dropdown-item', _vm.getItemClass(index, pb.iso2)],on:{"click":function($event){return _vm.choose(pb)},"mousemove":function($event){_vm.selectedIndex = index}}},[(_vm.dropdownOptions.showFlags)?_c('div',{class:['vti__flag', pb.iso2.toLowerCase()]}):_vm._e(),_c('strong',[_vm._v(_vm._s(pb.name))]),(_vm.dropdownOptions.showDialCodeInList)?_c('span',[_vm._v(" +"+_vm._s(pb.dialCode)+" ")]):_vm._e()])}),0):_vm._e()]),((_vm.inputOptions.type)==='checkbox')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"aria-describedby":_vm.inputOptions['aria-describedby'],"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.phone)?_vm._i(_vm.phone,null)>-1:(_vm.phone)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":_vm.onInput,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}],"change":function($event){var $$a=_vm.phone,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.phone=$$a.concat([$$v]))}else{$$i>-1&&(_vm.phone=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.phone=$$c}}}}):((_vm.inputOptions.type)==='radio')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"aria-describedby":_vm.inputOptions['aria-describedby'],"type":"radio"},domProps:{"checked":_vm._q(_vm.phone,null)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":_vm.onInput,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}],"change":function($event){_vm.phone=null}}}):_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"aria-describedby":_vm.inputOptions['aria-describedby'],"type":_vm.inputOptions.type},domProps:{"value":(_vm.phone)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":[function($event){if($event.target.composing){ return; }_vm.phone=$event.target.value},_vm.onInput],"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}]}}),_vm._t("icon-right")],2)}
+var staticRenderFns = []
 
-;// CONCATENATED MODULE: ./src/components/vue-tel-input.vue?vue&type=template&id=30b1c1c9&
 
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js
 
@@ -8747,6 +8763,7 @@ var _excluded = ["metadata"];
 //
 //
 //
+//
 
 
 
@@ -8994,7 +9011,7 @@ function getDefault(key) {
       }
     },
     'phoneObject.countryCode': function phoneObjectCountryCode(value) {
-      this.activeCountryCode = value;
+      this.activeCountryCode = value || '';
     },
     'phoneObject.valid': function phoneObjectValid() {
       this.$emit('validate', this.phoneObject);
@@ -9085,8 +9102,8 @@ function getDefault(key) {
         var _this5$phone;
 
         /**
-           * 1. If the phone included prefix (i.e. +12), try to get the country and set it
-           */
+         * 1. If the phone included prefix (i.e. +12), try to get the country and set it
+         */
         if (((_this5$phone = _this5.phone) === null || _this5$phone === void 0 ? void 0 : _this5$phone[0]) === '+') {
           resolve();
           return;
@@ -9136,8 +9153,8 @@ function getDefault(key) {
           });
         } else {
           /**
-             * 4. Use the first country from preferred list (if available) or all countries list
-             */
+           * 4. Use the first country from preferred list (if available) or all countries list
+           */
           _this5.choose(fallbackCountry);
 
           resolve();
@@ -9202,11 +9219,12 @@ function getDefault(key) {
       if ((_this$inputOptions = this.inputOptions) !== null && _this$inputOptions !== void 0 && _this$inputOptions.showDialCode && parsedCountry) {
         // Reset phone if the showDialCode is set
         this.phone = "+".concat(parsedCountry.dialCode);
+        this.activeCountryCode = parsedCountry.iso2 || '';
         return;
       } // update value, even if international mode is NOT used
 
 
-      this.activeCountryCode = parsedCountry.iso2;
+      this.activeCountryCode = parsedCountry.iso2 || '';
       this.emitInput(this.phone);
     },
     cleanInvalidCharacters: function cleanInvalidCharacters() {
@@ -9272,7 +9290,7 @@ function getDefault(key) {
       this.$refs.input.focus();
     },
     toggleDropdown: function toggleDropdown() {
-      if (this.disabled) {
+      if (this.disabled || this.dropdownOptions.disabled) {
         return;
       }