vue-tel-input 6.0.0-beta.1 → 6.0.0-beta.5

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=8d4798ea
+// 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=6b666c26
 
 
 var _hoisted_1 = {
@@ -5167,7 +5185,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }]
   }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
     class: ['vti__dropdown', {
-      open: $data.open
+      open: $data.open,
+      disabled: $props.dropdownOptions.disabled
     }],
     tabindex: $props.dropdownOptions.tabindex,
     onKeydown: [_cache[2] || (_cache[2] = function () {
@@ -5221,6 +5240,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     required: $props.inputOptions.required,
     tabindex: $props.inputOptions.tabindex,
     value: $props.modelValue,
+    "aria-describedby": $props.inputOptions['aria-describedby'],
     onBlur: _cache[6] || (_cache[6] = function () {
       return $options.onBlur && $options.onBlur.apply($options, arguments);
     }),
@@ -5235,9 +5255,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, ["enter"])), _cache[10] || (_cache[10] = 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=8d4798ea
+// CONCATENATED MODULE: ./src/components/vue-tel-input.vue?vue&type=template&id=6b666c26
 
 // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js + 1 modules
 var objectWithoutProperties = __webpack_require__("15fd");
@@ -8584,7 +8604,7 @@ function getDefault(key) {
       }
     },
     'phoneObject.countryCode': function phoneObjectCountryCode(value) {
-      this.activeCountryCode = value;
+      this.activeCountryCode = value || '';
     },
     'phoneObject.valid': function phoneObjectValid() {
       this.$emit('validate', this.phoneObject);
@@ -8599,7 +8619,7 @@ function getDefault(key) {
       this.emitInput(value);
       this.$nextTick(function () {
         // In case `v-model` is not set, we need to update the `phone` to be new formatted value
-        if (value && !_this2.value) {
+        if (value && !_this2.modelValue) {
           _this2.phone = value;
         }
       });
@@ -8636,8 +8656,8 @@ function getDefault(key) {
   mounted: function mounted() {
     var _this4 = this;
 
-    if (this.value) {
-      this.phone = this.value.trim();
+    if (this.modelValue) {
+      this.phone = this.modelValue.trim();
     }
 
     this.cleanInvalidCharacters();
@@ -8675,8 +8695,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 +8746,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 +8812,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 +8884,7 @@ function getDefault(key) {
       this.$refs.input.focus();
     },
     toggleDropdown: function toggleDropdown() {
-      if (this.disabled) {
+      if (this.disabled || this.dropdownOptions.disabled) {
         return;
       }