@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/datatable/index.js

@@ -1,374 +0,0 @@
-// https://www.w3.org/TR/wai-aria-practices/#grid
-
-import * as Keyboard from '../../core/aria/keyboard.js';
-import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
-
-import * as DataTableCell from './cell.js';
-import * as DataTableColumnHeader from './columnheader.js';
-import * as DataTableRow from './row.js';
-import * as DataTableRowHeader from './rowheader.js';
-
-export const CELL_TABINDEX_QUERIES = [
-  'td:not([mdw-autofocus-widget])',
-  'th:not([mdw-autofocus-widget])',
-  'td[mdw-autofocus-widget] .mdw-datatable__widget',
-  'th[mdw-autofocus-widget] .mdw-datatable__widget',
-];
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-export function onSelectedChange(event) {
-  const selected = event.detail.value === 'true';
-  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', '');
-  } else {
-    dataTableElement.removeAttribute('mdw-has-selection');
-  }
-}
-
-/**
- * @param {Element} datatableElement
- * @return {HTMLElement}
- */
-export function getScroller(datatableElement) {
-  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) {
-      footer.before(scroller);
-    } else {
-      datatableElement.appendChild(scroller);
-    }
-    // Move table into scroller if it exists
-    const table = datatableElement.getElementsByTagName('table')[0];
-    if (table) {
-      table.remove();
-      scroller.appendChild(table);
-    }
-  }
-  return scroller;
-}
-
-/**
- * @param {Element} datatableElement
- * @return {HTMLTableElement}
- */
-export function getTable(datatableElement) {
-  if (datatableElement instanceof HTMLTableElement) {
-    return datatableElement;
-  }
-  let table = datatableElement.getElementsByTagName('table')[0];
-  if (!table) {
-    const scroller = getScroller(datatableElement);
-    table = document.createElement('table');
-    scroller.appendChild(table);
-  }
-  return table;
-}
-
-/**
- * @param {Element} datatableElement
- * @return {HTMLTableSectionElement}
- */
-export function getTableBody(datatableElement) {
-  let tbody = datatableElement.getElementsByTagName('tbody')[0];
-  if (!tbody) {
-    const table = getTable(datatableElement);
-    tbody = document.createElement('tbody');
-    table.appendChild(tbody);
-  }
-  return tbody;
-}
-
-/**
- * @param {Element} datatableElement
- * @param {number} columnIndex
- * @param {boolean} ascending
- * @return {void}
- */
-export function sortColumn(datatableElement, columnIndex, ascending = true) {
-  if (datatableElement.hasAttribute('mdw-datatable-adapter')) {
-    return;
-  }
-  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 = [];
-  let i = tbody.rows.length;
-  while (i--) {
-    rows.push(tbody.rows.item(i));
-    tbody.deleteRow(i);
-  }
-  rows.sort((a, b) => {
-    const aCell = a.cells.item(columnIndex);
-    const bCell = b.cells.item(columnIndex);
-    const aText = aCell.textContent;
-    const bText = bCell.textContent;
-    if (aCell.dataset.type === 'number') {
-      return Number.parseFloat(bText) - Number.parseFloat(aText);
-    }
-    return bText.localeCompare(aText);
-  });
-  if (ascending) {
-    rows.reverse();
-  }
-  const fragment = document.createDocumentFragment();
-  for (const row of rows) {
-    fragment.appendChild(row);
-  }
-  tbody.appendChild(fragment);
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-export function onItemFocus(event) {
-  const datatableElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const onFocusInteraction = datatableElement.getAttribute('mdw-on-focus');
-  if (!onFocusInteraction) {
-    return;
-  }
-  const itemElement = /** @type {HTMLElement} */ (event.target);
-  if (itemElement.getAttribute('aria-disabled') === 'true') {
-    return;
-  }
-  for (const interaction of onFocusInteraction.split(' ')) {
-    switch (interaction) {
-      case 'select':
-        if (itemElement instanceof HTMLTableRowElement) {
-          DataTableRow.setSelected(itemElement, true);
-        } else {
-          DataTableCell.setSelected(itemElement, true);
-        }
-        break;
-      default:
-    }
-  }
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-export function onSort(event) {
-  const datatableElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const cell = /** @type {HTMLTableHeaderCellElement} */ (event.target);
-  sortColumn(datatableElement, cell.cellIndex, event.detail.sort === 'ascending');
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-export function onRowHeaderCheckedChange(event) {
-  const cell = /** @type {HTMLTableHeaderCellElement} */ (event.target);
-  const row = cell.parentElement;
-  DataTableRow.setSelected(row, event.detail.value);
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onTabIndexZeroed(event) {
-  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);
-  if (!row && !cell) {
-    return;
-  }
-  event.stopPropagation();
-  RovingTabIndex.removeTabIndex(dataTableElement.querySelectorAll(row ? 'tr' : CELL_TABINDEX_QUERIES.join(',')), [emitter]);
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-export function onKeyboard(event) {
-  const dataTableElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const emitter = /** @type {HTMLElement} */ (event.target);
-  let current = document.activeElement;
-
-  let row = (emitter instanceof HTMLTableRowElement && emitter);
-  const cell = (!row && emitter instanceof HTMLTableCellElement && emitter);
-  if (!row && !cell) {
-    return;
-  }
-  if (!row) {
-    row = /** @type {HTMLTableRowElement} */ (cell.parentElement);
-  }
-
-  let checkNavKeys = false;
-  switch (event.type) {
-    case Keyboard.SPACEBAR_KEY:
-      if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
-        return;
-      }
-      if (!event.detail.shiftKey) {
-        return;
-      }
-      if (!row.hasAttribute('aria-selected')) {
-        return;
-      }
-      DataTableRow.setSelected(row, row.getAttribute('aria-selected') !== 'true', true);
-      break;
-    default:
-      checkNavKeys = true;
-  }
-
-  if (checkNavKeys) {
-    // Keyboard Navigation
-    /** @type {Iterable<HTMLElement>} */
-    let searchElements;
-    let reverse = false;
-    let loop = false;
-    switch (event.type) {
-      case Keyboard.UP_ARROW_KEY:
-        reverse = true;
-        // Fallthrough
-      case Keyboard.DOWN_ARROW_KEY:
-        if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
-          return;
-        }
-        if (cell) {
-          searchElements = getTableBody(dataTableElement).querySelectorAll(
-            CELL_TABINDEX_QUERIES.map((q) => `${q}:nth-child(${cell.cellIndex + 1})`).join(','),
-          );
-        } else {
-          searchElements = getTableBody(dataTableElement).getElementsByTagName('tr');
-        }
-        break;
-      case Keyboard.BACK_ARROW_KEY:
-        reverse = true;
-        // Fallthrough
-      case Keyboard.FORWARD_ARROW_KEY:
-        if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
-          return;
-        }
-        if (!cell) {
-          return;
-        }
-        searchElements = cell.parentElement.querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
-        break;
-      case Keyboard.END_KEY:
-        reverse = true;
-        // Fallthrough
-      case Keyboard.HOME_KEY:
-        if (event.detail.altKey || event.detail.metaKey) {
-          return;
-        }
-        if (!cell) {
-          return;
-        }
-        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;
-        break;
-      default:
-        return;
-    }
-    RovingTabIndex.selectNext(searchElements, current, loop, reverse);
-  }
-
-  event.preventDefault();
-  event.stopPropagation();
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  element.removeAttribute('mdw-datatable-js');
-  element.removeEventListener(DataTableRow.FOCUS_EVENT, onItemFocus);
-  element.removeEventListener(DataTableCell.FOCUS_EVENT, onItemFocus);
-  element.removeEventListener(DataTableColumnHeader.SORT_EVENT, onSort);
-  element.removeEventListener(Keyboard.UP_ARROW_KEY, onKeyboard);
-  element.removeEventListener(Keyboard.DOWN_ARROW_KEY, onKeyboard);
-  element.removeEventListener(Keyboard.FORWARD_ARROW_KEY, onKeyboard);
-  element.removeEventListener(Keyboard.BACK_ARROW_KEY, onKeyboard);
-  element.removeEventListener(Keyboard.HOME_KEY, onKeyboard);
-  element.removeEventListener(Keyboard.END_KEY, onKeyboard);
-  element.removeEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
-}
-
-/**
- * @param {Element} tableElement
- * @return {HTMLTableRowElement}
- */
-export function getHeaderRow(tableElement) {
-  let thead = tableElement.getElementsByTagName('thead')[0];
-  if (!thead) {
-    const table = getTable(tableElement);
-    thead = document.createElement('thead');
-    table.appendChild(thead);
-  }
-  let headerRow = thead.getElementsByTagName('tr')[0];
-  if (!headerRow) {
-    headerRow = document.createElement('tr');
-    thead.appendChild(headerRow);
-  }
-  return headerRow;
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.setAttribute('mdw-datatable-js', '');
-
-  const table = getTable(element);
-  table.setAttribute('role', 'grid');
-  const headerRow = getHeaderRow(element);
-  const tbody = getTableBody(element);
-
-  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');
-  for (const el of tableRows) DataTableRow.attach(el);
-
-  const rowFocusable = element.hasAttribute('mdw-row-focusable');
-  if (rowFocusable) {
-    RovingTabIndex.setupTabIndexes(tableRows);
-  }
-  const cellFocusable = element.hasAttribute('mdw-cell-focusable');
-  if (cellFocusable) {
-    RovingTabIndex.setupTabIndexes(tbody.querySelectorAll(CELL_TABINDEX_QUERIES.join(',')));
-  }
-
-  element.addEventListener(DataTableRow.FOCUS_EVENT, onItemFocus);
-  element.addEventListener(DataTableRow.SELECTED_CHANGE_EVENT, onSelectedChange);
-  element.addEventListener(DataTableCell.FOCUS_EVENT, onItemFocus);
-  element.addEventListener(DataTableCell.SELECTED_CHANGE_EVENT, onSelectedChange);
-  element.addEventListener(DataTableColumnHeader.SORT_EVENT, onSort);
-  element.addEventListener(Keyboard.SPACEBAR_KEY, onKeyboard);
-  element.addEventListener(Keyboard.UP_ARROW_KEY, onKeyboard);
-  element.addEventListener(Keyboard.DOWN_ARROW_KEY, onKeyboard);
-  element.addEventListener(Keyboard.FORWARD_ARROW_KEY, onKeyboard);
-  element.addEventListener(Keyboard.BACK_ARROW_KEY, onKeyboard);
-  element.addEventListener(Keyboard.HOME_KEY, onKeyboard);
-  element.addEventListener(Keyboard.END_KEY, onKeyboard);
-  element.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
-}

package/components/datatable/index.scss

@@ -1,2 +0,0 @@
-@forward './_spec.scss';
-@forward './_theme.scss';

package/components/datatable/row.js

@@ -1,48 +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 DataTableCell from './cell.js';
-
-export const FOCUS_EVENT = 'mdw:datatablerow-focus';
-export const SELECTED_CHANGE_EVENT = 'mdw:datatablerow-selectedchange';
-
-/**
- * @param {FocusEvent} event
- * @return {void}
- */
-export function onFocus(event) {
-  const rowElement = /** @type {HTMLTableRowElement} */ (event.currentTarget);
-  dispatchDomEvent(rowElement, 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 {HTMLTableRowElement} element
- * @return {void}
- */
-export function attach(element) {
-  Keyboard.attach(element);
-  element.setAttribute('role', 'row');
-  element.addEventListener('focus', onFocus);
-  for (const el of element.cells) DataTableCell.attach(el);
-}
-
-/**
- * @param {HTMLTableRowElement} element
- * @return {void}
- */
-export function detach(element) {
-  element.removeEventListener('focus', onFocus);
-  Keyboard.detach(element);
-  for (const el of element.cells) DataTableCell.detach(el);
-}

package/components/datatable/rowheader.js

@@ -1,18 +0,0 @@
-import * as Keyboard from '../../core/aria/keyboard.js';
-
-/**
- * @param {HTMLTableHeaderCellElement} element
- * @return {void}
- */
-export function attach(element) {
-  Keyboard.attach(element);
-  element.setAttribute('role', 'rowheader');
-}
-
-/**
- * @param {HTMLTableHeaderCellElement} element
- * @return {void}
- */
-export function detach(element) {
-  Keyboard.detach(element);
-}

package/components/dialog/_spec.scss

@@ -1,203 +0,0 @@
-// https://material.io/guidelines/components/dialogs.html
-// https://material.io/guidelines/motion/choreography.html#choreography-creation
-
-@use '../../core/_elevation.scss' as elevation;
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_type.scss' as type;
-
-$unitWidth: 56px !default;
-
-.mdw-dialog__close {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  // Scroll mask
-  overflow-y: scroll;
-  overscroll-behavior: none;
-  overscroll-behavior: contain;
-  scrollbar-width: none;
-
-  block-size: 100%;
-  inline-size: 100%;
-
-  cursor: default;
-
-  pointer-events: inherit;
-  -webkit-tap-highlight-color: transparent;
-
-  visibility: hidden;
-  z-index: 8;
-
-  // Hide scrollbar
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &::after {
-    content: '';
-
-    display: block;
-
-    block-size: 200%;
-    inline-size: 200%;
-  }
-}
-
-.mdw-dialog {
-  display: flex;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-
-  box-sizing: border-box;
-  block-size: 100%;
-  inline-size: 100%;
-  padding: 84px 40px;
-
-  pointer-events: none;
-
-  transition-duration: motion.$fadeOutDuration;
-  transition-property: opacity;
-  transition-timing-function: motion.$accelerateEasing;
-  will-change: opacity;
-
-  opacity: 0;
-
-  z-index: 24;
-
-  /* Handled by theme */
-  // background-color: rgba(0, 0, 0, 0.50);
-
-  &:not([aria-hidden]) {
-    // Initial state
-    transition: none;
-  }
-
-  @for $i from 3 to 8 {
-    &[mdw-width-units="#{$i}"] {
-      .mdw-dialog__popup {
-        min-inline-size: #{$unitWidth * $i};
-      }
-    }
-  }
-}
-
-.mdw-dialog__popup {
-  display: none;
-  position: relative;
-  flex-direction: column;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-
-  overscroll-behavior: none;
-  overscroll-behavior: contain;
-
-  max-block-size: 100%;
-  min-inline-size: 224px;
-  max-inline-size: 100%;
-  flex-shrink: 1;
-
-  will-change: display, transform;
-
-  transform: scale(1);
-  transform-origin: bottom center;
-  z-index: 24;
-
-  border-radius: 4px;
-  box-shadow: elevation.boxShadow(24);
-}
-
-.mdw-dialog[aria-hidden="false"],
-.mdw-dialog[id]:target {
-  pointer-events: auto;
-
-  transition-duration: motion.$fadeInDuration;
-  transition-property: opacity;
-  transition-timing-function: motion.$decelerateEasing;
-
-  opacity: 1;
-
-  .mdw-dialog__close {
-    visibility: visible;
-  }
-
-  .mdw-dialog__popup {
-    animation-name: scaleUpAnimation;
-    animation-duration: motion.$fadeInDuration;
-    animation-direction: forwards;
-  }
-
-  &:not([mdw-dialog-js]) .mdw-dialog__popup {
-    display: flex;
-  }
-}
-
-@keyframes scaleUpAnimation {
-  from {
-    transform: scale(0);
-  }
-
-  to {
-    transform: scale(1);
-  }
-}
-
-.mdw-dialog__title {
-  @include type.textTopToTop(20);
-  @include type.addRules('h6');
-  @include type.baselineToBottom(36);
-
-  margin-block-end: -36px;
-  padding: 0 24px;
-}
-
-.mdw-dialog__body {
-  @include type.textTopToTop(20);
-  @include type.addRules('body');
-  @include type.baselineToBottom(28);
-
-  padding: 0 24px;
-}
-
-.mdw-dialog__header {
-  min-block-size: 64px;
-}
-
-.mdw-dialog__scrolling {
-  overflow-y: auto;
-}
-
-.mdw-dialog__button-area {
-  display: flex;
-  flex-direction: row-reverse;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  flex: none;
-  margin-block: 8px;
-
-  .mdw-button {
-    margin-inline: 0 8px;
-
-    text-align: end;
-  }
-
-  &[mdw-stacked] {
-    margin-block-start: 0;
-
-    .mdw-button {
-      justify-content: flex-end;
-
-      min-block-size: 48px;
-      flex-basis: 100%;
-      margin-inline: 0;
-      padding-inline: 16px;
-
-    }
-  }
-}

package/components/dialog/_theme.scss

@@ -1,7 +0,0 @@
-.mdw-theme {
-  --mdw-dialog__scrim-color: RGBA(var(--mdw-alias-background-900), 0.60);
-}
-
-.mdw-dialog {
-  background-color: var(--mdw-dialog__scrim-color);
-}