@aquera/nile-elements 1.1.3-beta-1.2 → 1.1.3-beta-1.4

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

@@ -1,41 +1,39 @@
 import { NileGrid } from './nile-grid';
+import { HeadItemEl } from './nile-grid.types';
 
 export const resizeLinesHandler = (
-  resizeStart: any,
-  resizeEnd: any,
+  resizeStart: HTMLElement,
+  resizeEnd: HTMLElement,
   col: number,
-  widthPx: number,
-  scrollHeight: any,
-  columnWidths: any,
-  e: any
+  scrollHeight: number,
+  columnWidths: number[],
 ) => {
   resizeStart.style.display = 'block';
   resizeEnd.style.display = 'block';
   resizeStart.style.height = scrollHeight + 'px';
   resizeEnd.style.height = scrollHeight + 'px';
-  if (col === 0) {
-    resizeStart.style.left = `${Math.max(60, widthPx) - 6}px`;
-    resizeEnd.style.left = `${Math.max(60, widthPx) - 2}px`;
-  } else {
-    let totalWidth = 0;
-    if (
-      (e.target as HTMLElement).getAttribute('colspan') &&
-      parseInt((e.target as HTMLElement).getAttribute('colspan')!) > 1
-    ) {
-      widthPx = widthPx - columnWidths[col - 1];
-      for (let i = 0; i < col; i++) {
-        totalWidth += columnWidths[i];
-      }
-    } else {
-      for (let i = 0; i < col; i++) {
-        totalWidth += columnWidths[i];
-      }
-    }
-    resizeStart.style.left = `${totalWidth + Math.max(60, widthPx) - 6}px`;
-    resizeEnd.style.left = `${totalWidth + Math.max(60, widthPx) - 2}px`;
-  }
+  const floor = 60;
+  const safe = (n: number) => Math.max(0, Math.round(n || 0));
+
+  const sum = (arr: number[], endExclusive: number) =>
+    safe(
+      arr.slice(0, Math.max(0, endExclusive)).reduce((a, b) => a + (b || 0), 0)
+    );
+
+  const totalGridWidth = safe(columnWidths.reduce((a, b) => a + (b || 0), 0));
+  const baseLeft = sum(columnWidths, col);
+  const appliedColWidth = safe(Math.max(floor, columnWidths[col] ?? floor));
+  let handleLeft = baseLeft + appliedColWidth;
+
+  const minEdge = baseLeft + floor;
+  const maxEdge = totalGridWidth;
+  handleLeft = Math.min(Math.max(handleLeft, minEdge), maxEdge);
+
+  resizeStart.style.left = `${handleLeft - 6}px`;
+  resizeEnd.style.left = `${handleLeft - 2}px`;
 };
 
+
 export const listenToEventListeners = (
   nileGrid: NileGrid,
   onResize: any,
@@ -113,108 +111,280 @@ export const applyTemplate = (
   if (head) head.style.gridTemplateColumns = colTemplate;
   if (body) {
     body.style.gridTemplateColumns = colTemplate;
-    body.style.overflowX = 'auto';
   }
 };
 
-function computeHeadLayout(
-  headRows: HTMLElement[],
-  carryHead: number[],
-  colCount: number
+function layoutRows(
+  rows: HTMLElement[],
+  carry: number[],
+  colCount: number,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[],
+  opts: {
+    itemSelector: string;
+    useStickyAttr?: boolean;
+    handleRowBg?: boolean;
+  }
 ): number {
-  headRows.forEach((row, rIdx) => {
+  rows.forEach((row, rIdx) => {
     let c = 1;
-    const cells = Array.from(
-      row.querySelectorAll('nile-grid-head-item, nile-grid-cell')
-    ) as HTMLElement[];
     const rStart = rIdx + 1;
+    let maxRowspan = 1;
 
-    cells.forEach(cell => {
-      while (carryHead[c - 1] > 0) c++;
-      const colspan = Math.max(1, Number(cell.getAttribute('colspan')) || 1);
-      const rowspan = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);
+    let bg: HTMLElement | null = null;
+    if (opts.handleRowBg) {
+      bg = row.shadowRoot?.querySelector<HTMLElement>('[data-row-bg]') ?? null;
+      if (bg) bg.style.gridColumn = `1 / -1`;
+    }
 
-      const cStart = c,
-        cEnd = c + colspan;
-      const rEnd = rStart + rowspan;
+    const items = Array.from(
+      row.querySelectorAll(opts.itemSelector)
+    ) as HTMLElement[];
 
-      cell.style.gridColumn = `${cStart} / ${cEnd}`;
-      cell.style.gridRow = `${rStart} / ${rEnd}`;
-      (cell as any).dataset.cStart = String(cStart);
+    items.forEach((el) => {
+      while ((carry[c - 1] || 0) > 0) c++;
 
-      for (let k = 0; k < colspan; k++) {
-        const idx = c - 1 + k;
-        carryHead[idx] = Math.max(carryHead[idx] || 0, rowspan);
-      }
-      c = cEnd;
-      colCount = Math.max(colCount, cEnd - 1);
-    });
+      const colspan = Math.max(1, Number(el.getAttribute('colspan')) || 1);
+      const rowspan = Math.max(1, Number(el.getAttribute('rowspan')) || 1);
 
-    for (let i = 0; i < carryHead.length; i++)
-      if (carryHead[i] > 0) carryHead[i]--;
-  });
-  return colCount;
-}
+      if (rowspan > 1) {
+        el.style.position = "absolute";
+        el.style.height = `${
+          50 * rowspan
+        }px`;
+        el.style.zIndex = "1";
+      }
 
-function computeBodyLayout(
-  bodyRows: HTMLElement[],
-  carryBody: number[],
-  colCount: number
-) {
-  bodyRows.forEach((row, rIdx) => {
-    let c = 1;
-    const cells = Array.from(
-      row.querySelectorAll('nile-grid-cell, nile-grid-header')
-    ) as HTMLElement[];
-    const rStart = rIdx + 1;
-    let maxRowspan = 1;
+      const cStart = c;
+      const cEnd = c + colspan;
+      const rEnd = rStart + rowspan;
 
-    const bg = row.shadowRoot?.querySelector<HTMLElement>('[data-row-bg]');
-    if (bg) bg.style.gridColumn = `1 / -1`;
+      el.style.gridColumn = `${cStart} / ${cEnd}`;
+      el.style.gridRow = `${rStart} / ${rEnd}`;
+      (el as any).dataset.cStart = String(cStart);
 
-    cells.forEach(cell => {
-      while (carryBody[c - 1] > 0) c++;
-      const colspan = Math.max(1, Number(cell.getAttribute('colspan')) || 1);
-      const rowspan = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);
+      if (opts.useStickyAttr && el.hasAttribute('colSticky')) {
+        stickyLeftIndexes.push(cStart - 1);
+      }
 
-      const cStart = c,
-        cEnd = c + colspan;
-      const rEnd = rStart + rowspan;
+      if (opts.useStickyAttr && el.hasAttribute('lastColSticky')) {
+        stickyRightIndexes.push(cStart - 1);
+      }
 
-      cell.style.gridColumn = `${cStart} / ${cEnd}`;
-      cell.style.gridRow = `${rStart} / ${rEnd}`;
-      (cell as any).dataset.cStart = String(cStart);
+      applySticky(el, cStart - 1, stickyLeftIndexes, stickyRightIndexes, columnWidths);
 
       for (let k = 0; k < colspan; k++) {
         const idx = c - 1 + k;
-        carryBody[idx] = Math.max(carryBody[idx] || 0, rowspan);
+        carry[idx] = Math.max(carry[idx] || 0, rowspan);
       }
+
       maxRowspan = Math.max(maxRowspan, rowspan);
       c = cEnd;
       colCount = Math.max(colCount, cEnd - 1);
     });
 
-    if (bg) {
+    if (opts.handleRowBg && bg) {
       const rEnd = rStart + maxRowspan;
       bg.style.gridRow = `${rStart} / ${rEnd}`;
     }
 
-    for (let i = 0; i < carryBody.length; i++)
-      if (carryBody[i] > 0) carryBody[i]--;
+    for (let i = 0; i < carry.length; i++) {
+      if (carry[i] > 0) carry[i]--;
+    }
   });
 
   return colCount;
 }
 
+function computeHeadLayout(
+  headRows: HTMLElement[],
+  carryHead: number[],
+  colCount: number,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[]
+): number {
+  return layoutRows(
+    headRows,
+    carryHead,
+    colCount,
+    stickyLeftIndexes,
+    stickyRightIndexes,
+    columnWidths,
+    {
+      itemSelector: 'nile-grid-head-item',
+      useStickyAttr: true,
+      handleRowBg: false,
+    }
+  );
+}
+
+function computeBodyLayout(
+  bodyRows: HTMLElement[],
+  carryBody: number[],
+  colCount: number,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[]
+): number {
+  return layoutRows(
+    bodyRows,
+    carryBody,
+    colCount,
+    stickyLeftIndexes,
+    stickyRightIndexes,
+    columnWidths,
+    {
+      itemSelector: 'nile-grid-cell-item',
+      useStickyAttr: false,
+      handleRowBg: true,
+    }
+  );
+}
+
 function computeColumnWidths(
   nileGrid: NileGrid,
   colCount: number,
-  columnWidths: number[]
+  columnWidths: number[],
+  slotEl: any
 ) {
-  for (let col = 0; col < colCount; col++) {
-    const containerWidth = (nileGrid.getBoundingClientRect().width || 1) - 2;
-    columnWidths[col] =
-      nileGrid.customWidths[col] || containerWidth / Math.max(colCount, 1);
+  const minCol = 60;
+  const containerWidth = getContainerWidth(nileGrid);
+
+  const desired = readDesiredFromHead(slotEl, colCount);
+  const isSeeded = seedWidthsFromDesired(desired, columnWidths, minCol);
+
+  distributeFlex(columnWidths, isSeeded, containerWidth, minCol);
+
+  normalizeToContainer(columnWidths, containerWidth, minCol);
+
+  clampAndRound(columnWidths, minCol);
+  applyColumnsTemplate(nileGrid, columnWidths, slotEl);
+}
+
+
+function getContainerWidth(nileGrid: NileGrid): number {
+  return Math.max(0, (nileGrid.getBoundingClientRect().width || 0) - 4);
+}
+
+function readDesiredFromHead(slotEl: any, colCount: number): (number | null)[] {
+  const desired: (number | null)[] = Array(colCount).fill(null);
+  const head = getHead(slotEl) as HTMLElement | null;
+  if (!head) return desired;
+
+  const headRows = Array.from(head.children).filter(
+    el => el.tagName.toLowerCase() === 'nile-grid-row'
+  ) as HTMLElement[];
+
+  for (const row of headRows) {
+    const items = Array.from(row.children).filter(
+      el => el.tagName.toLowerCase() === 'nile-grid-head-item'
+    ) as Array<HeadItemEl>;
+
+    items
+      .map(h => {
+        const cStart = Number((h as any).dataset?.cStart) || 1;
+        const colspan = Math.max(1, Number(h.getAttribute('colspan')) || 1);
+        const attr = h.getAttribute('customWidth');
+        const cw = attr != null ? Number(attr) : (h as any).customWidth ?? null;
+        return { cStart, colspan, cw };
+      })
+      .filter(x => x.cw != null && !Number.isNaN(x.cw!))
+      .sort((a, b) => {
+        return a.colspan - b.colspan;
+      })
+      .forEach(({ cStart, colspan, cw }) => {
+        const perCol = (cw as number) / colspan;
+        for (let k = 0; k < colspan; k++) {
+          const idx = cStart - 1 + k;
+          if (idx >= 0 && idx < colCount && desired[idx] == null) {
+            desired[idx] = perCol;
+          }
+        }
+      });
+  }
+  return desired;
+}
+
+function seedWidthsFromDesired(
+  desired: (number | null)[],
+  columnWidths: number[],
+  minCol: number
+): boolean[] {
+  const isSeeded = Array(desired.length).fill(false);
+  for (let i = 0; i < desired.length; i++) {
+    const w = desired[i] ?? null;
+    columnWidths[i] =
+      w != null && !Number.isNaN(w) ? Math.max(minCol, Number(w)) : 0;
+    isSeeded[i] = w != null && !Number.isNaN(w);
+  }
+  return isSeeded;
+}
+
+function distributeFlex(
+  columnWidths: number[],
+  isSeeded: boolean[],
+  containerWidth: number,
+  minCol: number
+) {
+  const sumSeed = columnWidths.reduce((a, b) => a + b, 0);
+  const remaining = containerWidth - sumSeed;
+  const flexIdxs = Array.from(
+    { length: columnWidths.length },
+    (_, i) => i
+  ).filter(i => !isSeeded[i]);
+  if (flexIdxs.length === 0) return;
+
+  const each = remaining / flexIdxs.length;
+  for (const i of flexIdxs) columnWidths[i] = Math.max(minCol, each);
+}
+
+function normalizeToContainer(
+  columnWidths: number[],
+  containerWidth: number,
+  minCol: number
+) {
+  let total = columnWidths.reduce((a, b) => a + b, 0);
+
+  if (total < containerWidth && columnWidths.length > 0) {
+    const add = containerWidth - total;
+    const weight = total || 1;
+    for (let i = 0; i < columnWidths.length; i++) {
+      columnWidths[i] += add * (columnWidths[i] / weight);
+    }
+  } else if (total > containerWidth) {
+    let need = total - containerWidth;
+    
+    for (let iter = 0; iter < 8 && need > 0.5; iter++) {
+      let weightSum = 0;
+      const candidates: number[] = [];
+      for (let i = 0; i < columnWidths.length; i++) {
+        const reducible = Math.max(0, columnWidths[i] - minCol);
+        if (reducible > 0) {
+          candidates.push(i);
+          weightSum += columnWidths[i];
+        }
+      }
+      if (candidates.length === 0 || weightSum <= 0) break;
+
+      let reduced = 0;
+      for (const i of candidates) {
+        const reducible = Math.max(0, columnWidths[i] - minCol);
+        const share = columnWidths[i] / weightSum;
+        const cut = Math.min(reducible, need * share);
+        columnWidths[i] -= cut;
+        reduced += cut;
+      }
+      need -= reduced;
+      if (reduced < 0.5) break;
+    }
+  }
+}
+
+function clampAndRound(columnWidths: number[], minCol: number) {
+  for (let i = 0; i < columnWidths.length; i++) {
+    columnWidths[i] = Math.max(minCol, Math.round(columnWidths[i]));
   }
 }
 
@@ -224,7 +394,8 @@ export const layout = (
   ensureWidths: any,
   rebuildTemplate: any,
   applyTemplate: any,
-  columnWidths: any
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[]
 ) => {
   const head = getHead(slotEl);
   const body = getBody(slotEl);
@@ -239,14 +410,98 @@ export const layout = (
 
   let colCount = 0;
 
-  colCount = computeHeadLayout(headRows, [], colCount);
-  colCount = computeBodyLayout(bodyRows, [], colCount);
-
-  computeColumnWidths(nileGrid, colCount, columnWidths);
+  colCount = computeHeadLayout(
+    headRows,
+    [],
+    colCount,
+    stickyLeftIndexes,
+    stickyRightIndexes,
+    nileGrid.columnWidths
+  );
+  colCount = computeBodyLayout(
+    bodyRows,
+    [],
+    colCount,
+    stickyLeftIndexes,
+    stickyRightIndexes,
+    nileGrid.columnWidths
+  );
+  computeColumnWidths(nileGrid, colCount, nileGrid.columnWidths, slotEl);
 
   ensureWidths(colCount);
   body.style.gridAutoRows = 'auto';
-  body.style.overflowY = 'auto';
-  nileGrid.colTemplate = rebuildTemplate(colCount, columnWidths);
+  nileGrid.colTemplate = rebuildTemplate(colCount, nileGrid.columnWidths);
   applyTemplate(head, body, nileGrid.colTemplate, nileGrid.colTemplate);
 };
+
+function applySticky(
+  el: HTMLElement,
+  colIndex: number,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[]
+) {
+  const onLeft = stickyLeftIndexes.includes(colIndex);
+  const onRight = stickyRightIndexes.includes(colIndex);
+
+  if (!onLeft && !onRight) return;
+
+  el.style.position = 'sticky';
+  el.style.zIndex = '2';
+
+  if (onLeft && !onRight) {
+    const leftOrder = [...stickyLeftIndexes].sort((a, b) => a - b);
+    const pos = leftOrder.indexOf(colIndex);
+    let left = 0;
+    for (let i = 0; i < pos; i++) left += columnWidths[leftOrder[i]] ?? 0;
+    el.style.left = `${left}px`;
+    return;
+  }
+
+  const rightOrder = [...stickyRightIndexes].sort((a, b) => b - a);
+  const pos = rightOrder.indexOf(colIndex);
+
+  const scroller = el.closest('nile-grid') as HTMLElement | null;
+  const sb = scroller ? scroller.offsetWidth - scroller.clientWidth : 0;
+
+  let right = sb;
+  for (let i = 0; i < pos; i++) right += columnWidths[rightOrder[i]] ?? 0;
+
+  el.style.right = `${right - 2}px`;
+}
+
+
+export function applyColumnsTemplate(
+  nileGrid: HTMLElement,
+  columnWidths: number[],
+  slotEl: HTMLElement
+) {
+  const cols = columnWidths
+    .map((w, idx) => {
+      if (idx === columnWidths.length - 1) {
+        return `minmax(${Math.round(w)}px, auto)`;
+      }
+      return `${Math.max(0, Math.round(w))}px`;
+    })
+    .join(' ');
+  nileGrid.style.setProperty('--nile-grid-columns', cols);
+
+  const head = slotEl.querySelector('nile-grid-head') as HTMLElement | null;
+  if (head) {
+    head.style.setProperty('--nile-grid-columns', cols);
+    head
+      .querySelectorAll('nile-grid-row')
+      .forEach(r =>
+        (r as HTMLElement).style.setProperty('--nile-grid-columns', cols)
+      );
+  }
+  const body = slotEl.querySelector('nile-grid-body') as HTMLElement | null;
+  if (body) {
+    body.style.setProperty('--nile-grid-columns', cols);
+    body
+      .querySelectorAll('nile-grid-row')
+      .forEach(r =>
+        (r as HTMLElement).style.setProperty('--nile-grid-columns', cols)
+      );
+  }
+}

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

@@ -12,12 +12,8 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    display: grid;
-    overflow-y: auto;
-    overflow-x: visible;
     box-sizing: border-box;
     background-color: var(--nile-colors-white-base);
-    height: 100%;
   }
 `;
 

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-grid-body.css';
 import NileElement from '../internal/nile-element';
@@ -33,7 +33,7 @@ export class NileGridBody extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div style="display: contents;">
+      <div part="grid-body-base">
         <slot></slot>
       </div>
     `;

package/src/nile-grid-cell-item/nile-grid-cell-item.css.ts

@@ -22,8 +22,17 @@ export const styles = css`
     padding: var(--padding);
     height: auto;
     border-bottom: 1px solid var(--nile-colors-neutral-400);
-    border-right: 1px solid var(--nile-colors-neutral-400);
-    position: relative;
+    font-size: 14px;
+    font-weight: 400;
+    font-family: var(--nile-font-weight-regular);
+    background-color: #FFFFFF;
+    min-height: 44px;
+  }
+
+  .cell-item-base {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   ::slotted(*) {
@@ -33,6 +42,11 @@ export const styles = css`
     width: min-content;
   }
 
+  :host(:last-child) .resize-handle {
+    border-right: none;
+    display: none;
+  }
+
   .resize-handle {
     position: absolute;
     top: 0;
@@ -43,6 +57,7 @@ export const styles = css`
     z-index: 1;
     width: 2px;
     border-right: 1px solid var(--nile-colors-neutral-400);
+    display: none;
   }
 `;
 

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-grid-cell-item.css';
 import NileElement from '../internal/nile-element';
@@ -33,16 +33,7 @@ export class NileGridCellItem extends NileElement {
 
   @property({ type: Number, reflect: true, attribute: true }) colspan = 1;
   @property({ type: Number, reflect: true, attribute: true }) rowspan = 1;
-  @property({ type: String, reflect: true, attribute: true }) align?:
-    | 'start'
-    | 'center'
-    | 'end';
-  @property({ type: String, reflect: true, attribute: true }) valign?:
-    | 'top'
-    | 'middle'
-    | 'bottom';
   @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;
-  @property({ type: Boolean, reflect: true, attribute: true }) textOverflowType: 'ellipsis' | 'clip' = 'ellipsis';
 
   connectedCallback() {
     super.connectedCallback();
@@ -50,6 +41,7 @@ export class NileGridCellItem extends NileElement {
   }
 
   private onHandlePointerDown = (ev: PointerEvent) => {
+    
     const el = this as HTMLElement;
 
     const downXRef = { value: 0 };
@@ -71,7 +63,7 @@ export class NileGridCellItem extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div style="display: contents;">
+      <div class="cell-item-base" part="cell-item-base">
         <slot></slot>
         ${this.resizable
           ? html`

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

@@ -13,7 +13,7 @@ import { css } from 'lit';
 export const styles = css`
   :host([sticky]) {
     position: sticky;
-    z-index: 2;
+    z-index: 4;
     top: 0;
   }
 `;

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-grid-head.css';
 import NileElement from '../internal/nile-element';
@@ -32,7 +32,7 @@ export class NileGridHead extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div style="display: contents;">
+      <div part="grid-head-base">
         <slot></slot>
       </div>
     `;