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

Refactored tokens of Data components

pull/5701/head
Cagatay Civici 2024-05-05 00:57:50 +03:00
parent 0d488b1ba9
commit c617766c77
14 changed files with 227 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/lib/datatable/style/DataTableStyle.js
View File

@ -162,7 +162,7 @@ const theme = ({ dt }) => `
position: absolute; position: absolute;
z-index: 10; z-index: 10;
display: none; display: none;
background: ${dt('datatable.resizer.color')}; background: ${dt('datatable.resize.indicator.color')};
} }
.p-datatable-row-reorder-indicator-up, .p-datatable-row-reorder-indicator-up,
@ -215,7 +215,7 @@ const theme = ({ dt }) => `
margin: 2px 0; margin: 2px 0;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: 0 none; border: 0 none;
color: ${dt('datatable.filter.matchmode.item.color')}; color: ${dt('datatable.filter.constraint.color')};
background: transparent; background: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')},; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')},;
border-radius: ${dt('rounded.sm')}; border-radius: ${dt('rounded.sm')};
@ -231,13 +231,13 @@ const theme = ({ dt }) => `
} }
.p-datatable-filter-constraint-selected { .p-datatable-filter-constraint-selected {
background: ${dt('datatable.filter.matchmode.item.selected.background')}; background: ${dt('datatable.filter.constraint.selected.background')};
color: ${dt('datatable.filter.matchmode.item.selected.color')}; color: ${dt('datatable.filter.constraint.selected.color')};
} }
.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover { .p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover {
background: ${dt('datatable.filter.matchmode.item.focus.background')}; background: ${dt('datatable.filter.constraint.focus.background')};
color: ${dt('datatable.filter.matchmode.item.focus.color')}; color: ${dt('datatable.filter.constraint.focus.color')};
} }
.p-datatable-filter-constraint:focus-visible { .p-datatable-filter-constraint:focus-visible {
@ -247,7 +247,7 @@ const theme = ({ dt }) => `
} }
.p-datatable-filter-constraint-separator { .p-datatable-filter-constraint-separator {
border-top: 1px solid ${dt('datatable.filter.matchmode.item.separator.border.color')}; border-top: 1px solid ${dt('datatable.filter.constraint.separator.border.color')};
margin: 2px 0; margin: 2px 0;
} }
@ -268,7 +268,7 @@ const theme = ({ dt }) => `
.p-datatable-filter-rule { .p-datatable-filter-rule {
padding: 0; padding: 0;
border-bottom: 1px solid ${dt('datatable.filter.constraint.border.color')}; border-bottom: 1px solid ${dt('datatable.filter.rule.border.color')};
} }
.p-datatable-filter-rule:last-child { .p-datatable-filter-rule:last-child {
@ -554,7 +554,7 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
position: relative; position: relative;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: ${dt('datatable.row.action.color')}; color: ${dt('datatable.row.toggle.button.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -565,8 +565,8 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
} }
.p-datatable-row-toggle-button:enabled:hover { .p-datatable-row-toggle-button:enabled:hover {
color: ${dt('datatable.row.action.hover.color')}; color: ${dt('datatable.row.toggle.button.hover.color')};
background: ${dt('datatable.row.action.hover.background')}; background: ${dt('datatable.row.toggle.button.hover.background')};
} }
.p-datatable-row-toggle-button:focus-visible { .p-datatable-row-toggle-button:focus-visible {
@ -575,7 +575,7 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
} }
.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover{ .p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover{
background: ${dt('datatable.row.action.highlight.hover.background')}; background: ${dt('datatable.row.toggle.button.highlight.hover.background')};
color: inherit; color: inherit;
} }
`; `;

6
components/lib/organizationchart/style/OrganizationChartStyle.js
View File

@ -49,10 +49,10 @@ const theme = ({ dt }) => `
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
text-decoration: none; text-decoration: none;
background: ${dt('organizationchart.toggle.icon.background')}; background: ${dt('organizationchart.node.toggle.button.background')};
color: ${dt('organizationchart.toggle.icon.color')}; color: ${dt('organizationchart.node.toggle.button.color')};
border-radius: 50%; border-radius: 50%;
border: 1px solid ${dt('organizationchart.toggle.icon.border.color')}; border: 1px solid ${dt('organizationchart.node.toggle.button.border.color')};
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

6
components/lib/paginator/style/PaginatorStyle.js
View File

@ -37,7 +37,7 @@ const theme = ({ dt }) => `
position: relative; position: relative;
background: transparent; background: transparent;
border: 0 none; border: 0 none;
color: ${dt('paginator.navigator.color')}; color: ${dt('paginator.nav.button.color')};
min-width: 2.5rem; min-width: 2.5rem;
height: 2.5rem; height: 2.5rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@ -60,8 +60,8 @@ const theme = ({ dt }) => `
.p-paginator-prev:not(.p-disabled):hover, .p-paginator-prev:not(.p-disabled):hover,
.p-paginator-next:not(.p-disabled):hover, .p-paginator-next:not(.p-disabled):hover,
.p-paginator-last:not(.p-disabled):hover { .p-paginator-last:not(.p-disabled):hover {
background: ${dt('paginator.navigator.hover.background')}; background: ${dt('paginator.nav.button.hover.background')};
color: ${dt('paginator.navigator.hover.color')}; color: ${dt('paginator.nav.button.hover.color')};
} }
.p-paginator-current { .p-paginator-current {

215
components/lib/themes/aura/datatable/index.js
View File

@ -1,165 +1,88 @@
export default { export default {
header: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
headerCell: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
hoverColor: '{content.hover.color}'
},
row: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
color: '{content.color}',
hoverColor: '{content.hover.color}'
},
bodyCell: {
borderColor: '{datatable.border.color}'
},
footerCell: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
footer: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
dropPointColor: '{primary.color}',
resizeIndicatorColor: '{primary.color}',
sortIcon: {
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
rowToggleButton: {
hoverBackground: '{content.hover.background}',
highlightHoverBackground: '{content.background}',
color: '{text.color}',
hoverColor: '{text.muted.color}'
},
filter: {
overlay: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}'
},
rule: {
borderColor: '{content.border.color}'
},
filterConstraint: {
hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
color: '{text.color}',
hoverColor: '{text.hover.color}',
selectedColor: '{highlight.color}',
separator: {
borderColor: '{content.border.color}'
}
}
},
colorScheme: { colorScheme: {
light: { light: {
header: { root: {
background: '{surface.0}', borderColor: '{content.border.color}'
borderColor: '{surface.200}',
color: '{surface.700}'
},
headerCell: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
borderColor: '{surface.200}',
color: '{surface.700}',
hoverColor: '{surface.800}'
}, },
row: { row: {
background: '{surface.0}', stripedBackground: '{surface.50}'
stripedBackground: '{surface.50}',
hoverBackground: '{surface.100}',
color: '{surface.700}',
hoverColor: '{surface.800}'
}, },
bodyCell: { bodyCell: {
borderColor: '{surface.200}',
selectedBorderColor: '{primary.100}' selectedBorderColor: '{primary.100}'
},
footerCell: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
},
footer: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
},
dropPointColor: '{primary.color}',
resizerColor: '{primary.color}',
sortIcon: {
color: '{surface.500}',
hoverColor: '{surface.600}'
},
rowAction: {
hoverBackground: '{surface.100}',
highlightHoverBackground: '{surface.0}',
color: '{surface.500}',
hoverColor: '{surface.500}'
},
filter: {
menuButton: {
hoverBackground: '{surface.100}',
openBackground: '{surface.100}',
activeBackground: '{highlight.background}',
color: '{surface.500}',
openColor: '{surface.500}',
hoverColor: '{surface.600}',
activeColor: '{highlight.color}'
},
clearButton: {
hoverBackground: '{surface.100}',
color: '{surface.500}',
hoverColor: '{surface.600}'
},
overlay: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
},
constraint: {
borderColor: '{surface.200}'
},
matchmodeItem: {
focusBackground: '{surface.100}',
selectedBackground: '{highlight.background}',
color: '{surface.700}',
focusColor: '{surface.800}',
selectedColor: '{highlight.color}',
separator: {
borderColor: '{surface.200}'
}
}
} }
}, },
dark: { dark: {
header: { root: {
background: '{surface.900}', borderColor: '{surface.800}'
borderColor: '{surface.800}',
color: '{surface.0}'
},
headerCell: {
background: '{surface.900}',
hoverBackground: '{surface.800}',
borderColor: '{surface.800}',
color: '{surface.0}',
hoverColor: '{surface.0}'
}, },
row: { row: {
background: '{surface.900}', stripedBackground: '{surface.950}'
stripedBackground: '{surface.950}',
hoverBackground: '{surface.800}',
color: '{surface.0}',
hoverColor: '{surface.0}'
}, },
bodyCell: { bodyCell: {
borderColor: '{surface.800}',
selectedBorderColor: '{primary.900}' selectedBorderColor: '{primary.900}'
},
footerCell: {
background: '{surface.900}',
borderColor: '{surface.800}',
color: '{surface.0}'
},
footer: {
background: '{surface.900}',
borderColor: '{surface.800}',
color: '{surface.0}'
},
dropPointColor: '{primary.color}',
resizerColor: '{primary.color}',
sortIcon: {
color: '{surface.400}',
hoverColor: '{surface.300}'
},
rowAction: {
hoverBackground: '{surface.800}',
highlightHoverBackground: '{surface.900}',
color: '{surface.400}',
hoverColor: '{surface.300}'
},
filter: {
menuButton: {
hoverBackground: '{surface.800}',
openBackground: '{surface.800}',
activeBackground: '{highlight.background}',
color: '{surface.400}',
openColor: '{surface.300}',
hoverColor: '{surface.300}',
activeColor: '{highlight.color}'
},
clearButton: {
hoverBackground: '{surface.800}',
color: '{surface.400}',
hoverColor: '{surface.300}'
},
overlay: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{surface.0}'
},
constraint: {
borderColor: '{surface.700}'
},
matchmodeItem: {
focusBackground: '{surface.800}',
selectedBackground: '{highlight.background}',
color: '{surface.0}',
focusColor: '{surface.0}',
selectedColor: '{highlight.color}',
separator: {
borderColor: '{surface.700}'
}
}
} }
} }
} }

46
components/lib/themes/aura/dataview/index.js
View File

@ -1,36 +1,16 @@
export default { export default {
colorScheme: { header: {
light: { background: '{content.background}',
header: { borderColor: '{content.border.color}',
background: '{surface.0}', color: '{content.color}'
borderColor: '{surface.200}', },
color: '{surface.700}' content: {
}, background: '{content.background}',
content: { color: '{content.color}'
background: '{surface.0}', },
color: '{surface.700}' footer: {
}, background: '{content.background}',
footer: { borderColor: '{content.border.color}',
background: '{surface.0}', color: '{content.color}'
borderColor: '{surface.200}',
color: '{surface.700}'
}
},
dark: {
header: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{surface.0}'
},
content: {
background: '{surface.900}',
color: '{surface.0}'
},
footer: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{surface.0}'
}
}
} }
}; };

49
components/lib/themes/aura/organizationchart/index.js
View File

@ -1,38 +1,17 @@
export default { export default {
colorScheme: { node: {
light: { background: '{content.background}',
node: { hoverBackground: '{content.hover.background}',
background: '{surface.0}', borderColor: '{content.border.color}',
hoverBackground: '{surface.100}', color: '{text.color}',
borderColor: '{surface.200}', hoverColor: '{text.hover.color}'
color: '{surface.700}', },
hoverColor: '{surface.800}' nodeToggleButton: {
}, background: '{content.background}',
toggleIcon: { borderColor: '{content.border.color}',
background: '{surface.0}', color: '{text.muted.color}'
borderColor: '{surface.200}', },
color: '{surface.500}' connector: {
}, color: '{content.border.color}'
connector: {
color: '{surface.200}'
}
},
dark: {
node: {
background: '{surface.900}',
hoverBackground: '{surface.800}',
borderColor: '{surface.700}',
color: '{surface.0}',
hoverColor: '{surface.0}'
},
toggleIcon: {
background: '{surface.800}',
borderColor: '{surface.700}',
color: '{surface.400}'
},
connector: {
color: '{surface.700}'
}
}
} }
}; };

40
components/lib/themes/aura/paginator/index.js
View File

@ -1,32 +1,14 @@
export default { export default {
colorScheme: { root: {
light: { background: '{content.background}',
root: { color: '{content.color}'
background: '{surface.0}', },
color: '{surface.700}' navButton: {
}, hoverBackground: '{content.hover.background}',
navigator: { color: '{text.muted.color}',
hoverBackground: '{surface.100}', hoverColor: '{text.hover.muted.color}'
color: '{surface.500}', },
hoverColor: '{surface.600}' currentPageReport: {
}, color: '{text.muted.color}'
currentPageReport: {
color: '{surface.500}'
}
},
dark: {
root: {
background: '{surface.900}',
color: '{surface.0}'
},
navigator: {
hoverBackground: '{surface.800}',
color: '{surface.400}',
hoverColor: '{surface.300}'
},
currentPageReport: {
color: '{surface.400}'
}
}
} }
}; };

28
components/lib/themes/aura/timeline/index.js
View File

@ -1,24 +1,10 @@
export default { export default {
colorScheme: { eventMarker: {
light: { background: '{content.background}',
marker: { borderColor: '{content.border.color}',
background: '{surface.0}', contentColor: '{primary.color}'
borderColor: '{surface.200}', },
contentColor: '{primary.color}' eventConnector: {
}, color: '{content.border.color}'
connector: {
color: '{surface.200}'
}
},
dark: {
marker: {
background: '{surface.900}',
borderColor: '{surface.700}',
contentColor: '{primary.color}'
},
connector: {
color: '{surface.700}'
}
}
} }
}; };

70
components/lib/themes/aura/tree/index.js
View File

@ -1,52 +1,24 @@
export default { export default {
colorScheme: { root: {
light: { background: '{content.background}',
root: { color: '{content.color}'
background: '{surface.0}', },
color: '{surface.700}' node: {
}, hoverBackground: '{content.hover.background}',
node: { color: '{text.color}',
hoverBackground: '{surface.100}', hoverColor: '{text.hover.color}'
color: '{surface.700}', },
hoverColor: '{surface.800}' nodeIcon: {
}, color: '{text.muted.color}',
nodeIcon: { hoverColor: '{text.hover.muted.color}'
color: '{surface.500}', },
hoverColor: '{surface.600}' nodeToggleButton: {
}, hoverBackground: '{content.hover.background}',
toggle: { highlightHoverBackground: '{content.background}',
hoverBackground: '{surface.100}', color: '{text.muted.color}',
highlightHoverBackground: '{surface.0}', hoverColor: '{text.hover.muted.color}'
color: '{surface.500}', },
hoverColor: '{surface.600}' filterIcon: {
}, color: '{surface.400}'
filterIcon: {
color: '{surface.400}'
}
},
dark: {
root: {
background: '{surface.900}',
color: '{surface.0}'
},
node: {
hoverBackground: '{surface.800}',
color: '{surface.0}',
hoverColor: '{surface.0}'
},
nodeIcon: {
color: '{surface.400}',
hoverColor: '{surface.300}'
},
toggle: {
hoverBackground: '{surface.800}',
highlightHoverBackground: '{surface.900}',
color: '{surface.400}',
hoverColor: '{surface.300}'
},
filterIcon: {
color: '{surface.400}'
}
}
} }
}; };

122
components/lib/themes/aura/treetable/index.js
View File

@ -1,93 +1,67 @@
export default { export default {
header: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
headerCell: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
hoverColor: '{content.hover.color}'
},
row: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
color: '{content.color}',
hoverColor: '{content.hover.color}'
},
bodyCell: {
borderColor: '{datatable.border.color}'
},
footerCell: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
footer: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
resizeIndicatorColor: '{primary.color}',
sortIcon: {
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
nodeToggleButton: {
hoverBackground: '{content.hover.background}',
highlightHoverBackground: '{content.background}',
color: '{text.color}',
hoverColor: '{text.muted.color}'
},
colorScheme: { colorScheme: {
light: { light: {
header: { root: {
background: '{surface.0}', borderColor: '{content.border.color}'
borderColor: '{surface.200}',
color: '{surface.700}'
},
headerCell: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
borderColor: '{surface.200}',
color: '{surface.700}',
hoverColor: '{surface.800}'
}, },
row: { row: {
background: '{surface.0}', stripedBackground: '{surface.50}'
hoverBackground: '{surface.100}',
color: '{surface.700}',
hoverColor: '{surface.800}'
}, },
bodyCell: { bodyCell: {
borderColor: '{surface.200}',
selectedBorderColor: '{primary.100}' selectedBorderColor: '{primary.100}'
},
footerCell: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
},
footer: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
},
resizerColor: '{primary.color}',
sortIcon: {
color: '{surface.500}',
hoverColor: '{surface.600}'
},
rowAction: {
hoverBackground: '{surface.100}',
highlightHoverBackground: '{surface.0}',
color: '{surface.500}',
hoverColor: '{surface.500}'
} }
}, },
dark: { dark: {
header: { root: {
background: '{surface.900}', borderColor: '{surface.800}'
borderColor: '{surface.800}',
color: '{surface.0}'
},
headerCell: {
background: '{surface.900}',
hoverBackground: '{surface.800}',
borderColor: '{surface.800}',
color: '{surface.0}',
hoverColor: '{surface.0}'
}, },
row: { row: {
background: '{surface.900}', stripedBackground: '{surface.950}'
hoverBackground: '{surface.800}',
color: '{surface.0}',
hoverColor: '{surface.0}'
}, },
bodyCell: { bodyCell: {
borderColor: '{surface.800}',
selectedBorderColor: '{primary.900}' selectedBorderColor: '{primary.900}'
},
footerCell: {
background: '{surface.900}',
borderColor: '{surface.800}',
color: '{surface.0}'
},
footer: {
background: '{surface.900}',
borderColor: '{surface.800}',
color: '{surface.0}'
},
resizerColor: '{primary.color}',
sortIcon: {
color: '{surface.400}',
hoverColor: '{surface.300}'
},
rowAction: {
hoverBackground: '{surface.800}',
highlightHoverBackground: '{surface.900}',
color: '{surface.400}',
hoverColor: '{surface.300}'
} }
} }
} }

8
components/lib/timeline/style/TimelineStyle.js
View File

@ -89,11 +89,11 @@ const theme = ({ dt }) => `
justify-content: center; justify-content: center;
position: relative; position: relative;
align-self: baseline; align-self: baseline;
border: 2px solid ${dt('timeline.marker.border.color')}; border: 2px solid ${dt('timeline.event.marker.border.color')};
border-radius: 50%; border-radius: 50%;
width: 1.125rem; width: 1.125rem;
height: 1.125rem; height: 1.125rem;
background-color: ${dt('timeline.marker.background')}; background-color: ${dt('timeline.event.marker.background')};
} }
.p-timeline-event-marker::before { .p-timeline-event-marker::before {
@ -101,7 +101,7 @@ const theme = ({ dt }) => `
border-radius: 50%; border-radius: 50%;
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
background: ${dt('timeline.marker.content.color')}; background: ${dt('timeline.event.marker.content.color')};
} }
.p-timeline-event-marker::after { .p-timeline-event-marker::after {
@ -115,7 +115,7 @@ const theme = ({ dt }) => `
.p-timeline-event-connector { .p-timeline-event-connector {
flex-grow: 1; flex-grow: 1;
background-color: ${dt('timeline.connector.color')}; background-color: ${dt('timeline.event.connector.color')};
} }
.p-timeline-horizontal { .p-timeline-horizontal {

14
components/lib/tree/style/TreeStyle.js
View File

@ -62,7 +62,7 @@ const theme = ({ dt }) => `
margin: 0 0.5rem 0 0; margin: 0 0.5rem 0 0;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: ${dt('tree.toggle.color')}; color: ${dt('tree.node.toggle.button.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
@ -72,8 +72,8 @@ const theme = ({ dt }) => `
} }
.p-tree-node-toggle-button:enabled:hover { .p-tree-node-toggle-button:enabled:hover {
background: ${dt('tree.toggle.hover.background')}; background: ${dt('tree.node.toggle.button.hover.background')};
color: ${dt('tree.toggle.hover.color')}; color: ${dt('tree.node.toggle.button.hover.color')};
} }
.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button, .p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button,
@ -82,7 +82,7 @@ const theme = ({ dt }) => `
} }
.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover { .p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {
background: ${dt('tree.toggle.highlight.hover.background')}; background: ${dt('tree.node.toggle.button.highlight.hover.background')};
} }
.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover { .p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {
@ -91,11 +91,11 @@ const theme = ({ dt }) => `
} }
.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-toggle-button { .p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-toggle-button {
color: ${dt('tree.toggle.hover.color')}; color: ${dt('tree.node.toggle.button.hover.color')};
} }
.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon { .p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {
color: ${dt('tree.icon.hover.color')}; color: ${dt('tree.node.icon.hover.color')};
} }
.p-tree-node-children { .p-tree-node-children {
@ -120,7 +120,7 @@ const theme = ({ dt }) => `
.p-tree-node-icon { .p-tree-node-icon {
margin-right: 0.5rem; margin-right: 0.5rem;
color: ${dt('tree.icon.color')}; color: ${dt('tree.node.icon.color')};
transition: color ${dt('transition.duration')}; transition: color ${dt('transition.duration')};
} }

6
components/lib/treetable/BodyCell.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" :data-p-frozen-column="columnProp('frozen')"> <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" :data-p-frozen-column="columnProp('frozen')">
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggleButton')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggleButton')" data-pc-group-section="rowactionbutton"> <button v-if="columnProp('expander')" v-ripple type="button" :class="cx('nodeToggleButton')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('nodeToggleButton')" data-pc-group-section="rowactionbutton">
<template v-if="node.loading && loadingMode === 'icon'"> <template v-if="node.loading && loadingMode === 'icon'">
<component v-if="templates['nodetoggleicon']" :is="templates['nodetoggleicon']" /> <component v-if="templates['nodetoggleicon']" :is="templates['nodetoggleicon']" />
<!-- TODO: Deprecated since v4.0--> <!-- TODO: Deprecated since v4.0-->
@ -19,12 +19,12 @@
v-if="checkboxSelectionMode && columnProp('expander')" v-if="checkboxSelectionMode && columnProp('expander')"
:modelValue="checked" :modelValue="checked"
:binary="true" :binary="true"
:class="cx('rowCheckbox')" :class="cx('nodeCheckbox')"
@change="toggleCheckbox" @change="toggleCheckbox"
:tabindex="-1" :tabindex="-1"
:indeterminate="partialChecked" :indeterminate="partialChecked"
:unstyled="unstyled" :unstyled="unstyled"
:pt="getColumnCheckboxPT('rowCheckbox')" :pt="getColumnCheckboxPT('nodeCheckbox')"
:data-p-partialchecked="partialChecked" :data-p-partialchecked="partialChecked"
> >
<template #icon="slotProps"> <template #icon="slotProps">

24
components/lib/treetable/style/TreeTableStyle.js
View File

@ -162,7 +162,7 @@ const theme = ({ dt }) => `
position: absolute; position: absolute;
z-index: 10; z-index: 10;
display: none; display: none;
background: ${dt('treetable.resizer.color')}; background: ${dt('treetable.resize.indicator.color')};
} }
.p-treetable-row-reorder-indicator-up, .p-treetable-row-reorder-indicator-up,
@ -411,7 +411,7 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
padding: 0.9375rem 1.25rem; padding: 0.9375rem 1.25rem;
} }
.p-treetable-row-toggle-button { .p-treetable-node-toggle-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -419,7 +419,7 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
position: relative; position: relative;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: ${dt('treetable.row.action.color')}; color: ${dt('treetable.node.toggle.button.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -430,18 +430,18 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.p-treetable-row-toggle-button:enabled:hover { .p-treetable-node-toggle-button:enabled:hover {
color: ${dt('treetable.row.action.hover.color')}; color: ${dt('treetable.node.toggle.button.hover.color')};
background: ${dt('treetable.row.action.hover.background')}; background: ${dt('treetable.node.toggle.button.hover.background')};
} }
.p-treetable-row-toggle-button:focus-visible { .p-treetable-node-toggle-button:focus-visible {
outline: 1px solid ${dt('focus.ring.color')}; outline: 1px solid ${dt('focus.ring.color')};
outline-offset: 2px; outline-offset: 2px;
} }
.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-row-toggle-button:hover{ .p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover{
background: ${dt('treetable.row.action.highlight.hover.background')}; background: ${dt('treetable.node.toggle.button.highlight.hover.background')};
color: inherit; color: inherit;
} }
@ -503,9 +503,9 @@ const classes = {
'p-treetable-frozen-column': instance.columnProp('frozen') 'p-treetable-frozen-column': instance.columnProp('frozen')
} }
], ],
rowToggleButton: 'p-treetable-row-toggle-button', nodeToggleButton: 'p-treetable-node-toggle-button',
rowToggleIcon: 'p-treetable-row-toggle-icon', nodeToggleIcon: 'p-treetable-node-toggle-icon',
rowCheckbox: 'p-treetable-row-checkbox', nodeCheckbox: 'p-treetable-node-checkbox',
emptyMessage: 'p-treetable-empty-message', emptyMessage: 'p-treetable-empty-message',
tfoot: 'p-treetable-tfoot', tfoot: 'p-treetable-tfoot',
footerCell: ({ instance }) => [ footerCell: ({ instance }) => [