@lobehub/ui 5.63.0 → 5.63.2

package/es/base-ui/Table/style.mjs

@@ -15,7 +15,22 @@ const ownRows = [
 ].map((section) => `& > ${p}-container > ${p}-${section} > table > * > tr`).join(", ");
 const ownCells = (cell) => ownRows.split(", ").map((row) => `${row} > ${cell}`).join(", ");
 const styles = createStaticStyles(({ css, cssVar }) => {
-	const border = `1px solid ${cssVar.colorBorderSecondary}`;
+	const borderColor = `var(--lobe-fill-border, ${cssVar.colorFill})`;
+	const border = `1px solid ${borderColor}`;
+	const surface = (light) => `var(--lobe-table-surface, ${light})`;
+	const cellBg = `var(--lobe-table-cell, ${cssVar.colorBgContainer})`;
+	const fill = "var(--lobe-table-fill, transparent)";
+	const hoverBg = cssVar.colorFillTertiary;
+	const selectedBg = `color-mix(in srgb, ${cssVar.colorPrimary} 6%, transparent)`;
+	const selectedHoverBg = `color-mix(in srgb, ${cssVar.colorPrimary} 10%, transparent)`;
+	const frost = `
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+  `;
+	const variantVars = `
+    --lobe-table-cell: var(--lobe-table-cell-bg, ${cssVar.colorBgContainer});
+    --lobe-table-fill: var(--lobe-table-surface, transparent);
+  `;
 	const fixShadowBase = `
     pointer-events: none;
     content: '';
@@ -29,16 +44,18 @@ const styles = createStaticStyles(({ css, cssVar }) => {
 	return {
 		outlined: css`
       &${p}-outlined {
-        /* The square root must not paint behind the rounded frame: the container
-           (clipped to its radius) carries the colorBgContainer body instead. */
+        ${variantVars}
+        /* The square root must not paint behind the rounded frame: the clipped container
+           is the ONE layer carrying the body (light colorBgContainer, dark
+           colorFillQuaternary). Title / footer are siblings, so they paint it once too. */
         background: transparent;
 
         & > ${p}-container {
-          background: ${cssVar.colorBgContainer};
+          background: ${surface(cssVar.colorBgContainer)};
         }
 
         & > ${p}-title, & > ${p}-footer {
-          background: ${cssVar.colorBgContainer};
+          background: ${surface(cssVar.colorBgContainer)};
         }
 
         & > ${p}-title {
@@ -48,13 +65,18 @@ const styles = createStaticStyles(({ css, cssVar }) => {
           border-start-end-radius: ${cssVar.borderRadiusLG};
         }
 
-        /* The container draws the top and both side edges; the last row draws the bottom.
+        /* The container draws the full frame (incl. bottom). Last-row borders used to stand
+           in for the bottom edge, but with scroll.y / virtual the last row sits inside the
+           body viewport - overflow:clip + radius then eats that line at the rounded corners.
            No column dividers (grouped headers included): rows are split horizontally only. */
         & > ${p}-container {
           overflow: clip;
-          border-block-start: ${border};
-          border-inline: ${border};
+          border: ${border};
           border-radius: ${cssVar.borderRadiusLG};
+
+          /* Same lift as the dashboard Surface card (both modes). Outer shadow on the framed
+             container is not clipped by its own overflow. */
+          box-shadow: rgb(0 0 0 / 4%) 0 1px 2px 0;
         }
 
         & > ${p}-title + ${p}-container {
@@ -63,6 +85,7 @@ const styles = createStaticStyles(({ css, cssVar }) => {
         }
 
         &:has(> ${p}-footer) > ${p}-container {
+          border-block-end: 0;
           border-end-start-radius: 0;
           border-end-end-radius: 0;
         }
@@ -78,17 +101,66 @@ const styles = createStaticStyles(({ css, cssVar }) => {
            shadow underneath, or group headers look double-thick. */
         & > ${p}-container > * > table > thead > tr > th {
           border-block-end: ${border};
+
+          /* Extra FillQuaternary layer on top of the container fill. */
+          background: ${cellBg};
+          box-shadow: inset 0 999px 0 ${cssVar.colorFillQuaternary};
+        }
+
+        /* Fixed cells: see-through (container fill shows) + backdrop blur only. */
+        & ${p}-tbody > tr > td${p}-cell-fix, & ${p}-tbody-virtual ${p}-cell${p}-cell-fix {
+          background: transparent;
+          box-shadow: none;
+        }
+
+        /* Header: container fill + one Quaternary wash (box-shadow), like other th. */
+        & ${p}-thead > tr > th${p}-cell-fix, & ${p}-thead > tr > td${p}-cell-fix {
+          background: transparent;
           box-shadow: inset 0 999px 0 ${cssVar.colorFillQuaternary};
         }
       }
+    `,
+		frostRail: css`
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 1;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      display: flex;
+    `,
+		frostStart: css`
+      position: sticky;
+      inset-inline-start: 0;
+      flex: none;
+      height: 100%;
+      ${frost}
+    `,
+		frostEnd: css`
+      position: sticky;
+      inset-inline-end: 0;
+
+      flex: none;
+
+      height: 100%;
+      margin-inline-start: auto;
+      ${frost}
     `,
 		filled: css`
       &${p}-filled {
+        ${variantVars}
+        /* Filled owns its fill in both modes (Block filled = colorFillTertiary; dark uses the
+           Quaternary surface) and its opaque base is the page behind it, not colorBgContainer. */
+        --lobe-table-fill: var(--lobe-table-surface, ${cssVar.colorFillTertiary});
+
+        /* Root stays clear (square box, would bleed past the rounded corners); the clipped
+           container is the ONE fill layer: light FillTertiary, dark colorFillQuaternary. */
         background: transparent;
 
         & > ${p}-title, & > ${p}-footer {
           border-radius: ${cssVar.borderRadiusLG};
-          background: ${cssVar.colorFillQuaternary};
+          background: ${fill};
         }
 
         & > ${p}-title {
@@ -104,7 +176,7 @@ const styles = createStaticStyles(({ css, cssVar }) => {
         & > ${p}-container {
           overflow: clip;
           border-radius: ${cssVar.borderRadiusLG};
-          background: ${cssVar.colorFillTertiary};
+          background: ${fill};
         }
 
         & > ${p}-title + ${p}-container {
@@ -117,43 +189,40 @@ const styles = createStaticStyles(({ css, cssVar }) => {
           border-end-end-radius: 0;
         }
 
-        /* Header band: only the FillQuaternary wash over the container fill (stacking a
-           second FillTertiary made dark mode too bright). */
+        /* Header band: one extra FillQuaternary wash over the container fill. */
         & ${p}-thead > tr > th,
         & ${p}-thead > tr > td {
           background: transparent;
           box-shadow:
-            inset 0 -1px 0 ${cssVar.colorBorderSecondary},
+            inset 0 -1px 0 ${borderColor},
             inset 0 999px 0 ${cssVar.colorFillQuaternary};
         }
 
-        /* Row dividers stay on (base colorBorderSecondary rule); only the fill is the container's. */
+        /* Row dividers stay on (base border rule); body is clear over the container fill. */
         & ${p}-tbody > tr > td,
         & ${p}-tbody > tr > th,
         & ${p}-tbody-virtual ${p}-cell {
           background: transparent;
         }
 
-        /* Fixed cells must be opaque: colorBgContainer painted with the same fill(s), the
-           closest opaque match to the translucent surface around them. */
+        /* Fixed cells: see-through + blur; header keeps the same divider + wash as every th. */
         & ${p}-thead > tr > th${p}-cell-fix, & ${p}-thead > tr > td${p}-cell-fix {
-          background: ${cssVar.colorBgContainer};
+          background: transparent;
           box-shadow:
-            inset 0 -1px 0 ${cssVar.colorBorderSecondary},
-            inset 0 999px 0 ${cssVar.colorFillQuaternary},
-            inset 0 999px 0 ${cssVar.colorFillTertiary};
+            inset 0 -1px 0 ${borderColor},
+            inset 0 999px 0 ${cssVar.colorFillQuaternary};
         }
 
         & ${p}-tbody > tr > td${p}-cell-fix {
-          background: ${cssVar.colorBgContainer};
-          box-shadow: inset 0 999px 0 ${cssVar.colorFillTertiary};
+          background: transparent;
+          box-shadow: none;
         }
       }
     `,
 		/**
 		* Borderless: everything but the header is see-through, so the table sits on whatever
 		* surface hosts it. Hover / selected rows are translucent fills. Fixed (sticky) cells
-		* stay opaque in colorBgContainer so scrolled content never shows underneath them.
+		* are see-through with a frosted backdrop so scrolled content stays obscured.
 		*/
 		borderless: css`
       && {
@@ -169,14 +238,14 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       }
 
       && ${p}-tbody > tr > td${p}-cell-row-hover, && ${p}-tbody-virtual ${p}-row:hover > ${p}-cell {
-        background: color-mix(in srgb, ${cssVar.colorText} 3%, transparent);
+        background: ${hoverBg};
       }
 
       && ${p}-tbody > tr${p}-row-selected > td {
-        background: color-mix(in srgb, ${cssVar.colorPrimary} 6%, transparent);
+        background: ${selectedBg};
 
         &${p}-cell-row-hover {
-          background: color-mix(in srgb, ${cssVar.colorPrimary} 10%, transparent);
+          background: ${selectedHoverBg};
         }
       }
 
@@ -191,18 +260,18 @@ const styles = createStaticStyles(({ css, cssVar }) => {
         &&
         ${p}-tbody-virtual
         ${p}-cell${p}-cell-fix {
-        background: ${cssVar.colorBgContainer};
+        background: transparent;
       }
 
       && ${p}-tbody > tr > td${p}-cell-fix${p}-cell-row-hover {
-        background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorText} 3%);
+        background: ${hoverBg};
       }
 
       && ${p}-tbody > tr${p}-row-selected > td${p}-cell-fix {
-        background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorPrimary} 6%);
+        background: ${selectedBg};
 
         &${p}-cell-row-hover {
-          background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorPrimary} 10%);
+          background: ${selectedHoverBg};
         }
       }
     `,
@@ -339,8 +408,9 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       vertical-align: middle;
     `,
 		hoverable: css`
-      & ${p}-tbody > tr > ${p}-cell-row-hover, & ${p}-tbody-virtual ${p}-row:hover > ${p}-cell {
-        background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorText} 3%);
+      /* &&& outranks the variant cell rules (filled clear cells, transparent fixed cells). */
+      &&& ${p}-tbody > tr > ${p}-cell-row-hover, &&& ${p}-tbody-virtual ${p}-row:hover > ${p}-cell {
+        background: ${hoverBg};
       }
     `,
 		loading: css`
@@ -385,7 +455,7 @@ const styles = createStaticStyles(({ css, cssVar }) => {
 
       width: 100%;
       min-width: 0;
-      border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+      border-block-end: 1px solid ${borderColor};
 
       &:last-child {
         border-block-end: 0;
@@ -450,14 +520,23 @@ const styles = createStaticStyles(({ css, cssVar }) => {
 		sizeLarge: css`
       ${PADDING_BLOCK}: 16px;
       ${PADDING_INLINE}: 16px;
+
+      /* Same as VIRTUAL_ROW_HEIGHT in Table.tsx (padding * 2 + 22px line + 1px divider). */
+      --lobe-table-virtual-row-height: calc(16px * 2 + 23px);
     `,
 		sizeMedium: css`
       ${PADDING_BLOCK}: 12px;
       ${PADDING_INLINE}: 16px;
+
+      /* Same as VIRTUAL_ROW_HEIGHT in Table.tsx (padding * 2 + 22px line + 1px divider). */
+      --lobe-table-virtual-row-height: calc(12px * 2 + 23px);
     `,
 		sizeSmall: css`
       ${PADDING_BLOCK}: 8px;
       ${PADDING_INLINE}: 12px;
+
+      /* Same as VIRTUAL_ROW_HEIGHT in Table.tsx (padding * 2 + 22px line + 1px divider). */
+      --lobe-table-virtual-row-height: calc(8px * 2 + 23px);
     `,
 		sortButton: css`
       display: inline-flex;
@@ -484,6 +563,10 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       position: relative;
     `,
 		table: css`
+      /* Reset per root so nested / borderless tables never inherit a parent's variant vars. */
+      --lobe-table-cell: ${cssVar.colorBgContainer};
+      --lobe-table-fill: transparent;
+
       font-size: 14px;
       color: ${cssVar.colorText};
       background: ${cssVar.colorBgContainer};
@@ -501,9 +584,39 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       & tfoot > tr > th,
       & tfoot > tr > td {
         position: relative;
+
         padding-block: var(${PADDING_BLOCK});
         padding-inline: var(${PADDING_INLINE});
+
         overflow-wrap: break-word;
+
+        /* The global \`* { vertical-align: baseline }\` reset drops the UA's middle for cells. */
+        vertical-align: middle;
+      }
+
+      /* Row-merged body cells (rowSpan > 1, table and virtual body alike) get vertical
+         dividers so the block reads apart from the neighbour rows' lines. Drawn on ::before
+         (::after is the fixed-column scroll shadow) so cell box-shadows stay untouched. The
+         first / last column skip the edge the frame or table edge already provides. */
+      & ${p}-tbody > tr > td[rowspan]:not([rowspan='0'], [rowspan='1'])::before,
+      & ${p}-tbody-virtual ${p}-cell[rowspan]:not([rowspan='0'], [rowspan='1'])::before {
+        pointer-events: none;
+        content: '';
+
+        position: absolute;
+        inset: 0;
+
+        border-inline: ${border};
+      }
+
+      & ${p}-tbody > tr > td[rowspan]:first-child::before,
+      & ${p}-tbody-virtual ${p}-cell[rowspan]:first-child::before {
+        border-inline-start: 0;
+      }
+
+      & ${p}-tbody > tr > td[rowspan]:last-child::before,
+      & ${p}-tbody-virtual ${p}-cell[rowspan]:last-child::before {
+        border-inline-end: 0;
       }
 
       & ${p}-thead > tr > th,
@@ -513,9 +626,10 @@ const styles = createStaticStyles(({ css, cssVar }) => {
         color: ${cssVar.colorTextSecondary};
         text-align: start;
 
-        background: ${cssVar.colorBgContainer};
+        /* Clear in dark (outlined) so the container fill shows; Quaternary is the extra header layer. */
+        background: ${cellBg};
         box-shadow:
-          inset 0 -1px 0 ${cssVar.colorBorderSecondary},
+          inset 0 -1px 0 ${borderColor},
           inset 0 999px 0 ${cssVar.colorFillQuaternary};
 
         &[colspan]:not([colspan='1']) {
@@ -532,13 +646,26 @@ const styles = createStaticStyles(({ css, cssVar }) => {
         font-variant-numeric: tabular-nums;
         text-align: start;
 
-        background: ${cssVar.colorBgContainer};
+        /* Clear in dark (outlined) so the container fill shows through. */
+        background: ${cellBg};
 
         transition: background-color ${cssVar.motionDurationMid};
       }
 
-      &:not(${p}-outlined) ${p}-tbody > tr:last-child > td,
-      &:not(${p}-outlined) ${p}-tbody > tr:last-child > th {
+      /* Filled / outlined drop the last body divider: filled because its fill is the edge,
+         outlined because the container now draws the frame bottom (avoids a double line, and
+         keeps the outline when scroll.y / virtual would otherwise scroll the last-row edge
+         away). Borderless keeps it as the closing rule under the rows. */
+      &${p}-filled ${p}-tbody > tr:last-child > td,
+      &${p}-filled ${p}-tbody > tr:last-child > th,
+      &${p}-outlined ${p}-tbody > tr:last-child > td,
+      &${p}-outlined ${p}-tbody > tr:last-child > th {
+        border-block-end: 0;
+      }
+
+      /* Borderless with a summary: tfoot draws its own top rule, so skip the last-row one. */
+      &${p}-borderless table:has(> tfoot) > ${p}-tbody > tr:last-child > td,
+      &${p}-borderless table:has(> tfoot) > ${p}-tbody > tr:last-child > th {
         border-block-end: 0;
       }
 
@@ -637,7 +764,7 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       }
 
       & ${p}-cell-fix {
-        background: ${cssVar.colorBgContainer};
+        background: transparent;
 
         &::after {
           ${fixShadowBase}
@@ -664,41 +791,16 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       & ${p}-sticky-holder {
         position: sticky;
         z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 1);
-        background: ${cssVar.colorBgContainer};
+        background: transparent;
+
+        /* The whole sticky header is one element, so it blurs as one continuous block. */
+        ${frost}
       }
 
       & ${p}-sticky-scroll {
         position: sticky;
         z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 1);
         inset-block-end: 0;
-
-        display: flex;
-        align-items: center;
-
-        height: 8px !important;
-        border-block-start: ${border};
-
-        opacity: 0.65;
-        background: ${cssVar.colorFillQuaternary};
-
-        &-bar {
-          position: absolute;
-          inset-block-end: 0;
-
-          height: 8px;
-          border-radius: 100px;
-
-          background-color: ${cssVar.colorFill};
-
-          transition:
-            all ${cssVar.motionDurationSlow},
-            transform 0s;
-
-          &:hover,
-          &-active {
-            background-color: ${cssVar.colorFillSecondary};
-          }
-        }
       }
 
       /* ============================ Selection =========================== */
@@ -718,11 +820,12 @@ const styles = createStaticStyles(({ css, cssVar }) => {
         }
       }
 
-      & ${p}-tbody > tr${p}-row-selected > td {
-        background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorPrimary} 6%);
+      /* The table css carries no hoverable class, so use a fourth & to outrank hover too. */
+      &&&& ${p}-tbody > tr${p}-row-selected > td {
+        background: ${selectedBg};
 
         &${p}-cell-row-hover {
-          background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorPrimary} 10%);
+          background: ${selectedHoverBg};
         }
       }
 
@@ -808,6 +911,7 @@ const styles = createStaticStyles(({ css, cssVar }) => {
             border-block: 0;
             border-inline-end: 0;
             border-radius: 0;
+            box-shadow: none;
           }
 
           & > ${p}-title + ${p}-container {
@@ -828,7 +932,9 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       & ${p}-summary {
         position: relative;
         z-index: ${Z_FIXED};
-        background: ${cssVar.colorBgContainer};
+
+        /* See-through; a sticky summary is a sticky holder and gets its frost there. */
+        background: transparent;
 
         & > tr > th,
         & > tr > td {
@@ -837,7 +943,7 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       }
 
       & div${p}-summary {
-        box-shadow: 0 -1px 0 ${cssVar.colorBorderSecondary};
+        box-shadow: 0 -1px 0 ${borderColor};
       }
 
       /* A fixed summary under \`sticky\` is a sticky holder too; keep it sticky (antd orders sticky last). */
@@ -864,6 +970,14 @@ const styles = createStaticStyles(({ css, cssVar }) => {
           box-sizing: border-box;
           width: 100%;
 
+          /* Virtual rows are locked to the listItemHeight estimate (an integer). Measured
+             heights then equal the estimate, so a rowSpan cell (height = summed row sizes)
+             ends exactly on the neighbour rows' divider instead of drifting by sub-pixel
+             rounding or unmeasured-row estimates. */
+          &:not(${p}-row-extra, ${p}-expanded-row) {
+            height: var(--lobe-table-virtual-row-height);
+          }
+
           & > ${p}-cell {
             align-content: center;
           }
@@ -871,18 +985,10 @@ const styles = createStaticStyles(({ css, cssVar }) => {
 
         & ${p}-cell {
           border-block-end: ${border};
-          background: ${cssVar.colorBgContainer};
+          background: ${cellBg};
           transition: background-color ${cssVar.motionDurationMid};
         }
 
-        & ${p}-tbody-virtual-scrollbar {
-          cursor: pointer;
-
-          &:hover {
-            background-color: ${cssVar.colorFillQuaternary};
-          }
-        }
-
         & ${p}-expanded-row ${p}-expanded-row-cell${p}-expanded-row-cell-fixed {
           position: sticky;
           inset-inline-start: 0;