@jielga/tmdatagrid 0.3.0 → 0.5.0

package/src/tmdatagrid/components/TMDataGridTable.module.css

@@ -27,7 +27,7 @@
   grid-template-columns: subgrid;
   position: sticky;
   top: 0;
-  z-index: 3;
+  z-index: var(--dg-z-header, 6);
 }
 
 .bodyRow {
@@ -98,14 +98,83 @@
   font-size: var(--dg-font-size);
 }
 
-/* The checkbox column is a fixed 48px track holding a control of a known width,
-   not text that can ellipsize. Cell padding is sized for text and grows with
-   the scale, so at `xl` its 18px a side left 12px for a 16px box and the
-   checkbox was clipped. The lane centres its control instead. */
-.bodyCell[data-select-column="true"] {
+/* A control lane — the checkbox, the details chevron — is a fixed 36px track
+   holding a control of a known width, not text that can ellipsize. Cell padding
+   is sized for text and grows with the scale, so at `xl` its 18px a side left
+   12px for a 16px box and the checkbox was clipped. The lane centres its
+   control instead. */
+.bodyCell[data-control-column="true"] {
   padding: 0;
 }
 
+/* A drag is laying down a range. Text selection would otherwise follow the
+   pointer across every cell it passes. */
+.grid[data-range-dragging] {
+  user-select: none;
+}
+
+/* The selected block, under `cellSelection: "range"`.
+
+   A tint over the row's own background rather than instead of it, so a
+   selected cell on a highlighted row still reads as both. `color-mix` keeps
+   one declaration for light and dark: it thins the theme's primary colour into
+   whatever `--row-bg` the row resolved to. */
+.bodyCell[data-selected="true"] {
+  background-color: color-mix(
+    in srgb,
+    var(--mantine-primary-color-filled) 14%,
+    var(--row-bg)
+  );
+}
+
+/* The outline around the block, drawn edge by edge: only the cells on a side
+   of the rectangle draw that side, so they add up to one border around the
+   whole thing however it is shaped. A single overlay box would have to be
+   positioned against a scrolling grid with sticky lanes in it.
+
+   Four shadows are always laid down and each is transparent until its edge
+   says otherwise. `box-shadow` does not accumulate across rules — a second
+   declaration replaces the first — so the alternative is one rule per corner
+   combination, and a cell can be on any of fifteen of them. */
+.bodyCell[data-selected="true"] {
+  --dg-edge-top: transparent;
+  --dg-edge-bottom: transparent;
+  --dg-edge-left: transparent;
+  --dg-edge-right: transparent;
+  box-shadow:
+    inset 0 1px 0 0 var(--dg-edge-top),
+    inset 0 -1px 0 0 var(--dg-edge-bottom),
+    inset 1px 0 0 0 var(--dg-edge-left),
+    inset -1px 0 0 0 var(--dg-edge-right);
+}
+
+.bodyCell[data-edge-top="true"] {
+  --dg-edge-top: var(--mantine-primary-color-filled);
+}
+
+.bodyCell[data-edge-bottom="true"] {
+  --dg-edge-bottom: var(--mantine-primary-color-filled);
+}
+
+.bodyCell[data-edge-left="true"] {
+  --dg-edge-left: var(--mantine-primary-color-filled);
+}
+
+.bodyCell[data-edge-right="true"] {
+  --dg-edge-right: var(--mantine-primary-color-filled);
+}
+
+/* The cell the keyboard is on, under `cellSelection`.
+
+   Painted from `data-focused` rather than `:focus-visible`, because the ring
+   has to stay while the focus steps into a control inside the cell — that is
+   still where the arrow keys resume from. The offset keeps it inside the
+   cell's own box, so a pinned neighbour cannot clip it. */
+.bodyCell[data-focused="true"] {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: -2px;
+}
+
 .cellContent {
   min-width: 0;
   overflow: hidden;
@@ -126,6 +195,23 @@
   flex: 1 1 auto;
 }
 
+/* The panel an expanded row opens. Its own grid row inside .bodyRow, spanning
+   every column track — so it is measured together with the row above it.
+
+   It takes `--row-bg` rather than a colour of its own: the panel belongs to its
+   row, and a selected or highlighted row whose panel stayed white would read as
+   two separate things. */
+.detailsCell {
+  grid-column: 1 / -1;
+  border-bottom: 1px solid var(--mantine-color-default-border);
+  background-color: var(--row-bg);
+  padding: var(--dg-padding);
+  /* The row above may be the selection control, which turns text selection off
+     for everything inside it. A panel is content, so it takes both back. */
+  user-select: text;
+  cursor: auto;
+}
+
 .messageRow {
   grid-column: 1 / -1;
   display: flex;
@@ -135,3 +221,38 @@
   gap: var(--mantine-spacing-xs);
   padding: var(--mantine-spacing-xl);
 }
+
+/* The summary row — one sticky row of column footers along the bottom edge,
+   rendered only while at least one column defines `footer`. Same subgrid
+   placement as the header, so its cells sit exactly on the body's tracks. */
+.summaryRow {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  position: sticky;
+  bottom: 0;
+  z-index: var(--dg-z-summary-row, 4);
+}
+
+.summaryCell {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--dg-padding);
+  border-top: 1px solid var(--mantine-color-default-border);
+  /* Opaque: the body scrolls underneath it. */
+  background-color: var(--mantine-color-body);
+  font-size: var(--dg-font-size);
+  font-weight: 600;
+}
+
+.summaryCell[data-control-column="true"] {
+  padding: 0;
+}
+
+.summaryCell[data-align="right"] {
+  justify-content: flex-end;
+}
+
+.summaryCell[data-align="center"] {
+  justify-content: center;
+}