Different color for active item
parent
a7c0d95336
commit
e184926fb1
|
@ -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)"
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue