Refactored AutoComplete CSS

components/lib/autocomplete/style/AutoCompleteStyle.js

@@ -12,48 +12,41 @@ const classes = {
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
             'p-focus': instance.focused,
-            'p-autocomplete-dd': props.dropdown,
-            'p-autocomplete-multiple': props.multiple,
             'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
             'p-inputwrapper-focus': instance.focused,
-            'p-overlay-open': instance.overlayVisible
-        }
-    ],
-    input: ({ props }) => [
-        'p-autocomplete-input',
-        {
-            'p-autocomplete-dd-input': props.dropdown
+            'p-autocomplete-open': instance.overlayVisible
         }
     ],
+    input: 'p-autocomplete-input',
     container: ({ props, instance }) => [
-        'p-autocomplete-multiple-container',
+        'p-autocomplete-chip-group',
         {
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }
     ],
     token: ({ instance, i }) => [
-        'p-autocomplete-token',
+        'p-autocomplete-chip',
         {
             'p-focus': instance.focusedMultipleOptionIndex === i
         }
     ],
-    tokenLabel: 'p-autocomplete-token-label',
-    removeTokenIcon: 'p-autocomplete-token-icon',
-    inputToken: 'p-autocomplete-input-token',
+    tokenLabel: 'p-autocomplete-chip-label',
+    removeTokenIcon: 'p-autocomplete-chip-icon',
+    inputToken: 'p-autocomplete-input-chip',
     loadingIcon: 'p-autocomplete-loader',
     dropdownButton: 'p-autocomplete-dropdown',
     panel: ({ instance }) => [
-        'p-autocomplete-panel p-component',
+        'p-autocomplete-overlay p-component',
         {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    list: 'p-autocomplete-items',
+    list: 'p-autocomplete-list',
     itemGroup: 'p-autocomplete-item-group',
     item: ({ instance, option, i, getItemOptions }) => [
         'p-autocomplete-item',
         {
-            'p-highlight': instance.isSelected(option),
+            'p-autocomplete-item-selected': instance.isSelected(option),
             'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
             'p-disabled': instance.isOptionDisabled(option)
         }

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

@@ -11,17 +11,17 @@ export default {
     right: 0.75rem;
 }
 
-.p-autocomplete-dd .p-autocomplete-loader {
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
     right: 3.25rem;
 }
 
-.p-autocomplete-dd .p-autocomplete-input {
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
     flex: 1 1 auto;
     width: 1%;
 }
 
-.p-autocomplete-dd .p-autocomplete-input,
-.p-autocomplete-dd .p-autocomplete-multiple-container {
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-chip-group {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -63,11 +63,11 @@ export default {
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-autocomplete .p-autocomplete-panel {
+.p-autocomplete .p-autocomplete-overlay {
     min-width: 100%;
 }
 
-.p-autocomplete-panel {
+.p-autocomplete-overlay {
     position: absolute;
     overflow: auto;
     top: 0;
@@ -79,7 +79,7 @@ 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-autocomplete-items {
+.p-autocomplete-list {
     margin: 0;
     padding: 0;
     list-style-type: none;
@@ -108,17 +108,17 @@ export default {
     margin-bottom: 0;
 }
 
-.p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus {
+.p-autocomplete-item:not(.p-autocomplete-item-selected):not(.p-disabled).p-focus {
     background: ${dt('autocomplete.item.focus.background')};
     color: ${dt('autocomplete.item.focus.color')};
 }
 
-.p-autocomplete-item.p-highlight {
+.p-autocomplete-item-selected {
     background: ${dt('autocomplete.item.selected.background')};
     color: ${dt('autocomplete.item.selected.color')};
 }
 
-.p-autocomplete-item.p-highlight.p-focus {
+.p-autocomplete-item-selected.p-focus {
     background: ${dt('autocomplete.item.selected.focus.background')};
     color: ${dt('autocomplete.item.selected.focus.color')};
 }
@@ -131,7 +131,7 @@ export default {
     font-weight: 600;
 }
 
-.p-autocomplete-multiple-container {
+.p-autocomplete-chip-group {
     margin: 0;
     padding: 0;
     list-style-type: none;
@@ -152,34 +152,34 @@ export default {
     box-shadow: ${dt('autocomplete.input.multiple.box.shadow')};
 }
 
-.p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container {
+.p-autocomplete:not(.p-disabled):hover .p-autocomplete-chip-group {
     border-color: ${dt('autocomplete.input.multiple.hover.border.color')};
 }
 
-.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container {
+.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-chip-group {
     border-color: ${dt('autocomplete.input.multiple.focus.border.color')};
     outline: 0 none;
 }
 
-.p-autocomplete.p-invalid .p-autocomplete-multiple-container {
+.p-autocomplete.p-invalid .p-autocomplete-chip-group {
     border-color: ${dt('autocomplete.input.multiple.invalid.border.color')};
 }
 
-.p-variant-filled.p-autocomplete-multiple-container {
+.p-variant-filled.p-autocomplete-chip-group {
     background: ${dt('autocomplete.input.multiple.filled.background')};
 }
 
-.p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-multiple-container  {
+.p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-chip-group  {
     background: ${dt('autocomplete.input.multiple.filled.focus.background')};
 }
 
-.p-autocomplete.p-disabled .p-autocomplete-multiple-container {
+.p-autocomplete.p-disabled .p-autocomplete-chip-group {
     opacity: 1;
     background: ${dt('autocomplete.input.multiple.disabled.background')};
     color: ${dt('autocomplete.input.multiple.disabled.color')};
 }
 
-.p-autocomplete-token {
+.p-autocomplete-chip {
     cursor: default;
     display: inline-flex;
     align-items: center;
@@ -190,27 +190,24 @@ export default {
     border-radius: ${dt('rounded.sm')};
 }
 
-.p-autocomplete-token.p-focus {
+.p-autocomplete-chip.p-focus {
     background: ${dt('autocomplete.chip.focus.background')};
     color: ${dt('autocomplete.chip.focus.color')};
 }
 
-.p-autocomplete-input-token {
-    flex: 1 1 auto;
-    display: inline-flex;
-}
-
-.p-autocomplete-token-icon {
+.p-autocomplete-chip-icon {
     cursor: pointer;
     margin-left: 0.375rem;
 }
 
-.p-autocomplete-input-token {
+.p-autocomplete-input-chip {
+    flex: 1 1 auto;
+    display: inline-flex;
     padding: 0.25rem 0;
     margin-left: 0.5rem;
 }
 
-.p-autocomplete-input-token input {
+.p-autocomplete-input-chip input {
     border: 0 none;
     outline: 0 none;
     background-color: transparent;
@@ -227,7 +224,7 @@ export default {
     margin: 0;
 }
 
-.p-autocomplete-input-token input::placeholder {
+.p-autocomplete-input-chip input::placeholder {
     color: ${dt('autocomplete.input.multiple.placeholder.color')};
 }
 
@@ -235,7 +232,7 @@ export default {
     display: flex;
 }
 
-.p-fluid .p-autocomplete-dd .p-autocomplete-input {
+.p-fluid .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
     width: 1%;
 }
 `