kempo 2.9.4 → 2.10.0

package/src/components/tableControls/DeleteSelected.js

@@ -1,36 +1,45 @@
 import Component from '../Component.js';
-import { onEvent } from '../../utils/element.js';
+import { onEvent, offEvent } from '../../utils/element.js';
 
+const table = Symbol('table'),
+      deleteSelected = Symbol('deleteSelected'),
+      updateButtonState = Symbol('updateButtonState');
 export default class DeleteSelected extends Component {
-  constructor(table) {
+  constructor(_table) {
     super();
-    this.table = table;
+
+    /* Private Members */
+    this[table] = _table;
+
+    /* Private Methods */
+    this[deleteSelected] = this.deleteSelected.bind(this);
+    this[updateButtonState] = (()=>{
+      this.shadowRoot.getElementById('deleteSelectedButton').disabled = this[table].getSelectedRecords().length === 0;
+    }).bind(this);
+
+
+    /* Init */
     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());
+  /* Lifecycle Callbacks */
+  async render(force = false) {
+    if (await super.render(force)) {
+      this[updateButtonState]();
+      onEvent(this.shadowRoot.getElementById('deleteSelectedButton'), '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();
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('deleteSelectedButton'), 'click', this[deleteSelected]);
+    offEvent(this[table], 'selectionChange', this[updateButtonState]);
   }
 
-  updateButtonState() {
-    const $button = this.shadowRoot.getElementById('deleteSelectedButton');
-    $button.disabled = this.table.selectedIndexes.length === 0;
+  deleteSelected() {
+    this[table].deleteSelected();
+    this[updateButtonState]();
   }
 
   get shadowTemplate() {
@@ -48,10 +57,15 @@ export default class DeleteSelected extends Component {
         width: max-content;
         align-items: baseline;
       }
-      button {
+      #deleteSelectedButton {
         display: flex;
         align-items: center;
       }
+      #deleteSelectedButton:disabled,
+      #deleteSelectedButton[disabled] {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
     `;
   }
 }

package/src/components/tableControls/Edit.js

@@ -0,0 +1,88 @@
+import Component from '../Component.js';
+import { offEvent, onEvent } from '../../utils/element.js';
+
+const table = Symbol('table'),
+      record = Symbol('record'),
+      editRecord = Symbol('editRecord'),
+      saveRecord = Symbol('saveRecord'),
+      cancelEdit = Symbol('cancelEdit');
+export default class Edit extends Component {
+  constructor(_table, _record) {
+    super();
+
+    /* Private Members */
+    this[table] = _table;
+    this[record] = _record;
+    
+    /* Private Methods */
+    this[editRecord] = this.editRecord.bind(this);
+    this[saveRecord] = this.saveRecord.bind(this);
+    this[cancelEdit] = this.cancelEdit.bind(this);
+
+    /* Init */
+    this.registerAttributes({
+      editing: this[table].recordIsEditing(_record)
+    });
+
+    this.classList.add('mxq');
+  }
+  async render(force = false) {
+    if (await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('editButton'), 'click', this[editRecord]);
+      onEvent(this.shadowRoot.getElementById('saveButton'), 'click', this[saveRecord]);
+      onEvent(this.shadowRoot.getElementById('cancelButton'), 'click', this[cancelEdit]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('editButton'), 'click', this[editRecord]);
+    offEvent(this.shadowRoot.getElementById('saveButton'), 'click', this[saveRecord]);
+    offEvent(this.shadowRoot.getElementById('cancelButton'), 'click', this[cancelEdit]);
+  }
+
+  editRecord() {
+    this[table].editRecord(this[record]);
+  }
+  saveRecord() {
+    this[table].saveEditedRecord(this[record]);
+  }
+  cancelEdit() {
+    this[table].cancelEditedRecord(this[record]);
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <button id="editButton" class="pq no-btn">
+        <k-icon name="edit"></k-icon>
+      </button>
+      <button id="cancelButton" class="pq no-btn bg-danger">
+        <k-icon name="close"></k-icon>
+      </button>
+      <button id="saveButton" class="pq no-btn bg-success">
+        <k-icon name="check"></k-icon>
+      </button>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      button {
+        display: flex;
+        align-items: center;
+      }
+      :host([editing]) #editButton,
+      :host(:not([editing])) #cancelButton,
+      :host(:not([editing])) #saveButton {
+        display: none;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-edit', Edit);

package/src/components/tableControls/Filters.js

@@ -0,0 +1,128 @@
+import Component from '../Component.js';
+import Dialog from '../Dialog.js';
+import { offEvent, onEvent } from '../../utils/element.js';
+
+const table = Symbol('table'),
+      clickHandler = Symbol('clickHandler');
+export default class Filters extends Component {
+  constructor(_table) {
+    super();
+
+    /* Private Members */
+    this[table] = _table;
+
+    /* Private Methods */
+    this[clickHandler] = this.revealFilters.bind(this);
+
+    /* Init */
+    this.classList.add('mxq');
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force = false) {
+    if (await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('filterBtn'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('filterBtn'), 'click', this[clickHandler]);
+  }
+
+  /* Public Methods */
+  revealFilters() {
+    function formatFilter({field, condition, value}) {
+      const conditionLabel = {
+        eq: 'equals',
+        ne: 'does not equal',
+        gt: 'is greater than',
+        gte: 'is greater than or equal to',
+        lt: 'is less than',
+        lte: 'is less than or equal to',
+        contains: 'contains',
+        starts: 'starts with',
+        ends: 'ends with'
+      }[condition];
+      return /*html*/`<li
+        data-field="${field}"
+        data-condition="${condition}"
+        data-value="${value}"
+      >
+        ${field} ${conditionLabel} ${value}
+        <button class="remove-filter no-btn pq">
+          <k-icon name="close"></k-icon>
+        </button>
+    </li>`;
+    }
+    const $dialog = Dialog.create( /*html*/`
+      <h3 slot="title" class="m0 pyh px">Filters</h3>
+      <div class="p">
+        ${this[table].filters.length === 0 ? /*html*/`
+          <p>No Current Filters.</p>
+        ` :  /*html*/`
+          <h5>Current Filters</h5>
+          <ul id="currentFilters">${
+            this[table].filters.map(formatFilter).join('') 
+          }</ul>
+        `}
+        <hr />
+        <h5>Add A Filter</h5>
+        <form id="addFilter">
+          <select id="filterField" class="mb">${
+            this[table].fields.map(({name, label}) => /*html*/`<option value="${name}">${label}</option>`).join('') 
+          }</select>
+          <select id="filterCondition" class="mb">${
+            Object.entries({
+              eq: 'equals',
+              ne: 'does not equal',
+              gt: 'is greater than',
+              gte: 'is greater than or equal to',
+              lt: 'is less than',
+              lte: 'is less than or equal to',
+              contains: 'contains',
+              starts: 'starts with',
+              ends: 'ends with'
+            }).map(([key, value]) => /*html*/`<option value="${key}" ${key==='contains'?'selected':''}>${value}</option>`).join('') 
+          }</select>
+          <input id="filterValue" type="text" class="mb" />
+          <button type="submit" class="btn primary">Add Filter</button>
+        </form>
+      </div>
+    `, {
+      width: '600px'
+    });
+    const $form = $dialog.querySelector('#addFilter');
+    onEvent($form, 'submit', (e) => {
+      e.preventDefault();
+      this[table].addFilter(
+        $form.filterField.value,
+        $form.filterCondition.value,
+        $form.filterValue.value
+      );
+      $dialog.close();
+      this.revealFilters();
+    });
+    onEvent($dialog, 'click', (e) => {
+      if(e.target.closest('button')?.classList.contains('remove-filter')){
+        const $li = e.target.closest('li');
+        if($li){
+          const {field, condition, value} = $li.dataset;
+          this[table].removeFilter(field, condition, value);
+          $dialog.close();
+          this.revealFilters();
+        }
+      }
+    });
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <button id="filterBtn" class="no-btn pq">
+        <k-icon name="filter"></k-icon>
+      </button>
+    `;
+  }
+}
+window.customElements.define('k-table-filters', Filters);

package/src/components/tableControls/HiddenCount.js

@@ -0,0 +1,42 @@
+import Component from '../Component.js';
+import { offEvent, onEvent } from '../../utils/element.js';
+
+const table = Symbol('table'),
+      record = Symbol('record'),
+      hiddenChangeHandler = Symbol('hiddenChangeHandler');
+export default class HiddenCount extends Component {
+  constructor(_table, _record) {
+    super();
+
+    /* Private Members */
+    this[table] = _table;
+    this[record] = _record;
+
+    /* Private Methods */
+    this[hiddenChangeHandler] = (()=>{
+      this.shadowRoot.getElementById('hiddenCount').textContent = this[table].getHiddenRecords().length;
+    }).bind(this);
+    
+    /* Init */
+    this.classList.add('mq');
+  }
+  async render(force = false) {
+    if (await super.render(force)) {
+      this[hiddenChangeHandler]()
+      onEvent(this[table], 'recordHidden recordShown', this[hiddenChangeHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this[table], 'recordHidden recordShown', this[hiddenChangeHandler]);
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <span id="hiddenCount"></span> Hidden Records
+    `;
+  }
+}
+window.customElements.define('k-table-hidden-count', HiddenCount);

package/src/components/tableControls/Hide.js

@@ -0,0 +1,43 @@
+import Component from '../Component.js';
+import { offEvent, onEvent } from '../../utils/element.js';
+
+const table = Symbol('table'),
+      record = Symbol('record'),
+      clickHandler = Symbol('clickHandler');
+
+export default class Hide extends Component {
+  constructor(_table, _record) {
+    super();
+
+    /* Private Members */
+    this[table] = _table;
+    this[record] = _record;
+    
+    /* Private Methods */
+    this[clickHandler] = (()=>{
+      this[table].hideRecord(this[record]);
+    }).bind(this);
+
+    this.classList.add('mxq');
+  }
+  async render(force = false) {
+    if (await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('hideButton'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('hideButton'), 'click', this[clickHandler]);
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <button id="hideButton" class="pq no-btn">
+        <k-icon name="hide"></k-icon>
+      </button>
+    `;
+  }
+}
+window.customElements.define('k-table-hide', Hide);

package/src/components/tableControls/PageSelect.js

@@ -1,45 +1,69 @@
 import Component from '../Component.js';
 import { onEvent } from '../../utils/element.js';
 
+const table = Symbol('table'),
+      updateOptions = Symbol('updateOptions'),
+      handleSelectChange = Symbol('handleSelectChange'),
+      handlePageSizeChange = Symbol('handlePageSizeChange'),
+      handlePageChange = Symbol('handlePageChange'),
+      handlePageCountChange = Symbol('handlePageCountChange');
 export default class PageSelect extends Component {
-  constructor(table) {
+  constructor(_table) {
     super();
-    this.table = table;
+
+    /* Private Members */
+    this[table] = _table;
+
+    /* Private Methods */
+    this[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();
+      this.shadowRoot.getElementById('totalPages').textContent = this[table].getTotalPages();
+    }).bind(this);
+    this[handleSelectChange] = (() => {
+      this[table].setPage(parseInt(this.shadowRoot.getElementById('pageSelect').value));
+    }).bind(this);
+    this[handlePageSizeChange] = (() => {
+      this[updateOptions]();
+      this.shadowRoot.getElementById('pageSelect').value = this[table].getCurrentPage();
+    }).bind(this);
+    this[handlePageChange] = (() => {
+      this.shadowRoot.getElementById('pageSelect').value = this[table].getCurrentPage();
+    }).bind(this);
+    this[handlePageCountChange] = (() => {
+      this.shadowRoot.getElementById('totalPages').textContent = this[table].getTotalPages();
+      this[updateOptions]();
+    }).bind(this);
+    
+    /* Init */
     this.classList.add('mxq');
   }
 
-  async render() {
-    if(await super.render()){
-      this.updateOptions();
+  async render(force = false) {
+    if(await super.render(force)){
+      const $select = this.shadowRoot.getElementById('pageSelect');
+      onEvent($select, 'change', this[handleSelectChange]);
+      onEvent(this[table], 'pageSizeChange', this[handlePageSizeChange]);
+      onEvent(this[table], 'pageChange pageCountChanged', this[handlePageChange]);
+      onEvent(this[table], 'pageCountChanged',  this[handlePageCountChange]);
+      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();
-    });
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('pageSelect'), 'change', this[handleSelectChange]);
+    offEvent(this[table], 'pageSizeChange', this[handlePageSizeChange]);
+    offEvent(this[table], 'pageChange pageCountChanged', this[handlePageChange]);
+    offEvent(this[table], 'pageCountChanged',  this[handlePageCountChange]);
   }
 
   get shadowTemplate() {

package/src/components/tableControls/PageSize.js

@@ -1,37 +1,54 @@
 import Component from '../Component.js';
-import { onEvent } from '../../utils/element.js';
+import { onEvent, offEvent } from '../../utils/element.js';
 
+const table = Symbol('table'),
+      updateOptions = Symbol('updateOptions'),
+      changeHandler = Symbol('changeHandler'),
+      pageSizeChangeHandler = Symbol('pageSizeChangeHandler');
 export default class PageSize extends Component {
-  constructor(table) {
+  constructor(_table) {
     super();
-    this.table = table;
-    this.classList.add('mxq');
-  }
 
-  async render() {
-    if(await super.render()){
+    /* Private Members */
+    this[table] = _table;
+
+    /* Private Methods */
+    this[updateOptions] = (()=>{
       const $select = this.shadowRoot.getElementById('pageSizeSelect');
-      const options = this.table.pageSizeOptions;
+      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));
-      });
+      $select.value = this[table].pageSize;
+    }).bind(this);
+    this[changeHandler] = (()=>{
+      this[table].setPageSize(parseInt(this.shadowRoot.getElementById('pageSizeSelect').value));
+    }).bind(this);
+    this[pageSizeChangeHandler] = (()=>{
+      this.shadowRoot.getElementById('pageSizeSelect').value = this[table].pageSize;
+    }).bind(this);
 
-      onEvent(this.table, 'pageSizeChange', () => {
-        $select.value = this.table.pageSize;
-      });
+    /* Init */
+    this.classList.add('mxq');
+  }
 
+  async render(force = false) {
+    if(await super.render(force)){
+      onEvent(this.shadowRoot.getElementById('pageSizeSelect'), 'change', this[changeHandler]);
+      onEvent(this[table], 'pageSizeChange', this[pageSizeChangeHandler]);
+      this[updateOptions]();
       return true;
     }
     return false;
   }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('pageSizeSelect'), 'change', this[changeHandler]);
+    offEvent(this[table], 'pageSizeChange', this[pageSizeChangeHandler]);
+  }
 
   get shadowTemplate() {
     return /*html*/`

package/src/components/tableControls/ShowAll.js

@@ -0,0 +1,40 @@
+import Component from '../Component.js';
+import { offEvent, onEvent } from '../../utils/element.js';
+
+const table = Symbol('table'),
+      clickHandler = Symbol('clickHandler');
+export default class HiddenCount extends Component {
+  constructor(_table) {
+    super();
+
+    /* Private Members */
+    this[table] = _table;
+
+    /* Private Methods */
+    this[clickHandler] = (()=>{
+      this[table].showAllRecords();
+    }).bind(this);
+
+    this.classList.add('mxq');
+  }
+  async render(force = false) {
+    if (await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('showAllButton'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('showAllButton'), 'click', this[clickHandler]);
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <button id="showAllButton" class="pq no-btn">
+        <k-icon name="show"></k-icon>
+      </button>
+    `;
+  }
+}
+window.customElements.define('k-table-show-all', HiddenCount);

package/src/kempo-styles.css

@@ -724,6 +724,13 @@ input[type="color"]::-webkit-color-swatch {
   border-radius: var(--radius, 0.25rem);
   cursor: pointer;
 }
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="month"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator,
+input[type="week"]::-webkit-calendar-picker-indicator,
+input[type="search"]::-webkit-search-cancel-button {
+  filter: var(--date_picker_icon_filter);
+}
 
 /*
   Tables

package/src/kempo-vars.css

@@ -24,6 +24,7 @@
   --input_padding: var(--spacer_h) var(--spacer);
   --input_border_width: 2px;
   --btn_padding: var(--spacer_h) var(--spacer);
+  --date_picker_icon_filter: invert(0);
 }
 
 :root,
@@ -154,4 +155,5 @@
   --drop_shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); 
   --link_decoration: underline;
   --input_border_width: 2px;
+  --date_picker_icon_filter: invert(1)
 }