@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/.eslintrc.json

@@ -1,47 +1,153 @@
 {
+  "env": {
+    "browser": true
+  },
+  "ignorePatterns": ["*.min.js"],
   "extends": [
-    "airbnb-base"
+    "airbnb-base",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jsdoc/recommended"
   ],
-  "globals": {
-    "google": true
-  },
-  "env": {
-    "browser": true,
-    "es6": true
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "impliedStrict": true
+    },
+    "ecmaVersion": 2020,
+    "sourceType": "module"
   },
+  "plugins": [
+    "jsdoc",
+    "@typescript-eslint",
+    "eta"
+  ],
+  "root": true,
   "rules": {
-    "no-use-before-define": ["error", { "functions": false }],
-    "brace-style": ["error", "1tbs", { "allowSingleLine": false }],
-    "curly": ["error", "all"],
-    "require-jsdoc": "error",
-    "valid-jsdoc": ["error", {
-      "prefer": { "arg": "param", "argument": "param", "returns": "return" },
-      "preferType": { "Boolean": "boolean", "Number": "number", "object": "Object", "String": "string" },
-      "requireReturn": true,
-      "requireReturnType": true,
-      "matchDescription": "",
-      "requireParamDescription": false,
-      "requireReturnDescription": false
-      
-    }],
-    "comma-dangle": ["error", {
-      "arrays": "always-multiline",
-      "objects": "always-multiline",
-      "imports": "always-multiline",
-      "exports": "always-multiline",
-      "functions": "never"
+    "@typescript-eslint/ban-ts-comment": ["warn", {
+      "ts-ignore": "allow-with-description"
+    }],
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "import/extensions": ["error", "always", {
+      "js": "always",
+      "mjs": "never"
+    }],
+    "import/no-useless-path-segments": ["error", {
+      "noUselessIndex": false
+    }],
+    "import/order": ["error", {
+      "alphabetize": {
+        "caseInsensitive": false,
+        "order": "asc"
+      },
+      "groups": [
+        "builtin",
+        "external",
+        "parent",
+        "sibling",
+        "index"
+      ],
+      "newlines-between": "always",
+      "pathGroups": [{
+        "group": "external",
+        "pattern": "@dataprocs/**",
+        "position": "after"
+      }],
+      "pathGroupsExcludedImportTypes": ["builtin"]
+    }],
+    "import/prefer-default-export": 0,
+    "jsdoc/newline-after-description": [
+      "warn",
+      "never"
+    ],
+    "jsdoc/no-undefined-types": 0,
+    "jsdoc/require-param-description": 0,
+    "jsdoc/require-property-description": 0,
+    "jsdoc/require-returns": ["warn", {
+      "forceRequireReturn": true,
+      "forceReturnsWithAsync": true
+    }],
+    "jsdoc/require-returns-description": 0,
+    "jsdoc/valid-types": 0,
+    "max-len": ["error", 120, 2, {
+      "ignoreComments": true,
+      "ignoreRegExpLiterals": true,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true,
+      "ignoreUrls": true
+    }],
+    "no-console": ["error", {
+      "allow": [
+        "warn",
+        "error",
+        "time",
+        "timeEnd"
+      ]
+    }],
+    "no-plusplus": ["off"],
+    "node/no-unsupported-features/es-syntax": ["off", {
+      "ignores": [],
+      "version": ">=14.0.0"
     }],
     "prefer-destructuring": ["error", {
-      "VariableDeclarator": {
+      "AssignmentExpression": {
         "array": false,
         "object": true
       },
-      "AssignmentExpression": {
+      "VariableDeclarator": {
         "array": false,
         "object": true
       }
     }, {
       "enforceForRenamedProperties": false
+    }],
+    "sort-imports": ["error", {
+      "ignoreDeclarationSort": true
+    }],
+    "spaced-comment": ["error", "always", {
+      "block": {
+        "balanced": true,
+        "exceptions": ["-", "+"],
+        "markers": ["=", "!", ":", "::"]
+      },
+      "line": {
+        "exceptions": ["-", "+"],
+        "markers": ["=", "!", "/"]
+      }
     }]
-  }
+  },
+  "settings": {
+    "jsdoc": {
+      "preferredTypes": {
+        "array": "Array",
+        "object": "Object",
+        "object.": "Object<>",
+        "object<>": "Object<>",
+        "symbol": "Symbol"
+      },
+      "tagNamePreference": {
+        "augment": "extends",
+        "constant": "const",
+        "property": "prop",
+        "returns": "return"
+      }
+    },
+    "html/html-extensions": [
+      ".html",
+      ".eta"
+    ]
+  },
+  "overrides": [
+    {
+      "files": [ "*.cjs"],
+      "rules": {
+        "import/no-nodejs-modules": 0,
+        "@typescript-eslint/no-var-requires": 0
+      }
+    },
+    {
+      "files": ["**/*.eta"],
+      "processor": "eta/eta"
+    }
+  ]
+  
 }

package/.stylelintrc.json

@@ -21,8 +21,8 @@
     "font-family-no-missing-generic-family-keyword": null,
     "color-hex-length": null,
     "color-hex-case": null,
-    "selector-nested-pattern": "^(\\s+|((:root|&|[a-z0-9A-Z._-])(\\[[^\\]]*\\])*([^\\s>~+])*)|&::?|[&+~>])*$",
-    "no-empty-source": true,
+    "selector-nested-pattern": "^(\\s+|((:root|&|[a-z0-9A-Z._-])(:not\\([^\\)]*\\))*(\\[[^\\]]*\\])*([^\\s>~+])*)|&::?|[&+~>])*$",
+    "no-empty-source": null,
     "block-no-empty": true,
     "no-extra-semicolons": true,
     "selector-max-universal": 0,
@@ -48,47 +48,13 @@
     "unit-blacklist": "px",
     "selector-class-pattern": "^mdw-[a-z]+(__[a-z-]+)?$",
     "scss/at-import-no-partial-leading-underscore": null,
-    "scss/at-function-pattern": "^(__)?mdw((\\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?$",
-    "scss/at-mixin-pattern": "^(__)?mdw-[a-z]+__[a-z0-9-]+(__[a-z0-9-]+)?$",
+    "scss/at-function-pattern": "^[a-z][a-zA-Z0-9]*$",
+    "scss/at-mixin-pattern": "^[a-z][a-zA-Z0-9]*$",
     "scss/dollar-variable-default": [true, {
       "ignore": "local"
     }],
-    "scss/dollar-variable-pattern": ["^mdw-[a-z]+__[a-z0-9-]+(__[a-z0-9-]+)?$", {
-      "ignore": "local"
-    }],
-    "order/order": [
-      [
-        "dollar-variables",
-        "custom-properties",
-        {
-          "type": "at-rule",
-          "name": "extend"
-        },
-        {
-          "type": "at-rule",
-          "name": "include",
-          "hasBlock": false
-        },
-        "declarations",
-        {
-          "type": "rule",
-          "selector": "^&$"
-        },
-        {
-          "type": "rule",
-          "selector": "^.+ &$"
-        },
-        {
-          "type": "rule",
-          "selector": "^&(:[^:]|\\[|-)[\\s]+$"
-        },
-        {
-          "type": "rule",
-          "selector": "^&::.+"
-        },
-        "rules"
-      ]
-    ],
+    "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]*$",
+    "order/order": null,
     "order/properties-alphabetical-order": null,
     "order/properties-order": [{
         "groupName": "layout",

package/.vscode/launch.json

@@ -1,16 +1,31 @@
 {
   "version": "0.2.0",
-  "configurations": [
-    {
+  "configurations": [{
       "name": "Chrome Docs Debug",
       "type": "chrome",
       "request": "launch",
       "preLaunchTask": "npm: start:docs",
       "url": "http://localhost:8080/",
-      "webRoot": "${workspaceFolder}/test",
+      "webRoot": "${workspaceFolder}/docs",
+      "sourceMapPathOverrides": {
+        "webpack:///*": "${webRoot}/*",
+      }
+    },
+    {
+      "name": "Chrome Docs Debug (WSL)",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start:docs",
+      "url": "http://localhost:8080/",
+      "runtimeExecutable": "/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+      "runtimeArgs": [
+        "--remote-debugging-port=9222",
+        "--user-data-dir=remote-profile"
+      ],
+      "webRoot": "${workspaceFolder}/docs",
       "sourceMapPathOverrides": {
-        "webpack:///./*":"${workspaceRoot}/*",
+        "webpack:///*": "${webRoot}/*",
       }
-  },
+    },
   ]
 }

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+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,3 +1,5 @@
+*Notice: This project is currently being maintained in an private fork. Changes will be pushed at a later date.*
+
 # materialdesignweb
 Material Design for Web
 
@@ -13,6 +15,8 @@ npm: `npm install @shortfuse/materialdesignweb`
 
 | 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
@@ -39,16 +43,15 @@ npm: `npm install @shortfuse/materialdesignweb`
 | [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: | list listbox tree | aria-orientation | preRC
-| [listcontent](components/list/content.js) | overlay ripple | :white_check_mark: | :white_check_mark: | listitem link option treeitem | | preRC
-| [listexpander](components/list/expander.js) | overlay ripple | | :white_check_mark: | treeitem | aria-expanded | beta
-| [listitem](components/list/item.js) | | :white_check_mark: | :white_check_mark: | none | aria-hidden | preRC
-| [listitemgroup](components/list/group.js) | | :white_check_mark: | :white_check_mark: | group | | preRC
+| [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: | | checkbox‡ radio‡ | :x: | preRC
+| [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
@@ -66,14 +69,14 @@ npm: `npm install @shortfuse/materialdesignweb`
 | :-------- | :-- | :-
 | [datatable](adapters/datatable/) | button datatable† | preRC
 | [dom](adapters/dom/) | | preRC
-| [list](adapters/list/) | listitem† | preRC
+| [list](adapters/list/) | domadapter† listitem† | preRC
 | [search](adapters/search/) | list† textfield† | preRC
 
 ## Legend
 
 * planned - Planned for later
 * draft - Not yet functional
-* alpha - Parially working
+* alpha - Partially working
 * beta - Working but incomplete
 * preRC - Needs minor changes
 * RC - Needs testing as-is
@@ -82,4 +85,4 @@ npm: `npm install @shortfuse/materialdesignweb`
 
 * † - Required
 
-* ‡ - Apply manually
+* ‡ - Apply manually

package/adapters/datatable/column.js

@@ -1,59 +1,77 @@
+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';
+
 /**
- * @callback DataTableAdapterColumnFormatter<T>
- * @param {any} value
+ * @template {Record<string, any>} T
+ * @template {keyof T & string} K
+ * @callback DataTableAdapterColumnFormatter<T,K>
+ * @param {T[K]} value
  * @param {T} [object]
  * @return {any}
- * @template T
  */
 
 /**
- * @callback DataTableAdapterColumnRenderer<T>
- * @param {HTMLTableCellElement} cell,
- * @param {any} value
+ * @template {Record<string, any>} T
+ * @callback DataTableAdapterColumnSorter<T>
+ * @param {T} a
+ * @param {T} b
+ * @return {number}
+ */
+
+/**
+ * @template {Record<string, any>} T
+ * @template {keyof T & string} K
+ * @callback DataTableAdapterColumnRenderer<T,K>
+ * @param {HTMLTableCellElement} cell
+ * @param {T[K]} value
  * @param {T} data
  * @return {void}
- * @template T
  */
 
 /**
  * Constructor options for DataTableAdapterColumn
- * @typedef DataTableAdapterColumnOptions<T>
- * @property {string} key
- * @property {(string|DocumentFragment)} [name='']
- * @property {'checkbox'|string} [type]
- * @property {boolean} [rowSelector]
- * @property {string} [tooltip]
- * @property {boolean} [sortable]
- * @property {boolean} [primaryColumn]
- * @property {HTMLElement} [customSortIcon]
- * @property {string} [innerHTML]
- * @property {DocumentFragment} [fragment]
- * @property {DataTableAdapterColumnRenderer<T>} [renderer]
- * @property {DataTableAdapterColumnFormatter<T>} [formatter]
- * @template T
+ * @template {Record<string, any>} T
+ * @template {keyof T & string} K
+ * @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 {DataTableAdapterColumnRenderer<T,K>} [renderer]
+ * @prop {DataTableAdapterColumnFormatter<T,K>} [formatter]
+ * @prop {DataTableAdapterColumnSorter<T>} [sorter]
  */
 
-
-/** @return {HTMLLabelElement} */
+/** @return {HTMLElement} */
 function constructTableCheckbox() {
-  const checkboxLabel = document.createElement('label');
-  checkboxLabel.className = 'mdw-selection';
-  const input = document.createElement('input');
-  input.className = 'mdw-selection__input';
-  input.setAttribute('type', 'checkbox');
+  const element = document.createElement('div');
+  element.className = 'mdw-selection';
+  element.setAttribute('aria-checked', 'false');
+  const input = document.createElement('div');
+  input.className = 'mdw-selection__input mdw-datatable__widget';
   const icon = document.createElement('div');
   icon.className = 'mdw-selection__icon';
-  checkboxLabel.appendChild(input);
-  checkboxLabel.appendChild(icon);
-  return checkboxLabel;
+  icon.setAttribute('mdw-checkbox', '');
+  element.appendChild(input);
+  element.appendChild(icon);
+  Selection.attach(element);
+  return element;
 }
 
-
 /**
- * @template T
+ * @template {Record<string, any>} T
+ * @template {keyof T & string} K
  */
 export default class DataTableAdapterColumn {
-  /** @param {DataTableAdapterColumnOptions<T>} options */
+  /** @param {DataTableAdapterColumnOptions<T,K>} options */
   constructor(options) {
     this.element = document.createElement('th');
     if (options.innerHTML != null) {
@@ -65,10 +83,10 @@ export default class DataTableAdapterColumn {
     this.element.dataset.key = options.key;
 
     if (options.sortable) {
-      this.element.setAttribute('mdw-sortable', '');
+      this.element.setAttribute('aria-sort', 'none');
       let sortIcon = options.customSortIcon;
       if (!sortIcon) {
-        sortIcon = document.createElement('div');
+        sortIcon = document.createElement('span');
         sortIcon.classList.add('mdw-datatable__sort-icon');
         sortIcon.classList.add('material-icons');
         sortIcon.textContent = 'arrow_downward';
@@ -92,7 +110,9 @@ export default class DataTableAdapterColumn {
         target.appendChild(options.name);
       }
       const tooltip = document.createElement('div');
-      tooltip.classList.add('mdw-tooltip');
+      tooltip.className = 'mdw-tooltip mdw-theme';
+      tooltip.setAttribute('mdw-surface', 'background 700');
+      tooltip.setAttribute('mdw-dark', '');
       tooltip.textContent = options.tooltip;
       wrapper.appendChild(target);
       wrapper.appendChild(tooltip);
@@ -117,13 +137,23 @@ export default class DataTableAdapterColumn {
     if (this.rowSelector) {
       this.element.setAttribute('mdw-selector', '');
     }
-    if (options.type) {
-      this.element.dataset.type = options.type;
-      this.type = options.type;
+
+    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) {
@@ -133,7 +163,9 @@ export default class DataTableAdapterColumn {
     } else {
       this.renderer = DataTableAdapterColumn.defaultCellRenderer;
     }
-    this.formatter = options.formatter || (value => value);
+    this.formatter = options.formatter || ((/** @type {any} */ value) => value);
+    this.sorter = options.sorter;
+    DataTableColumnHeader.attach(this.element);
   }
 
   /**
@@ -142,24 +174,16 @@ export default class DataTableAdapterColumn {
    * @return {void}
    */
   static defaultCheckboxRenderer(cell, value) {
-    let input = cell.getElementsByTagName('input')[0];
-    const checked = !!value;
-    if (!input) {
-      const checkboxLabel = document.createElement('label');
-      checkboxLabel.className = 'mdw-selection';
-      input = document.createElement('input');
-      input.className = 'mdw-selection__input';
-      input.setAttribute('type', 'checkbox');
-      input.checked = checked;
-      const icon = document.createElement('div');
-      icon.className = 'mdw-selection__icon';
-      checkboxLabel.appendChild(input);
-      checkboxLabel.appendChild(icon);
-      cell.appendChild(checkboxLabel);
+    if (!cell.classList.contains('mdw-autofocus-widget')) {
+      cell.classList.add('mdw-autofocus-widget');
     }
-    if (input.checked !== checked) {
-      input.checked = checked;
+    let selectionElement = cell.getElementsByClassName('mdw-selection')[0];
+    const checked = !!value;
+    if (!selectionElement) {
+      selectionElement = constructTableCheckbox();
+      cell.appendChild(selectionElement);
     }
+    Attributes.setChecked(selectionElement, checked);
   }
 
   /**
@@ -174,22 +198,6 @@ export default class DataTableAdapterColumn {
     } else {
       stringValue = value.toString();
     }
-    const len = cell.childNodes.length;
-    let foundTextNode = false;
-    for (let i = len - 1; i >= 0; i -= 1) {
-      const node = cell.childNodes.item(i);
-      if (!foundTextNode && node.nodeType === Node.TEXT_NODE) {
-        if (node.nodeValue !== stringValue) {
-          node.nodeValue = stringValue;
-        }
-        foundTextNode = true;
-      } else {
-        cell.removeChild(node);
-      }
-    }
-    if (!foundTextNode) {
-      const node = document.createTextNode(stringValue);
-      cell.appendChild(node);
-    }
+    setTextNode(cell, stringValue);
   }
 }