@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/tab/_spec.scss

@@ -1,220 +0,0 @@
-// https://material.io/design/components/tabs.html#spec
-
-@use '../../core/_elevation.scss' as elevation;
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_type.scss' as type;
-
-$icon-size: 24 !default;
-$icon-margin-top: 12 !default;
-$icon-to-label-baseline: 20 !default;
-$icon-with-label-height: 72 !default;
-
-.mdw-tab {
-  display: flex;
-  flex-direction: column;
-}
-
-.mdw-tab__list {
-  display: grid;
-  position: relative;
-  flex-direction: row;
-
-  grid-auto-columns: 1fr;
-
-  justify-content: flex-start;
-
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-
-  flex: none;
-  overscroll-behavior-x: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &[mdw-scrollable] {
-    display: flex;
-    overflow-x: auto;
-
-    box-sizing: border-box;
-
-    &::before,
-    &::after {
-      // Ensures 52dp blank space at end
-      content: '';
-
-      min-inline-size: 52px;
-    }
-  }
-}
-
-.mdw-tab__icon,
-.mdw-tab__label,
-.mdw-tab__indicator {
-  transition-duration: motion.$simpleDuration;
-  transition-timing-function: motion.$standardEasing;
-}
-
-.mdw-tab__indicator {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0 auto;
-
-  block-size: 2px;
-  inline-size: 0;
-  inline-size: 1000px;
-
-  transition-property: none;
-
-  transform: translateX(0) scaleX(0);
-  transform-origin: 0 0 0;
-
-  background-color: currentColor;
-
-  &[mdw-animate] {
-    transition-property: transform;
-  }
-
-}
-
-.mdw-tab__item {
-  display: flex;
-  position: relative;
-  align-items: center;
-  flex-direction: column;
-
-  grid-row: 1;
-  overflow: hidden;
-
-  box-sizing: content-box;
-
-  min-block-size: 48px;
-  flex: auto;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  z-index: 0;
-
-  border-radius: 0;
-
-  box-shadow: none;
-
-  .mdw-tab__list[mdw-scrollable] > & {
-    min-inline-size: 90px;
-    max-inline-size: 100%;
-    flex: none;
-  }
-}
-
-.mdw-tab__icon {
-  @include type.baselineToBottom($icon-to-label-baseline);
-  margin-block: dp($icon-margin-top) dp(-$icon-to-label-baseline);
-
-  pointer-events: none;
-
-  transition-property: color;
-}
-
-.mdw-tab__label {
-  @include type.addRules('button');
-
-  box-sizing: border-box;
-  margin-block: auto;
-  padding: 0 16px;
-
-  pointer-events: none;
-
-  transition-property: color;
-
-  text-align: center;
-
-  .mdw-tab__icon ~ & {
-    @include type.baselineToTop($icon-to-label-baseline);
-    @include type.baselineToBottom($icon-with-label-height - $icon-margin-top - $icon-size - $icon-to-label-baseline);
-
-    display: block;
-
-    min-block-size: 0;
-    margin: 0;
-  }
-}
-
-.mdw-tab__content {
-  display: flex;
-  position: relative;
-  align-items: stretch;
-  flex-direction: row;
-
-  // Hide scrollbar
-  -ms-overflow-style: none;
-  overflow-x: hidden;
-  overflow-x: scroll;
-  -webkit-overflow-scrolling: touch;
-
-  scroll-behavior: smooth;
-
-  // W3C standard
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-
-  flex-grow: 1;
-
-  // Snap
-
-  // Firefox
-  -webkit-scroll-snap-type-x: mandatory;
-  scroll-snap-type-x: mandatory;
-  -webkit-scroll-snap-points-x: repeat(100%);
-  scroll-snap-points-x: repeat(100%);
-
-  overscroll-behavior-x: none;
-
-  .mdw-tab[mdw-resize-stage] & {
-    scroll-behavior: auto;
-  }
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.mdw-tab__panel {
-  scroll-snap-align: center;
-
-  min-inline-size: 100%;
-  max-inline-size: 100%;
-  flex-shrink: 0;
-  flex-basis: 100%;
-
-  will-change: visibility;
-
-  visibility: visible;
-
-  &[aria-hidden="true"] {
-    visibility: hidden;
-  }
-
-  &[aria-expanded="false"] .mdw-tab__panel__inactive-hide,
-  &[aria-expanded="true"] .mdw-tab__panel__active-hide {
-    visibility: hidden;
-  }
-
-  &[aria-expanded="false"] .mdw-tab__panel__inactive-remove,
-  &[aria-expanded="true"] .mdw-tab__panel__active-remove {
-    display: none;
-  }
-
-}
-
-.mdw-tab__content[mdw-no-scroll] {
-  overflow-x: hidden;
-  scroll-behavior: auto;
-}

package/components/tab/content.js

@@ -1,210 +0,0 @@
-import {
-  dispatchDomEvent,
-  isRtl,
-  scrollToElement,
-} from '../../core/dom.js';
-
-import * as TabPanel from './panel.js';
-
-export const SCROLL_EVENT = 'mdw:tabcontent-scroll';
-
-/**
- * Prevent scrolling with keyboard
- * @param {KeyboardEvent} event
- * @return {void}
- */
-function onKeyDown(event) {
-  if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
-    return;
-  }
-  switch (event.key) {
-    case 'ArrowLeft':
-    case 'ArrowRight':
-    case 'Left':
-    case 'Right':
-      if (event.target instanceof HTMLInputElement
-        || event.target instanceof HTMLTextAreaElement) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      break;
-    default:
-  }
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-export function onTabContentScroll(event) {
-  const tabContentElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const isPageRtl = isRtl();
-  const scrollPoint = tabContentElement.scrollLeft / tabContentElement.clientWidth;
-  let visibleIndex = Math.floor(scrollPoint);
-  let visibilityPercentage = scrollPoint - visibleIndex;
-
-  // Percentage may be incorrect due to floating point rounding errors
-  // Compare integer values provided by browser to check if within 1px
-  for (let i = 0; i < tabContentElement.children.length; i++) {
-    const panel = tabContentElement.children.item(i);
-    if (!(panel instanceof HTMLElement)) continue;
-    if (Math.abs(tabContentElement.scrollLeft - panel.offsetLeft) <= 1) {
-      visibleIndex = i;
-      visibilityPercentage = 0;
-      break;
-    }
-  }
-
-  const isResting = visibilityPercentage === 0;
-  let rightPanel;
-  let leftPeekPanel;
-  let rightPeekPanel;
-  let leftSelected = false;
-  let rightSelected = false;
-  let selectedIndex;
-  let leftPanelIndex;
-  if (isPageRtl) {
-    const lastIndex = tabContentElement.children.length - 1;
-    leftPanelIndex = lastIndex - visibleIndex;
-    leftPeekPanel = tabContentElement.children.item(lastIndex - (visibleIndex - 1));
-    rightPanel = tabContentElement.children.item(lastIndex - (visibleIndex + 1));
-    rightPeekPanel = tabContentElement.children.item(lastIndex - (visibleIndex + 2));
-    if (visibilityPercentage < 0.5) {
-      leftSelected = true;
-      selectedIndex = lastIndex - visibleIndex;
-    } else {
-      rightSelected = true;
-      selectedIndex = lastIndex - (visibleIndex + 1);
-    }
-  } else {
-    leftPanelIndex = visibleIndex;
-    rightPanel = tabContentElement.children.item(visibleIndex + 1);
-    leftPeekPanel = tabContentElement.children.item(visibleIndex - 1);
-    rightPeekPanel = tabContentElement.children.item(visibleIndex + 2);
-    if (visibilityPercentage < 0.5) {
-      leftSelected = true;
-      selectedIndex = visibleIndex;
-    } else {
-      rightSelected = true;
-      selectedIndex = visibleIndex + 1;
-    }
-  }
-
-  const leftPanel = /** @type {HTMLElement} */ (tabContentElement.children.item(leftPanelIndex));
-
-  const currentTargetIndexString = tabContentElement.getAttribute('mdw-target-index');
-  const currentTargetIndex = (currentTargetIndexString == null)
-    ? null
-    : Number.parseInt(currentTargetIndexString, 10);
-
-  let updateSelected = false;
-  let forceSelection = false;
-  if (currentTargetIndex == null) {
-    TabPanel.setExpanded(leftPanel, leftSelected);
-    if (rightPanel) {
-      TabPanel.setExpanded(rightPanel, rightSelected);
-    }
-    updateSelected = visibilityPercentage === 0;
-  } else if (currentTargetIndex === selectedIndex && visibilityPercentage === 0) {
-    updateSelected = true;
-    forceSelection = true;
-    tabContentElement.removeAttribute('mdw-target-index');
-  }
-
-  TabPanel.setHidden(leftPanel, false);
-  if (leftPeekPanel) {
-    TabPanel.setHidden(leftPeekPanel, isResting || !leftSelected);
-  }
-  if (rightPanel) {
-    TabPanel.setHidden(rightPanel, isResting);
-  }
-  if (rightPeekPanel) {
-    TabPanel.setHidden(rightPeekPanel, isResting || !rightSelected);
-  }
-
-  dispatchDomEvent(tabContentElement, SCROLL_EVENT, {
-    leftPanelIndex,
-    visibilityPercentage,
-    updateSelected,
-    forceSelection,
-  });
-}
-
-/**
- * @param {HTMLElement} tabContentElement
- * @param {HTMLElement|number} panel element or index
- * @param {true|false|'smooth'} [scrollToPanel='smooth']
- * @return {void}
- */
-export function selectPanel(tabContentElement, panel, scrollToPanel = 'smooth') {
-  /** @type {HTMLElement} */
-  let panelElement;
-  /** @type {number} */
-  let currentSelectedIndex = null;
-  /** @type {number} */
-  let panelIndex = null;
-  /** @type {Element[]} */
-  const otherPanels = [];
-  // eslint-disable-next-line github/array-foreach
-  [...tabContentElement.getElementsByClassName('mdw-tab__panel')].forEach((el, index) => {
-    if (currentSelectedIndex == null && TabPanel.isExpanded(el)) {
-      currentSelectedIndex = index;
-    }
-    if (panel === el || panel === index) {
-      TabPanel.setExpanded(el, true);
-      TabPanel.setHidden(el, false);
-      panelElement = /** @type {HTMLElement} */ (el);
-      panelIndex = index;
-    } else {
-      otherPanels.push(el);
-    }
-  });
-  if (!panelElement) {
-    // Invalid index or panel not in tabcontent
-    return;
-  }
-  for (const sibling of otherPanels) TabPanel.setExpanded(sibling, false);
-
-  const isPageRtl = isRtl();
-  const targetScrollLeft = isPageRtl
-    ? panelElement.parentElement.scrollWidth + panelElement.offsetLeft - panelElement.offsetWidth
-    : panelElement.offsetLeft;
-  if (!scrollToPanel || panelElement.parentElement.scrollLeft === targetScrollLeft) {
-    // No scrolling, hide others
-    for (const sibling of otherPanels) TabPanel.setHidden(sibling, true);
-    return;
-  }
-  if (scrollToPanel && panelElement) {
-    if (panelIndex == null) {
-      tabContentElement.removeAttribute('mdw-target-index');
-    } else {
-      tabContentElement.setAttribute('mdw-target-index', panelIndex.toString(10));
-    }
-    scrollToElement(panelElement, scrollToPanel === 'smooth', isPageRtl);
-  }
-}
-
-/**
- * @param {Element} tabContentElement
- * @return {void}
- */
-export function attach(tabContentElement) {
-  tabContentElement.addEventListener('scroll', onTabContentScroll, { passive: true });
-  for (const element of tabContentElement.getElementsByClassName('mdw-tab__panel')) {
-    TabPanel.attach(element);
-  }
-  tabContentElement.addEventListener('keydown', onKeyDown);
-}
-
-/**
- * @param {Element} tabContentElement
- * @return {void}
- */
-export function detach(tabContentElement) {
-  tabContentElement.removeEventListener('keydown', onKeyDown);
-  tabContentElement.removeEventListener('scroll', onTabContentScroll);
-  for (const element of tabContentElement.getElementsByClassName('mdw-tab__panel')) {
-    TabPanel.detach(element);
-  }
-}

package/components/tab/index.js

@@ -1,257 +0,0 @@
-import {
-  dispatchDomEvent,
-} from '../../core/dom.js';
-
-import * as TabContent from './content.js';
-import * as TabItem from './item.js';
-import * as TabList from './list.js';
-import * as TabPanel from './panel.js';
-
-const RESIZE_WAIT_FRAMES = 5;
-
-export const SELECTED_INDEX_CHANGE_EVENT = 'mdw:tab-selectedindexchange';
-
-/**
- * @param {Element} tabElement
- * @return {void}
- */
-export function onResize(tabElement) {
-  let stage = 0;
-  tabElement.setAttribute('mdw-resize-stage', stage.toString());
-  /** @return {void} */
-  function performResize() {
-    if (!tabElement.hasAttribute('mdw-resize-stage')) {
-      // Skip resize
-      return;
-    }
-    const attrStage = tabElement.getAttribute('mdw-resize-stage');
-    if (attrStage !== stage.toString()) {
-      // Off-sync due to another resize event
-      return;
-    }
-    stage += 1;
-    tabElement.setAttribute('mdw-resize-stage', stage.toString());
-    if (stage === RESIZE_WAIT_FRAMES) {
-      const tabContentElement = /** @type {HTMLElement} */ (tabElement.getElementsByClassName('mdw-tab__content')[0]);
-      if (tabContentElement) {
-        /** @type {HTMLElement} */
-        const relatedPanel = (tabContentElement.querySelector('.mdw-tab__panel[aria-expanded="true"]'));
-        if (relatedPanel) {
-          TabContent.selectPanel(tabContentElement, relatedPanel, true);
-        }
-      }
-    } else if (stage === RESIZE_WAIT_FRAMES * 2) {
-      const tabListElement = /** @type {HTMLElement} */ (tabElement.getElementsByClassName('mdw-tab__list')[0]);
-      if (tabListElement) {
-        /** @type {HTMLElement} */
-        const relatedItem = (tabListElement.querySelector('.mdw-tab__item[aria-selected="true"]'));
-        if (relatedItem) {
-          TabList.setIndicatorPosition(tabListElement, relatedItem, 0);
-        }
-      }
-      tabElement.removeAttribute('mdw-resize-stage');
-      return;
-    }
-
-    requestAnimationFrame(performResize);
-  }
-  requestAnimationFrame(performResize);
-}
-
-/**
- * @param {HTMLElement} tabElement
- * @param {number} index
- * @return {void}
- */
-function updateSelectedIndex(tabElement, index) {
-  const currentIndex = tabElement.getAttribute('mdw-selected-index');
-  if (currentIndex == null || currentIndex === index.toString()) {
-    return;
-  }
-  tabElement.setAttribute('mdw-selected-index', index.toString());
-  dispatchDomEvent(tabElement, SELECTED_INDEX_CHANGE_EVENT, { value: index });
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-export function onTabItemSelectedChange(event) {
-  if (event.detail.value !== 'true') {
-    return;
-  }
-  const tabElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const tabItemElement = /** @type {HTMLElement} */ (event.target);
-  const tabListElement = /** @type {HTMLElement} */ (tabElement.getElementsByClassName('mdw-tab__list')[0]);
-  if (!tabListElement) {
-    return;
-  }
-
-  const tabContentElement = /** @type {HTMLElement} */ (tabElement.getElementsByClassName('mdw-tab__content')[0]);
-  const tabItemIndex = TabList.getTabItemIndex(tabListElement, tabItemElement);
-  if (tabItemIndex === -1) {
-    return;
-  }
-  if (tabContentElement) {
-    const hasNoScroll = tabContentElement.hasAttribute('mdw-no-scroll');
-    if (!hasNoScroll) {
-      TabContent.selectPanel(tabContentElement, tabItemIndex, 'smooth');
-      return;
-    }
-    TabContent.selectPanel(tabContentElement, tabItemIndex, true);
-  }
-  TabList.setIndicatorPosition(tabListElement, tabItemElement, 0, true);
-  if (!tabContentElement) {
-    updateSelectedIndex(tabElement, tabItemIndex);
-  }
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-export function onTabContentScroll(event) {
-  const tabElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const { detail } = event;
-  if (!detail.forceSelection && tabElement.hasAttribute('mdw-resize-stage')) {
-    return;
-  }
-  const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];
-  if (tabListElement) {
-    TabList.setIndicatorPosition(
-      tabListElement,
-      detail.leftPanelIndex,
-      detail.visibilityPercentage,
-    );
-  }
-  if (detail.updateSelected) {
-    updateSelectedIndex(tabElement, detail.leftPanelIndex);
-  }
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-export function onTabPanelExpandedChange(event) {
-  if (event.detail.value !== 'true') {
-    return;
-  }
-  const tabElement = /** @type {HTMLElement} */ (event.currentTarget);
-  if (tabElement.hasAttribute('mdw-resize-stage')) {
-    return;
-  }
-  let index = 0;
-  const tabPanelElement = /** @type {HTMLElement} */ (event.target);
-  let sibling = tabPanelElement.previousElementSibling;
-  while (sibling) {
-    index += 1;
-    sibling = sibling.previousElementSibling;
-  }
-  const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];
-  if (tabListElement) {
-    TabList.selectItemAtIndex(tabListElement, index, false);
-  }
-}
-
-/**
- * @param {Element} tabElement
- * @return {void}
- */
-export function attach(tabElement) {
-  const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];
-  if (tabListElement) {
-    TabList.attach(tabListElement);
-  }
-
-  const tabContentElement = tabElement.getElementsByClassName('mdw-tab__content')[0];
-  if (tabContentElement) {
-    TabContent.attach(tabContentElement);
-  }
-
-  tabElement.addEventListener(
-    TabContent.SCROLL_EVENT,
-    onTabContentScroll,
-    { passive: true },
-  );
-  tabElement.addEventListener(
-    TabItem.SELECTED_CHANGE_EVENT,
-    onTabItemSelectedChange,
-    { passive: true },
-  );
-  tabElement.addEventListener(
-    TabPanel.EXPANDED_CHANGE_EVENT,
-    onTabPanelExpandedChange,
-    { passive: true },
-  );
-
-  /** @type {HTMLCollectionOf<Element>|Element[]} */
-  const items = (tabListElement && tabListElement.getElementsByClassName('mdw-tab__item')) || [];
-  /** @type {HTMLCollectionOf<Element>|Element[]} */
-  const panels = (tabContentElement && tabContentElement.getElementsByClassName('mdw-tab__panel')) || [];
-
-  let selectedItem;
-  let selectedPanel;
-  let selectedIndex;
-  [...items].some((itemElement, index) => {
-    if (itemElement.getAttribute('aria-selected') === 'true') {
-      selectedItem = itemElement;
-      selectedPanel = panels[index];
-      selectedIndex = index;
-      return true;
-    }
-    return false;
-  });
-  if (selectedIndex == null) {
-    [...panels].some((panelElement, index) => {
-      if (panelElement.getAttribute('aria-expanded') === 'true') {
-        selectedPanel = panelElement;
-        selectedItem = items[index];
-        selectedIndex = index;
-        return true;
-      }
-      return false;
-    });
-  }
-  if (!selectedItem && items.length) {
-    selectedItem = items[0];
-    selectedIndex = 0;
-  }
-  if (!selectedPanel && panels.length) {
-    selectedPanel = panels[0];
-    selectedIndex = 0;
-  }
-  if (selectedItem) {
-    TabItem.setSelected(selectedItem, true);
-  }
-  if (selectedPanel) {
-    TabPanel.setHidden(selectedPanel, false);
-    TabPanel.setExpanded(selectedPanel, true);
-  }
-  if (selectedIndex != null) {
-    tabElement.setAttribute('mdw-selected-index', selectedIndex.toString());
-  }
-  onResize(tabElement);
-}
-
-/**
- * @param {Element} tabElement
- * @return {void}
- */
-export function detach(tabElement) {
-  const tabListElement = tabElement.getElementsByClassName('mdw-tab__list')[0];
-  if (tabListElement) {
-    TabList.detach(tabListElement);
-  }
-
-  const tabContentElement = tabElement.getElementsByClassName('mdw-tab__content')[0];
-  if (tabContentElement) {
-    TabContent.detach(tabContentElement);
-  }
-
-  tabElement.removeEventListener(TabPanel.EXPANDED_CHANGE_EVENT, onTabPanelExpandedChange);
-  tabElement.removeEventListener(TabContent.SCROLL_EVENT, onTabContentScroll);
-  tabElement.removeEventListener(TabItem.SELECTED_CHANGE_EVENT, onTabItemSelectedChange);
-  tabElement.removeAttribute('mdw-resize-stage');
-  tabElement.removeAttribute('mdw-selected-index');
-}

package/components/tab/index.scss

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