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. * Used to pass attributes to the option list's DOM element.
*/ */
optionList?: CascadeSelectPassThroughOptionType; 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. * Used to pass attributes to the group icon's DOM element.
*/ */

8
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)" /> <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> <span v-else :class="cx('optionText')" v-bind="getPTOptions(processedOption, index, 'optionText')">{{ getOptionLabelToRender(processedOption) }}</span>
<template v-if="isOptionGroup(processedOption)"> <template v-if="isOptionGroup(processedOption)">
<component v-if="templates['optiongroupicon']" :is="templates['optiongroupicon']" :class="cx('groupIcon')" /> <span :class="cx('groupIconContainer')">
<span v-else-if="optionGroupIcon" :class="[cx('groupIcon'), optionGroupIcon]" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" /> <component v-if="templates['optiongroupicon']" :is="templates['optiongroupicon']" :class="cx('groupIcon')" />
<AngleRightIcon v-else :class="cx('groupIcon')" aria-hidden="true" v-bind="getPTOptions(processedOption, index, '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> </template>
</div> </div>
<CascadeSelectSub <CascadeSelectSub

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

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