@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/datatable/_theme.scss

@@ -1,154 +1,128 @@
-@use '../../core/theme/_mixins.scss' as theme;
+.mdw-theme {
+  --mdw-datatable__text-rgb: var(--mdw-ink-default);
+  --mdw-datatable__text-opacity: var(--mdw-high-opacity);
+  --mdw-datatable__secondary-text-opacity: var(--mdw-medium-opacity);
+  --mdw-datatable__divider-opacity: var(--mdw-divider-opacity);
+  --mdw-datatable__hover-opacity: var(--mdw-datatable__hover-opacity-value);
+  --mdw-datatable__focus-opacity: var(--mdw-datatable__focus-opacity-value);
+  --mdw-datatable__selected-opacity: var(--mdw-datatable__selected-opacity-value);
+  --mdw-datatable__disabled-opacity: var(--mdw-inactive-opacity);
+}
 
-$themeValues: (
-  text-color:                    theme.$foreground,
-  text-opacity:                  theme.$high-opacity,
-  secondary-text-opacity:        theme.$medium-opacity,
-  divider-opacity:               theme.$divider-opacity,
+.mdw-theme[mdw-light] {
+  --mdw-datatable__hover-opacity-value: 0.04;
+  --mdw-datatable__focus-opacity-value: 0.12;
+  --mdw-datatable__selected-opacity-value: 0.08;
 
-  hover-opacity:                 (0.04, 0.08),
-  focus-opacity:                 (0.12, 0.24),
-  selected-opacity:              (0.08, 0.16),
+  // Inherit color on light theme.
+  --mdw-datatable__header-fill-text: invalid;
+}
 
-  hover-focus-opacity:           (0.04 + 0.12, 0.08 + 0.24),
+.mdw-theme[mdw-dark] {
+  --mdw-datatable__hover-opacity-value: 0.08;
+  --mdw-datatable__focus-opacity-value: 0.24;
+  --mdw-datatable__selected-opacity-value: 0.16;
+  --mdw-datatable__header-fill-text: rgba(255, 255, 255, 1.00);
+}
 
-  selected-hover-opacity:        (0.08 + 0.04, 0.16 + 0.08),
-  selected-focus-opacity:        (0.08 + 0.12, 0.16 + 0.24),
-  selected-hover-focus-opacity:  (0.08 + 0.04 + 0.12, 0.16 + 0.08 + 0.24),
+.mdw-datatable {
+  --mdw-datatable__cell-focus-opacity: 0;
+  --mdw-datatable__cell-hover-opacity: 0;
+  --mdw-datatable__cell-disabled-opacity: 0;
+  --mdw-datatable__row-background-color: var(--mdw-datatable__text-rgb);
+  --mdw-datatable__row-focus-opacity: var(--mdw-datatable__focus-opacity);
+  --mdw-datatable__row-hover-opacity: var(--mdw-datatable__hover-opacity);
+  --mdw-datatable__row-disabled-opacity: var(--mdw-datatable__disabled-opacity);
+
+  &[mdw-cell-focusable] {
+    --mdw-datatable__cell-focus-opacity: var(--mdw-datatable__focus-opacity);
+    --mdw-datatable__cell-hover-opacity: var(--mdw-datatable__hover-opacity);
+    --mdw-datatable__cell-disabled-opacity: var(--mdw-datatable__disabled-opacity);
+  }
+}
 
+.mdw-datatable tr,
+.mdw-datatable td,
+.mdw-datatable th {
+  border-color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__divider-opacity));
+}
 
-  header-fill-text:       ((invalid                  ), (#fff,              1.00)),
-  selected-primary-ie:    (('primary'  , '500', null), ('primary',   '500', null)),
-  selected-secondary-ie:  (('secondary', '500', null), ('secondary', '500', null)),
-  selected-warn-ie:       (('warn'     , '500', null), ('warn',      '500', null)),
-) !default;
+.mdw-datatable th:not([mdw-selector]),
+.mdw-datatable__footer {
+  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__secondary-text-opacity));
+}
 
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('datatable', $themeValues, $key, $type);
+.mdw-datatable caption,
+.mdw-datatable__header-text {
+  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__text-opacity));
 }
 
-@mixin addThemeRules($type: 'var') {
-  .mdw-datatable tr,
-  .mdw-datatable td,
-  .mdw-datatable th {
-    border-color: RGBA(getThemeValue("text-color", $type), getThemeValue("divider-opacity", $type));
-  }
+.mdw-datatable__header-controls,
+.mdw-datatable__footer-controls {
+  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__text-opacity));
+}
+
+.mdw-datatable td:not([mdw-checkbox]) {
+  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__text-opacity));
+}
 
-  .mdw-datatable th:not([mdw-selector]),
-  .mdw-datatable__footer {
-    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
+.mdw-datatable th[aria-sort]:not([aria-sort="none"]) {
+  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__text-opacity));
+}
+
+.mdw-datatable[mdw-has-selection] {
+  caption,
+  .mdw-datatable__header {
+    background-color: RGBA(var(--mdw-ink), var(--mdw-datatable__selected-opacity));
   }
 
-  .mdw-datatable caption,
+  caption,
   .mdw-datatable__header-text {
-    color: RGBA(getThemeValue("text-color", $type), getThemeValue("text-opacity", $type));
-  }
-  
-  .mdw-datatable__header-controls,
-  .mdw-datatable__footer-controls {
-    color: RGBA(getThemeValue("text-color", $type), getThemeValue("text-opacity", $type));
+    // Inherit color on light theme
+    color: var(--mdw-datatable__header-fill-text, inherit);
   }
+}
+
+.mdw-datatable tbody tr {
+  background-color: RGBA(var(--mdw-datatable__row-background-color), calc(var(--mdw-datatable__row-hover-opacity) + var(--mdw-datatable__row-focus-opacity) + var(--mdw-datatable__selected-opacity)));
 
-  .mdw-datatable td:not([mdw-checkbox]) {
-    color: RGBA(getThemeValue("text-color", $type), getThemeValue("text-opacity", $type));
+  &[aria-selected="true"] {
+    --mdw-datatable__row-background-color: var(--mdw-ink);
   }
 
-  .mdw-datatable th[aria-sort]:not([aria-sort="none"]) {
-    color: RGBA(getThemeValue("text-color", $type), getThemeValue("text-opacity", $type));
+  &:not([aria-selected="true"]) {
+    --mdw-datatable__selected-opacity: 0;
   }
 
-  .mdw-datatable tbody {
-    > tr {
-      &:hover {
-        background-color: RGBA(getThemeValue("text-color", $type), getThemeValue("hover-opacity", $type));
-      }
-
-      &:focus,
-      > td:focus {
-        background-color: RGBA(getThemeValue("text-color", $type), getThemeValue("focus-opacity", $type));
-      }
-
-      &:hover:focus,
-      & > td:hover:focus {
-        background-color: RGBA(getThemeValue("text-color", $type), getThemeValue("hover-focus-opacity", $type));
-      }
-    }
+  &:not(:hover) {
+    --mdw-datatable__row-hover-opacity: 0;
   }
 
-  .mdw-datatable[mdw-has-selection] {
-    caption,
-    .mdw-datatable__header-text {
-      @if ($type == 'light') {
-        color: inherit;
-      } @else {
-        color: RGBA(getThemeValue("header-fill-text", $type));
-      }
-      
-    }
+  &:not(:focus) {
+    --mdw-datatable__row-focus-opacity: 0;
   }
 
-  @if ($type == 'var') {
-    .mdw-datatable[mdw-has-selection] {
-      .mdw-datatable__header,
-      caption {
-        background-color: RGBA(var(--mdw-ink), getThemeValue("selected-opacity", $type));
-      }
-    }
-
-    .mdw-datatable tbody tr[aria-selected="true"] {
-      background-color: RGBA(var(--mdw-ink), getThemeValue("selected-opacity", $type));
-
-      &:hover {
-        background-color: RGBA(var(--mdw-ink), getThemeValue("selected-hover-opacity", $type));
-      }
-
-      &:focus {
-        background-color: RGBA(var(--mdw-ink), getThemeValue("selected-focus-opacity", $type));
-      }
-
-      &:hover:focus {
-        background-color: RGBA(var(--mdw-ink), getThemeValue("selected-hover-focus-opacity", $type));
-      }
-    }
-  } @else {
-    @each $color in ('primary', 'secondary', 'warn') {
-      .mdw-datatable[mdw-ink^="#{$color}"] {
-        &[mdw-has-selection] {
-          .mdw-datatable__header,
-          caption {
-            background-color: RGBA(getThemeValue("selected-#{$color}-ie", $type), getThemeValue("selected-opacity", $type));
-          }
-        }
-
-        tbody tr[aria-selected="true"] {
-          background-color: RGBA(getThemeValue("selected-#{$color}-ie", $type), getThemeValue("selected-opacity", $type));
-
-          &:hover {
-            background-color: RGBA(getThemeValue("selected-#{$color}-ie", $type), getThemeValue("selected-hover-opacity", $type));
-          }
-
-          &:focus {
-            background-color: RGBA(getThemeValue("selected-#{$color}-ie", $type), getThemeValue("selected-focus-opacity", $type));
-          }
-
-          &:hover:focus {
-            background-color: RGBA(getThemeValue("selected-#{$color}-ie", $type), getThemeValue("selected-hover-focus-opacity", $type));
-          }
-        }
-      }
-    }
+  &[aria-disabled="true"] {
+    --mdw-datatable__row-hover-opacity: 0;
+    --mdw-datatable__row-focus-opacity: 0;
+    opacity: var(--mdw-datatable__row-disabled-opacity);
   }
 }
 
+.mdw-datatable tbody td {
+  background-color: RGBA(var(--mdw-datatable__text-rgb), calc(var(--mdw-datatable__cell-hover-opacity) + var(--mdw-datatable__cell-focus-opacity)));
 
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
+  &:not(:hover) {
+    --mdw-datatable__cell-hover-opacity: 0;
+  }
 
+  &:not(:focus) {
+    --mdw-datatable__cell-focus-opacity: 0;
+  }
 
-@include theme.addComponentCSSVariableRules('datatable', $themeValues) {
-  @include addThemeRules();
+  &[aria-disabled="true"] {
+    --mdw-datatable__cell-hover-opacity: 0;
+    --mdw-datatable__cell-focus-opacity: 0;
+    opacity: var(--mdw-datatable__cell-disabled-opacity);
+  }
 }

package/components/datatable/cell.js

@@ -11,8 +11,7 @@ export const SELECTED_CHANGE_EVENT = 'mdw:datatablecell-selectedchange';
  * @return {void}
  */
 export function onFocus(event) {
-  /** @type {HTMLElement} */
-  const gridCellElement = (event.currentTarget);
+  const gridCellElement = /** @type {HTMLElement} */ (event.currentTarget);
   dispatchDomEvent(gridCellElement, FOCUS_EVENT);
 }
 

package/components/datatable/columnheader.js

@@ -11,8 +11,7 @@ export const SORT_EVENT = 'mdw:datatablecolumnheader-sort';
  * @return {void}
  */
 export function onClick(event) {
-  /** @type {HTMLElement} */
-  const columnHeaderElement = (event.currentTarget);
+  const columnHeaderElement = /** @type {HTMLElement} */ (event.currentTarget);
   if (Attributes.isDisabled(columnHeaderElement)) {
     return;
   }

package/components/datatable/index.js

@@ -2,7 +2,6 @@
 
 import * as Keyboard from '../../core/aria/keyboard.js';
 import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
-import { iterateArrayLike } from '../../core/dom.js';
 
 import * as DataTableCell from './cell.js';
 import * as DataTableColumnHeader from './columnheader.js';
@@ -22,8 +21,7 @@ export const CELL_TABINDEX_QUERIES = [
  */
 export function onSelectedChange(event) {
   const selected = event.detail.value === 'true';
-  /** @type {HTMLElement} */
-  const dataTableElement = (event.currentTarget);
+  const dataTableElement = /** @type {HTMLElement} */ (event.currentTarget);
   const hasSelection = selected || dataTableElement.querySelector('td[aria-selected="true"],tr[aria-selected="true"]');
   if (hasSelection) {
     dataTableElement.setAttribute('mdw-has-selection', '');
@@ -37,21 +35,20 @@ export function onSelectedChange(event) {
  * @return {HTMLElement}
  */
 export function getScroller(datatableElement) {
-  /** @type {HTMLElement} */
-  let scroller = (datatableElement.getElementsByClassName('mdw-datatable__scroller')[0]);
+  let scroller = /** @type {HTMLElement} */ (datatableElement.getElementsByClassName('mdw-datatable__scroller')[0]);
   if (!scroller) {
     scroller = document.createElement('div');
     scroller.classList.add('mdw-datatable__scroller');
     const footer = datatableElement.getElementsByClassName('mdw-datatable__footer')[0];
     if (footer) {
-      datatableElement.insertBefore(scroller, footer);
+      footer.before(scroller);
     } else {
       datatableElement.appendChild(scroller);
     }
     // Move table into scroller if it exists
     const table = datatableElement.getElementsByTagName('table')[0];
     if (table) {
-      table.parentElement.removeChild(table);
+      table.remove();
       scroller.appendChild(table);
     }
   }
@@ -99,18 +96,19 @@ export function sortColumn(datatableElement, columnIndex, ascending = true) {
   if (datatableElement.hasAttribute('mdw-datatable-adapter')) {
     return;
   }
-  iterateArrayLike(datatableElement.getElementsByTagName('th'), (th) => {
+  for (const th of datatableElement.getElementsByTagName('th')) {
     if (th.cellIndex === columnIndex) {
       th.setAttribute('aria-sort', ascending ? 'ascending' : 'descending');
     } else if (th.hasAttribute('aria-sort')) {
       th.setAttribute('aria-sort', 'none');
     }
-  });
+  }
 
   /** @type {HTMLTableSectionElement} */
   const tbody = getTableBody(datatableElement);
   const rows = [];
-  for (let i = tbody.rows.length - 1; i >= 0; i -= 1) {
+  let i = tbody.rows.length;
+  while (i--) {
     rows.push(tbody.rows.item(i));
     tbody.deleteRow(i);
   }
@@ -120,7 +118,7 @@ export function sortColumn(datatableElement, columnIndex, ascending = true) {
     const aText = aCell.textContent;
     const bText = bCell.textContent;
     if (aCell.dataset.type === 'number') {
-      return parseFloat(bText) - parseFloat(aText);
+      return Number.parseFloat(bText) - Number.parseFloat(aText);
     }
     return bText.localeCompare(aText);
   });
@@ -128,9 +126,9 @@ export function sortColumn(datatableElement, columnIndex, ascending = true) {
     rows.reverse();
   }
   const fragment = document.createDocumentFragment();
-  rows.forEach((row) => {
+  for (const row of rows) {
     fragment.appendChild(row);
-  });
+  }
   tbody.appendChild(fragment);
 }
 
@@ -139,18 +137,16 @@ export function sortColumn(datatableElement, columnIndex, ascending = true) {
  * @return {void}
  */
 export function onItemFocus(event) {
-  /** @type {HTMLElement} */
-  const datatableElement = (event.currentTarget);
+  const datatableElement = /** @type {HTMLElement} */ (event.currentTarget);
   const onFocusInteraction = datatableElement.getAttribute('mdw-on-focus');
   if (!onFocusInteraction) {
     return;
   }
-  /** @type {HTMLElement} */
-  const itemElement = (event.target);
+  const itemElement = /** @type {HTMLElement} */ (event.target);
   if (itemElement.getAttribute('aria-disabled') === 'true') {
     return;
   }
-  onFocusInteraction.split(' ').forEach((interaction) => {
+  for (const interaction of onFocusInteraction.split(' ')) {
     switch (interaction) {
       case 'select':
         if (itemElement instanceof HTMLTableRowElement) {
@@ -161,7 +157,7 @@ export function onItemFocus(event) {
         break;
       default:
     }
-  });
+  }
 }
 
 /**
@@ -169,10 +165,8 @@ export function onItemFocus(event) {
  * @return {void}
  */
 export function onSort(event) {
-  /** @type {HTMLElement} */
-  const datatableElement = (event.currentTarget);
-  /** @type {HTMLTableHeaderCellElement} */
-  const cell = (event.target);
+  const datatableElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const cell = /** @type {HTMLTableHeaderCellElement} */ (event.target);
   sortColumn(datatableElement, cell.cellIndex, event.detail.sort === 'ascending');
 }
 
@@ -181,8 +175,7 @@ export function onSort(event) {
  * @return {void}
  */
 export function onRowHeaderCheckedChange(event) {
-  /** @type {HTMLTableHeaderCellElement} */
-  const cell = (event.target);
+  const cell = /** @type {HTMLTableHeaderCellElement} */ (event.target);
   const row = cell.parentElement;
   DataTableRow.setSelected(row, event.detail.value);
 }
@@ -192,10 +185,8 @@ export function onRowHeaderCheckedChange(event) {
  * @return {void}
  */
 function onTabIndexZeroed(event) {
-  /** @type {HTMLElement} */
-  const dataTableElement = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const emitter = (event.target);
+  const dataTableElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const emitter = /** @type {HTMLElement} */ (event.target);
 
   const row = (emitter instanceof HTMLTableRowElement && emitter);
   const cell = (!row && emitter instanceof HTMLTableCellElement && emitter);
@@ -211,10 +202,8 @@ function onTabIndexZeroed(event) {
  * @return {void}
  */
 export function onKeyboard(event) {
-  /** @type {HTMLElement} */
-  const dataTableElement = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const emitter = (event.target);
+  const dataTableElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const emitter = /** @type {HTMLElement} */ (event.target);
   let current = document.activeElement;
 
   let row = (emitter instanceof HTMLTableRowElement && emitter);
@@ -223,8 +212,7 @@ export function onKeyboard(event) {
     return;
   }
   if (!row) {
-    /** @type {HTMLTableRowElement} */
-    row = (cell.parentElement);
+    row = /** @type {HTMLTableRowElement} */ (cell.parentElement);
   }
 
   let checkNavKeys = false;
@@ -247,14 +235,14 @@ export function onKeyboard(event) {
 
   if (checkNavKeys) {
     // Keyboard Navigation
-    /** @type {ArrayLike<HTMLElement>} */
+    /** @type {Iterable<HTMLElement>} */
     let searchElements;
     let reverse = false;
     let loop = false;
     switch (event.type) {
       case Keyboard.UP_ARROW_KEY:
         reverse = true;
-        // eslint-disable-next-line no-fallthrough
+        // Fallthrough
       case Keyboard.DOWN_ARROW_KEY:
         if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
           return;
@@ -269,7 +257,7 @@ export function onKeyboard(event) {
         break;
       case Keyboard.BACK_ARROW_KEY:
         reverse = true;
-        // eslint-disable-next-line no-fallthrough
+        // Fallthrough
       case Keyboard.FORWARD_ARROW_KEY:
         if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
           return;
@@ -281,7 +269,7 @@ export function onKeyboard(event) {
         break;
       case Keyboard.END_KEY:
         reverse = true;
-        // eslint-disable-next-line no-fallthrough
+        // Fallthrough
       case Keyboard.HOME_KEY:
         if (event.detail.altKey || event.detail.metaKey) {
           return;
@@ -289,11 +277,9 @@ export function onKeyboard(event) {
         if (!cell) {
           return;
         }
-        if (event.detail.ctrlKey) {
-          searchElements = getTableBody(dataTableElement).querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
-        } else {
-          searchElements = cell.parentElement.querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
-        }
+        searchElements = event.detail.ctrlKey
+          ? getTableBody(dataTableElement).querySelectorAll(CELL_TABINDEX_QUERIES.join(','))
+          : cell.parentElement.querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
         cell.setAttribute('tabindex', '-1');
         current = null;
         loop = true;
@@ -357,11 +343,11 @@ export function attach(element) {
   const headerRow = getHeaderRow(element);
   const tbody = getTableBody(element);
 
-  iterateArrayLike(headerRow.getElementsByTagName('th'), DataTableColumnHeader.attach);
-  iterateArrayLike(tbody.getElementsByTagName('th'), DataTableRowHeader.attach);
+  for (const el of headerRow.getElementsByTagName('th')) DataTableColumnHeader.attach(el);
+  for (const el of tbody.getElementsByTagName('th')) DataTableRowHeader.attach(el);
 
   const tableRows = tbody.getElementsByTagName('tr');
-  iterateArrayLike(tableRows, DataTableRow.attach);
+  for (const el of tableRows) DataTableRow.attach(el);
 
   const rowFocusable = element.hasAttribute('mdw-row-focusable');
   if (rowFocusable) {

package/components/datatable/row.js

@@ -1,6 +1,6 @@
 import * as Attributes from '../../core/aria/attributes.js';
 import * as Keyboard from '../../core/aria/keyboard.js';
-import { dispatchDomEvent, iterateArrayLike } from '../../core/dom.js';
+import { dispatchDomEvent } from '../../core/dom.js';
 
 import * as DataTableCell from './cell.js';
 
@@ -12,8 +12,7 @@ export const SELECTED_CHANGE_EVENT = 'mdw:datatablerow-selectedchange';
  * @return {void}
  */
 export function onFocus(event) {
-  /** @type {HTMLTableRowElement} */
-  const rowElement = (event.currentTarget);
+  const rowElement = /** @type {HTMLTableRowElement} */ (event.currentTarget);
   dispatchDomEvent(rowElement, FOCUS_EVENT);
 }
 
@@ -35,7 +34,7 @@ export function attach(element) {
   Keyboard.attach(element);
   element.setAttribute('role', 'row');
   element.addEventListener('focus', onFocus);
-  iterateArrayLike(element.cells, DataTableCell.attach);
+  for (const el of element.cells) DataTableCell.attach(el);
 }
 
 /**
@@ -45,5 +44,5 @@ export function attach(element) {
 export function detach(element) {
   element.removeEventListener('focus', onFocus);
   Keyboard.detach(element);
-  iterateArrayLike(element.cells, DataTableCell.detach);
+  for (const el of element.cells) DataTableCell.detach(el);
 }