@dxos/lit-grid 0.6.13 → 0.6.14-main.1366248

package/src/dx-grid-axis-resize-handle.pcss

@@ -0,0 +1,23 @@
+dx-grid-axis-resize-handle {
+  display: contents;
+}
+
+.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;
+  }
+}

package/src/dx-grid-axis-resize-handle.ts

@@ -0,0 +1,87 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { type CleanupFn, type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ref } from 'lit/directives/ref.js';
+
+import { DxAxisResizeInternal, type DxGridAxis, type DxGridFrozenPlane } from './types';
+
+@customElement('dx-grid-axis-resize-handle')
+export class DxGridAxisResizeHandle extends LitElement {
+  @property({ type: String })
+  axis: DxGridAxis = 'row';
+
+  @property({ type: String })
+  plane: 'grid' | DxGridFrozenPlane = 'grid';
+
+  @property({ type: String })
+  index: string = '-1';
+
+  @property({ type: Number })
+  size: number = 128;
+
+  private dragStartSize: number = 128;
+
+  override render() {
+    return html`<button class="dx-grid__resize-handle" data-dx-grid-axis=${this.axis} ${ref(this.mount)}>
+      <span class="sr-only">Resize</span>
+    </button>`;
+  }
+
+  private cleanup: CleanupFn | null = null;
+
+  private dispatchResize(location: DragLocationHistory, state: 'dragging' | 'dropped') {
+    const client = this.axis === 'row' ? 'clientY' : 'clientX';
+    const event = new DxAxisResizeInternal({
+      axis: this.axis,
+      plane: this.plane,
+      size: this.dragStartSize,
+      index: this.index,
+      delta: location.current.input[client] - location.initial.input[client],
+      state,
+    });
+    this.dispatchEvent(event);
+  }
+
+  private mount(element?: Element) {
+    this.cleanup?.();
+    const host = this;
+    if (element) {
+      this.cleanup = draggable({
+        element: element as HTMLButtonElement,
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          // we will be moving the line to indicate a drag
+          // we can disable the native drag preview
+          disableNativeDragPreview({ nativeSetDragImage });
+          // we don't want any native drop animation for when the user
+          // does not drop on a drop target. we want the drag to finish immediately
+          preventUnhandled.start();
+        },
+        onDragStart() {
+          host.dragStartSize = host.size;
+        },
+        onDrag({ location }) {
+          host.dispatchResize(location, 'dragging');
+        },
+        onDrop({ location }) {
+          host.dispatchResize(location, 'dropped');
+        },
+      });
+    }
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanup?.();
+  }
+
+  override createRenderRoot() {
+    return this;
+  }
+}

package/src/dx-grid-multiselect-cell.pcss

@@ -0,0 +1,32 @@
+dx-grid-multiselect-cell {
+  display: contents;
+}
+
+.dx-grid__cell__multiselect{
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 2px;
+  inline-size: 100%;
+  block-size: 100%;
+  & > span {
+    flex: 0 1 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    &.dx-grid__cell__multiselect__value {
+      @apply border border-separator text-xs font-semibold pli-2 plb-1 rounded cursor-default text-neutral-800 dark:text-neutral-150
+    }
+    &.dx-grid__cell__multiselect__placeholder {
+      @apply text-description;
+    }
+  }
+  & > .dx-grid__cell__multiselect__separator{
+    flex: 1 0 0;
+  }
+  & > svg {
+    flex: 0 0 auto;
+    margin-block: .25em;
+    inline-size: 1em;
+    block-size: 1em;
+  }
+}

package/src/dx-grid-multiselect-cell.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type DxGridSelectValue = {
+  label: string;
+};
+
+@customElement('dx-grid-multiselect-cell')
+export class DxGridMultiselectCell extends LitElement {
+  @property({ type: Array })
+  values: DxGridSelectValue[] = [];
+
+  @property({ type: Boolean })
+  expanded: boolean = false;
+
+  @property({ type: String })
+  controls: string = '';
+
+  @property({ type: String })
+  placeholder: string = '';
+
+  override render() {
+    return html`<button
+      role="combobox"
+      aria-expanded=${this.expanded}
+      ?aria-controls=${this.controls}
+      aria-haspopup="dialog"
+      class="dx-grid__cell__multiselect"
+      data-dx-grid-accessory="invoke-multiselect"
+    >
+      ${this.values.length > 0
+        ? this.values.map(({ label }) => html`<span class="dx-grid__cell__multiselect__value">${label}</span>`)
+        : html`<span class="dx-grid__cell__multiselect__placeholder">${this.placeholder}</span>`}
+      <span role="none" class="dx-grid__cell__multiselect__separator"></span>
+      <svg><use href="/icons.svg#ph--caret-down--regular" /></svg>
+    </button>`;
+  }
+
+  override createRenderRoot() {
+    return this;
+  }
+}

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

@@ -5,43 +5,181 @@
 import './dx-grid.ts';
 import './dx-grid.pcss';
 
+import './dx-grid-multiselect-cell.ts';
+
 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: 'Waffle production',
+      },
+      '2,2': {
+        value: '',
+        accessoryHtml: '<dx-grid-multiselect-cell values=\'[{"label": "Peaches"}]\'></dx-grid-multiselect-cell>',
+      },
+    },
+    ...initialLabels,
+  } satisfies DxGridProps['initialCells']),
+  columnDefault: JSON.stringify({
+    grid: {
+      size: 180,
+      resizeable: true,
+    },
+    frozenColsStart: {
+      size: 64,
+      resizeable: true,
+    },
+  } satisfies DxGridProps['columnDefault']),
+  rowDefault: JSON.stringify({
+    grid: {
+      size: 32,
+      resizeable: true,
+    },
+    frozenRowsStart: {
+      size: 32,
+      resizeable: true,
+    },
+  } satisfies DxGridProps['rowDefault']),
+  columns: JSON.stringify({
+    grid: {
+      0: { size: 64 },
+      1: { size: 512 },
+      2: { size: 64 },
+      3: { size: 512 },
+      4: { size: 64 },
+      5: { size: 512 },
+      6: { size: 64 },
+      7: { size: 512 },
+      8: { size: 64 },
+      9: { size: 512 },
+    },
+  } 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['cells']),
+  } 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({
-    size: 180,
-    resizeable: true,
+    grid: {
+      size: 180,
+      resizeable: true,
+    },
   } satisfies DxGridProps['columnDefault']),
   rowDefault: JSON.stringify({
-    size: 32,
-    resizeable: true,
+    grid: {
+      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']),
 };

package/src/dx-grid.pcss

@@ -1,55 +1,38 @@
+@import './dx-grid-axis-resize-handle.pcss';
+@import './dx-grid-multiselect-cell.pcss';
+
 dx-grid {
   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-gap: 1px;
+  --dx-plane-gap: 1px;
 }
 
 .dx-grid {
-  position: fixed;
-  inset: 0;
   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--fixed,
+.dx-grid__plane--grid {
   overflow: hidden;
   position: relative;
+  display: grid;
   &:focus-visible {
     outline: none;
   }
@@ -62,60 +45,76 @@ 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 {
   [role='gridcell'], [role='columnheader'], [role='rowheader'] {
+    position: relative;
     background: var(--dx-grid-base, var(--dx-base));
-    padding: 2px;
+    padding: 2px 3px;
     box-sizing: border-box;
     cursor: pointer;
     border: 1px solid transparent;
-    &[inert] {
-      visibility: hidden;
-    }
-    &:focus, &:focus-visible {
-      cursor: text;
-      position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    &:focus:not([aria-readonly='true']), &:focus-visible {
       z-index: 2;
       border-color: var(--dx-accentSurface);
       outline: none;
+      &:not([aria-readonly='true']) {
+        cursor: text;
+      }
+    }
+    &.dx-grid__cell--commented {
+      background: var(--dx-grid-commented, var(--dx-gridCommented));
+    }
+  }
+  &[data-grid-select] {
+    [role='gridcell'], [role='columnheader'], [role='rowheader'] {
+      &[aria-selected] {
+        background: var(--dx-gridSelectionOverlay);
+      }
     }
   }
 }
 
-.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));
-      }
+.dx-grid-host:focus-within .dx-grid:not(:focus-within) {
+  [role='gridcell'], [role='columnheader'], [role='rowheader'] {
+    &[data-dx-active]:not([aria-readonly='true']) {
+      border-color: var(--dx-accentSurface);
     }
   }
 }
 
-.dx-grid__columnheader__content > [role='columnheader'] > button.dx-grid__resize-handle {
-  inset-block: 0;
-  inset-inline-end: 0;
-  inline-size: .5rem;
-  cursor: col-resize;
+/* TODO(thure): Finish implementation. */
+.dx-grid-layer--presentation {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  display: grid;
+  gap: var(--dx-grid-gap);
+  background: rgba(255, 0, 0, .1);
+  & .dx-grid-layer--presentation__cell {
+    background: rgba(0, 255, 0, .1);
+  }
 }
 
-.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;
+}