vue-tel-input 5.6.3 → 5.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +0 -0
- package/README.md +2 -2
- package/dist/css/component.css +1 -1
- package/dist/vue-tel-input.common.js +94 -37
- package/dist/vue-tel-input.common.js.map +1 -1
- package/dist/vue-tel-input.css +1 -1
- package/dist/vue-tel-input.umd.js +94 -37
- package/dist/vue-tel-input.umd.js.map +1 -1
- package/dist/vue-tel-input.umd.min.js +1 -1
- package/dist/vue-tel-input.umd.min.js.map +1 -1
- package/dist-modern/css/component.css +1 -1
- package/dist-modern/vue-tel-input.common.js +56 -6
- package/dist-modern/vue-tel-input.common.js.map +1 -1
- package/dist-modern/vue-tel-input.css +1 -1
- package/dist-modern/vue-tel-input.umd.js +56 -6
- package/dist-modern/vue-tel-input.umd.js.map +1 -1
- package/dist-modern/vue-tel-input.umd.min.js +1 -1
- package/dist-modern/vue-tel-input.umd.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +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
|
|
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-wrapper{display:inline-block;width:30px;text-align:center}.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}
|
|
@@ -309,12 +309,23 @@ const allProps = [{
|
|
|
309
309
|
type: Boolean,
|
|
310
310
|
description: 'Show flags in the dropdown selection and list',
|
|
311
311
|
inDemo: true
|
|
312
|
+
}, {
|
|
313
|
+
name: 'dropdownOptions.showSearchBox',
|
|
314
|
+
default: false,
|
|
315
|
+
type: Boolean,
|
|
316
|
+
description: 'Show country search box',
|
|
317
|
+
inDemo: true
|
|
312
318
|
}, {
|
|
313
319
|
name: 'dropdownOptions.tabindex',
|
|
314
320
|
default: 0,
|
|
315
321
|
type: Number,
|
|
316
322
|
description: 'Native dropdown <code>tabindex</code> attribute',
|
|
317
323
|
inDemo: false
|
|
324
|
+
}, {
|
|
325
|
+
name: 'dropdownOptions.width',
|
|
326
|
+
default: '390px',
|
|
327
|
+
type: String,
|
|
328
|
+
description: 'Specify dropdown width'
|
|
318
329
|
}, {
|
|
319
330
|
name: 'ignoredCountries',
|
|
320
331
|
default: [],
|
|
@@ -476,8 +487,8 @@ const defaultOptions = [...allProps].reduce((prv, crr) => {
|
|
|
476
487
|
options: { ...defaultOptions
|
|
477
488
|
}
|
|
478
489
|
});
|
|
479
|
-
;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"
|
|
480
|
-
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('
|
|
490
|
+
;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1dc3e612-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=0901b80c&
|
|
491
|
+
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}}},[_c('div',{staticClass:"vti__flag-wrapper"},[(_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)}
|
|
481
492
|
var staticRenderFns = []
|
|
482
493
|
|
|
483
494
|
|
|
@@ -3521,6 +3532,35 @@ function getParents(node, memo) {
|
|
|
3521
3532
|
//
|
|
3522
3533
|
//
|
|
3523
3534
|
//
|
|
3535
|
+
//
|
|
3536
|
+
//
|
|
3537
|
+
//
|
|
3538
|
+
//
|
|
3539
|
+
//
|
|
3540
|
+
//
|
|
3541
|
+
//
|
|
3542
|
+
//
|
|
3543
|
+
//
|
|
3544
|
+
//
|
|
3545
|
+
//
|
|
3546
|
+
//
|
|
3547
|
+
//
|
|
3548
|
+
//
|
|
3549
|
+
//
|
|
3550
|
+
//
|
|
3551
|
+
//
|
|
3552
|
+
//
|
|
3553
|
+
//
|
|
3554
|
+
//
|
|
3555
|
+
//
|
|
3556
|
+
//
|
|
3557
|
+
//
|
|
3558
|
+
//
|
|
3559
|
+
//
|
|
3560
|
+
//
|
|
3561
|
+
//
|
|
3562
|
+
//
|
|
3563
|
+
//
|
|
3524
3564
|
|
|
3525
3565
|
|
|
3526
3566
|
|
|
@@ -3631,7 +3671,8 @@ function getDefault(key) {
|
|
|
3631
3671
|
typeToFindInput: '',
|
|
3632
3672
|
typeToFindTimer: null,
|
|
3633
3673
|
dropdownOpenDirection: 'below',
|
|
3634
|
-
parsedPlaceholder: this.inputOptions.placeholder
|
|
3674
|
+
parsedPlaceholder: this.inputOptions.placeholder,
|
|
3675
|
+
searchQuery: ''
|
|
3635
3676
|
};
|
|
3636
3677
|
},
|
|
3637
3678
|
|
|
@@ -3679,7 +3720,13 @@ function getDefault(key) {
|
|
|
3679
3720
|
const preferredCountries = this.getCountries(this.preferredCountries).map(country => ({ ...country,
|
|
3680
3721
|
preferred: true
|
|
3681
3722
|
}));
|
|
3682
|
-
|
|
3723
|
+
const countriesList = [...preferredCountries, ...this.filteredCountries];
|
|
3724
|
+
|
|
3725
|
+
if (!this.dropdownOptions.showSearchBox) {
|
|
3726
|
+
return countriesList;
|
|
3727
|
+
}
|
|
3728
|
+
|
|
3729
|
+
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));
|
|
3683
3730
|
},
|
|
3684
3731
|
|
|
3685
3732
|
phoneObject() {
|
|
@@ -4002,11 +4049,12 @@ function getDefault(key) {
|
|
|
4002
4049
|
this.$refs.input.focus();
|
|
4003
4050
|
},
|
|
4004
4051
|
|
|
4005
|
-
toggleDropdown() {
|
|
4006
|
-
if (this.disabled || this.dropdownOptions.disabled) {
|
|
4052
|
+
toggleDropdown(e) {
|
|
4053
|
+
if (this.disabled || this.dropdownOptions.disabled || e?.path?.[0]?.type === 'text') {
|
|
4007
4054
|
return;
|
|
4008
4055
|
}
|
|
4009
4056
|
|
|
4057
|
+
this.searchQuery = '';
|
|
4010
4058
|
this.open = !this.open;
|
|
4011
4059
|
},
|
|
4012
4060
|
|
|
@@ -4027,6 +4075,7 @@ function getDefault(key) {
|
|
|
4027
4075
|
}
|
|
4028
4076
|
|
|
4029
4077
|
const selEle = this.$refs.list.children[this.selectedIndex];
|
|
4078
|
+
selEle.focus();
|
|
4030
4079
|
|
|
4031
4080
|
if (selEle.offsetTop + selEle.clientHeight > this.$refs.list.scrollTop + this.$refs.list.clientHeight) {
|
|
4032
4081
|
this.$refs.list.scrollTop = selEle.offsetTop - this.$refs.list.clientHeight + selEle.clientHeight;
|
|
@@ -4043,6 +4092,7 @@ function getDefault(key) {
|
|
|
4043
4092
|
}
|
|
4044
4093
|
|
|
4045
4094
|
const selEle = this.$refs.list.children[this.selectedIndex];
|
|
4095
|
+
selEle.focus();
|
|
4046
4096
|
|
|
4047
4097
|
if (selEle.offsetTop < this.$refs.list.scrollTop) {
|
|
4048
4098
|
this.$refs.list.scrollTop = selEle.offsetTop;
|