@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/textfield/_theme.scss

@@ -1,11 +1,14 @@
 // https://material.io/archive/guidelines/components/text-fields.html#text-fields-states
 
-@import '../../core/theme/index.scss';
+@use '../../core/theme/_mixins.scss' as theme;
+@use '../../core/_platform.scss' as platform;
 
-$mdw-textfield__theme-values: (
-  text-color:                         $mdw-theme__default-ink,
-  secondary-text-color:               $mdw-theme__medium-ink,
-  disabled-color:                     $mdw-theme__inactive-ink,
+$themeValues: (
+  
+  text-color:                         theme.$foreground,
+  default-text-opacity:               theme.$high-opacity,
+  secondary-text-opacity:             theme.$medium-opacity,
+  disabled-opacity:                   theme.$inactive-opacity,
 
   placeholder-color__focus:           (('foreground-light', 0.42), ('foreground-dark', 0.50)),
   filled-disabled-border-color:       (('foreground-light', 0.10), ('foreground-dark', 0.30)),
@@ -21,11 +24,11 @@ $mdw-textfield__theme-values: (
   selection-opacity:                  (0.08 + 0.12, 0.16 + 0.24),
 ) !default;
 
-@function mdwTextfieldThemeValue($key, $type) {
-  @return mdwGetThemeValue('textfield', $mdw-textfield__theme-values, $key, $type);
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('textfield', $themeValues, $key, $type);
 }
 
-@mixin mdw-textfield__theme-rules($type: 'var') {
+@mixin addThemeRules($type: 'var') {
   .mdw-textfield[mdw-outlined] {
     &:active > .mdw-textfield__input:not(:disabled),
     & > .mdw-textfield__input:not(:disabled):focus {
@@ -41,7 +44,7 @@ $mdw-textfield__theme-values: (
         &:invalid {
           & ~ .mdw-textfield__border,
           & ~ .mdw-textfield__border::before {
-            color: mdwTextfieldThemeValue("warn-color", $type);
+            color: RGBA(getThemeValue("warn-color", $type));
           }
         }
       }
@@ -49,7 +52,7 @@ $mdw-textfield__theme-values: (
   }
 
   .mdw-textfield__error-text {
-    color: mdwTextfieldThemeValue("warn-color", $type);
+    color: RGBA(getThemeValue("warn-color", $type));
   }
 
   .mdw-textfield {
@@ -59,7 +62,7 @@ $mdw-textfield__theme-values: (
     & > .mdw-textfield__input:not(:disabled):focus {
       @if($type == 'var') {
         &::selection {
-          background-color: RGBA(var(--ink-color), mdwTextfieldThemeValue("selection-opacity", $type));
+          background-color: RGBA(var(--mdw-ink), getThemeValue("selection-opacity", $type));
         }
       }
 
@@ -78,67 +81,37 @@ $mdw-textfield__theme-values: (
 
     &:active > .mdw-textfield__input:not(:disabled):invalid,
     & > .mdw-textfield__input:not(:disabled):focus:invalid {
-      caret-color: mdwTextfieldThemeValue("warn-color", $type);
+      caret-color: RGBA(getThemeValue("warn-color", $type));
 
       &::selection {
-        background-color: mdwTextfieldThemeValue("warn-color__selection", $type);
+        background-color: RGBA(getThemeValue("warn-color__selection", $type));
       }
+
       & ~ .mdw-textfield__border {
-        color: mdwTextfieldThemeValue("warn-color", $type);
         border-bottom-color: currentColor;
-        
+        color: RGBA(getThemeValue("warn-color", $type));
       }
+
       & ~ .mdw-textfield__border .mdw-textfield__label {
-        // color: mdwTextfieldThemeValue("warn-color", $type);
+        // color: getThemeValue("warn-color", $type);
       }
 
       & ~ .mdw-textfield__border::after {
-        color: mdwTextfieldThemeValue("warn-color", $type);
+        color: RGBA(getThemeValue("warn-color", $type));
       }
 
     }
   }
 
   .mdw-textfield__signifier,
-  .mdw-textfield__label {
-    color: mdwTextfieldThemeValue("secondary-text-color", $type);
-  }
-
+  .mdw-textfield__label,
   .mdw-textfield__prefix,
   .mdw-textfield__suffix {
-    color: mdwTextfieldThemeValue("secondary-text-color", $type);
-  }
-
-  select.mdw-textfield__input {
-    // Firefox focusring styling workaround
-    // https://dxr.mozilla.org/mozilla-central/source/browser/components/extensions/extension.css
-    .mdw-textfield[mdw-value-empty] > & {
-      color: mdwTextfieldThemeValue("placeholder-color__focus", $type);
-
-      &:focus {
-        color: mdwTextfieldThemeValue("secondary-text-color", $type);
-      }
-
-      &:-moz-focusring {
-        color: transparent;
-        text-shadow: 0 0 0 mdwTextfieldThemeValue("placeholder-color__focus", $type);
-      }
-
-      &:focus:-moz-focusring {
-        color: transparent;
-        text-shadow: 0 0 0 mdwTextfieldThemeValue("secondary-text-color", $type);
-      }
-    }
-
-    &:-moz-focusring {
-      color: transparent;
-      text-shadow: 0 0 0 mdwTextfieldThemeValue("text-color", $type);
-    }
-
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
   }
 
   .mdw-textfield__icon[mdw-dropdown] {
-    color: mdwTextfieldThemeValue("secondary-text-color", $type);
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
   }
 
   .mdw-textfield[mdw-value-empty] > input.mdw-textfield__input:not(:focus) {
@@ -154,21 +127,21 @@ $mdw-textfield__theme-values: (
   }
 
   .mdw-textfield__input::placeholder {
-    color: mdwTextfieldThemeValue("placeholder-color__focus", $type);
+    color: RGBA(getThemeValue("placeholder-color__focus", $type));
   }
 
   .mdw-textfield__input:-ms-input-placeholder {
-    color: mdwTextfieldThemeValue("placeholder-color__focus", $type) !important;
+    color: RGBA(getThemeValue("placeholder-color__focus", $type)) !important;
   }
 
   .mdw-textfield__input::-ms-input-placeholder {
-    color: mdwTextfieldThemeValue("placeholder-color__focus", $type) !important;
+    color: RGBA(getThemeValue("placeholder-color__focus", $type)) !important;
   }
 
   .mdw-textfield__input {
-    color: mdwTextfieldThemeValue("text-color", $type);
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("default-text-opacity", $type));
     @if ($type == 'var') {
-      caret-color: RGBA(var(--ink-color));
+      caret-color: RGBA(var(--mdw-ink));
     } @else {
       caret-color: inherit;
     }
@@ -183,14 +156,14 @@ $mdw-textfield__theme-values: (
       & ~ .mdw-textfield__prefix,
       & ~ .mdw-textfield__suffix,
       & ~ .mdw-textfield__icon {
-        color: mdwTextfieldThemeValue("disabled-color", $type);
+        color: RGBA(getThemeValue("text-color", $type), getThemeValue("disabled-opacity", $type));
       }
     }
 
     // Hover
     &:not(:focus):hover:not(:disabled):not(:active) ~ .mdw-textfield__border,
     &:not(:focus):not(:disabled):not(:active) ~ .mdw-textfield__border:hover {
-      color: mdwTextfieldThemeValue("border-line-color__hover", $type);
+      color: RGBA(getThemeValue("border-line-color__hover", $type));
     }
     
     &:not(:focus) {
@@ -206,18 +179,68 @@ $mdw-textfield__theme-values: (
       }
     }
   }
+
+  select.mdw-textfield__input {
+    // Firefox focusring styling workaround
+    // https://dxr.mozilla.org/mozilla-central/source/browser/components/extensions/extension.css
+    .mdw-textfield[mdw-value-empty] > & {
+      color: RGBA(getThemeValue("placeholder-color__focus", $type));
+
+      &:focus {
+        color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
+      }
+
+      &:-moz-focusring {
+        color: transparent;
+        text-shadow: 0 0 0 RGBA(getThemeValue("placeholder-color__focus", $type));
+      }
+
+      &:focus:-moz-focusring {
+        color: transparent;
+        text-shadow: 0 0 0 RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
+      }
+    }
+
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
+    }
+
+    // On MS Browsers, color rule represents the dropdown popup's foreground color
+    @include platform.ifEdge() {
+      color: #000;
+    }
+    @media screen and (-ms-high-contrast: none) {
+      color: #000;
+    }
+    @media screen and (-ms-high-contrast: active) {
+      color: #fff;
+    }
+    
+
+    // ::ms-value represents the closed state color
+    &::-ms-value {
+      background: transparent;
+      color: RGBA(getThemeValue("text-color", $type), getThemeValue("default-text-opacity", $type));
+    }
+
+    // Dropdown caret
+    &::-ms-expand {
+      display: none;
+    }
+  }
   
   .mdw-textfield__border {
-    color: mdwTextfieldThemeValue("border-line-color", $type);
+    color: RGBA(getThemeValue("border-line-color", $type));
   }
 
   .mdw-textfield__helper-text {
-    color: mdwTextfieldThemeValue("secondary-text-color", $type);
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
   }
 
 
   .mdw-textfield__input:disabled ~ .mdw-textfield__helper-text {
-    color: mdwTextfieldThemeValue("disabled-color", $type);
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("disabled-opacity", $type));
   }
 
   .mdw-textfield__input:focus:invalid ~ .mdw-textfield__helper-text {
@@ -242,35 +265,35 @@ $mdw-textfield__theme-values: (
     }
 
     .mdw-textfield__input:not(:focus) ~ .mdw-textfield__border {
-      color: mdwTextfieldThemeValue("border-line-color", $type);
+      color: RGBA(getThemeValue("border-line-color", $type));
     }
     
     .mdw-textfield__input:disabled ~ .mdw-textfield__border {
-      background-color: mdwTextfieldThemeValue("filled-disabled-background-color", $type);
-      color: mdwTextfieldThemeValue("filled-disabled-border-color", $type);
+      background-color: RGBA(getThemeValue("filled-disabled-background-color", $type));
+      color: RGBA(getThemeValue("filled-disabled-border-color", $type));
     }
 
     &:not([mdw-outlined]) > .mdw-textfield__border {
-      background-color: mdwTextfieldThemeValue("fill-color", $type);
+      background-color: RGBA(getThemeValue("fill-color", $type));
     }
 
     &:not([mdw-outlined]) > .mdw-textfield__input:not(:disabled) {
       & ~ .mdw-textfield__border:hover,
       &:hover ~ .mdw-textfield__border {
-        background-color: mdwTextfieldThemeValue("fill-color__hover", $type);
+        background-color: RGBA(getThemeValue("fill-color__hover", $type));
       }
     }
   }
 }
 
 
-@include mdw-theme__add-component-fallback-rules('light') {
-  @include mdw-textfield__theme-rules('light');
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
 }
-@include mdw-theme__add-component-fallback-rules('dark') {
-  @include mdw-textfield__theme-rules('dark');
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
 }
 
-@include mdw-theme__add-component-variable-rules('textfield', $mdw-textfield__theme-values) {
-  @include mdw-textfield__theme-rules();
+@include theme.addComponentCSSVariableRules('textfield', $themeValues) {
+  @include addThemeRules();
 }

package/components/textfield/index.eta

@@ -0,0 +1,74 @@
+<label <%~ Object.entries({
+  'class': [
+    'mdw-textfield',
+    it?.ink || it?.theme ? 'mdw-theme' : '',
+    it?.labelClass,
+  ].filter(v=>v).join(' '),
+  'mdw-outlined': it?.outlined,
+  'mdw-autosize': it?.autosize,
+  'mdw-ink': it?.ink,
+  ...it?.labelAttributes,
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`
+  }).filter(v=>v).join(' ')-%>>
+
+  <%_ if (it?.signifier) { _%>
+  <div <%~ Object.entries({
+      'class': [
+        'mdw-textfield__signifier',
+        it?.signifier.class,
+      ].join(' '),
+      ...it?.signifier.attributes,
+      }).map(([key, value]) => {
+      if (value === true) return key;
+      if (value === false || value == null) return false;
+      return `${key}="${value}"`;
+    }).filter(v=>v).join(' ')-%>><%~ it?.signifier.body ?? '' %><%= it?.signifier.text ?? '' %></div>
+  <%_ } _%>
+
+  <input <%~ Object.entries({
+    'class': [
+      'mdw-textfield__input',
+      it?.class,
+    ].filter(v=>v).join(' '),
+    'disabled': it?.disabled && it?.disabled !== 'false',
+    'aria-disabled': it?.disabled === true ? 'true' : it?.disabled,
+    'minlength': it?.minlength,
+    'placeholder': it?.placeholder ?? ' ',
+    'required': it?.required,
+    'name': it?.name,
+    'type': it?.type ?? 'text',
+    'value': it?.value,
+    ...it?.attributes,
+    }).map(([key, value]) => {
+      if (value === true) return key;
+      if (value === false || value == null) return false;
+      return `${key}="${value}"`;
+    }).filter(v=>v).join(' ')-%> />
+
+  <%_ _%>
+
+  <div class="mdw-textfield__border">
+    <div class="mdw-textfield__outline-gap">
+      <div class="mdw-textfield__label"><%= it?.body ?? '' %><%= it?.text ?? '' %></div>
+    </div>
+  </div>
+
+  <%_ if (it?.prefix) { _%>
+  <div class="mdw-textfield__prefix"><%= it?.prefix %></div>
+  <%_ } _%>
+
+  <%_ if (it?.suffix) { _%>
+  <div class="mdw-textfield__suffix"><%= it?.suffix %></div>
+  <% } %>
+
+  <%_ if (it?.helper) { _%>
+  <div class="mdw-textfield__helper-text"><%= it?.helper %></div>
+  <%_ } _%>
+
+  <%_ if (it?.error) { _%>
+  <div class="mdw-textfield__error-text"><%= it?.error %></div>
+  <%_ } _%>
+</label>

package/components/textfield/index.js

@@ -1,74 +1,58 @@
-import { getPassiveEventListenerOption } from '../../core/dom';
+import { getPassiveEventListenerOption } from '../../core/dom.js';
 
 /**
- * @param {Element} textfieldElement
- * @return {void}
- */
-export function attach(textfieldElement) {
-  /** @type {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} */
-  const input = (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
-  if (input) {
-    input.addEventListener('input', onInput, getPassiveEventListenerOption());
-    onInput({ currentTarget: input });
-  }
-}
-
-/**
- * @param {Element} textfieldElement
- * @return {void}
- */
-export function detach(textfieldElement) {
-  textfieldElement.removeAttribute('mdw-value-empty');
-  const input = (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
-  if (input) {
-    input.removeEventListener('input', onInput);
-  }
-}
-
-/**
- * @param {Event|{currentTarget}} event
+ * @param {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} inputElement
  * @return {void}
  */
-export function onInput(event) {
-  const inputElement = event.currentTarget;
-  if (inputElement.parentElement.hasAttribute('mdw-autosize')) {
-    updateTextAreaSize(inputElement);
-  }
-  updateInputEmptyState(inputElement);
-}
-
-/**
- * @param {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} inputElement
- * @return {void} */
 export function updateInputEmptyState(inputElement) {
-  const attributeName = 'mdw-value-empty';
+  const attrName = 'mdw-value-empty';
   const textfieldElement = inputElement.parentElement;
   if (inputElement.value) {
-    if (textfieldElement.hasAttribute(attributeName)) {
-      textfieldElement.removeAttribute(attributeName);
+    if (textfieldElement.hasAttribute(attrName)) {
+      textfieldElement.removeAttribute(attrName);
     }
-  } else if (!textfieldElement.hasAttribute(attributeName)) {
-    textfieldElement.setAttribute('mdw-value-empty', '');
+  } else if (!textfieldElement.hasAttribute(attrName)) {
+    textfieldElement.setAttribute(attrName, '');
   }
 }
 
 /**
  * @param {HTMLTextAreaElement} inputElement
- * @return {number} Single row height */
+ * @return {number} Single row height
+ */
 export function updateTextAreaSize(inputElement) {
-  const previousRowsValue = inputElement.getAttribute('rows');
-  inputElement.setAttribute('rows', '1');
+  const previousRowsAttrValue = inputElement.getAttribute('rows');
+  // eslint-disable-next-line no-param-reassign
+  inputElement.rows = 1;
   const { height, paddingTop } = window.getComputedStyle(inputElement);
   if (!height || height === 'auto') {
-    inputElement.setAttribute('rows', previousRowsValue);
+    if (previousRowsAttrValue == null) {
+      inputElement.removeAttribute('rows');
+    } else {
+      inputElement.setAttribute('rows', previousRowsAttrValue);
+    }
     return -1;
   }
   const heightPx = parseInt(height.replace('px', ''), 10);
   const paddingTopPx = parseInt(paddingTop.replace('px', ''), 10);
-  inputElement.setAttribute('rows', Math.floor((inputElement.scrollHeight - paddingTopPx) / heightPx).toString());
+  // eslint-disable-next-line no-param-reassign
+  inputElement.rows = Math.floor((inputElement.scrollHeight - paddingTopPx) / heightPx);
   return heightPx;
 }
 
+/**
+ * @param {Event|{currentTarget:HTMLElement}} event
+ * @return {void}
+ */
+export function onInput(event) {
+  /** @type {HTMLInputElement|HTMLTextAreaElement} */
+  const inputElement = (event.currentTarget);
+  if (inputElement.parentElement.hasAttribute('mdw-autosize')) {
+    updateTextAreaSize(/** @type {HTMLTextAreaElement} */ (inputElement));
+  }
+  updateInputEmptyState(inputElement);
+}
+
 /**
  * @param {Element} textfieldElement
  * @return {string|Date|number}
@@ -79,8 +63,7 @@ export function getValue(textfieldElement) {
   if ((input instanceof HTMLTextAreaElement) || (input instanceof HTMLSelectElement)) {
     return input.value;
   }
-  const type = input.hasAttribute('type') && input.getAttribute('type').toLowerCase();
-  switch (type) {
+  switch (input.type) {
     case 'number':
     case 'range':
       return Number.isNaN(input.valueAsNumber) ? null : input.valueAsNumber;
@@ -91,7 +74,7 @@ export function getValue(textfieldElement) {
         return null;
       }
       return new Date(
-        (new Date(input.valueAsNumber).getTimezoneOffset() * 60 * 1000) + input.valueAsNumber
+        (new Date(input.valueAsNumber).getTimezoneOffset() * 60 * 1000) + input.valueAsNumber,
       );
     default:
       return input.value;
@@ -100,7 +83,7 @@ export function getValue(textfieldElement) {
 
 /**
  * @param {Element} textfieldElement
- * @param {(string|Date|number)=} value
+ * @param {string|Date|number} [value]
  * @return {void}
  */
 export function setValue(textfieldElement, value) {
@@ -117,14 +100,13 @@ export function setValue(textfieldElement, value) {
       input.value = value.toString(10);
     }
   } else if (value instanceof Date) {
-    const type = input.hasAttribute('type') && input.getAttribute('type').toLowerCase();
-    if (type === 'time') {
+    if (input.type === 'time') {
       const hoursStr = `${value.getHours() < 10 ? '0' : ''}${value.getHours()}`;
       const minutesStr = `${value.getMinutes() < 10 ? '0' : ''}${value.getMinutes()}`;
       const secondsStr = `${value.getSeconds() < 10 ? '0' : ''}${value.getSeconds()}`;
       input.value = `${hoursStr}:${minutesStr}:${secondsStr}.${value.getMilliseconds()}`;
     } else {
-      switch (type) {
+      switch (input.type) {
         case 'date':
           input.valueAsDate = value;
           break;
@@ -142,8 +124,7 @@ export function setValue(textfieldElement, value) {
   } else if (typeof value === 'string') {
     input.value = value;
   } else {
-    const type = input.hasAttribute('type') && input.getAttribute('type').toLowerCase();
-    switch (type) {
+    switch (input.type) {
       case 'date':
       case 'time':
       case 'datetime-local':
@@ -160,3 +141,28 @@ export function setValue(textfieldElement, value) {
     updateTextAreaSize(input);
   }
 }
+
+/**
+ * @param {Element} textfieldElement
+ * @return {void}
+ */
+export function attach(textfieldElement) {
+  /** @type {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} */
+  const input = (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  if (input) {
+    input.addEventListener('input', onInput, getPassiveEventListenerOption());
+    onInput({ currentTarget: input });
+  }
+}
+
+/**
+ * @param {Element} textfieldElement
+ * @return {void}
+ */
+export function detach(textfieldElement) {
+  textfieldElement.removeAttribute('mdw-value-empty');
+  const input = (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  if (input) {
+    input.removeEventListener('input', onInput);
+  }
+}

package/components/textfield/index.scss

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