@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/ListSelect.js

@@ -0,0 +1,206 @@
+import { constructHTMLOptionsCollectionProxy } from '../dom/ HTMLOptionsCollectionProxy.js';
+import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
+import KeyboardNavMixin from '../mixins/KeyboardNavMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+
+import List from './List.js';
+import ListOption from './ListOption.js';
+import styles from './ListSelect.css' assert { type: 'css' };
+
+/** @implements {HTMLSelectElement} */
+export default class ListSelect extends List
+  .mixin(StateMixin)
+  .mixin(FormAssociatedMixin)
+  .mixin(KeyboardNavMixin) {
+  static {
+    this.autoRegister('mdw-list-select');
+    this.css(styles);
+    this.on({
+      disabledStateChanged(oldValue, newValue) {
+        this._kbdFocusable = !newValue;
+        this.tabIndex = newValue ? -1 : 0;
+      },
+      multipleChanged(oldValue, newValue) {
+        this.updateAriaProperty('ariaMultiSelectable', newValue ? 'true' : 'false');
+      },
+    });
+  }
+
+  /** @type {HTMLCollectionOf<ListOption> & HTMLOptionsCollection} */
+  _optionsCollection = null;
+
+  constructor() {
+    super();
+    if (!this.hasAttribute('tabindex')) {
+      this.tabIndex = 0;
+    }
+    this.refs.slot.addEventListener('slotchange', this.onSlotChange);
+    this.addEventListener('keydown', this.onControlKeydown);
+    this.addEventListener('click', this.onListSelectClick);
+  }
+
+  * _selectedOptionsGenerator() {
+    for (const el of this.options) {
+      if (!el.selected) continue;
+      yield el;
+    }
+  }
+
+  /**
+   * @param {Event} event
+   * @this {HTMLSlotElement}
+   * @return {void}
+   */
+  onSlotChange(event) {
+    /** @type {{host:ListSelect}} */ // @ts-ignore Coerce
+    const { host } = this.getRootNode();
+    host.refreshTabIndexes();
+    let index = 0;
+    for (const el of host.options) {
+      el._index = index++;
+    }
+  }
+
+  /**
+   * @param {KeyboardEvent} event
+   * @this {ListSelect}
+   * @return {void}
+   */
+  onControlKeydown(event) {
+    if (event.key === 'Spacebar' || event.key === ' ') {
+      const target = event.target;
+      if (!(target instanceof ListOption)) return;
+      event.stopPropagation();
+      event.preventDefault();
+      this.onListSelectClick.call(this, event);
+    }
+  }
+
+  /**
+   * @param {MouseEvent|KeyboardEvent} event
+   * @this {ListSelect}
+   * @return {void}
+   */
+  onListSelectClick(event) {
+    console.log('onListSelectClick');
+    const target = event.target;
+    if (!(target instanceof ListOption)) return;
+    event.stopPropagation();
+    if (target.disabledState) return;
+
+    // Perform unselect
+    if (target.selected) {
+      if (this.multiple) {
+        const selections = [...this.selectedOptions];
+        if (this.required && selections.length === 1) return;
+        if (selections.length === 0) {
+          console.warn('impossible??');
+        }
+        target.selected = false;
+        let firstSelection = selections.shift();
+        if (firstSelection === target) {
+          // Get new first selection (or undefined)
+          firstSelection = selections.shift();
+        }
+        this._value = firstSelection?.value ?? '';
+        return;
+      }
+      if (this.required) return;
+      target.selected = false;
+      this._value = '';
+      return;
+    }
+
+    if (this.multiple) {
+      // Skip ctrlKey requirement
+      target.selected = true;
+      this._value = this.selectedOptions.next().value;
+      return;
+    }
+
+    for (const el of this.options) {
+      el.selected = el === target;
+    }
+    this._value = target.value;
+  }
+
+  formResetCallback() {
+    // TODO: Reset dirty on options
+    super.formResetCallback();
+  }
+
+  get options() {
+    if (!this._optionsCollection) {
+      this._optionsCollection = constructHTMLOptionsCollectionProxy({
+        host: this,
+        collection: this.getElementsByTagName(ListOption.elementName),
+        OptionConstructor: ListOption,
+        GroupConstructor: ListOption,
+      });
+    }
+    return this._optionsCollection;
+  }
+
+  get selectedOptions() {
+    return this._selectedOptionsGenerator();
+  }
+
+  // @ts-ignore @override
+  get type() { return 'select'; }
+
+  /** @override */
+  get kbdNavQuery() { return ListOption.elementName; }
+
+  // @ts-ignore @override
+  get length() {
+    return this.options.length;
+  }
+
+  get selectedIndex() {
+    return this.options.selectedIndex;
+  }
+
+  set selectedIndex(value) {
+    this.options.selectedIndex = value;
+    this._value = (this.options.item(value)?.value) ?? '';
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  /** @param {string} v */
+  set value(v) {
+    for (const el of this.options) {
+      el.selected = (el.value === v);
+    }
+    this._value = v;
+  }
+
+  get add() { return this.options.add; }
+
+  get item() { return this.options.item; }
+
+  get namedItem() { return this.options.namedItem; }
+
+  * [Symbol.iterator]() {
+    for (const el of this.options) {
+      yield el;
+    }
+  }
+
+  get kbdNavFocusableWhenDisabled() { return true; }
+}
+
+// https://html.spec.whatwg.org/multipage/form-elements.html#htmlselectelement
+
+// [CEReactions] attribute DOMString autocomplete;
+// ListSelect.prototype.disabled = ListSelect.prop('disabled', { type: 'boolean' });
+// readonly attribute HTMLFormElement? form;
+ListSelect.prototype.multiple = ListSelect.prop('multiple', { type: 'boolean' });
+// [CEReactions] attribute boolean multiple;
+// [CEReactions] attribute DOMString name;
+// [CEReactions] attribute boolean required;
+ListSelect.prototype.size = ListSelect.prop('size', { type: 'integer', empty: 0 });
+ListSelect.prototype._ariaRole = 'listbox';
+ListSelect.prototype.delegatesFocus = true;

package/components/Menu.css

@@ -0,0 +1,171 @@
+/* https://m3.material.io/components/menus/specs */
+
+:host {
+  --mdw-menu__transform-origin-inline-start: left;
+  --mdw-menu__transform-origin-inline-end: right;
+  /* Normal */
+  --mdw-menu__transform-origin-x: var(--mdw-menu__transform-origin-inline-start);
+  /* Down */
+  --mdw-menu__transform-origin-y: top;
+  --mdw-menu__inline-base: 56px;
+  --mdw-menu__size: 2;
+  --mdw-bg: var(--mdw-color__surface);
+  --mdw-ink: var(--mdw-color__on-surface);
+  position: absolute;
+  /* Default position is bottom */
+  /* Default direction is start */
+  inset-block: 100% auto;
+  inset-inline: auto 0;
+
+  display: block;
+  /* Hide scrollbar */
+  -ms-overflow-style: none;
+  /* Scroll mask */
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+
+  pointer-events: none;
+
+  transform-origin: var(--mdw-menu__transform-origin-x) var(--mdw-menu__transform-origin-y);
+
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: none;
+  transition-timing-function: motion.$decelerateEasing;
+}
+
+:host(::after) {
+  content: '';
+
+  display: block;
+
+  block-size: 200%;
+  inline-size: 200%;
+}
+
+:host(::-webkit-scrollbar) {
+  display: none;
+}
+
+dialog {
+  position: fixed;
+  inset: 0;
+
+  box-sizing: border-box;
+  block-size:100%;
+  max-block-size: none;
+  inline-size:100%;
+  max-inline-size: none;
+  margin: 0;
+  border: none;
+  padding: 0;
+
+  opacity: 0;
+  visibility: hidden;
+  z-index: 24;
+
+  background-color: transparent;
+
+  transition: none;
+  transition-property: opacity;
+  will-change: opacity;
+}
+
+dialog::backdrop {
+  /** Use scrim instead */
+  display: none;
+}
+
+dialog[aria-hidden="false"],
+dialog:modal {
+  display: block;
+
+  pointer-events: none;
+
+  opacity: 1;
+  visibility: visible;
+
+  transition-duration: var(--mdw-dialog__fade-in-duration);
+  transition-property: opacity;
+  transition-timing-function: var(--mdw-dialog__deceleration-easing);
+}
+
+#scrim {
+  position: fixed;
+  inset: 0;
+
+  overflow-y: scroll;
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+
+  block-size: 100%;
+  inline-size: 100%;
+
+  cursor: default;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: transparent;
+
+  visibility: hidden; /* Only show if [modal] */
+
+  z-index:0;
+}
+
+#form {
+  display: contents;
+}
+
+#scrim::-webkit-scrollbar {
+  display: none;
+}
+
+#scrim::after {
+  content: '';
+
+  display: block;
+
+  block-size: 200%;
+  inline-size: 200%;
+}
+
+#surface {
+  --mdw-shape__size: var(--mdw-shape__extra-small);
+  position: sticky;
+
+  display: inline-flex;
+  flex-direction: column;
+
+  inline-size: calc(var(--mdw-menu__size) * var(--mdw-menu__inline-base));
+  min-inline-size: calc(var(--mdw-menu__inline-base) * 2);
+  max-inline-size: 100vw;
+  flex:1;
+
+  pointer-events: auto;
+  /* background-color: rgb(var(--mdw-color__surface)); */
+  /* color: rgb(var(--mdw-color__on-surface)); */
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  will-change: top, left;
+}
+
+@supports(-moz-appearance: none) {
+  #surface {
+    position: absolute;
+  }
+}
+
+#scroller {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+
+  flex: 1;
+
+  padding-block: 8px;
+}
+
+#scrim[modal] {
+  visibility: visible;
+}