From dfb5f07b540ddda74e28887f5efa17fc1744b0c4 Mon Sep 17 00:00:00 2001
From: GU Yiling <justice360@gmail.com>
Date: Sat, 26 Oct 2024 11:37:09 +0800
Subject: [PATCH] feat(kselect): add `before` slot (#2481)

---
 docs/components/select.md          | 20 ++++++++++++++++----
 sandbox/pages/SandboxSelect.vue    |  9 +++++++++
 src/components/KSelect/KSelect.vue |  6 ++++++
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/docs/components/select.md b/docs/components/select.md
index 62da931c1b..db16a0b651 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -597,7 +597,7 @@ A slot alternative for [`dropdownFooterText` prop](#dropdownfootertext).
 
 ### loading
 
-Content to be displayed when [`loading` prop](#loading-1) is `true`. Note that this prop only applies when `enableFiltering` is `true`.
+Content to be displayed when [`loading` prop](#loading-1) is `true`. Note that this slot only applies when `enableFiltering` is `true`.
 
 <ClientOnly>
   <KToggle toggled v-slot="{ isToggled, toggle }">
@@ -642,7 +642,7 @@ Slot to display custom content when items is empty or no items match filter quer
 
 ### label-tooltip
 
-Use this prop to pass any custom content to label tooltip.
+Use this slot to pass any custom content to label tooltip.
 
 <ClientOnly>
   <KSelect label="Label" :items="selectItems">
@@ -656,6 +656,18 @@ Use this prop to pass any custom content to label tooltip.
 </KSelect>
 ```
 
+### before
+
+Use this slot for inserting icons before the input field.
+
+<ClientOnly>
+  <KSelect :items="selectItems">
+    <template #before>
+      <SearchIcon />
+    </template>
+  </KSelect>
+</ClientOnly>
+
 ## Events
 
 ### selected
@@ -684,7 +696,7 @@ Event payload is removed [item](#items).
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { KongIcon } from '@kong/icons'
+import { KongIcon, SearchIcon } from '@kong/icons'
 
 const selectItems: SelectItem[] = [{
   label: 'Service A',
@@ -774,4 +786,4 @@ const vModel = ref<string>('f')
     font-size: $kui-font-size-20;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/sandbox/pages/SandboxSelect.vue b/sandbox/pages/SandboxSelect.vue
index f9659abee0..37e07c2627 100644
--- a/sandbox/pages/SandboxSelect.vue
+++ b/sandbox/pages/SandboxSelect.vue
@@ -183,6 +183,15 @@
           </template>
         </KSelect>
       </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="before"
+      >
+        <KSelect :items="selectItems">
+          <template #before>
+            <KongIcon />
+          </template>
+        </KSelect>
+      </SandboxSectionComponent>
       <SandboxSectionComponent title="itemTemplate">
         <KSelect
           :items="selectItems"
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index a526ce00c9..f7f820dcd0 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -61,6 +61,12 @@
             @keyup.enter.stop
             @update:model-value="onQueryChange"
           >
+            <template
+              v-if="slots.before"
+              #before
+            >
+              <slot name="before" />
+            </template>
             <template #after>
               <button
                 v-if="isClearVisible"