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

Refactored DataTable header-footer tokens

pull/5806/head
Cagatay Civici 2024-05-25 18:09:39 +03:00
parent bd90fbb4e2
commit ace2811b76
6 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/column/Column.d.ts vendored
View File

@ -296,6 +296,10 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the footer cell's DOM element.
*/
footerCell?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the footer content DOM element.
*/
columnFooter?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the body cell content's DOM element.
*/

2
components/lib/datatable/FooterCell.vue
View File

@ -1,7 +1,7 @@
<template>
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }" :data-p-frozen-column="columnProp('frozen')">
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
{{ columnProp('footer') }}
<span v-if="columnProp('footer')" :class="cx('columnFooter')" v-bind="getColumnPT('columnFooter')">{{ columnProp('footer') }}</span>
</td>
</template>

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

@ -164,7 +164,8 @@ const theme = ({ dt }) => `
color: ${dt('datatable.filter.constraint.color')};
border-radius: ${dt('datatable.filter.constraint.border.radius')};
cursor: pointer;
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
box-shadow ${dt('datatable.transition.duration')};
}
.p-datatable-filter-constraint-selected {
@ -276,7 +277,6 @@ const theme = ({ dt }) => `
border-style: solid;
border-width: ${dt('datatable.header.border.width')};
padding: ${dt('datatable.header.padding')};
font-weight: ${dt('datatable.header.font.weight')};
}
.p-datatable-footer {
@ -286,7 +286,6 @@ const theme = ({ dt }) => `
border-style: solid;
border-width: ${dt('datatable.footer.border.width')};
padding: ${dt('datatable.footer.padding')};
font-weight: ${dt('datatable.footer.font.weight')};
}
.p-datatable-header-cell {
@ -296,15 +295,22 @@ const theme = ({ dt }) => `
border-style: solid;
border-width: 0 0 1px 0;
color: ${dt('datatable.header.cell.color')};
font-weight: ${dt('datatable.header.font.weight')};
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
font-weight: normal;
text-align: left;
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
}
.p-datatable-column-title {
font-weight: ${dt('datatable.column.title.font.weight')};
}
.p-datatable-tbody > tr {
outline-color: transparent;
background: ${dt('datatable.row.background')};
color: ${dt('datatable.row.color')};
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
}
.p-datatable-tbody > tr > td {
@ -346,11 +352,14 @@ const theme = ({ dt }) => `
border-color: ${dt('datatable.footer.cell.border.color')};
border-style: solid;
border-width: 0 0 1px 0;
font-weight: ${dt('datatable.footer.cell.font.weight')};
color: ${dt('datatable.footer.cell.color')};
background: ${dt('datatable.footer.cell.background')};
}
.p-datatable-column-footer {
font-weight: ${dt('datatable.column.footer.font.weight')};
}
.p-datatable-sortable-column {
cursor: pointer;
user-select: none;
@ -544,7 +553,8 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
background: transparent;
cursor: pointer;
border-radius: ${dt('datatable.row.toggle.button.border.radius')};
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
outline-color: transparent;
user-select: none;
}
@ -616,6 +626,7 @@ const classes = {
columnResizer: 'p-datatable-column-resizer',
columnHeaderContent: 'p-datatable-column-header-content',
columnTitle: 'p-datatable-column-title',
columnFooter: 'p-datatable-column-footer',
sortIcon: 'p-datatable-sort-icon',
pcSortBadge: 'p-datatable-sort-badge',
filter: ({ props }) => [

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

@ -8,7 +8,6 @@ export default {
color: '{content.color}',
borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem',
fontWeight: '600'
},
headerCell: {
background: '{content.background}',
@ -20,7 +19,6 @@ export default {
selectedColor: '{highlight.color}',
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '600',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
@ -29,6 +27,9 @@ export default {
shadow: '{focus.ring.shadow}'
}
},
columnTitle: {
fontWeight: '600',
},
row: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
@ -52,16 +53,17 @@ export default {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
padding: '0.75rem 1rem',
fontWeight: '600'
padding: '0.75rem 1rem'
},
columnFooter: {
fontWeight: '600',
},
footer: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem',
fontWeight: '600'
padding: '0.75rem 1rem'
},
dropPointColor: '{primary.color}',
columnResizerWidth: '0.5rem',

14
components/lib/themes/lara/datatable/index.js
View File

@ -5,8 +5,7 @@ export default {
header: {
borderColor: '{datatable.border.color}',
borderWidth: '1px 0 1px 0',
padding: '0.75rem 1rem',
fontWeight: '700'
padding: '0.75rem 1rem'
},
headerCell: {
selectedBackground: '{highlight.background}',
@ -15,7 +14,6 @@ export default {
selectedColor: '{highlight.color}',
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '700',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
@ -24,6 +22,9 @@ export default {
shadow: 'inset {focus.ring.shadow}'
}
},
columnTitle: {
fontWeight: '700'
},
row: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
@ -45,14 +46,15 @@ export default {
},
footerCell: {
borderColor: '{datatable.border.color}',
padding: '0.75rem 1rem',
padding: '0.75rem 1rem'
},
columnFooter: {
fontWeight: '700'
},
footer: {
borderColor: '{datatable.border.color}',
borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem',
fontWeight: '700'
padding: '0.75rem 1rem'
},
dropPointColor: '{primary.color}',
columnResizerWidth: '0.5rem',

14
components/lib/themes/nora/datatable/index.js
View File

@ -7,8 +7,7 @@ export default {
borderColor: '{datatable.border.color}',
color: '{content.color}',
borderWidth: '1px 0 1px 0',
padding: '0.75rem 1rem',
fontWeight: '700'
padding: '0.75rem 1rem'
},
headerCell: {
background: '{content.background}',
@ -20,7 +19,6 @@ export default {
selectedColor: '{highlight.color}',
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '700',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
@ -29,6 +27,9 @@ export default {
shadow: '{focus.ring.shadow}'
}
},
columnTitle: {
fontWeight: '700'
},
row: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
@ -52,7 +53,9 @@ export default {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
padding: '0.75rem 1rem',
padding: '0.75rem 1rem'
},
columnFooter: {
fontWeight: '700'
},
footer: {
@ -60,8 +63,7 @@ export default {
borderColor: '{datatable.border.color}',
color: '{content.color}',
borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem',
fontWeight: '700'
padding: '0.75rem 1rem'
},
dropPointColor: '{primary.color}',
columnResizerWidth: '0.5rem',