@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/.browserslistrc

@@ -1,3 +1,4 @@
 # Browsers that we support
 
-> 1%
+> 1%
+not op_mini all

package/.eslintrc.json

@@ -6,7 +6,10 @@
   "extends": [
     "airbnb-base",
     "plugin:@typescript-eslint/recommended",
-    "plugin:jsdoc/recommended"
+    "plugin:jsdoc/recommended",
+    "plugin:github/recommended",
+    "plugin:node/recommended",
+    "plugin:unicorn/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -14,19 +17,52 @@
       "impliedStrict": true
     },
     "ecmaVersion": 2020,
-    "sourceType": "module"
+    "sourceType": "module",
+    "project": "./tsconfig.json"
   },
   "plugins": [
-    "jsdoc",
     "@typescript-eslint",
+    "github",
+    "jsdoc",
+    "unicorn",
     "eta"
   ],
   "root": true,
   "rules": {
+    "object-curly-newline": ["error", {
+      "ObjectExpression": {  "multiline": true, "consistent": true },
+      "ObjectPattern": {  "multiline": true, "consistent": true },
+      "ImportDeclaration": {  "multiline": true, "consistent": true },
+      "ExportDeclaration": {  "multiline": true, "consistent": true }
+    }],
+    "no-param-reassign": ["error", { "props": false }],
+    "no-continue": 0,
+    "no-restricted-syntax": 0,
+    "require-await": 0,
+    "no-return-await": 0,
+    "eslint-comments/no-use": 0,
+    "filenames/match-regex": 0,
+    "prettier/prettier": 0,
+    "i18n-text/no-en": 0,
+    "import/no-namespace": 0,
+    "no-unused-vars": 0,
+    "import/namespace": 0,
+    "no-constructor-return": 0,
+    "default-case-last": 0,
+    "no-undef": 0,
+    "import/named": 0,
+    "no-empty": ["error", {"allowEmptyCatch": true}],
+    "no-promise-executor-return": 0,
+    "github/no-then": 0,
     "@typescript-eslint/ban-ts-comment": ["warn", {
       "ts-ignore": "allow-with-description"
     }],
     "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/require-await": "error",
+    "no-void": "off",
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/return-await": ["error", "always"],
+
     "import/extensions": ["error", "always", {
       "js": "always",
       "mjs": "never"
@@ -55,6 +91,23 @@
       "pathGroupsExcludedImportTypes": ["builtin"]
     }],
     "import/prefer-default-export": 0,
+    "unicorn/no-useless-undefined": 0,
+    "unicorn/no-array-for-each": 0,
+    "unicorn/prefer-spread": 0,
+    "unicorn/no-null": 0,
+    "unicorn/filename-case": 0,
+    "unicorn/prefer-dom-node-append": 0,
+    "unicorn/prevent-abbreviations": 0,
+    "unicorn/explicit-length-check": 0,
+    "unicorn/catch-error-name": 0,
+    "unicorn/prefer-dom-node-dataset": 0,
+    "unicorn/no-array-reduce": 0,
+    "unicorn/no-this-assignment": 0,
+    "unicorn/prefer-ternary": ["error", "only-single-line"],
+    "unicorn/no-empty-file": 0,
+    "unicorn/prefer-query-selector": 0,
+    "unicorn/prefer-dom-node-remove": 0,
+    "unicorn/no-for-loop": 0,
     "jsdoc/newline-after-description": [
       "warn",
       "never"
@@ -62,10 +115,7 @@
     "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": 0,
     "jsdoc/require-returns-description": 0,
     "jsdoc/valid-types": 0,
     "max-len": ["error", 120, 2, {
@@ -75,6 +125,7 @@
       "ignoreTemplateLiterals": true,
       "ignoreUrls": true
     }],
+    "consistent-return": "warn",
     "no-console": ["error", {
       "allow": [
         "warn",
@@ -91,7 +142,7 @@
     "prefer-destructuring": ["error", {
       "AssignmentExpression": {
         "array": false,
-        "object": true
+        "object": false
       },
       "VariableDeclarator": {
         "array": false,

package/.stylelintrc.json

@@ -1,15 +1,34 @@
 {
+  "env": {
+    "browser": true
+  },
+  "ignorePatterns": ["*.min.js"],
+  "settings": {
+    "html/html-extensions": [
+      ".html",
+      ".eta"
+    ]
+  },
   "extends": [
     "stylelint-config-recommended-scss",
     "stylelint-config-sass-guidelines"
   ],
   "ignoreFiles": "test/**",
   "plugins": [
-    "stylelint-scss"
+    "stylelint-scss",
+    "stylelint-use-logical-spec",
+    "stylelint-no-unsupported-browser-features"
   ],
+  "customSyntax": "postcss-scss",
   "rules": {
+    "plugin/no-unsupported-browser-features": [ true, {
+      "ignore": ["css-appearance", "overscroll-behavior"]
+    }],
+    "liberty/use-logical-spec": [
+      "always"
+    ],
     "max-nesting-depth": null,
-    "declaration-property-value-blacklist": null,
+    "declaration-property-value-disallowed-list": null,
     "selector-no-vendor-prefix": null,
     "property-no-vendor-prefix": null,
     "value-no-vendor-prefix": null,
@@ -25,6 +44,19 @@
     "no-empty-source": null,
     "block-no-empty": true,
     "no-extra-semicolons": true,
+    "rule-empty-line-before": [
+      "always",
+      {
+        "except": [
+          "first-nested"
+        ],
+        "ignore": [
+          "after-comment"
+        ]
+      }
+    ],
+    "no-eol-whitespace": true,
+    "shorthand-property-no-redundant-values": null,
     "selector-max-universal": 0,
     "selector-attribute-brackets-space-inside": "never",
     "selector-attribute-operator-space-after": "never",
@@ -38,25 +70,45 @@
     "selector-type-case": "lower",
     "selector-list-comma-space-before": "never",
     "indentation": 2,
-    "max-empty-lines": 2,
-    "selector-max-compound-selectors": [3, {
-      "severity": "warning"
-    }],
-    "no-descending-specificity": [true, {
-      "severity": "warning"
-    }],
-    "unit-blacklist": "px",
-    "selector-class-pattern": "^mdw-[a-z]+(__[a-z-]+)?$",
+    "max-empty-lines": 1,
+    "selector-max-compound-selectors": [
+      3,
+      {
+        "severity": "warning"
+      }
+    ],
+    "no-descending-specificity": [
+      true,
+      {
+        "severity": "warning"
+      }
+    ],
     "scss/at-import-no-partial-leading-underscore": null,
     "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": "^[a-z][a-zA-Z0-9]*$",
-    "order/order": null,
+    "scss/dollar-variable-default": [
+      true,
+      {
+        "ignore": "local"
+      }
+    ],
+    "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9-]*$",
+    "order/order": [
+      "dollar-variables",
+      "custom-properties",
+      "declarations",
+      "rules"
+    ],
     "order/properties-alphabetical-order": null,
-    "order/properties-order": [{
+    "order/properties-order": [
+      {
+        "groupName": "content",
+        "emptyLineBefore": "always",
+        "properties": [
+          "content"
+        ]
+      },
+      {
         "groupName": "layout",
         "emptyLineBefore": "always",
         "properties": [
@@ -66,6 +118,13 @@
           "right",
           "bottom",
           "left",
+          "inset",
+          "inset-block",
+          "inset-block-start",
+          "inset-block-end",
+          "inset-inline",
+          "inset-inline-start",
+          "inset-inline-end",
           "align-content",
           "align-items",
           "grid-column-align",
@@ -183,20 +242,22 @@
         "emptyLineBefore": "always",
         "properties": [
           "box-sizing",
-
           "min-height",
           "max-height",
           "height",
-
+          "min-block-size",
+          "max-block-size",
+          "block-size",
           "min-width",
           "max-width",
           "width",
-
+          "min-inline-size",
+          "max-inline-size",
+          "inline-size",
           "flex",
           "flex-grow",
           "flex-shrink",
           "flex-basis",
-
           "margin-block",
           "margin-block-start",
           "margin-block-end",
@@ -205,62 +266,47 @@
           "margin-inline-start",
           "margin-inline-end",
           "margin-trim",
-
           "margin",
           "margin-top",
           "margin-right",
           "margin-bottom",
           "margin-left",
-
           "border-block",
           "border-block-start",
           "border-block-end",
-
-          
-
           "border-block-style",
           "border-block-start-style",
           "border-block-end-style",
-
           "border-block-width",
           "border-block-start-width",
           "border-block-end-width",
-
           "border-fit",
           "border-fit-length",
           "border-fit-width",
-
           "border-corner-fit",
-
           "border-top-left-fit-length",
           "border-top-right-fit-length",
           "border-bottom-right-fit-length",
           "border-bottom-left-fit-length",
-
           "border-top-left-fit-width",
           "border-top-right-fit-width",
           "border-bottom-right-fit-width",
           "border-bottom-left-fit-width",
-
           "border-top-fit-length",
           "border-right-fit-length",
           "border-bottom-fit-length",
           "border-left-fit-length",
-
           "border-top-fit-width",
           "border-right-fit-width",
           "border-bottom-fit-width",
           "border-left-fit-width",
-
           "border-image",
           "border-image-source",
           "border-image-slice",
           "border-image-width",
           "border-image-outset",
           "border-image-repeat",
-
           "border-image-transform",
-
           "border-top-left-image",
           "border-top-image",
           "border-top-right-image",
@@ -268,27 +314,22 @@
           "border-bottom-right-image",
           "border-bottom-image",
           "border-bottom-left-image",
-
           "border",
-
           "border-top",
           "border-right",
           "border-bottom",
           "border-left",
           "border-left-image",
-
           "border-style",
           "border-top-style",
           "border-right-style",
           "border-bottom-style",
           "border-left-style",
-
           "border-width",
           "border-top-width",
           "border-right-width",
           "border-bottom-width",
           "border-left-width",
-
           "border-boundary",
           "border-break",
           "border-corner-image",
@@ -298,26 +339,20 @@
           "border-end-start-radius",
           "border-end-end-radius",
           "border-inline",
-
           "border-inline-style",
           "border-inline-width",
           "border-inline-start",
-          
           "border-inline-start-style",
           "border-inline-start-width",
           "border-inline-end",
-          
           "border-inline-end-style",
           "border-inline-end-width",
-
-
           "padding-block",
           "padding-block-start",
           "padding-block-end",
           "padding-inline",
           "padding-inline-start",
           "padding-inline-end",
-
           "padding",
           "padding-top",
           "padding-right",
@@ -343,6 +378,7 @@
           "outline-offset",
           "outline-style",
           "outline-width",
+          "pointer-events",
           "resize",
           "tap-highlight-color",
           "user-select"
@@ -409,7 +445,6 @@
           "mask-type",
           "mix-blend-mode",
           "opacity",
-          "pointer-events",
           "perspective",
           "perspective-origin",
           "transform",
@@ -596,5 +631,15 @@
         ]
       }
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/*.scss"
+      ],
+      "rules": {
+        "selector-class-pattern": "^mdw-[a-z]+(__[a-z-]+)*$"
+      }
+    }
+  ]
 }

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+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
 ------
 

package/README.md

@@ -1,5 +1,3 @@
-*Notice: This project is currently being maintained in an private fork. Changes will be pushed at a later date.*
-
 # materialdesignweb
 Material Design for Web
 
@@ -85,4 +83,4 @@ npm: `npm install @shortfuse/materialdesignweb`
 
 * † - Required
 
-* ‡ - Apply manually
+* ‡ - Apply manually

package/adapters/datatable/column.js

@@ -5,11 +5,12 @@ import { setTextNode } from '../../core/dom.js';
 
 /**
  * @template {Record<string, any>} T
- * @template {keyof T & string} K
- * @callback DataTableAdapterColumnFormatter<T,K>
- * @param {T[K]} value
+ * @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 {any}
+ * @return {R}
  */
 
 /**
@@ -22,10 +23,10 @@ import { setTextNode } from '../../core/dom.js';
 
 /**
  * @template {Record<string, any>} T
- * @template {keyof T & string} K
- * @callback DataTableAdapterColumnRenderer<T,K>
+ * @template {any} V
+ * @callback DataTableAdapterColumnRenderer<T,V>
  * @param {HTMLTableCellElement} cell
- * @param {T[K]} value
+ * @param {V} value
  * @param {T} data
  * @return {void}
  */
@@ -33,7 +34,8 @@ import { setTextNode } from '../../core/dom.js';
 /**
  * Constructor options for DataTableAdapterColumn
  * @template {Record<string, any>} T
- * @template {keyof T & string} K
+ * @template {(keyof T & string)|string} K
+ * @template {any} [R=any]
  * @typedef DataTableAdapterColumnOptions<T,K>
  * @prop {K} key
  * @prop {(string|DocumentFragment)} [name='']
@@ -45,8 +47,8 @@ import { setTextNode } from '../../core/dom.js';
  * @prop {HTMLElement} [customSortIcon]
  * @prop {string} [innerHTML]
  * @prop {DocumentFragment} [fragment]
- * @prop {DataTableAdapterColumnRenderer<T,K>} [renderer]
- * @prop {DataTableAdapterColumnFormatter<T,K>} [formatter]
+ * @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]
  */
 
@@ -55,20 +57,18 @@ function constructTableCheckbox() {
   const element = document.createElement('div');
   element.className = 'mdw-selection';
   element.setAttribute('aria-checked', 'false');
-  const input = document.createElement('div');
+  const input = element.appendChild(document.createElement('div'));
   input.className = 'mdw-selection__input mdw-datatable__widget';
-  const icon = document.createElement('div');
+  const icon = element.appendChild(document.createElement('div'));
   icon.className = 'mdw-selection__icon';
   icon.setAttribute('mdw-checkbox', '');
-  element.appendChild(input);
-  element.appendChild(icon);
   Selection.attach(element);
   return element;
 }
 
 /**
  * @template {Record<string, any>} T
- * @template {keyof T & string} K
+ * @template {(keyof T & string)|string} K
  */
 export default class DataTableAdapterColumn {
   /** @param {DataTableAdapterColumnOptions<T,K>} options */
@@ -87,44 +87,25 @@ export default class DataTableAdapterColumn {
       let sortIcon = options.customSortIcon;
       if (!sortIcon) {
         sortIcon = document.createElement('span');
-        sortIcon.classList.add('mdw-datatable__sort-icon');
-        sortIcon.classList.add('material-icons');
+        sortIcon.className = 'mdw-datatable__sort-icon material-icons';
         sortIcon.textContent = 'arrow_downward';
       }
-      if (this.element.hasChildNodes()) {
-        this.element.insertBefore(this.element.firstChild, options.customSortIcon);
-      } else {
-        this.element.appendChild(sortIcon);
-      }
+      this.element.prepend(sortIcon);
     }
     if (options.tooltip) {
       const wrapper = document.createElement('span');
-      wrapper.classList.add('mdw-tooltip__wrapper');
-      const target = document.createElement('span');
-      target.classList.add('mdw-tooltip__target');
-      if (!options.name) {
-        target.textContent = '';
-      } else if (typeof options.name === 'string') {
-        target.textContent = options.name;
-      } else {
-        target.appendChild(options.name);
-      }
-      const tooltip = document.createElement('div');
+      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;
-      wrapper.appendChild(target);
-      wrapper.appendChild(tooltip);
       this.element.appendChild(wrapper);
     } else if (options.name) {
-      let node;
-      if (typeof options.name === 'string') {
-        node = document.createTextNode(options.name);
-      } else {
-        node = options.name;
-      }
-      this.element.appendChild(node);
+      this.element.append(options.name);
     }
 
     this.primaryColumn = options.primaryColumn;
@@ -146,7 +127,7 @@ export default class DataTableAdapterColumn {
       case 'text':
         this.element.setAttribute('mdw-text', '');
         break;
-      case 'checkbox':
+      // case 'checkbox':
       default:
     }
 
@@ -177,12 +158,9 @@ export default class DataTableAdapterColumn {
     if (!cell.classList.contains('mdw-autofocus-widget')) {
       cell.classList.add('mdw-autofocus-widget');
     }
-    let selectionElement = cell.getElementsByClassName('mdw-selection')[0];
     const checked = !!value;
-    if (!selectionElement) {
-      selectionElement = constructTableCheckbox();
-      cell.appendChild(selectionElement);
-    }
+    const selectionElement = cell.getElementsByClassName('mdw-selection')[0]
+      || cell.appendChild(constructTableCheckbox());
     Attributes.setChecked(selectionElement, checked);
   }
 
@@ -192,12 +170,7 @@ export default class DataTableAdapterColumn {
    * @return {void}
    */
   static defaultCellRenderer(cell, value) {
-    let stringValue;
-    if (value == null) {
-      stringValue = '';
-    } else {
-      stringValue = value.toString();
-    }
+    const stringValue = (value == null) ? '' : value.toString();
     setTextNode(cell, stringValue);
   }
 }