566 lines
16 KiB
TypeScript
566 lines
16 KiB
TypeScript
import { cssManager, css, type CSSResult } from '@design.estate/dees-element';
|
|
import { cssGeistFontFamily } from '../../00fonts.js';
|
|
import { themeDefaultStyles } from '../../00theme.js';
|
|
|
|
export const tableStyles: CSSResult[] = [
|
|
themeDefaultStyles,
|
|
cssManager.defaultStyles,
|
|
css`
|
|
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
|
|
:host {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
dees-tile {
|
|
color: var(--dees-color-text-primary);
|
|
font-family: ${cssGeistFontFamily};
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
cursor: default;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
height: 40px;
|
|
}
|
|
|
|
.headingContainer {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.heading {
|
|
line-height: 1;
|
|
}
|
|
|
|
.heading1 {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--dees-color-text-secondary);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.heading2 {
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.headingSeparation {
|
|
display: none;
|
|
}
|
|
|
|
.headerActions {
|
|
user-select: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 8px;
|
|
}
|
|
|
|
.headerAction {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--dees-color-text-muted);
|
|
background: transparent;
|
|
border: 1px solid var(--dees-color-border-default);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.headerAction:hover {
|
|
color: var(--dees-color-text-primary);
|
|
background: var(--dees-color-hover);
|
|
border-color: var(--dees-color-border-strong);
|
|
}
|
|
|
|
.headerAction dees-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.searchGrid {
|
|
display: grid;
|
|
grid-gap: 16px;
|
|
grid-template-columns: 1fr max-content;
|
|
padding: 16px 24px;
|
|
background: var(--dees-color-bg-secondary);
|
|
border-bottom: 1px solid var(--dees-color-border-default);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.searchGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* let search mode size to content (no forced width) */
|
|
|
|
.searchGrid.hidden {
|
|
height: 0px;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
padding: 0px 24px;
|
|
border-bottom-width: 0px;
|
|
}
|
|
|
|
/* Default mode (Mode B, page sticky): horizontal scroll lives on
|
|
.tableScroll (so wide tables don't get clipped by an ancestor
|
|
overflow:hidden such as dees-tile). Vertical sticky is handled by
|
|
a JS-managed floating header (.floatingHeader, position:fixed),
|
|
which is unaffected by ancestor overflow. */
|
|
.tableScroll {
|
|
position: relative;
|
|
overflow-x: auto;
|
|
overflow-y: visible;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
/* Mode A, internal scroll: opt-in via fixed-height attribute.
|
|
The table scrolls inside its own box and the header sticks via plain CSS sticky. */
|
|
:host([fixed-height]) .tableScroll {
|
|
max-height: var(--table-max-height, 360px);
|
|
overflow: auto;
|
|
scrollbar-gutter: stable both-edges;
|
|
}
|
|
:host([fixed-height]) .tableScroll::-webkit-scrollbar:horizontal {
|
|
height: 0px;
|
|
}
|
|
|
|
/* Floating header overlay (Mode B). Position is managed by JS so it
|
|
escapes any ancestor overflow:hidden (position:fixed is not clipped
|
|
by overflow ancestors). */
|
|
.floatingHeader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
.floatingHeader.active {
|
|
visibility: visible;
|
|
}
|
|
.floatingHeader table {
|
|
margin: 0;
|
|
}
|
|
.floatingHeader th {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
table {
|
|
/* allow table to grow wider than container so actions column can stick */
|
|
width: max-content;
|
|
min-width: 100%;
|
|
caption-side: bottom;
|
|
font-size: 14px;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.noDataSet {
|
|
padding: 48px 24px;
|
|
text-align: center;
|
|
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
|
|
}
|
|
|
|
thead {
|
|
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
|
|
border-bottom: 1px solid var(--dees-color-border-strong);
|
|
}
|
|
/* th needs its own background so sticky cells paint over scrolled rows
|
|
(browsers don't paint the <thead> box behind a sticky <th>). */
|
|
th {
|
|
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
|
|
}
|
|
/* Mode A — internal scroll sticky */
|
|
:host([fixed-height]) thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
:host([fixed-height]) thead tr.filtersRow th {
|
|
top: 36px; /* matches th { height: 36px } below */
|
|
}
|
|
|
|
tbody tr {
|
|
transition: background-color 0.15s ease;
|
|
position: relative;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Default horizontal lines (bottom border only) */
|
|
tbody tr {
|
|
border-bottom: 1px solid var(--dees-color-border-default);
|
|
}
|
|
|
|
tbody tr:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Full horizontal lines when enabled */
|
|
:host([show-horizontal-lines]) tbody tr {
|
|
border-top: 1px solid var(--dees-color-border-default);
|
|
border-bottom: 1px solid var(--dees-color-border-default);
|
|
}
|
|
|
|
:host([show-horizontal-lines]) tbody tr:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
:host([show-horizontal-lines]) tbody tr:last-child {
|
|
border-bottom: 1px solid var(--dees-color-border-default);
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.06)', 'hsl(217.2 91.2% 59.8% / 0.08)')};
|
|
}
|
|
|
|
/* Column hover effect for better traceability */
|
|
td {
|
|
position: relative;
|
|
}
|
|
|
|
td::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.05)')};
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.15s ease;
|
|
z-index: -1;
|
|
}
|
|
|
|
td:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Grid mode - shows both vertical and horizontal lines */
|
|
:host([show-grid]) th {
|
|
border: 1px solid var(--dees-color-border-default);
|
|
border-left: none;
|
|
border-top: none;
|
|
}
|
|
|
|
:host([show-grid]) td {
|
|
border: 1px solid var(--dees-color-border-default);
|
|
border-left: none;
|
|
border-top: none;
|
|
}
|
|
|
|
:host([show-grid]) tbody tr:first-child td {
|
|
border-top: none;
|
|
}
|
|
|
|
/* Remove edge borders that would double with tile frame */
|
|
:host([show-grid]) th:last-child,
|
|
:host([show-grid]) td:last-child {
|
|
border-right: none;
|
|
}
|
|
:host([show-grid]) tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Sticky Actions column (right pinned) */
|
|
thead th.actionsCol,
|
|
tbody td.actionsCol {
|
|
position: sticky;
|
|
right: 0;
|
|
background: var(--dees-color-bg-primary);
|
|
}
|
|
thead th.actionsCol { z-index: 3; }
|
|
tbody td.actionsCol {
|
|
z-index: 1;
|
|
box-shadow: -1px 0 0 0 var(--dees-color-border-default);
|
|
}
|
|
|
|
tbody tr.selected {
|
|
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.12)')};
|
|
}
|
|
|
|
tbody tr.hasAttachment {
|
|
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 76.2% 36.3% / 0.1)')};
|
|
}
|
|
|
|
th {
|
|
height: 36px;
|
|
padding: 8px 16px;
|
|
text-align: left;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
th[role='columnheader']:hover {
|
|
color: var(--dees-color-text-primary);
|
|
}
|
|
|
|
th .sortArrow {
|
|
display: inline-block;
|
|
margin-left: 6px;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
opacity: 0.7;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
th .sortBadge {
|
|
display: inline-block;
|
|
margin-left: 3px;
|
|
padding: 1px 5px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: ${cssManager.bdTheme('hsl(222.2 47.4% 30%)', 'hsl(217.2 91.2% 75%)')};
|
|
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.12)', 'hsl(217.2 91.2% 59.8% / 0.18)')};
|
|
border-radius: 999px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
:host([show-vertical-lines]) th {
|
|
border-right: 1px solid var(--dees-color-border-default);
|
|
}
|
|
|
|
td {
|
|
padding: 8px 16px;
|
|
vertical-align: middle;
|
|
font-size: 13px;
|
|
color: var(--dees-color-text-primary);
|
|
}
|
|
|
|
:host([show-vertical-lines]) td {
|
|
border-right: 1px solid var(--dees-color-border-default);
|
|
}
|
|
|
|
th:first-child,
|
|
td:first-child {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
th:last-child,
|
|
td:last-child {
|
|
padding-right: 16px;
|
|
}
|
|
|
|
:host([show-vertical-lines]) th:last-child,
|
|
:host([show-vertical-lines]) td:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Default bottom border on last row removed — tile frame handles it */
|
|
:host(:not([show-horizontal-lines])) tbody tr:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.innerCellContainer {
|
|
position: relative;
|
|
min-height: 24px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
/* ---- Cell flash highlighting (opt-in via highlight-updates="flash") ----
|
|
Bloomberg/TradingView-style: the text itself briefly takes an accent
|
|
color then fades back to the default. No background tint, no layout
|
|
shift, no weight change. Readable, modern, subtle.
|
|
Consumers can override per instance:
|
|
dees-table#myTable { --dees-table-flash-color: hsl(142 76% 40%); }
|
|
*/
|
|
:host {
|
|
--dees-table-flash-color: ${cssManager.bdTheme(
|
|
'hsl(32 95% 44%)',
|
|
'hsl(45 93% 62%)'
|
|
)};
|
|
--dees-table-flash-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
}
|
|
|
|
.innerCellContainer.flashing {
|
|
animation: dees-table-cell-flash
|
|
var(--dees-table-flash-duration, 900ms)
|
|
var(--dees-table-flash-easing);
|
|
}
|
|
|
|
/* Hold the accent color briefly, then fade back to the theme's default
|
|
text color. Inherits to child text and to SVG icons that use
|
|
currentColor. Cells with explicit color overrides in renderers are
|
|
intentionally unaffected. */
|
|
@keyframes dees-table-cell-flash {
|
|
0%,
|
|
35% { color: var(--dees-table-flash-color); }
|
|
100% { color: var(--dees-color-text-primary); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.innerCellContainer.flashing {
|
|
animation: none;
|
|
color: var(--dees-table-flash-color);
|
|
}
|
|
}
|
|
|
|
/* Dev-time warning banner shown when highlight-updates="flash" but
|
|
rowKey is missing. Consumers should never ship this to production. */
|
|
.flashConfigWarning {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 8px 16px 0;
|
|
padding: 8px 12px;
|
|
border-left: 3px solid ${cssManager.bdTheme('hsl(38 92% 50%)', 'hsl(48 96% 63%)')};
|
|
background: ${cssManager.bdTheme('hsl(48 96% 89% / 0.6)', 'hsl(48 96% 30% / 0.15)')};
|
|
color: ${cssManager.bdTheme('hsl(32 81% 29%)', 'hsl(48 96% 80%)')};
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
border-radius: 4px;
|
|
}
|
|
.flashConfigWarning dees-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 auto;
|
|
}
|
|
.flashConfigWarning code {
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.6)', 'hsl(0 0% 0% / 0.3)')};
|
|
font-family: ${cssGeistFontFamily};
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* Editable cell affordances */
|
|
td.editable {
|
|
cursor: text;
|
|
}
|
|
td.focused {
|
|
outline: 2px solid ${cssManager.bdTheme(
|
|
'hsl(222.2 47.4% 51.2% / 0.6)',
|
|
'hsl(217.2 91.2% 59.8% / 0.6)'
|
|
)};
|
|
outline-offset: -2px;
|
|
}
|
|
td.editingCell {
|
|
padding: 0;
|
|
outline: 2px solid ${cssManager.bdTheme(
|
|
'hsl(222.2 47.4% 51.2% / 0.6)',
|
|
'hsl(217.2 91.2% 59.8% / 0.6)'
|
|
)};
|
|
outline-offset: -2px;
|
|
}
|
|
td.editingCell .innerCellContainer {
|
|
padding: 0;
|
|
line-height: normal;
|
|
}
|
|
td.editingCell dees-input-text,
|
|
td.editingCell dees-input-checkbox,
|
|
td.editingCell dees-input-dropdown,
|
|
td.editingCell dees-input-datepicker,
|
|
td.editingCell dees-input-tags {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
/* filter row */
|
|
thead tr.filtersRow th {
|
|
padding: 8px 12px 12px 12px;
|
|
}
|
|
thead tr.filtersRow th input[type='text'] {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 6px 8px;
|
|
font-size: 13px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--dees-color-border-default);
|
|
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
|
|
color: var(--dees-color-text-primary);
|
|
}
|
|
.actionsContainer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 4px;
|
|
}
|
|
|
|
.action {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.action:hover {
|
|
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
|
|
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
|
|
}
|
|
|
|
.action:active {
|
|
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 11.8%)')};
|
|
}
|
|
|
|
.action dees-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 32px;
|
|
padding: 0 16px;
|
|
font-size: 11px;
|
|
color: var(--dees-color-text-muted);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tableStatistics {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.footerActions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.footerActions .footerAction {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.footerActions .footerAction:hover {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
|
|
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
|
|
}
|
|
|
|
.footerActions .footerAction dees-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
`,
|
|
];
|