npm - @aquera/nile-elements - Versions diffs - 1.2.0-beta-1.2 → 1.2.0-beta-1.3 - Mend

@aquera/nile-elements 1.2.0-beta-1.2 → 1.2.0-beta-1.3

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 (1143) hide show

package/README.md CHANGED Viewed

@@ -79,14 +79,6 @@ To run a local development server that serves the basic demo located in `demo/in
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
-#### Version 1.1.4
-- New Component: Nile Sidebar (UIF-987)
-- Dependency Nile 1.0.7
-#### Version 1.1.3
-- Nile RTE: Added New Property noStyles for (UIF-917)
-- Dependency Nile 1.0.6
 #### Version 1.1.2
 - Nile Table: bodyStyle attribute fix (UIF-982)
 - Nile Button: Button Style Defects for  (UIF-981)

package/demo/index.html CHANGED Viewed

@@ -7,66 +7,162 @@
     <link rel="stylesheet" href="index.css" />
     <style>
+      .hello {
+        max-width: 1000px;
+        height: 100%;
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+      }
     </style>
     <script type="module" src="index.js"></script>
   </head>
-  <body>
+  <body>
+    <button>Insert Column</button>
+    <button id="remove-col">Remove Last Column</button>
+    <nile-grid enableResizeScroll>
+      <nile-grid-head sticky>
+        <nile-grid-row>
+          <nile-grid-head-item resizable>Name</nile-grid-head-item>
+          <nile-grid-head-item width="100px" resizable>Email</nile-grid-head-item>
+          <nile-grid-head-item resizable>Role</nile-grid-head-item>
+          <nile-grid-head-item resizable>Department</nile-grid-head-item>
+          <nile-grid-head-item resizable>Location</nile-grid-head-item>
+          <nile-grid-head-item resizable>Last Login</nile-grid-head-item>
+        </nile-grid-row>
+      </nile-grid-head>
+      <nile-grid-body>
+        <nile-grid-row>
+          <nile-grid-cell-item>Alice Johnson</nile-grid-cell-item>
+          <nile-grid-cell-item>alice.johnson&#64;gmail.com</nile-grid-cell-item>
+          <nile-grid-cell-item>User</nile-grid-cell-item>
+          <nile-grid-cell-item>Engineering</nile-grid-cell-item>
+          <nile-grid-cell-item>Seattle</nile-grid-cell-item>
+          <nile-grid-cell-item>2025-09-21 10:05</nile-grid-cell-item>
+        </nile-grid-row>
+        <nile-grid-row>
+          <nile-grid-cell-item>Bob Martinez</nile-grid-cell-item>
+          <nile-grid-cell-item>bob.martinez&#64;gmail.com</nile-grid-cell-item>
+          <nile-grid-cell-item>Manager</nile-grid-cell-item>
+          <nile-grid-cell-item>Sales</nile-grid-cell-item>
+          <nile-grid-cell-item>Chicago</nile-grid-cell-item>
+          <nile-grid-cell-item>2025-09-22 08:47</nile-grid-cell-item>
+        </nile-grid-row>
+        <nile-grid-row>
+          <nile-grid-cell-item>Carol Nguyen</nile-grid-cell-item>
+          <nile-grid-cell-item>carol.nguyen&#64;gmail.com</nile-grid-cell-item>
+          <nile-grid-cell-item>Analyst</nile-grid-cell-item>
+          <nile-grid-cell-item>Finance</nile-grid-cell-item>
+          <nile-grid-cell-item>New York</nile-grid-cell-item>
+          <nile-grid-cell-item>2025-09-18 16:12</nile-grid-cell-item>
+        </nile-grid-row>
+        <nile-grid-row>
+          <nile-grid-cell-item>David Clark</nile-grid-cell-item>
+          <nile-grid-cell-item>david.clark&#64;gmail.com</nile-grid-cell-item>
+          <nile-grid-cell-item>Admin</nile-grid-cell-item>
+          <nile-grid-cell-item>IT</nile-grid-cell-item>
+          <nile-grid-cell-item>Austin</nile-grid-cell-item>
+          <nile-grid-cell-item>2025-09-24 09:31</nile-grid-cell-item>
+        </nile-grid-row>
+        <nile-grid-row>
+          <nile-grid-cell-item>Eve Patel</nile-grid-cell-item>
+          <nile-grid-cell-item>eve.patel&#64;gmail.com</nile-grid-cell-item>
+          <nile-grid-cell-item>Support</nile-grid-cell-item>
+          <nile-grid-cell-item>Customer Success</nile-grid-cell-item>
+          <nile-grid-cell-item>Denver</nile-grid-cell-item>
+          <nile-grid-cell-item>2025-09-25 13:20</nile-grid-cell-item>
+        </nile-grid-row>
+        <nile-grid-row>
+          <nile-grid-cell-item>Frank Romero</nile-grid-cell-item>
+          <nile-grid-cell-item>frank.romero&#64;gmail.com</nile-grid-cell-item>
+          <nile-grid-cell-item>Owner</nile-grid-cell-item>
+          <nile-grid-cell-item>Executive</nile-grid-cell-item>
+          <nile-grid-cell-item>San Francisco</nile-grid-cell-item>
+          <nile-grid-cell-item>2025-09-26 07:55</nile-grid-cell-item>
+        </nile-grid-row>
+      </nile-grid-body>
+    </nile-grid>
+    <script>
+      function insertColumnUsingCarry(
+        nileGrid,
+        targetCol,
+        {
+          headerText = 'New Col',
+          cellFactory = r => {
+            const c = document.createElement('nile-grid-cell-item');
+            c.textContent = `R${r + 1}`;
+            return c;
+          },
+        } = {}
+      ) {
+        // HEAD
+        const headRow = nileGrid.querySelector('nile-grid-head nile-grid-row');
+        if (headRow) {
+          const h = document.createElement('nile-grid-head-item');
+          h.setAttribute('resizable', '');
+          h.textContent = headerText;
+          const headRef = Array.from(headRow.children).find(
+            el => Number(el.dataset?.cStart || Infinity) >= targetCol + 1
+          );
+          headRef ? headRow.insertBefore(h, headRef) : headRow.appendChild(h);
+        }
+        // BODY
+        const rows = Array.from(
+          nileGrid.querySelectorAll('nile-grid-body nile-grid-row')
+        );
+        const carry = []; // carry[c] rows left covered by a rowspan from above
-<!-- <nile-input
-  type="password"
-  canSavePassword>
-</nile-input>
-  -->
+        rows.forEach((row, rIdx) => {
+          const covered = (carry[targetCol] || 0) > 0;
+          if (!covered) {
+            // find insertion ref by visual column (set by your layout pass)
+            const items = Array.from(
+              row.querySelectorAll('nile-grid-cell-item')
+            );
+            const ref = items.find(
+              el => Number(el.dataset?.cStart || Infinity) >= targetCol + 1
+            );
+            const cell = cellFactory(rIdx, row);
+            ref ? row.insertBefore(cell, ref) : row.appendChild(cell);
-  <nile-inline-sidebar id="sidebar">
-    <nile-inline-sidebar-group >
-      <nile-inline-sidebar-item>Basic Details</nile-inline-sidebar-item>
-      <nile-inline-sidebar-item>Creation Email Details</nile-inline-sidebar-item>
-      <nile-inline-sidebar-item active>Deactivation Email Details</nile-inline-sidebar-item>
-      <nile-inline-sidebar-item>Advanced Details</nile-inline-sidebar-item>
-      <nile-inline-sidebar-item disabled>Admin Email Options</nile-inline-sidebar-item>
-    </nile-inline-sidebar-group>
-    <nile-inline-sidebar-group >
-      <nile-inline-sidebar-item href="https://www.google.com">Basic Details</nile-inline-sidebar-item>
-      <nile-inline-sidebar-item>Creation Email Details</nile-inline-sidebar-item>
-      <nile-inline-sidebar-item >Deactivation Email Details</nile-inline-sidebar-item>
-      <nile-inline-sidebar-item>Advanced Details</nile-inline-sidebar-item>
-      <nile-inline-sidebar-item disabled>Admin Email Options</nile-inline-sidebar-item>
-    </nile-inline-sidebar-group>
+            const rs = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);
+            if (rs > 1)
+              carry[targetCol] = Math.max(carry[targetCol] || 0, rs - 1);
+          }
-  </nile-inline-sidebar>
+          // step rowspans down for next row
+          for (let i = 0; i < carry.length; i++) if (carry[i] > 0) carry[i]--;
+        });
+      }
-  </body>
-  <script>
-    const sidebar = document.getElementById('sidebar');
+      document.querySelector('button').addEventListener('click', () => {
+        insertColumnUsingCarry(document.querySelector('nile-grid'), 2, {
+          headerText: 'New Col',
+        });
+      });
-    sidebar.addEventListener('nile-click', (e) => {
-      const { item, href, text } = e.detail;
-      console.log('[EVENT] nile-click →', { item, href, text });
-    });
+  function removeLastColumn(nileGrid) {
+    // Remove last header
+    const headRow = nileGrid.querySelector('nile-grid-head nile-grid-row');
+    if (headRow?.lastElementChild) headRow.removeChild(headRow.lastElementChild);
-    sidebar.addEventListener('nile-change', (e) => {
-      const { selectedItem, index } = e.detail;
-      console.log('[EVENT] nile-change →', {
-        label: selectedItem.textContent.trim(),
-        index,
-      });
+    // Remove last cell from each row
+    const rows = nileGrid.querySelectorAll('nile-grid-body nile-grid-row');
+    rows.forEach(row => {
+      if (row.lastElementChild) row.removeChild(row.lastElementChild);
     });
+  }
-    sidebar.addEventListener('nile-toggle', (e) => {
-      const { collapsed } = e.detail;
-      console.log('[EVENT] nile-toggle →', collapsed ? 'Collapsed' : 'Expanded');
-    });
-  </script>
-</html>
+  document
+    .getElementById('remove-col')
+    .addEventListener('click', () =>
+      removeLastColumn(document.querySelector('nile-grid'))
+    );
+    </script>
+  </body>
+</html>

package/demo/variables.css CHANGED Viewed

@@ -308,7 +308,7 @@
   --nile-colors-primary-600: #005EA6;
   --nile-colors-primary-500: #80AED3;
   --nile-colors-primary-400: rgba(0, 94, 166, 0.25);
-  --nile-colors-primary-100: rgba(0, 94, 166, 0.1);
+  --nile-colors-primary-100: #E5EFF8;
   --nile-colors-neutral-700: #777D82;
   --nile-colors-neutral-500: #C7CED4;
   --nile-colors-neutral-400: #E6E9EB;

package/dist/aquera-nile-elements-0.1.57-beta-2.0.tgz ADDED Viewed

Binary file