@shortfuse/materialdesignweb 0.7.1 → 0.7.4

package/components/TextArea.js

@@ -1,22 +1,218 @@
-import CustomElement from '../core/CustomElement.js';
+import CustomElement, { cloneAttributeCallback } from '../core/CustomElement.js';
 import ControlMixin from '../mixins/ControlMixin.js';
 import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import TextFieldMixin from '../mixins/TextFieldMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-/** @implements {HTMLTextAreaElement} */
-export default class TextArea extends CustomElement
+const DOMString = { nullParser: String, value: '' };
+
+/**
+ * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element
+ * -implements {HTMLTextAreaElement}
+ */
+export default CustomElement
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(ControlMixin)
   .mixin(TextFieldMixin)
-  .mixin(ResizeObserverMixin) {
-  static { this.autoRegister('mdw-textarea'); }
+  .mixin(ResizeObserverMixin)
+  .extend()
+  .set({
+    supportsCSSLineHeightUnit: CSS.supports('height', '1lh'),
+    type: 'textarea',
+  })
+  .overrides({
+    controlTagName: 'textarea',
+    controlVoidElement: false,
+  })
+  .observe({
+    fixed: { type: 'boolean' },
+    minRows: { attr: 'minrows', type: 'integer', nullable: false },
+    maxRows: { attr: 'maxrows', type: 'integer', nullable: false },
+    _lineHeight: 'string',
+    cols: { type: 'integer', empty: 0 },
+    dirName: { attr: 'dirname', ...DOMString },
+    maxLength: { attr: 'maxlength', type: 'integer', empty: 0 },
+    minLength: { attr: 'minlength', type: 'integer', empty: 0 },
+    placeholder: DOMString,
+    rows: { type: 'integer', empty: 1 },
+    wrap: DOMString,
+    // Not in spec, but plays nice with HTML linters
+    defaultValueAttr: { attr: 'value', ...DOMString },
+  })
+  .define({
+    _textarea() { return /** @type {HTMLTextAreaElement} */ (this.refs.control); },
+  })
+  .define({
+    defaultValue: {
+      get() { return this._textarea.defaultValue; },
+      set(value) {
+        const previousValue = this._textarea.defaultValue;
+        this._textarea.defaultValue = value;
+        const newValue = this._textarea.defaultValue;
+        if (previousValue !== newValue) {
+          this.propChangedCallback('defaultValue', previousValue, newValue);
+        }
+        this.textContent = this._textarea.defaultValue;
+      },
+    },
+    textLength() { return this._textarea.textLength; },
+    select() { return this._textarea.select; },
+
+    selectionDirection: {
+      get() { return this._textarea.selectionDirection; },
+      set(value) { this._textarea.selectionDirection = value; },
+    },
+
+    selectionStart: {
+      get() { return this._textarea.selectionStart; },
+      set(value) { this._textarea.selectionStart = value; },
+    },
+
+    selectionEnd: {
+      get() { return this._textarea.selectionEnd; },
+      set(value) { this._textarea.selectionEnd = value; },
+    },
+
+    setRangeText() { return this._textarea.setRangeText; },
+
+    setSelectionRange() { return this._textarea.setSelectionRange; },
+
+  })
+  .methods({
+
+    /** @return {number} */
+    resize() {
+      const textarea = this._textarea;
+      textarea.style.removeProperty('height');
 
-  static {
-    // eslint-disable-next-line no-unused-expressions
-    this.css`
+      // if (this.placeholder) textarea.removeAttribute('placeholder');
+
+      if (!this.supportsCSSLineHeightUnit) {
+        const { lineHeight } = window.getComputedStyle(textarea);
+        this._lineHeight = lineHeight;
+      }
+
+      if (this.minRows > 1 && textarea.rows < this.minRows) {
+        textarea.rows = this.minRows;
+      } else if (this.maxRows && textarea.rows > this.maxRows) {
+        textarea.rows = this.maxRows;
+      }
+      if (!this.fixed) {
+        while (textarea.scrollHeight > textarea.clientHeight) {
+          if (this.maxRows && textarea.rows === this.maxRows) break;
+          const lastClientHeight = textarea.clientHeight;
+          textarea.rows++;
+          if (lastClientHeight === textarea.clientHeight) {
+            textarea.rows--;
+            break;
+          }
+        }
+        while (textarea.scrollHeight === textarea.clientHeight) {
+          if (textarea.rows === 1) break;
+          if (this.minRows > 1 && textarea.rows === this.minRows) break;
+          const lastClientHeight = textarea.clientHeight;
+          textarea.rows--;
+          if ((lastClientHeight === textarea.clientHeight)
+        || (textarea.scrollHeight > textarea.clientHeight)) {
+            textarea.rows++;
+            break;
+          }
+        }
+      }
+
+      if (textarea.selectionEnd === textarea.value.length) {
+        textarea.scrollTop = textarea.scrollHeight;
+      }
+
+      this.rows = textarea.rows;
+      // if (this.placeholder) textarea.setAttribute('placeholder', this.placeholder);
+      return this.rows;
+    },
+
+    /** @param {ResizeObserverEntry} entry */
+    onResizeObserved(entry) {
+      super.onResizeObserved(entry);
+      if (this.matches(':active')) return;
+      this.resize();
+    },
+  })
+  .childEvents({
+    slot: {
+      /**
+       * @param {Event & {currentTarget:HTMLSlotElement}} event
+       * @return {void}
+       */
+      slotchange({ currentTarget }) {
+        const textarea = /** @type {HTMLTextAreaElement} */ (this.refs.control);
+        const previousValue = textarea.defaultValue;
+        textarea.replaceChildren(
+          ...currentTarget.assignedNodes().map((child) => child.cloneNode(true)),
+        );
+
+        const newValue = textarea.defaultValue;
+        if (previousValue !== newValue) {
+          this.propChangedCallback('defaultValue', previousValue, newValue);
+        }
+      },
+    },
+    control: {
+      input() {
+        this.resize();
+      },
+    },
+  })
+  .on({
+    composed() {
+      const { control } = this.refs;
+      // Spec
+      control.removeAttribute('placeholder');
+      control.setAttribute('rows', '{rows}');
+
+      // Custom
+      control.setAttribute('input-prefix', '{inputPrefix}');
+      control.setAttribute('input-suffix', '{inputSuffix}');
+      control.setAttribute('minrows', '{minRows}');
+      control.setAttribute('fixed', '{fixed}');
+      control.setAttribute('icon', '{icon}');
+      control.setAttribute('maxrows', '{maxRows}');
+    },
+    defaultValueAttrChanged(oldValue, newValue) {
+      this.defaultValue = newValue;
+    },
+    defaultValueChanged() {
+      this._value = this._textarea.value;
+      this.resize();
+    },
+    _lineHeightChanged(oldValue, newValue) {
+      this.refs.label.style.setProperty('--line-height', newValue);
+    },
+    minRowsChanged(oldValue, newValue) {
+      this.refs.label.style.setProperty('--min-rows', `${newValue || 'none'}`);
+      this.resize();
+    },
+    maxRowsChanged(oldValue, newValue) {
+      this.refs.label.style.setProperty('--max-rows', `${newValue || 'none'}`);
+      this.resize();
+    },
+    rowsChanged() {
+      this.resize();
+    },
+    _formResetChanged(oldValue, newValue) {
+      if (!newValue) return;
+      this._textarea.value = this.defaultValue;
+      this._value = this._textarea.value;
+    },
+    attrs: {
+      cols: cloneAttributeCallback('cols', 'control'),
+      dirname: cloneAttributeCallback('dirname', 'control'),
+      minlength: cloneAttributeCallback('minlength', 'control'),
+      maxlength: cloneAttributeCallback('maxlength', 'control'),
+      placeholder: cloneAttributeCallback('placeholder', 'control'),
+    },
+  })
+  .css`
       /* https://m3.material.io/components/text-fields/specs */
 
       :host {
@@ -110,214 +306,5 @@ export default class TextArea extends CustomElement
         /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
         resize: none;
       }
-
-    `;
-    this.childEvents({ slot: { slotchange: 'onSlotChange' } });
-    this.on({
-      composed() {
-        const { control } = this.refs;
-        control.setAttribute('input-prefix', '{input-prefix}');
-        control.setAttribute('input-suffix', '{input-suffix}');
-        control.setAttribute('minrows', '{minrows}');
-        control.setAttribute('fixed', '{fixed}');
-        control.setAttribute('icon', '{icon}');
-        control.setAttribute('maxrows', '{maxrows}');
-      },
-      defaultValueAttrChanged(oldValue, newValue) {
-        this.defaultValue = newValue;
-      },
-      defaultValueChanged() {
-        this._value = this.#textarea.value;
-        this.resize();
-      },
-      _maxHeightChanged(oldValue, newValue) {
-        this.#textarea.style.setProperty('max-height', newValue);
-      },
-      _lineHeightChanged(oldValue, newValue) {
-        this.refs.label.style.setProperty('--line-height', newValue);
-      },
-      minRowsChanged(oldValue, newValue) {
-        this.refs.label.style.setProperty('--min-rows', `${newValue || 'none'}`);
-        this.resize();
-      },
-      maxRowsChanged(oldValue, newValue) {
-        this.refs.label.style.setProperty('--max-rows', `${newValue || 'none'}`);
-        this.resize();
-      },
-      rowsChanged() {
-        this.resize();
-      },
-    });
-  }
-
-  static supportsCSSLineHeightUnit = CSS.supports('height', '1lh');
-
-  static controlTagName = 'textarea';
-
-  static controlVoidElement = false;
-
-  static clonedContentAttributes = [
-    ...super.clonedContentAttributes,
-    'cols',
-    'dirname',
-    'maxlength',
-    'minlength',
-    'placeholder',
-    'rows',
-  ];
-
-  #updatingSlot = false;
-
-  #textarea = /** @type {HTMLTextAreaElement} */ (this.refs.control);
-
-  static {
-    if (TextArea.supportsCSSLineHeightUnit) {
-      this.childEvents({
-        control: {
-          input() {
-            this.resize();
-          },
-        },
-      });
-    }
-  }
-
-  /**
-   * @param {Event & {currentTarget:HTMLSlotElement}} event
-   * @return {void}
-   */
-  onSlotChange({ currentTarget }) {
-    const textarea = /** @type {HTMLTextAreaElement} */ (this.refs.control);
-    const previousValue = textarea.defaultValue;
-    textarea.replaceChildren(
-      ...currentTarget.assignedNodes().map((child) => child.cloneNode(true)),
-    );
-
-    const newValue = textarea.defaultValue;
-    if (previousValue !== newValue) {
-      this.propChangedCallback('defaultValue', previousValue, newValue);
-    }
-  }
-
-  /** @return {number} */
-  resize() {
-    const textarea = this.#textarea;
-    textarea.style.removeProperty('height');
-
-    // if (this.placeholder) textarea.removeAttribute('placeholder');
-
-    if (!TextArea.supportsCSSLineHeightUnit) {
-      const { lineHeight } = window.getComputedStyle(textarea);
-      this._lineHeight = lineHeight;
-    }
-
-    if (this.minRows > 1 && textarea.rows < this.minRows) {
-      textarea.rows = this.minRows;
-    } else if (this.maxRows && textarea.rows > this.maxRows) {
-      textarea.rows = this.maxRows;
-    }
-    if (!this.fixed) {
-      while (textarea.scrollHeight > textarea.clientHeight) {
-        if (this.maxRows && textarea.rows === this.maxRows) break;
-        const lastClientHeight = textarea.clientHeight;
-        textarea.rows++;
-        if (lastClientHeight === textarea.clientHeight) {
-          textarea.rows--;
-          break;
-        }
-      }
-      while (textarea.scrollHeight === textarea.clientHeight) {
-        if (textarea.rows === 1) break;
-        if (this.minRows > 1 && textarea.rows === this.minRows) break;
-        const lastClientHeight = textarea.clientHeight;
-        textarea.rows--;
-        if ((lastClientHeight === textarea.clientHeight)
-        || (textarea.scrollHeight > textarea.clientHeight)) {
-          textarea.rows++;
-          break;
-        }
-      }
-    }
-
-    if (textarea.selectionEnd === textarea.value.length) {
-      textarea.scrollTop = textarea.scrollHeight;
-    }
-
-    this.rows = textarea.rows;
-    // if (this.placeholder) textarea.setAttribute('placeholder', this.placeholder);
-    return this.rows;
-  }
-
-  formResetCallback() {
-    this.#textarea.value = this.defaultValue;
-    this._value = this.#textarea.value;
-    super.formResetCallback();
-  }
-
-  get updatingSlot() { return this.#updatingSlot; }
-
-  get defaultValue() {
-    return this.#textarea.defaultValue;
-  }
-
-  set defaultValue(value) {
-    const previousValue = this.#textarea.defaultValue;
-    this.#textarea.defaultValue = value;
-    if (previousValue !== this.#textarea.defaultValue) {
-      this.propChangedCallback('defaultValue', previousValue, this.defaultValue);
-    }
-    this.textContent = this.#textarea.defaultValue;
-  }
-
-  // @ts-ignore @override
-
-  get type() { return 'textarea'; }
-
-  get textLength() { return this.#textarea.textLength; }
-
-  get select() { return this.#textarea.select; }
-
-  get selectionDirection() { return this.#textarea.selectionDirection; }
-
-  set selectionDirection(value) { this.#textarea.selectionDirection = value; }
-
-  get selectionStart() { return this.#textarea.selectionStart; }
-
-  set selectionStart(value) { this.#textarea.selectionStart = value; }
-
-  get selectionEnd() { return this.#textarea.selectionEnd; }
-
-  set selectionEnd(value) { this.#textarea.selectionEnd = value; }
-
-  get setRangeText() { return this.#textarea.setRangeText; }
-
-  get setSelectionRange() { return this.#textarea.setSelectionRange; }
-
-  /** @param {ResizeObserverEntry} entry */
-  onResizeObserved(entry) {
-    super.onResizeObserved(entry);
-    this.resize();
-  }
-}
-
-TextArea.propList.delete('type');
-
-TextArea.prototype._maxHeight = TextArea.prop('_maxHeight');
-TextArea.prototype.fixed = TextArea.prop('fixed', { type: 'boolean' });
-TextArea.prototype.minRows = TextArea.prop('minRows', { attr: 'minrows', type: 'integer', empty: 0 });
-TextArea.prototype.maxRows = TextArea.prop('maxRows', { attr: 'maxrows', type: 'integer', empty: 0 });
-TextArea.prototype._lineHeight = TextArea.prop('_lineHeight');
-
-// https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element
-
-const DOMString = { nullParser: String };
-TextArea.prototype.cols = TextArea.prop('cols', { type: 'integer', empty: 0 });
-TextArea.prototype.dirName = TextArea.prop('dirName', { attr: 'dirname', ...DOMString });
-TextArea.prototype.maxLength = TextArea.prop('maxLength', { attr: 'maxlength', type: 'integer', empty: 0 });
-TextArea.prototype.minLength = TextArea.prop('minLength', { attr: 'minlength', type: 'integer', empty: 0 });
-TextArea.prototype.placeholder = TextArea.prop('placeholder', DOMString);
-TextArea.prototype.rows = TextArea.prop('rows', { type: 'integer', empty: 1 });
-TextArea.prototype.wrap = TextArea.prop('wrap', DOMString);
-
-// Not in spec, but plays nice with HTML linters
-TextArea.prototype.defaultValueAttr = TextArea.prop('defaultValueAttr', { attr: 'value', ...DOMString });
+  `
+  .autoRegister('mdw-textarea');

package/core/CustomElement.js

@@ -16,6 +16,22 @@ function superOf(instance) {
   return superOfStatic.prototype;
 }
 
+/**
+ * Clone attribute
+ * @param {string} name
+ * @param {string} target
+ * @return {(oldValue:string, newValue:string, element: CustomElement) => void}
+ */
+export function cloneAttributeCallback(name, target) {
+  return (oldValue, newValue, element) => {
+    if (newValue == null) {
+      element.refs[target].removeAttribute(name);
+    } else {
+      element.refs[target].setAttribute(name, newValue);
+    }
+  };
+}
+
 const EVENT_PREFIX_REGEX = /^([*1~]+)?(.*)$/;
 
 /**
@@ -365,6 +381,7 @@ export default class CustomElement extends ICustomElement {
   /**
    * Define properties on instances via Object.defineProperties().
    * Automatically sets property non-enumerable if name begins with `_`.
+   * Functions will be remapped as getters
    * @type {typeof ICustomElement.define}
    */
   static define(props) {
@@ -546,10 +563,11 @@ export default class CustomElement extends ICustomElement {
   /** @type {typeof ICustomElement['onAttributeChanged']} */
   static onAttributeChanged(options) {
     for (const [name, callback] of Object.entries(options)) {
-      let array = this.attributeChangedCallbacks.get(name);
+      const lcName = name.toLowerCase();
+      let array = this.attributeChangedCallbacks.get(lcName);
       if (!array) {
         array = [];
-        this.attributeChangedCallbacks.set(name, array);
+        this.attributeChangedCallbacks.set(lcName, array);
       }
       array.push(callback);
     }
@@ -608,14 +626,14 @@ export default class CustomElement extends ICustomElement {
 
   /** @type {InstanceType<typeof ICustomElement>['propChangedCallback']} */
   propChangedCallback(name, oldValue, newValue, changes = newValue) {
+    this.render({ [name]: changes });
+
     const callbacks = this.static.propChangedCallbacks.get(name);
     if (callbacks) {
       for (const callback of callbacks) {
         callback.call(this, oldValue, newValue, changes, this);
       }
     }
-
-    this.render({ [name]: changes });
   }
 
   /**
@@ -624,7 +642,7 @@ export default class CustomElement extends ICustomElement {
    * @param {string|null} newValue
    */
   attributeChangedCallback(name, oldValue, newValue) {
-    const callbacks = this.static.attributeChangedCallbacks.get(name);
+    const callbacks = this.static.attributeChangedCallbacks.get(name.toLowerCase());
     if (callbacks) {
       for (const callback of callbacks) {
         callback.call(this, oldValue, newValue, this);

package/core/ICustomElement.d.ts

@@ -272,17 +272,20 @@ export declare const ICustomElement: {
       },
     ): T1;
 
-  onAttributeChanged<T extends typeof ICustomElement>
+  onAttributeChanged<
+    T1 extends typeof ICustomElement,
+    T2 extends InstanceType<T1>
+    >
     (
-      this: T,
+      this: T1,
       options: {
         [x:string]: (
         // eslint-disable-next-line no-shadow
-        this: InstanceType<T>,
+        this: T2,
         oldValue: string,
         newValue: string,
-        element: InstanceType<T>
+        element: T2
         ) => void
       },
-    ): T;
+    ): T1;
 };

package/core/observe.js

@@ -189,8 +189,9 @@ export function parseObserverOptions(name, typeOrOptions, object) {
     changedCallback,
     watchers: options.watchers ?? [],
     values: options.values ?? new WeakMap(),
-    validValues: options.validValues ?? new WeakMap(),
+    computedValues: options.computedValues ?? new WeakMap(),
     attributeChangedCallback: options.attributeChangedCallback,
+    needsSelfInvalidation: options.needsSelfInvalidation ?? new WeakSet(),
   };
 }
 
@@ -293,10 +294,9 @@ export function defineObservableProperty(object, key, options) {
   /**
    * @param {T2} oldValue
    * @param {T2} value
-   * @param {boolean} [commit=false]
    * @return {boolean} changed
    */
-  function detectChange(oldValue, value, commit) {
+  function detectChange(oldValue, value) {
     if (oldValue === value) return false;
     if (config.get) {
       // TODO: Custom getter vs parser
@@ -318,10 +318,6 @@ export function defineObservableProperty(object, key, options) {
       if (config.is.call(this, oldValue, newValue)) return false;
     }
 
-    // Before changing, store old values of properties that will invalidate;
-
-    // Do no set if transient (getter)
-
     config.values.set(this, newValue);
     // console.log(key, 'value.set', newValue);
     config.propChangedCallback?.call(this, key, oldValue, newValue, changes);
@@ -344,27 +340,27 @@ export function defineObservableProperty(object, key, options) {
   function internalSet(value) {
     const oldValue = this[key];
     // console.log(key, 'internalSet', oldValue, '=>', value);
-    detectChange.call(this, oldValue, value, true);
+    detectChange.call(this, oldValue, value);
   }
 
-  /**
-   *
-   */
+  /** @return {void} */
   function onInvalidate() {
-    // console.log(key, 'onInvalidate', '???');
-    const oldValue = config.validValues.get(this);
+    // Current value is now invalidated. Recompute and check if changed
+    const oldValue = config.computedValues.get(this);
     const newValue = this[key];
-    // console.log(key, 'onInvalidate', oldValue, '=>', newValue);
+    // console.debug('observe: onInvalidate called for', key, oldValue, '=>', newValue, this);
+    config.needsSelfInvalidation.delete(this);
     detectChange.call(this, oldValue, newValue);
   }
 
   if (config.get) {
+    // Custom `get` uses computed values.
+    // Invalidate computed value when dependent `prop` changes
     const { props } = observeFunction(config.get.bind(object), object, internalGet.bind(object));
-    // Set of watchers needed
-    // console.log(key, 'invalidates with', props);
     config.watchers.push(
       ...[...props].map((prop) => [prop, onInvalidate]),
     );
+    // TODO: May be able to cache value if props are present
   }
   /** @type {Partial<PropertyDescriptor>} */
   const descriptor = {
@@ -376,8 +372,8 @@ export function defineObservableProperty(object, key, options) {
     get() {
       if (config.get) {
         const newValue = config.get.call(this, this, internalGet.bind(this));
-        // Store value internally. Used by onInvalidate to get previous value
-        config.validValues.set(this, newValue);
+        // Store computed value internally. Used by onInvalidate to get previous value
+        config.computedValues.set(this, newValue);
         return newValue;
       }
       return internalGet.call(this);
@@ -393,10 +389,12 @@ export function defineObservableProperty(object, key, options) {
         return;
       }
       if (config.set) {
+        config.needsSelfInvalidation.add(this);
         const oldValue = this[key];
         config.set.call(this, value, internalSet.bind(this));
         const newValue = this[key];
-        // Invalidate self
+        if (!config.needsSelfInvalidation.has(this)) return;
+        config.needsSelfInvalidation.delete(this);
         detectChange.call(this, oldValue, newValue);
       } else {
         internalSet.call(this, value);

package/core/typings.d.ts

@@ -46,8 +46,9 @@ type ObserverOptions<
   set?: (this:C, value: T2, fn?:(value2: T2) => any) => any,
   attributeChangedCallback?: (this:C, name:string, oldValue: string, newValue: string) => any;
   propChangedCallback?: (this:C, name:string, oldValue: T2, newValue: T2, changes:any) => any;
-  validValues?: WeakMap<C, T2>;
+  computedValues?: WeakMap<C, T2>;
   watchers?: [keyof C, (this:C, ...args:any[]) => any][];
+  needsSelfInvalidation?: WeakSet<C>,
 }
 
 type ObserverConfiguration<