feat: Enable search icon & search placeholder, add "possible" in phon…

…eObject (update for v9.0.0) (#454)

src/components/vue-tel-input.vue

@@ -30,13 +30,15 @@
           ref="refList"
           :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 />
+        <div v-if="dropdownOptions.showSearchBox" class="vti__search_box_container">
+            <slot name="search-icon"></slot>
+            <input :class="['vti__input', 'vti__search_box']"
+                  aria-label="Search by country name or country code"
+                  :placeholder="dropdownOptions.searchBoxPlaceholder || (sortedCountries.length ? sortedCountries[0].name : '')"
+                  type="text"
+                  v-model="data.searchQuery"
+                  @click.stop />
+          </div>
         <li v-for="(pb, index) in sortedCountries"
             role="option"
             :class="['vti__dropdown-item', getItemClass(index, pb.iso2)]"
@@ -296,6 +298,7 @@
       countryCode: result?.country,
       formatted: data.phone,
       valid: result?.isValid(),
+      possible: result?.isPossible?.(),
       nationalNumber: result?.nationalNumber,
     }
 
@@ -307,6 +310,7 @@
       && (props.ignoredCountries.length || props.onlyCountries.length)
       && !findCountry(result.country)) {
         meta.valid = false;
+        meta.possible = false;
         result.country = null;
     }
 

src/types/index.ts

@@ -20,7 +20,8 @@ export type PhoneMeta = {
   country: PhoneNumber['country'],
   countryCode: PhoneNumber['country'],
   valid: boolean,
-  formatted: string
+  possible: boolean,
+  formatted: string,
   nationalNumber: string
 };
 
@@ -30,6 +31,7 @@ export interface DropdownOptions {
   showDialCodeInSelection?: boolean
   showFlags?: boolean
   showSearchBox?: boolean
+  searchBoxPlaceholder?: string
   tabindex?: number
 }
 

src/utils.ts

@@ -115,6 +115,13 @@ export const allProps = [
     description: 'Show country search box',
     inDemo: true,
   },
+  {
+    name: 'dropdownOptions.searchBoxPlaceholder',
+    default: '',
+    type: String,
+    description: 'Placeholder for the search box',
+    inDemo: false,
+  },
   {
     name: 'dropdownOptions.tabindex',
     default: 0,