mdui 1.0.2 → 2.0.0

package/src/components/textfield/index.less

@@ -1,425 +0,0 @@
-/**
- * =============================================================================
- * ************   Text Field 文本框   ************
- * =============================================================================
- */
-
-/* 文本框外层 */
-.mdui-textfield {
-  position: relative;
-  padding-top: 16px;
-  padding-bottom: 8px;
-  overflow: hidden;
-}
-
-.mdui-textfield-has-bottom {
-  padding-bottom: 28px;
-}
-
-/* 输入框 */
-.mdui-textfield-input {
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  height: 36px;
-  margin: 0;
-  padding: 8px 0;
-  overflow: hidden;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 16px;
-  font-family: inherit;
-  line-height: 20px;
-  background: none;
-  border: none;
-  border-bottom: 1px solid rgba(0, 0, 0, .42);
-  border-radius: 0;
-  outline: none;
-  box-shadow: none;
-  transition-timing-function: @animation-curve-default;
-  transition-duration: .2s;
-  transition-property: border-bottom-color, padding-right, box-shadow;
-  appearance: none;
-  resize: none;
-
-  &::-webkit-input-placeholder {
-    color: inherit;
-    opacity: 0.42;
-  }
-
-  &:not([disabled]):hover {
-    border-bottom: 1px solid rgba(0, 0, 0, .87);
-    box-shadow: 0 1px 0 0 rgba(0, 0, 0, .87);
-    cursor: pointer;
-  }
-
-  &[rows] {
-    height: auto !important;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-}
-
-/* 文本框 label */
-.mdui-textfield-label {
-  display: block;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.54);
-  font-size: 16px;
-  transform: scale(0.75) translateY(0);
-  transform-origin: left;
-  transition: all .2s;
-  pointer-events: none;
-}
-
-/* 表单验证错误提示、帮助文本提示 */
-.mdui-textfield-error,
-.mdui-textfield-helper {
-  position: absolute;
-  bottom: 8px;
-  height: 12px;
-  font-size: 12px;
-  line-height: 12px;
-  .mdui-text-truncate();
-}
-
-.mdui-textfield-error {
-  color: rgba(red(@color-red-a400), green(@color-red-a400), blue(@color-red-a400), .87);
-  visibility: hidden;
-}
-
-.mdui-textfield-helper {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-
-/* 表单中的图标
-   ========== */
-.mdui-textfield {
-  .mdui-icon {
-    position: absolute;
-    bottom: 8px;
-    padding: 6px;
-    color: @color-black-icon;
-
-    ~ .mdui-textfield-label,
-    ~ .mdui-textfield-input,
-    ~ .mdui-textfield-error,
-    ~ .mdui-textfield-helper,
-    ~ .mdui-textfield-flex-wrap {
-      /* stylelint-disable-next-line */
-      width: calc(~"100% - 56px");
-      margin-left: 56px;
-    }
-  }
-}
-
-.mdui-textfield-has-bottom {
-  .mdui-icon {
-    bottom: 28px;
-  }
-}
-
-/* 聚焦状态的文本框
-   ============= */
-.mdui-textfield-focus {
-
-  .mdui-textfield-input,
-  .mdui-textfield-input:hover {
-    border-bottom-color: @color-default-a700;
-    box-shadow: 0 1px 0 0 @color-default-a700;
-  }
-
-  .mdui-textfield-label,
-  .mdui-icon {
-    color: rgba(red(@color-default-a700), green(@color-default-a700), blue(@color-default-a700), .87);
-  }
-}
-
-/* 含有浮动标签的文本框
-   ================ */
-.mdui-textfield-floating-label {
-
-  .mdui-textfield-label {
-    color: rgba(0, 0, 0, 0.35);
-    transform: scale(1) translateY(27px);
-  }
-
-  &.mdui-textfield-focus,
-  &.mdui-textfield-not-empty {
-    .mdui-textfield-label {
-      color: rgba(0, 0, 0, 0.65);
-      transform: scale(0.75) translateY(0);
-    }
-  }
-  &.mdui-textfield-focus {
-    .mdui-textfield-label {
-      .mdui-text-color(@color-accent-default-name);
-    }
-  }
-}
-
-/* 可展开文本框，默认向右展开
-   ========== */
-.mdui-textfield-expandable {
-  width: 36px;
-  min-height: 36px;
-  padding: 1px 0;
-  transition: width .3s @animation-curve-default;
-
-  .mdui-icon {
-    bottom: 0;
-    padding: 0;
-  }
-
-  .mdui-textfield-input {
-    /* stylelint-disable-next-line */
-    width: calc(~"100% - 36px");
-    margin-left: 36px;
-    padding-right: 0;
-  }
-
-  .mdui-textfield-icon {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  .mdui-textfield-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: scale(0);
-  }
-
-  &.mdui-textfield-expanded {
-    width: 100%;
-
-    .mdui-textfield-input {
-      padding-right: 36px;
-    }
-
-    .mdui-textfield-close {
-      transform: scale(1);
-    }
-  }
-}
-
-/* 表单验证不通过
-   =========== */
-.mdui-textfield-invalid,
-.mdui-textfield-invalid-html5 {
-
-  .mdui-textfield-input,
-  &.mdui-textfield-focus .mdui-textfield-input {
-    border-bottom-color: @color-red-a400 !important;
-    box-shadow: 0 1px 0 0 @color-red-a400 !important;
-  }
-
-  .mdui-textfield-label {
-    color: @color-red-a400 !important;
-  }
-
-  &.mdui-textfield-floating-label {
-    .mdui-textfield-label {
-      color: rgba(red(@color-red-a400), green(@color-red-a400), blue(@color-red-a400), 0.35) !important;
-    }
-
-    &.mdui-textfield-focus,
-    &.mdui-textfield-not-empty {
-      .mdui-textfield-label {
-        color: @color-red-a400 !important;
-      }
-    }
-  }
-
-  .mdui-textfield-error {
-    visibility: visible;
-
-    &+.mdui-textfield-helper {
-      visibility: hidden;
-    }
-  }
-}
-
-/* 禁用表单
-   ====== */
-.mdui-textfield-disabled {
-  .mdui-textfield-label,
-  .mdui-textfield-input::-webkit-input-placeholder {
-    color: @color-black-disabled;
-  }
-
-  .mdui-textfield-input {
-    color: rgba(0, 0, 0, .42);
-    cursor: default;
-  }
-
-  .mdui-textfield-input {
-    border-bottom: 1px dashed rgba(0, 0, 0, .42);
-  }
-}
-
-/* 字数统计
-   ====== */
-.mdui-textfield-counter {
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  height: 12px;
-  color: @color-black-secondary;
-  font-size: 12px;
-  line-height: 12px;
-}
-
-
-/**
- * =============================================================================
- * ************   Textfield dark   ************
- * =============================================================================
- */
-.layout-theme({
-  // 输入框颜色
-  .mdui-textfield-input {
-    color: #fff;
-    border-bottom-color: rgba(255, 255, 255, .7);
-
-    &::-webkit-input-placeholder {
-      color: rgba(255, 255, 255, .5);
-    }
-
-    &:not([disabled]):hover {
-      border-bottom-color: rgba(255, 255, 255, 1);
-      box-shadow: 0 1px 0 0 rgba(255, 255, 255, 1);
-    }
-  }
-
-  // 图标颜色
-  .mdui-textfield {
-    .mdui-icon {
-      color: rgba(255, 255, 255, 0.7);
-    }
-  }
-
-  // 标签颜色
-  .mdui-textfield-label {
-    color: rgba(255, 255, 255, 0.7);
-  }
-
-  .mdui-textfield-floating-label {
-    .mdui-textfield-label {
-      color: rgba(255, 255, 255, 0.35);
-    }
-  }
-
-  // 错误文本颜色
-  .mdui-textfield-error {
-    color: @color-red-a400;
-  }
-
-  // 帮助文本颜色
-  .mdui-textfield-helper {
-    color: rgba(255, 255, 255, 0.7);
-  }
-
-  // 字数统计颜色
-  .mdui-textfield-counter {
-    color: @color-white-secondary;
-  }
-
-  // 聚焦状态
-  .mdui-textfield-focus {
-
-    .mdui-textfield-input,
-    .mdui-textfield-input:hover {
-      border-bottom-color: @color-default-a200;
-      box-shadow: 0 1px 0 0 @color-default-a200;
-    }
-
-    .mdui-textfield-label {
-      color: @color-default-a200;
-    }
-  }
-
-  // 禁用状态
-  .mdui-textfield-disabled {
-    .mdui-textfield-label,
-    .mdui-textfield-input::-webkit-input-placeholder {
-      color: @color-white-disabled;
-    }
-
-    .mdui-textfield-input {
-      color: @color-white-disabled;
-    }
-
-    .mdui-textfield-input {
-      border-bottom-color: rgba(255, 255, 255, .7);
-    }
-  }
-});
-
-
-/**
- * =============================================================================
- * ************   Textfield 强调色   ************
- * =============================================================================
- */
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    .mdui-theme-accent-@{colorName} when not (@colorName = null) {
-
-      @colorA700: 'color-@{colorName}-a700';
-      @colorA200: 'color-@{colorName}-a200';
-
-      .mdui-textfield-focus {
-
-        .mdui-textfield-input {
-          border-bottom-color: @@colorA700;
-          box-shadow: 0 1px 0 0 @@colorA700;
-        }
-
-        .mdui-textfield-label,
-        .mdui-textfield-floating-label.mdui-textfield-focus .mdui-textfield-label,
-        .mdui-icon {
-          color: rgba(red(@@colorA700), green(@@colorA700), blue(@@colorA700), .87);
-        }
-      }
-
-      // 暗色主题
-      & {
-        .dark-mode() {
-          .mdui-textfield-focus {
-
-            .mdui-textfield-input {
-              border-bottom-color: @@colorA200;
-              box-shadow: 0 1px 0 0 @@colorA200;
-            }
-
-            .mdui-textfield-label,
-            .mdui-textfield-floating-label.mdui-textfield-focus .mdui-textfield-label,
-            .mdui-icon {
-              color: @@colorA200;
-            }
-          }
-        }
-
-        & when (@globalLayoutDark = true) {
-          &.mdui-theme-layout-dark {
-            .dark-mode();
-          }
-        }
-
-        & when (@globalLayoutAuto = true) {
-          @media (prefers-color-scheme: dark) {
-            &.mdui-theme-layout-auto {
-              .dark-mode();
-            }
-          }
-        }
-      }
-    }
-  }
-  .loop-accent-theme(length(@globalAccentColors));
-}

package/src/components/textfield/index.ts

@@ -1,217 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import extend from 'mdui.jq/es/functions/extend';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/appendTo';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/outerHeight';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/remove';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/text';
-import 'mdui.jq/es/methods/trigger';
-import 'mdui.jq/es/methods/val';
-import Selector from 'mdui.jq/es/types/Selector';
-import { isUndefined } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../global/mutation';
-import { $document } from '../../utils/dom';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * 动态修改了文本框后，需要调用该方法重新初始化文本框。
-     *
-     * 若传入了参数，则只初始化该参数对应的文本框。若没有传入参数，则重新初始化所有文本框。
-     * @param selector CSS 选择器、或 DOM 元素、或 DOM 元素组成的数组、或 JQ 对象
-     */
-    updateTextFields(
-      selector?: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    ): void;
-  }
-}
-
-type INPUT_EVENT_DATA = {
-  reInit?: boolean;
-  domLoadedEvent?: boolean;
-};
-
-const defaultData: INPUT_EVENT_DATA = {
-  reInit: false,
-  domLoadedEvent: false,
-};
-
-/**
- * 输入框事件
- * @param event
- * @param data
- */
-function inputEvent(event: Event, data: INPUT_EVENT_DATA = {}): void {
-  data = extend({}, defaultData, data);
-
-  const input = event.target as HTMLInputElement;
-  const $input = $(input);
-  const eventType = event.type;
-  const value = $input.val() as string;
-
-  // 文本框类型
-  const inputType = $input.attr('type') || '';
-  if (
-    ['checkbox', 'button', 'submit', 'range', 'radio', 'image'].indexOf(
-      inputType,
-    ) > -1
-  ) {
-    return;
-  }
-
-  const $textfield = $input.parent('.mdui-textfield');
-
-  // 输入框是否聚焦
-  if (eventType === 'focus') {
-    $textfield.addClass('mdui-textfield-focus');
-  }
-
-  if (eventType === 'blur') {
-    $textfield.removeClass('mdui-textfield-focus');
-  }
-
-  // 输入框是否为空
-  if (eventType === 'blur' || eventType === 'input') {
-    value
-      ? $textfield.addClass('mdui-textfield-not-empty')
-      : $textfield.removeClass('mdui-textfield-not-empty');
-  }
-
-  // 输入框是否禁用
-  input.disabled
-    ? $textfield.addClass('mdui-textfield-disabled')
-    : $textfield.removeClass('mdui-textfield-disabled');
-
-  // 表单验证
-  if (
-    (eventType === 'input' || eventType === 'blur') &&
-    !data.domLoadedEvent &&
-    input.validity
-  ) {
-    input.validity.valid
-      ? $textfield.removeClass('mdui-textfield-invalid-html5')
-      : $textfield.addClass('mdui-textfield-invalid-html5');
-  }
-
-  // textarea 高度自动调整
-  if ($input.is('textarea')) {
-    // IE bug：textarea 的值仅为多个换行，不含其他内容时，textarea 的高度不准确
-    //         此时，在计算高度前，在值的开头加入一个空格，计算完后，移除空格
-    const inputValue = value;
-    let hasExtraSpace = false;
-
-    if (inputValue.replace(/[\r\n]/g, '') === '') {
-      $input.val(' ' + inputValue);
-      hasExtraSpace = true;
-    }
-
-    // 设置 textarea 高度
-    $input.outerHeight('');
-    const height = $input.outerHeight();
-    const scrollHeight = input.scrollHeight;
-
-    if (scrollHeight > height) {
-      $input.outerHeight(scrollHeight);
-    }
-
-    // 计算完，还原 textarea 的值
-    if (hasExtraSpace) {
-      $input.val(inputValue);
-    }
-  }
-
-  // 实时字数统计
-  if (data.reInit) {
-    $textfield.find('.mdui-textfield-counter').remove();
-  }
-
-  const maxLength = $input.attr('maxlength');
-  if (maxLength) {
-    if (data.reInit || data.domLoadedEvent) {
-      $(
-        '<div class="mdui-textfield-counter">' +
-          `<span class="mdui-textfield-counter-inputed"></span> / ${maxLength}` +
-          '</div>',
-      ).appendTo($textfield);
-    }
-
-    $textfield
-      .find('.mdui-textfield-counter-inputed')
-      .text(value.length.toString());
-  }
-
-  // 含 帮助文本、错误提示、字数统计 时，增加文本框底部内边距
-  if (
-    $textfield.find('.mdui-textfield-helper').length ||
-    $textfield.find('.mdui-textfield-error').length ||
-    maxLength
-  ) {
-    $textfield.addClass('mdui-textfield-has-bottom');
-  }
-}
-
-$(() => {
-  // 绑定事件
-  $document.on(
-    'input focus blur',
-    '.mdui-textfield-input',
-    { useCapture: true },
-    inputEvent,
-  );
-
-  // 可展开文本框展开
-  $document.on(
-    'click',
-    '.mdui-textfield-expandable .mdui-textfield-icon',
-    function () {
-      $(this as HTMLElement)
-        .parents('.mdui-textfield')
-        .addClass('mdui-textfield-expanded')
-        .find('.mdui-textfield-input')[0]
-        .focus();
-    },
-  );
-
-  // 可展开文本框关闭
-  $document.on(
-    'click',
-    '.mdui-textfield-expanded .mdui-textfield-close',
-    function () {
-      $(this)
-        .parents('.mdui-textfield')
-        .removeClass('mdui-textfield-expanded')
-        .find('.mdui-textfield-input')
-        .val('');
-    },
-  );
-
-  /**
-   * 初始化文本框
-   */
-  mdui.mutation('.mdui-textfield', function () {
-    $(this).find('.mdui-textfield-input').trigger('input', {
-      domLoadedEvent: true,
-    });
-  });
-});
-
-mdui.updateTextFields = function (
-  selector?: Selector | HTMLElement | ArrayLike<HTMLElement>,
-): void {
-  const $elements = isUndefined(selector) ? $('.mdui-textfield') : $(selector);
-
-  $elements.each((_, element) => {
-    $(element).find('.mdui-textfield-input').trigger('input', {
-      reInit: true,
-    });
-  });
-};