@svgrid/grid 3.0.3 → 4.0.0

package/src/SvGrid.css

@@ -463,6 +463,79 @@
   user-select: text;
 }
 
+/* Rows whose data has not arrived yet (server-side / infinite loading).
+
+   The shimmer is per CELL, not per row, so the columns keep their widths
+   and the table does not reflow as blocks land. Widths vary a little by
+   column position so a screenful of them reads as text rather than as a
+   barcode - the same trick every skeleton screen uses. */
+.sv-grid-placeholder-cell {
+  user-select: none;
+  cursor: default;
+}
+/* The per-cell shimmer of a placeholder row. Its own name: `.sv-grid-skeleton`
+   above is the full-body loading overlay, absolutely positioned under the
+   header, and sharing it pulled every placeholder cell's bar up there. */
+.sv-grid-placeholder-skeleton {
+  display: inline-block;
+  width: 72%;
+  height: 9px;
+  border-radius: 5px;
+  vertical-align: middle;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent) 25%,
+    color-mix(in srgb, var(--sg-fg, #0f172a) 3%, transparent) 50%,
+    color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent) 75%
+  );
+  background-size: 200% 100%;
+  animation: sv-grid-skeleton-shimmer 1.2s linear infinite;
+}
+.sv-grid-placeholder-cell:nth-child(2n) .sv-grid-placeholder-skeleton { width: 54%; }
+.sv-grid-placeholder-cell:nth-child(3n) .sv-grid-placeholder-skeleton { width: 84%; }
+@keyframes sv-grid-skeleton-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sv-grid-placeholder-skeleton { animation: none; }
+}
+
+/* A block that failed to load: one message across the row, and a way out.
+   The cell stays a table cell so its colspan holds; the flex box is inside
+   it (a flex `td` stops spanning and the tint shrank to the text). Rows
+   that continue a failed run are the same band without the message. */
+.sv-grid-placeholder-failed .sv-grid-placeholder-cell {
+  background: color-mix(in srgb, var(--sg-danger, #dc2626) 6%, transparent);
+}
+.sv-grid-placeholder-failed-body {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 100%;
+  padding-left: var(--sg-cell-px, 7px);
+}
+.sv-grid-placeholder-failed-cont .sv-grid-placeholder-cell {
+  border-top-color: transparent;
+}
+.sv-grid-placeholder-error {
+  color: var(--sg-danger, #dc2626);
+  font-size: 13px;
+}
+.sv-grid-placeholder-retry {
+  background: none;
+  border: 1px solid var(--sg-border, #e2e8f0);
+  border-radius: var(--sg-radius, 6px);
+  padding: 2px 10px;
+  font: inherit;
+  font-size: 12px;
+  color: var(--sg-fg, #0f172a);
+  cursor: pointer;
+}
+.sv-grid-placeholder-retry:hover {
+  background: color-mix(in srgb, var(--sg-fg, #0f172a) 6%, transparent);
+}
+
 /* Pinned columns read as "frozen" via three layered cues:
      1. A distinct fill (slightly stronger than the header) so the
         pinned strip is visible even before you scroll. Themes with a
@@ -873,7 +946,7 @@
      `--sg-thead-h` pixels of the scroll container. `scrollIntoView`
      and friends use this to avoid scrolling a row underneath the
      sticky header - critical for Excel-style keyboard nav. */
-  scroll-padding-top: var(--sg-thead-h, 36px);
+  scroll-padding-top: calc(var(--sg-thead-h, 36px) + var(--sg-frozen-h, 0px));
 }
 
 .sv-grid-container.sv-grid-container-custom-scrollbars {
@@ -1446,6 +1519,24 @@ select.sv-grid-fr-editor {
   padding: 0;
 }
 
+/* ---- Collapsed columns and rows -------------------------------------------
+   A column folded away by `api.setColumnCollapsed` is laid out at 0px (its
+   width resolves to 0), and here it stops painting: no padding to push the
+   box open, nothing visible, so its neighbours' borders meet at the seam the
+   way they do in a sheet with a hidden column. A collapsed row leaves the
+   flow entirely; a table row can, a table cell cannot. */
+.sv-grid-column.sv-grid-column-collapsed,
+.sv-grid-cell.sv-grid-cell-collapsed {
+  padding: 0;
+  border-left-width: 0;
+  border-right-width: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+.sv-grid-row.sv-grid-row-collapsed {
+  display: none;
+}
+
 /* The four CSS variables let us compose a single box-shadow that draws the
    selection rectangle outline only on the cells that sit on its edges. */
 .sv-grid-cell[data-selected-range="true"] {
@@ -1514,6 +1605,36 @@ select.sv-grid-fr-editor {
   color: inherit;
   padding: 0 8px;
 }
+/* Frozen rows (`frozenRows`): the grid's own rows, stuck under the header.
+   Each carries its own `top`, set inline from the heights of the frozen rows
+   above it. Below the header in the stacking order, above the body's rows,
+   with the row's own background so the rows scrolling under it do not show
+   through. */
+.sv-grid-row.sv-grid-row-frozen {
+  position: sticky;
+  /* Above the body rows' pinned cells (z 30) and row numbers (z 4), which
+     scroll under the band; below the header (z 35) and the scrollbars. */
+  z-index: 31;
+  background: var(--sg-bg, #fff);
+}
+.sv-grid-row.sv-grid-row-frozen > .sv-grid-cell {
+  background: var(--sg-bg, #fff);
+}
+/* The band's lower edge, so the frozen rows read as a pane. */
+.sv-grid-row.sv-grid-row-frozen-last > .sv-grid-cell {
+  border-bottom: 1px solid var(--sg-frozen-edge, var(--sg-border, #94a3b8));
+}
+
+/* The multiline text editor sizes itself by its lines and keeps the
+   input's single-line look until a break is typed. */
+.sv-grid-cell-editor-multiline {
+  height: auto;
+  min-height: 100%;
+  resize: none;
+  overflow: hidden;
+  white-space: pre-wrap;
+  line-height: inherit;
+}
 
 /* Base look for the filter inputs (header filter row, per-column filter, the
    global search box, and the menu's search / condition inputs). The inline cell
@@ -2113,6 +2234,21 @@ select.sv-grid-fr-editor {
 .sv-grid-context-menu {
   min-width: 180px;
 }
+/* The icon gutter of a context-menu item: 16px, in the text colour, so a
+   consumer's own glyphs (a spreadsheet's Cut / Copy / Paste) read as one
+   set with the label. Empty on items without an icon, keeping the labels
+   in one column. */
+.sv-grid-menu-icon {
+  display: inline-flex;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+}
+.sv-grid-menu-icon > svg {
+  display: block;
+}
 
 .sv-grid-comment-editor {
   width: 240px;
@@ -3107,6 +3243,18 @@ select.sv-grid-fr-editor {
 .sv-grid-chart-actions { display: inline-flex; align-items: center; gap: 6px; }
 .sv-grid-chart-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
 .sv-grid-chart-controls:empty { display: none; }
+/* The same pickers on the builder's Data tab, as a labelled form: one control
+   per row, the label in the builder's 110px column. */
+.sv-grid-chart-controls.is-form { flex-direction: column; align-items: stretch; gap: 8px; }
+.sv-grid-chart-controls.is-form .sv-grid-chart-ctl,
+.sv-grid-chart-controls.is-form .sv-grid-chart-toggle {
+  display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; font-weight: 400; font-size: 12px;
+}
+.sv-grid-chart-controls.is-form .sv-grid-chart-toggle { grid-template-columns: 110px auto; justify-content: start; }
+.sv-grid-chart-controls.is-form .sv-grid-chart-toggle > input { order: 1; justify-self: start; }
+.sv-grid-chart-controls.is-form .sv-grid-chart-ctl-lbl { font-size: 12px; font-weight: 400; }
+.sv-grid-chart-controls.is-form .sv-grid-chart-indicators { flex-basis: auto; }
+.sv-grid-chart-controls.is-form .sv-grid-chart-hint { flex-basis: auto; }
 /* Says why the chosen chart type cannot draw yet - a missing Split by, too few
    groups. The picker deliberately does NOT hide such a type: options that come
    and go as the user filters are worse than one sentence of explanation. */
@@ -3118,12 +3266,14 @@ select.sv-grid-fr-editor {
   color: var(--sg-muted, #64748b);
 }
 .sv-grid-chart-ctl { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 600; color: var(--sg-muted, #64748b); }
-.sv-grid-chart-ctl select {
+.sv-grid-chart-ctl select,
+.sv-grid-chart-ctl .sv-grid-chart-num {
   font: inherit; font-size: 12.5px; font-weight: 400; color: var(--sg-fg, #0f172a);
   background: var(--sg-input-bg, var(--sg-bg, #fff));
   border: 1px solid var(--sg-input-border, var(--sg-border, #e2e8f0));
   border-radius: var(--sg-radius, 6px); padding: 4px 8px;
 }
+.sv-grid-chart-ctl .sv-grid-chart-num { width: 64px; }
 .sv-grid-chart-toggle {
   display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
   color: var(--sg-muted, #64748b); cursor: pointer; white-space: nowrap;
@@ -3148,6 +3298,18 @@ select.sv-grid-fr-editor {
   display: flex; align-items: stretch; justify-content: center;
 }
 .sv-grid-chart-panel-body > .sv-grid-chart { width: 100%; justify-content: center; }
+.sv-grid-chart-panes-host { width: 100%; height: 100%; overflow: auto; }
+.sv-grid-chart-build-btn { display: inline-flex; align-items: center; gap: 4px; }
+.sv-grid-chart-link-btn.is-unlinked { color: #b45309; border-color: color-mix(in srgb, #b45309 40%, transparent 60%); }
+/* Indicator chips on a price chart */
+.sv-grid-chart-indicators { flex-basis: 100%; }
+.sv-grid-chart-chips { display: flex; flex-wrap: wrap; gap: 3px; }
+.sv-grid-chart-chip {
+  font: inherit; font-size: 11px; line-height: 1; padding: 3px 7px;
+  border: 1px solid var(--sg-border, #e2e8f0); border-radius: 999px;
+  background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); cursor: pointer;
+}
+.sv-grid-chart-chip.is-on { background: var(--sg-accent, #2563eb); border-color: var(--sg-accent, #2563eb); color: #fff; }
 .sv-grid-chart-empty { margin: 0; font-size: 13px; color: var(--sg-muted, #64748b); text-align: center; max-width: 42ch; }
 /* Export menu */
 .sv-grid-chart-export { position: relative; display: inline-flex; }
@@ -3163,6 +3325,20 @@ select.sv-grid-fr-editor {
 }
 .sv-grid-chart-export-menu button:hover:not(:disabled) { background: var(--sg-hover-bg, color-mix(in srgb, var(--sg-accent, #2563eb) 10%, transparent)); }
 .sv-grid-chart-export-menu button:disabled { opacity: 0.45; cursor: default; }
+/* Saved charts: name the active tab, apply or remove a saved one */
+.sv-grid-chart-saved-menu { min-width: 220px; gap: 4px; }
+.sv-grid-chart-saved-row { display: flex; gap: 4px; padding: 2px; }
+.sv-grid-chart-saved-name {
+  flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: var(--sg-fg, #0f172a);
+  background: var(--sg-input-bg, var(--sg-bg, #fff)); border: 1px solid var(--sg-input-border, var(--sg-border, #e2e8f0));
+  border-radius: var(--sg-radius, 6px); padding: 4px 8px;
+}
+.sv-grid-chart-saved-name:focus { outline: none; border-color: var(--sg-accent, #2563eb); }
+.sv-grid-chart-saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.sv-grid-chart-saved-item { display: flex; align-items: center; }
+.sv-grid-chart-saved-item .sv-grid-chart-saved-apply { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.sv-grid-chart-saved-item .sv-grid-chart-saved-x { flex: none; padding: 4px 8px; color: var(--sg-muted, #64748b); }
+.sv-grid-chart-saved-empty { margin: 0; padding: 4px 8px; font-size: 12px; color: var(--sg-muted, #64748b); }
 /* AI "chart this" */
 .sv-grid-chart-ai-btn { display: inline-flex; align-items: center; gap: 4px; }
 .sv-grid-chart-ai-btn.is-active { border-color: var(--sg-accent, #2563eb); color: var(--sg-accent, #2563eb); }