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

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

@@ -1,39 +1,41 @@
 import { NileGrid } from './nile-grid';
-import { HeadItemEl } from './nile-grid.types';
 
 export const resizeLinesHandler = (
-  resizeStart: HTMLElement,
-  resizeEnd: HTMLElement,
+  resizeStart: any,
+  resizeEnd: any,
   col: number,
-  scrollHeight: number,
-  columnWidths: number[],
+  widthPx: number,
+  scrollHeight: any,
+  columnWidths: any,
+  e: any
 ) => {
   resizeStart.style.display = 'block';
   resizeEnd.style.display = 'block';
   resizeStart.style.height = scrollHeight + 'px';
   resizeEnd.style.height = scrollHeight + '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`;
+  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`;
+  }
 };
 
-
 export const listenToEventListeners = (
   nileGrid: NileGrid,
   onResize: any,
@@ -111,280 +113,108 @@ export const applyTemplate = (
   if (head) head.style.gridTemplateColumns = colTemplate;
   if (body) {
     body.style.gridTemplateColumns = colTemplate;
+    body.style.overflowX = 'auto';
   }
 };
 
-function layoutRows(
-  rows: HTMLElement[],
-  carry: number[],
-  colCount: number,
-  stickyLeftIndexes: number[],
-  stickyRightIndexes: number[],
-  columnWidths: number[],
-  opts: {
-    itemSelector: string;
-    useStickyAttr?: boolean;
-    handleRowBg?: boolean;
-  }
+function computeHeadLayout(
+  headRows: HTMLElement[],
+  carryHead: number[],
+  colCount: number
 ): number {
-  rows.forEach((row, rIdx) => {
+  headRows.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;
-
-    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 items = Array.from(
-      row.querySelectorAll(opts.itemSelector)
-    ) as HTMLElement[];
+    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);
 
-    items.forEach((el) => {
-      while ((carry[c - 1] || 0) > 0) c++;
+      const cStart = c,
+        cEnd = c + colspan;
+      const rEnd = rStart + rowspan;
 
-      const colspan = Math.max(1, Number(el.getAttribute('colspan')) || 1);
-      const rowspan = Math.max(1, Number(el.getAttribute('rowspan')) || 1);
+      cell.style.gridColumn = `${cStart} / ${cEnd}`;
+      cell.style.gridRow = `${rStart} / ${rEnd}`;
+      (cell as any).dataset.cStart = String(cStart);
 
-      if (rowspan > 1) {
-        el.style.position = "absolute";
-        el.style.height = `${
-          50 * rowspan
-        }px`;
-        el.style.zIndex = "1";
+      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 cStart = c;
-      const cEnd = c + colspan;
-      const rEnd = rStart + rowspan;
+    for (let i = 0; i < carryHead.length; i++)
+      if (carryHead[i] > 0) carryHead[i]--;
+  });
+  return colCount;
+}
 
-      el.style.gridColumn = `${cStart} / ${cEnd}`;
-      el.style.gridRow = `${rStart} / ${rEnd}`;
-      (el as any).dataset.cStart = String(cStart);
+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;
 
-      if (opts.useStickyAttr && el.hasAttribute('colSticky')) {
-        stickyLeftIndexes.push(cStart - 1);
-      }
+    const bg = row.shadowRoot?.querySelector<HTMLElement>('[data-row-bg]');
+    if (bg) bg.style.gridColumn = `1 / -1`;
 
-      if (opts.useStickyAttr && el.hasAttribute('lastColSticky')) {
-        stickyRightIndexes.push(cStart - 1);
-      }
+    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);
+
+      const cStart = c,
+        cEnd = c + colspan;
+      const rEnd = rStart + rowspan;
 
-      applySticky(el, cStart - 1, stickyLeftIndexes, stickyRightIndexes, columnWidths);
+      cell.style.gridColumn = `${cStart} / ${cEnd}`;
+      cell.style.gridRow = `${rStart} / ${rEnd}`;
+      (cell as any).dataset.cStart = String(cStart);
 
       for (let k = 0; k < colspan; k++) {
         const idx = c - 1 + k;
-        carry[idx] = Math.max(carry[idx] || 0, rowspan);
+        carryBody[idx] = Math.max(carryBody[idx] || 0, rowspan);
       }
-
       maxRowspan = Math.max(maxRowspan, rowspan);
       c = cEnd;
       colCount = Math.max(colCount, cEnd - 1);
     });
 
-    if (opts.handleRowBg && bg) {
+    if (bg) {
       const rEnd = rStart + maxRowspan;
       bg.style.gridRow = `${rStart} / ${rEnd}`;
     }
 
-    for (let i = 0; i < carry.length; i++) {
-      if (carry[i] > 0) carry[i]--;
-    }
+    for (let i = 0; i < carryBody.length; i++)
+      if (carryBody[i] > 0) carryBody[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[],
-  slotEl: any
+  columnWidths: number[]
 ) {
-  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]));
+  for (let col = 0; col < colCount; col++) {
+    const containerWidth = (nileGrid.getBoundingClientRect().width || 1) - 2;
+    columnWidths[col] =
+      nileGrid.customWidths[col] || containerWidth / Math.max(colCount, 1);
   }
 }
 
@@ -394,8 +224,7 @@ export const layout = (
   ensureWidths: any,
   rebuildTemplate: any,
   applyTemplate: any,
-  stickyLeftIndexes: number[],
-  stickyRightIndexes: number[]
+  columnWidths: any
 ) => {
   const head = getHead(slotEl);
   const body = getBody(slotEl);
@@ -410,98 +239,14 @@ export const layout = (
 
   let colCount = 0;
 
-  colCount = computeHeadLayout(
-    headRows,
-    [],
-    colCount,
-    stickyLeftIndexes,
-    stickyRightIndexes,
-    nileGrid.columnWidths
-  );
-  colCount = computeBodyLayout(
-    bodyRows,
-    [],
-    colCount,
-    stickyLeftIndexes,
-    stickyRightIndexes,
-    nileGrid.columnWidths
-  );
-  computeColumnWidths(nileGrid, colCount, nileGrid.columnWidths, slotEl);
+  colCount = computeHeadLayout(headRows, [], colCount);
+  colCount = computeBodyLayout(bodyRows, [], colCount);
+
+  computeColumnWidths(nileGrid, colCount, columnWidths);
 
   ensureWidths(colCount);
   body.style.gridAutoRows = 'auto';
-  nileGrid.colTemplate = rebuildTemplate(colCount, nileGrid.columnWidths);
+  body.style.overflowY = 'auto';
+  nileGrid.colTemplate = rebuildTemplate(colCount, 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,8 +12,12 @@ 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 { html, CSSResultArray, TemplateResult } from 'lit';
+import { LitElement, 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 part="grid-body-base">
+      <div style="display: contents;">
         <slot></slot>
       </div>
     `;

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

@@ -22,17 +22,8 @@ export const styles = css`
     padding: var(--padding);
     height: auto;
     border-bottom: 1px solid var(--nile-colors-neutral-400);
-    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;
+    border-right: 1px solid var(--nile-colors-neutral-400);
+    position: relative;
   }
 
   ::slotted(*) {
@@ -42,11 +33,6 @@ export const styles = css`
     width: min-content;
   }
 
-  :host(:last-child) .resize-handle {
-    border-right: none;
-    display: none;
-  }
-
   .resize-handle {
     position: absolute;
     top: 0;
@@ -57,7 +43,6 @@ 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 { html, CSSResultArray, TemplateResult } from 'lit';
+import { LitElement, 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,7 +33,16 @@ 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();
@@ -41,7 +50,6 @@ export class NileGridCellItem extends NileElement {
   }
 
   private onHandlePointerDown = (ev: PointerEvent) => {
-    
     const el = this as HTMLElement;
 
     const downXRef = { value: 0 };
@@ -63,7 +71,7 @@ export class NileGridCellItem extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="cell-item-base" part="cell-item-base">
+      <div style="display: contents;">
         <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: 4;
+    z-index: 2;
     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 { html, CSSResultArray, TemplateResult } from 'lit';
+import { LitElement, 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 part="grid-head-base">
+      <div style="display: contents;">
         <slot></slot>
       </div>
     `;