From 631287b701d78df80558b1a78daf48dc529faada Mon Sep 17 00:00:00 2001
From: Wang Xiao <84308681+waveo-wangxiao@users.noreply.github.com>
Date: Mon, 8 Apr 2024 20:12:20 +0800
Subject: [PATCH] feat: Enable search icon & search placeholder, add "possible"
 in phoneObject (update for v9.0.0) (#454)

---
 src/components/vue-tel-input.vue | 18 +++++++++++-------
 src/types/index.ts               |  4 +++-
 src/utils.ts                     |  7 +++++++
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/vue-tel-input.vue b/src/components/vue-tel-input.vue
index 1cae3909..6d716159 100644
--- a/src/components/vue-tel-input.vue
+++ b/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;
     }
 
diff --git a/src/types/index.ts b/src/types/index.ts
index ab8b6cc5..1fa44fb1 100644
--- a/src/types/index.ts
+++ b/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
 }
 
diff --git a/src/utils.ts b/src/utils.ts
index 1108e20f..cfe144a4 100644
--- a/src/utils.ts
+++ b/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,