@aquera/nile-elements 0.1.65 → 0.1.66-beta-1.1

package/README.md

@@ -79,27 +79,8 @@ 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 0.1.65
-- Nile Option: Added a CSS Part (Technical Change) [UIF-937]
-
-#### Version 0.1.64
-- New Component: File Upload [UIF-517]
-- Nested dropdown example added [UIF-930]
-
-#### Version 0.1.63
-- Nile Code Editor: Tab completion, Colfax font, Escape key support [UIF-887]
-
-#### Version 0.1.62
-- Nile Table: Column width issue fixed [UIF-924]
-
-#### Version 0.1.61
-- Nile Select: Checkbox issue is fixed[UIF-923]
-
-#### Version 0.1.60
-- Nile Chip: Defect fix [UIF-921]
-
 #### Version 0.1.59
-- Nile Select: Virtual scroll feature added [UIF-734]
+- Nile Table: Row Expandable feature added [UIF-902]
 
 #### Version 0.1.58
 - Nile Table: Column resize feature added [UIF-889]
@@ -712,4 +693,4 @@ In this section, you can find the updates for each release of `nile-elements`. I
 - Added: more support to new design
 
 #### Version 0.0.57
-- Added: more support to new design
+- Added: more support to new design

package/demo/index.html

@@ -32,8 +32,75 @@
         <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>
+<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 expandable>
+    <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>
+    <div slot="expanded">
+      <nile-button>Click me</nile-button>
+    </div>
+  </nile-table-row>
+
+</nile-table-body>
+
     </div>
 </body>
 
+<script type="module">
+  // Wait for custom elements to upgrade
+  window.addEventListener('DOMContentLoaded', () => {
+ 
+    const tableBody = document.querySelector('nile-table-body');
+    tableBody.addEventListener('nile-change', (e) => {
+      console.log('[nile-change] fired',
+        { expanded: e.detail?.expanded, target: e.target, currentTarget: e.currentTarget });
+    });
+
+ 
+    const row = document.querySelector('nile-table-row[expandable]');
+    row.addEventListener('nile-change', (e) => {
+      console.log('[row] nile-change detail:', e.detail);
+    });
+
+ 
+    setTimeout(() => {
+ 
+      row.expanded = !row.expanded;
+      console.log('Toggled row.expanded to', row.expanded);
+    });
+  });
+</script>
+
+
 </html>