vue-tel-input 5.6.2 → 5.9.0

package/dist-modern/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.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}
+.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}.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}.vti__search_box{border:1px solid #ccc;width:94%;padding:7px;margin:2px 2px}

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

@@ -309,12 +309,23 @@ 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,
   type: Number,
   description: 'Native dropdown <code>tabindex</code> attribute',
   inDemo: false
+}, {
+  name: 'dropdownOptions.width',
+  default: '390px',
+  type: String,
+  description: 'Specify dropdown width'
 }, {
   name: 'ignoredCountries',
   default: [],
@@ -369,6 +380,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',
@@ -470,8 +487,8 @@ const defaultOptions = [...allProps].reduce((prv, crr) => {
   options: { ...defaultOptions
   }
 });
-;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"a667ccea-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=35e93aac&
-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)}
+;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0279cef7-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=d662fd8a&
+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,style:({ width: _vm.dropdownOptions.width }),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 = []
 
 
@@ -3515,6 +3532,33 @@ function getParents(node, memo) {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -3625,7 +3669,8 @@ function getDefault(key) {
       typeToFindInput: '',
       typeToFindTimer: null,
       dropdownOpenDirection: 'below',
-      parsedPlaceholder: this.inputOptions.placeholder
+      parsedPlaceholder: this.inputOptions.placeholder,
+      searchQuery: ''
     };
   },
 
@@ -3673,7 +3718,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() {
@@ -3916,6 +3967,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
 
@@ -3995,11 +4047,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;
     },
 
@@ -4020,6 +4073,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;
@@ -4036,6 +4090,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;