npm - @aquera/nile-elements - Versions diffs - 0.1.55-beta-1.1 → 0.1.55-beta-1.2 - Mend

@aquera/nile-elements 0.1.55-beta-1.1 → 0.1.55-beta-1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (418) hide show

package/demo/index.html CHANGED Viewed

@@ -5,35 +5,399 @@
   <meta charset="utf-8" />
   <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
   <link rel="stylesheet" href="index.css" />
+  <style>
+    /* =======================
+       Nile Table Row CSS
+       ======================= */
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .row-container {
+      display: flex;
+      flex-direction: column;
+    }
+    .row {
+      position: relative;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid var(--nile-table-row-border-color, #e0e0e0);
+      cursor: default;
+      background: var(--nile-table-row-background, #fff);
+    }
+    .expand-icon {
+      position: absolute;
+      left: 0.25em;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+      font-size: 1em;
+      line-height: 1;
+      user-select: none;
+      z-index: 1;
+    }
+    .row ::slotted(nile-table-cell-item),
+    .row ::slotted(nile-table-header-item) {
+      flex: 1 1 0;
+      box-sizing: border-box;
+      padding: 0.75em 0.75em 0.75em 2em;
+    }
+    .row.expandable:hover {
+      background: var(--nile-table-row-hover-background, #f9f9f9);
+    }
+    .expanded-content {
+      overflow: hidden;
+      transition: max-height 0.3s ease;
+      max-height: 800px;
+      background: green;
+      padding: 0.5em 1em;
+    }
+    .tree-container {
+      position: relative;
+      z-index: 1;
+      padding-left: 1.2em;
+      padding-bottom: 1em;
+      padding-right: 1em;
+      padding-top: 1em;
+      margin-left: 0.5em;
+    }
+    .tree-container .tree-svg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      overflow: visible;
+      z-index: 2;
+    }
+    .tree-container .tree-svg line {
+      stroke: var(--nile-table-row-border-color, #e0e0e0);
+      stroke-width: 2;      /* thicker, visible */
+    }
+  </style>
   <script type="module" src="index.js"></script>
 </head>
-<style>
-  .flex-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 30px;
-    padding: 0;
-    margin: 0;
-    border: 1px solid silver;
-    height: 900px;
-  }
-  nile-button {
-    flex: 0 0 auto;
-    height: 38px;
-  }
-</style>
 <body>
-    <div style="padding: 30px;">
-        <nile-progress-bar value="80"></nile-progress-bar>
-    </div>
-    <div style="padding: 30px;">
-        <nile-circular-progressbar content="text"></nile-circular-progressbar>
-<nile-circular-progressbar value="80" size="60"></nile-circular-progressbar>
-<nile-circular-progressbar></nile-circular-progressbar>
-<nile-circular-progressbar value="30" content=" "></nile-circular-progressbar>
-    </div>
+  <div style="padding: 30px;">
+    <nile-table-body>
+      <nile-table-row>
+        <nile-table-header-item>  <nile-checkbox></nile-checkbox>Number</nile-table-header-item>
+        <nile-table-header-item>Name</nile-table-header-item>
+        <nile-table-header-item>Operation</nile-table-header-item>
+        <nile-table-header-item>Created on</nile-table-header-item>
+        <nile-table-header-item>Action</nile-table-header-item>
+      </nile-table-row>
+      <!-- Top‐level expandable row -->
+      <nile-table-row expandable>
+        <nile-table-cell-item><nile-checkbox></nile-checkbox>U1234</nile-table-cell-item>
+        <nile-table-cell-item>Oliver Thompson</nile-table-cell-item>
+        <nile-table-cell-item>Create</nile-table-cell-item>
+        <nile-table-cell-item>2023-10-10</nile-table-cell-item>
+        <nile-table-cell-item>
+          <a href="#">Approve</a> |
+          <a href="#">Reject</a>
+        </nile-table-cell-item>
+        <div slot="expanded" class="tree-container">
+          <!-- SVG overlay for connectors -->
+          <svg class="tree-svg"></svg>
+          <nile-table-body >
+            <nile-table-row>
+              <nile-table-header-item >First Name</nile-table-header-item>
+              <nile-table-header-item >Last Name</nile-table-header-item>
+              <nile-table-header-item >Rating</nile-table-header-item>
+              <nile-table-header-item >Demo</nile-table-header-item>
+              <nile-table-header-item>Description</nile-table-header-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item >4.5</nile-table-cell-item>
+              <nile-table-cell-item>Yes</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item>4.5</nile-table-cell-item>
+              <nile-table-cell-item>No</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item>4.5</nile-table-cell-item>
+              <nile-table-cell-item>Yes</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item>4.5</nile-table-cell-item>
+              <nile-table-cell-item>No</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+          </nile-table-body>
+        </div>
+      </nile-table-row>
+      <nile-table-row>
+        <nile-table-cell-item><nile-checkbox></nile-checkbox>UI1234</nile-table-cell-item>
+        <nile-table-cell-item>Oliver Thompson</nile-table-cell-item>
+        <nile-table-cell-item>Create</nile-table-cell-item>
+        <nile-table-cell-item>2023-10-10</nile-table-cell-item>
+        <nile-table-cell-item>
+          <a href="#">Approve</a> |
+          <a href="#">Reject</a>
+        </nile-table-cell-item>
+      </nile-table-row>
+      <nile-table-row>
+        <nile-table-cell-item><nile-checkbox></nile-checkbox>UI1234</nile-table-cell-item>
+        <nile-table-cell-item>Oliver Thompson</nile-table-cell-item>
+        <nile-table-cell-item>Create</nile-table-cell-item>
+        <nile-table-cell-item>2023-10-10</nile-table-cell-item>
+        <nile-table-cell-item>
+          <a href="#">Approve</a> |
+          <a href="#">Reject</a>
+        </nile-table-cell-item>
+      </nile-table-row>
+      <nile-table-row>
+        <nile-table-cell-item><nile-checkbox></nile-checkbox>UI1234</nile-table-cell-item>
+        <nile-table-cell-item>Oliver Thompson</nile-table-cell-item>
+        <nile-table-cell-item>Create</nile-table-cell-item>
+        <nile-table-cell-item>2023-10-10</nile-table-cell-item>
+        <nile-table-cell-item>
+          <a href="#">Approve</a> |
+          <a href="#">Reject</a>
+        </nile-table-cell-item>
+      </nile-table-row>
+      <nile-table-row expandable>
+        <nile-table-cell-item><nile-checkbox></nile-checkbox>U1234</nile-table-cell-item>
+        <nile-table-cell-item>Oliver Thompson</nile-table-cell-item>
+        <nile-table-cell-item>Create</nile-table-cell-item>
+        <nile-table-cell-item>2023-10-10</nile-table-cell-item>
+        <nile-table-cell-item>
+          <a href="#">Approve</a> |
+          <a href="#">Reject</a>
+        </nile-table-cell-item>
+        <div slot="expanded" class="tree-container">
+          <!-- SVG overlay for connectors -->
+          <svg class="tree-svg"></svg>
+          <nile-table-body >
+            <nile-table-row>
+              <nile-table-header-item >First Name</nile-table-header-item>
+              <nile-table-header-item >Last Name</nile-table-header-item>
+              <nile-table-header-item >Rating</nile-table-header-item>
+              <nile-table-header-item >Demo</nile-table-header-item>
+              <nile-table-header-item>Description</nile-table-header-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item >4.5</nile-table-cell-item>
+              <nile-table-cell-item>Yes</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item>4.5</nile-table-cell-item>
+              <nile-table-cell-item>No</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item>4.5</nile-table-cell-item>
+              <nile-table-cell-item>Yes</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item>4.5</nile-table-cell-item>
+              <nile-table-cell-item>No</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+          </nile-table-body>
+        </div>
+      </nile-table-row>
+      </nile-table-row>
+      <nile-table-row>
+        <nile-table-cell-item><nile-checkbox></nile-checkbox>UI1234</nile-table-cell-item>
+        <nile-table-cell-item>Oliver Thompson</nile-table-cell-item>
+        <nile-table-cell-item>Create</nile-table-cell-item>
+        <nile-table-cell-item>2023-10-10</nile-table-cell-item>
+        <nile-table-cell-item>
+          <a href="#">Approve</a> |
+          <a href="#">Reject</a>
+        </nile-table-cell-item>
+      </nile-table-row>
+      <nile-table-row>
+        <nile-table-cell-item><nile-checkbox></nile-checkbox>UI1234</nile-table-cell-item>
+        <nile-table-cell-item>Oliver Thompson</nile-table-cell-item>
+        <nile-table-cell-item>Create</nile-table-cell-item>
+        <nile-table-cell-item>2023-10-10</nile-table-cell-item>
+        <nile-table-cell-item>
+          <a href="#">Approve</a> |
+          <a href="#">Reject</a>
+        </nile-table-cell-item>
+      </nile-table-row>
+      <nile-table-row expandable>
+        <nile-table-cell-item><nile-checkbox></nile-checkbox>U1234</nile-table-cell-item>
+        <nile-table-cell-item>Oliver Thompson</nile-table-cell-item>
+        <nile-table-cell-item>Create</nile-table-cell-item>
+        <nile-table-cell-item>2023-10-10</nile-table-cell-item>
+        <nile-table-cell-item>
+          <a href="#">Approve</a> |
+          <a href="#">Reject</a>
+        </nile-table-cell-item>
+        <div slot="expanded" class="tree-container">
+          <!-- SVG overlay for connectors -->
+          <svg class="tree-svg"></svg>
+          <nile-table-body >
+            <nile-table-row>
+              <nile-table-header-item >First Name</nile-table-header-item>
+              <nile-table-header-item >Last Name</nile-table-header-item>
+              <nile-table-header-item >Rating</nile-table-header-item>
+              <nile-table-header-item >Demo</nile-table-header-item>
+              <nile-table-header-item>Description</nile-table-header-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item >4.5</nile-table-cell-item>
+              <nile-table-cell-item>Yes</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item>4.5</nile-table-cell-item>
+              <nile-table-cell-item>No</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item>4.5</nile-table-cell-item>
+              <nile-table-cell-item>Yes</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+            <nile-table-row>
+              <nile-table-cell-item>John</nile-table-cell-item>
+              <nile-table-cell-item>Doe</nile-table-cell-item>
+              <nile-table-cell-item>4.5</nile-table-cell-item>
+              <nile-table-cell-item>No</nile-table-cell-item>
+              <nile-table-cell-item>Something</nile-table-cell-item>
+            </nile-table-row>
+          </nile-table-body>
+        </div>
+      </nile-table-row>
+      <nile-table-row>
+        <nile-table-cell-item><nile-checkbox></nile-checkbox>UI1234</nile-table-cell-item>
+        <nile-table-cell-item>Oliver Thompson</nile-table-cell-item>
+        <nile-table-cell-item>Create</nile-table-cell-item>
+        <nile-table-cell-item>2023-10-10</nile-table-cell-item>
+        <nile-table-cell-item>
+          <a href="#">Approve</a> |
+          <a href="#">Reject</a>
+        </nile-table-cell-item>
+      </nile-table-row>
+      <nile-table-row>
+        <nile-table-cell-item><nile-checkbox></nile-checkbox>UI1234</nile-table-cell-item>
+        <nile-table-cell-item>Oliver Thompson</nile-table-cell-item>
+        <nile-table-cell-item>Create</nile-table-cell-item>
+        <nile-table-cell-item>2023-10-10</nile-table-cell-item>
+        <nile-table-cell-item>
+          <a href="#">Approve</a> |
+          <a href="#">Reject</a>
+        </nile-table-cell-item>
+      </nile-table-row>
+    </nile-table-body>
+  </div>
+  <script>
+    window.addEventListener('nile-row-toggle', (e) => {
+      const rowEl = /** @type {HTMLElement & { expanded: boolean }} */ (e.target);
+      if (!rowEl.expandable || !rowEl.expanded) return;
+      requestAnimationFrame(() => drawConnectors(rowEl));
+    });
+    function drawConnectors(rowEl) {
+      const container = rowEl.querySelector('.tree-container');
+      const svg = container?.querySelector('svg.tree-svg');
+      if (!svg) return;
+      // Clear previous lines
+      while (svg.firstChild) svg.removeChild(svg.firstChild);
+      const icon = rowEl.shadowRoot.querySelector('.expand-icon');
+      const iconRect = icon.getBoundingClientRect();
+      const contRect = container.getBoundingClientRect();
+      const width  = contRect.width  || container.offsetWidth;
+      const height = contRect.height || container.offsetHeight;
+      // Set up SVG coordinate system
+      svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+      svg.setAttribute('preserveAspectRatio', 'none');
+      // Compute start of vertical line
+      const startX = iconRect.left + iconRect.width / 2 - contRect.left;
+      const startY = iconRect.bottom - contRect.top;
+      const endY   = height;
+      const svgns = svg.namespaceURI;
+      // Draw vertical line
+      const vLine = document.createElementNS(svgns, 'line');
+      vLine.setAttribute('x1', `${startX}`);
+      vLine.setAttribute('y1', `${startY}`);
+      vLine.setAttribute('x2', `${startX}`);
+      vLine.setAttribute('y2', `${endY}`);
+      svg.appendChild(vLine);
+      // Draw horizontal branch for each nested row
+      container.querySelectorAll('nile-table-row').forEach(nested => {
+        const nestedDiv = nested.shadowRoot?.querySelector('.row');
+        if (!nestedDiv) return;
+        const nrRect = nestedDiv.getBoundingClientRect();
+        const midY = nrRect.top + nrRect.height / 2 - contRect.top;
+        const hLine = document.createElementNS(svgns, 'line');
+        hLine.setAttribute('x1', `${startX}`);
+        hLine.setAttribute('y1', `${midY}`);
+        hLine.setAttribute('x2', `${startX + 16}`);
+        hLine.setAttribute('y2', `${midY}`);
+        svg.appendChild(hLine);
+      });
+    }
+  </script>
 </body>
 </html>