vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored AutoComplete CSS

pull/5677/head
Cagatay Civici 2024-04-06 23:52:27 +03:00
parent 0603df54d9
commit 53779ce3ff
2 changed files with 36 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

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

55
components/lib/themes/primeone/base/autocomplete/index.js
View File

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