vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #5141

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/dropdown/Dropdown.d.ts vendored
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;

6
components/lib/dropdown/Dropdown.vue
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>

2
components/lib/dropdown/style/DropdownStyle.js
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'