@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+v0.5.0
+------
+
+* Drop IE11
+* Drop Opera Mini
+* Rewrite JS Syntax targetting >1% browsers
+* Prefer modern DOM APIs
+* Use CSS Logical properties and values
+
+* Search: (BREAKING) Use Promises instead of NodeJS-style callbacks
+* Elevation: Add Dark Theme opacity
+
+v0.4.0
+------
+
+* Use passive listener for DOMAdapter scrolling
+* Workaround Safari 12 negative vertical-align bug
+* Add `"aria-hidden"` attributes for `.mdw-layout__appbar` and `.mdw-layout__bottomnav`
+* Add `"aria-hidden"` attributes for `.mdw-menu__check` and `.mdw-menu__radio`
+* Create `.mdw-menu__item-group` CSS
+* Ignore case on user agent detection (`Document.onPrerender`)
+* Add `core/theme` helper functions
+
+* Deprecate IE11 support
+* Deprecate `.pug`
+
+* Refactor SCSS for proper `@use` support
+* Refactor SCSS with `math.div`
+* Add `.eta` templates
+* Target ES2020 for `.js`
+* Proper ES Module support
+* Upgrade dev dependencies
+  * `webpack` from `4.x` to `5.x`
+  * `webpack-dev-server` from `3.x` to `4.x`
+  * `typescript` from `3.9.x` to `4.5.x`
+

package/README.md

@@ -1,6 +1,86 @@
 # materialdesignweb
 Material Design for Web
 
-Demo: https://clshortfuse.github.io/materialdesignweb/
+# Demo
 
-npm: `npm install @shortfuse/materialdesignweb`
+https://clshortfuse.github.io/materialdesignweb/
+
+# Getting started
+
+npm: `npm install @shortfuse/materialdesignweb`
+
+# Core modules
+
+| Module | CSS-Only Support | Description | status
+| :-------- | :-: | :- | :- |
+| [aria](core/aria/) | :x: | Handles ARIA attributes, ARIA roles, tabindexes, and keyboard interaction | preRC
+| [document](core/document/) | :white_check_mark: | Applies color-scheme, standalone-window, and user agents detection | RC
+| [overlay](core/overlay/) | :white_check_mark: | Applies overlay states to components | RC
+| [ripple](core/ripple/) | :white_check_mark: | Applies press ripple on interactions | preRC
+| [theme](core/theme/) | :white_check_mark: | Applies ink and surface colors based on light/dark context | preRC
+| [transition](core/transition/) | :x: | Transitions shape and content between elements | preRC
+
+# Component Modules
+
+| Component | Integrations | CSS-Only Support | Keyboard Support | ARIA Role | ARIA Attributes | Status
+| :-------- | :----------: | :--------------: | :--------------: | :------:  | :-------------: | :-----
+| [appbar](components/appbar/) | button | :white_check_mark: | N/A | :x: | :x: | beta
+| backdrop | | | | | | *planned*
+| [banner](components/banner/) | button | :white_check_mark: | N/A | :x: | :x: | beta
+| [bottomnav](components/bottomnav/) | bottomnavitem† overlay | :x: | :white_check_mark: | tablist | aria-multiselectable aria-orientation | RC
+| [bottomnavitem](components/bottomnav/item.js) | overlay ripple | :x: | :white_check_mark: | [tab](utils/aria/tab.js) | aria-selected | RC
+| [button](components/button/) | overlay ripple | :white_check_mark: | :white_check_mark: | [button](utils/aria/button.js) | aria-disabled‡ aria-pressed‡ | stable
+| [card](components/card/) | button divider | :white_check_mark: | N/A | :x: | :x: | preRC
+| [chip](components/chip/) | chipitem | :white_check_mark: | :x: | :x: | :x: | alpha
+| [chipitem](components/chip/item.js) | :x: | :x: | :x: | :x: | :x: | alpha
+| [datatable](components/datatable/) | button | :white_check_mark: | :white_check_mark: | grid | aria-selected | preRC
+| [dialog](components/dialog/) | button | :white_check_mark: | :white_check_mark: | dialog | aria-modal | preRC
+| [divider](components/divider/) |  | :white_check_mark:| | separator‡ | | preRC
+| [elevation](components/elevation/) | | :white_check_mark: | | | | RC
+| [fab](components/fab/) | button†  | :white_check_mark:| :x: |:x: | :x: | beta
+| [grid](components/grid/) |  | :white_check_mark:| | :x: | :x: | preRC
+| imagelist | | | | | | *use grid*
+| [layout](components/layout/) | | :white_check_mark: | :x: |:x: | :x: | beta
+| [list](components/list/) | listitem† listexpander | :white_check_mark: | :white_check_mark: | group list listbox radiogroup tree | aria-orientation | preRC
+| [listcontent](components/list/content.js) | overlay ripple | :white_check_mark: | :white_check_mark: | listitem link option radio treeitem | aria-checked aria-selected | preRC
+| [listitem](components/list/item.js) | | :white_check_mark: | :white_check_mark: | treeitem none | aria-expanded aria-hidden | preRC
+| [listsecondary](components/list/secondary.js) |  | :white_check_mark: | :white_check_mark: | none‡ | | preRC
+| [menu](components/menu/) | divider menuitem† | :white_check_mark: | :white_check_mark: | menu | aria-hidden | preRC
+| [menuitem](components/menu/item.js) | overlay ripple | :white_check_mark: | :white_check_mark:| menuitem menuitemradio menuitemcheckbox | aria-disabled aria-checked | stable
+| navdrawer | | | | | | *use layout*
+| [progress](components/progress/) |  | :white_check_mark:| | :x: | :x: | beta
+| [selection](components/selection/) | | :white_check_mark: | :white_check_mark: | checkbox‡ radio‡ | aria-checked aria-disabled | preRC
+| sidesheet | | | | | | *use layout*
+| [slider](components/slider/) | | :white_check_mark: | :x: | :x: | :x: | alpha
+| [snackbar](components/snackbar/) | button | :white_check_mark: | :white_check_mark: | alert | aria-hidden | RC
+| [tab](components/tab/) | tablist tabcontent | :x: |  |  | | RC
+| [tabcontent](components/tab/content.js) | tabpanel† | :x: | :white_check_mark: | | | RC
+| [tabitem](components/tab/item.js) | overlay ripple | :x: | :white_check_mark: | [tab](utils/aria/tab.js) | aria-selected | RC
+| [tablist](components/tab/list.js) | tabitem† overlay | :x: | :white_check_mark: | tablist | aria-multiselectable aria-orientation | RC
+| [tabpanel](components/tab/panel.js) | | :x: | :white_check_mark: | tabpanel | aria-expanded aria-hidden | RC
+| [textfield](components/textfield/) | list | :white_check_mark: | :white_check_mark: | :x: | :x: | preRC
+| [tooltip](components/tooltip/) | | :white_check_mark: | | :x: | :x: | beta
+| [type](components/type/) | | :white_check_mark: | | | | RC
+
+# Adapter classes
+| Adapter | Components | Status
+| :-------- | :-- | :-
+| [datatable](adapters/datatable/) | button datatable† | preRC
+| [dom](adapters/dom/) | | preRC
+| [list](adapters/list/) | domadapter† listitem† | preRC
+| [search](adapters/search/) | list† textfield† | preRC
+
+## Legend
+
+* planned - Planned for later
+* draft - Not yet functional
+* alpha - Partially working
+* beta - Working but incomplete
+* preRC - Needs minor changes
+* RC - Needs testing as-is
+* stable - Production-ready
+
+
+* † - Required
+
+* ‡ - Apply manually

package/adapters/datatable/column.js

@@ -0,0 +1,176 @@
+import * as DataTableColumnHeader from '../../components/datatable/columnheader.js';
+import * as Selection from '../../components/selection/index.js';
+import * as Attributes from '../../core/aria/attributes.js';
+import { setTextNode } from '../../core/dom.js';
+
+/**
+ * @template {Record<string, any>} T
+ * @template {(keyof T & string)|string} K
+ * @template {any} [R=any]
+ * @callback DataTableAdapterColumnFormatter<T,K,R>
+ * @param {K extends keyof T ? T[K] : undefined} value
+ * @param {T} [object]
+ * @return {R}
+ */
+
+/**
+ * @template {Record<string, any>} T
+ * @callback DataTableAdapterColumnSorter<T>
+ * @param {T} a
+ * @param {T} b
+ * @return {number}
+ */
+
+/**
+ * @template {Record<string, any>} T
+ * @template {any} V
+ * @callback DataTableAdapterColumnRenderer<T,V>
+ * @param {HTMLTableCellElement} cell
+ * @param {V} value
+ * @param {T} data
+ * @return {void}
+ */
+
+/**
+ * Constructor options for DataTableAdapterColumn
+ * @template {Record<string, any>} T
+ * @template {(keyof T & string)|string} K
+ * @template {any} [R=any]
+ * @typedef DataTableAdapterColumnOptions<T,K>
+ * @prop {K} key
+ * @prop {(string|DocumentFragment)} [name='']
+ * @prop {'number'|'text'|'checkbox'} [type]
+ * @prop {boolean} [rowSelector]
+ * @prop {string} [tooltip]
+ * @prop {boolean} [sortable]
+ * @prop {boolean} [primaryColumn]
+ * @prop {HTMLElement} [customSortIcon]
+ * @prop {string} [innerHTML]
+ * @prop {DocumentFragment} [fragment]
+ * @prop {(value:K extends keyof T ? T[K] : undefined, object:T) => R} [formatter]
+ * @prop {(cell: HTMLTableCellElement, value: R, data: T) => any} [renderer]
+ * @prop {DataTableAdapterColumnSorter<T>} [sorter]
+ */
+
+/** @return {HTMLElement} */
+function constructTableCheckbox() {
+  const element = document.createElement('div');
+  element.className = 'mdw-selection';
+  element.setAttribute('aria-checked', 'false');
+  const input = element.appendChild(document.createElement('div'));
+  input.className = 'mdw-selection__input mdw-datatable__widget';
+  const icon = element.appendChild(document.createElement('div'));
+  icon.className = 'mdw-selection__icon';
+  icon.setAttribute('mdw-checkbox', '');
+  Selection.attach(element);
+  return element;
+}
+
+/**
+ * @template {Record<string, any>} T
+ * @template {(keyof T & string)|string} K
+ */
+export default class DataTableAdapterColumn {
+  /** @param {DataTableAdapterColumnOptions<T,K>} options */
+  constructor(options) {
+    this.element = document.createElement('th');
+    if (options.innerHTML != null) {
+      this.element.innerHTML = options.innerHTML;
+    } else if (options.fragment) {
+      this.element.appendChild(options.fragment);
+    }
+    this.key = options.key;
+    this.element.dataset.key = options.key;
+
+    if (options.sortable) {
+      this.element.setAttribute('aria-sort', 'none');
+      let sortIcon = options.customSortIcon;
+      if (!sortIcon) {
+        sortIcon = document.createElement('span');
+        sortIcon.className = 'mdw-datatable__sort-icon material-icons';
+        sortIcon.textContent = 'arrow_downward';
+      }
+      this.element.prepend(sortIcon);
+    }
+    if (options.tooltip) {
+      const wrapper = document.createElement('span');
+      wrapper.className = 'mdw-tooltip__wrapper';
+      const target = wrapper.appendChild(document.createElement('span'));
+      target.className = 'mdw-tooltip__target';
+      target.append(options.name || '');
+      const tooltip = wrapper.appendChild(document.createElement('span'));
+      tooltip.className = 'mdw-tooltip mdw-theme';
+      tooltip.setAttribute('mdw-surface', 'background 700');
+      tooltip.setAttribute('mdw-dark', '');
+      tooltip.textContent = options.tooltip;
+      this.element.appendChild(wrapper);
+    } else if (options.name) {
+      this.element.append(options.name);
+    }
+
+    this.primaryColumn = options.primaryColumn;
+    if (options.primaryColumn) {
+      this.element.setAttribute('mdw-primary-column', '');
+    }
+
+    this.rowSelector = options.rowSelector;
+
+    if (this.rowSelector) {
+      this.element.setAttribute('mdw-selector', '');
+    }
+
+    this.type = options.type;
+    switch (options.type) {
+      case 'number':
+        this.element.setAttribute('mdw-number', '');
+        break;
+      case 'text':
+        this.element.setAttribute('mdw-text', '');
+        break;
+      // case 'checkbox':
+      default:
+    }
+
+    if (this.rowSelector && this.type === 'checkbox') {
+      const checkboxLabel = constructTableCheckbox();
+      this.element.appendChild(checkboxLabel);
+      this.element.classList.add('mdw-autofocus-widget');
+    }
+
+    if (options.renderer) {
+      this.renderer = options.renderer;
+    } else if (options.type === 'checkbox') {
+      this.renderer = DataTableAdapterColumn.defaultCheckboxRenderer;
+    } else {
+      this.renderer = DataTableAdapterColumn.defaultCellRenderer;
+    }
+    this.formatter = options.formatter || ((/** @type {any} */ value) => value);
+    this.sorter = options.sorter;
+    DataTableColumnHeader.attach(this.element);
+  }
+
+  /**
+   * @param {HTMLTableCellElement} cell
+   * @param {any} value
+   * @return {void}
+   */
+  static defaultCheckboxRenderer(cell, value) {
+    if (!cell.classList.contains('mdw-autofocus-widget')) {
+      cell.classList.add('mdw-autofocus-widget');
+    }
+    const checked = !!value;
+    const selectionElement = cell.getElementsByClassName('mdw-selection')[0]
+      || cell.appendChild(constructTableCheckbox());
+    Attributes.setChecked(selectionElement, checked);
+  }
+
+  /**
+   * @param {HTMLTableCellElement} cell
+   * @param {any} value
+   * @return {void}
+   */
+  static defaultCellRenderer(cell, value) {
+    const stringValue = (value == null) ? '' : value.toString();
+    setTextNode(cell, stringValue);
+  }
+}