Refactored DataTable header-footer tokens

2024-05-25 18:09:39 +03:00 · 2024-05-25 18:09:39 +03:00 · ace2811b76
parent bd90fbb4e2
commit ace2811b76
6 changed files with 48 additions and 27 deletions
--- a/components/lib/column/Column.d.ts
+++ b/components/lib/column/Column.d.ts
@ -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.
     */
--- a/components/lib/datatable/FooterCell.vue
+++ b/components/lib/datatable/FooterCell.vue
@ -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>

--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@ -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 }) => [
--- a/components/lib/themes/aura/datatable/index.js
+++ b/components/lib/themes/aura/datatable/index.js
@ -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',
--- a/components/lib/themes/lara/datatable/index.js
+++ b/components/lib/themes/lara/datatable/index.js
@ -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',
--- a/components/lib/themes/nora/datatable/index.js
+++ b/components/lib/themes/nora/datatable/index.js
@ -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',