vue-tel-input 6.0.0-beta.2 → 6.0.0-beta.6

package/dist/css/component.css

@@ -29,6 +29,11 @@
 .vti__dropdown.open {
   background-color: #f3f3f3;
 }
+.vti__dropdown.disabled {
+  cursor: no-drop;
+  outline: none;
+  background-color: #f3f3f3;
+}
 .vti__dropdown:hover {
   background-color: #f3f3f3;
 }

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

@@ -346,6 +346,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,
@@ -401,6 +407,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,
@@ -418,6 +430,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',
@@ -5142,7 +5160,7 @@ var es_function_name = __webpack_require__("b0c0");
 // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/vue-tel-input.vue?vue&type=template&id=7c6f2bec
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/vue-tel-input.vue?vue&type=template&id=e63ac01c
 
 
 var _hoisted_1 = {
@@ -5166,19 +5184,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: $props.disabled
     }]
   }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
+    "aria-label": "Country Code Selector",
+    "aria-haspopup": "listbox",
+    "aria-expanded": $data.open,
+    role: "button",
     class: ['vti__dropdown', {
-      open: $data.open
+      open: $data.open,
+      disabled: $props.dropdownOptions.disabled
     }],
     tabindex: $props.dropdownOptions.tabindex,
-    onKeydown: [_cache[2] || (_cache[2] = function () {
+    onKeydown: [_cache[1] || (_cache[1] = function () {
       return $options.keyboardNav && $options.keyboardNav.apply($options, arguments);
-    }), _cache[4] || (_cache[4] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withKeys"])(function () {
+    }), _cache[3] || (_cache[3] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withKeys"])(function () {
+      return $options.toggleDropdown && $options.toggleDropdown.apply($options, arguments);
+    }, ["space"])), _cache[4] || (_cache[4] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withKeys"])(function () {
+      return $options.reset && $options.reset.apply($options, arguments);
+    }, ["esc"])), _cache[5] || (_cache[5] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withKeys"])(function () {
       return $options.reset && $options.reset.apply($options, arguments);
-    }, ["esc"]))],
-    onClick: _cache[3] || (_cache[3] = function () {
+    }, ["tab"]))],
+    onClick: _cache[2] || (_cache[2] = function () {
       return $options.toggleDropdown && $options.toggleDropdown.apply($options, arguments);
     })
-  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", _hoisted_1, [$props.dropdownOptions.showFlags ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", {
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", _hoisted_1, [$props.dropdownOptions.showFlags ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", {
     key: 0,
     class: ['vti__flag', $data.activeCountryCode.toLowerCase()]
   }, null, 2)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), $props.dropdownOptions.showDialCodeInSelection ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", _hoisted_2, " +" + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($options.activeCountry && $options.activeCountry.dialCode), 1)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "arrow-icon", {
@@ -5188,23 +5215,27 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   })]), $data.open ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("ul", {
     key: 0,
     ref: "list",
-    class: ["vti__dropdown-list", $data.dropdownOpenDirection]
-  }, [_cache[1] || (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["setBlockTracking"])(-1), _cache[1] = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])($options.sortedCountries, function (pb, index) {
+    class: ["vti__dropdown-list", $data.dropdownOpenDirection],
+    role: "listbox"
+  }, [(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])($options.sortedCountries, function (pb, index) {
     return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", {
+      role: "option",
       class: ['vti__dropdown-item', $options.getItemClass(index, pb.iso2)],
       key: pb.iso2 + (pb.preferred ? '-preferred' : ''),
+      tabindex: "-1",
       onClick: function onClick($event) {
         return $options.choose(pb);
       },
       onMousemove: function onMousemove($event) {
         return $data.selectedIndex = index;
-      }
-    }, [$props.dropdownOptions.showFlags ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", {
+      },
+      "aria-selected": $data.activeCountryCode === pb.iso2 && !pb.preferred
+    }, [$props.dropdownOptions.showFlags ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", {
       key: 0,
       class: ['vti__flag', pb.iso2.toLowerCase()]
-    }, null, 2)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("strong", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(pb.name), 1), $props.dropdownOptions.showDialCodeInList ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", _hoisted_4, " +" + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(pb.dialCode), 1)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 42, ["onClick", "onMousemove"]);
-  }), 128)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["setBlockTracking"])(1), _cache[1])], 2)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 42, ["tabindex"]), [[_directive_click_outside, $options.clickedOutside]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("input", {
-    "onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
+    }, null, 2)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("strong", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(pb.name), 1), $props.dropdownOptions.showDialCodeInList ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", _hoisted_4, " +" + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(pb.dialCode), 1)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 42, ["onClick", "onMousemove", "aria-selected"]);
+  }), 128))], 2)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 42, ["aria-expanded", "tabindex"]), [[_directive_click_outside, $options.clickedOutside]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("input", {
+    "onUpdate:modelValue": _cache[6] || (_cache[6] = function ($event) {
       return $data.phone = $event;
     }),
     ref: "input",
@@ -5221,23 +5252,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     required: $props.inputOptions.required,
     tabindex: $props.inputOptions.tabindex,
     value: $props.modelValue,
-    onBlur: _cache[6] || (_cache[6] = function () {
+    "aria-describedby": $props.inputOptions['aria-describedby'],
+    onBlur: _cache[7] || (_cache[7] = function () {
       return $options.onBlur && $options.onBlur.apply($options, arguments);
     }),
-    onFocus: _cache[7] || (_cache[7] = function () {
+    onFocus: _cache[8] || (_cache[8] = function () {
       return $options.onFocus && $options.onFocus.apply($options, arguments);
     }),
-    onInput: _cache[8] || (_cache[8] = function () {
+    onInput: _cache[9] || (_cache[9] = function () {
       return $options.onInput && $options.onInput.apply($options, arguments);
     }),
-    onKeyup: [_cache[9] || (_cache[9] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withKeys"])(function () {
+    onKeyup: [_cache[10] || (_cache[10] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withKeys"])(function () {
       return $options.onEnter && $options.onEnter.apply($options, arguments);
-    }, ["enter"])), _cache[10] || (_cache[10] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withKeys"])(function () {
+    }, ["enter"])), _cache[11] || (_cache[11] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withKeys"])(function () {
       return $options.onSpace && $options.onSpace.apply($options, arguments);
     }, ["space"]))]
-  }, null, 42, ["type", "autocomplete", "autofocus", "disabled", "id", "maxlength", "name", "placeholder", "readonly", "required", "tabindex", "value"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vModelDynamic"], $data.phone]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "icon-right")], 2);
+  }, null, 42, ["type", "autocomplete", "autofocus", "disabled", "id", "maxlength", "name", "placeholder", "readonly", "required", "tabindex", "value", "aria-describedby"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vModelDynamic"], $data.phone]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "icon-right")], 2);
 }
-// CONCATENATED MODULE: ./src/components/vue-tel-input.vue?vue&type=template&id=7c6f2bec
+// CONCATENATED MODULE: ./src/components/vue-tel-input.vue?vue&type=template&id=e63ac01c
 
 // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js + 1 modules
 var objectWithoutProperties = __webpack_require__("15fd");
@@ -8584,7 +8616,7 @@ function getDefault(key) {
       }
     },
     'phoneObject.countryCode': function phoneObjectCountryCode(value) {
-      this.activeCountryCode = value;
+      this.activeCountryCode = value || '';
     },
     'phoneObject.valid': function phoneObjectValid() {
       this.$emit('validate', this.phoneObject);
@@ -8675,8 +8707,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;
@@ -8726,8 +8758,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();
@@ -8792,11 +8824,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() {
@@ -8863,7 +8896,7 @@ function getDefault(key) {
       this.$refs.input.focus();
     },
     toggleDropdown: function toggleDropdown() {
-      if (this.disabled) {
+      if (this.disabled || this.dropdownOptions.disabled) {
         return;
       }
 
@@ -8887,6 +8920,7 @@ function getDefault(key) {
         }
 
         var 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;
@@ -8904,6 +8938,8 @@ function getDefault(key) {
 
         var _selEle = this.$refs.list.children[this.selectedIndex];
 
+        _selEle.focus();
+
         if (_selEle.offsetTop < this.$refs.list.scrollTop) {
           this.$refs.list.scrollTop = _selEle.offsetTop;
         }