mdui 1.0.2 → 2.0.0

package/src/components/toolbar/index.less

@@ -1,92 +0,0 @@
-/**
- * =============================================================================
- * ************   Toolbar 工具栏   ************
- * =============================================================================
- */
-
-.mdui-toolbar {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  &>* {
-    margin: 0 16px;
-    .mdui-text-truncate();
-  }
-
-  // 工具栏默认有背景色时，工具栏中的按钮，hover 和 active 时颜色变浅
-  &[class*="mdui-color-"]:not(.mdui-color-transparent) {
-    .mdui-btn {
-      &:hover {
-        background-color: rgba(255, 255, 255, 0.1);
-      }
-      &:active {
-        background-color: rgba(255, 255, 255, 0.165);
-      }
-    }
-  }
-
-  &>a {
-    color: inherit;
-    text-decoration: none;
-    user-select: none;
-  }
-
-  &>.mdui-btn-icon {
-    width: @appbar-icon-width;
-    min-width: @appbar-icon-width;
-    height: @appbar-icon-width;
-
-    // 手机横屏时
-    @media (orientation: landscape) and (max-width: @screen-xs-max-landscape) {
-      width: @appbar-icon-width-xs-landscape;
-      min-width: @appbar-icon-width-xs-landscape;
-      height: @appbar-icon-width-xs-landscape;
-    }
-
-    .mdui-icon {
-      height: 24px;
-      line-height: 24px;
-    }
-  }
-
-  .mdui-icon {
-    color: inherit;
-  }
-}
-
-.mdui-toolbar-spacer {
-  flex-grow: 1;
-  margin: 0;
-}
-
-// 响应式。只有在应用栏中的工具栏，才具有响应式特性，不在应用栏中，则使用手机样式
-._toolbar_responsive_mixed(@toolbar-height, @icon-width) {
-  .mdui-toolbar {
-    height: @toolbar-height;
-    line-height: @toolbar-height;
-
-    &>.mdui-btn {
-      margin: 0 (@toolbar-height - @icon-width) / 2;
-
-      & + .mdui-btn {
-        margin-left: 0;
-      }
-    }
-  }
-}
-
-/* 手机 */
-._toolbar_responsive_mixed(@appbar-height-xs-portrait, @appbar-icon-width);
-
-.mdui-appbar {
-  // 平板和桌面
-  @media (min-width: @screen-sm-min) {
-    ._toolbar_responsive_mixed(@appbar-height-sm, @appbar-icon-width);
-  }
-
-  // 手机横屏
-  @media (orientation: landscape) and (max-width: @screen-xs-max-landscape) {
-    ._toolbar_responsive_mixed(@appbar-height-xs-landscape, @appbar-icon-width-xs-landscape);
-  }
-}

package/src/components/tooltip/customAttr.ts

@@ -1,26 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/on';
-import mdui from '../../mdui';
-import { $document } from '../../utils/dom';
-import { parseOptions } from '../../utils/parseOptions';
-import './index';
-
-const customAttr = 'mdui-tooltip';
-const dataName = '_mdui_tooltip';
-
-$(() => {
-  // mouseenter 不能冒泡，所以这里用 mouseover 代替
-  $document.on('touchstart mouseover', `[${customAttr}]`, function () {
-    const $target = $(this);
-    let instance = $target.data(dataName);
-
-    if (!instance) {
-      instance = new mdui.Tooltip(
-        this as HTMLElement,
-        parseOptions(this as HTMLElement, customAttr),
-      );
-      $target.data(dataName, instance);
-    }
-  });
-});

package/src/components/tooltip/index.less

@@ -1,45 +0,0 @@
-/**
- * =============================================================================
- * ************   Tooltip 工具提示   ************
- * =============================================================================
- */
-
-.mdui-tooltip {
-  position: absolute;
-  z-index: @z-index-tooltip;
-  display: inline-block;
-  box-sizing: border-box;
-  max-width: 180px;
-  min-height: 32px;
-  padding: 8px 16px;
-  color: #fff;
-  font-weight: 500;
-
-  // 移动端样式
-  font-size: 14px;
-  line-height: 22px;
-  text-align: left;
-  background-color: rgba(red(@color-grey-700), green(@color-grey-700), blue(@color-grey-700), 0.9);
-  border-radius: 2px;
-  transform: scale(0);
-  opacity: 0;
-  transition-timing-function: @animation-curve-default;
-  transition-duration: 0.15s;
-  transition-property: opacity, transform;
-  will-change: opacity, transform;
-
-  // 桌面端样式
-  @media (min-width: @screen-md-min) {
-    max-width: 200px;
-    min-height: 24px;
-    padding: 4px 8px;
-    font-size: 12px;
-    line-height: 18px;
-  }
-}
-
-/* 显示工具提示 */
-.mdui-tooltip-open {
-  transform: scale(1);
-  opacity: 1;
-}

package/src/components/tooltip/index.ts

@@ -1,361 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import extend from 'mdui.jq/es/functions/extend';
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/appendTo';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/css';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/height';
-import 'mdui.jq/es/methods/html';
-import 'mdui.jq/es/methods/offset';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/width';
-import Selector from 'mdui.jq/es/types/Selector';
-import mdui from '../../mdui';
-import '../../jq_extends/methods/transformOrigin';
-import '../../jq_extends/methods/transitionEnd';
-import '../../jq_extends/static/guid';
-import { componentEvent } from '../../utils/componentEvent';
-import { $window } from '../../utils/dom';
-import { isAllow, register, unlockEvent } from '../../utils/touchHandler';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * Tooltip 组件
-     *
-     * 请通过 `new mdui.Tooltip()` 调用
-     */
-    Tooltip: {
-      /**
-       * 实例化 Tooltip 组件
-       * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-       * @param options 配置参数
-       */
-      new (
-        selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-        options?: OPTIONS,
-      ): Tooltip;
-    };
-  }
-}
-
-type POSITION = 'auto' | 'bottom' | 'top' | 'left' | 'right';
-
-type OPTIONS = {
-  /**
-   * Tooltip 的位置。取值范围包括 `auto`、`bottom`、`top`、`left`、`right`。
-   * 为 `auto` 时，会自动判断位置。默认在下方。优先级为 `bottom` > `top` > `left` > `right`。
-   * 默认为 `auto`
-   */
-  position?: POSITION;
-
-  /**
-   * 延时触发，单位毫秒。默认为 `0`，即没有延时。
-   */
-  delay?: number;
-
-  /**
-   * Tooltip 的内容
-   */
-  content?: string;
-};
-
-type STATE = 'opening' | 'opened' | 'closing' | 'closed';
-type EVENT = 'open' | 'opened' | 'close' | 'closed';
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  position: 'auto',
-  delay: 0,
-  content: '',
-};
-
-class Tooltip {
-  /**
-   * 触发 tooltip 元素的 JQ 对象
-   */
-  public $target: JQ;
-
-  /**
-   * tooltip 元素的 JQ 对象
-   */
-  public $element: JQ;
-
-  /**
-   * 配置参数
-   */
-  public options: OPTIONS = extend({}, DEFAULT_OPTIONS);
-
-  /**
-   * 当前 tooltip 的状态
-   */
-  private state: STATE = 'closed';
-
-  /**
-   * setTimeout 的返回值
-   */
-  private timeoutId: any = null;
-
-  public constructor(
-    selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    options: OPTIONS = {},
-  ) {
-    this.$target = $(selector).first();
-
-    extend(this.options, options);
-
-    // 创建 Tooltip HTML
-    this.$element = $(
-      `<div class="mdui-tooltip" id="${$.guid()}">${
-        this.options.content
-      }</div>`,
-    ).appendTo(document.body);
-
-    // 绑定事件。元素处于 disabled 状态时无法触发鼠标事件，为了统一，把 touch 事件也禁用
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const that = this;
-    this.$target
-      .on('touchstart mouseenter', function (event) {
-        if (that.isDisabled(this as HTMLElement)) {
-          return;
-        }
-
-        if (!isAllow(event)) {
-          return;
-        }
-
-        register(event);
-
-        that.open();
-      })
-      .on('touchend mouseleave', function (event) {
-        if (that.isDisabled(this as HTMLElement)) {
-          return;
-        }
-
-        if (!isAllow(event)) {
-          return;
-        }
-
-        that.close();
-      })
-      .on(unlockEvent, function (event) {
-        if (that.isDisabled(this as HTMLElement)) {
-          return;
-        }
-
-        register(event);
-      });
-  }
-
-  /**
-   * 元素是否已禁用
-   * @param element
-   */
-  private isDisabled(element: HTMLElement): boolean {
-    return (
-      (element as HTMLInputElement).disabled ||
-      $(element).attr('disabled') !== undefined
-    );
-  }
-
-  /**
-   * 是否是桌面设备
-   */
-  private isDesktop(): boolean {
-    return $window.width() > 1024;
-  }
-
-  /**
-   * 设置 Tooltip 的位置
-   */
-  private setPosition(): void {
-    let marginLeft: number;
-    let marginTop: number;
-
-    // 触发的元素
-    const targetProps = this.$target[0].getBoundingClientRect();
-
-    // 触发的元素和 Tooltip 之间的距离
-    const targetMargin = this.isDesktop() ? 14 : 24;
-
-    // Tooltip 的宽度和高度
-    const tooltipWidth = this.$element[0].offsetWidth;
-    const tooltipHeight = this.$element[0].offsetHeight;
-
-    // Tooltip 的方向
-    let position: POSITION = this.options.position!;
-
-    // 自动判断位置，加 2px，使 Tooltip 距离窗口边框至少有 2px 的间距
-    if (position === 'auto') {
-      if (
-        targetProps.top +
-          targetProps.height +
-          targetMargin +
-          tooltipHeight +
-          2 <
-        $window.height()
-      ) {
-        position = 'bottom';
-      } else if (targetMargin + tooltipHeight + 2 < targetProps.top) {
-        position = 'top';
-      } else if (targetMargin + tooltipWidth + 2 < targetProps.left) {
-        position = 'left';
-      } else if (
-        targetProps.width + targetMargin + tooltipWidth + 2 <
-        $window.width() - targetProps.left
-      ) {
-        position = 'right';
-      } else {
-        position = 'bottom';
-      }
-    }
-
-    // 设置位置
-    switch (position) {
-      case 'bottom':
-        marginLeft = -1 * (tooltipWidth / 2);
-        marginTop = targetProps.height / 2 + targetMargin;
-        this.$element.transformOrigin('top center');
-        break;
-
-      case 'top':
-        marginLeft = -1 * (tooltipWidth / 2);
-        marginTop =
-          -1 * (tooltipHeight + targetProps.height / 2 + targetMargin);
-        this.$element.transformOrigin('bottom center');
-        break;
-
-      case 'left':
-        marginLeft = -1 * (tooltipWidth + targetProps.width / 2 + targetMargin);
-        marginTop = -1 * (tooltipHeight / 2);
-        this.$element.transformOrigin('center right');
-        break;
-
-      case 'right':
-        marginLeft = targetProps.width / 2 + targetMargin;
-        marginTop = -1 * (tooltipHeight / 2);
-        this.$element.transformOrigin('center left');
-        break;
-    }
-
-    const targetOffset = this.$target.offset();
-
-    this.$element.css({
-      top: `${targetOffset.top + targetProps.height / 2}px`,
-      left: `${targetOffset.left + targetProps.width / 2}px`,
-      'margin-left': `${marginLeft}px`,
-      'margin-top': `${marginTop}px`,
-    });
-  }
-
-  /**
-   * 触发组件事件
-   * @param name
-   */
-  private triggerEvent(name: EVENT): void {
-    componentEvent(name, 'tooltip', this.$target, this);
-  }
-
-  /**
-   * 动画结束回调
-   */
-  private transitionEnd(): void {
-    if (this.$element.hasClass('mdui-tooltip-open')) {
-      this.state = 'opened';
-      this.triggerEvent('opened');
-    } else {
-      this.state = 'closed';
-      this.triggerEvent('closed');
-    }
-  }
-
-  /**
-   * 当前 tooltip 是否为打开状态
-   */
-  private isOpen(): boolean {
-    return this.state === 'opening' || this.state === 'opened';
-  }
-
-  /**
-   * 执行打开 tooltip
-   */
-  private doOpen(): void {
-    this.state = 'opening';
-    this.triggerEvent('open');
-
-    this.$element
-      .addClass('mdui-tooltip-open')
-      .transitionEnd(() => this.transitionEnd());
-  }
-
-  /**
-   * 打开 Tooltip
-   * @param options 允许每次打开时设置不同的参数
-   */
-  public open(options?: OPTIONS): void {
-    if (this.isOpen()) {
-      return;
-    }
-
-    const oldOptions = extend({}, this.options);
-
-    if (options) {
-      extend(this.options, options);
-    }
-
-    // tooltip 的内容有更新
-    if (oldOptions.content !== this.options.content) {
-      this.$element.html(this.options.content);
-    }
-
-    this.setPosition();
-
-    if (this.options.delay) {
-      this.timeoutId = setTimeout(() => this.doOpen(), this.options.delay);
-    } else {
-      this.timeoutId = null;
-      this.doOpen();
-    }
-  }
-
-  /**
-   * 关闭 Tooltip
-   */
-  public close(): void {
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-      this.timeoutId = null;
-    }
-
-    if (!this.isOpen()) {
-      return;
-    }
-
-    this.state = 'closing';
-    this.triggerEvent('close');
-
-    this.$element
-      .removeClass('mdui-tooltip-open')
-      .transitionEnd(() => this.transitionEnd());
-  }
-
-  /**
-   * 切换 Tooltip 的打开状态
-   */
-  public toggle(): void {
-    this.isOpen() ? this.close() : this.open();
-  }
-
-  /**
-   * 获取 Tooltip 状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-   */
-  public getState(): STATE {
-    return this.state;
-  }
-}
-
-mdui.Tooltip = Tooltip;