kempo 2.8.0 → 2.9.0

package/docs/components/table.html

@@ -255,6 +255,29 @@
       });
     </script>
 
+    <h3 id="recordSelection"><a href="#recordSelection" class="no-link">Record Selection</a></h3>
+    <p>The table component supports record selection. You can enable record selection by setting the <code>enableSelection</code> property to <code>true</code>.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordSelectionExample"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../kempo/components/Table.js'</span>;<br /><br />  <span class="hljs-keyword">const</span> $recordSelectionExample = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordSelectionExample'</span>);<br />  $recordSelectionExample.setData({<br />    <span class="hljs-attr">records</span>: contacts,<br />    <span class="hljs-attr">enableSelection</span>: <span class="hljs-literal">true</span>,<br />    <span class="hljs-attr">controls</span>: {<br />      <span class="hljs-attr">bottom</span>: [<br />        Table.controls.prevPage,<br />        Table.controls.nextPage,<br />        Table.controls.spacer,<br />        Table.controls.selectCount,<br />        Table.controls.deleteSelected<br />      ]<br />    },<br />    <span class="hljs-attr">pageSize</span>: <span class="hljs-number">10</span><br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="recordSelectionExample"></k-table>
+    <script type="module">
+      import Table from '../kempo/components/Table.js';
+
+      const $recordSelectionExample = document.getElementById('recordSelectionExample');
+      $recordSelectionExample.setData({
+        records: contacts,
+        enableSelection: true,
+        controls: {
+          bottom: [
+            Table.controls.prevPage,
+            Table.controls.nextPage,
+            Table.controls.spacer,
+            Table.controls.selectCount,
+            Table.controls.deleteSelected
+          ]
+        },
+        pageSize: 10
+      });
+    </script>
 
     <h2>JavaScript Reference</h2>
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -332,6 +355,22 @@
     <h5><code>goToPage(<i>number</i> pageNumber)<i>: undefined</i></code></h5>
     <p>Navigates to the specified page number.</p>
 
+    <h5><code>getSelectedRecords()<i>: Array</i></code></h5>
+    <p>Returns an array of the currently selected records.</p>
+
+    <h5><code>deleteSelectedRecords()<i>: undefined</i></code></h5>
+    <p>Deletes all currently selected records from the table.</p>
+
+    <h5><code>selectAllOnPage()<i>: undefined</i></code></h5>
+    <p>Selects all the records on the current page.</p>
+
+    <h5><code>deselectAllOnPage()<i>: undefined</i></code></h5>
+    <p>Deselects all the records on the current page.</p>
+
+    <h5><code>allOnPageSelected()<i>: undefined</i></code></h5>
+    <p>Returns <code>true</code> if all the records on the current page are selected, and <code>false</code> if they are not.</p>
+    
+
   </main>
   <div style="height: 33.333vh"></div>
   <script type="module" src="../kempo/components/Import.js"></script> 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/src/components/Table.js

@@ -1,5 +1,9 @@
 import Component from './Component.js';
 import Icon from './Icon.js';
+import SelectCount from './tableControls/SelectCount.js';
+import PageSelect from './tableControls/PageSelect.js';
+import PageSize from './tableControls/PageSize.js';
+import DeleteSelected from './tableControls/DeleteSelected.js';
 import { toTitleCase } from '../utils/string.js';
 import { onEvent, dispatchEvent } from '../utils/element.js';
 
@@ -41,6 +45,12 @@ export default class Table extends Component {
     pageSize: {
       render: (table) => new PageSize(table)
     },
+    selectCount: {
+      render: (table) => new SelectCount(table)
+    },
+    deleteSelected: {
+      render: (table) => new DeleteSelected(table)
+    },
     spacer: {
       html: '<div class="flex"></div>'
     }
@@ -53,6 +63,7 @@ export default class Table extends Component {
     pageSize = 100,
     pageSizeOptions = [10, 25, 50, 100, 500],
     currentPage = 1,
+    enableSelection = false,
   } = {}) {
     super();
 
@@ -63,6 +74,8 @@ export default class Table extends Component {
       pageSize,
       pageSizeOptions,
       currentPage,
+      enableSelection,
+      selectedIndexes: [], // Renamed property
     });
 
     /* Init */
@@ -86,7 +99,26 @@ export default class Table extends Component {
     if(!this.rendered) return;
     const beforeControls = this.controls?.before?.length ? '<th></th>' : '';
     const afterControls = this.controls?.after?.length ? '<th></th>' : '';
-    this.shadowRoot.getElementById('fields').innerHTML = `${beforeControls}${this.fields.map(({label})=>`<th>${label}</th>`).join('')}${afterControls}`;
+    const selectionControl = this.enableSelection ? '<th class="selection"><input type="checkbox" id="select-all"></th>' : '';
+    this.shadowRoot.getElementById('fields').innerHTML = `${selectionControl}${beforeControls}${this.fields.map(({label})=>`<th>${label}</th>`).join('')}${afterControls}`;
+
+    if (this.enableSelection) {
+      const selectAllCheckbox = this.shadowRoot.getElementById('select-all');
+      selectAllCheckbox.addEventListener('change', () => {
+        if (selectAllCheckbox.checked) {
+          this.selectAllOnPage();
+        } else {
+          this.deselectAllOnPage();
+        }
+      });
+      onEvent(this, 'selectionChange pageChange', () => {
+        if(this.allOnPageSelected()){
+          selectAllCheckbox.checked = true;
+        } else {
+          selectAllCheckbox.checked = false;
+        }
+      });
+    }
   }
   renderRecords(){
     if(!this.rendered) return;
@@ -97,6 +129,23 @@ export default class Table extends Component {
     const paginatedRecords = this.records.slice(start, end);
     paginatedRecords.forEach((record, index) => {
       const $tr = document.createElement('tr');
+      if (this.enableSelection) {
+        const $td = document.createElement('td');
+        $td.classList.add('selection');
+        const $checkbox = document.createElement('input');
+        $checkbox.type = 'checkbox';
+        $checkbox.checked = this.selectedIndexes.includes(start + index);
+        $checkbox.addEventListener('change', () => {
+          if ($checkbox.checked) {
+            this.selectedIndexes.push(start + index);
+          } else {
+            this.selectedIndexes = this.selectedIndexes.filter(i => i !== start + index);
+          }
+          dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+        });
+        $td.appendChild($checkbox);
+        $tr.appendChild($td);
+      }
       if(this.controls?.before?.length){
         $tr.appendChild(this.renderRowControls(this.controls.before, record, start + index));
       }
@@ -228,7 +277,8 @@ export default class Table extends Component {
     controls = false,
     pageSize = false,
     pageSizeOptions = false,
-    currentPage = false
+    currentPage = false,
+    enableSelection = false // Add enableSelection property
   } = {}) {
     let rerender = false;
     let rerenderControls = false;
@@ -252,6 +302,10 @@ export default class Table extends Component {
       this.currentPage = currentPage;
       rerender = true;
     }
+    if(enableSelection !== undefined){
+      this.enableSelection = enableSelection;
+      rerender = true;
+    }
     if(rerender){
       this.renderFields();
       this.renderRecords();
@@ -301,12 +355,50 @@ export default class Table extends Component {
 
   deleteRecord(index) {
     if (index >= 0 && index < this.records.length) {
+      // Deselect the record before deleting
+      this.selectedIndexes = this.selectedIndexes.filter(i => i !== index);
+      dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
       this.records.splice(index, 1);
       this.renderRecords();
       dispatchEvent(this, 'recordDeleted', { index });
     }
   }
 
+  getSelectedRecords() {
+    return this.selectedIndexes.map(index => this.records[index]);
+  }
+
+  selectAllOnPage() {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = Math.min(start + this.pageSize, this.records.length);
+    for (let i = start; i < end; i++) {
+      if (!this.selectedIndexes.includes(i)) {
+        this.selectedIndexes.push(i);
+      }
+    }
+    this.renderRecords();
+    dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+  }
+
+  deselectAllOnPage() {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = Math.min(start + this.pageSize, this.records.length);
+    this.selectedIndexes = this.selectedIndexes.filter(index => index < start || index >= end);
+    this.renderRecords();
+    dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+  }
+
+  allOnPageSelected() {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = Math.min(start + this.pageSize, this.records.length);
+    for (let i = start; i < end; i++) {
+      if (!this.selectedIndexes.includes(i)) {
+        return false;
+      }
+    }
+    return true;
+  }
+
   get shadowTemplate(){
     return /*html*/`
       ${super.shadowTemplate}
@@ -356,6 +448,15 @@ export default class Table extends Component {
       #bottom:not(:empty) {
         border-top: 1px solid var(--c_border);
       }
+      th.selection, td.selection {
+        width: 50px;
+      }
+      th.selection input,
+      td.selection input {
+        margin: 0;
+        width: 1.35rem;
+        height: 1.35rem;
+      }
     `;
   }
 
@@ -368,131 +469,3 @@ export default class Table extends Component {
   }
 }
 window.customElements.define('k-table', Table);
-
-class PageSelect extends Component {
-  constructor(table) {
-    super();
-    this.table = table;
-    this.classList.add('mxq');
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  async render() {
-    if(await super.render()){
-      this.updateOptions();
-      return true;
-    }
-    return false;
-  }
-
-  updateOptions() {
-    const $select = this.shadowRoot.getElementById('pageSelect');
-    $select.innerHTML = '';
-    for (let i = 1; i <= this.table.getTotalPages(); i++) {
-      const $option = document.createElement('option');
-      $option.value = i;
-      $option.textContent = i;
-      $select.appendChild($option);
-    }
-    $select.value = this.table.getCurrentPage();
-    const $totalPages = this.shadowRoot.getElementById('totalPages');
-    $totalPages.textContent = this.table.getTotalPages();
-
-    onEvent($select, 'change', () => {
-      this.table.setPage(parseInt($select.value));
-    });
-
-    onEvent(this.table, 'pageSizeChange', () => {
-      this.updateOptions();
-    });
-
-    onEvent(this.table, 'pageChange', () => {
-      $select.value = this.table.getCurrentPage();
-    });
-  }
-
-  get shadowTemplate() {
-    return /*html*/`
-      <select id="pageSelect" class="mxq"></select>
-      <label> out of <span id="totalPages"></span></label>
-    `;
-  }
-
-  get shadowStyles() {
-    return /*css*/`
-      :host {
-        display: inline-flex;
-        width: max-content;
-        align-items: baseline;
-      }
-      #pageSelect, label {
-        display: inline;
-      }
-      label {
-        white-space: nowrap;
-      }
-    `;
-  }
-}
-window.customElements.define('k-table-page-select', PageSelect);
-
-class PageSize extends Component {
-  constructor(table) {
-    super();
-    this.table = table;
-    this.classList.add('mxq');
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  async render() {
-    if(await super.render()){
-      const $select = this.shadowRoot.getElementById('pageSizeSelect');
-      const options = this.table.pageSizeOptions;
-      options.forEach(size => {
-        const $option = document.createElement('option');
-        $option.value = size;
-        $option.textContent = size;
-        $select.appendChild($option);
-      });
-      $select.value = this.table.pageSize;
-
-      onEvent($select, 'change', () => {
-        this.table.setPageSize(parseInt($select.value));
-      });
-
-      onEvent(this.table, 'pageSizeChange', () => {
-        $select.value = this.table.pageSize;
-      });
-
-      return true;
-    }
-    return false;
-  }
-
-  get shadowTemplate() {
-    return /*html*/`
-      <label for="pageSizeSelect">Page Size: </label>
-      <select id="pageSizeSelect" class="mxq"></select>
-    `;
-  }
-
-  get shadowStyles() {
-    return /*css*/`
-      :host {
-        display: inline-flex;
-        width: max-content;
-        align-items: baseline;
-      }
-      label {
-        white-space: nowrap;
-      }
-    `;
-  }
-}
-window.customElements.define('k-table-page-size', PageSize);

package/src/components/tableControls/DeleteSelected.js

@@ -0,0 +1,58 @@
+import Component from '../Component.js';
+import { onEvent } from '../../utils/element.js';
+
+export default class DeleteSelected extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  async render() {
+    if (await super.render()) {
+      this.updateButtonState();
+      const $button = this.shadowRoot.getElementById('deleteSelectedButton');
+      onEvent($button, 'click', () => this.deleteSelected());
+      onEvent(this.table, 'selectionChange', () => this.updateButtonState());
+      return true;
+    }
+    return false;
+  }
+
+  deleteSelected() {
+    const selectedIndexes = this.table.selectedIndexes;
+    selectedIndexes.sort((a, b) => b - a); // Sort in descending order
+    selectedIndexes.forEach(index => this.table.deleteRecord(index));
+    this.table.selectedIndexes = [];
+    this.table.renderRecords();
+    this.updateButtonState();
+  }
+
+  updateButtonState() {
+    const $button = this.shadowRoot.getElementById('deleteSelectedButton');
+    $button.disabled = this.table.selectedIndexes.length === 0;
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <button id="deleteSelectedButton" class="pq">
+        <k-icon name="delete"></k-icon>
+      </button>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      button {
+        display: flex;
+        align-items: center;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-delete-selected', DeleteSelected);

package/src/components/tableControls/PageSelect.js

@@ -0,0 +1,68 @@
+import Component from '../Component.js';
+import { onEvent } from '../../utils/element.js';
+
+export default class PageSelect extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  async render() {
+    if(await super.render()){
+      this.updateOptions();
+      return true;
+    }
+    return false;
+  }
+
+  updateOptions() {
+    const $select = this.shadowRoot.getElementById('pageSelect');
+    $select.innerHTML = '';
+    for (let i = 1; i <= this.table.getTotalPages(); i++) {
+      const $option = document.createElement('option');
+      $option.value = i;
+      $option.textContent = i;
+      $select.appendChild($option);
+    }
+    $select.value = this.table.getCurrentPage();
+    const $totalPages = this.shadowRoot.getElementById('totalPages');
+    $totalPages.textContent = this.table.getTotalPages();
+
+    onEvent($select, 'change', () => {
+      this.table.setPage(parseInt($select.value));
+    });
+
+    onEvent(this.table, 'pageSizeChange', () => {
+      this.updateOptions();
+    });
+
+    onEvent(this.table, 'pageChange', () => {
+      $select.value = this.table.getCurrentPage();
+    });
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <select id="pageSelect" class="mxq"></select>
+      <label> out of <span id="totalPages"></span></label>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      #pageSelect, label {
+        display: inline;
+      }
+      label {
+        white-space: nowrap;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-page-select', PageSelect);

package/src/components/tableControls/PageSize.js

@@ -0,0 +1,56 @@
+import Component from '../Component.js';
+import { onEvent } from '../../utils/element.js';
+
+export default class PageSize extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  async render() {
+    if(await super.render()){
+      const $select = this.shadowRoot.getElementById('pageSizeSelect');
+      const options = this.table.pageSizeOptions;
+      options.forEach(size => {
+        const $option = document.createElement('option');
+        $option.value = size;
+        $option.textContent = size;
+        $select.appendChild($option);
+      });
+      $select.value = this.table.pageSize;
+
+      onEvent($select, 'change', () => {
+        this.table.setPageSize(parseInt($select.value));
+      });
+
+      onEvent(this.table, 'pageSizeChange', () => {
+        $select.value = this.table.pageSize;
+      });
+
+      return true;
+    }
+    return false;
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <label for="pageSizeSelect">Page Size: </label>
+      <select id="pageSizeSelect" class="mxq"></select>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      label {
+        white-space: nowrap;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-page-size', PageSize);

package/src/components/tableControls/SelectCount.js

@@ -0,0 +1,46 @@
+import Component from '../Component.js';
+import { onEvent } from '../../utils/element.js';
+
+export default class SelectCount extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  async render() {
+    if (await super.render()) {
+      this.updateCount();
+      onEvent(this.table, 'selectionChange', () => {
+        this.updateCount();
+      });
+      return true;
+    }
+    return false;
+  }
+
+  updateCount() {
+    const $count = this.shadowRoot.getElementById('selectCount');
+    $count.textContent = this.table.getSelectedRecords().length;
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <label>Selected: <span id="selectCount"></span></label>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      label {
+        white-space: nowrap;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-select-count', SelectCount);