@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/datatable/index.scss

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

package/components/datatable/row.js

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

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

@@ -0,0 +1,203 @@
+// https://material.io/guidelines/components/dialogs.html
+// https://material.io/guidelines/motion/choreography.html#choreography-creation
+
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_type.scss' as type;
+
+$unitWidth: 56px !default;
+
+.mdw-dialog__close {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  // Scroll mask
+  overflow-y: scroll;
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+
+  block-size: 100%;
+  inline-size: 100%;
+
+  cursor: default;
+
+  pointer-events: inherit;
+  -webkit-tap-highlight-color: transparent;
+
+  visibility: hidden;
+  z-index: 8;
+
+  // Hide scrollbar
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::after {
+    content: '';
+
+    display: block;
+
+    block-size: 200%;
+    inline-size: 200%;
+  }
+}
+
+.mdw-dialog {
+  display: flex;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+
+  box-sizing: border-box;
+  block-size: 100%;
+  inline-size: 100%;
+  padding: 84px 40px;
+
+  pointer-events: none;
+
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: opacity;
+  transition-timing-function: motion.$accelerateEasing;
+  will-change: opacity;
+
+  opacity: 0;
+
+  z-index: 24;
+
+  /* Handled by theme */
+  // background-color: rgba(0, 0, 0, 0.50);
+
+  &:not([aria-hidden]) {
+    // Initial state
+    transition: none;
+  }
+
+  @for $i from 3 to 8 {
+    &[mdw-width-units="#{$i}"] {
+      .mdw-dialog__popup {
+        min-inline-size: #{$unitWidth * $i};
+      }
+    }
+  }
+}
+
+.mdw-dialog__popup {
+  display: none;
+  position: relative;
+  flex-direction: column;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+
+  max-block-size: 100%;
+  min-inline-size: 224px;
+  max-inline-size: 100%;
+  flex-shrink: 1;
+
+  will-change: display, transform;
+
+  transform: scale(1);
+  transform-origin: bottom center;
+  z-index: 24;
+
+  border-radius: 4px;
+  box-shadow: elevation.boxShadow(24);
+}
+
+.mdw-dialog[aria-hidden="false"],
+.mdw-dialog[id]:target {
+  pointer-events: auto;
+
+  transition-duration: motion.$fadeInDuration;
+  transition-property: opacity;
+  transition-timing-function: motion.$decelerateEasing;
+
+  opacity: 1;
+
+  .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 type.textTopToTop(20);
+  @include type.addRules('h6');
+  @include type.baselineToBottom(36);
+
+  margin-block-end: -36px;
+  padding: 0 24px;
+}
+
+.mdw-dialog__body {
+  @include type.textTopToTop(20);
+  @include type.addRules('body');
+  @include type.baselineToBottom(28);
+
+  padding: 0 24px;
+}
+
+.mdw-dialog__header {
+  min-block-size: 64px;
+}
+
+.mdw-dialog__scrolling {
+  overflow-y: auto;
+}
+
+.mdw-dialog__button-area {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  flex: none;
+  margin-block: 8px;
+
+  .mdw-button {
+    margin-inline: 0 8px;
+
+    text-align: end;
+  }
+
+  &[mdw-stacked] {
+    margin-block-start: 0;
+
+    .mdw-button {
+      justify-content: flex-end;
+
+      min-block-size: 48px;
+      flex-basis: 100%;
+      margin-inline: 0;
+      padding-inline: 16px;
+
+    }
+  }
+}

package/components/dialog/_theme.scss

@@ -0,0 +1,7 @@
+.mdw-theme {
+  --mdw-dialog__scrim-color: RGBA(var(--mdw-alias-background-900), 0.60);
+}
+
+.mdw-dialog {
+  background-color: var(--mdw-dialog__scrim-color);
+}