CascadeSelect: Icon slots option updates

pull/6493/head
tugcekucukoglu 2024-09-27 15:21:23 +03:00
parent c90828dfd0
commit 33cc712e94
2 changed files with 9 additions and 4 deletions

View File

@ -496,7 +496,12 @@ export interface CascadeSelectSlots {
/** /**
* Custom option group icon template. * Custom option group icon template.
*/ */
optiongroupicon(): VNode[]; optiongroupicon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
} }
/** /**

View File

@ -21,7 +21,7 @@
<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']" aria-hidden="true" /> <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')" /> <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')" /> <AngleRightIcon v-else :class="cx('groupIcon')" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
</template> </template>
@ -54,9 +54,9 @@
</template> </template>
<script> <script>
import BaseComponent from '@primevue/core/basecomponent';
import { nestedPosition } from '@primeuix/utils/dom'; import { nestedPosition } from '@primeuix/utils/dom';
import { resolveFieldData, isNotEmpty } from '@primeuix/utils/object'; import { isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
import BaseComponent from '@primevue/core/basecomponent';
import AngleRightIcon from '@primevue/icons/angleright'; import AngleRightIcon from '@primevue/icons/angleright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';