@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/textfield/_theme.scss

@@ -1,299 +0,0 @@
-// 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

@@ -1,74 +0,0 @@
-<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,168 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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