@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/adapters/datatable/index.js

@@ -1,97 +1,115 @@
-import { iterateArrayLike, iterateSomeOfArrayLike } from '../../core/dom';
-
-import * as Button from '../../components/button/index';
-import * as DataTable from '../../components/datatable/index';
-import DataTableAdapterColumn from './column';
+import * as Button from '../../components/button/index.js';
+import * as DataTableCell from '../../components/datatable/cell.js';
+import * as DataTableColumnHeader from '../../components/datatable/columnheader.js';
+import * as DataTable from '../../components/datatable/index.js';
+import * as DataTableRow from '../../components/datatable/row.js';
+import * as DataTableRowHeader from '../../components/datatable/rowheader.js';
+import * as Selection from '../../components/selection/index.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
+import { getPassiveEventListenerOption, iterateArrayLike, iterateSomeOfArrayLike } from '../../core/dom.js';
+import { noop } from '../../utils/function.js';
+
+import DataTableAdapterColumn from './column.js';
 
 /**
- * @typedef {import('./column').DataTableAdapterColumnOptions<T>} DataTableAdapterColumnOptions<T>
- * @template T
+ * @template {Record<string, any>} T
+ * @template {keyof T & string} K
+ * @typedef {import('./column').DataTableAdapterColumnOptions<T,K>} DataTableAdapterColumnOptions<T,K>
  */
 
 /**
  * Callback fired when value change is requested
  * Return truthy value to cancel updating object
+ * @template {Record<string, any>} T
+ * @template {keyof T & string} K
  * @callback DataTableAdapterOnValueChangeRequestedCallback<T>
  * @param {T} object
- * @param {string} key
- * @param {any} value
+ * @param {K} key
+ * @param {T[K]} value
  * @return {boolean} cancel
- * @template T
  */
 
 /**
  * Callback fired when value is changed
+ * @template {Record<string, any>} T
+ * @template {keyof T & string} K
  * @callback DataTableAdapterOnValueChangedCallback<T>
  * @param {T} object
- * @param {string} key
- * @param {any} value
+ * @param {K} key
+ * @param {T[K]} value
  * @return {void}
- * @template T
  */
 
 /**
+ * @template {Record<string, any>} T
  * @callback DataTableAdapterFilter<T>
  * @param {T} element
  * @param {number} [index]
  * @param {T[]} array
  * @return {any}
- * @template T
  */
 
 /**
+ * @template {Record<string, any>} T
  * @callback DataTableAdapterSorter<T>
  * @param {T} a
  * @param {T} b
  * @return {number}
- * @template T
  */
 
 /**
+ * Constructor options for DataTableAdapter
  * @template T
+ * @typedef DataTableAdapterOptions<T>
+ * @prop {HTMLElement} datatable
+ * @prop {T[]} datasource Object array
+ * @prop {DataTableAdapterFilter<T>} [filter]
+ * @prop {DataTableAdapterOnValueChangeRequestedCallback<T,keyof T & string>} [onValueChangeRequested]
+ * @prop {DataTableAdapterOnValueChangedCallback<T,keyof T & string>} [onValueChanged]
+ * @prop {DataTableAdapterSorter<T>} [sorter]
  */
+
+/** @template {Record<string, any>} T */
 export default class DataTableAdapter {
-  /**
-   * @param {Object} options
-   * @param {HTMLElement} options.datatable
-   * @param {T[]} options.datasource Object array
-   * @param {DataTableAdapterFilter<T>} [options.filter]
-   * @param {DataTableAdapterOnValueChangeRequestedCallback<T>} [options.onValueChangeRequested]
-   * @param {DataTableAdapterOnValueChangedCallback<T>} [options.onValueChanged]
-   * @param {DataTableAdapterSorter<T>} [options.sorter]
-   */
+  /** @param {DataTableAdapterOptions<T>} options */
   constructor(options) {
     this.element = options.datatable;
     this.datasource = options.datasource;
     this.filter = options.filter;
     this.sorter = options.sorter;
     this.onValueChangeRequested = options.onValueChangeRequested || (() => false);
-    this.onValueChanged = options.onValueChanged || (() => {});
-
-    this.onElementClickListener = (event) => {
-      this.handleClickInteraction(event);
-    };
-    // Use one click event listener to reduce overhead and allow dynamic content
-    this.element.addEventListener('click', this.onElementClickListener);
+    this.onValueChanged = options.onValueChanged || noop;
+    DataTable.attach(this.element);
 
-    this.onElementScrollListener = () => {
-      this.onElementScroll();
-    };
+    this.onElementScrollListener = () => this.onElementScroll();
+
+    /**
+     * @param {CustomEvent} event
+     * @return {void}
+     */
+    this.onDataTableColumnHeaderSortListener = (event) => this.onDataTableColumnHeaderSort(event);
+    /**
+     * @param {CustomEvent} event
+     * @return {void}
+     */
+    this.onCheckedChangeEventListener = (event) => this.onCheckedChangeEvent(event);
+
+    this.element.addEventListener(
+      DataTableColumnHeader.SORT_EVENT,
+      this.onDataTableColumnHeaderSortListener,
+    );
+    this.element.addEventListener(
+      Selection.CHECKED_CHANGE_EVENT,
+      this.onCheckedChangeEventListener,
+    );
+    this.element.addEventListener(
+      DataTableRow.SELECTED_CHANGE_EVENT,
+      DataTableAdapter.onRowSelectedChangeEvent,
+    );
 
-    /** @type {HTMLTableRowElement} */
-    this.tabindexRow = null;
-    /** @type {Object} */
-    this.tabindexRowData = null;
-    this.element.addEventListener('mdw:tabindexchanged', (event) => {
-      if (this.element.hasAttribute('mdw-row-focusable')) {
-        this.tabindexRow = /** @type {HTMLTableRowElement} */ (event.target);
-        this.tabindexRowData = this.getDataForTableRow(this.tabindexRow);
-      }
-    });
-    DataTable.attach(this.element);
     this.scroller = DataTable.getScroller(this.element);
     this.element.setAttribute('mdw-datatable-adapter', '');
-    /** @type {DataTableAdapterColumn<T>[]} */
+    /** @type {DataTableAdapterColumn<T,any>[]} */
     this.columns = [];
     this.page = 0;
     this.pageLimit = 0;
@@ -100,6 +118,20 @@ export default class DataTableAdapter {
     this.useLazyRendering = false;
   }
 
+  /**
+   * @param {CustomEvent} event
+   * @return {void}
+   */
+  onDataTableColumnHeaderSort(event) {
+    /** @type {HTMLTableHeaderCellElement} */
+    const cell = (event.target);
+    const ascending = event.detail.sort === 'ascending';
+    this.updateSortIcons(cell, ascending);
+    if (this.updateSortColumn) {
+      this.updateSortColumn(cell, ascending);
+    }
+  }
+
   detach() {
     this.element.removeAttribute('mdw-datatable-adapter');
     this.element = null;
@@ -131,6 +163,20 @@ export default class DataTableAdapter {
     }
   }
 
+  /**
+   * @param {CustomEvent} event
+   * @return {void}
+   */
+  static onRowSelectedChangeEvent(event) {
+    /** @type {HTMLTableRowElement} */
+    const row = (event.target);
+    const selectionElement = row.querySelector('[mdw-selector] .mdw-selection[aria-checked]');
+    if (!selectionElement) {
+      return;
+    }
+    Selection.setChecked(selectionElement, event.detail.value, true);
+  }
+
   onElementScroll() {
     if (this.debounceTimeout) {
       clearTimeout(this.debounceTimeout);
@@ -152,7 +198,7 @@ export default class DataTableAdapter {
   }
 
   buildScrollListener() {
-    this.scroller.addEventListener('scroll', this.onElementScrollListener);
+    this.scroller.addEventListener('scroll', this.onElementScrollListener, getPassiveEventListenerOption());
   }
 
   destroyScrollListener() {
@@ -160,54 +206,32 @@ export default class DataTableAdapter {
   }
 
   /**
-   * @param {PointerEvent|MouseEvent} event
+   * @param {CustomEvent} event
    * @return {void}
    */
-  handleClickInteraction(event) {
-    const { target } = event;
-    if (target instanceof HTMLInputElement) {
-      if (target.hasAttribute('type') && target.getAttribute('type') === 'checkbox') {
-        event.stopPropagation();
-        const currentCell = this.getTableCell(target);
-        if (currentCell.tagName.toLowerCase() === 'th') {
-          this.setCheckOnAllRows(target.checked, currentCell.cellIndex);
-          this.setHasSelection(target.checked);
-          return;
-        }
-        const currentRow = this.getTableRow(target);
-        const object = this.getDataForTableRow(currentRow);
-        if (this.onValueChangeRequested(object, currentCell.dataset.key, target.checked)) {
-          event.preventDefault();
-          return;
-        }
-        object[currentCell.dataset.key] = target.checked;
-        this.onValueChanged(object, currentCell.dataset.key, target.checked);
-        if (currentCell.hasAttribute('mdw-selector')) {
-          if (target.checked) {
-            currentRow.setAttribute('aria-selected', 'true');
-            this.setHasSelection(true);
-          } else {
-            currentRow.removeAttribute('aria-selected');
-            const selectedRows = this.getSelectedRows();
-            this.setHasSelection(selectedRows.length !== 0);
-          }
-        }
-      }
+  onCheckedChangeEvent(event) {
+    /** @type {HTMLElement} */
+    const selectionElement = (event.target);
+    const checked = event.detail.value === 'true';
+    const currentCell = this.getTableCell(selectionElement);
+    if (currentCell.getAttribute('role') === 'columnheader') {
+      this.setCheckOnAllRows(checked, currentCell.cellIndex);
+      this.setHasSelection(checked);
       return;
     }
-    const currentCell = this.getTableCell(/** @type {HTMLElement} */ (target));
-    if (currentCell) {
-      if (currentCell.tagName.toLowerCase() === 'th' && currentCell.hasAttribute('mdw-sortable')) {
-        event.stopPropagation();
-        let ascending = true;
-        if (currentCell.hasAttribute('mdw-sorted') && !currentCell.getAttribute('mdw-sorted')) {
-          ascending = false;
-        }
-        this.updateSortIcons(currentCell, ascending);
-        if (this.updateSortColumn) {
-          this.updateSortColumn(currentCell, ascending);
-        }
-      }
+    const currentRow = this.getTableRow(selectionElement);
+    const object = this.getDataForTableRow(currentRow);
+    /** @type {keyof T & string} */
+    // eslint-disable-next-line prefer-destructuring
+    const key = (currentCell.dataset.key);
+    if (this.onValueChangeRequested(object, key, checked)) {
+      event.preventDefault();
+      return;
+    }
+    object[key] = checked;
+    this.onValueChanged(object, key, checked);
+    if (currentCell.hasAttribute('mdw-selector')) {
+      DataTableRow.setSelected(currentRow, event.detail.value, true);
     }
   }
 
@@ -230,9 +254,12 @@ export default class DataTableAdapter {
     const index = tableHeaderCell.cellIndex;
     const tableColumn = this.columns[index];
     const direction = ascending ? 1 : -1;
-    this.sorter = ((a, b) => {
+    this.sorter = ((/** @type {T} */ a, /** @type {T} */ b) => {
       const valueA = a[tableColumn.key];
       const valueB = b[tableColumn.key];
+      if (tableColumn.sorter) {
+        return tableColumn.sorter(a, b) * direction;
+      }
       if (valueA == null) {
         if (valueB == null) {
           return 0;
@@ -248,7 +275,7 @@ export default class DataTableAdapter {
       if (tableColumn.type === 'checkbox') {
         return ((valueA ? 1 : 0) - (valueB ? 1 : 0)) * direction;
       }
-      if (valueA.localeCompare) {
+      if ('localeCompare' in valueA) {
         return valueA.localeCompare(valueB) * direction;
       }
       // eslint-disable-next-line eqeqeq
@@ -268,14 +295,14 @@ export default class DataTableAdapter {
   updateSortIcons(sortedTableHeaderCell, ascending) {
     if (sortedTableHeaderCell) {
       if (ascending) {
-        sortedTableHeaderCell.setAttribute('mdw-sorted', '');
+        sortedTableHeaderCell.setAttribute('aria-sort', 'ascending');
       } else {
-        sortedTableHeaderCell.setAttribute('mdw-sorted', 'desc');
+        sortedTableHeaderCell.setAttribute('aria-sort', 'descending');
       }
     }
-    iterateArrayLike(this.element.getElementsByTagName('th'), (otherTableHeader) => {
-      if (otherTableHeader !== sortedTableHeaderCell) {
-        otherTableHeader.removeAttribute('mdw-sorted');
+    iterateArrayLike(this.getHeaderRow().getElementsByTagName('th'), (otherTableHeader) => {
+      if (otherTableHeader !== sortedTableHeaderCell && otherTableHeader.hasAttribute('aria-sort')) {
+        otherTableHeader.setAttribute('aria-sort', 'none');
       }
     });
   }
@@ -329,11 +356,11 @@ export default class DataTableAdapter {
 
   /** @return {T[]} */
   getSelectedRows() {
-    const selectorColumn = this.columns.filter(column => column.rowSelector)[0];
+    const selectorColumn = this.columns.filter((column) => column.rowSelector)[0];
     if (!selectorColumn) {
       return [];
     }
-    return this.getDatasource().filter(row => row[selectorColumn.key]);
+    return this.getDatasource().filter((row) => row[selectorColumn.key]);
   }
 
   /**
@@ -371,8 +398,9 @@ export default class DataTableAdapter {
   }
 
   /**
-   * @param {DataTableAdapterColumnOptions<T>} options
-   * @return {DataTableAdapterColumn<T>}
+   * @template {keyof T & string} K
+   * @param {DataTableAdapterColumnOptions<T,K>} options
+   * @return {DataTableAdapterColumn<T,K>}
    */
   addColumn(options) {
     const tableColumn = new DataTableAdapterColumn(options);
@@ -410,12 +438,12 @@ export default class DataTableAdapter {
       this.pageLimit = 0;
       this.page = 0;
       if (footer) {
-        footer.style.display = 'none';
+        footer.style.setProperty('display', 'none');
       }
       this.needsDraw = true;
       return;
     }
-    footer.style.display = '';
+    footer.style.removeProperty('display');
     let optionsElement = footer.getElementsByClassName('mdw-datatable__footer-options')[0];
     if (!optionsElement) {
       optionsElement = document.createElement('div');
@@ -432,9 +460,11 @@ export default class DataTableAdapter {
         const option = document.createElement('option');
         option.value = limit.toString();
         option.textContent = limit.toString();
+        option.className = 'mdw-theme';
+        option.setAttribute('mdw-surface', 'card');
         select.appendChild(option);
       });
-      select.setAttribute('value', (options.limit && options.limit.toString()) || '10');
+      select.value = (options.limit && options.limit.toString()) || '10';
       const dropdownIcon = document.createElement('div');
       dropdownIcon.classList.add('mdw-textfield__icon');
       dropdownIcon.setAttribute('mdw-dropdown', '');
@@ -537,7 +567,7 @@ export default class DataTableAdapter {
   isRowVisible(
     el,
     viewportTop = this.scroller.scrollTop,
-    viewportBottom = this.scroller.scrollTop + this.scroller.offsetHeight
+    viewportBottom = this.scroller.scrollTop + this.scroller.offsetHeight,
   ) {
     const rowTop = el.offsetTop;
     const rowBottom = rowTop + el.offsetHeight;
@@ -587,6 +617,7 @@ export default class DataTableAdapter {
   getLazyRenderRows() {
     const tbody = this.getTableBody();
     const len = tbody.rows.length;
+    /** @type {HTMLTableRowElement[]} */
     const rows = [];
     const minRowCount = window.screen.height / 48;
     if (len <= minRowCount) {
@@ -727,12 +758,13 @@ export default class DataTableAdapter {
       const fragment = document.createDocumentFragment();
       for (let i = 0; i < rowDifference; i += 1) {
         const row = document.createElement('tr');
-        if (this.element.hasAttribute('mdw-row-focusable')) {
-          row.setAttribute('tabindex', '-1');
-        }
+        DataTableRow.attach(row);
         newRows.push(row);
         fragment.appendChild(row);
       }
+      if (this.element.hasAttribute('mdw-row-focusable')) {
+        RovingTabIndex.setupTabIndexes(newRows);
+      }
       tbody.appendChild(fragment);
     }
     if (refresh && rowDifference !== 0) {
@@ -756,21 +788,6 @@ export default class DataTableAdapter {
         this.refreshRow(index);
       });
     }
-    if (this.tabindexRowData) {
-      const row = this.getTableRowForData(this.tabindexRowData);
-      if (row !== this.tabindexRow) {
-        if (this.tabindexRow) {
-          this.tabindexRow.setAttribute('tabindex', '-1');
-        }
-        if (row) {
-          if (document.activeElement === this.tabindexRow) {
-            row.focus();
-          }
-          DataTable.updateTabIndex(row, false);
-        }
-        this.tabindexRow = row;
-      }
-    }
     if (this.useLazyRendering) {
       this.scheduleThrottledRender();
     }
@@ -827,12 +844,31 @@ export default class DataTableAdapter {
     const tableColumn = this.columns[columnIndex];
     const row = this.getTableBody().rows.item(rowIndex);
     let len = row.cells.length;
+    let createdCells = false;
     while (len <= columnIndex) {
+      createdCells = true;
       // Generate cells
       const missingColumn = this.columns[len];
-      const missingCell = row.insertCell();
-      if (missingColumn.type) {
-        missingCell.dataset.type = missingColumn.type;
+      let missingCell;
+      if (missingColumn.rowSelector) {
+        missingCell = document.createElement('th');
+        row.appendChild(missingCell);
+        DataTableRowHeader.attach(missingCell);
+      } else {
+        missingCell = row.insertCell();
+        DataTableCell.attach(missingCell);
+      }
+      switch (missingColumn.type) {
+        case 'checkbox':
+          missingCell.setAttribute('mdw-checkbox', '');
+          break;
+        case 'number':
+          missingCell.setAttribute('mdw-number', '');
+          break;
+        case 'text':
+          missingCell.setAttribute('mdw-text', '');
+          break;
+        default:
       }
       missingCell.dataset.key = missingColumn.key;
       if (missingColumn.rowSelector) {
@@ -843,6 +879,11 @@ export default class DataTableAdapter {
       }
       len += 1;
     }
+    if (createdCells) {
+      if (this.element.hasAttribute('mdw-cell-focusable')) {
+        RovingTabIndex.setupTabIndexes(row.querySelectorAll(DataTable.CELL_TABINDEX_QUERIES.join(',')));
+      }
+    }
     const cell = row.cells.item(columnIndex);
     const data = this.getDataForTableRow(row);
     const value = data[tableColumn.key];
@@ -856,18 +897,19 @@ export default class DataTableAdapter {
   }
 
   /**
-   * @param {HTMLTableCellElement|DataTableAdapterColumn|number|string} search
-   * @return {DataTableAdapterColumn<T>}
+   * @template {keyof T & string} K
+   * @param {HTMLTableCellElement|DataTableAdapterColumn<T,K>|number|string} search
+   * @return {DataTableAdapterColumn<T,K>}
    */
   getColumn(search) {
     if (search instanceof DataTableAdapterColumn) {
       return search;
     }
     if (search instanceof HTMLTableCellElement) {
-      return this.columns.filter(column => column.element === search)[0];
+      return this.columns.filter((column) => column.element === search)[0];
     }
     if (typeof search === 'string') {
-      return this.columns.filter(column => column.element.dataset.key === search)[0];
+      return this.columns.filter((column) => column.element.dataset.key === search)[0];
     }
     return this.columns[search];
   }