@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/datatable/_spec.scss

@@ -0,0 +1,225 @@
+// 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: 16px !default;
+
+:root {
+  --mdw-datatable__footer-controls-transform: scaleX(1);
+
+  &[dir="rtl"] {
+    --mdw-datatable__footer-controls-transform: scaleX(-1);
+  }
+}
+
+.mdw-datatable {
+  display: flex;
+  flex-direction: column;
+}
+
+.mdw-datatable table {
+  display: table;
+
+  border-collapse: collapse;
+
+  inline-size: 100%;
+}
+
+.mdw-datatable caption,
+.mdw-datatable__header {
+  @include type.addRules('h6');
+  min-block-size: 64px;
+}
+
+.mdw-datatable caption {
+  caption-side: top;
+
+  padding: 0 16px;
+
+  line-height: 64px;
+  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-inline: 16px 0;
+}
+
+.mdw-datatable tr {
+  block-size: 48px;
+  border-block-end-style: solid;
+  border-block-end-width: 1px;
+
+  outline: none;
+}
+
+.mdw-datatable thead > tr {
+  block-size: 48px;
+}
+
+.mdw-datatable td {
+  @include type.addRules('body-2');
+  // text-align: left;
+  // Expected line-height is 20dp. Support two lines within 48dp
+  padding-block: 4px 3px; // Remove 1px bottom border width
+
+  outline: none;
+
+}
+
+.mdw-datatable th {
+  @include type.addRules('caption');
+  white-space: nowrap;
+}
+
+.mdw-datatable th,
+.mdw-datatable td {
+  padding-inline: 16px;
+
+  text-align: center;
+
+  &[mdw-checkbox] {
+    line-height: 0;
+  }
+
+  &[mdw-text] {
+    text-align: start;
+  }
+
+  &[mdw-number] {
+    text-align: end;
+  }
+
+  &[mdw-primary-column] {
+    inline-size: 100%;
+    border-width: 1px;
+    border-inline-end-style: solid;
+  }
+}
+
+.mdw-datatable th[mdw-selector] {
+  inline-size: 24px;
+  padding-inline: 16px 0;
+
+  & + td,
+  & + th {
+    padding-inline: 12px 16px;
+  }
+}
+
+.mdw-datatable__sort-icon {
+  display: inline-block;
+  vertical-align: text-bottom;
+
+  max-inline-size: 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-block-size: 56px;
+  flex: none;
+}
+
+.mdw-datatable__footer-options,
+.mdw-datatable__footer-details {
+  margin-inline: 2px 28px;
+}
+
+.mdw-datatable__header-controls,
+.mdw-datatable__footer-controls {
+  display: inline-flex;
+
+  margin-inline: 4px;
+
+  .mdw-button {
+    margin: 0 4px;
+  }
+}
+
+.mdw-datatable__footer-controls {
+  .mdw-button {
+    transform: var(--mdw-datatable__footer-controls-transform);
+  }
+}
+
+.mdw-datatable__footer-options {
+  display: flex;
+  align-items: center;
+
+  select.mdw-textfield__input {
+    min-inline-size: 64px; // 40 + 24;
+
+    text-align: end;
+  }
+}

package/components/datatable/_theme.scss

@@ -0,0 +1,128 @@
+.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);
+}
+
+.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;
+
+  // Inherit color on light theme.
+  --mdw-datatable__header-fill-text: invalid;
+}
+
+.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);
+}
+
+.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));
+}
+
+.mdw-datatable th:not([mdw-selector]),
+.mdw-datatable__footer {
+  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__secondary-text-opacity));
+}
+
+.mdw-datatable caption,
+.mdw-datatable__header-text {
+  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__text-opacity));
+}
+
+.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[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));
+  }
+
+  caption,
+  .mdw-datatable__header-text {
+    // 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)));
+
+  &[aria-selected="true"] {
+    --mdw-datatable__row-background-color: var(--mdw-ink);
+  }
+
+  &:not([aria-selected="true"]) {
+    --mdw-datatable__selected-opacity: 0;
+  }
+
+  &:not(:hover) {
+    --mdw-datatable__row-hover-opacity: 0;
+  }
+
+  &:not(:focus) {
+    --mdw-datatable__row-focus-opacity: 0;
+  }
+
+  &[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)));
+
+  &:not(:hover) {
+    --mdw-datatable__cell-hover-opacity: 0;
+  }
+
+  &:not(:focus) {
+    --mdw-datatable__cell-focus-opacity: 0;
+  }
+
+  &[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

@@ -0,0 +1,44 @@
+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) {
+  const gridCellElement = /** @type {HTMLElement} */ (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,46 @@
+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) {
+  const columnHeaderElement = /** @type {HTMLElement} */ (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);
+}