@dxos/lit-grid 0.6.11 → 0.6.12-main.2d19bf1

package/src/dx-grid.lit-stories.ts

@@ -7,41 +7,168 @@ import './dx-grid.pcss';
 
 import { html, nothing } from 'lit';
 
-import { type DxGridProps } from './dx-grid';
+import { type DxGridFrozenPlane, type DxGridPlaneCells, type DxGridProps } from './types';
+import { colToA1Notation, rowToA1Notation } from './util';
 
 export default {
   title: 'dx-grid',
+  parameters: { layout: 'fullscreen' },
 };
 
 export const Basic = (props: DxGridProps) => {
-  return html`<dx-grid
-    cells=${props.cells ?? nothing}
-    columnDefault=${props.columnDefault ?? nothing}
-    rowDefault=${props.rowDefault ?? nothing}
-    columns=${props.columns ?? nothing}
-  ></dx-grid>`;
+  return html`<div class="dark" style="position:fixed;inset:0;">
+    <dx-grid
+      initialCells=${props.initialCells ?? nothing}
+      columnDefault=${props.columnDefault ?? nothing}
+      rowDefault=${props.rowDefault ?? nothing}
+      columns=${props.columns ?? nothing}
+      frozen=${props.frozen ?? nothing}
+    ></dx-grid>
+  </div>`;
 };
 
+const initialLabels = {
+  fixedStartStart: {
+    '0,0': { value: '', resizeHandle: 'col' },
+  },
+  frozenColsStart: [...Array(64)].reduce((acc, _, i) => {
+    acc[`0,${i}`] = { value: rowToA1Notation(i), className: 'text-end !pie-1', resizeHandle: 'row' };
+    return acc;
+  }, {}),
+  frozenRowsStart: [...Array(12)].reduce((acc, _, i) => {
+    acc[`${i},0`] = { value: colToA1Notation(i), resizeHandle: 'col' };
+    return acc;
+  }, {}),
+} satisfies Partial<Record<DxGridFrozenPlane | 'fixedStartStart', DxGridPlaneCells>>;
+
 Basic.args = {
-  cells: JSON.stringify({
-    '1,1': {
-      // end: '8,1',
-      value: 'Weekly sales report',
+  initialCells: JSON.stringify({
+    grid: {
+      '1,1': {
+        // end: '8,1',
+        value: 'Weekly sales report',
+      },
     },
-  } satisfies DxGridProps['cells']),
+    ...initialLabels,
+  } satisfies DxGridProps['initialCells']),
   columnDefault: JSON.stringify({
-    size: 180,
-    resizeable: true,
+    grid: {
+      size: 180,
+      resizeable: true,
+    },
+    frozenColsStart: {
+      size: 64,
+      resizeable: true,
+    },
   } satisfies DxGridProps['columnDefault']),
   rowDefault: JSON.stringify({
-    size: 32,
-    resizeable: true,
+    grid: {
+      size: 32,
+      resizeable: true,
+    },
+    frozenRowsStart: {
+      size: 32,
+      resizeable: true,
+    },
   } satisfies DxGridProps['rowDefault']),
   columns: JSON.stringify({
-    0: { size: 200 },
-    1: { size: 210 },
-    2: { size: 230 },
-    3: { size: 250 },
-    4: { size: 270 },
+    grid: {
+      0: { size: 200 },
+      1: { size: 210 },
+      2: { size: 230 },
+      3: { size: 250 },
+      4: { size: 270 },
+    },
+  } satisfies DxGridProps['columns']),
+  frozen: JSON.stringify({
+    frozenColsStart: 1,
+    frozenRowsStart: 1,
+  } satisfies DxGridProps['frozen']),
+};
+
+export const Frozen = (props: DxGridProps) => {
+  return html`<div class="dark" style="position:fixed;inset:0;">
+    <dx-grid
+      initialCells=${props.initialCells ?? nothing}
+      columnDefault=${props.columnDefault ?? nothing}
+      rowDefault=${props.rowDefault ?? nothing}
+      columns=${props.columns ?? nothing}
+      frozen=${props.frozen ?? nothing}
+    ></dx-grid>
+  </div>`;
+};
+
+Frozen.args = {
+  initialCells: JSON.stringify({
+    grid: {},
+    ...initialLabels,
+  } satisfies DxGridProps['initialCells']),
+  columnDefault: JSON.stringify({
+    grid: {
+      size: 32,
+    },
+    frozenColsStart: {
+      size: 32,
+    },
+    frozenColsEnd: {
+      size: 32,
+    },
+  } satisfies DxGridProps['columnDefault']),
+  rowDefault: JSON.stringify({
+    grid: {
+      size: 32,
+    },
+    frozenRowsStart: {
+      size: 32,
+    },
+    frozenRowsEnd: {
+      size: 32,
+    },
+  } satisfies DxGridProps['rowDefault']),
+  columns: JSON.stringify({ grid: {} } satisfies DxGridProps['columns']),
+  rows: JSON.stringify({ grid: {} } satisfies DxGridProps['rows']),
+  frozen: JSON.stringify({
+    frozenColsStart: 2,
+    frozenRowsStart: 2,
+    frozenColsEnd: 2,
+    frozenRowsEnd: 2,
+  } satisfies DxGridProps['frozen']),
+};
+
+export const Limits = (props: DxGridProps) => {
+  return html`<div style="position:fixed;inset:0;">
+    <dx-grid
+      limitRows=${props.limitRows ?? nothing}
+      limitColumns=${props.limitColumns ?? nothing}
+      columnDefault=${props.columnDefault ?? nothing}
+      rowDefault=${props.rowDefault ?? nothing}
+      columns=${props.columns ?? nothing}
+    ></dx-grid>
+  </div>`;
+};
+
+Limits.args = {
+  limitRows: JSON.stringify(10 satisfies DxGridProps['limitRows']),
+  limitColumns: JSON.stringify(3 satisfies DxGridProps['limitColumns']),
+  columnDefault: JSON.stringify({
+    grid: {
+      size: 180,
+      resizeable: true,
+    },
+  } satisfies DxGridProps['columnDefault']),
+  rowDefault: JSON.stringify({
+    grid: {
+      size: 32,
+      resizeable: true,
+    },
+  } satisfies DxGridProps['rowDefault']),
+  columns: JSON.stringify({
+    grid: {
+      0: { size: 200 },
+      1: { size: 210 },
+      2: { size: 230 },
+      3: { size: 250 },
+      4: { size: 270 },
+    },
   } satisfies DxGridProps['columns']),
 };

package/src/dx-grid.pcss

@@ -1,55 +1,35 @@
-dx-grid {
+dx-grid, dx-grid-axis-resize-handle {
   display: contents;
 }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 .dx-grid {
-  position: fixed;
-  inset: 0;
+  --dx-grid-gap: 1px;
+  --dx-plane-gap: 2px;
+
   display: grid;
+  gap: var(--dx-plane-gap);
   grid-template-columns: min-content 1fr min-content;
   grid-template-rows: min-content 1fr min-content;
   font-variant-numeric: tabular-nums;
-  --dx-grid-gap: 1px;
-}
 
-.dx-grid__scrollbar__thumb {
-  height: 1rem;
-  width: 1rem;
-  background: var(--dx-grid-thumb, var(--dx-separator));
-}
+  min-inline-size: 4rem;
+  min-block-size: 4rem;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: 100dvw;
+  max-block-size: 100dvh;
 
-.dx-grid__corner,
-.dx-grid__scrollbar {
-  background: var(--dx-grid-corner, var(--dx-hoverSurface));
-}
+  user-select: none;
 
-.dx-grid__columnheader__content,
-.dx-grid__rowheader__content,
-.dx-grid__content {
-  display: grid;
-  gap: var(--dx-grid-gap);
   background: var(--dx-grid-lines, var(--dx-separator));
-  inline-size: min-content;
-  block-size: min-content;
 }
 
-.dx-grid__columnheader,
-.dx-grid__rowheader,
-.dx-grid__viewport {
+.dx-grid__plane--frozen-row,
+.dx-grid__plane--frozen-col,
+.dx-grid__plane--grid {
   overflow: hidden;
   position: relative;
+  display: grid;
   &:focus-visible {
     outline: none;
   }
@@ -62,14 +42,12 @@ dx-grid {
   }
 }
 
-.dx-grid__columnheader__content {
-  border-block-end: 2px solid var(--dx-grid-lines, var(--dx-separator));
-}
-
-.dx-grid__rowheader__content {
-  border-inline-end: 2px solid var(--dx-grid-lines, var(--dx-separator));
-  grid-template-columns: min-content;
-  text-align: end;
+.dx-grid__plane--fixed,
+.dx-grid__plane--frozen-row__content,
+.dx-grid__plane--frozen-col__content,
+.dx-grid__plane--grid__content {
+  display: grid;
+  gap: var(--dx-grid-gap);
 }
 
 .dx-grid {
@@ -79,10 +57,14 @@ dx-grid {
     box-sizing: border-box;
     cursor: pointer;
     border: 1px solid transparent;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-content: center;
     &[inert] {
       visibility: hidden;
     }
-    &:focus, &:focus-visible {
+    &:focus, &:focus-visible, &.dx-grid__cell--active {
       cursor: text;
       position: relative;
       z-index: 2;
@@ -90,32 +72,51 @@ dx-grid {
       outline: none;
     }
   }
-}
-
-.dx-grid__columnheader__content,
-.dx-grid__rowheader__content {
-  & > [role='columnheader'], &> [role='rowheader'] {
-    position: relative;
-    & > button.dx-grid__resize-handle {
-      position: absolute;
-      background: transparent;
-      &:hover {
-        background: var(--dx-grid-resizeHandleHover, var(--dx-hoverSurface));
+  &[data-grid-mode="edit"] {
+    [role='gridcell'], [role='columnheader'], [role='rowheader'] {
+      &.dx-grid__cell--active {
+        color: transparent !important;
+      }
+    }
+  }
+  &[data-grid-select] {
+    [role='gridcell'], [role='columnheader'], [role='rowheader'] {
+      &[aria-selected] {
+        background: var(--dx-gridSelectionOverlay);
       }
     }
   }
 }
 
-.dx-grid__columnheader__content > [role='columnheader'] > button.dx-grid__resize-handle {
-  inset-block: 0;
-  inset-inline-end: 0;
-  inline-size: .5rem;
-  cursor: col-resize;
+.dx-grid__resize-handle {
+  position: absolute;
+  background: transparent;
+  &:hover {
+    background: var(--dx-grid-resizeHandleHover, var(--dx-hoverSurface));
+  }
+  &[data-dx-grid-axis='col'] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: .5rem;
+    cursor: col-resize;
+  }
+  &[data-dx-grid-axis='row'] {
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: .5rem;
+    cursor: row-resize;
+  }
 }
 
-.dx-grid__rowheader__content > [role='rowheader'] > button.dx-grid__resize-handle {
-  inset-inline: 0;
-  inset-block-end: 0;
-  block-size: .5rem;
-  cursor: row-resize;
-}
+// todo(thure): Move this somewhere better.
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}