@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/textfield/_theme.scss

@@ -0,0 +1,299 @@
+// https://material.io/archive/guidelines/components/text-fields.html#text-fields-states
+
+@use '../../core/theme/_mixins.scss' as theme;
+@use '../../core/_platform.scss' as platform;
+
+$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)),
+  filled-disabled-background-color:   (('foreground-light', 0.03), ('foreground-dark', 0.05)),
+  fill-color:                         (('foreground-light', 0.06), ('foreground-dark', 0.10)),
+  fill-color__hover:                  (('foreground-light', 0.12), ('foreground-dark', 0.20)),
+  border-line-color:                  (('foreground-light', 0.42), ('foreground-dark', 0.70)),
+  border-line-color__hover:           (('foreground-light', 0.87), ('foreground-dark', 1.00)),
+
+  warn-color:                         (('warn', 'A700', 1.00), ('warn', 'A200', 1.00)),
+  warn-color__selection:              (('warn', 'A700', 0.20), ('warn', 'A200', 0.40)),
+
+  selection-opacity:                  (0.08 + 0.12, 0.16 + 0.24),
+) !default;
+
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('textfield', $themeValues, $key, $type);
+}
+
+@mixin addThemeRules($type: 'var') {
+  .mdw-textfield[mdw-outlined] {
+    &:active > .mdw-textfield__input:not(:disabled),
+    & > .mdw-textfield__input:not(:disabled):focus {
+      & ~ .mdw-textfield__border {
+          color: inherit;
+      }
+    }
+
+    &,
+    &[mdw-ink] {
+      &:active > .mdw-textfield__input:not(:disabled),
+      & > .mdw-textfield__input:not(:disabled):focus {
+        &:invalid {
+          & ~ .mdw-textfield__border,
+          & ~ .mdw-textfield__border::before {
+            color: RGBA(getThemeValue("warn-color", $type));
+          }
+        }
+      }
+    }
+  }
+
+  .mdw-textfield__error-text {
+    color: RGBA(getThemeValue("warn-color", $type));
+  }
+
+  .mdw-textfield {
+    // Focus
+    &:active > .mdw-textfield__input:not(:disabled),
+    & > .mdw-textfield__input:not(:disabled):active,
+    & > .mdw-textfield__input:not(:disabled):focus {
+      @if($type == 'var') {
+        &::selection {
+          background-color: RGBA(var(--mdw-ink), getThemeValue("selection-opacity", $type));
+        }
+      }
+
+      & ~ .mdw-textfield__border {
+        border-bottom-color: inherit;
+        color: inherit;
+      }
+      & ~ .mdw-textfield__border .mdw-textfield__label {
+        color: inherit;
+      }
+
+      & ~ .mdw-textfield__border::before {
+        color: inherit;
+      }
+    }
+
+    &:active > .mdw-textfield__input:not(:disabled):invalid,
+    & > .mdw-textfield__input:not(:disabled):focus:invalid {
+      caret-color: RGBA(getThemeValue("warn-color", $type));
+
+      &::selection {
+        background-color: RGBA(getThemeValue("warn-color__selection", $type));
+      }
+
+      & ~ .mdw-textfield__border {
+        border-bottom-color: currentColor;
+        color: RGBA(getThemeValue("warn-color", $type));
+      }
+
+      & ~ .mdw-textfield__border .mdw-textfield__label {
+        // color: getThemeValue("warn-color", $type);
+      }
+
+      & ~ .mdw-textfield__border::after {
+        color: RGBA(getThemeValue("warn-color", $type));
+      }
+
+    }
+  }
+
+  .mdw-textfield__signifier,
+  .mdw-textfield__label,
+  .mdw-textfield__prefix,
+  .mdw-textfield__suffix {
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
+  }
+
+  .mdw-textfield__icon[mdw-dropdown] {
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
+  }
+
+  .mdw-textfield[mdw-value-empty] > input.mdw-textfield__input:not(:focus) {
+    color: transparent;
+  }
+
+  input.mdw-textfield__input:not(:focus):placeholder-shown {
+    color: transparent;
+  }
+
+  .mdw-textfield__input::selection {
+    // color: inherit;
+  }
+
+  .mdw-textfield__input::placeholder {
+    color: RGBA(getThemeValue("placeholder-color__focus", $type));
+  }
+
+  .mdw-textfield__input:-ms-input-placeholder {
+    color: RGBA(getThemeValue("placeholder-color__focus", $type)) !important;
+  }
+
+  .mdw-textfield__input::-ms-input-placeholder {
+    color: RGBA(getThemeValue("placeholder-color__focus", $type)) !important;
+  }
+
+  .mdw-textfield__input {
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("default-text-opacity", $type));
+    @if ($type == 'var') {
+      caret-color: RGBA(var(--mdw-ink));
+    } @else {
+      caret-color: inherit;
+    }
+
+    // Disabled
+    &:disabled,
+    &[aria-disabled="true"] {
+      &,
+      & ~ .mdw-textfield__border,
+      & ~ .mdw-textfield__border .mdw-textfield__label,
+      & ~ .mdw-textfield__signifier,
+      & ~ .mdw-textfield__prefix,
+      & ~ .mdw-textfield__suffix,
+      & ~ .mdw-textfield__icon {
+        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: RGBA(getThemeValue("border-line-color__hover", $type));
+    }
+    
+    &:not(:focus) {
+      /* Rules must be separated for IE11 support */
+      &:placeholder-shown ~ .mdw-textfield__prefix,
+      &:placeholder-shown ~ .mdw-textfield__suffix {
+        color: transparent;
+      }
+
+      .mdw-textfield[mdw-value-empty] > & ~ .mdw-textfield__prefix,
+      .mdw-textfield[mdw-value-empty] > & ~ .mdw-textfield__suffix {
+        color: transparent;
+      }
+    }
+  }
+
+  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: RGBA(getThemeValue("border-line-color", $type));
+  }
+
+  .mdw-textfield__helper-text {
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
+  }
+
+
+  .mdw-textfield__input:disabled ~ .mdw-textfield__helper-text {
+    color: RGBA(getThemeValue("text-color", $type), getThemeValue("disabled-opacity", $type));
+  }
+
+  .mdw-textfield__input:focus:invalid ~ .mdw-textfield__helper-text {
+    color: transparent;
+  }
+
+  .mdw-textfield {
+    @if ($type != 'var') {
+      caret-color: currentColor;
+    }
+
+    &:not([mdw-solo]) > .mdw-textfield__input:not(:focus)::placeholder {
+      color: transparent;
+    }
+
+    &:not([mdw-solo]) > .mdw-textfield__input:not(:focus):-ms-input-placeholder {
+      color: transparent !important;
+    }
+
+    &:not([mdw-solo]) > .mdw-textfield__input:not(:focus)::-ms-input-placeholder {
+      color: transparent !important;
+    }
+
+    .mdw-textfield__input:not(:focus) ~ .mdw-textfield__border {
+      color: RGBA(getThemeValue("border-line-color", $type));
+    }
+    
+    .mdw-textfield__input:disabled ~ .mdw-textfield__border {
+      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: RGBA(getThemeValue("fill-color", $type));
+    }
+
+    &:not([mdw-outlined]) > .mdw-textfield__input:not(:disabled) {
+      & ~ .mdw-textfield__border:hover,
+      &:hover ~ .mdw-textfield__border {
+        background-color: RGBA(getThemeValue("fill-color__hover", $type));
+      }
+    }
+  }
+}
+
+
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
+}
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
+}
+
+@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

@@ -0,0 +1,168 @@
+import { getPassiveEventListenerOption } from '../../core/dom.js';
+
+/**
+ * @param {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} inputElement
+ * @return {void}
+ */
+export function updateInputEmptyState(inputElement) {
+  const attrName = 'mdw-value-empty';
+  const textfieldElement = inputElement.parentElement;
+  if (inputElement.value) {
+    if (textfieldElement.hasAttribute(attrName)) {
+      textfieldElement.removeAttribute(attrName);
+    }
+  } else if (!textfieldElement.hasAttribute(attrName)) {
+    textfieldElement.setAttribute(attrName, '');
+  }
+}
+
+/**
+ * @param {HTMLTextAreaElement} inputElement
+ * @return {number} Single row height
+ */
+export function updateTextAreaSize(inputElement) {
+  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') {
+    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);
+  // 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}
+ */
+export function getValue(textfieldElement) {
+  /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */
+  const input = (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  if ((input instanceof HTMLTextAreaElement) || (input instanceof HTMLSelectElement)) {
+    return input.value;
+  }
+  switch (input.type) {
+    case 'number':
+    case 'range':
+      return Number.isNaN(input.valueAsNumber) ? null : input.valueAsNumber;
+    case 'date':
+    case 'datetime-local':
+    case 'time':
+      if (input.value == null) {
+        return null;
+      }
+      return new Date(
+        (new Date(input.valueAsNumber).getTimezoneOffset() * 60 * 1000) + input.valueAsNumber,
+      );
+    default:
+      return input.value;
+  }
+}
+
+/**
+ * @param {Element} textfieldElement
+ * @param {string|Date|number} [value]
+ * @return {void}
+ */
+export function setValue(textfieldElement, value) {
+  /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */
+  const input = (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  if (value == null) {
+    input.value = null;
+  } else if (input instanceof HTMLTextAreaElement || input instanceof HTMLSelectElement) {
+    if (value instanceof Date) {
+      input.value = value.toString();
+    } else if (typeof value === 'string') {
+      input.value = value;
+    } else {
+      input.value = value.toString(10);
+    }
+  } else if (value instanceof Date) {
+    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 (input.type) {
+        case 'date':
+          input.valueAsDate = value;
+          break;
+        case 'datetime-local':
+          input.valueAsNumber = value.getTime() - (value.getTimezoneOffset() * 60 * 1000);
+          break;
+        case 'number':
+        case 'range':
+          input.valueAsNumber = value.getTime();
+          break;
+        default:
+          input.value = value.toString();
+      }
+    }
+  } else if (typeof value === 'string') {
+    input.value = value;
+  } else {
+    switch (input.type) {
+      case 'date':
+      case 'time':
+      case 'datetime-local':
+      case 'number':
+      case 'range':
+        input.valueAsNumber = value;
+        break;
+      default:
+        input.value = value.toString();
+    }
+  }
+  updateInputEmptyState(input);
+  if (input instanceof HTMLTextAreaElement && textfieldElement.hasAttribute('mdw-autosize')) {
+    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.pug

@@ -0,0 +1,30 @@
+mixin mdwTextField(options={})
+  label.mdw-textfield(class=([
+  options.ink ? 'mdw-theme' : '',
+  ].filter(v=>v).join(' '))
+  mdw-outlined=(options.outlined)
+  mdw-autosize=(options.autosize)
+  mdw-ink=(options.ink)
+  )
+    if (options.signifierClass || options.signifier)
+      .mdw-textfield__signifier(class=options.signifierClass)= options.signifier
+    input.mdw-textfield__input(
+    disabled=(options.disabled ? '' : false)
+    minlength=(options.minlength ? `${options.minlength}` : false)
+    placeholder=(options.placeholder ? options.placeholder: ' ')
+    required=(options.required ? '' : false)
+    type=(options.type ? options.type : 'text')
+    value=(options.value)
+    )&attributes(attributes)
+    .mdw-textfield__border
+      .mdw-textfield__outline-gap
+        .mdw-textfield__label
+          block
+    if (options.prefix)
+      .mdw-textfield__prefix= options.prefix
+    if (options.suffix)
+      .mdw-textfield__suffix= options.suffix
+    if (options.helperText)
+      .mdw-textfield__helper-text= options.helperText
+    if (options.errorText)
+      .mdw-textfield__error-text= options.errorText

package/components/textfield/index.scss

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