Refactored MultiSelect

components/lib/multiselect/style/MultiSelectStyle.js

@@ -8,14 +8,14 @@ const classes = {
     root: ({ instance, props }) => [
         'p-multiselect p-component p-inputwrapper',
         {
-            'p-multiselect-chip': props.display === 'chip',
+            'p-multiselect-display-chip': props.display === 'chip',
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
-            'p-overlay-open': instance.overlayVisible
+            'p-multiselect-open': instance.overlayVisible
         }
     ],
     labelContainer: 'p-multiselect-label-container',
@@ -26,14 +26,14 @@ const classes = {
             'p-multiselect-label-empty': !props.placeholder && (!props.modelValue || props.modelValue.length === 0)
         }
     ],
-    token: 'p-multiselect-token',
+    token: 'p-multiselect-chip',
-    tokenLabel: 'p-multiselect-token-label',
+    tokenLabel: 'p-multiselect-chip-label',
-    removeTokenIcon: 'p-multiselect-token-icon',
+    removeTokenIcon: 'p-multiselect-chip-icon',
-    trigger: 'p-multiselect-trigger',
+    trigger: 'p-multiselect-dropdown',
-    loadingIcon: 'p-multiselect-trigger-icon',
+    loadingIcon: 'p-multiselect-loading-icon',
-    dropdownIcon: 'p-multiselect-trigger-icon',
+    dropdownIcon: 'p-multiselect-dropdown-icon',
     panel: ({ instance }) => [
-        'p-multiselect-panel p-component',
+        'p-multiselect-overlay p-component',
         {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
@@ -42,13 +42,13 @@ const classes = {
     filterContainer: 'p-multiselect-filter-container',
     filterInput: 'p-multiselect-filter',
     filterIcon: 'p-multiselect-filter-icon',
-    wrapper: 'p-multiselect-items-wrapper',
+    wrapper: 'p-multiselect-list-container',
-    list: 'p-multiselect-items p-component',
+    list: 'p-multiselect-list',
-    itemGroup: 'p-multiselect-item-group',
+    itemGroup: 'p-multiselect-option-group',
     item: ({ instance, option, index, getItemOptions, props }) => [
-        'p-multiselect-item',
+        'p-multiselect-option',
         {
-            'p-highlight': instance.isSelected(option) && props.highlightOnSelect,
+            'p-multiselect-option-selected': instance.isSelected(option) && props.highlightOnSelect,
             'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
             'p-disabled': instance.isOptionDisabled(option)
         }

components/lib/themes/primeone/base/multiselect/index.js

@@ -39,7 +39,7 @@ export default {
     background: ${dt('multiselect.disabled.background')};
 }
 
-.p-multiselect-trigger {
+.p-multiselect-dropdown {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -75,7 +75,7 @@ export default {
     color: ${dt('multiselect.disabled.color')};
 }
 
-.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+.p-inputwrapper-filled.p-multiselect.p-multiselect-display-chip .p-multiselect-label {
     padding: 0.25rem 0.25rem;
 }
 
@@ -84,7 +84,7 @@ export default {
     visibility: hidden;
 }
 
-.p-multiselect-token {
+.p-multiselect-chip {
     cursor: default;
     display: inline-flex;
     align-items: center;
@@ -96,16 +96,16 @@ export default {
     margin-right: 0.25rem;
 }
 
-.p-multiselect-token-icon {
+.p-multiselect-chip-icon {
     cursor: pointer;
     margin-left: 0.375rem;
 }
 
-.p-multiselect .p-multiselect-panel {
+.p-multiselect .p-multiselect-overlay {
     min-width: 100%;
 }
 
-.p-multiselect-panel {
+.p-multiselect-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -145,18 +145,18 @@ export default {
     padding-right: 1.75rem;
 }
 
-.p-multiselect-items-wrapper {
+.p-multiselect-list-container {
     overflow: auto;
 }
 
-.p-multiselect-items {
+.p-multiselect-list {
     margin: 0;
     padding: 0;
     list-style-type: none;
     padding: 0.25rem 0.25rem;
 }
 
-.p-multiselect-item {
+.p-multiselect-option {
     cursor: pointer;
     font-weight: normal;
     white-space: nowrap;
@@ -173,34 +173,34 @@ export default {
     border-radius: ${dt('rounded.sm')};
 }
 
-.p-multiselect-item:first-child {
+.p-multiselect-option:first-child {
     margin-top: 0;
 }
 
-.p-multiselect-item:last-child {
+.p-multiselect-option:last-child {
     margin-bottom: 0;
 }
 
-.p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+.p-multiselect-option:not(.p-multiselect-option-selected):not(.p-disabled).p-focus {
     background: ${dt('multiselect.item.focus.background')};
     color: ${dt('multiselect.item.focus.color')};
 }
 
-.p-multiselect-item.p-highlight {
+.p-multiselect-option.p-multiselect-option-selected {
     background: ${dt('multiselect.item.selected.background')};
     color: ${dt('multiselect.item.selected.color')};
 }
 
-.p-multiselect-item.p-highlight.p-focus {
+.p-multiselect-option.p-multiselect-option-selected.p-focus {
     background: ${dt('multiselect.item.selected.focus.background')};
     color: ${dt('multiselect.item.selected.focus.color')};
 }
 
-.p-multiselect-item .p-checkbox {
+.p-multiselect-option .p-checkbox {
     margin-right: 0.5rem;
 }
 
-.p-multiselect-item-group {
+.p-multiselect-option-group {
     cursor: auto;
     margin: 0;
     padding: 0.5rem 0.75rem;