Refactor #3832 Refactor #3833 - For Listbox

pull/3841/head
Tuğçe Küçükoğlu 2023-04-04 15:40:49 +03:00
parent 06124bd86e
commit 01fe1466a6
3 changed files with 24 additions and 11 deletions

View File

@ -236,35 +236,39 @@ const ListboxEvents = [
const ListboxSlots = [ const ListboxSlots = [
{ {
name: 'option', name: 'option',
description: "Custom content for the item's option" description: "Custom content for the item's option."
}, },
{ {
name: 'optiongroup', name: 'optiongroup',
description: "Custom content for the item's optiongroup" description: "Custom content for the item's optiongroup."
}, },
{ {
name: 'header', name: 'header',
description: "Custom content for the component's header" description: "Custom content for the component's header."
}, },
{ {
name: 'footer', name: 'footer',
description: "Custom content for the component's footer" description: "Custom content for the component's footer."
}, },
{ {
name: 'emptyfilter', 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', name: 'empty',
description: 'Custom content when there is no data to display' description: 'Custom content when there is no data to display.'
}, },
{ {
name: 'content', name: 'content',
description: 'Custom content for the virtual scroller' description: 'Custom content for the virtual scroller.'
}, },
{ {
name: 'loader', 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.'
} }
]; ];

View File

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

View File

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