Refactored CascadeSelect

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',
+    dropdownButton: 'p-cascadeselect-dropdown',
-    loadingIcon: 'p-cascadeselect-trigger-icon',
+    loadingIcon: 'p-cascadeselect-loading-icon',
-    dropdownIcon: 'p-cascadeselect-trigger-icon',
+    dropdownIcon: 'p-cascadeselect-dropdown-icon',
-    panel: ({ props, instance }) => [
+    panel: ({ instance }) => [
-        'p-cascadeselect-panel p-component',
+        'p-cascadeselect-overlay p-component',
         {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    wrapper: 'p-cascadeselect-items-wrapper',
+    wrapper: 'p-cascadeselect-list-container',
-    rootList: 'p-cascadeselect-items',
+    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({

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;
-}
 `
 };