feat(kselect): add before slot (#2481)

Kong · Oct 26, 2024 · dfb5f07 · dfb5f07
1 parent 2e953ba
commit dfb5f07
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git 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>
+</style>
diff --git 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
@@ -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"