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

Fixed #673 - Chips mode for MultiSelect

pull/682/head
Cagatay Civici 2020-11-25 11:01:35 +03:00
parent 1f6b2dd135
commit cc5c452451
37 changed files with 722 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/themes/arya-blue/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(100, 181, 246, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -927,6 +937,10 @@
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);

14
public/themes/arya-green/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(129, 199, 132, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -927,6 +937,10 @@
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);

14
public/themes/arya-orange/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(255, 213, 79, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -927,6 +937,10 @@
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);

14
public/themes/arya-purple/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(186, 104, 200, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -927,6 +937,10 @@
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);

14
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #8dd0ff;
color: #151515;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -931,6 +941,10 @@
border-color: #f19ea6;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.75rem;
}
.p-multiselect-panel {
background: #2a323d;
color: rgba(255, 255, 255, 0.87);

14
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #c298d8;
color: #151515;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -931,6 +941,10 @@
border-color: #f19ea6;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.75rem;
}
.p-multiselect-panel {
background: #2a323d;
color: rgba(255, 255, 255, 0.87);

14
public/themes/bootstrap4-light-blue/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #007bff;
color: #ffffff;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #495057;
@ -931,6 +941,10 @@
border-color: #dc3545;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.75rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #212529;

14
public/themes/bootstrap4-light-purple/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #883cae;
color: #ffffff;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #495057;
@ -931,6 +941,10 @@
border-color: #dc3545;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.75rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #212529;

14
public/themes/fluent-light/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #605e5c;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #edebe9;
color: #323130;
border-radius: 2px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #605e5c;
@ -927,6 +937,10 @@
border-color: #a4252c;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #323130;

14
public/themes/luna-amber/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #9b9b9b;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #FFE082;
color: #212529;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #888888;
@ -931,6 +941,10 @@
border-color: #e57373;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.2145rem 0.429rem;
}
.p-multiselect-panel {
background: #323232;
color: #dedede;

14
public/themes/luna-blue/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #9b9b9b;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #81D4FA;
color: #212529;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #888888;
@ -931,6 +941,10 @@
border-color: #e57373;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.2145rem 0.429rem;
}
.p-multiselect-panel {
background: #323232;
color: #dedede;

14
public/themes/luna-green/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #9b9b9b;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #C5E1A5;
color: #212529;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #888888;
@ -931,6 +941,10 @@
border-color: #e57373;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.2145rem 0.429rem;
}
.p-multiselect-panel {
background: #323232;
color: #dedede;

14
public/themes/luna-pink/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #9b9b9b;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #F48FB1;
color: #212529;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #888888;
@ -931,6 +941,10 @@
border-color: #e57373;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.2145rem 0.429rem;
}
.p-multiselect-panel {
background: #323232;
color: #dedede;

38
public/themes/md-dark-deeppurple/theme.css
View File

@ -940,6 +940,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
background: rgba(206, 147, 216, 0.16);
color: #CE93D8;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -951,6 +961,10 @@
border-color: #f44435;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.5rem 1rem;
}
.p-multiselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
@ -5032,6 +5046,30 @@
background: transparent;
}
.p-float-label .p-multiselect-label .p-multiselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
font-size: 75%;
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1.5rem;
}

38
public/themes/md-dark-indigo/theme.css
View File

@ -940,6 +940,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
background: rgba(159, 168, 218, 0.16);
color: #9FA8DA;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -951,6 +961,10 @@
border-color: #f44435;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.5rem 1rem;
}
.p-multiselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
@ -5032,6 +5046,30 @@
background: transparent;
}
.p-float-label .p-multiselect-label .p-multiselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
font-size: 75%;
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1.5rem;
}

38
public/themes/md-light-deeppurple/theme.css
View File

@ -940,6 +940,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
background: rgba(103, 58, 183, 0.12);
color: #673AB7;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
@ -951,6 +961,10 @@
border-color: #B00020;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.5rem 1rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #000001;
@ -5032,6 +5046,30 @@
background: transparent;
}
.p-float-label .p-multiselect-label .p-multiselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
font-size: 75%;
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1.5rem;
}

38
public/themes/md-light-indigo/theme.css
View File

@ -940,6 +940,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
background: rgba(63, 81, 181, 0.12);
color: #3F51B5;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
@ -951,6 +961,10 @@
border-color: #B00020;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.5rem 1rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #000001;
@ -5032,6 +5046,30 @@
background: transparent;
}
.p-float-label .p-multiselect-label .p-multiselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
font-size: 75%;
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1.5rem;
}

38
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -940,6 +940,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
background: rgba(103, 58, 183, 0.16);
color: #673AB7;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -951,6 +961,10 @@
border-color: #f44435;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.375rem 0.75rem;
}
.p-multiselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
@ -5032,6 +5046,30 @@
background: transparent;
}
.p-float-label .p-multiselect-label .p-multiselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
font-size: 75%;
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1.5rem;
}

38
public/themes/mdc-dark-indigo/theme.css
View File

@ -940,6 +940,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
background: rgba(63, 81, 181, 0.16);
color: #3F51B5;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -951,6 +961,10 @@
border-color: #f44435;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.375rem 0.75rem;
}
.p-multiselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
@ -5032,6 +5046,30 @@
background: transparent;
}
.p-float-label .p-multiselect-label .p-multiselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
font-size: 75%;
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1.5rem;
}

38
public/themes/mdc-light-deeppurple/theme.css
View File

@ -940,6 +940,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
background: rgba(103, 58, 183, 0.12);
color: #673AB7;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
@ -951,6 +961,10 @@
border-color: #B00020;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.375rem 0.75rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #000001;
@ -5032,6 +5046,30 @@
background: transparent;
}
.p-float-label .p-multiselect-label .p-multiselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
font-size: 75%;
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1.5rem;
}

38
public/themes/mdc-light-indigo/theme.css
View File

@ -940,6 +940,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
background: rgba(63, 81, 181, 0.12);
color: #3F51B5;
border-radius: 4px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
@ -951,6 +961,10 @@
border-color: #B00020;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.375rem 0.75rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #000001;
@ -5032,6 +5046,30 @@
background: transparent;
}
.p-float-label .p-multiselect-label .p-multiselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
font-size: 75%;
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1.5rem;
}

14
public/themes/nova-accent/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #666666;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #e02365;
color: #ffffff;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #848484;
@ -927,6 +937,10 @@
border-color: #a80000;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.2145rem 0.429rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #333333;

14
public/themes/nova-alt/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #666666;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #007ad9;
color: #ffffff;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #848484;
@ -931,6 +941,10 @@
border-color: #a80000;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.2145rem 0.429rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #333333;

14
public/themes/nova-vue/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #666666;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #41b883;
color: #ffffff;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #848484;
@ -931,6 +941,10 @@
border-color: #a80000;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.2145rem 0.429rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #333333;

14
public/themes/nova/theme.css
View File

@ -920,6 +920,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #666666;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #007ad9;
color: #ffffff;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #848484;
@ -931,6 +941,10 @@
border-color: #a80000;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.2145rem 0.429rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #333333;

14
public/themes/rhea/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #a6a6a6;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #AFD3C8;
color: #385048;
border-radius: 2px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #a6a6a6;
@ -927,6 +937,10 @@
border-color: #e7a3a3;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.2145rem 0.429rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #666666;

14
public/themes/saga-blue/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #E3F2FD;
color: #495057;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #6c757d;
@ -927,6 +937,10 @@
border-color: #f44336;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #495057;

14
public/themes/saga-green/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #E8F5E9;
color: #495057;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #6c757d;
@ -927,6 +937,10 @@
border-color: #f44336;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #495057;

14
public/themes/saga-orange/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #FFF3E0;
color: #495057;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #6c757d;
@ -927,6 +937,10 @@
border-color: #f44336;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #495057;

14
public/themes/saga-purple/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #F3E5F5;
color: #495057;
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: #6c757d;
@ -927,6 +937,10 @@
border-color: #f44336;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #ffffff;
color: #495057;

14
public/themes/vela-blue/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(100, 181, 246, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -927,6 +937,10 @@
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);

14
public/themes/vela-green/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(129, 199, 132, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -927,6 +937,10 @@
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);

14
public/themes/vela-orange/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(255, 213, 79, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -927,6 +937,10 @@
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);

14
public/themes/vela-purple/theme.css
View File

@ -916,6 +916,16 @@
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: rgba(186, 104, 200, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
@ -927,6 +937,10 @@
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
.p-multiselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);

37
src/components/multiselect/MultiSelect.vue
View File

@ -7,7 +7,16 @@
<div class="p-multiselect-label-container">
<div :class="labelClass">
<slot name="value" :value="modelValue" :placeholder="placeholder">
{{label}}
<template v-if="display === 'comma'">
{{label || 'empty'}}
</template>
<template v-else-if="display === 'chip'">
<div v-for="item of modelValue" class="p-multiselect-token" :key="getLabelByValue(item)">
<span class="p-multiselect-token-label">{{getLabelByValue(item)}}</span>
<span v-if="!disabled" class="p-multiselect-token-icon pi pi-times-circle" @click="removeChip(item)"></span>
</div>
<template v-if="!modelValue || modelValue.length === 0">{{placeholder || 'empty'}}</template>
</template>
</slot>
</div>
</div>
@ -88,6 +97,10 @@ export default {
emptyFilterMessage: {
type: String,
default: 'No results found'
},
display: {
type: String,
default: 'comma'
}
},
data() {
@ -400,6 +413,12 @@ export default {
},
overlayRef(el) {
this.overlay = el;
},
removeChip(item) {
let value = this.modelValue.filter(val => !ObjectUtils.equals(val, item, this.equalityKey));
this.$emit('update:modelValue', value);
this.$emit('change', {originalEvent: event, value: value});
}
},
computed: {
@ -413,6 +432,7 @@ export default {
return [
'p-multiselect p-component p-inputwrapper',
{
'p-multiselect-chip': this.display === 'chip',
'p-disabled': this.disabled,
'p-focus': this.focused,
'p-inputwrapper-filled': this.modelValue && this.modelValue.length,
@ -425,7 +445,7 @@ export default {
'p-multiselect-label',
{
'p-placeholder': this.label === this.placeholder,
'p-multiselect-label-empty': !this.$slots['value'] && !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
'p-multiselect-label-empty': !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
}
];
},
@ -443,7 +463,7 @@ export default {
}
}
else {
label = this.placeholder || 'p-multiselect';
label = this.placeholder;
}
return label;
@ -511,6 +531,17 @@ export default {
visibility: hidden;
}
.p-multiselect-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-multiselect-token-icon {
cursor: pointer;
}
.p-multiselect .p-multiselect-panel {
min-width: 100%;
}

8
src/views/multiselect/MultiSelectDemo.vue
View File

@ -11,7 +11,10 @@
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" />
<MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select a City" />
<h5>Chips</h5>
<MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" placeholder="Select a City" display="chip" />
<h5>Advanced with Templating and Filtering</h5>
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
@ -44,7 +47,8 @@ import MultiSelectDoc from './MultiSelectDoc';
export default {
data() {
return {
selectedCities: null,
selectedCities1: null,
selectedCities2: null,
selectedCountries: null,
cities: [
{name: 'New York', code: 'NY'},

16
src/views/multiselect/MultiSelectDoc.vue
View File

@ -36,6 +36,14 @@ data() {
}
}
</code></pre>
<h5>Chips Display</h5>
<p>A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the <i>display</i> property to visualize the items as tokens.</p>
<pre v-code>
<code>
&lt;MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" display="chip"/&gt;
</code></pre>
<h5>Custom Content</h5>
@ -320,7 +328,10 @@ data() {
<pre v-code>
<code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
&lt;MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
&lt;h5&gt;Chips&lt;/h5&gt;
&lt;MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" placeholder="Select a City" display="chip"/&gt;
&lt;h5&gt;Advanced with Templating and Filtering&lt;/h5&gt;
&lt;MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom"&gt;
@ -348,7 +359,8 @@ data() {
export default {
data() {
return {
selectedCities: null,
selectedCities1: null,
selectedCities2: null,
selectedCountries: null,
cities: [
{name: 'New York', code: 'NY'},