pull/5161/head
mertsincan 2024-01-24 10:50:41 +00:00
parent b51517f173
commit 2b1400a615
3 changed files with 11 additions and 3 deletions

View File

@ -139,6 +139,10 @@ export interface DropdownPassThroughOptions<T = any> {
* Used to pass attributes to the item group's DOM element.
*/
itemGroup?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the item group label's DOM element.
*/
itemGroupLabel?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the item's DOM element.
*/
@ -431,7 +435,7 @@ export interface DropdownProps {
*/
focusOnHover?: boolean | undefined;
/**
* Highlights automatically the first item.
* Whether the selected option will be add highlight class.
* @defaultValue false
*/
highlightOnSelect?: boolean | undefined;

View File

@ -106,7 +106,9 @@
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
<slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
<slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">
<span :class="cx('itemGroupLabel')" v-bind="ptm('itemGroupLabel')">{{ getOptionGroupLabel(option.optionGroup) }}</span>
</slot>
</li>
<li
v-else
@ -132,7 +134,7 @@
<BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" />
</template>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
<span v-bind="ptm('itemLabel')">{{ getOptionLabel(option) }}</span>
<span :class="cx('itemLabel')" v-bind="ptm('itemLabel')">{{ getOptionLabel(option) }}</span>
</slot>
</li>
</template>

View File

@ -136,6 +136,7 @@ const classes = {
wrapper: 'p-dropdown-items-wrapper',
list: 'p-dropdown-items',
itemGroup: 'p-dropdown-item-group',
itemGroupLabel: 'p-dropdown-item-group-label',
item: ({ instance, props, state, option, focusedOption }) => [
'p-dropdown-item',
{
@ -144,6 +145,7 @@ const classes = {
'p-disabled': instance.isOptionDisabled(option)
}
],
itemLabel: 'p-dropdown-item-label',
tickIcon: 'p-dropdown-tick-icon',
blankIcon: 'p-dropdown-blank-icon',
emptyMessage: 'p-dropdown-empty-message'