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

CascadeSelect group icon container added

pull/6275/head^2
tugcekucukoglu 2024-10-01 12:55:50 +03:00
parent 2a6b510d46
commit 82f6a17c1e
3 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/primevue/src/cascadeselect/CascadeSelect.d.ts vendored
View File

@ -128,6 +128,10 @@ export interface CascadeSelectPassThroughOptions {
* Used to pass attributes to the option list's DOM element.
*/
optionList?: CascadeSelectPassThroughOptionType;
/**
* Used to pass attributes to the group icon container's DOM element.
*/
groupIconContainer?: CascadeSelectPassThroughOptionType;
/**
* Used to pass attributes to the group icon's DOM element.
*/

2
packages/primevue/src/cascadeselect/CascadeSelectSub.vue
View File

@ -21,9 +21,11 @@
<component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" :selected="isOptionGroup(processedOption) ? false : isOptionSelected(processedOption)" />
<span v-else :class="cx('optionText')" v-bind="getPTOptions(processedOption, index, 'optionText')">{{ getOptionLabelToRender(processedOption) }}</span>
<template v-if="isOptionGroup(processedOption)">
<span :class="cx('groupIconContainer')">
<component v-if="templates['optiongroupicon']" :is="templates['optiongroupicon']" :class="cx('groupIcon')" />
<span v-else-if="optionGroupIcon" :class="[cx('groupIcon'), optionGroupIcon]" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
<AngleRightIcon v-else :class="cx('groupIcon')" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
</span>
</template>
</div>
<CascadeSelectSub

3
packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
View File

@ -176,13 +176,13 @@ const theme = ({ dt }) => `
.p-cascadeselect-option-content {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
position: relative;
padding: ${dt('cascadeselect.option.padding')};
}
.p-cascadeselect-group-icon {
margin-left: auto;
font-size: ${dt('cascadeselect.option.icon.size')};
width: ${dt('cascadeselect.option.icon.size')};
height: ${dt('cascadeselect.option.icon.size')};
@ -232,6 +232,7 @@ const classes = {
],
optionContent: 'p-cascadeselect-option-content',
optionText: 'p-cascadeselect-option-text',
groupIconContainer: 'p-cascadeselect-group-icon-container',
groupIcon: 'p-cascadeselect-group-icon',
optionList: 'p-cascadeselect-overlay p-cascadeselect-option-list'
};