@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/datatable/_theme.scss

@@ -1,13 +1,10 @@
-@import '../../core/theme/index.scss';
+@use '../../core/theme/_mixins.scss' as theme;
 
-$mdw-datatable__theme-values: (
-  text-color:           $mdw-theme__default-ink,
-  secondary-text-color: $mdw-theme__medium-ink,
-  divider-color:        $mdw-theme__divider-ink,
-
-  controls-color:       $mdw-theme__default-ink,
-
-  overlay-rgb:          ("0, 0, 0", "255, 255, 255"),
+$themeValues: (
+  text-color:                    theme.$foreground,
+  text-opacity:                  theme.$high-opacity,
+  secondary-text-opacity:        theme.$medium-opacity,
+  divider-opacity:               theme.$divider-opacity,
 
   hover-opacity:                 (0.04, 0.08),
   focus-opacity:                 (0.12, 0.24),
@@ -21,64 +18,59 @@ $mdw-datatable__theme-values: (
 
 
   header-fill-text:       ((invalid                  ), (#fff,              1.00)),
-  selected-primary-ie:    (('primary'  , '500', 1.00), ('primary',   '500', 1.00)),
-  selected-secondary-ie:  (('secondary', '500', 1.00), ('secondary', '500', 1.00)),
-  selected-warn-ie:       (('warn'     , '500', 1.00), ('warn',      '500', 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;
 
-@function mdwDatatableThemeValue($key, $type) {
-  @return mdwGetThemeValue('datatable', $mdw-datatable__theme-values, $key, $type);
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('datatable', $themeValues, $key, $type);
 }
 
-@mixin mdw-datatable__theme-rules($type: 'var') {
+@mixin addThemeRules($type: 'var') {
   .mdw-datatable tr,
   .mdw-datatable td,
   .mdw-datatable th {
-    border-color: mdwDatatableThemeValue("divider-color", $type);
+    border-color: RGBA(getThemeValue("text-color", $type), getThemeValue("divider-opacity", $type));
+  }
+
+  .mdw-datatable th:not([mdw-selector]),
+  .mdw-datatable__footer {
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
   }
 
   .mdw-datatable caption,
   .mdw-datatable__header-text {
-    color: mdwDatatableThemeValue("text-color", $type);
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("text-opacity", $type));
   }
   
   .mdw-datatable__header-controls,
   .mdw-datatable__footer-controls {
-    color: mdwDatatableThemeValue("controls-color", $type);
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("text-opacity", $type));
   }
 
-  .mdw-datatable th:not([mdw-selector]),
-  .mdw-datatable__footer {
-    color: mdwDatatableThemeValue("secondary-text-color", $type);
+  .mdw-datatable td:not([mdw-checkbox]) {
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("text-opacity", $type));
   }
 
-  .mdw-datatable td:not([data-type="checkbox"]) {
-    color: mdwDatatableThemeValue("text-color", $type);
+  .mdw-datatable th[aria-sort]:not([aria-sort="none"]) {
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("text-opacity", $type));
   }
 
   .mdw-datatable tbody {
     > tr {
       &:hover {
-        background-color: RGBA(
-          #{mdwDatatableThemeValue("overlay-rgb", $type)},
-          #{mdwDatatableThemeValue("hover-opacity", $type)}
-        );
+        background-color: RGBA(getThemeValue("text-color", $type), getThemeValue("hover-opacity", $type));
       }
 
       &:focus,
       > td:focus {
-        background-color: RGBA(
-          #{mdwDatatableThemeValue("overlay-rgb", $type)},
-          #{mdwDatatableThemeValue("focus-opacity", $type)}
-        );
+        background-color: RGBA(getThemeValue("text-color", $type), getThemeValue("focus-opacity", $type));
       }
 
       &:hover:focus,
       & > td:hover:focus {
-        background-color: RGBA(
-          #{mdwDatatableThemeValue("overlay-rgb", $type)},
-          #{mdwDatatableThemeValue("hover-focus-opacity", $type)}
-        );
+        background-color: RGBA(getThemeValue("text-color", $type), getThemeValue("hover-focus-opacity", $type));
       }
     }
   }
@@ -89,146 +81,59 @@ $mdw-datatable__theme-values: (
       @if ($type == 'light') {
         color: inherit;
       } @else {
-        color: mdwDatatableThemeValue("header-fill-text", $type);
+        color: RGBA(getThemeValue("header-fill-text", $type));
       }
       
     }
   }
 
-  .mdw-datatable th[mdw-sorted] {
-    color: mdwDatatableThemeValue("text-color", $type);
-  }
-
   @if ($type == 'var') {
-    .mdw-datatable tbody tr[aria-selected="true"] {
-      background-color: rgba(var(--ink-color), mdwDatatableThemeValue("selected-opacity", $type));
-
-      &:hover {
-        background-color: rgba(var(--ink-color), mdwDatatableThemeValue("selected-hover-opacity", $type));
-      }
-
-      &:focus {
-        background-color: rgba(var(--ink-color), mdwDatatableThemeValue("selected-focus-opacity", $type));
-      }
-
-      &:hover:focus {
-        background-color: rgba(var(--ink-color), mdwDatatableThemeValue("selected-hover-focus-opacity", $type));
-      }
-    }
-
     .mdw-datatable[mdw-has-selection] {
       .mdw-datatable__header,
       caption {
-        background-color: rgba(var(--ink-color), mdwDatatableThemeValue("selected-opacity", $type));
+        background-color: RGBA(var(--mdw-ink), getThemeValue("selected-opacity", $type));
       }
     }
-  }
-
-  @if ($type != 'var') {
-    .mdw-datatable[mdw-ink^="primary"] {
-      &[mdw-has-selection] {
-        .mdw-datatable__header,
-        caption {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-primary-ie", $type),
-            mdwDatatableThemeValue("selected-opacity", $type)
-          );
-        }
-      }
-
-      tbody tr[aria-selected="true"] {
-        background-color: rgba(
-          mdwDatatableThemeValue("selected-primary-ie", $type),
-          mdwDatatableThemeValue("selected-opacity", $type));
-
-          &:hover {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-primary-ie", $type),
-            mdwDatatableThemeValue("selected-hover-opacity", $type));
-        }
 
-        &:focus {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-primary-ie", $type),
-            mdwDatatableThemeValue("selected-focus-opacity", $type));
-        }
+    .mdw-datatable tbody tr[aria-selected="true"] {
+      background-color: RGBA(var(--mdw-ink), getThemeValue("selected-opacity", $type));
 
-        &:hover:focus {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-primary-ie", $type),
-            mdwDatatableThemeValue("selected-hover-focus-opacity", $type));
-        }
+      &:hover {
+        background-color: RGBA(var(--mdw-ink), getThemeValue("selected-hover-opacity", $type));
       }
-    }
 
-    .mdw-datatable[mdw-ink^="secondary"] {
-      &[mdw-has-selection] {
-        .mdw-datatable__header,
-        caption {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-secondary-ie", $type),
-            mdwDatatableThemeValue("selected-opacity", $type)
-          );
-        }
+      &:focus {
+        background-color: RGBA(var(--mdw-ink), getThemeValue("selected-focus-opacity", $type));
       }
 
-      tbody tr[aria-selected="true"] {
-        background-color: rgba(
-          mdwDatatableThemeValue("selected-secondary-ie", $type),
-          mdwDatatableThemeValue("selected-opacity", $type));
-
-        &:hover {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-secondary-ie", $type),
-            mdwDatatableThemeValue("selected-hover-opacity", $type));
-        }
-
-        &:focus {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-secondary-ie", $type),
-            mdwDatatableThemeValue("selected-focus-opacity", $type));
-        }
-
-        &:hover:focus {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-secondary-ie", $type),
-            mdwDatatableThemeValue("selected-hover-focus-opacity", $type));
-        }
+      &:hover:focus {
+        background-color: RGBA(var(--mdw-ink), getThemeValue("selected-hover-focus-opacity", $type));
       }
     }
-
-    .mdw-datatable[mdw-ink^="warn"] {
-      &[mdw-has-selection] {
-        .mdw-datatable__header,
-        caption {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-warn-ie", $type),
-            mdwDatatableThemeValue("selected-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(
-          mdwDatatableThemeValue("selected-warn-ie", $type),
-          mdwDatatableThemeValue("selected-opacity", $type));
+        tbody tr[aria-selected="true"] {
+          background-color: RGBA(getThemeValue("selected-#{$color}-ie", $type), getThemeValue("selected-opacity", $type));
 
           &:hover {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-warn-ie", $type),
-            mdwDatatableThemeValue("selected-hover-opacity", $type));
-        }
+            background-color: RGBA(getThemeValue("selected-#{$color}-ie", $type), getThemeValue("selected-hover-opacity", $type));
+          }
 
-        &:focus {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-warn-ie", $type),
-            mdwDatatableThemeValue("selected-focus-opacity", $type));
-        }
+          &:focus {
+            background-color: RGBA(getThemeValue("selected-#{$color}-ie", $type), getThemeValue("selected-focus-opacity", $type));
+          }
 
-        &:hover:focus {
-          background-color: rgba(
-            mdwDatatableThemeValue("selected-warn-ie", $type),
-            mdwDatatableThemeValue("selected-hover-focus-opacity", $type));
+          &:hover:focus {
+            background-color: RGBA(getThemeValue("selected-#{$color}-ie", $type), getThemeValue("selected-hover-focus-opacity", $type));
+          }
         }
       }
     }
@@ -236,14 +141,14 @@ $mdw-datatable__theme-values: (
 }
 
 
-@include mdw-theme__add-component-fallback-rules('light') {
-  @include mdw-datatable__theme-rules('light');
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
 }
-@include mdw-theme__add-component-fallback-rules('dark') {
-  @include mdw-datatable__theme-rules('dark');
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
 }
 
 
-@include mdw-theme__add-component-variable-rules('datatable', $mdw-datatable__theme-values) {
-  @include mdw-datatable__theme-rules();
+@include theme.addComponentCSSVariableRules('datatable', $themeValues) {
+  @include addThemeRules();
 }

package/components/datatable/cell.js

@@ -0,0 +1,45 @@
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import { dispatchDomEvent } from '../../core/dom.js';
+
+export const FOCUS_EVENT = 'mdw:datatablecell-focus';
+export const CHECKED_CHANGE_EVENT = 'mdw:datatablecell-checkedchange';
+export const SELECTED_CHANGE_EVENT = 'mdw:datatablecell-selectedchange';
+
+/**
+ * @param {FocusEvent} event
+ * @return {void}
+ */
+export function onFocus(event) {
+  /** @type {HTMLElement} */
+  const gridCellElement = (event.currentTarget);
+  dispatchDomEvent(gridCellElement, FOCUS_EVENT);
+}
+
+/**
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {boolean} [dispatchEvent=true]
+ * @return {boolean} successful
+ */
+export function setSelected(element, value, dispatchEvent = true) {
+  return Attributes.setSelected(element, value, dispatchEvent ? SELECTED_CHANGE_EVENT : null);
+}
+
+/**
+ * @param {HTMLTableCellElement} element
+ * @return {void}
+ */
+export function attach(element) {
+  Keyboard.attach(element);
+  element.addEventListener('focus', onFocus);
+}
+
+/**
+ * @param {HTMLTableCellElement} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeEventListener('focus', onFocus);
+  Keyboard.detach(element);
+}

package/components/datatable/columnheader.js

@@ -0,0 +1,47 @@
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import { dispatchDomEvent } from '../../core/dom.js';
+
+import * as Cell from './cell.js';
+
+export const SORT_EVENT = 'mdw:datatablecolumnheader-sort';
+
+/**
+ * @param {FocusEvent} event
+ * @return {void}
+ */
+export function onClick(event) {
+  /** @type {HTMLElement} */
+  const columnHeaderElement = (event.currentTarget);
+  if (Attributes.isDisabled(columnHeaderElement)) {
+    return;
+  }
+  const ariaSort = columnHeaderElement.getAttribute('aria-sort');
+  if (!ariaSort) {
+    return;
+  }
+  const sort = (ariaSort === 'ascending' ? 'descending' : 'ascending');
+  const detail = { sort };
+  dispatchDomEvent(columnHeaderElement, SORT_EVENT, detail);
+}
+
+/**
+ * @param {HTMLTableHeaderCellElement} element
+ * @return {void}
+ */
+export function attach(element) {
+  Keyboard.attach(element);
+  element.setAttribute('role', 'columnheader');
+  element.addEventListener('click', onClick);
+  Cell.attach(element);
+}
+
+/**
+ * @param {HTMLTableHeaderCellElement} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeEventListener('click', onClick);
+  Keyboard.detach(element);
+  Cell.detach(element);
+}