mdui 1.0.2 → 2.0.0

package/src/components/select/index.ts

@@ -1,478 +0,0 @@
-/**
- * 最终生成的元素结构为：
- *  <select class="mdui-select" mdui-select="{position: 'top'}" style="display: none;"> // $native
- *    <option value="1">State 1</option>
- *    <option value="2">State 2</option>
- *    <option value="3" disabled="">State 3</option>
- *  </select>
- *  <div class="mdui-select mdui-select-position-top" style="" id="88dec0e4-d4a2-c6d0-0e7f-1ba4501e0553"> // $element
- *    <span class="mdui-select-selected">State 1</span> // $selected
- *    <div class="mdui-select-menu" style="transform-origin: center 100% 0px;"> // $menu
- *      <div class="mdui-select-menu-item mdui-ripple" selected="">State 1</div> // $items
- *      <div class="mdui-select-menu-item mdui-ripple">State 2</div>
- *      <div class="mdui-select-menu-item mdui-ripple" disabled="">State 3</div>
- *    </div>
- *  </div>
- */
-
-import $ from 'mdui.jq/es/$';
-import contains from 'mdui.jq/es/functions/contains';
-import extend from 'mdui.jq/es/functions/extend';
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/add';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/after';
-import 'mdui.jq/es/methods/append';
-import 'mdui.jq/es/methods/appendTo';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/css';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/height';
-import 'mdui.jq/es/methods/hide';
-import 'mdui.jq/es/methods/index';
-import 'mdui.jq/es/methods/innerWidth';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/remove';
-import 'mdui.jq/es/methods/removeAttr';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/show';
-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 mdui from '../../mdui';
-import '../../jq_extends/methods/transitionEnd';
-import '../../jq_extends/static/guid';
-import { componentEvent } from '../../utils/componentEvent';
-import { $document, $window } from '../../utils/dom';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * 下拉选择组件
-     *
-     * 请通过 `new mdui.Select()` 调用
-     */
-    Select: {
-      /**
-       * 实例化 Select 组件
-       * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-       * @param options 配置参数
-       */
-      new (
-        selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-        options?: OPTIONS,
-      ): Select;
-    };
-  }
-}
-
-type OPTIONS = {
-  /**
-   * 下拉框位置：`auto`、`top`、`bottom`
-   */
-  position?: 'auto' | 'top' | 'bottom';
-
-  /**
-   * 菜单与窗口上下边框至少保持多少间距
-   */
-  gutter?: number;
-};
-
-type STATE = 'closing' | 'closed' | 'opening' | 'opened';
-type EVENT = 'open' | 'opened' | 'close' | 'closed';
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  position: 'auto',
-  gutter: 16,
-};
-
-class Select {
-  /**
-   * 原生 `<select>` 元素的 JQ 对象
-   */
-  public $native: JQ<HTMLSelectElement>;
-
-  /**
-   * 生成的 `<div class="mdui-select">` 元素的 JQ 对象
-   */
-  public $element: JQ = $();
-
-  /**
-   * 配置参数
-   */
-  public options: OPTIONS = extend({}, DEFAULT_OPTIONS);
-
-  /**
-   * select 的 size 属性的值，根据该值设置 select 的高度
-   */
-  private size = 0;
-
-  /**
-   * 占位元素，显示已选中菜单项的文本
-   */
-  private $selected: JQ = $();
-
-  /**
-   * 菜单项的外层元素的 JQ 对象
-   */
-  private $menu: JQ = $();
-
-  /**
-   * 菜单项数组的 JQ 对象
-   */
-  private $items: JQ = $();
-
-  /**
-   * 当前选中的菜单项的索引号
-   */
-  private selectedIndex = 0;
-
-  /**
-   * 当前选中菜单项的文本
-   */
-  private selectedText = '';
-
-  /**
-   * 当前选中菜单项的值
-   */
-  private selectedValue = '';
-
-  /**
-   * 唯一 ID
-   */
-  private uniqueID: string;
-
-  /**
-   * 当前 select 的状态
-   */
-  private state: STATE = 'closed';
-
-  public constructor(
-    selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    options: OPTIONS = {},
-  ) {
-    this.$native = $(selector).first() as JQ<HTMLSelectElement>;
-    this.$native.hide();
-
-    extend(this.options, options);
-
-    // 为当前 select 生成唯一 ID
-    this.uniqueID = $.guid();
-
-    // 生成 select
-    this.handleUpdate();
-
-    // 点击 select 外面区域关闭
-    $document.on('click touchstart', (event: Event) => {
-      const $target = $(event.target as HTMLElement);
-
-      if (
-        this.isOpen() &&
-        !$target.is(this.$element) &&
-        !contains(this.$element[0], $target[0])
-      ) {
-        this.close();
-      }
-    });
-  }
-
-  /**
-   * 调整菜单位置
-   */
-  private readjustMenu(): void {
-    const windowHeight = $window.height();
-
-    // mdui-select 高度
-    const elementHeight = this.$element.height();
-
-    // 菜单项高度
-    const $itemFirst = this.$items.first();
-    const itemHeight = $itemFirst.height();
-    const itemMargin = parseInt($itemFirst.css('margin-top'));
-
-    // 菜单高度
-    const menuWidth = this.$element.innerWidth() + 0.01; // 必须比真实宽度多一点，不然会出现省略号
-    let menuHeight = itemHeight * this.size + itemMargin * 2;
-
-    // mdui-select 在窗口中的位置
-    const elementTop = this.$element[0].getBoundingClientRect().top;
-
-    let transformOriginY: string;
-    let menuMarginTop: number;
-
-    if (this.options.position === 'bottom') {
-      menuMarginTop = elementHeight;
-      transformOriginY = '0px';
-    } else if (this.options.position === 'top') {
-      menuMarginTop = -menuHeight - 1;
-      transformOriginY = '100%';
-    } else {
-      // 菜单高度不能超过窗口高度
-      const menuMaxHeight = windowHeight - this.options.gutter! * 2;
-      if (menuHeight > menuMaxHeight) {
-        menuHeight = menuMaxHeight;
-      }
-
-      // 菜单的 margin-top
-      menuMarginTop = -(
-        itemMargin +
-        this.selectedIndex * itemHeight +
-        (itemHeight - elementHeight) / 2
-      );
-
-      const menuMaxMarginTop = -(
-        itemMargin +
-        (this.size - 1) * itemHeight +
-        (itemHeight - elementHeight) / 2
-      );
-      if (menuMarginTop < menuMaxMarginTop) {
-        menuMarginTop = menuMaxMarginTop;
-      }
-
-      // 菜单不能超出窗口
-      const menuTop = elementTop + menuMarginTop;
-      if (menuTop < this.options.gutter!) {
-        // 不能超出窗口上方
-        menuMarginTop = -(elementTop - this.options.gutter!);
-      } else if (menuTop + menuHeight + this.options.gutter! > windowHeight) {
-        // 不能超出窗口下方
-        menuMarginTop = -(
-          elementTop +
-          menuHeight +
-          this.options.gutter! -
-          windowHeight
-        );
-      }
-
-      // transform 的 Y 轴坐标
-      transformOriginY = `${
-        this.selectedIndex * itemHeight + itemHeight / 2 + itemMargin
-      }px`;
-    }
-
-    // 设置样式
-    this.$element.innerWidth(menuWidth);
-    this.$menu
-      .innerWidth(menuWidth)
-      .height(menuHeight)
-      .css({
-        'margin-top': menuMarginTop + 'px',
-        'transform-origin': 'center ' + transformOriginY + ' 0',
-      });
-  }
-
-  /**
-   * select 是否为打开状态
-   */
-  private isOpen(): boolean {
-    return this.state === 'opening' || this.state === 'opened';
-  }
-
-  /**
-   * 对原生 select 组件进行了修改后，需要调用该方法
-   */
-  public handleUpdate(): void {
-    if (this.isOpen()) {
-      this.close();
-    }
-
-    this.selectedValue = this.$native.val() as string;
-
-    // 保存菜单项数据的数组
-    type typeItemsData = {
-      value: string;
-      text: string;
-      disabled: boolean;
-      selected: boolean;
-      index: number;
-    };
-    const itemsData: typeItemsData[] = [];
-    this.$items = $();
-
-    // 生成 HTML
-    this.$native.find('option').each((index, option) => {
-      const text = option.textContent || '';
-      const value = option.value;
-      const disabled = option.disabled;
-      const selected = this.selectedValue === value;
-
-      itemsData.push({
-        value,
-        text,
-        disabled,
-        selected,
-        index,
-      });
-
-      if (selected) {
-        this.selectedText = text;
-        this.selectedIndex = index;
-      }
-
-      this.$items = this.$items.add(
-        '<div class="mdui-select-menu-item mdui-ripple"' +
-          (disabled ? ' disabled' : '') +
-          (selected ? ' selected' : '') +
-          `>${text}</div>`,
-      );
-    });
-
-    this.$selected = $(
-      `<span class="mdui-select-selected">${this.selectedText}</span>`,
-    );
-
-    this.$element = $(
-      `<div class="mdui-select mdui-select-position-${this.options.position}" ` +
-        `style="${this.$native.attr('style')}" ` +
-        `id="${this.uniqueID}"></div>`,
-    )
-      .show()
-      .append(this.$selected);
-
-    this.$menu = $('<div class="mdui-select-menu"></div>')
-      .appendTo(this.$element)
-      .append(this.$items);
-
-    $(`#${this.uniqueID}`).remove();
-    this.$native.after(this.$element);
-
-    // 根据 select 的 size 属性设置高度
-    this.size = parseInt(this.$native.attr('size') || '0');
-
-    if (this.size <= 0) {
-      this.size = this.$items.length;
-
-      if (this.size > 8) {
-        this.size = 8;
-      }
-    }
-
-    // 点击选项时关闭下拉菜单
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const that = this;
-    this.$items.on('click', function () {
-      if (that.state === 'closing') {
-        return;
-      }
-
-      const $item = $(this);
-      const index = $item.index();
-      const data = itemsData[index];
-
-      if (data.disabled) {
-        return;
-      }
-
-      that.$selected.text(data.text);
-      that.$native.val(data.value);
-      that.$items.removeAttr('selected');
-      $item.attr('selected', '');
-      that.selectedIndex = data.index;
-      that.selectedValue = data.value;
-      that.selectedText = data.text;
-      that.$native.trigger('change');
-      that.close();
-    });
-
-    // 点击 $element 时打开下拉菜单
-    this.$element.on('click', (event: Event) => {
-      const $target = $(event.target as HTMLElement);
-
-      // 在菜单上点击时不打开
-      if (
-        $target.is('.mdui-select-menu') ||
-        $target.is('.mdui-select-menu-item')
-      ) {
-        return;
-      }
-
-      this.toggle();
-    });
-  }
-
-  /**
-   * 动画结束的回调
-   */
-  private transitionEnd(): void {
-    this.$element.removeClass('mdui-select-closing');
-
-    if (this.state === 'opening') {
-      this.state = 'opened';
-      this.triggerEvent('opened');
-      this.$menu.css('overflow-y', 'auto');
-    }
-
-    if (this.state === 'closing') {
-      this.state = 'closed';
-      this.triggerEvent('closed');
-
-      // 恢复样式
-      this.$element.innerWidth('');
-      this.$menu.css({
-        'margin-top': '',
-        height: '',
-        width: '',
-      });
-    }
-  }
-
-  /**
-   * 触发组件事件
-   * @param name
-   */
-  private triggerEvent(name: EVENT): void {
-    componentEvent(name, 'select', this.$native, this);
-  }
-
-  /**
-   * 切换下拉菜单的打开状态
-   */
-  public toggle(): void {
-    this.isOpen() ? this.close() : this.open();
-  }
-
-  /**
-   * 打开下拉菜单
-   */
-  public open(): void {
-    if (this.isOpen()) {
-      return;
-    }
-
-    this.state = 'opening';
-    this.triggerEvent('open');
-    this.readjustMenu();
-    this.$element.addClass('mdui-select-open');
-    this.$menu.transitionEnd(() => this.transitionEnd());
-  }
-
-  /**
-   * 关闭下拉菜单
-   */
-  public close(): void {
-    if (!this.isOpen()) {
-      return;
-    }
-
-    this.state = 'closing';
-    this.triggerEvent('close');
-    this.$menu.css('overflow-y', '');
-    this.$element
-      .removeClass('mdui-select-open')
-      .addClass('mdui-select-closing');
-    this.$menu.transitionEnd(() => this.transitionEnd());
-  }
-
-  /**
-   * 获取当前菜单的状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-   */
-  public getState(): STATE {
-    return this.state;
-  }
-}
-
-mdui.Select = Select;

package/src/components/select/svg/arrow_down_dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="m-0.00254,2.5l5,5l5,-5l-10,0z" fill="#000000" opacity="0.54"/></svg>

package/src/components/select/svg/arrow_down_light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="m-0.00254,2.5l5,5l5,-5l-10,0z" fill="#FFFFFF"/></svg>

package/src/components/select/svg/arrow_up_dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="m-0.00254,2.5l5,5l5,-5l-10,0z" fill="#000000" opacity="0.54" transform="rotate(-180 5,5)"/></svg>

package/src/components/select/svg/arrow_up_light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="m-0.00254,2.5l5,5l5,-5l-10,0z" fill="#FFFFFF" transform="rotate(-180 5,5)"/></svg>

package/src/components/selection_control/checkbox.less

@@ -1,226 +0,0 @@
-/**
- * =============================================================================
- * ************   Checkbox 复选框   ************
- * =============================================================================
- */
-
-.mdui-checkbox {
-  position: relative;
-  display: inline-block;
-  height: 36px;
-  padding-left: 36px;
-  line-height: 36px;
-  cursor: pointer;
-  user-select: none;
-
-  // 隐藏系统 input 标签，用自定义的图标代替
-  input[type="checkbox"] {
-    position: absolute;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    opacity: 0;
-  }
-}
-
-/* 透明的圆形，用于生成圆形阴影 */
-.mdui-checkbox-icon {
-  position: absolute;
-  top: 9px;
-  left: 0;
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  vertical-align: middle;
-  background-color: transparent;
-  border: none;
-  border-radius: 18px;
-  transition: box-shadow .14s @animation-curve-default;
-
-  // 图标的边框和背景
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-    border: 2px solid @color-black-icon;
-    border-radius: 2px;
-    transition: all .3s @animation-curve-default;
-    content: ' ';
-  }
-
-  // 选中状态图标内部的勾
-  &::before {
-    position: absolute;
-    top: 2px;
-    left: 0;
-    z-index: 1;
-    box-sizing: border-box;
-    width: 8px;
-    height: 13px;
-    border-right: 2px solid #fff;
-    border-bottom: 2px solid #fff;
-    transform: rotateZ(37deg) scale(0);
-    transform-origin: 100% 100%;
-    opacity: 0;
-    transition: all .3s @animation-curve-default;
-    content: ' ';
-  }
-}
-
-/* 各种状态的图标 */
-.mdui-checkbox input[type="checkbox"] {
-
-  // 选中状态的图标
-  &:checked + .mdui-checkbox-icon {
-    &::after {
-      background-color: @color-default-a200;
-      border-color: @color-default-a200;
-    }
-
-    &::before {
-      transform: rotateZ(37deg) scale(1);
-      opacity: 1;
-    }
-  }
-
-  // 不确定状态的图标
-  &:indeterminate + .mdui-checkbox-icon {
-    &::after {
-      background-color: @color-default-a200;
-      border-color: @color-default-a200;
-    }
-
-    &::before {
-      top: 8px;
-      left: 3px;
-      width: 12px;
-      height: 0;
-      border-right: none;
-      border-bottom: 2px solid #fff;
-      border-radius: 1px;
-      transform: rotateZ(0) scale(1);
-      opacity: 1;
-    }
-  }
-
-  // 禁用状态的图标
-  &:disabled + .mdui-checkbox-icon {
-    &::after {
-      border-color: @color-black-icon-disabled;
-    }
-  }
-
-  // 禁用且选中状态
-  &:disabled:checked + .mdui-checkbox-icon,
-  &:disabled:indeterminate + .mdui-checkbox-icon {
-    &::after {
-      background-color: @color-black-icon-disabled !important;
-      border-color: transparent !important;
-    }
-  }
-}
-
-/* 阴影 */
-.mdui-checkbox:active input[type="checkbox"],
-.mdui-checkbox input[type="checkbox"]:focus {
-  // 未选中、禁用时 按下的阴影
-  & + .mdui-checkbox-icon {
-    box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.1);
-  }
-
-  // 已选中时按下的阴影
-  &:not(:disabled):checked,
-  &:not(:disabled):indeterminate {
-    & + .mdui-checkbox-icon {
-      box-shadow: 0 0 0 15px rgba(red(@color-default-a200), green(@color-default-a200), blue(@color-default-a200), 0.16);
-    }
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Checkbox 强调色   ************
- * =============================================================================
- */
-
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    @color: 'color-@{colorName}-a200';
-
-    .mdui-theme-accent-@{colorName} when not (@colorName = null) {
-
-      // 选中状态的图标
-      .mdui-checkbox input[type="checkbox"]:checked,
-      .mdui-checkbox input[type="checkbox"]:indeterminate {
-        & + .mdui-checkbox-icon::after {
-          background-color: @@color;
-          border-color: @@color;
-        }
-      }
-
-      // 已选中时按下的阴影
-      .mdui-checkbox:active input[type="checkbox"],
-      .mdui-checkbox input[type="checkbox"]:focus {
-        &:not(:disabled):checked + .mdui-checkbox-icon,
-        &:not(:disabled):indeterminate + .mdui-checkbox-icon {
-          box-shadow: 0 0 0 15px rgba(red(@@color), green(@@color), blue(@@color), 0.16);
-        }
-      }
-    }
-  }
-  .loop-accent-theme(length(@globalAccentColors));
-}
-
-
-/**
- * =============================================================================
- * ************   Checkbox dark   ************
- * =============================================================================
- */
-.layout-theme({
-  // 未选中的图标
-  .mdui-checkbox-icon {
-    &::after {
-      border-color: rgba(255, 255, 255, 0.7);
-    }
-
-    &::before {
-      border-right-color: @layout-dark-color-3 !important;
-      border-bottom-color: @layout-dark-color-3 !important;
-    }
-  }
-
-  // 禁用状态
-  .mdui-checkbox input[type="checkbox"]:disabled + .mdui-checkbox-icon {
-    &::after {
-      border-color: @color-white-icon-disabled;
-    }
-  }
-
-  // 禁用且选中状态
-  .mdui-checkbox input[type="checkbox"] {
-    &:disabled:checked + .mdui-checkbox-icon,
-    &:disabled:indeterminate + .mdui-checkbox-icon {
-      &::after {
-        background-color: @color-white-icon-disabled !important;
-        border-color: transparent !important;
-      }
-    }
-  }
-
-  // 未选中或禁用时 按下的阴影
-  .mdui-checkbox:active input[type="checkbox"],
-  .mdui-checkbox input[type="checkbox"]:focus {
-    & + .mdui-checkbox-icon {
-      box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1);
-    }
-  }
-});