vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 17:32:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #5681, #5682, #5683 - For MultiSelect

Browse source
This commit is contained in:
tugcekucukoglu 2024-05-06 10:05:05 +03:00
parent 06850f3ed5
commit 646ca0e239
4 changed files with 118 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

26
components/lib/multiselect/style/MultiSelectStyle.js
View file

@ -76,7 +76,7 @@ const theme = ({ dt }) => `
color: ${dt('multiselect.disabled.color')};
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-display-chip .p-multiselect-label {
.p-inputlistContainer-filled.p-multiselect.p-multiselect-display-chip .p-multiselect-label {
padding: 0.25rem 0.25rem;
}
@ -209,15 +209,15 @@ const inlineStyles = {
const classes = {
root: ({ instance, props }) => [
'p-multiselect p-component p-inputwrapper',
'p-multiselect p-component p-inputlistContainer',
{
'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-inputlistContainer-filled': props.modelValue && props.modelValue.length,
'p-inputlistContainer-focus': instance.focused || instance.overlayVisible,
'p-multiselect-open': instance.overlayVisible
}
],
@ -229,13 +229,13 @@ const classes = {
'p-multiselect-label-empty': !props.placeholder && (!props.modelValue || props.modelValue.length === 0)
}
],
token: 'p-multiselect-chip',
tokenLabel: 'p-multiselect-chip-label',
removeTokenIcon: 'p-multiselect-chip-icon',
trigger: 'p-multiselect-dropdown',
chip: 'p-multiselect-chip',
chipLabel: 'p-multiselect-chip-label',
chipIcon: 'p-multiselect-chip-icon',
dropdown: 'p-multiselect-dropdown',
loadingIcon: 'p-multiselect-loading-icon',
dropdownIcon: 'p-multiselect-dropdown-icon',
panel: ({ instance }) => [
overlay: ({ instance }) => [
'p-multiselect-overlay p-component',
{
'p-ripple-disabled': instance.$primevue.config.ripple === false
@ -243,12 +243,12 @@ const classes = {
],
header: 'p-multiselect-header',
filterContainer: 'p-multiselect-filter-container',
filterInput: 'p-multiselect-filter',
filter: 'p-multiselect-filter',
filterIcon: 'p-multiselect-filter-icon',
wrapper: 'p-multiselect-list-container',
listContainer: 'p-multiselect-list-container',
list: 'p-multiselect-list',
itemGroup: 'p-multiselect-option-group',
item: ({ instance, option, index, getItemOptions, props }) => [
optionGroup: 'p-multiselect-option-group',
option: ({ instance, option, index, getItemOptions, props }) => [
'p-multiselect-option',
{
'p-multiselect-option-selected': instance.isSelected(option) && props.highlightOnSelect,