fix: #446 issues

iamstevendao · Mar 31, 2024 · d7d7223 · d7d7223
1 parent a23eab5
commit d7d7223
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 30 deletions.
diff --git a/docs/.vitepress/theme/components/FormInput.vue b/docs/.vitepress/theme/components/FormInput.vue
@@ -1,16 +1,21 @@
 <template>
   <div class="row">
     <label :for="modelName">{{ label || modelName }}</label>
-    <input v-if="type === 'input'" v-model="model[modelName]" type="text" :id="modelName" />
-    <input
-      v-else-if="type === 'checkbox'"
-      v-model="model[modelName]"
-      type="checkbox"
-      :id="modelName"
-    />
-    <div class="radio-group" v-else-if="type === 'radio'">
+    <input v-if="type === 'input'"
+           v-model="model[modelName]"
+           type="text"
+           :id="modelName" />
+    <input v-else-if="type === 'checkbox'"
+           v-model="model[modelName]"
+           type="checkbox"
+           :id="modelName" />
+    <div class="radio-group"
+         v-else-if="type === 'radio'">
       <div v-for="item in items">
-        <input type="radio" :id="item" :value="item" v-model="model[modelName]" />
+        <input type="radio"
+               :id="item"
+               :value="item"
+               v-model="model[modelName]" />
         <label :for="item">{{ item }}</label>
       </div>
     </div>
@@ -91,7 +96,10 @@ input[type='checkbox'] {
 
 /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 600px) {
-  label, input, select {
+
+  label,
+  input,
+  select {
     width: 100%;
     margin-top: 0;
   }

diff --git a/docs/.vitepress/theme/components/Home.vue b/docs/.vitepress/theme/components/Home.vue
@@ -34,7 +34,7 @@
     </section>
 
     <section class="options vp-doc">
-      <a 
+      <a
         href="https://github.com/iamstevendao/vue-tel-input/graphs/contributors"
         @click.prevent="showOptions = !showOptions"
       >
@@ -183,7 +183,7 @@ export default {
   text-align: center;
 }
 
-.home .hero > img {
+.home .hero>img {
   max-width: 100%;
   max-height: 100px;
   display: block;
@@ -207,6 +207,7 @@ export default {
 .home .vti__dropdown-list {
   background-color: var(--vp-c-bg);
 }
+
 .home .vti__dropdown-list .vti__dropdown-item.highlighted {
   background-color: var(--vp-c-bg-elv-up);
 }

diff --git a/src/assets/component.css b/src/assets/component.css
@@ -4,15 +4,18 @@
   border: 1px solid #bbb;
   text-align: left;
 }
+
 .vue-tel-input.disabled .selection,
 .vue-tel-input.disabled .dropdown,
 .vue-tel-input.disabled input {
   cursor: no-drop;
 }
+
 .vue-tel-input:focus-within {
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
   border-color: #66afe9;
 }
+
 .vti__dropdown {
   display: flex;
   flex-direction: column;
@@ -22,33 +25,41 @@
   padding: 7px;
   cursor: pointer;
 }
+
 .vti__dropdown.show {
   max-height: 300px;
   overflow: scroll;
 }
+
 .vti__dropdown.open {
   background-color: #f3f3f3;
 }
+
 .vti__dropdown.disabled {
   cursor: no-drop;
   outline: none;
   background-color: #f3f3f3;
 }
+
 .vti__dropdown:hover {
   background-color: #f3f3f3;
 }
+
 .vti__selection {
   font-size: 0.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;
@@ -63,39 +74,48 @@
   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(0.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%;

diff --git a/src/components/vue-tel-input.vue b/src/components/vue-tel-input.vue
@@ -1,5 +1,6 @@
 <template>
-  <div ref="refRoot" :class="['vue-tel-input', styleClasses, { disabled }]">
+  <div ref="refRoot"
+       :class="['vue-tel-input', styleClasses, { disabled }]">
     <div v-click-outside="clickedOutside"
          aria-label="Country Code Selector"
          aria-haspopup="listbox"
@@ -17,28 +18,25 @@
             v-if="dropdownOptions.showFlags"
             :class="['vti__flag', toLowerCase(data.activeCountryCode)]"
           ></span>
-          <span v-if="dropdownOptions.showDialCodeInSelection" class="vti__country-code">
+      <span v-if="dropdownOptions.showDialCodeInSelection" class="vti__country-code">
             +{{ activeCountry && activeCountry.dialCode }}
           </span>
-        <slot name="arrow-icon"
+      <slot name="arrow-icon"
             :open="data.open">
-          <span class="vti__dropdown-arrow">{{ data.open ? "▲" : "▼" }}</span>
-        </slot>
+        <span class="vti__dropdown-arrow">{{ data.open ? "▲" : "▼" }}</span>
+      </slot>
       </span>
       <ul v-if="data.open"
           ref="refList"
-          class="vti__dropdown-list"
-          :class="data.dropdownOpenDirection"
+          :class="['vti__dropdown-list', data.dropdownOpenDirection]"
           role="listbox">
-        <input
-            v-if="dropdownOptions.showSearchBox"
-            class="vti__input vti__search_box"
-            aria-label="Search by country name or country code"
-            :placeholder="sortedCountries.length ? sortedCountries[0].name : ''"
-            type="text"
-            v-model="data.searchQuery"
-            @click.stop
-        />
+        <input v-if="dropdownOptions.showSearchBox"
+               :class="['vti__input', 'vti__search_box']"
+               aria-label="Search by country name or country code"
+               :placeholder="sortedCountries.length ? sortedCountries[0].name : ''"
+               type="text"
+               v-model="data.searchQuery"
+               @click.stop />
         <li v-for="(pb, index) in sortedCountries"
             role="option"
             :class="['vti__dropdown-item', getItemClass(index, pb.iso2)]"
@@ -61,7 +59,7 @@
            :type="inputOptions.type"
            :autocomplete="inputOptions.autocomplete"
            :autofocus="inputOptions.autofocus"
-           :class="['vti__input, vti__phone', inputOptions.styleClasses]"
+           :class="['vti__input', 'vti__phone', inputOptions.styleClasses]"
            :disabled="disabled"
            :id="inputOptions.id"
            :maxlength="inputOptions.maxlength"
@@ -83,7 +81,7 @@
 
 <script setup lang="ts">
   import type { PropType } from 'vue';
-  import type { CountryCode, NumberFormat, PhoneNumber } from 'libphonenumber-js';
+  import type { CountryCode, NumberFormat } from 'libphonenumber-js';
   import type { CountryObject, DropdownOptions, InputOptions, PhoneMeta } from '../types';
 
   import { parsePhoneNumberFromString } from 'libphonenumber-js';
@@ -298,6 +296,7 @@
       countryCode: result?.country,
       formatted: data.phone,
       valid: result?.isValid(),
+      nationalNumber: result?.nationalNumber,
     }
 
     if (meta.valid) {

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -21,6 +21,7 @@ export type PhoneMeta = {
   countryCode: PhoneNumber['country'],
   valid: boolean,
   formatted: string
+  nationalNumber: string
 };
 
 export interface DropdownOptions {