@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/datatable/_spec.scss

@@ -1,288 +0,0 @@
-// 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

@@ -1,154 +0,0 @@
-@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

@@ -1,45 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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);
-}