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

Tokens for DataTable

pull/5756/head
Cagatay Civici 2024-05-13 02:28:17 +03:00
parent 3301bfe624
commit 8d3559c9ef
6 changed files with 344 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -240,7 +240,7 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
pcFilterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>; pcFilterAddRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter buttonbar's DOM element. * Used to pass attributes to the filter buttonbar's DOM element.
*/ */

7
components/lib/datatable/ColumnFilter.vue
View File

@ -96,9 +96,8 @@
:pt="getColumnPT('pcFilterConstraintDropdown')" :pt="getColumnPT('pcFilterConstraintDropdown')"
></Select> ></Select>
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" /> <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
<div v-bind="getColumnPT('filterRemove')"> <div v-if="showRemoveIcon" v-bind="getColumnPT('filterRemove')">
<Button <Button
v-if="showRemoveIcon"
type="button" type="button"
:class="cx('pcFilterRemoveRuleButton')" :class="cx('pcFilterRemoveRuleButton')"
@click="removeConstraint(i)" @click="removeConstraint(i)"
@ -119,11 +118,11 @@
type="button" type="button"
:label="addRuleButtonLabel" :label="addRuleButtonLabel"
iconPos="left" iconPos="left"
:class="cx('pcFilterAddButton')" :class="cx('pcFilterAddRuleButton')"
@click="addConstraint()" @click="addConstraint()"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="filterButtonProps.popover.addRule" v-bind="filterButtonProps.popover.addRule"
:pt="getColumnPT('pcFilterAddButton')" :pt="getColumnPT('pcFilterAddRuleButton')"
> >
<template #icon="iconProps"> <template #icon="iconProps">
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('pcFilterAddButton')['icon']" /> <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('pcFilterAddButton')['icon']" />

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

@ -6,7 +6,7 @@ const theme = ({ dt }) => `
} }
.p-datatable-table { .p-datatable-table {
border-spacing: 0px; border-spacing: 0;
width: 100%; width: 100%;
} }
@ -24,7 +24,6 @@ const theme = ({ dt }) => `
.p-datatable-sort-icon { .p-datatable-sort-icon {
color: ${dt('datatable.sort.icon.color')}; color: ${dt('datatable.sort.icon.color')};
margin-left: 0.5rem;
transition: color ${dt('transition.duration')}; transition: color ${dt('transition.duration')};
} }
@ -36,7 +35,6 @@ const theme = ({ dt }) => `
height: 1rem; height: 1rem;
min-width: 1rem; min-width: 1rem;
line-height: 1rem; line-height: 1rem;
margin-left: 0.5rem;
} }
.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover { .p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
@ -49,17 +47,18 @@ const theme = ({ dt }) => `
} }
.p-datatable-column-sorted { .p-datatable-column-sorted {
background: ${dt('highlight.background')}; background: ${dt('datatable.header.cell.selected.background')};
color: ${dt('highlight.color')}; color: ${dt('datatable.header.cell.selected.color')};
}
.p-datatable-sortable-column:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -1px;
} }
.p-datatable-column-sorted .p-datatable-sort-icon { .p-datatable-column-sorted .p-datatable-sort-icon {
color: ${dt('highlight.color')}; color: ${dt('datatable.header.cell.selected.color')};
}
.p-datatable-sortable-column:focus-visible {
box-shadow: ${dt('datatable.header.cell.focus.ring.shadow')};
outline: ${dt('datatable.header.cell.focus.ring.width')} ${dt('datatable.header.cell.focus.ring.style')} ${dt('datatable.header.cell.focus.ring.color')};
outline-offset: ${dt('datatable.header.cell.focus.ring.offset')};
} }
.p-datatable-hoverable .p-datatable-selectable-row { .p-datatable-hoverable .p-datatable-selectable-row {
@ -110,7 +109,7 @@ const theme = ({ dt }) => `
height: 100%; height: 100%;
} }
.p-datatable-flex-scrollable>.p-datatable-table-container { .p-datatable-flex-scrollable > .p-datatable-table-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
@ -122,7 +121,6 @@ const theme = ({ dt }) => `
z-index: 1; z-index: 1;
} }
/* Resizable */
.p-datatable-resizable-table > .p-datatable-thead > tr > th, .p-datatable-resizable-table > .p-datatable-thead > tr > th,
.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
.p-datatable-resizable-table > .p-datatable-tbody > tr > td { .p-datatable-resizable-table > .p-datatable-tbody > tr > td {
@ -145,7 +143,7 @@ const theme = ({ dt }) => `
top: 0; top: 0;
right: 0; right: 0;
margin: 0; margin: 0;
width: 0.5rem; width: ${dt('datatable.column.resizer.width')};
height: 100%; height: 100%;
padding: 0px; padding: 0px;
cursor: col-resize; cursor: col-resize;
@ -155,10 +153,11 @@ const theme = ({ dt }) => `
.p-datatable-column-header-content { .p-datatable-column-header-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: ${dt('datatable.header.cell.gap')};
} }
.p-datatable-column-resize-indicator { .p-datatable-column-resize-indicator {
width: 1px; width: ${dt('datatable.resize.indicator.width')};
position: absolute; position: absolute;
z-index: 10; z-index: 10;
display: none; display: none;
@ -188,7 +187,7 @@ const theme = ({ dt }) => `
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
gap: 0.5rem; gap: ${dt('datatable.filter.inline.gap')};
} }
.p-datatable-inline-filter .p-datatable-filter-element-container { .p-datatable-inline-filter .p-datatable-filter-element-container {
@ -197,37 +196,29 @@ const theme = ({ dt }) => `
} }
.p-datatable-filter-overlay { .p-datatable-filter-overlay {
background: ${dt('datatable.filter.overlay.background')}; background: ${dt('datatable.filter.overlay.select.background')};
color: ${dt('datatable.filter.overlay.color')}; color: ${dt('datatable.filter.overlay.select.color')};
border: 1px solid ${dt('datatable.filter.overlay.border.color')}; border: 1px solid ${dt('datatable.filter.overlay.select.border.color')};
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('datatable.filter.overlay.select.border.radius')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow: ${dt('datatable.filter.overlay.select.shadow')};
min-width: 12.5rem; min-width: 12.5rem;
} }
.p-datatable-filter-constraint-list { .p-datatable-filter-constraint-list {
margin: 0; margin: 0;
list-style: none; list-style: none;
padding: 0.25rem 0.25rem; display: flex;
flex-direction: column;
padding: ${dt('datatable.filter.constraint.list.padding')};
gap: ${dt('datatable.filter.constraint.list.gap')};
} }
.p-datatable-filter-constraint { .p-datatable-filter-constraint {
margin: 2px 0; padding: ${dt('datatable.filter.constraint.padding')};
padding: 0.5rem 0.75rem;
border: 0 none;
color: ${dt('datatable.filter.constraint.color')}; color: ${dt('datatable.filter.constraint.color')};
background: transparent; border-radius: ${dt('datatable.filter.constraint.border.radius')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')},;
border-radius: ${dt('border.radius.sm')};
cursor: pointer; cursor: pointer;
} transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
.p-datatable-filter-constraint:first-child {
margin-top: 0;
}
.p-datatable-filter-constraint:last-child {
margin-bottom: 0;
} }
.p-datatable-filter-constraint-selected { .p-datatable-filter-constraint-selected {
@ -241,14 +232,19 @@ const theme = ({ dt }) => `
} }
.p-datatable-filter-constraint:focus-visible { .p-datatable-filter-constraint:focus-visible {
outline: 1px solid ${dt('focus.ring.color')}; outline: 0 none;
outline-offset: 2px; background: ${dt('datatable.filter.constraint.focus.background')};
box-shadow: 0 none; color: ${dt('datatable.filter.constraint.focus.color')};
}
.p-datatable-filter-constraint-selected:focus-visible {
outline: 0 none;
background: ${dt('datatable.filter.constraint.selected.focus.background')};
color: ${dt('datatable.filter.constraint.selected.focus.color')};
} }
.p-datatable-filter-constraint-separator { .p-datatable-filter-constraint-separator {
border-top: 1px solid ${dt('datatable.filter.constraint.separator.border.color')}; border-top: 1px solid ${dt('datatable.filter.constraint.separator.border.color')};
margin: 2px 0;
} }
.p-datatable-popover-filter { .p-datatable-popover-filter {
@ -256,18 +252,31 @@ const theme = ({ dt }) => `
margin-left: auto; margin-left: auto;
} }
.p-datatable-filter-operator { .p-datatable-filter-overlay-popover {
padding: 0; background: ${dt('datatable.filter.overlay.popover.background')};
} color: ${dt('datatable.filter.overlay.popover.color')};
border: 1px solid ${dt('datatable.filter.overlay.popover.border.color')};
.p-datatable-filter-rule-list { border-radius: ${dt('datatable.filter.overlay.popover.border.radius')};
box-shadow: ${dt('datatable.filter.overlay.popover.shadow')};
min-width: 12.5rem;
padding: ${dt('datatable.filter.overlay.popover.padding')};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: ${dt('datatable.filter.overlay.popover.gap')};
}
.p-datatable-filter-operator-dropdown {
width: 100%;
}
.p-datatable-filter-rule-list,
.p-datatable-filter-rule {
display: flex;
flex-direction: column;
gap: ${dt('datatable.filter.overlay.popover.gap')};
} }
.p-datatable-filter-rule { .p-datatable-filter-rule {
padding: 0;
border-bottom: 1px solid ${dt('datatable.filter.rule.border.color')}; border-bottom: 1px solid ${dt('datatable.filter.rule.border.color')};
} }
@ -275,33 +284,12 @@ const theme = ({ dt }) => `
border-bottom: 0 none; border-bottom: 0 none;
} }
.p-datatable-filter-constraint-dropdown {
margin-bottom: 0.5rem;
}
.p-datatable-filter-remove-rule-button {
margin-top: 0.5rem;
}
.p-datatable-filter-constraint:last-child .p-datatable-filter-remove-button {
margin-bottom: 0;
}
.p-datatable-filter-overlay-popover {
background: ${dt('datatable.filter.overlay.background')};
color: ${dt('datatable.filter.overlay.color')};
border: 1px solid ${dt('datatable.filter.overlay.border.color')};
border-radius: ${dt('border.radius.md')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
min-width: 12.5rem;
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.p-datatable-filter-add-rule-button { .p-datatable-filter-add-rule-button {
padding: 0; width: 100%;
}
.p-datatable-filter-remove-button {
width: 100%;
} }
.p-datatable-filter-buttonbar { .p-datatable-filter-buttonbar {
@ -324,51 +312,62 @@ const theme = ({ dt }) => `
} }
.p-datatable-paginator-top { .p-datatable-paginator-top {
border: solid ${dt('datatable.header.border.color')}; border-color: ${dt('datatable.paginator.top.border.color')};
border-width: 0 0 1px 0; border-style: solid;
border-width: ${dt('datatable.paginator.top.border.width')};
}
.p-datatable-paginator-bottom {
border-color: ${dt('datatable.paginator.bottom.border.color')};
border-style: solid;
border-width: ${dt('datatable.paginator.bottom.border.width')};
} }
.p-datatable-header { .p-datatable-header {
background: ${dt('datatable.header.background')}; background: ${dt('datatable.header.background')};
color: ${dt('datatable.header.color')}; color: ${dt('datatable.header.color')};
border: 1px solid ${dt('datatable.header.border.color')}; border-color: ${dt('datatable.header.border.color')};
border-width: 0 0 1px 0; border-style: solid;
padding: 0.75rem 1rem; border-width: ${dt('datatable.header.border.width')};
font-weight: 600; padding: ${dt('datatable.header.padding')};
font-weight: ${dt('datatable.header.font.weight')};
} }
.p-datatable-footer { .p-datatable-footer {
background: ${dt('datatable.footer.background')}; background: ${dt('datatable.footer.background')};
color: ${dt('datatable.footer.color')}; color: ${dt('datatable.footer.color')};
border: 1px solid ${dt('datatable.footer.border.color')}; border-color: ${dt('datatable.footer.border.color')};
border-width: 0 0 1px 0; border-style: solid;
padding: 0.75rem 1rem; border-width: ${dt('datatable.footer.border.width')};
font-weight: 600; padding: ${dt('datatable.footer.padding')};
font-weight: ${dt('datatable.footer.font.weight')};
} }
.p-datatable-thead > tr > th { .p-datatable-thead > tr > th {
text-align: left; text-align: ${dt('datatable.header.cell.text.align')};
padding: 0.75rem 1rem; padding: ${dt('datatable.header.cell.padding')};
background: ${dt('datatable.header.cell.background')}; background: ${dt('datatable.header.cell.background')};
border: 1px solid ${dt('datatable.header.cell.border.color')}; border-color: ${dt('datatable.header.cell.border.color')};
border-style: solid;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
color: ${dt('datatable.header.cell.color')}; color: ${dt('datatable.header.cell.color')};
font-weight: 600; font-weight: ${dt('datatable.header.font.weight')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
} }
.p-datatable-tbody > tr { .p-datatable-tbody > tr {
outline-color: transparent; outline-color: transparent;
background: ${dt('datatable.row.background')}; background: ${dt('datatable.row.background')};
color: ${dt('datatable.row.color')}; color: ${dt('datatable.row.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
} }
.p-datatable-tbody > tr > td { .p-datatable-tbody > tr > td {
text-align: left; text-align: left;
border: 1px solid ${dt('datatable.body.cell.border.color')}; border-color: ${dt('datatable.body.cell.border.color')};
border-style: solid;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 0.75rem 1rem; padding: ${dt('datatable.body.cell.padding')};
} }
.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover { .p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {
@ -377,34 +376,32 @@ const theme = ({ dt }) => `
} }
.p-datatable-tbody > tr.p-datatable-row-selected { .p-datatable-tbody > tr.p-datatable-row-selected {
background: ${dt('highlight.background')}; background: ${dt('datatable.row.selected.background')};
color: ${dt('highlight.color')}; color: ${dt('datatable.row.selected.color')};
} }
.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td { .p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {
border-bottom-color: ${dt('datatable.body.cell.selected.border.color')}; border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};
} }
.p-datatable-tbody > tr.p-datatable-row-selectedt > td { .p-datatable-tbody > tr.p-datatable-row-selected > td {
border-bottom-color: ${dt('datatable.body.cell.selected.border.color')}; border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};
} }
.p-datatable-tbody > tr:focus-visible { .p-datatable-tbody > tr:focus-visible,
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: -1px;
}
.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected { .p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {
outline: 1px solid ${dt('focus.ring.color')}; box-shadow: ${dt('datatable.body.cell.focus.ring.shadow')};
outline-offset: -1px; outline: ${dt('datatable.body.cell.focus.ring.width')} ${dt('datatable.body.cell.focus.ring.style')} ${dt('datatable.body.cell.focus.ring.color')};
outline-offset: ${dt('datatable.body.cell.focus.ring.offset')};
} }
.p-datatable-tfoot > tr > td { .p-datatable-tfoot > tr > td {
text-align: left; text-align: left;
padding: 0.75rem 1rem; padding: ${dt('datatable.footer.cell.padding')};
border: 1px solid ${dt('datatable.footer.cell.border.color')}; border-color: ${dt('datatable.footer.cell.border.color')};
border-style: solid;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
font-weight: 600; font-weight: ${dt('datatable.footer.cell.font.weight')};
color: ${dt('datatable.footer.cell.color')}; color: ${dt('datatable.footer.cell.color')};
background: ${dt('datatable.footer.cell.background')}; background: ${dt('datatable.footer.cell.background')};
} }
@ -413,14 +410,14 @@ const theme = ({ dt }) => `
box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')}; box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')};
} }
.p-datatable-tbody>tr.p-datatable-dragpoint-bottom > td { .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 ${dt('datatable.drop.point.color')}; box-shadow: inset 0 -2px 0 0 ${dt('datatable.drop.point.color')};
} }
.p-datatable-loading-icon { .p-datatable-loading-icon {
font-size: 2rem; font-size: ${dt('datatable.loading.icon.size')};
width: 2rem; width: ${dt('datatable.loading.icon.size')};
height: 2rem; height: ${dt('datatable.loading.icon.size')};
} }
.p-datatable-gridlines .p-datatable-header { .p-datatable-gridlines .p-datatable-header {
@ -437,8 +434,6 @@ const theme = ({ dt }) => `
.p-datatable-gridlines .p-datatable-paginator-bottom { .p-datatable-gridlines .p-datatable-paginator-bottom {
border-width: 0 1px 1px 1px; border-width: 0 1px 1px 1px;
border-style: solid;
border-color: ${dt('datatable.footer.border.color')};
} }
.p-datatable-gridlines .p-datatable-thead > tr > th { .p-datatable-gridlines .p-datatable-thead > tr > th {
@ -457,7 +452,7 @@ const theme = ({ dt }) => `
border-width: 1px 1px 0 1px; border-width: 1px 1px 0 1px;
} }
p-datatable-gridlines .p-datatable-tbody > tr:last-child>td { p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
border-width: 1px 0 1px 1px; border-width: 1px 0 1px 1px;
} }
@ -502,8 +497,8 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
} }
.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
background: ${dt('highlight.background')}); background: ${dt('datatable.row.selected.background')};
color: ${dt('highlight.color')}); color: ${dt('datatable.row.selected.color')};
} }
.p-datatable.p-datatable-sm .p-datatable-header { .p-datatable.p-datatable-sm .p-datatable-header {
@ -552,14 +547,14 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 1.75rem; width: ${dt('datatable.row.toggle.button.size')};
height: 1.75rem; height: ${dt('datatable.row.toggle.button.size')};
color: ${dt('datatable.row.toggle.button.color')}; color: ${dt('datatable.row.toggle.button.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: ${dt('datatable.row.toggle.button.border.radius')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
outline-color: transparent; outline-color: transparent;
user-select: none; user-select: none;
} }
@ -569,15 +564,18 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
background: ${dt('datatable.row.toggle.button.hover.background')}; background: ${dt('datatable.row.toggle.button.hover.background')};
} }
.p-datatable-row-toggle-button:focus-visible { .p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
outline: 1px solid ${dt('focus.ring.color')}; background: ${dt('datatable.row.toggle.button.selected.hover.background')};
outline-offset: 2px; ${dt('datatable.row.toggle.button.selected.hover.color')};
} }
.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover{ .p-datatable-row-toggle-button:focus-visible {
background: ${dt('datatable.row.toggle.button.highlight.hover.background')}; box-shadow: ${dt('datatable.row.toggle.button.focus.ring.shadow')};
color: inherit; outline: ${dt('datatable.row.toggle.button.focus.ring.width')} ${dt('datatable.row.toggle.button.focus.ring.style')} ${dt('datatable.row.toggle.button.focus.ring.color')};
outline-offset: ${dt('datatable.row.toggle.button.focus.ring.offset')};
} }
`; `;
const classes = { const classes = {
@ -660,7 +658,7 @@ const classes = {
filterRule: 'p-datatable-filter-rule', filterRule: 'p-datatable-filter-rule',
pcFilterConstraintDropdown: 'p-datatable-filter-constraint-dropdown', pcFilterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
pcFilterRemoveRuleButton: 'p-datatable-filter-remove-rule-button', pcFilterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
pcFilterAddButton: 'p-column-filter-add-button', pcFilterAddRuleButton: 'p-datatable-filter-add-rule-button',
filterButtonbar: 'p-datatable-filter-buttonbar', filterButtonbar: 'p-datatable-filter-buttonbar',
pcFilterClearButton: 'p-datatable-filter-clear-button', pcFilterClearButton: 'p-datatable-filter-clear-button',
pcFilterApplyButton: 'p-datatable-filter-apply-button', pcFilterApplyButton: 'p-datatable-filter-apply-button',

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

@ -2,28 +2,56 @@ export default {
header: { header: {
background: '{content.background}', background: '{content.background}',
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}' color: '{content.color}',
borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem',
fontWeight: '600'
}, },
headerCell: { headerCell: {
background: '{content.background}', background: '{content.background}',
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}' hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}',
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '600',
align: 'left',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '-1px',
shadow: '{focus.ring.shadow}'
}
}, },
row: { row: {
background: '{content.background}', background: '{content.background}',
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}' hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '-1px',
shadow: '{focus.ring.shadow}'
}
}, },
bodyCell: { bodyCell: {
borderColor: '{datatable.border.color}' borderColor: '{datatable.border.color}',
padding: '0.75rem 1rem'
}, },
footerCell: { footerCell: {
background: '{content.background}', background: '{content.background}',
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}' color: '{content.color}',
padding: '0.75rem 1rem',
fontWeight: '600'
}, },
footer: { footer: {
background: '{content.background}', background: '{content.background}',
@ -31,37 +59,82 @@ export default {
color: '{content.color}' color: '{content.color}'
}, },
dropPointColor: '{primary.color}', dropPointColor: '{primary.color}',
resizeIndicatorColor: '{primary.color}', columnResizerWidth: '0.5rem',
resizeIndicator: {
width: '1px',
color: '{primary.color}'
},
sortIcon: { sortIcon: {
color: '{text.muted.color}', color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}' hoverColor: '{text.hover.muted.color}'
}, },
loadingIcon: {
size: '2rem'
},
rowToggleButton: { rowToggleButton: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
highlightHoverBackground: '{content.background}', selectedHoverBackground: '{content.background}',
color: '{text.color}', color: '{text.color}',
hoverColor: '{text.muted.color}' hoverColor: '{text.muted.color}',
selectedHoverColor: '{primary.color}',
size: '1.75rem',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
}, },
filter: { filter: {
overlay: { inlineGap: '0.5rem',
background: '{content.background}', overlaySelect: {
borderColor: '{content.border.color}', background: '{overlay.select.background}',
color: '{content.color}' borderColor: '{overlay.select.border.color}',
borderRadius: '{overlay.select.border.radius}',
color: '{overlay.select.color}',
shadow: '{overlay.select.shadow}'
},
overlayPopover: {
background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}',
borderRadius: '{overlay.popover.border.radius}',
color: '{overlay.popover.color}',
shadow: '{overlay.popover.shadow}',
padding: '{overlay.popover.padding}',
gap: '0.5rem'
}, },
rule: { rule: {
borderColor: '{content.border.color}' borderColor: '{content.border.color}'
}, },
filterConstraint: { constraintList: {
hoverBackground: '{content.hover.background}', padding: '{list.padding}',
selectedBackground: '{highlight.background}', gap: '{list.gap}'
color: '{text.color}', },
hoverColor: '{text.hover.color}', constraint: {
selectedColor: '{highlight.color}', focusBackground: '{list.option.focus.background}',
selectedBackground: '{list.option.selected.background}',
selectedFocusBackground: '{list.option.selected.focus.background}',
color: '{list.option.color}',
focusColor: '{list.option.focus.color}',
selectedColor: '{list.option.selected.color}',
selectedFocusColor: '{list.option.selected.focus.color}',
separator: { separator: {
borderColor: '{content.border.color}' borderColor: '{content.border.color}'
} },
padding: '{list.option.padding}',
borderRadius: '{list.option.border.radius}'
} }
}, },
paginatorTop: {
borderColor: '{content.border.color}',
borderWidth: '0 0 1px 0'
},
paginatorBottom: {
borderColor: '{content.border.color}',
borderWidth: '0 0 1px 0'
},
colorScheme: { colorScheme: {
light: { light: {
root: { root: {

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

@ -1,72 +1,156 @@
export default { export default {
header: { header: {
background: '{content.background}',
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}' borderWidth: '1px 0 1px 0',
padding: '0.75rem 1rem',
fontWeight: '700'
}, },
headerCell: { headerCell: {
background: '{content.background}',
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', hoverColor: '{content.hover.color}',
hoverColor: '{content.hover.color}' selectedColor: '{highlight.color}',
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '700',
align: 'left',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: 'inset {focus.ring.shadow}'
}
}, },
row: { row: {
background: '{content.background}', background: '{content.background}',
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}' hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: 'inset {focus.ring.shadow}'
}
}, },
bodyCell: { bodyCell: {
borderColor: '{datatable.border.color}' borderColor: '{datatable.border.color}',
padding: '0.75rem 1rem'
}, },
footerCell: { footerCell: {
background: '{content.background}',
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}' padding: '0.75rem 1rem',
fontWeight: '700'
}, },
footer: { footer: {
background: '{content.background}',
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}' borderWidth: '0 0 1px',
padding: '0.75rem 1rem',
fontWeight: '700'
}, },
dropPointColor: '{primary.color}', dropPointColor: '{primary.color}',
resizeIndicatorColor: '{primary.color}', columnResizerWidth: '0.5rem',
resizeIndicator: {
width: '1px',
color: '{primary.color}'
},
sortIcon: { sortIcon: {
color: '{text.muted.color}', color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}' hoverColor: '{text.hover.muted.color}'
}, },
loadingIcon: {
size: '2rem'
},
rowToggleButton: { rowToggleButton: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
highlightHoverBackground: '{content.background}', selectedHoverBackground: '{content.background}',
color: '{text.color}', color: '{text.color}',
hoverColor: '{text.muted.color}' hoverColor: '{text.muted.color}',
selectedHoverColor: '{primary.color}',
size: '1.75rem',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
}, },
filter: { filter: {
overlay: { inlineGap: '0.5rem',
background: '{content.background}', overlaySelect: {
borderColor: '{content.border.color}', background: '{overlay.select.background}',
color: '{content.color}' borderColor: '{overlay.select.border.color}',
borderRadius: '{overlay.select.border.radius}',
color: '{overlay.select.color}',
shadow: '{overlay.select.shadow}'
},
overlayPopover: {
background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}',
borderRadius: '{overlay.popover.border.radius}',
color: '{overlay.popover.color}',
shadow: '{overlay.popover.shadow}',
padding: '{overlay.popover.padding}',
gap: '0.5rem'
}, },
rule: { rule: {
borderColor: '{content.border.color}' borderColor: '{content.border.color}'
}, },
filterConstraint: { constraintList: {
hoverBackground: '{content.hover.background}', padding: '{list.padding}',
selectedBackground: '{highlight.background}', gap: '{list.gap}'
color: '{text.color}', },
hoverColor: '{text.hover.color}', constraint: {
selectedColor: '{highlight.color}', focusBackground: '{list.option.focus.background}',
selectedBackground: '{list.option.selected.background}',
selectedFocusBackground: '{list.option.selected.focus.background}',
color: '{list.option.color}',
focusColor: '{list.option.focus.color}',
selectedColor: '{list.option.selected.color}',
selectedFocusColor: '{list.option.selected.focus.color}',
separator: { separator: {
borderColor: '{content.border.color}' borderColor: '{content.border.color}'
} },
padding: '{list.option.padding}',
borderRadius: '{list.option.border.radius}'
} }
}, },
paginatorTop: {
borderColor: '{content.border.color}',
borderWidth: '0 0 1px 0'
},
paginatorBottom: {
borderColor: '{content.border.color}',
borderWidth: '0 0 1px 0'
},
colorScheme: { colorScheme: {
light: { light: {
root: { root: {
borderColor: '{content.border.color}' borderColor: '{content.border.color}'
}, },
header: {
background: '{surface.100}',
color: '{text.color}'
},
headerCell: {
background: '{surface.100}',
color: '{text.color}'
},
footer: {
background: '{surface.100}',
color: '{text.color}'
},
footerCell: {
background: '{surface.100}',
color: '{text.color}'
},
row: { row: {
stripedBackground: '{surface.50}' stripedBackground: '{surface.50}'
}, },
@ -78,6 +162,22 @@ export default {
root: { root: {
borderColor: '{surface.800}' borderColor: '{surface.800}'
}, },
header: {
background: '{surface.800}',
color: '{text.color}'
},
headerCell: {
background: '{surface.800}',
color: '{text.color}'
},
footer: {
background: '{surface.800}',
color: '{text.color}'
},
footerCell: {
background: '{surface.800}',
color: '{text.color}'
},
row: { row: {
stripedBackground: '{surface.950}' stripedBackground: '{surface.950}'
}, },

2
components/lib/themes/lara/index.js
View File

@ -196,7 +196,7 @@ export default {
popover: { popover: {
borderRadius: '{border.radius.sm}', borderRadius: '{border.radius.sm}',
padding: '1rem', padding: '1rem',
shadow: '0 1px 3px rgba(0, 0, 0, 0.3)' shadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
}, },
modal: { modal: {
borderRadius: '{border.radius.lg}', borderRadius: '{border.radius.lg}',