Different color for active item

pull/5507/head
Cagatay Civici 2024-03-25 18:19:22 +03:00
parent a7c0d95336
commit e184926fb1
3 changed files with 7 additions and 4 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')"> <ul :ref="containerRef" :class="cx('rootList')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
<template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)"> <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
<li <li
:id="getOptionId(processedOption)" :id="getOptionId(processedOption)"

View File

@ -34,12 +34,13 @@ const classes = {
} }
], ],
wrapper: 'p-cascadeselect-items-wrapper', wrapper: 'p-cascadeselect-items-wrapper',
list: 'p-cascadeselect-panel p-cascadeselect-items', rootList: 'p-cascadeselect-items',
item: ({ instance, processedOption }) => [ item: ({ instance, processedOption }) => [
'p-cascadeselect-item', 'p-cascadeselect-item',
{ {
'p-cascadeselect-item-group': instance.isOptionGroup(processedOption), 'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption), 'p-cascadeselect-item-active': instance.isOptionActive(processedOption),
'p-highlight': instance.isOptionSelected(processedOption),
'p-focus': instance.isOptionFocused(processedOption), 'p-focus': instance.isOptionFocused(processedOption),
'p-disabled': instance.isOptionDisabled(processedOption) 'p-disabled': instance.isOptionDisabled(processedOption)
} }
@ -47,7 +48,7 @@ const classes = {
content: 'p-cascadeselect-item-content', content: 'p-cascadeselect-item-content',
text: 'p-cascadeselect-item-text', text: 'p-cascadeselect-item-text',
groupIcon: 'p-cascadeselect-group-icon', groupIcon: 'p-cascadeselect-group-icon',
sublist: 'p-cascadeselect-sublist' sublist: 'p-cascadeselect-panel p-cascadeselect-sublist'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

View File

@ -159,6 +159,8 @@ export default {
.p-cascadeselect-item-active { .p-cascadeselect-item-active {
overflow: visible; overflow: visible;
background: ${dt('cascadeselect.item.focus.background')};
color: ${dt('cascadeselect.item.focus.color')};
} }
.p-cascadeselect-item-active > .p-cascadeselect-sublist { .p-cascadeselect-item-active > .p-cascadeselect-sublist {