vue-tel-input 5.6.1 → 5.8.0

package/dist-modern/vue-tel-input.umd.js

@@ -319,6 +319,12 @@ const allProps = [{
   type: Boolean,
   description: 'Show flags in the dropdown selection and list',
   inDemo: true
+}, {
+  name: 'dropdownOptions.showSearchBox',
+  default: false,
+  type: Boolean,
+  description: 'Show country search box',
+  inDemo: true
 }, {
   name: 'dropdownOptions.tabindex',
   default: 0,
@@ -379,6 +385,12 @@ const 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',
@@ -480,13 +492,11 @@ const defaultOptions = [...allProps].reduce((prv, crr) => {
   options: { ...defaultOptions
   }
 });
-;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7e2ed81f-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=13c114b8&
-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)?_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,"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 = [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":"4e66b896-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=5363803c&
+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:{"aria-label":"Country Code Selector","aria-haspopup":"listbox","aria-expanded":_vm.open,"role":"button","tabindex":_vm.dropdownOptions.tabindex},on:{"keydown":[_vm.keyboardNav,function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.toggleDropdown.apply(null, arguments)},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)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.reset.apply(null, arguments)}],"click":_vm.toggleDropdown}},[_c('span',{staticClass:"vti__selection"},[(_vm.dropdownOptions.showFlags)?_c('span',{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,attrs:{"role":"listbox"}},[(_vm.dropdownOptions.showSearchBox)?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.searchQuery),expression:"searchQuery"}],staticClass:"vti__input vti__search_box",attrs:{"aria-label":"Search by country name or country code","placeholder":_vm.sortedCountries[0].name,"type":"text"},domProps:{"value":(_vm.searchQuery)},on:{"input":function($event){if($event.target.composing){ return; }_vm.searchQuery=$event.target.value}}}):_vm._e(),_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)],attrs:{"role":"option","tabindex":"-1","aria-selected":_vm.activeCountryCode === pb.iso2 && !pb.preferred},on:{"click":function($event){return _vm.choose(pb)},"mousemove":function($event){_vm.selectedIndex = index}}},[(_vm.dropdownOptions.showFlags)?_c('span',{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()])})],2):_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=13c114b8&
-
 ;// CONCATENATED MODULE: ./node_modules/libphonenumber-js/metadata.min.json.js
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.
@@ -3527,6 +3537,32 @@ function getParents(node, memo) {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -3637,7 +3673,8 @@ function getDefault(key) {
       typeToFindInput: '',
       typeToFindTimer: null,
       dropdownOpenDirection: 'below',
-      parsedPlaceholder: this.inputOptions.placeholder
+      parsedPlaceholder: this.inputOptions.placeholder,
+      searchQuery: ''
     };
   },
 
@@ -3685,7 +3722,13 @@ function getDefault(key) {
       const preferredCountries = this.getCountries(this.preferredCountries).map(country => ({ ...country,
         preferred: true
       }));
-      return [...preferredCountries, ...this.filteredCountries];
+      const countriesList = [...preferredCountries, ...this.filteredCountries];
+
+      if (!this.dropdownOptions.showSearchBox) {
+        return countriesList;
+      }
+
+      return countriesList.filter(c => new RegExp(this.searchQuery, 'i').test(c.name) || new RegExp(this.searchQuery, 'i').test(c.iso2) || new RegExp(this.searchQuery, 'i').test(c.dialCode));
     },
 
     phoneObject() {
@@ -3928,6 +3971,7 @@ function getDefault(key) {
       if (this.inputOptions?.showDialCode && parsedCountry) {
         // Reset phone if the showDialCode is set
         this.phone = `+${parsedCountry.dialCode}`;
+        this.activeCountryCode = parsedCountry.iso2 || '';
         return;
       } // update value, even if international mode is NOT used
 
@@ -4007,11 +4051,12 @@ function getDefault(key) {
       this.$refs.input.focus();
     },
 
-    toggleDropdown() {
-      if (this.disabled || this.dropdownOptions.disabled) {
+    toggleDropdown(e) {
+      if (this.disabled || this.dropdownOptions.disabled || e?.path?.[0]?.type === 'text') {
         return;
       }
 
+      this.searchQuery = '';
       this.open = !this.open;
     },
 
@@ -4032,6 +4077,7 @@ function getDefault(key) {
         }
 
         const selEle = this.$refs.list.children[this.selectedIndex];
+        selEle.focus();
 
         if (selEle.offsetTop + selEle.clientHeight > this.$refs.list.scrollTop + this.$refs.list.clientHeight) {
           this.$refs.list.scrollTop = selEle.offsetTop - this.$refs.list.clientHeight + selEle.clientHeight;
@@ -4048,6 +4094,7 @@ function getDefault(key) {
         }
 
         const selEle = this.$refs.list.children[this.selectedIndex];
+        selEle.focus();
 
         if (selEle.offsetTop < this.$refs.list.scrollTop) {
           this.$refs.list.scrollTop = selEle.offsetTop;