@dxos/lit-grid 0.6.12-main.5cc132e → 0.6.12-main.78ddbdf

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

@@ -0,0 +1,83 @@
+//
+// 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 } from './types';
+
+@customElement('dx-grid-axis-resize-handle')
+export class DxGridAxisResizeHandle extends LitElement {
+  @property({ type: String })
+  axis: DxGridAxis = 'row';
+
+  @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" ${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,
+      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.lit-stories.ts

@@ -17,7 +17,7 @@ export default {
 export const Basic = (props: DxGridProps) => {
   return html`<div style="position:fixed;inset:0;">
     <dx-grid
-      cells=${props.cells ?? nothing}
+      cells=${props.initialCells ?? nothing}
       columnDefault=${props.columnDefault ?? nothing}
       rowDefault=${props.rowDefault ?? nothing}
       columns=${props.columns ?? nothing}
@@ -31,7 +31,7 @@ Basic.args = {
       // end: '8,1',
       value: 'Weekly sales report',
     },
-  } satisfies DxGridProps['cells']),
+  } satisfies DxGridProps['initialCells']),
   columnDefault: JSON.stringify({
     size: 180,
     resizeable: true,

package/src/dx-grid.pcss

@@ -1,4 +1,4 @@
-dx-grid {
+dx-grid, dx-grid-axis-resize-handle {
   display: contents;
 }
 
@@ -27,6 +27,8 @@ dx-grid {
   block-size: 100%;
   max-inline-size: 100dvw;
   max-block-size: 100dvh;
+
+  user-select: none;
 }
 
 .dx-grid__scrollbar__thumb {
@@ -84,10 +86,13 @@ dx-grid {
     box-sizing: border-box;
     cursor: pointer;
     border: 1px solid transparent;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     &[inert] {
       visibility: hidden;
     }
-    &:focus, &:focus-visible {
+    &:focus, &:focus-visible, &.dx-grid__cell--active {
       cursor: text;
       position: relative;
       z-index: 2;
@@ -95,32 +100,47 @@ dx-grid {
       outline: none;
     }
   }
+  &[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,
 .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__columnheader__content > [role='columnheader'] > button.dx-grid__resize-handle {
+.dx-grid__resize-handle {
+  position: absolute;
+  background: transparent;
+  &:hover {
+    background: var(--dx-grid-resizeHandleHover, var(--dx-hoverSurface));
+  }
+}
+
+.dx-grid__columnheader__content > [role='columnheader'] .dx-grid__resize-handle {
   inset-block: 0;
   inset-inline-end: 0;
   inline-size: .5rem;
   cursor: col-resize;
 }
 
-.dx-grid__rowheader__content > [role='rowheader'] > button.dx-grid__resize-handle {
+.dx-grid__rowheader__content > [role='rowheader'] .dx-grid__resize-handle {
   inset-inline: 0;
   inset-block-end: 0;
   block-size: .5rem;
   cursor: row-resize;
-}
+}