pull/5161/head
Cagatay Civici 2024-01-24 13:57:14 +03:00
commit 1eb66a6d91
4 changed files with 20 additions and 4 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'

View File

@ -23735,6 +23735,14 @@
"default": "",
"description": "Used to pass attributes to the item group's DOM element."
},
{
"name": "itemGroupLabel",
"optional": true,
"readonly": false,
"type": "DropdownPassThroughOptionType<T>",
"default": "",
"description": "Used to pass attributes to the item group label's DOM element."
},
{
"name": "item",
"optional": true,
@ -24260,7 +24268,7 @@
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Highlights automatically the first item."
"description": "Whether the selected option will be add highlight class."
},
{
"name": "showTick",