@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/datatable/index.scss

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

package/components/datatable/row.js

@@ -0,0 +1,49 @@
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import { dispatchDomEvent, iterateArrayLike } 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) {
+  /** @type {HTMLTableRowElement} */
+  const rowElement = (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);
+  iterateArrayLike(element.cells, DataTableCell.attach);
+}
+
+/**
+ * @param {HTMLTableRowElement} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeEventListener('focus', onFocus);
+  Keyboard.detach(element);
+  iterateArrayLike(element.cells, DataTableCell.detach);
+}

package/components/datatable/rowheader.js

@@ -0,0 +1,18 @@
+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,13 +1,12 @@
 // https://material.io/guidelines/components/dialogs.html
 // https://material.io/guidelines/motion/choreography.html#choreography-creation
 
-@import '../../core/breakpoint.scss';
-@import '../../core/elevation.scss';
-@import '../../core/motion.scss';
-@import '../../core/platform.scss';
-@import '../../core/type.scss';
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_type.scss' as type;
 
-$mdw-dialog__unit-width: dp(56) !default;
+$unitWidth: dp(56) !default;
 
 .mdw-dialog__close {
   position: absolute;
@@ -21,12 +20,15 @@ $mdw-dialog__unit-width: dp(56) !default;
   -ms-scroll-chaining: none;
   scrollbar-width: none;
   
+  
   height: 100%;
   width: 100%;
   
   cursor: default;
+  -webkit-tap-highlight-color: transparent;
   
   pointer-events: inherit;
+  visibility: hidden;
   z-index: 8;
 
   // Hide scrollbar
@@ -57,14 +59,14 @@ $mdw-dialog__unit-width: dp(56) !default;
   width: 100%;
   padding: dp(84) dp(40);
   
-  transition-duration: $mdw-motion__fade-out-duration;
-  transition-property: opacity, visibility;
-  transition-timing-function: $mdw-motion__accelerate-easing;
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: opacity;
+  transition-timing-function: motion.$accelerateEasing;
+  will-change: opacity;
   
   opacity: 0;
   pointer-events: none;
-  visibility: hidden;
-  
+
   z-index: 24;
 
   background-color: rgba(0, 0, 0, 0.50);
@@ -77,32 +79,19 @@ $mdw-dialog__unit-width: dp(56) !default;
   @for $i from 3 to 8 {
     &[mdw-width-units="#{$i}"] {
       .mdw-dialog__popup {
-        min-width: calc(#{$mdw-dialog__unit-width} * #{$i});
+        min-width: #{$unitWidth * $i};
       }
     }
   }
-
-  &[aria-hidden="false"],
-  &[id]:target {
-    transition-duration: $mdw-motion__fade-in-duration;
-    transition-property: opacity; // Immediate visibility required for autofocus
-    transition-timing-function: $mdw-motion__decelerate-easing;
-
-    opacity: 1;
-    pointer-events: auto;
-    visibility: visible;
-
-    .mdw-dialog__popup {
-      transform: scale(1);
-    }
-  }
 }
 
 .mdw-dialog__popup {
-  display: flex;
+  display: none;
   position: relative;
   flex-direction: column;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
   overscroll-behavior: none;
   overscroll-behavior: contain;
   -ms-scroll-chaining: none;
@@ -112,32 +101,63 @@ $mdw-dialog__unit-width: dp(56) !default;
   max-width: 100%;
   flex-shrink: 1;
 
-  transition-duration: inherit;
-  transition-property: transform;
-  transition-timing-function: inherit;
-
-  transform: scale(0);
+  will-change: display, transform;
+  
+  transform: scale(1);
   transform-origin: bottom center;
   z-index: 24;
 
   border-radius: dp(4);
-  box-shadow: mdwElevation(24);
+  box-shadow: elevation.boxShadow(24);
 }
 
+.mdw-dialog[aria-hidden="false"],
+.mdw-dialog[id]:target {
+  transition-duration: motion.$fadeInDuration;
+  transition-property: opacity;
+  transition-timing-function: motion.$decelerateEasing;
+
+  opacity: 1;
+  pointer-events: auto;
+
+  .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 texttop-to-top(20);
-  @include type-rules('h6');
-  @include baseline-bottom(36);
+  @include type.textTopToTop(20);
+  @include type.addRules('h6');
+  @include type.baselineToBottom(36);
 
   margin-bottom: dp(-36);
   padding: 0 dp(24);
 }
 
 .mdw-dialog__body {
-  @include texttop-to-top(20);
-  @include type-rules('body');
-  @include baseline-bottom(28);
+  @include type.textTopToTop(20);
+  @include type.addRules('body');
+  @include type.baselineToBottom(28);
 
   padding: 0 dp(24);
 }
@@ -147,7 +167,7 @@ $mdw-dialog__unit-width: dp(56) !default;
 }
 
 .mdw-dialog__scrolling {
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .mdw-dialog__button-area {