@aquera/nile-elements 1.5.1 → 1.5.2

package/src/nile-grid/nile-grid.ts

@@ -9,9 +9,10 @@ import { html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { styles } from './nile-grid.css';
 import NileElement from '../internal/nile-element';
-import { rebuildTemplate, syncStickyShadows, layout } from './nile-grid.layout';
+import { syncStickyShadows, layout } from './nile-grid.layout';
 import { listenToEventListeners, removeEventListeners, getHead, getBody } from './nile-grid.utils';
-import { computeNewWidth, resizeWithScroll, applyAfterResize, resizeNoScroll } from './nile-grid.resize';
+import { computeNewWidth, resizeWithScroll, resizeNoScroll, updateResizeGuides } from './nile-grid.resize';
+import { PrefixColumn } from './types/nile-grid.types';
 
 /**
  * Nile grid component.
@@ -29,9 +30,6 @@ export class NileGrid extends NileElement {
     return [styles];
   }
 
-  /** To set the grid template columns in rebuildTemplate method */
-  @state() public colTemplate = '';
-
   /** To store the column widths in the beginning and after resizing */
   @state() public columnWidths: number[] = [];
 
@@ -44,8 +42,14 @@ export class NileGrid extends NileElement {
   /** To get the last resize line to show the resize handle */
   @query('.nile-resize-end') resizeEnd: HTMLElement;
 
+  /** To get the last resize line to show the resize handle */
+  @query('.shadow-left') shadowLeft: HTMLElement;
+
+  /** To get the last resize line to show the resize handle */
+  @query('.shadow-right') shadowRight: HTMLElement;
+
   /** To enable horizontal scrolling when user is resizing */
-  @property({ type: Boolean, attribute: true, reflect: true }) enableResizeScroll: boolean = false;
+  @property({ type: Boolean, attribute: true, reflect: true }) enableScroll: boolean = false;
 
   /** To enable hoverable rows */
   @property({ type: Boolean, attribute: true, reflect: true }) hoverable: boolean = false;
@@ -81,6 +85,61 @@ export class NileGrid extends NileElement {
   /** To check if the widths are initialized */
   @state() public lockedWidthColumns: boolean[] = [];
 
+  /** prefix columns width */
+  @state() public prefixSumColumnsWidth: PrefixColumn[] = [];
+
+  /** prefix columns width */
+  @state() public stickyColumns: number[] = [];
+
+  /** body rows */
+  @state() public bodyRows: HTMLElement[] = [];
+
+  /** head rows */
+  @state() public headRows: HTMLElement[] = [];
+
+  @state() public needsStructureLayout = false;
+
+  @state() public needsWidthLayout = false;
+
+  @state() public needsSpanLayout = false;
+
+  @state() public colCount = 0;
+  
+  public shadowLeftVisibleSticky?: boolean;
+
+  public shadowRightVisibleSticky?: boolean;
+
+  public stickyLeftHeadEls: HTMLElement[] = [];
+
+  public stickyRightHeadEls: HTMLElement[] = [];
+
+  public stickyLeftBodyEls: HTMLElement[] = [];
+
+  public stickyRightBodyEls: HTMLElement[] = [];
+
+  private resizeTimer: any = 0;
+
+  /** To throttle sticky shadow updates */
+  private shadowRaf = 0;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.emit('nile-init');
+  }
+
+  private syncStickyShadowsRaf = () => {
+    if (this.shadowRaf) return;
+    this.shadowRaf = requestAnimationFrame(() => {
+      this.shadowRaf = 0;
+      syncStickyShadows(this);
+    });
+  };
+
+
   private scheduleLayout() {
     if (this.raf) cancelAnimationFrame(this.raf);
     this.raf = requestAnimationFrame(() => {
@@ -89,7 +148,6 @@ export class NileGrid extends NileElement {
         this,
         this.slotEl,
         this.ensureWidths.bind(this),
-        rebuildTemplate,
         this.stickyLeftIndexes,
         this.stickyRightIndexes
       );
@@ -99,8 +157,8 @@ export class NileGrid extends NileElement {
 
   private ensureWidths(colCount: number) {
     if (this.columnWidths.length !== colCount) {
-      this.columnWidths = Array(colCount).fill('');
-      this.lockedWidthColumns = Array(colCount).fill(false);
+      this.columnWidths = Array(colCount).fill(0);
+      this.lockedWidthColumns = Array(colCount).fill(false); 
     }
   }
 
@@ -123,16 +181,16 @@ export class NileGrid extends NileElement {
     });
 
     if (delta0 === 0) {
-      applyAfterResize(this, col);
+      updateResizeGuides(this, col);
       return;
     }
 
-    if (!this.enableResizeScroll) {
+    if (!this.enableScroll) {
       resizeNoScroll({ grid: this, col, prevW, newW, floor: this.minColumnWidth });
     } else {
       resizeWithScroll({ grid: this, col, newW });
     }
-    applyAfterResize(this, col);
+    updateResizeGuides(this, col);
   };
 
   protected firstUpdated() {
@@ -143,47 +201,57 @@ export class NileGrid extends NileElement {
       this.slotEl,
       this._attachObserverAndLayout.bind(this)
     );
-    this.addEventListener('scroll', () => syncStickyShadows(this));
+    this.addEventListener('scroll', this.syncStickyShadowsRaf);
     this.resizeObserverStickyShadows = new ResizeObserver(() => syncStickyShadows(this));
     this.resizeObserverStickyShadows.observe(this);
-    syncStickyShadows(this);
+    this.syncStickyShadowsRaf();
   }
 
   private _attachObserverAndLayout() {
     this.mo?.disconnect();
     this.mo = new MutationObserver(() => {
+      this.needsStructureLayout = true;
+      this.needsWidthLayout = true;
+      this.needsSpanLayout = true;
       this.scheduleLayout();
     });
     this.resizeObserver?.disconnect();
     this.resizeObserver = new ResizeObserver(() => {
-      layout(
-        this,
-        this.slotEl,
-        this.ensureWidths.bind(this),
-        rebuildTemplate,
-        this.stickyLeftIndexes,
-        this.stickyRightIndexes
-      );
+      if (this.resizeTimer) clearTimeout(this.resizeTimer);
+      this.resizeTimer = setTimeout(() => {
+        this.resizeTimer = 0;
+        this.needsWidthLayout = true;
+        this.scheduleLayout();
+      }, 16);
     });
 
     const head = getHead(this.slotEl);
     const body = getBody(this.slotEl);
+    
     if (!head && !body) return;
-
-    const target = body ?? this;
+    const target = head ?? this;
     this.mo.observe(target, {
-      subtree: true,
       childList: true,
+      subtree: true,
       attributes: true,
-      attributeFilter: ['colspan', 'rowspan'],
+      attributeFilter: ['colspan', 'rowspan', 'width', 'lockwidth', 'sticky']
     });
     this.resizeObserver?.observe(this);
+
+    if (!this.colCount || !this.columnWidths?.length) {
+      this.needsStructureLayout = true;
+      this.needsSpanLayout = true;
+      this.needsWidthLayout = true;
+      this.scheduleLayout();
+    }
   }
 
   public render(): TemplateResult {
     return html`
       <div part="grid-base" class="nile-grid-base">
-        <slot part="grid-slot"></slot>
+        <div part="grid-slot-wrapper">
+          <slot part="grid-slot"></slot>
+        </div>
         <div part="resize-start" class="nile-resize-start"></div>
         <div part="resize-end" class="nile-resize-end"></div>
       </div>
@@ -191,6 +259,7 @@ export class NileGrid extends NileElement {
   }
 
   disconnectedCallback(): void {
+    this.emit('nile-destroy');
     super.disconnectedCallback?.();
     this.mo?.disconnect();
     this.resizeObserver?.disconnect();

package/src/nile-grid/nile-grid.utils.ts

@@ -1,4 +1,5 @@
 import { NileGrid } from './nile-grid';
+import { applyAfterResize } from './nile-grid.resize'
 
 /** listenToEventListeners
  * @param nileGrid Grid element to attach listeners on
@@ -14,14 +15,18 @@ export const listenToEventListeners = (
   _attachObserverAndLayout: any
 ) => {
   nileGrid.addEventListener('nile-column-resize', onResize);
-  nileGrid.addEventListener('nile-resize-start', () => {
+  nileGrid.addEventListener('nile-resize-start', (e) => {
+    e.stopPropagation();
     nileGrid.resizeStart.style.display = 'block';
   });
-  nileGrid.addEventListener('nile-resize-end', () => {
+  nileGrid.addEventListener('nile-resize-end', (e: CustomEvent) => {
+    e.stopPropagation();
+    applyAfterResize(nileGrid, (e as CustomEvent).detail!.col);
     nileGrid.resizeStart.style.display = 'none';
     nileGrid.resizeEnd.style.display = 'none';
   });
   slotEl.addEventListener('slotchange', () => _attachObserverAndLayout());
+  nileGrid.addEventListener('scroll', () => scrollEventHandler(nileGrid));
 };
 
 /** removeEventListeners
@@ -46,6 +51,7 @@ export const removeEventListeners = (
     nileGrid.resizeEnd.style.display = 'none';
   });
   slotEl.removeEventListener('slotchange', () => _attachObserverAndLayout());
+  nileGrid.removeEventListener('scroll', () => scrollEventHandler(nileGrid));
 };
 
 /** getHead
@@ -72,4 +78,23 @@ export const getBody = (slotEl: any) => {
       (n: any) => n.tagName.toLowerCase() === 'nile-grid-body'
     ) as HTMLElement) || null
   );
+};
+
+export const scrollEventHandler = (el: NileGrid) => {
+  const maxY = Math.max(1, el.scrollHeight - el.clientHeight);
+  const maxX = Math.max(1, el.scrollWidth - el.clientWidth);
+
+  const percentageY = Math.round((el.scrollTop / maxY) * 100);
+  const percentageX = Math.round((el.scrollLeft / maxX) * 100);
+
+  el.emit('nile-scroll', {
+    bubbles: true,
+    composed: true,
+    detail: {
+      horizontalScroll: percentageX,
+      verticalScroll: percentageY,
+      left: el.scrollLeft,
+      top: el.scrollTop
+    }
+  });
 };

package/src/nile-grid/nile-grid.width.ts

@@ -1,6 +1,7 @@
 import { NileGrid } from './nile-grid';
 import { applyColumnsTemplate } from './nile-grid.layout';
 import { getHead } from './nile-grid.utils';
+import { PrefixColumn } from './types/nile-grid.types';
 
 /** computeColumnWidths
  * @param nileGrid Grid instance (reads minColumnWidth, columnWidths)
@@ -14,22 +15,18 @@ export function computeColumnWidths(
   colCount: number,
   columnWidths: number[],
   slotEl: any,
-  lockedWidthColumns: boolean[]
+  lockedWidthColumns: boolean[],
+  headerChanged: boolean
 ): void {
   const minCol = nileGrid.minColumnWidth;
   const containerWidth = getContainerWidth(nileGrid);
-  const desired = readDesiredFromHead(
-    slotEl,
-    colCount,
-    containerWidth,
-    nileGrid,
-    lockedWidthColumns,
-    columnWidths
-  );
+  const desired = readDesiredFromHead(slotEl, colCount, containerWidth, nileGrid, lockedWidthColumns, headerChanged, columnWidths);
   const isSeeded = seedWidthsFromDesired(desired, columnWidths, minCol);
 
   distributeFlex(columnWidths, isSeeded, containerWidth, minCol);
-  normalizeToContainer(columnWidths, containerWidth, minCol);
+  if(!nileGrid.enableScroll) {
+    normalizeToContainer(columnWidths, containerWidth, minCol);
+  }
   clampAndRound(columnWidths, minCol);
   applyColumnsTemplate(nileGrid, columnWidths);
 }
@@ -55,12 +52,18 @@ function readDesiredFromHead(
   containerWidth: number,
   nileGrid: NileGrid,
   lockedWidthColumns: boolean[],
+  headerChanged: boolean,
   prevWidths?: number[]
 ): (number | null)[] {
   const desired = Array(colCount).fill(null);
-  const head = getHead(slotEl) as HTMLElement | null;
-  if (head) fillDesiredFromHeadRows(head, desired, colCount, containerWidth, lockedWidthColumns);
-  if (prevWidths?.length === colCount) fillFromPrevWidths(desired, prevWidths, nileGrid);
+  if (headerChanged) {
+    const head = getHead(slotEl) as HTMLElement | null;
+    if (head) fillDesiredFromHeadRows(head, desired, colCount, containerWidth, lockedWidthColumns);
+  }
+  const hasPrevWidths = !!prevWidths?.length && prevWidths.some(w => w > 0);
+  if (hasPrevWidths && prevWidths?.length === colCount) {
+    fillFromPrevWidths(desired, prevWidths, nileGrid);
+  }
   return desired;
 }
 
@@ -408,4 +411,32 @@ export function giveToRight(widths: number[], start: number, giveInit: number) {
     give = 0;
   }
   return give;
-}
+}
+
+
+export function addVariablesValue(nileGrid: NileGrid) {
+  const columnWidths = nileGrid.columnWidths;
+  const leftStickyColumns = nileGrid.stickyLeftIndexes;
+  const rightStickyColumns = nileGrid.stickyRightIndexes;
+  const prefixColumns: PrefixColumn[] = [];
+  const root = nileGrid as HTMLElement;
+
+  // --- LEFT STICKY ---
+  let totalLeft = 0;
+  for (let i = 0; i < leftStickyColumns.length; i++) {
+    const colIndex = leftStickyColumns[i];
+    prefixColumns.push({ colNumber: colIndex, left: totalLeft, right: 0 });
+    root.style.setProperty(`--sticky-left-${colIndex}`, `${totalLeft}px`);
+    totalLeft += columnWidths[colIndex];
+  }
+
+  // --- RIGHT STICKY ---
+  let totalRight = 0;
+  for (let i = rightStickyColumns.length - 1; i >= 0; i--) {
+    const colIndex = rightStickyColumns[i];
+    prefixColumns.push({ colNumber: colIndex, left: 0, right: totalRight });
+    root.style.setProperty(`--sticky-right-${colIndex}`, `${totalRight}px`);
+    totalRight += columnWidths[colIndex];
+  }
+  nileGrid.prefixSumColumnsWidth = prefixColumns;
+}

package/src/nile-grid/types/nile-grid.types.ts

@@ -1 +1,7 @@
-export type HeadItemEl = HTMLElement & { width?: number | null };
+export type HeadItemEl = HTMLElement & { width?: number | null };
+
+export type PrefixColumn = {
+  colNumber: number;
+  left: number;
+  right: number;
+};

package/vscode-html-custom-data.json

@@ -2197,11 +2197,11 @@
     },
     {
       "name": "nile-grid",
-      "description": "Nile grid component.\n\nAttributes:\n\n  * `enableResizeScroll` {`boolean`} - To enable horizontal scrolling when user is resizing\n\n  * `hoverable` {`boolean`} - To enable hoverable rows\n\n  * `minColumnWidth` {`number`} - Minimum column width\n\nProperties:\n\n  * `colTemplate` {`string`} - To set the grid template columns in rebuildTemplate method\n\n  * `columnWidths` {`number[]`} - To store the column widths in the beginning and after resizing\n\n  * `slotEl` {`HTMLSlotElement`} - To get the slot element\n\n  * `resizeStart` {`HTMLElement`} - To get the first resize line to show the resize handle\n\n  * `resizeEnd` {`HTMLElement`} - To get the last resize line to show the resize handle\n\n  * `enableResizeScroll` {`boolean`} - To enable horizontal scrolling when user is resizing\n\n  * `hoverable` {`boolean`} - To enable hoverable rows\n\n  * `mo` {`MutationObserver | undefined`} - To store the mutation observer\n\n  * `resizeObserver` - To store the resize observer\n\n  * `resizeObserverStickyShadows` - \n\n  * `raf` {`number`} - To store the request animation frame\n\n  * `minColumnWidth` {`number`} - Minimum column width\n\n  * `stickyLeftIndexes` {`number[]`} - To store the sticky index's\n\n  * `stickyRightIndexes` {`number[]`} - To store the sticky index's\n\n  * `cellHeight` {`number | null`} - To calculate the rowspan height\n\n  * `headHeight` {`number | null`} - \n\n  * `widthsInitialized` {`boolean`} - To check if the widths are initialized\n\n  * `lockedWidthColumns` {`boolean[]`} - To check if the widths are initialized\n\n  * `onResize` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile grid component.\n\nAttributes:\n\n  * `enableScroll` {`boolean`} - To enable horizontal scrolling when user is resizing\n\n  * `hoverable` {`boolean`} - To enable hoverable rows\n\n  * `minColumnWidth` {`number`} - Minimum column width\n\nProperties:\n\n  * `columnWidths` {`number[]`} - To store the column widths in the beginning and after resizing\n\n  * `slotEl` {`HTMLSlotElement`} - To get the slot element\n\n  * `resizeStart` {`HTMLElement`} - To get the first resize line to show the resize handle\n\n  * `resizeEnd` {`HTMLElement`} - To get the last resize line to show the resize handle\n\n  * `shadowLeft` {`HTMLElement`} - To get the last resize line to show the resize handle\n\n  * `shadowRight` {`HTMLElement`} - To get the last resize line to show the resize handle\n\n  * `enableScroll` {`boolean`} - To enable horizontal scrolling when user is resizing\n\n  * `hoverable` {`boolean`} - To enable hoverable rows\n\n  * `mo` {`MutationObserver | undefined`} - To store the mutation observer\n\n  * `resizeObserver` - To store the resize observer\n\n  * `resizeObserverStickyShadows` - \n\n  * `raf` {`number`} - To store the request animation frame\n\n  * `minColumnWidth` {`number`} - Minimum column width\n\n  * `stickyLeftIndexes` {`number[]`} - To store the sticky index's\n\n  * `stickyRightIndexes` {`number[]`} - To store the sticky index's\n\n  * `cellHeight` {`number | null`} - To calculate the rowspan height\n\n  * `headHeight` {`number | null`} - \n\n  * `widthsInitialized` {`boolean`} - To check if the widths are initialized\n\n  * `lockedWidthColumns` {`boolean[]`} - To check if the widths are initialized\n\n  * `prefixSumColumnsWidth` {`PrefixColumn[]`} - prefix columns width\n\n  * `stickyColumns` {`number[]`} - prefix columns width\n\n  * `bodyRows` {`HTMLElement[]`} - body rows\n\n  * `headRows` {`HTMLElement[]`} - head rows\n\n  * `needsStructureLayout` {`boolean`} - \n\n  * `needsWidthLayout` {`boolean`} - \n\n  * `needsSpanLayout` {`boolean`} - \n\n  * `colCount` {`number`} - \n\n  * `shadowLeftVisibleSticky` {`boolean | undefined`} - \n\n  * `shadowRightVisibleSticky` {`boolean | undefined`} - \n\n  * `stickyLeftHeadEls` {`HTMLElement[]`} - \n\n  * `stickyRightHeadEls` {`HTMLElement[]`} - \n\n  * `stickyLeftBodyEls` {`HTMLElement[]`} - \n\n  * `stickyRightBodyEls` {`HTMLElement[]`} - \n\n  * `resizeTimer` - \n\n  * `shadowRaf` {`number`} - To throttle sticky shadow updates\n\n  * `syncStickyShadowsRaf` - \n\n  * `onResize` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
-          "name": "enableResizeScroll",
-          "description": "`enableResizeScroll` {`boolean`} - To enable horizontal scrolling when user is resizing\n\nProperty: enableResizeScroll\n\nDefault: false",
+          "name": "enableScroll",
+          "description": "`enableScroll` {`boolean`} - To enable horizontal scrolling when user is resizing\n\nProperty: enableScroll\n\nDefault: false",
           "valueSet": "v"
         },
         {