@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/textfield/_theme.scss

@@ -1,264 +0,0 @@
-/* https://material.io/archive/guidelines/components/text-fields.html#text-fields-states */
-
-@use '../../core/_platform.scss' as platform;
-
-.mdw-theme {
-  --mdw-textfield__text-rgb: var(--mdw-ink-default);
-  --mdw-textfield__default-text-opacity: var(--mdw-high-opacity);
-  --mdw-textfield__secondary-text-opacity: var(--mdw-medium-opacity);
-  --mdw-textfield__disabled-opacity: var(--mdw-inactive-opacity);
-}
-
-.mdw-theme[mdw-light] {
-  --mdw-textfield__placeholder-color__focus: RGBA(var(--mdw-ink-default), 0.42);
-  --mdw-textfield__filled-disabled-border-color: RGBA(var(--mdw-ink-default), 0.10);
-  --mdw-textfield__filled-disabled-background-color: RGBA(var(--mdw-ink-default), 0.03);
-  --mdw-textfield__fill-color: RGBA(var(--mdw-ink-default), 0.06);
-  --mdw-textfield__fill-color__hover: RGBA(var(--mdw-ink-default), 0.12);
-  --mdw-textfield__border-line-color: RGBA(var(--mdw-ink-default), 0.42);
-  --mdw-textfield__border-line-color__hover: RGBA(var(--mdw-ink-default), 0.87);
-
-  --mdw-textfield__warn-color: RGBA(var(--mdw-alias-warn-A700), 1.00);
-  --mdw-textfield__warn-color__selection: RGBA(var(--mdw-alias-warn-A700), 0.20);
-
-  --mdw-textfield__selection-opacity: #{0.08 + 0.12};
-
-  --mdw-textfield__date-picker-filter: none;
-}
-
-.mdw-theme[mdw-dark] {
-  --mdw-textfield__placeholder-color__focus: RGBA(var(--mdw-ink-default), 0.50);
-  --mdw-textfield__filled-disabled-border-color: RGBA(var(--mdw-ink-default), 0.30);
-  --mdw-textfield__filled-disabled-background-color: RGBA(var(--mdw-ink-default), 0.05);
-  --mdw-textfield__fill-color: RGBA(var(--mdw-ink-default), 0.10);
-  --mdw-textfield__fill-color__hover: RGBA(var(--mdw-ink-default), 0.20);
-  --mdw-textfield__border-line-color: RGBA(var(--mdw-ink-default), 0.70);
-  --mdw-textfield__border-line-color__hover: RGBA(var(--mdw-ink-default), 1.00);
-
-  --mdw-textfield__warn-color: RGBA(var(--mdw-alias-warn-A200), 1.00);
-  --mdw-textfield__warn-color__selection: RGBA(var(--mdw-alias-warn-A200), 0.40);
-
-  --mdw-textfield__selection-opacity: #{0.16 + 0.24};
-  --mdw-textfield__date-picker-filter: invert(1);
-}
-
-.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: var(--mdw-textfield__warn-color);
-        }
-      }
-    }
-  }
-}
-
-.mdw-textfield__error-text {
-  color: var(--mdw-textfield__warn-color);
-}
-
-.mdw-textfield {
-  // Focus
-  &:active > .mdw-textfield__input:not(:disabled),
-  & > .mdw-textfield__input:not(:disabled):active,
-  & > .mdw-textfield__input:not(:disabled):focus {
-    &::selection {
-      background-color: RGBA(var(--mdw-ink), var(--mdw-textfield__selection-opacity));
-    }
-
-    & ~ .mdw-textfield__border {
-      border-block-end-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: var(--mdw-textfield__warn-color);
-
-    &::selection {
-      background-color: var(--mdw-textfield__warn-color__selection);
-    }
-
-    & ~ .mdw-textfield__border {
-      border-block-end-color: currentColor;
-      color: var(--mdw-textfield__warn-color);
-    }
-
-    & ~ .mdw-textfield__border .mdw-textfield__label {
-      // color: var(--mdw-textfield__warn-color);
-    }
-
-    & ~ .mdw-textfield__border::after {
-      color: var(--mdw-textfield__warn-color);
-    }
-
-  }
-}
-
-.mdw-textfield__signifier,
-.mdw-textfield__label,
-.mdw-textfield__prefix,
-.mdw-textfield__suffix {
-  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
-}
-
-.mdw-textfield__icon[mdw-dropdown] {
-  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
-}
-
-.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::-webkit-calendar-picker-indicator {
-  filter: var(--mdw-textfield__date-picker-filter);
-}
-
-.mdw-textfield__input::selection {
-  // color: inherit;
-}
-
-.mdw-textfield__input::placeholder {
-  color: var(--mdw-textfield__placeholder-color__focus);
-}
-
-.mdw-textfield__input {
-  caret-color: RGBA(var(--mdw-ink));
-
-  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__default-text-opacity));
-
-  // 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(var(--mdw-textfield__text-rgb), var(--mdw-textfield__disabled-opacity));
-    }
-  }
-
-  // Hover
-  &:not(:focus):hover:not(:disabled):not(:active) ~ .mdw-textfield__border,
-  &:not(:focus):not(:disabled):not(:active) ~ .mdw-textfield__border:hover {
-    color: var(--mdw-textfield__border-line-color__hover);
-  }
-
-  &: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: var(--mdw-textfield__placeholder-color__focus);
-
-    &:focus {
-      color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
-    }
-
-    &:-moz-focusring {
-      color: transparent;
-      text-shadow: 0 0 0 var(--mdw-textfield__placeholder-color__focus);
-    }
-
-    &:focus:-moz-focusring {
-      color: transparent;
-      text-shadow: 0 0 0 RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
-    }
-  }
-
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
-  }
-
-}
-
-.mdw-textfield__border {
-  color: var(--mdw-textfield__border-line-color);
-}
-
-.mdw-textfield__helper-text {
-  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
-}
-
-.mdw-textfield__input:disabled ~ .mdw-textfield__helper-text {
-  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__disabled-opacity));
-}
-
-.mdw-textfield__input:focus:invalid ~ .mdw-textfield__helper-text {
-  color: transparent;
-}
-
-.mdw-textfield {
-  &: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: var(--mdw-textfield__border-line-color);
-  }
-
-  .mdw-textfield__input:disabled ~ .mdw-textfield__border {
-    background-color: var(--mdw-textfield__filled-disabled-background-color);
-    color: var(--mdw-textfield__filled-disabled-border-color);
-  }
-
-  &:not([mdw-outlined]) > .mdw-textfield__border {
-    background-color: var(--mdw-textfield__fill-color);
-  }
-
-  &:not([mdw-outlined]) > .mdw-textfield__input:not(:disabled) {
-    & ~ .mdw-textfield__border:hover,
-    &:hover ~ .mdw-textfield__border {
-      background-color: var(--mdw-textfield__fill-color__hover);
-    }
-  }
-}

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,160 +0,0 @@
-/**
- * @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');
-  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 = Number.parseInt(height.replace('px', ''), 10);
-  const paddingTopPx = Number.parseInt(paddingTop.replace('px', ''), 10);
-  inputElement.rows = Math.floor((inputElement.scrollHeight - paddingTopPx) / heightPx);
-  return heightPx;
-}
-
-/**
- * @param {Event|{currentTarget:HTMLElement}} event
- * @return {void}
- */
-export function onInput(event) {
-  const inputElement = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (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) {
-  const input = /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */ (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|null} [value]
- * @return {void}
- */
-export function setValue(textfieldElement, value) {
-  const input = /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */ (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) {
-  const input = /** @type {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} */ (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
-  if (input) {
-    input.addEventListener('input', onInput, { passive: true });
-    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';