Refactor #3832 Refactor #3833 - For Listbox

api-generator/components/listbox.js

@@ -236,35 +236,39 @@ const ListboxEvents = [
 const ListboxSlots = [
     {
         name: 'option',
-        description: "Custom content for the item's option"
+        description: "Custom content for the item's option."
     },
     {
         name: 'optiongroup',
-        description: "Custom content for the item's optiongroup"
+        description: "Custom content for the item's optiongroup."
     },
     {
         name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
     },
     {
         name: 'footer',
-        description: "Custom content for the component's footer"
+        description: "Custom content for the component's footer."
     },
     {
         name: 'emptyfilter',
-        description: 'Custom content when there is no filtered data to display'
+        description: 'Custom content when there is no filtered data to display.'
     },
     {
         name: 'empty',
-        description: 'Custom content when there is no data to display'
+        description: 'Custom content when there is no data to display.'
     },
     {
         name: 'content',
-        description: 'Custom content for the virtual scroller'
+        description: 'Custom content for the virtual scroller.'
     },
     {
         name: 'loader',
-        description: 'Custom content for the virtual scroller loader items'
+        description: 'Custom content for the virtual scroller loader items.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
     }
 ];
 

components/lib/listbox/Listbox.d.ts

@@ -285,6 +285,10 @@ export interface ListboxSlots {
          */
         options: any[];
     }): VNode[];
+    /**
+     * Custom filter icon template.
+     */
+    filtericon(): VNode[];
 }
 
 /**

components/lib/listbox/Listbox.vue

@@ -20,7 +20,10 @@
                     @keydown="onFilterKeyDown"
                     v-bind="filterInputProps"
                 />
-                <span :class="['p-listbox-filter-icon', filterIcon]" />
+
+                <slot name="filtericon">
+                    <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-listbox-filter-icon', filterIcon]" />
+                </slot>
             </div>
             <span role="status" aria-live="polite" class="p-hidden-accessible">
                 {{ filterResultMessageText }}
@@ -95,6 +98,7 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import SearchIcon from 'primevue/icon/search';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
@@ -161,7 +165,7 @@ export default {
         },
         filterIcon: {
             type: String,
-            default: 'pi pi-search'
+            default: undefined
         },
         tabindex: {
             type: Number,
@@ -753,7 +757,8 @@ export default {
         ripple: Ripple
     },
     components: {
-        VirtualScroller: VirtualScroller
+        VirtualScroller: VirtualScroller,
+        SearchIcon: SearchIcon
     }
 };
 </script>