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

Fixed #1159 - New TreeSelect Component

pull/1088/head
Cagatay Civici 2021-04-09 15:04:11 +03:00
parent e769495181
commit 86221e419d
48 changed files with 3544 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #ef9a9a;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
@ -1462,6 +1458,76 @@
border-color: #64B5F6;
}
.p-treeselect {
background: #121212;
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #64B5F6;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
border-color: #64B5F6;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #383838;
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #383838;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #383838;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #383838;
}
.p-togglebutton.p-button {
background: #1e1e1e;
border: 1px solid #383838;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #ef9a9a;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
@ -1462,6 +1458,76 @@
border-color: #81C784;
}
.p-treeselect {
background: #121212;
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #81C784;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
border-color: #81C784;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #383838;
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #383838;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #383838;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #383838;
}
.p-togglebutton.p-button {
background: #1e1e1e;
border: 1px solid #383838;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #ef9a9a;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
@ -1462,6 +1458,76 @@
border-color: #FFD54F;
}
.p-treeselect {
background: #121212;
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #FFD54F;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #ffe284;
border-color: #FFD54F;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #383838;
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #383838;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #383838;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #383838;
}
.p-togglebutton.p-button {
background: #1e1e1e;
border: 1px solid #383838;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #ef9a9a;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
@ -1462,6 +1458,76 @@
border-color: #BA68C8;
}
.p-treeselect {
background: #121212;
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #BA68C8;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #cf95d9;
border-color: #BA68C8;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #383838;
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #383838;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #383838;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #383838;
}
.p-togglebutton.p-button {
background: #1e1e1e;
border: 1px solid #383838;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.15s;
}
.p-float-label > label.p-error {
color: #f19ea6;
}
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
@ -1474,6 +1470,76 @@
border-color: #56bdff;
}
.p-treeselect {
background: #20262e;
border: 1px solid #3f4b5b;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #3f4b5b;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #e3f3fe;
border-color: #8dd0ff;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.75rem;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #3f4b5b;
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #f19ea6;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.75rem;
}
.p-treeselect-panel {
background: #2a323d;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #3f4b5b;
border-radius: 4px;
box-shadow: none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1.5rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #3f4b5b;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #3f4b5b;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #3f4b5b;
}
.p-togglebutton.p-button {
background: #6c757d;
border: 1px solid #6c757d;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.15s;
}
.p-float-label > label.p-error {
color: #f19ea6;
}
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
@ -1474,6 +1470,76 @@
border-color: #aa70c7;
}
.p-treeselect {
background: #20262e;
border: 1px solid #3f4b5b;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #3f4b5b;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #f0e6f5;
border-color: #c298d8;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.75rem;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #3f4b5b;
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #f19ea6;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.75rem;
}
.p-treeselect-panel {
background: #2a323d;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #3f4b5b;
border-radius: 4px;
box-shadow: none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1.5rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #3f4b5b;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #3f4b5b;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #3f4b5b;
}
.p-togglebutton.p-button {
background: #6c757d;
border: 1px solid #6c757d;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.15s;
}
.p-float-label > label.p-error {
color: #dc3545;
}
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: #495057;
@ -1474,6 +1470,76 @@
border-color: #0069d9;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #ced4da;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
border-color: #007bff;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.75rem;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #6c757d;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #dee2e6;
color: #212529;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #495057;
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #dc3545;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.75rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #212529;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1.5rem;
color: #212529;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #efefef;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #efefef;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #efefef;
}
.p-togglebutton.p-button {
background: #6c757d;
border: 1px solid #6c757d;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.15s;
}
.p-float-label > label.p-error {
color: #dc3545;
}
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: #495057;
@ -1474,6 +1470,76 @@
border-color: #7a38a7;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #ced4da;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
border-color: #883cae;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.75rem;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #6c757d;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.75rem;
margin-right: 0.5rem;
background: #dee2e6;
color: #212529;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #495057;
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #dc3545;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.75rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #212529;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1.5rem;
color: #212529;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #efefef;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #efefef;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #efefef;
}
.p-togglebutton.p-button {
background: #6c757d;
border: 1px solid #6c757d;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #a4252c;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: #605e5c;
@ -1462,6 +1458,76 @@
border-color: #005a9e;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #605e5c;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 2px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #323130;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #605e5c;
border-color: #0078d4;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #605e5c;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #edebe9;
color: #323130;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #605e5c;
width: 2.357rem;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.p-treeselect.p-invalid.p-component {
border-color: #a4252c;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #323130;
border: 0 none;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.75rem 0.5rem;
color: #323130;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #faf9f8;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #faf9f8;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #faf9f8;
}
.p-togglebutton.p-button {
background: #ffffff;
border: 1px solid #605e5c;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #e57373;
}
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #888888;
@ -1474,6 +1470,76 @@
border-color: #FFE082;
}
.p-treeselect {
background: #191919;
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #FFE082;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
border-color: #FFE082;
}
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #9b9b9b;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #4b4b4b;
color: #dedede;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #888888;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #e57373;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.2145rem 0.429rem;
}
.p-treeselect-panel {
background: #323232;
color: #dedede;
border: 1px solid #191919;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.429rem 0.857rem;
color: #dedede;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #4b4b4b;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #4b4b4b;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #4b4b4b;
}
.p-togglebutton.p-button {
background: #252525;
border: 1px solid #252525;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #e57373;
}
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #888888;
@ -1474,6 +1470,76 @@
border-color: #81D4FA;
}
.p-treeselect {
background: #191919;
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #81D4FA;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
border-color: #81D4FA;
}
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #9b9b9b;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #4b4b4b;
color: #dedede;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #888888;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #e57373;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.2145rem 0.429rem;
}
.p-treeselect-panel {
background: #323232;
color: #dedede;
border: 1px solid #191919;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.429rem 0.857rem;
color: #dedede;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #4b4b4b;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #4b4b4b;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #4b4b4b;
}
.p-togglebutton.p-button {
background: #252525;
border: 1px solid #252525;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #e57373;
}
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #888888;
@ -1474,6 +1470,76 @@
border-color: #C5E1A5;
}
.p-treeselect {
background: #191919;
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #C5E1A5;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
border-color: #C5E1A5;
}
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #9b9b9b;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #4b4b4b;
color: #dedede;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #888888;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #e57373;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.2145rem 0.429rem;
}
.p-treeselect-panel {
background: #323232;
color: #dedede;
border: 1px solid #191919;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.429rem 0.857rem;
color: #dedede;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #4b4b4b;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #4b4b4b;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #4b4b4b;
}
.p-togglebutton.p-button {
background: #252525;
border: 1px solid #252525;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #e57373;
}
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #888888;
@ -1474,6 +1470,76 @@
border-color: #F48FB1;
}
.p-treeselect {
background: #191919;
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #F48FB1;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
border-color: #F48FB1;
}
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #9b9b9b;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #4b4b4b;
color: #dedede;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #888888;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #e57373;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.2145rem 0.429rem;
}
.p-treeselect-panel {
background: #323232;
color: #dedede;
border: 1px solid #191919;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.429rem 0.857rem;
color: #dedede;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #4b4b4b;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #4b4b4b;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #4b4b4b;
}
.p-togglebutton.p-button {
background: #252525;
border: 1px solid #252525;

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

@ -1027,10 +1027,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #f44435;
}
.p-input-icon-left > i:first-of-type {
left: 1rem;
color: rgba(255, 255, 255, 0.6);
@ -1486,6 +1482,76 @@
border-color: 0 none;
}
.p-treeselect {
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #CE93D8;
}
.p-treeselect .p-treeselect-label {
padding: 1rem 1rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #f44435;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.5rem 1rem;
}
.p-treeselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 1rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: rgba(255, 255, 255, 0.06);
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: rgba(255, 255, 255, 0.1);
}
.p-togglebutton.p-button {
background: #2f2f2f;
border: 1px solid rgba(255, 255, 255, 0.12);

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

@ -1027,10 +1027,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #f44435;
}
.p-input-icon-left > i:first-of-type {
left: 1rem;
color: rgba(255, 255, 255, 0.6);
@ -1486,6 +1482,76 @@
border-color: 0 none;
}
.p-treeselect {
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #9FA8DA;
}
.p-treeselect .p-treeselect-label {
padding: 1rem 1rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #f44435;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.5rem 1rem;
}
.p-treeselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 1rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: rgba(255, 255, 255, 0.06);
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: rgba(255, 255, 255, 0.1);
}
.p-togglebutton.p-button {
background: #2f2f2f;
border: 1px solid rgba(255, 255, 255, 0.12);

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

@ -1027,10 +1027,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #B00020;
}
.p-input-icon-left > i:first-of-type {
left: 1rem;
color: rgba(0, 0, 0, 0.6);
@ -1486,6 +1482,76 @@
border-color: 0 none;
}
.p-treeselect {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.38);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: rgba(0, 0, 0, 0.87);
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #673AB7;
}
.p-treeselect .p-treeselect-label {
padding: 1rem 1rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
background: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #B00020;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.5rem 1rem;
}
.p-treeselect-panel {
background: #ffffff;
color: rgba(0, 0, 0, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 1rem 1rem;
color: rgba(0, 0, 0, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f5f5f5;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #ececec;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #dcdcdc;
}
.p-togglebutton.p-button {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);

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

@ -1027,10 +1027,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #B00020;
}
.p-input-icon-left > i:first-of-type {
left: 1rem;
color: rgba(0, 0, 0, 0.6);
@ -1486,6 +1482,76 @@
border-color: 0 none;
}
.p-treeselect {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.38);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: rgba(0, 0, 0, 0.87);
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #3F51B5;
}
.p-treeselect .p-treeselect-label {
padding: 1rem 1rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
background: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #B00020;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.5rem 1rem;
}
.p-treeselect-panel {
background: #ffffff;
color: rgba(0, 0, 0, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 1rem 1rem;
color: rgba(0, 0, 0, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f5f5f5;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #ececec;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #dcdcdc;
}
.p-togglebutton.p-button {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);

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

@ -1027,10 +1027,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #f44435;
}
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
@ -1486,6 +1482,76 @@
border-color: 0 none;
}
.p-treeselect {
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #673AB7;
}
.p-treeselect .p-treeselect-label {
padding: 0.75rem 0.75rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #f44435;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.375rem 0.75rem;
}
.p-treeselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.75rem 0.75rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: rgba(255, 255, 255, 0.06);
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: rgba(255, 255, 255, 0.1);
}
.p-togglebutton.p-button {
background: #2f2f2f;
border: 1px solid rgba(255, 255, 255, 0.12);

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

@ -1027,10 +1027,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #f44435;
}
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
@ -1486,6 +1482,76 @@
border-color: 0 none;
}
.p-treeselect {
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #3F51B5;
}
.p-treeselect .p-treeselect-label {
padding: 0.75rem 0.75rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #f44435;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.375rem 0.75rem;
}
.p-treeselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.75rem 0.75rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: rgba(255, 255, 255, 0.06);
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: rgba(255, 255, 255, 0.1);
}
.p-togglebutton.p-button {
background: #2f2f2f;
border: 1px solid rgba(255, 255, 255, 0.12);

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

@ -1027,10 +1027,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #B00020;
}
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(0, 0, 0, 0.6);
@ -1486,6 +1482,76 @@
border-color: 0 none;
}
.p-treeselect {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.38);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: rgba(0, 0, 0, 0.87);
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #673AB7;
}
.p-treeselect .p-treeselect-label {
padding: 0.75rem 0.75rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
background: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #B00020;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.375rem 0.75rem;
}
.p-treeselect-panel {
background: #ffffff;
color: rgba(0, 0, 0, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.75rem 0.75rem;
color: rgba(0, 0, 0, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f5f5f5;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #ececec;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #dcdcdc;
}
.p-togglebutton.p-button {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);

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

@ -1027,10 +1027,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #B00020;
}
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(0, 0, 0, 0.6);
@ -1486,6 +1482,76 @@
border-color: 0 none;
}
.p-treeselect {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.38);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: rgba(0, 0, 0, 0.87);
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #3F51B5;
}
.p-treeselect .p-treeselect-label {
padding: 0.75rem 0.75rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
background: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-treeselect.p-invalid.p-component {
border-color: #B00020;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.375rem 0.75rem;
}
.p-treeselect-panel {
background: #ffffff;
color: rgba(0, 0, 0, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.75rem 0.75rem;
color: rgba(0, 0, 0, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f5f5f5;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #ececec;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #dcdcdc;
}
.p-togglebutton.p-button {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #a80000;
}
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #848484;
@ -1462,6 +1458,76 @@
border-color: #007ad9;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #212121;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
border-color: #007ad9;
}
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #666666;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #c8c8c8;
color: #333333;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #848484;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #a80000;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.2145rem 0.429rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #333333;
border: 1px solid #c8c8c8;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.429rem 0.857rem;
color: #333333;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f4f4f4;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #f4f4f4;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #f4f4f4;
}
.p-togglebutton.p-button {
background: #dadada;
border: 1px solid #dadada;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #a80000;
}
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #848484;
@ -1474,6 +1470,76 @@
border-color: #007ad9;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #212121;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
border-color: #007ad9;
}
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #666666;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #c8c8c8;
color: #333333;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #848484;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #a80000;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.2145rem 0.429rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #333333;
border: 1px solid #c8c8c8;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.429rem 0.857rem;
color: #333333;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f4f4f4;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #f4f4f4;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #f4f4f4;
}
.p-togglebutton.p-button {
background: #dadada;
border: 1px solid #dadada;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #a80000;
}
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #848484;
@ -1474,6 +1470,76 @@
border-color: #41b883;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #212121;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #c2e9d8;
border-color: #41b883;
}
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #666666;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #c8c8c8;
color: #333333;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #848484;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #a80000;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.2145rem 0.429rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #333333;
border: 1px solid #c8c8c8;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.429rem 0.857rem;
color: #333333;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f4f4f4;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #f4f4f4;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #f4f4f4;
}
.p-togglebutton.p-button {
background: #dadada;
border: 1px solid #dadada;

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

@ -1007,10 +1007,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #a80000;
}
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #848484;
@ -1474,6 +1470,76 @@
border-color: #007ad9;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #212121;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
border-color: #007ad9;
}
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #666666;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #c8c8c8;
color: #333333;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #848484;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #a80000;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.2145rem 0.429rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #333333;
border: 1px solid #c8c8c8;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.429rem 0.857rem;
color: #333333;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f4f4f4;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #f4f4f4;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #f4f4f4;
}
.p-togglebutton.p-button {
background: #dadada;
border: 1px solid #dadada;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #e7a3a3;
}
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #a6a6a6;
@ -1462,6 +1458,76 @@
border-color: #7B95A3;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #dadada;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 2px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #a6a6a6;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #e4e9ec;
border-color: #7B95A3;
}
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #a6a6a6;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.2145rem 0.429rem;
margin-right: 0.5rem;
background: #dadada;
color: #666666;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #a6a6a6;
width: 2.357rem;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.p-treeselect.p-invalid.p-component {
border-color: #e7a3a3;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.2145rem 0.429rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #666666;
border: 1px solid #eaeaea;
border-radius: 2px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.429rem 0.857rem;
color: #666666;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f4f4f4;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #f4f4f4;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #f4f4f4;
}
.p-togglebutton.p-button {
background: #eaeaea;
border: 1px solid #eaeaea;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #f44336;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: #6c757d;
@ -1462,6 +1458,76 @@
border-color: #2196F3;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #2196F3;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #a6d5fa;
border-color: #2196F3;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #6c757d;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #dee2e6;
color: #495057;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #6c757d;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #f44336;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #495057;
border: 0 none;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: #495057;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f8f9fa;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #f8f9fa;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #ffffff;
}
.p-togglebutton.p-button {
background: #ffffff;
border: 1px solid #ced4da;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #f44336;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: #6c757d;
@ -1462,6 +1458,76 @@
border-color: #4CAF50;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #4CAF50;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #b7e0b8;
border-color: #4CAF50;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #6c757d;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #dee2e6;
color: #495057;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #6c757d;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #f44336;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #495057;
border: 0 none;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: #495057;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f8f9fa;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #f8f9fa;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #ffffff;
}
.p-togglebutton.p-button {
background: #ffffff;
border: 1px solid #ced4da;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #f44336;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: #6c757d;
@ -1462,6 +1458,76 @@
border-color: #FFC107;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #FFC107;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ffe69c;
border-color: #FFC107;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #6c757d;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #dee2e6;
color: #495057;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #6c757d;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #f44336;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #495057;
border: 0 none;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: #495057;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f8f9fa;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #f8f9fa;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #ffffff;
}
.p-togglebutton.p-button {
background: #ffffff;
border: 1px solid #ced4da;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #f44336;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: #6c757d;
@ -1462,6 +1458,76 @@
border-color: #9C27B0;
}
.p-treeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #9C27B0;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #df9eea;
border-color: #9C27B0;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: #6c757d;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #dee2e6;
color: #495057;
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: #6c757d;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #f44336;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #ffffff;
color: #495057;
border: 0 none;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: #495057;
background: transparent;
}
.p-input-filled .p-treeselect {
background: #f8f9fa;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #f8f9fa;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #ffffff;
}
.p-togglebutton.p-button {
background: #ffffff;
border: 1px solid #ced4da;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #ef9a9a;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
@ -1462,6 +1458,76 @@
border-color: #64B5F6;
}
.p-treeselect {
background: #17212f;
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #64B5F6;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
border-color: #64B5F6;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #304562;
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #304562;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #304562;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #304562;
}
.p-togglebutton.p-button {
background: #1f2d40;
border: 1px solid #304562;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #ef9a9a;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
@ -1462,6 +1458,76 @@
border-color: #81C784;
}
.p-treeselect {
background: #17212f;
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #81C784;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
border-color: #81C784;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #304562;
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #304562;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #304562;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #304562;
}
.p-togglebutton.p-button {
background: #1f2d40;
border: 1px solid #304562;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #ef9a9a;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
@ -1462,6 +1458,76 @@
border-color: #FFD54F;
}
.p-treeselect {
background: #17212f;
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #FFD54F;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #ffe284;
border-color: #FFD54F;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #304562;
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #304562;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #304562;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #304562;
}
.p-togglebutton.p-button {
background: #1f2d40;
border: 1px solid #304562;

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

@ -1003,10 +1003,6 @@
transition-duration: 0.2s;
}
.p-float-label > label.p-error {
color: #ef9a9a;
}
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
@ -1462,6 +1458,76 @@
border-color: #BA68C8;
}
.p-treeselect {
background: #17212f;
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-treeselect:not(.p-disabled):hover {
border-color: #BA68C8;
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #cf95d9;
border-color: #BA68C8;
}
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
background: #304562;
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-treeselect.p-invalid.p-component {
border-color: #ef9a9a;
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
padding: 0.25rem 0.5rem;
}
.p-treeselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: transparent;
}
.p-input-filled .p-treeselect {
background: #304562;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #304562;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
background-color: #304562;
}
.p-togglebutton.p-button {
background: #1f2d40;
border: 1px solid #304562;

1
rollup.config.js
View File

@ -25,6 +25,7 @@ let globalDependencies = {
'primevue/message': 'primevue.message',
'primevue/dropdown': 'primevue.dropdown',
'primevue/menu': 'primevue.menu',
'primevue/tree': 'primevue.tree',
'@fullcalendar/core': 'FullCalendar'
}

36
src/assets/menu/menu.json
View File

@ -90,8 +90,7 @@
},
{
"name": "Colors",
"to": "/colors",
"badge": "New"
"to": "/colors"
},
{
"name": "SASS API",
@ -153,8 +152,7 @@
"children": [
{
"name": "AutoComplete",
"to": "/autocomplete",
"badge": "New"
"to": "/autocomplete"
},
{
"name": "Calendar",
@ -178,8 +176,7 @@
},
{
"name": "Dropdown",
"to": "/dropdown",
"badge": "New"
"to": "/dropdown"
},
{
"name": "Editor",
@ -219,13 +216,11 @@
},
{
"name": "Listbox",
"to": "/listbox",
"badge": "New"
"to": "/listbox"
},
{
"name": "MultiSelect",
"to": "/multiselect",
"badge": "New"
"to": "/multiselect"
},
{
"name": "Password",
@ -255,6 +250,11 @@
"name": "ToggleButton",
"to": "/togglebutton"
},
{
"name": "TreeSelect",
"to": "/treeselect",
"badge": "New"
},
{
"name": "TriStateCheckbox",
"to": "/tristatecheckbox"
@ -281,8 +281,7 @@
"children": [
{
"name": "Vuelidate",
"to": "/vuelidate",
"badge": "New"
"to": "/vuelidate"
}
]
},
@ -293,7 +292,6 @@
{
"name": "DataTable",
"meta": ["datatable"],
"badge": "New",
"children": [
{
"name": "Documentation",
@ -337,8 +335,7 @@
},
{
"name": "Filter",
"to": "/datatable/filter",
"badge": "New"
"to": "/datatable/filter"
},
{
"name": "Selection",
@ -350,8 +347,7 @@
},
{
"name": "Scroll",
"to": "/datatable/scroll",
"badge": "New"
"to": "/datatable/scroll"
},
{
"name": "FlexScroll",
@ -387,8 +383,7 @@
},
{
"name": "Responsive",
"to": "/datatable/responsive",
"badge": "New"
"to": "/datatable/responsive"
},
{
"name": "Export",
@ -414,8 +409,7 @@
},
{
"name": "FilterService",
"to": "/filterservice",
"badge": "New"
"to": "/filterservice"
},
{
"name": "FullCalendar",

6
src/assets/styles/app/_content.scss
View File

@ -192,6 +192,12 @@
td {
padding: 1rem;
border-bottom: 1px solid var(--surface-d);
&:first-child {
font-family: Courier New,monospace;
font-weight: 700;
color: var(--text-color-secondary);
}
}
}
}

2
src/components/dropdown/Dropdown.vue
View File

@ -2,7 +2,7 @@
<div ref="container" :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="focusInput" type="text" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
aria-haspopup="true" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
</div>
<input v-if="editable" type="text" class="p-dropdown-label p-inputtext" :disabled="disabled" @focus="onFocus" @blur="onBlur" :placeholder="placeholder" :value="editableInputValue" @input="onEditableInput"
aria-haspopup="listbox" :aria-expanded="overlayVisible">

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

@ -2,7 +2,7 @@
<div ref="container" :class="containerClass" @click="onClick">
<div class="p-hidden-accessible">
<input ref="focusInput" type="text" role="listbox" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
aria-haspopup="true" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
</div>
<div class="p-multiselect-label-container">
<div :class="labelClass">

2
src/components/tree/TreeNode.vue
View File

@ -194,7 +194,7 @@ export default {
if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
_selectionKeys[this.node.key] = {checked: false, partialChecked: true};
else
_selectionKeys[this.node.key] = {checked: false, partialChecked: false};
delete _selectionKeys[this.node.key];
}
this.$emit('checkbox-change', {

39
src/components/treeselect/TreeSelect.d.ts vendored Normal file
View File

@ -0,0 +1,39 @@
import { VNode } from 'vue';
interface TreeSelectProps {
modelValue?: any;
options?: any[];
scrollHeight?: string;
placeholder?: string;
disabled?: boolean;
tabindex?: string;
inputId?: string;
ariaLabelledBy?: string;
selectionMode?: string;
panelClass?: string;
appendTo?: string;
emptyMessage?: string;
display?: string;
metaKeySelection?: boolean;
}
declare class TreeSelect {
$props: TreeSelectProps;
$emit(eventName: 'update:modelValue', value: any): this;
$emit(eventName: 'change', value: any): this;
$emit(eventName: 'before-show'): this;
$emit(eventName: 'before-hide'): this;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$emit(eventName: 'node-select', node: any): this;
$emit(eventName: 'node-unselect', node: any): this;
$emit(eventName: 'node-expand', node: any): this;
$emit(eventName: 'node-collapse', node: any): this;
$slots: {
value: VNode[];
header: VNode[];
footer: VNode[];
}
}
export default TreeSelect;

410
src/components/treeselect/TreeSelect.vue Normal file
View File

@ -0,0 +1,410 @@
<template>
<div ref="container" :class="containerClass" @click="onClick">
<div class="p-hidden-accessible">
<input ref="focusInput" type="text" role="listbox" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
aria-haspopup="true" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
</div>
<div class="p-treeselect-label-container">
<div :class="labelClass">
<slot name="value" :value="selectedNodes" :placeholder="placeholder">
<template v-if="display === 'comma'">
{{label || 'empty'}}
</template>
<template v-else-if="display === 'chip'">
<div v-for="node of selectedNodes" class="p-treeselect-token" :key="node.key">
<span class="p-treeselect-token-label">{{node.label}}</span>
</div>
<template v-if="emptyValue">{{placeholder || 'empty'}}</template>
</template>
</slot>
</div>
</div>
<div class="p-treeselect-trigger">
<span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
</div>
<Teleport :to="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" v-if="overlayVisible" @click="onOverlayClick" :class="['p-treeselect-panel p-component', panelClass]">
<slot name="header" :value="modelValue" :options="options"></slot>
<div class="p-treeselect-items-wrapper" :style="{'max-height': scrollHeight}">
<TSTree :value="options" :selectionMode="selectionMode" @update:selectionKeys="onSelectionChange" :selectionKeys="modelValue"
:expandedKeys="expandedKeys" @update:expandedKeys="onNodeToggle" :metaKeySelection="metaKeySelection"
@node-expand="$emit('node-expand', $event)" @node-collapse="$emit('node-collapse', $event)"
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" />
<div v-if="emptyOptions" class="p-treeselect-empty-message">
<slot name="empty">{{emptyMessageText}}</slot>
</div>
</div>
<slot name="footer" :value="modelValue" :options="options"></slot>
</div>
</transition>
</Teleport>
</div>
</template>
<script>
import {ConnectedOverlayScrollHandler,DomHandler} from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import Tree from 'primevue/tree';
import Ripple from 'primevue/ripple';
export default {
emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse'],
props: {
modelValue: null,
options: Array,
scrollHeight: {
type: String,
default: '400px'
},
placeholder: String,
disabled: Boolean,
tabindex: String,
inputId: String,
ariaLabelledBy: null,
selectionMode: {
type: String,
default: 'single'
},
panelClass: {
type: String,
default: null
},
appendTo: {
type: String,
default: 'body'
},
emptyMessage: {
type: String,
default: null
},
display: {
type: String,
default: 'comma'
},
metaKeySelection: {
type: Boolean,
default: true
}
},
watch: {
modelValue() {
this.touched = false;
}
},
data() {
return {
focused: false,
overlayVisible: false,
expandedKeys: {},
touched: false
};
},
outsideClickListener: null,
resizeListener: null,
scrollHandler: null,
overlay: null,
beforeUnmount() {
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
this.overlay = null;
},
methods: {
show() {
this.$emit('before-show');
this.overlayVisible = true;
},
hide() {
this.$emit('before-hide');
this.overlayVisible = false;
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
},
onClick(event) {
if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
if (this.overlayVisible)
this.hide();
else
this.show();
this.$refs.focusInput.focus();
}
},
onSelectionChange(keys) {
this.$emit('update:modelValue', keys);
this.$emit('change', keys);
},
onNodeSelect(node) {
this.$emit('node-select', node);
if (this.selectionMode === 'single') {
this.hide();
}
},
onNodeUnselect(node) {
this.$emit('node-select', node);
},
onNodeToggle(keys) {
this.expandedKeys = keys;
this.touched = true;
},
onKeyDown(event) {
switch(event.which) {
//down
case 40:
if (!this.overlayVisible && event.altKey) {
this.show();
}
break;
//space
case 32:
if (!this.overlayVisible) {
this.show();
event.preventDefault();
}
break;
//enter and escape
case 13:
case 27:
if (this.overlayVisible) {
this.hide();
event.preventDefault();
}
break;
//tab
case 9:
this.hide();
break;
default:
break;
}
},
onOverlayEnter() {
this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
this.$emit('show');
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.$emit('hide');
this.overlay = null;
},
alignOverlay() {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && this.isOutsideClicked(event)) {
this.hide();
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
this.outsideClickListener = null;
}
},
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
if (this.overlayVisible) {
this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
},
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
isOutsideClicked(event) {
return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
},
overlayRef(el) {
this.overlay = el;
},
onOverlayClick(event) {
OverlayEventBus.emit('overlay-click', {
originalEvent: event,
target: this.$el
});
},
searchBranch(node, parentNode, keys, selectedNodes) {
if (node) {
if (this.isSelected(node, keys)) {
selectedNodes.push(node);
if (parentNode && !this.touched) {
this.expandedKeys[parentNode.key] = true;
}
delete keys[node.key];
}
if (Object.keys(keys).length && node.children) {
for (let childNode of node.children) {
this.searchBranch(childNode, node, keys, selectedNodes);
}
}
}
else {
for (let childNode of this.options) {
this.searchBranch(childNode, null, keys, selectedNodes);
}
}
},
isSelected(node, keys) {
return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];
}
},
computed: {
containerClass() {
return [
'p-treeselect p-component p-inputwrapper',
{
'p-treeselect-chip': this.display === 'chip',
'p-disabled': this.disabled,
'p-focus': this.focused,
'p-inputwrapper-filled': !this.emptyValue,
'p-inputwrapper-focus': this.focused || this.overlayVisible
}
];
},
labelClass() {
return [
'p-treeselect-label',
{
'p-placeholder': this.label === this.placeholder,
'p-treeselect-label-empty': !this.placeholder && this.emptyValue
}
];
},
selectedNodes() {
let selectedNodes = [];
if (this.modelValue && this.options) {
let keys = {...this.modelValue};
this.searchBranch(null, null, keys, selectedNodes);
}
return selectedNodes;
},
label() {
let value = this.selectedNodes;
return value.length ? value.map(node => node.label).join(', '): this.placeholder;
},
emptyMessageText() {
return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
},
emptyValue() {
return !this.modelValue || Object.keys(this.modelValue).length === 0;
},
emptyOptions() {
return !this.options || this.options.length === 0;
}
},
components: {
'TSTree': Tree
},
directives: {
'ripple': Ripple
}
}
</script>
<style>
.p-treeselect {
display: inline-flex;
cursor: pointer;
position: relative;
user-select: none;
}
.p-treeselect-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-treeselect-label-container {
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
}
.p-treeselect-label {
display: block;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
}
.p-treeselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-treeselect-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-treeselect .p-treeselect-panel {
min-width: 100%;
}
.p-treeselect-panel {
position: absolute;
}
.p-treeselect-items-wrapper {
overflow: auto;
}
.p-fluid .p-treeselect {
display: flex;
}
</style>

9
src/components/treeselect/package.json Normal file
View File

@ -0,0 +1,9 @@
{
"main": "./treeselect.cjs.js",
"module": "./treeselect.esm.js",
"unpkg": "./treeselect.min.js",
"types": "./TreeSelect.d.ts",
"browser": {
"./sfc": "./TreeSelect.vue"
}
}

2
src/main.js
View File

@ -85,6 +85,7 @@ import Textarea from './components/textarea/Textarea';
import TieredMenu from './components/tieredmenu/TieredMenu';
import Timeline from './components/timeline/Timeline';
import Tree from './components/tree/Tree';
import TreeSelect from './components/treeselect/TreeSelect';
import TreeTable from './components/treetable/TreeTable';
import Toast from './components/toast/Toast';
import ToastService from './components/toastservice/ToastService';
@ -205,6 +206,7 @@ app.component('Toast', Toast);
app.component('Toolbar', Toolbar);
app.component('ToggleButton', ToggleButton);
app.component('Tree', Tree);
app.component('TreeSelect', TreeSelect);
app.component('TreeTable', TreeTable);
app.component('TriStateCheckbox', TriStateCheckbox);
app.component('Galleria', Galleria);

5
src/router/index.js
View File

@ -706,6 +706,11 @@ const routes = [
name: 'treefilter',
component: () => import('../views/tree/TreeFilterDemo.vue')
},
{
path: '/treeselect',
name: 'treeselect',
component: () => import('../views/treeselect/TreeSelectDemo.vue')
},
{
path: '/treetable',
name: 'treetable',

64
src/views/treeselect/TreeSelectDemo.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>TreeSelect</h1>
<p>TreeSelect is a form component to choose from hierarchical data.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Single</h5>
<TreeSelect v-model="selectedNode" :options="nodes" placeholder="Select Item"></TreeSelect>
<h5>Multiple</h5>
<TreeSelect v-model="selectedNodes1" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Items"></TreeSelect>
<h5>Checkbox</h5>
<TreeSelect v-model="selectedNodes2" :options="nodes" display="chip" selectionMode="checkbox" placeholder="Select Items"></TreeSelect>
</div>
</div>
<TreeSelectDoc />
</div>
</template>
<script>
import NodeService from '../../service/NodeService';
import TreeSelectDoc from './TreeSelectDoc';
export default {
data() {
return {
nodes: null,
selectedNode: null,
selectedNodes1: null,
selectedNodes2: null
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
},
mounted() {
this.nodeService.getTreeNodes().then(data => this.nodes = data);
},
components: {
'TreeSelectDoc': TreeSelectDoc
}
}
</script>
<style scoped>
.p-treeselect {
width:19rem;
}
@media screen and (max-width: 640px) {
.p-treeselect {
width: 100%;
}
}
</style>

607
src/views/treeselect/TreeSelectDoc.vue Normal file
View File

@ -0,0 +1,607 @@
<template>
<AppDoc name="TreeSelectDemo" :sources="sources" github="treeselect/TreeSelectDemo.vue">
<h5>Import</h5>
<pre v-code.script><code>
import TreeSelect from 'primevue/treeselect';
</code></pre>
<h5>Getting Started</h5>
<p>TreeSelect component requires an array of TreeNode objects as its <i>options</i> and keys of the nodes as its value.</p>
<pre v-code><code>
&lt;TreeSelect v-model="selectedNodeKey" :options="nodes" placeholder="Select Item" /&gt;
</code></pre>
<p>In example below, nodes are retrieved from a remote data source.</p>
<pre v-code.script><code>
import NodeService from '../../service/NodeService';
export default {
data() {
return {
selectedNodeKey: null,
nodes: null
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
},
mounted() {
this.nodeService.getTreeNodes().then(data => this.nodes = data);
}
}
</code></pre>
<pre v-code.script><code>
import axios from 'axios';
export default class NodeService {
getTreeNodes() {
return axios.get('demo/data/treenodes.json').then(res => res.data.root);
}
}
</code></pre>
<p>The json response sample would be as following.</p>
<pre v-code.script><code>
{
"root": [
{
"key": "0",
"label": "Documents",
"data": "Documents Folder",
"icon": "pi pi-fw pi-inbox",
"children": [{
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "pi pi-fw pi-cog",
"children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
},
{
"key": "0-1",
"label": "Home",
"data": "Home Folder",
"icon": "pi pi-fw pi-home",
"children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
}]
},
{
"key": "1",
"label": "Events",
"data": "Events Folder",
"icon": "pi pi-fw pi-calendar",
"children": [
{ "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },
{ "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },
{ "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]
},
{
"key": "2",
"label": "Movies",
"data": "Movies Folder",
"icon": "pi pi-fw pi-star",
"children": [{
"key": "2-0",
"icon": "pi pi-fw pi-star",
"label": "Al Pacino",
"data": "Pacino Movies",
"children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]
},
{
"key": "2-1",
"label": "Robert De Niro",
"icon": "pi pi-fw pi-star",
"data": "De Niro Movies",
"children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]
}]
}
]
}
</code></pre>
<h5>TreeNode API utilized by the TreeSelect</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>key</td>
<td>any</td>
<td>null</td>
<td>Mandatory unique key of the node.</td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>null</td>
<td>Label of the node.</td>
</tr>
<tr>
<td>data</td>
<td>any</td>
<td>null</td>
<td>Data represented by the node.</td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>null</td>
<td>Type of the node to match a template.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon of the node to display next to content.</td>
</tr>
<tr>
<td>children</td>
<td>TreeNode[]</td>
<td>null</td>
<td>An array of treenodes as children.</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>null</td>
<td>Inline style of the node.</td>
</tr>
<tr>
<td>styleClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the node.</td>
</tr>
<tr>
<td>selectable</td>
<td>boolean</td>
<td>null</td>
<td>Whether the node is selectable when selection mode is enabled.</td>
</tr>
<tr>
<td>leaf</td>
<td>boolean</td>
<td>null</td>
<td>Specifies if the node has children. Used in lazy loading.</td>
</tr>
</tbody>
</table>
</div>
<h5>Selection Mode</h5>
<p>TreeSelects offers "single", "multiple" and "checkbox" alternatives for the selection behavior that is defined by the <i>selectionMode</i> option.</p>
<pre v-code><code>
&lt;TreeSelect v-model="selectedValue1" :options="nodes" selectionMode="single" placeholder="Select Item" /&gt;
&lt;TreeSelect v-model="selectedValue2" :options="nodes" selectionMode="multiple" placeholder="Select Items" /&gt;
&lt;TreeSelect v-model="selectedValue3" :options="nodes" selectionMode="checkbox" placeholder="Select Items" /&gt;
</code></pre>
<h5>Value Format</h5>
<p>Value passed to and from the TreeSelect via the v-model directive should be a an object with key-value pairs where key is the node key and
value is a boolean to indicate selection. On the other hand
in "checkbox" mode, instead of a boolean, value should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node. Best way to clarify it is prepopulating a TreeSelect with an existing value.</p>
<pre v-code.script><code>
data() {
return {
selectedValue1: {'2-1': true},
selectedValue2: {'1-1': true, '0-0-0': true},
selectedValue2: {'1': {checked: true, partialChecked: true}, '1-0': {checked: true}}
nodes: null
}
},
</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;TreeSelect v-model="selectedValue" display="chip" :options="nodes" selectionMode="multiple" placeholder="Select Items" /&gt;
</code></pre>
<h5>Templating</h5>
<p>Label of an option is used as the display text of an item by default, for custom content support define a <i>value</i> template that gets the selected nodes as a parameter.
In addition <i>header</i>, <i>footer</i> and <i>empty</i> slots are provided for further customization.</p>
<pre v-code><code><template v-pre>
&lt;TreeSelect v-model="selectedNodes" :options="nodes" placeholder="Select Items"&gt;
&lt;template #value="{value}"&gt;
Custom Content
&lt;/template&gt;
&lt;/TreeSelect&gt;
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>options</td>
<td>array</td>
<td>null</td>
<td>An array of treenodes.</td>
</tr>
<tr>
<td>scrollHeight</td>
<td>string</td>
<td>200px</td>
<td>Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>null</td>
<td>Label to display when there are no selections.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>tabindex</td>
<td>string</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Identifier of the underlying input element.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
<tr>
<td>selectionMode</td>
<td>string</td>
<td>null</td>
<td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
</tr>
<tr>
<td>panelClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the overlay panel.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>emptyMessage</td>
<td>string</td>
<td>No results found</td>
<td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
</tr>
<tr>
<td>display</td>
<td>string</td>
<td>comma</td>
<td>Defines how the selected items are displayed, valid values are "comma" and "chip".</td>
</tr>
<tr>
<td>metaKeySelection</td>
<td>boolean</td>
<td>true</td>
<td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event: Selected node keys</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>before-show</td>
<td>-</td>
<td>Callback to invoke before the overlay is shown.</td>
</tr>
<tr>
<td>before-hide</td>
<td>-</td>
<td>Callback to invoke before the overlay is hidden.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when the overlay is shown.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when the overlay is hidden.</td>
</tr>
<tr>
<td>node-select</td>
<td>node: Node instance</td>
<td>Callback to invoke when a node is selected.</td>
</tr>
<tr>
<td>node-unselect</td>
<td>node: Node instance</td>
<td>Callback to invoke when a node is unselected.</td>
</tr>
<tr>
<td>node-expand</td>
<td>node: Node instance</td>
<td>Callback to invoke when a node is expanded.</td>
</tr>
<tr>
<td>node-collapse</td>
<td>node: Node instance</td>
<td>Callback to invoke when a node is collapsed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>-</td>
<td>Shows the overlay.</td>
</tr>
<tr>
<td>Hide</td>
<td>-</td>
<td>Hides the overlay.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>value: Selected nodes <br />
placeholder: Placeholder value</td>
</tr>
<tr>
<td>header</td>
<td>value: Value of the component <br />
options: TreeNode options</td>
</tr>
<tr>
<td>footer</td>
<td>value: Value of the component <br />
options: TreeNode options</td>
</tr>
<tr>
<td>empty</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-treeselect</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-treeselect-label-container</td>
<td>Container of the label to display selected items.</td>
</tr>
<tr>
<td>p-treeselect-label</td>
<td>Label to display selected items.</td>
</tr>
<tr>
<td>p-treeselect-trigger</td>
<td>Dropdown button.</td>
</tr>
<tr>
<td>p-treeselect-panel</td>
<td>Overlay panel for items.</td>
</tr>
<tr>
<td>p-treeselect-items-wrapper</td>
<td>List container of items.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Options API Source',
content: `
<template>
<div>
<h5>Single</h5>
<TreeSelect v-model="selectedNode" :options="nodes" placeholder="Select Item"></TreeSelect>
<h5>Multiple</h5>
<TreeSelect v-model="selectedNodes1" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Items"></TreeSelect>
<h5>Checkbox</h5>
<TreeSelect v-model="selectedNodes2" :options="nodes" display="chip" selectionMode="checkbox" placeholder="Select Items"></TreeSelect>
</div>
</template>
<script>
import NodeService from './service/NodeService';
export default {
data() {
return {
nodes: null,
selectedNode: null,
selectedNodes1: null,
selectedNodes2: null
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
},
mounted() {
this.nodeService.getTreeNodes().then(data => this.nodes = data);
}
}
<\\/script>
<style lang="scss" scoped>
.p-treeselect {
width:19rem;
}
@media screen and (max-width: 640px) {
.p-treeselect {
width: 100%;
}
}
</style>`
},
'composition-api': {
tabName: 'Composition API Source',
content: `
<template>
<div>
<h5>Single</h5>
<TreeSelect v-model="selectedNode" :options="nodes" placeholder="Select Item"></TreeSelect>
<h5>Multiple</h5>
<TreeSelect v-model="selectedNodes1" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Items"></TreeSelect>
<h5>Checkbox</h5>
<TreeSelect v-model="selectedNodes2" :options="nodes" display="chip" selectionMode="checkbox" placeholder="Select Items"></TreeSelect>
</div>
</template>
<script>
import { ref, onMounted } from "vue";
import NodeService from './service/NodeService';
export default {
setup() {
onMounted(() => {
nodeService.value.getTreeNodes().then(data => options.value = data);
});
const options = ref();
const nodeService = ref(new NodeService());
const selectedNode = ref();
const selectedNodes1 = ref();
const selectedNodes2 = ref();
return { options, selectedNode, selectedNodes1, selectedNodes2 };
}
}
<\\/script>
<style lang="scss" scoped>
.p-treeselect {
width:19rem;
}
@media screen and (max-width: 640px) {
.p-treeselect {
width: 100%;
}
}
</style>`
}
}
}
}
}
</script>

1
vue.config.js
View File

@ -19,6 +19,7 @@ module.exports = {
'primevue/paginator': path.resolve(__dirname, 'src/components/paginator/Paginator.vue'),
'primevue/progressbar': path.resolve(__dirname, 'src/components/progressbar/ProgressBar.vue'),
'primevue/message': path.resolve(__dirname, 'src/components/message/Message.vue'),
'primevue/tree': path.resolve(__dirname, 'src/components/tree/Tree.vue'),
'primevue/confirmationeventbus': path.resolve(__dirname, 'src/components/confirmationeventbus/ConfirmationEventBus.js'),
'primevue/toasteventbus': path.resolve(__dirname, 'src/components/toasteventbus/ToastEventBus.js'),
'primevue/overlayeventbus': path.resolve(__dirname, 'src/components/overlayeventbus/OverlayEventBus.js'),