@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/datatable/_spec.scss

@@ -0,0 +1,288 @@
+// https://material.io/guidelines/components/data-tables.html
+// https://material.io/guidelines/patterns/selection.html#selection-item-selection
+
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_platform.scss' as platform;
+@use '../../core/_type.scss' as type;
+
+$iconSize: dp(16) !default;
+
+.mdw-datatable {
+  display: flex;
+  flex-direction: column;
+}
+
+.mdw-datatable table {
+  display: table;
+
+  border-collapse: collapse;
+
+  width: 100%;
+}
+
+.mdw-datatable caption,
+.mdw-datatable__header {
+  @include type.addRules('h6');
+  min-height: dp(64);
+}
+
+.mdw-datatable caption {
+  caption-side: top;
+
+  padding: 0 dp(16);
+
+  line-height: dp(64);
+  text-align: left;
+  text-align: start;
+
+  :root[dir="rtl"] & {
+    text-align: right;
+    text-align: start;
+  }
+}
+
+.mdw-datatable__header {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+
+  flex: none;
+}
+
+.mdw-datatable__header-text,
+.mdw-datatable__header-actions {
+  flex-grow: 1;
+}
+
+.mdw-datatable__header-text,
+.mdw-datatable__header-actions,
+.mdw-datatable__header-controls {
+  display: flex;
+}
+
+.mdw-datatable__header-text {
+  padding-right: 0;
+  padding-left: dp(16);
+
+  :root[dir="rtl"] & {
+    padding-right: dp(16);
+    padding-left: 0;
+  }
+}
+
+.mdw-datatable tr {
+  height: dp(48);
+  border-bottom-style: solid;
+  border-bottom-width: dp(1);
+
+  outline: none;
+}
+
+.mdw-datatable thead > tr {
+  height: dp(48);
+}
+
+
+.mdw-datatable td {
+  @include type.addRules('body-2');
+  // text-align: left;
+  // Expected line-height is 20dp. Support two lines within 48dp
+  padding-top: dp(4);
+  padding-bottom: dp(4 - 1); // Remove bottom border width
+
+  outline: none;
+
+}
+
+.mdw-datatable th {
+  @include type.addRules('caption');
+  white-space: nowrap;
+}
+
+.mdw-datatable th,
+.mdw-datatable td {
+  padding-right: dp(16);
+  padding-left: dp(16);
+
+  text-align: center;
+
+  &[mdw-checkbox] {
+    line-height: 0;
+  }
+
+  &[mdw-text] {
+    text-align: left;
+    text-align: start;
+  
+    :root[dir="rtl"] & {
+      text-align: right;
+      text-align: start;
+    }
+  }
+
+  &[mdw-number] {
+    text-align: right;
+    text-align: end;
+
+    :root[dir="rtl"] & {
+      text-align: left;
+      text-align: end;
+    }
+  }
+
+  &[mdw-primary-column] {
+    width: 100%;
+    border-right-style: solid;
+    border-width: dp(1);
+
+    :root[dir="rtl"] & {
+      border-right-style: none;
+      border-left-style: solid;
+    }
+  }
+}
+
+.mdw-datatable th[mdw-selector] {
+  width: dp(24);
+  padding-right: 0;
+  padding-left: dp(16);
+
+  :root[dir="rtl"] & {
+    padding-right: dp(16);
+    padding-left: 0;
+  }
+
+  & + td,
+  & + th {
+    padding-right: dp(16);
+    padding-left: dp(12);
+
+    :root[dir="rtl"] & {
+      padding-right: dp(12);
+      padding-left: dp(16);
+    }
+  }
+}
+
+.mdw-datatable__sort-icon {
+  display: inline-block;
+  vertical-align: text-bottom;
+
+  max-width: 0;
+
+  transition-duration: motion.$shapeChangeDuration;
+  transition-property: transform;
+  transition-timing-function: motion.$standardEasing;
+
+  transform: translateX(-$iconSize) rotate(180deg);
+  transform-origin: ($iconSize * 0.5) ($iconSize * 0.5);
+
+  color: transparent;
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  &.material-icons {
+    font-size: $iconSize;
+  }
+}
+
+.mdw-datatable th[aria-sort] {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &:hover,
+  &[aria-sort="ascending"] {
+    .mdw-datatable__sort-icon {
+      transform: translateX(-$iconSize) rotate(180deg);
+
+      color: inherit;
+    }
+  }
+
+  &[aria-sort="descending"] {
+    .mdw-datatable__sort-icon {
+      transform: translateX(-$iconSize) rotate(0deg);
+
+      color: inherit;
+    }
+  }
+}
+
+.mdw-datatable__scroller {
+  overflow: auto;
+}
+
+.mdw-datatable__footer {
+  @include type.addRules('caption');
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-end;
+
+  min-height: dp(56);
+  flex: none;
+}
+
+.mdw-datatable__header,
+.mdw-datatable__footer {
+  @include platform.ifIE() {
+    // Fix IE min-height flexbug
+    &::after {
+      content: '';
+
+      min-height: inherit;
+      width: 0;
+    }
+  }
+}
+
+.mdw-datatable__footer-options,
+.mdw-datatable__footer-details {
+  margin-right: dp(28);
+  margin-left: dp(2);
+
+  :root[dir="rtl"] & {
+    margin-right: dp(2);
+    margin-left: dp(28);
+  }
+}
+
+.mdw-datatable__header-controls,
+.mdw-datatable__footer-controls {
+  display: inline-flex;
+
+  margin-right: dp(4);
+  margin-left: dp(4);
+
+  .mdw-button {
+    margin: 0 dp(4);
+  }
+}
+
+.mdw-datatable__footer-controls {
+  direction: ltr;
+
+  :root[dir="rtl"] & {
+    transform: scaleX(-1);
+  }
+}
+
+.mdw-datatable__footer-options {
+  display: flex;
+  align-items: center;
+  
+  select.mdw-textfield__input {
+    min-width: dp(40 + 24);
+
+    direction: rtl;
+
+    :root[dir="rtl"] & {
+      direction: ltr;
+    }
+  }
+}
+

package/components/datatable/_theme.scss

@@ -0,0 +1,154 @@
+@use '../../core/theme/_mixins.scss' as theme;
+
+$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),
+  selected-opacity:              (0.08, 0.16),
+
+  hover-focus-opacity:           (0.04 + 0.12, 0.08 + 0.24),
+
+  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),
+
+
+  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;
+
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('datatable', $themeValues, $key, $type);
+}
+
+@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 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: 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));
+  }
+
+  .mdw-datatable td:not([mdw-checkbox]) {
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("text-opacity", $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(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));
+      }
+    }
+  }
+
+  .mdw-datatable[mdw-has-selection] {
+    caption,
+    .mdw-datatable__header-text {
+      @if ($type == 'light') {
+        color: inherit;
+      } @else {
+        color: RGBA(getThemeValue("header-fill-text", $type));
+      }
+      
+    }
+  }
+
+  @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));
+          }
+        }
+      }
+    }
+  }
+}
+
+
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
+}
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
+}
+
+
+@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);
+}