diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js index 3bc2f8cff..adf6133c1 100644 --- a/components/lib/cascadeselect/style/CascadeSelectStyle.js +++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js @@ -14,7 +14,7 @@ const classes = { 'p-focus': instance.focused, 'p-inputwrapper-filled': props.modelValue, 'p-inputwrapper-focus': instance.focused || instance.overlayVisible, - 'p-overlay-open': instance.overlayVisible + 'p-cascadeselect-open': instance.overlayVisible } ], label: ({ instance, props }) => [ @@ -24,23 +24,22 @@ const classes = { 'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0) } ], - dropdownButton: 'p-cascadeselect-trigger', - loadingIcon: 'p-cascadeselect-trigger-icon', - dropdownIcon: 'p-cascadeselect-trigger-icon', - panel: ({ props, instance }) => [ - 'p-cascadeselect-panel p-component', + dropdownButton: 'p-cascadeselect-dropdown', + loadingIcon: 'p-cascadeselect-loading-icon', + dropdownIcon: 'p-cascadeselect-dropdown-icon', + panel: ({ instance }) => [ + 'p-cascadeselect-overlay p-component', { 'p-ripple-disabled': instance.$primevue.config.ripple === false } ], - wrapper: 'p-cascadeselect-items-wrapper', - rootList: 'p-cascadeselect-items', + wrapper: 'p-cascadeselect-list-container', + rootList: 'p-cascadeselect-list', item: ({ instance, processedOption }) => [ 'p-cascadeselect-item', { - 'p-cascadeselect-item-group': instance.isOptionGroup(processedOption), 'p-cascadeselect-item-active': instance.isOptionActive(processedOption), - 'p-highlight': instance.isOptionSelected(processedOption), + 'p-cascadeselect-item-selected': instance.isOptionSelected(processedOption), 'p-focus': instance.isOptionFocused(processedOption), 'p-disabled': instance.isOptionDisabled(processedOption) } @@ -48,7 +47,7 @@ const classes = { content: 'p-cascadeselect-item-content', text: 'p-cascadeselect-item-text', groupIcon: 'p-cascadeselect-group-icon', - sublist: 'p-cascadeselect-panel p-cascadeselect-sublist' + sublist: 'p-cascadeselect-overlay p-cascadeselect-item-list' }; export default BaseStyle.extend({ diff --git a/components/lib/themes/primeone/base/cascadeselect/index.js b/components/lib/themes/primeone/base/cascadeselect/index.js index c846ed9f3..559215a87 100644 --- a/components/lib/themes/primeone/base/cascadeselect/index.js +++ b/components/lib/themes/primeone/base/cascadeselect/index.js @@ -39,7 +39,7 @@ export default { background: ${dt('cascadeselect.disabled.background')}; } -.p-cascadeselect-trigger { +.p-cascadeselect-dropdown { display: flex; align-items: center; justify-content: center; @@ -91,7 +91,7 @@ export default { width: 1%; } -.p-cascadeselect-panel { +.p-cascadeselect-overlay { background: ${dt('cascadeselect.overlay.background')}; color: ${dt('cascadeselect.overlay.color')}; border: 1px solid ${dt('cascadeselect.overlay.border.color')}; @@ -99,18 +99,18 @@ export default { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } -.p-cascadeselect .p-cascadeselect-panel { +.p-cascadeselect .p-cascadeselect-overlay { min-width: 100%; } -.p-cascadeselect-sublist { +.p-cascadeselect-item-list { position: absolute; min-width: 100%; z-index: 1; display: none; } -.p-cascadeselect-items { +.p-cascadeselect-list { margin: 0; padding: 0; list-style-type: none; @@ -138,21 +138,21 @@ export default { margin-bottom: 0; } -.p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { +.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus { background: ${dt('cascadeselect.item.focus.background')}; color: ${dt('cascadeselect.item.focus.color')}; } -.p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus .p-cascadeselect-group-icon { +.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon { color: ${dt('cascadeselect.item.icon.focus.color')}; } -.p-cascadeselect-item.p-highlight { +.p-cascadeselect-item-selected { background: ${dt('cascadeselect.item.selected.background')}; color: ${dt('cascadeselect.item.selected.color')}; } -.p-cascadeselect-item.p-highlight.p-focus { +.p-cascadeselect-item-selected.p-focus { background: ${dt('cascadeselect.item.selected.focus.background')}; color: ${dt('cascadeselect.item.selected.focus.color')}; } @@ -163,7 +163,7 @@ export default { color: ${dt('cascadeselect.item.focus.color')}; } -.p-cascadeselect-item-active > .p-cascadeselect-sublist { +.p-cascadeselect-item-active > .p-cascadeselect-item-list { display: block; left: 100%; top: 0; @@ -182,14 +182,5 @@ export default { font-size: 0.875rem; color: ${dt('cascadeselect.item.icon.color')}; } - -.p-cascadeselect-enter-from, -.p-cascadeselect-leave-active { - opacity: 0; -} - -.p-cascadeselect-enter-active { - transition: opacity 150ms; -} ` };