@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/adapters/list/index.js

@@ -1,12 +1,18 @@
-import DomAdapter from '../dom/index';
-import * as ListItem from '../../components/list/item';
+import * as ListItem from '../../components/list/item.js';
+import DomAdapter from '../dom/index.js';
+
+/**
+ * @template T1
+ * @template T2
+ * @typedef {import('../dom/index').DomAdapterCreateOptions<T1,T2>} DomAdapterCreateOptions<T1,T2>
+ */
 
 /**
  * @param {HTMLLIElement} element
  * @param {any} data
  * @return {void}
  */
-function AnyListAdapterRendererFn(element, data) {
+function AnyListAdapterRenderer(element, data) {
   let primaryText = element.getElementsByClassName('mdw-list__text')[0];
   if (!primaryText) {
     let contentElement = element.getElementsByClassName('mdw-list__content')[0];
@@ -33,19 +39,26 @@ function AnyListAdapterRendererFn(element, data) {
   }
 }
 
+/**
+ * @template T
+ * @typedef {Object} ListAdapterCreateOptions
+ * @prop {HTMLElement} element
+ * @prop {Array<T>} datasource
+ * @prop {function(HTMLLIElement, T):void} [render={function(HTMLIElement,T):void}]
+ */
+
 /**
  * @template T
  * @extends {DomAdapter<T, HTMLLIElement>}
- * */
+ */
 export default class ListAdapter extends DomAdapter {
-  /**
-   * @param {HTMLElement} element
-   * @param {Array<T>} datasource
-   * @param {function(HTMLLIElement, T)=} renderFn
-   */
-  constructor(element, datasource, renderFn) {
-    super(element, datasource, renderFn, ListAdapter.create);
-    this.render = renderFn || AnyListAdapterRendererFn;
+  /** @param {ListAdapterCreateOptions<T>} options */
+  constructor(options) {
+    super(options);
+    if (!options.render) {
+      this.render = AnyListAdapterRenderer;
+    }
+    this.create = ListAdapter.create;
   }
 
   static create() {

package/adapters/search/index.js

@@ -1,10 +1,10 @@
 // https://www.w3.org/TR/wai-aria-practices/#combobox
 
-import { iterateSomeOfArrayLike, iterateArrayLike, getTextNode } from '../../core/dom';
-
-import * as List from '../../components/list/index';
-import * as ListContent from '../../components/list/content';
-import * as TextField from '../../components/textfield/index';
+import * as ListContent from '../../components/list/content.js';
+import * as List from '../../components/list/index.js';
+import * as TextField from '../../components/textfield/index.js';
+import { getTextNode, iterateArrayLike, iterateSomeOfArrayLike } from '../../core/dom.js';
+import { noop } from '../../utils/function.js';
 
 /**
  * @param {string} input
@@ -133,7 +133,7 @@ function scrollItemIntoView(listItem) {
  * @param {string} input
  * @param {string} content
  * @return {boolean} passes
-*/
+ */
 
 /**
  * @template T
@@ -213,8 +213,8 @@ export default class SearchAdapter {
     this.suggestedInput = null;
     /** @type {string} */
     this.previousValue = null;
-    this.performSearch = options.performSearch || ((value, resolve = () => {}) => resolve());
-    this.updateList = options.updateList || ((results, resolve = () => {}) => resolve());
+    this.performSearch = options.performSearch || ((value, resolve = noop) => resolve());
+    this.updateList = options.updateList || ((results, resolve = noop) => resolve());
   }
 
   /**
@@ -222,7 +222,7 @@ export default class SearchAdapter {
    * @param {Event} [event]
    * @return {void}
    */
-  handleInputEvent(event) { // eslint-disable-line no-unused-vars
+  handleInputEvent(event) { // eslint-disable-line @typescript-eslint/no-unused-vars
     if (document.activeElement !== this.input) {
       return;
     }
@@ -257,7 +257,7 @@ export default class SearchAdapter {
     this.performDebounce(inputValue,
       () => this.checkExpired(inputValue,
         () => this.performSearch(inputValue,
-          searchResults => this.checkExpired(inputValue,
+          (searchResults) => this.checkExpired(inputValue,
             () => this.updateList(searchResults,
               () => this.filterListItems(),
               onErrorCallback),
@@ -291,7 +291,7 @@ export default class SearchAdapter {
 
   /**
    * @param {string} inputValue
-   * @param {function} resolve
+   * @param {Function} resolve
    * @param {function(Error):any} reject
    * @return {void}
    */
@@ -305,7 +305,7 @@ export default class SearchAdapter {
 
   /**
    * @param {string} searchTerm
-   * @param {function} resolve
+   * @param {Function} resolve
    * @param {function(Error):any} reject
    * @return {void}
    */
@@ -376,7 +376,7 @@ export default class SearchAdapter {
    * @param {Event|FocusEvent} event
    * @return {void}
    */
-  handleBlurEvent(event) { // eslint-disable-line no-unused-vars
+  handleBlurEvent(event) { // eslint-disable-line @typescript-eslint/no-unused-vars
     if (this.dropdown) {
       const dropDownElement = this.textfield.querySelector('.mdw-textfield__dropdown');
       if (dropDownElement.hasAttribute('mdw-show')) {

package/components/appbar/_spec.scss

@@ -1,17 +1,17 @@
 // https://material.io/guidelines/layout/structure.html#structure-app-bar
 // https://material.io/archive/guidelines/components/toolbars.html
 
-@import '../../core/_breakpoint.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_type.scss';
-
-$mdw-appbar__height: 64 !default;
-$mdw-appbar__height-dense: 48 !default;
-$mdw-appbar__height-mobile: 56 !default;
-$mdw-appbar__height-mobile-landscape: 48 !default;
-$mdw-appbar__height-prominent: 128 !default;
-$mdw-appbar__height-prominent-dense: 96 !default;
-$mdw-appbar__icon-height: 40 !default;
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_length.scss' as *;
+@use '../../core/_type.scss' as type;
+
+$height: 64 !default;
+$heightDense: 48 !default;
+$heightMobile: 56 !default;
+$heightMobileLandscape: 48 !default;
+$heightProminent: 128 !default;
+$heightProminentDense: 96 !default;
+$iconHeight: 40 !default;
 
 .mdw-appbar {
   display: flex;
@@ -19,41 +19,51 @@ $mdw-appbar__icon-height: 40 !default;
 }
 
 .mdw-appbar__action {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  
-  min-height: dp($mdw-appbar__height);
-  
+  display: -ms-grid;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  -ms-grid-columns: auto 1fr auto;
   
+  min-height: dp($height);
+  -ms-grid-rows: minmax(dp($height), 1fr) auto;
+
   transition-duration: inherit;
   transition-property: min-height;
   transition-timing-function: inherit;
 
   z-index: 1;
 
+  &[mdw-centered] {
+    grid-template-columns: minmax(auto, 1fr) minmax(0, auto) minmax(auto, 1fr);
+    -ms-grid-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
+  }
+
   .mdw-appbar[mdw-prominent] > & {
-    min-height: dp($mdw-appbar__height-prominent);
+    min-height: dp($heightProminent);
+    -ms-grid-rows: minmax(dp($heightProminent), 1fr) auto;
   }
   
   .mdw-appbar[mdw-dense] > & {
-    min-height: dp($mdw-appbar__height-dense);
+    min-height: dp($heightDense);
+    -ms-grid-rows: minmax(dp($heightDense), 1fr) auto;
   }
   
   .mdw-appbar[mdw-dense][mdw-prominent] > & {
-    min-height: dp($mdw-appbar__height-prominent-dense);
-    @include mdw-breakpoint__tablet-device__max {
-      min-height: dp($mdw-appbar__height-prominent);
+    min-height: dp($heightProminentDense);
+    -ms-grid-rows: minmax(dp($heightProminentDense), 1fr) auto;
+    @include breakpoint.maxTabletDevice {
+      min-height: dp($heightProminent);
+      -ms-grid-rows: minmax(dp($heightProminent), 1fr) auto;
     }
   }
-  
+
   &,
   .mdw-appbar[mdw-dense] > & {
-    @include mdw-breakpoint__tablet-device__max {
-      min-height: dp($mdw-appbar__height-mobile);
+    @include breakpoint.maxTabletDevice {
+      min-height: dp($heightMobile);
     }
-    @include mdw-breakpoint__mobile-device__landscape {
-      min-height: dp($mdw-appbar__height-mobile-landscape);
+    @include breakpoint.isMobileDeviceLandscape {
+      min-height: dp($heightMobileLandscape);
     }
   }
 }
@@ -62,59 +72,67 @@ $mdw-appbar__icon-height: 40 !default;
   display: flex;
   flex-direction: column;
 
-  flex-grow: 1;
+  -ms-grid-column: 1;
+  grid-column: 1;
+  -ms-grid-column-span: 3;
+  grid-column-end: span 3;
+  -ms-grid-row: 2;
+  grid-row: 2;
 
   margin-right: dp(24);
   margin-left: dp(80);
-  @include mdw-breakpoint__16dp-margin {
+  @include breakpoint.has16DPMargin() {
     margin-right: dp(16);
     margin-left: dp(72);
   }
 }
 
 .mdw-appbar__title {
-  @include type-rules('h6');
-  @include baseline-bottom(24);
+  @include type.addRules('h6');
+  @include type.baselineToBottom(24);
 
+  -ms-grid-row-align: end;
   align-self: flex-end;
+
+  -ms-grid-column: 2;
+  grid-column: 2;
+  -ms-grid-row: 1;
+  grid-row: 1;
+
   justify-content: space-around;
   overflow-x: hidden;
   
   height: auto;
-  flex-grow: 1;
   margin: 0 dp(16);
-  
 
   transition-duration: inherit;
-  transition-property: font, letter-spacing;
+  transition-property: font, letter-spacing, margin-top;
   transition-timing-function: inherit;
 
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &[mdw-centered] {
-    flex-grow: 0;
-  }
 
   .mdw-appbar[mdw-dense] & {
-    @include baseline-bottom(16);
+    @include type.baselineToBottom(16);
   }
-  
+
   .mdw-appbar[mdw-dense] &,
   & {
-    @include mdw-breakpoint__tablet-device__max {
-      @include baseline-bottom(20);
+    @include breakpoint.maxTabletDevice {
+      @include type.baselineToBottom(20);
     }
-    @include mdw-breakpoint__mobile-device__landscape {
-      @include baseline-bottom(16);
+    @include breakpoint.isMobileDeviceLandscape {
+      @include type.baselineToBottom(16);
     }
   }
 
   .mdw-appbar[mdw-prominent] & {
     white-space: normal;
-    @include type-rules('h5');
-    @include baseline-bottom(28);
+    @include type.addRules('h5');
+    @include type.baselineToBottom(28);
   }
+
   &[mdw-custom] {
     margin-top: 0;
 
@@ -125,30 +143,35 @@ $mdw-appbar__icon-height: 40 !default;
 }
 
 .mdw-appbar__start {
-  order: -1;
+  -ms-grid-column: 1;
+  grid-column: 1;
 
   margin-left: dp(8);
 
   padding: 0 dp(8);
-  @include mdw-breakpoint__16dp-margin {
+  @include breakpoint.has16DPMargin() {
     margin-left: 0;
   }
 }
 
 .mdw-appbar__end {
-  order: 1;
-  margin-left: 0;
+  -ms-grid-column: 3;
+  grid-column: 3;
+  justify-content: flex-end;
+
   margin-right: dp(12);
-  @include mdw-breakpoint__16dp-margin {
-    margin-left: 0;
+  margin-left: 0;
+  @include breakpoint.has16DPMargin() {
     margin-right: dp(4);
+    margin-left: 0;
   }
-  [dir=rtl] & {
-    margin-left: dp(12);
+
+  :root[dir="rtl"] & {
     margin-right: 0;
-    @include mdw-breakpoint__16dp-margin {
-      margin-left: dp(4);
+    margin-left: dp(12);
+    @include breakpoint.has16DPMargin() {
       margin-right: 0;
+      margin-left: dp(4);
     }
   }
 }
@@ -159,26 +182,26 @@ $mdw-appbar__icon-height: 40 !default;
   display: flex;
   align-items: flex-start;
   flex-direction: row;
+
+  transition-property: margin-top;
 }
 
 .mdw-appbar__start,
 .mdw-appbar__end,
 .mdw-appbar__title {
-  margin-top: dp(($mdw-appbar__height - $mdw-appbar__icon-height) / 2);
-  
-  transition-property: margin-top;
+  margin-top: dp(($height - $iconHeight) * 0.5);
   
   .mdw-appbar[mdw-dense] & {
-    margin-top: dp(($mdw-appbar__height-dense - $mdw-appbar__icon-height) / 2);
+    margin-top: dp(($heightDense - $iconHeight) * 0.5);
   }
-  
+
   &,
   .mdw-appbar[mdw-dense] & {
-    @include mdw-breakpoint__tablet-device__max {
-      margin-top: dp(($mdw-appbar__height-mobile - $mdw-appbar__icon-height) / 2);
+    @include breakpoint.maxTabletDevice {
+      margin-top: dp(($heightMobile - $iconHeight) * 0.5);
     }
-    @include mdw-breakpoint__mobile-device__landscape {
-      margin-top: dp(($mdw-appbar__height-mobile-landscape - $mdw-appbar__icon-height) / 2);
+    @include breakpoint.isMobileDeviceLandscape {
+      margin-top: dp(($heightMobileLandscape - $iconHeight) * 0.5);
     }
   }
 }

package/components/appbar/index.scss

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

package/components/banner/_spec.scss

@@ -1,8 +1,8 @@
 // https://material.io/design/components/banners.html
 
-@import '../../core/_platform.scss';
-@import '../../core/_breakpoint.scss';
-@import '../../core/_type.scss';
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_length.scss' as *;
+@use '../../core/_type.scss' as type;
 
 .mdw-banner {
   display: flex;
@@ -15,7 +15,7 @@
 }
 
 .mdw-banner__container {
-  @include type-rules('body-2');
+  @include type.addRules('body-2');
 
   display: flex;
   position: relative;
@@ -53,8 +53,8 @@
 }
 
 .mdw-banner__text {
-  @include texttop-to-top(12);
-  @include baseline-bottom(12);
+  @include type.textTopToTop(12);
+  @include type.baselineToBottom(12);
 
   flex-grow: 1;
 
@@ -68,7 +68,7 @@
     padding-left: 0;
   }
 
-  @include mdw-breakpoint__16dp-margin {
+  @include breakpoint.has16DPMargin() {
     padding-right: 0;
     padding-left: dp(16);
 
@@ -101,7 +101,7 @@
   }
 }
 
-@include mdw-breakpoint__medium-window__min {
+@include breakpoint.minMediumWindow {
   .mdw-banner {
     flex-wrap: nowrap;
   }

package/components/banner/index.scss

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

package/components/bottomnav/_spec.scss

@@ -1,14 +1,12 @@
 // https://material.io/design/components/bottom-navigation.html#specs
 
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_type.scss';
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_type.scss' as type;
 
 .mdw-bottomnav {
   display: flex;
   position: relative;
-  align-items: stretch;
-  flex-direction: row;
   justify-content: center;
   overflow: hidden;
 
@@ -25,8 +23,10 @@
   overflow: visible;
   
   min-width: dp(80);
-  max-width: dp(168);
-  flex: 1;
+  flex: dp(168);
+  flex-grow: 0;
+  // flex-shrink: 1;
+  // flex-basis: dp(168);
   margin: 0;
   padding: 0;
 
@@ -44,6 +44,7 @@
 }
 
 .mdw-bottomnav__icon {
+  display: flex;
   position: absolute;
   top: 0;
   left: 50%;
@@ -52,9 +53,9 @@
   margin-left: dp(-12);
   padding: 0;
 
-  transition-duration: $mdw-motion__shape-change-duration, $mdw-motion__simple-duration;
+  transition-duration: motion.$shapeChangeDuration, motion.$simpleDuration;
   transition-property: transform, color;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
 
   pointer-events: none;
   transform: translateY(dp(8));
@@ -66,7 +67,6 @@
 }
 
 .mdw-bottomnav__badge {
-  visibility: hidden;
   position: absolute;
   top: 0;
   right: auto;
@@ -78,13 +78,15 @@
   min-width: dp(8);
   padding: dp(2);
 
+  visibility: hidden;
+
   z-index: 1;
 
   border-radius: dp(8);
 
   font: inherit;
 
-  font-weight: $font-weight-regular;
+  font-weight: type.$weightRegular;
   font-size: dp(10);
   line-height: dp(12);
   letter-spacing: normal;
@@ -96,12 +98,15 @@
   
   &[mdw-badge] {
     visibility: visible;
+
     &::before {
       content: attr(mdw-badge);
     }
   }
+
   &[data-mdw-badge] {
     visibility: visible;
+
     &::before {
       content: attr(data-mdw-badge);
     }
@@ -109,20 +114,20 @@
 }
 
 .mdw-bottomnav__label {
-  @include type-rules('caption');
-  @include texttop-to-top(32);
-  @include baseline-bottom(8);
+  @include type.addRules('caption');
+  @include type.textTopToTop(32);
+  @include type.baselineToBottom(8);
   
   // Overriding 12dp for baseline bottom with 8dp for oversized and textwrapped
-  // Baseline top will ensure baseline-bottom is 12dp for standard layouts
+  // Baseline top will ensure type.baselineToBottom is 12dp for standard layouts
 
   box-sizing: border-box;
   max-width: 100%;
   padding: 0 dp(12);
   
-  transition-duration: $mdw-motion__shape-change-duration;
+  transition-duration: motion.$shapeChangeDuration;
   transition-property: transform, opacity, color;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
 
   pointer-events: none;