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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.1.3-beta-1.4",
+  "version": "1.1.3-beta-2.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -9,7 +9,6 @@ import { css } from 'lit';
 
 export const styles = css`
   :host {
-    --min-width: 180px;
     display: grid;
     grid-template-rows: auto;
     overflow: auto;
@@ -20,21 +19,18 @@ export const styles = css`
     border: 1px solid var(--nile-colors-neutral-400);
     border-radius: var(--nile-radius-radius-xl);
     max-height: 100%;
-    width: 100%;
-    min-width: var(--min-width);
-    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
-      0px 1px 2px 0px rgba(16, 24, 40, 0.06);
   }
 
   ::slotted(nile-grid-head),
   ::slotted(nile-grid-body) {
     inline-size: 100%;
+    display: grid;
   }
 
   .nile-resize-start,
   .nile-resize-end {
     position: fixed;
-    z-index: 4;
+    z-index: 2;
     background-color: var(--nile-colors-neutral-400);
     width: 2px;
     height: 100%;

package/src/nile-grid/nile-grid.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, query, state } from 'lit/decorators.js';
 import { styles } from './nile-grid.css';
 import NileElement from '../internal/nile-element';
@@ -18,7 +18,6 @@ import {
   rebuildTemplate,
   applyTemplate,
   layout,
-  applyColumnsTemplate,
 } from './nile-grid.utils';
 
 /**
@@ -36,12 +35,14 @@ export class NileGrid extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
+  /** User can pass custom widths for the columns */
+  @property({ type: Array, attribute: true }) customWidths: number[] = [];
 
   /** 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[] = [];
+  @state() private columnWidths: number[] = [...this.customWidths];
 
   /** To get the slot element */
   @query('slot') private slotEl!: HTMLSlotElement;
@@ -52,25 +53,12 @@ export class NileGrid extends NileElement {
   /** To get the last resize line to show the resize handle */
   @query('.nile-resize-end') resizeEnd: HTMLElement;
 
-  /** To enable horizontal scrolling when user is resizing */
-  @property({ type: Boolean, attribute: true, reflect: true })
-  enableResizeScroll: boolean = false;
-
   /** To store the mutation observer */
   private mo?: MutationObserver;
 
-  /** To store the resize observer */
-  private resizeObserver?: ResizeObserver;
-
   /** To store the request animation frame */
   private raf = 0;
 
-  /** To store the sticky index's */
-  @state() public stickyLeftIndexes: number[] = [];
-
-  /** To store the sticky index's */
-  @state() public stickyRightIndexes: number[] = [];
-
   private scheduleLayout() {
     if (this.raf) cancelAnimationFrame(this.raf);
     this.raf = requestAnimationFrame(() => {
@@ -81,8 +69,7 @@ export class NileGrid extends NileElement {
         this.ensureWidths.bind(this),
         rebuildTemplate,
         applyTemplate,
-        this.stickyLeftIndexes,
-        this.stickyRightIndexes
+        this.columnWidths
       );
     });
   }
@@ -98,107 +85,32 @@ export class NileGrid extends NileElement {
       col: number;
       widthPx: number;
     };
-
+    let w: any;
     const floor = 60;
-    const tgt = e.target as HTMLElement;
-    const hasSpan =
-      !!tgt.getAttribute('colspan') &&
-      parseInt(tgt.getAttribute('colspan')!, 10) > 1;
-
-    const prevW = this.columnWidths[col] ?? floor;
-    const newWraw = hasSpan
-      ? widthPx - (this.columnWidths[col - 1] ?? 0)
-      : widthPx;
-
-    const newW = Math.max(
-      floor,
-      Math.round(Number.isFinite(newWraw) ? newWraw : prevW)
-    );
-
-    let delta = newW - prevW;
-
-    if (delta === 0) {
-      resizeLinesHandler(
-        this.resizeStart,
-        this.resizeEnd,
-        col,
-        this.scrollHeight,
-        this.columnWidths,
-      );
-      return;
-    }
-
-    const takeFromRight = (start: number, needInit: number) => {
-      let need = needInit;
-      for (let i = start; i < this.columnWidths.length && need > 0; i++) {
-        const reducible = Math.max(0, this.columnWidths[i] - floor);
-        const cut = Math.min(reducible, need);
-        if (cut > 0) {
-          this.columnWidths[i] -= cut;
-          need -= cut;
-        }
-      }
-      return need;
-    };
-
-    const giveToRight = (start: number, giveInit: number) => {
-      let give = giveInit;
-      if (start < this.columnWidths.length && give > 0) {
-        this.columnWidths[start] += give;
-        give = 0;
-      }
-      return give;
-    };
 
-    if (!this.enableResizeScroll) {
-      if (delta > 0) {
-        let rightReducible = 0;
-        for (let i = col + 1; i < this.columnWidths.length; i++) {
-          rightReducible += Math.max(0, this.columnWidths[i] - floor);
-        }
-        if (rightReducible <= 0) {
-          delta = 0;
-        } else if (delta > rightReducible) {
-          delta = rightReducible;
-        }
-
-        this.columnWidths[col] = prevW + delta;
-
-        if (delta > 0) {
-          takeFromRight(col + 1, delta);
-        }
-      } else {
-        if (col === this.columnWidths.length - 1) {
-          delta = 0;
-        } else {
-          const shrink = -delta;
-          this.columnWidths[col] = Math.max(floor, prevW - shrink);
-
-          const remaining = giveToRight(col + 1, shrink);
-          if (remaining > 0) {
-            this.columnWidths[col] = prevW;
-            delta = 0;
-          }
-        }
-      }
+    if (
+      (e.target as HTMLElement).getAttribute('colspan') &&
+      parseInt((e.target as HTMLElement).getAttribute('colspan')!) > 1
+    ) {
+      w = Math.max(floor, Math.round(widthPx - this.columnWidths[col - 1]));
     } else {
-      this.columnWidths[col] = newW;
+      w = Math.max(floor, Math.round(widthPx));
     }
-
+    this.columnWidths[col] = w;
     resizeLinesHandler(
       this.resizeStart,
       this.resizeEnd,
       col,
+      widthPx,
       this.scrollHeight,
-      this.columnWidths
+      this.columnWidths,
+      e
     );
-
     this.colTemplate = rebuildTemplate(
       this.columnWidths.length,
       this.columnWidths
     );
     applyTemplate(getHead(this.slotEl), getBody(this.slotEl), this.colTemplate);
-    applyColumnsTemplate(this, this.columnWidths, this.slotEl);
   };
 
   protected firstUpdated() {
@@ -216,18 +128,6 @@ export class NileGrid extends NileElement {
     this.mo = new MutationObserver(() => {
       this.scheduleLayout();
     });
-    this.resizeObserver?.disconnect();
-    this.resizeObserver = new ResizeObserver(() => {
-      layout(
-        this,
-        this.slotEl,
-        this.ensureWidths.bind(this),
-        rebuildTemplate,
-        applyTemplate,
-        this.stickyLeftIndexes,
-        this.stickyRightIndexes
-      );
-    });
 
     const head = getHead(this.slotEl);
     const body = getBody(this.slotEl);
@@ -240,24 +140,22 @@ export class NileGrid extends NileElement {
       attributes: true,
       attributeFilter: ['colspan', 'rowspan'],
     });
-    this.resizeObserver?.observe(this);
     layout(
       this,
       this.slotEl,
       this.ensureWidths.bind(this),
       rebuildTemplate,
       applyTemplate,
-      this.stickyLeftIndexes,
-      this.stickyRightIndexes
+      this.columnWidths
     );
   }
 
   public render(): TemplateResult {
     return html`
-      <div part="grid-base" class="nile-grid-base">
-        <slot part="grid-slot"></slot>
-        <div part="resize-start" class="nile-resize-start"></div>
-        <div part="resize-end" class="nile-resize-end"></div>
+      <div>
+        <slot></slot>
+        <div class="nile-resize-start"></div>
+        <div class="nile-resize-end"></div>
       </div>
     `;
   }
@@ -265,7 +163,6 @@ export class NileGrid extends NileElement {
   disconnectedCallback(): void {
     super.disconnectedCallback?.();
     this.mo?.disconnect();
-    this.resizeObserver?.disconnect();
 
     if (this.raf) cancelAnimationFrame(this.raf);
     removeEventListeners(