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. * Used to pass attributes to the item group's DOM element.
*/ */
itemGroup?: DropdownPassThroughOptionType<T>; 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. * Used to pass attributes to the item's DOM element.
*/ */
@ -431,7 +435,7 @@ export interface DropdownProps {
*/ */
focusOnHover?: boolean | undefined; focusOnHover?: boolean | undefined;
/** /**
* Highlights automatically the first item. * Whether the selected option will be add highlight class.
* @defaultValue false * @defaultValue false
*/ */
highlightOnSelect?: boolean | undefined; 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')"> <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))"> <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')"> <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>
<li <li
v-else v-else
@ -132,7 +134,7 @@
<BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" /> <BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" />
</template> </template>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)"> <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> </slot>
</li> </li>
</template> </template>

View File

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

View File

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