mdui 1.0.2 → 2.0.0

package/src/components/fab/index.less

@@ -1,158 +0,0 @@
-/**
- * =============================================================================
- * ************   Fab 浮动操作按钮   ************
- * =============================================================================
- */
-
-@import '../button/index';
-
-@fab-size: 56px;
-@fab-size-mini: 40px;
-
-/* 浮动操作按钮 */
-.mdui-fab {
-  width: @fab-size;
-  min-width: @fab-size;
-  height: @fab-size;
-  margin: auto;
-  padding: 0 !important;
-  overflow: hidden;
-  font-size: 24px;
-  line-height: normal !important;
-  border-radius: 50%;
-  .mdui-shadow(6);
-
-  &:hover{
-    .mdui-shadow(8);
-  }
-
-  &:active {
-    .mdui-shadow(12);
-  }
-
-  // 浮动操作按钮中的图标
-  .mdui-icon {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 24px;
-    margin-top: 16px;
-    margin-left: 16px;
-    line-height: 24px;
-  }
-}
-
-/* mini 型浮动操作按钮 */
-.mdui-fab-mini {
-  width: @fab-size-mini;
-  min-width: @fab-size-mini;
-  height: @fab-size-mini;
-
-  // mini 型浮动操作按钮中的图标
-  .mdui-icon {
-    margin-top: 8px;
-    margin-left: 8px;
-  }
-}
-
-/* 固定到右下角的 FAB 按钮 */
-.mdui-fab-fixed,
-.mdui-fab-wrapper {
-  position: fixed !important;
-
-  /* 手机平板上距离屏幕右下角 16px */
-  right: 16px;
-  bottom: 16px;
-
-  @media (min-width: @screen-md-min) {
-    /* 电脑上距离屏幕右下角 24px */
-    right: 24px;
-    bottom: 24px;
-  }
-}
-
-/* 含菜单的浮动操作按钮 */
-.mdui-fab-wrapper {
-  position: relative;
-  z-index: @z-index-fab;
-  width: @fab-size;
-  height: @fab-size;
-  padding-top: 8px;
-  text-align: center;
-
-  // 菜单打开前
-  &>.mdui-fab {
-    .mdui-icon:not(.mdui-fab-opened) {
-      opacity: 1;
-      transition: all .2s @animation-curve-default;
-      will-change: opacity, transform;
-    }
-    .mdui-icon.mdui-fab-opened {
-      transform: rotate(225deg);
-      opacity: 0;
-      transition: all .2s @animation-curve-default;
-      will-change: opacity, transform;
-    }
-  }
-
-  // 菜单打开后
-  &>.mdui-fab.mdui-fab-opened {
-    .mdui-icon:not(.mdui-fab-opened) {
-      transform: rotate(225deg);
-      opacity: 0;
-    }
-    .mdui-icon.mdui-fab-opened {
-      transform: rotate(360deg);
-      opacity: 1;
-    }
-  }
-
-  // mini 按钮需要垂直居中
-  &>.mdui-fab-mini {
-    margin-top: (@fab-size - @fab-size-mini) / 2;
-  }
-
-  .mdui-fab-dial {
-    position: absolute;
-    right: 0;
-    bottom: @fab-size + 8px;
-    left: 0;
-    height: 0;
-    text-align: center;
-    visibility: visible;
-
-    .mdui-fab {
-      margin: 8px 0;
-      transform: scale(0);
-      opacity: 0;
-      transition: box-shadow .2s @animation-curve-fast-out-linear-in,
-                  color .2s @animation-curve-default,
-                  // fab
-                  transform 150ms @animation-curve-default,
-                  opacity 150ms @animation-curve-default;
-    }
-
-    &.mdui-fab-dial-show {
-      .mdui-fab {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-  }
-}
-
-/* 添加类 .mdui-fab-hide 以动画的形式隐藏按钮 */
-.mdui-fab,
-.mdui-fab-mini,
-.mdui-fab-wrapper {
-  transform: scale(1) translateZ(0);
-  transition: all .2s @animation-curve-default,
-              box-shadow .2s @animation-curve-fast-out-linear-in,
-                // fab
-              transform .2s;
-  will-change: transform;
-
-  &.mdui-fab-hide {
-    transform: scale(0) translateZ(0);
-  }
-}

package/src/components/fab/index.ts

@@ -1,232 +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/css';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/last';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/removeClass';
-import Selector from 'mdui.jq/es/types/Selector';
-import mdui from '../../mdui';
-import '../../jq_extends/methods/transitionEnd';
-import { componentEvent } from '../../utils/componentEvent';
-import { $document } from '../../utils/dom';
-import { startEvent } from '../../utils/touchHandler';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * 浮动操作按钮组件
-     *
-     * 请通过 `new mdui.Fab()` 调用
-     */
-    Fab: {
-      /**
-       * 实例化 Fab 组件
-       * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-       * @param options 配置参数
-       */
-      new (
-        selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-        options?: OPTIONS,
-      ): Fab;
-    };
-  }
-}
-
-type OPTIONS = {
-  /**
-   * 触发方式。`hover`: 鼠标悬浮触发；`click`: 点击触发
-   *
-   * 默认为 `hover`
-   */
-  trigger?: 'click' | 'hover';
-};
-
-type STATE = 'opening' | 'opened' | 'closing' | 'closed';
-type EVENT = 'open' | 'opened' | 'close' | 'closed';
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  trigger: 'hover',
-};
-
-class Fab {
-  /**
-   * Fab 元素的 JQ 对象
-   */
-  public $element: JQ;
-
-  /**
-   * 配置参数
-   */
-  public options: OPTIONS = extend({}, DEFAULT_OPTIONS);
-
-  /**
-   * 当前 fab 的状态
-   */
-  private state: STATE = 'closed';
-
-  /**
-   * 按钮元素
-   */
-  private $btn: JQ;
-
-  /**
-   * 拨号菜单元素
-   */
-  private $dial: JQ;
-
-  /**
-   * 拨号菜单内的按钮
-   */
-  private $dialBtns: JQ;
-
-  public constructor(
-    selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    options: OPTIONS = {},
-  ) {
-    this.$element = $(selector).first();
-
-    extend(this.options, options);
-
-    this.$btn = this.$element.find('.mdui-fab');
-    this.$dial = this.$element.find('.mdui-fab-dial');
-    this.$dialBtns = this.$dial.find('.mdui-fab');
-
-    if (this.options.trigger === 'hover') {
-      this.$btn.on('touchstart mouseenter', () => this.open());
-      this.$element.on('mouseleave', () => this.close());
-    }
-
-    if (this.options.trigger === 'click') {
-      this.$btn.on(startEvent, () => this.open());
-    }
-
-    // 触摸屏幕其他地方关闭快速拨号
-    $document.on(startEvent, (event) => {
-      if ($(event.target as HTMLElement).parents('.mdui-fab-wrapper').length) {
-        return;
-      }
-
-      this.close();
-    });
-  }
-
-  /**
-   * 触发组件事件
-   * @param name
-   */
-  private triggerEvent(name: EVENT): void {
-    componentEvent(name, 'fab', this.$element, this);
-  }
-
-  /**
-   * 当前是否为打开状态
-   */
-  private isOpen(): boolean {
-    return this.state === 'opening' || this.state === 'opened';
-  }
-
-  /**
-   * 打开快速拨号菜单
-   */
-  public open(): void {
-    if (this.isOpen()) {
-      return;
-    }
-
-    // 为菜单中的按钮添加不同的 transition-delay
-    this.$dialBtns.each((index, btn) => {
-      const delay = `${15 * (this.$dialBtns.length - index)}ms`;
-
-      btn.style.transitionDelay = delay;
-      btn.style.webkitTransitionDelay = delay;
-    });
-
-    this.$dial.css('height', 'auto').addClass('mdui-fab-dial-show');
-
-    // 如果按钮中存在 .mdui-fab-opened 的图标，则进行图标切换
-    if (this.$btn.find('.mdui-fab-opened').length) {
-      this.$btn.addClass('mdui-fab-opened');
-    }
-
-    this.state = 'opening';
-    this.triggerEvent('open');
-
-    // 打开顺序为从下到上逐个打开，最上面的打开后才表示动画完成
-    this.$dialBtns.first().transitionEnd(() => {
-      if (this.$btn.hasClass('mdui-fab-opened')) {
-        this.state = 'opened';
-        this.triggerEvent('opened');
-      }
-    });
-  }
-
-  /**
-   * 关闭快速拨号菜单
-   */
-  public close(): void {
-    if (!this.isOpen()) {
-      return;
-    }
-
-    // 为菜单中的按钮添加不同的 transition-delay
-    this.$dialBtns.each((index, btn) => {
-      const delay = `${15 * index}ms`;
-
-      btn.style.transitionDelay = delay;
-      btn.style.webkitTransitionDelay = delay;
-    });
-
-    this.$dial.removeClass('mdui-fab-dial-show');
-    this.$btn.removeClass('mdui-fab-opened');
-    this.state = 'closing';
-    this.triggerEvent('close');
-
-    // 从上往下依次关闭，最后一个关闭后才表示动画完成
-    this.$dialBtns.last().transitionEnd(() => {
-      if (this.$btn.hasClass('mdui-fab-opened')) {
-        return;
-      }
-
-      this.state = 'closed';
-      this.triggerEvent('closed');
-      this.$dial.css('height', 0);
-    });
-  }
-
-  /**
-   * 切换快速拨号菜单的打开状态
-   */
-  public toggle(): void {
-    this.isOpen() ? this.close() : this.open();
-  }
-
-  /**
-   * 以动画的形式显示整个浮动操作按钮
-   */
-  public show(): void {
-    this.$element.removeClass('mdui-fab-hide');
-  }
-
-  /**
-   * 以动画的形式隐藏整个浮动操作按钮
-   */
-  public hide(): void {
-    this.$element.addClass('mdui-fab-hide');
-  }
-
-  /**
-   * 返回当前快速拨号菜单的打开状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-   */
-  public getState(): STATE {
-    return this.state;
-  }
-}
-
-mdui.Fab = Fab;

package/src/components/grid_list/index.less

@@ -1,126 +0,0 @@
-/**
- * =============================================================================
- * ************   Grid List 网格列表   ************
- * =============================================================================
- */
-
-/* 调整网格边距 */
-.mdui-grid-list {
-  margin: 0 -@grid-list-gutter / 2;
-
-  .mdui-col,
-  [class*="mdui-col-xs-"],
-  [class*="mdui-col-sm-"],
-  [class*="mdui-col-md-"],
-  [class*="mdui-col-lg-"],
-  [class*="mdui-col-xl-"] {
-    padding-right: @grid-list-gutter / 2;
-    padding-left: @grid-list-gutter / 2;
-  }
-}
-
-/* 单元格 */
-.mdui-grid-tile {
-  position: relative;
-  box-sizing: border-box;
-  margin-bottom: @grid-list-gutter;
-  overflow: hidden;
-
-  img {
-    display: block;
-    width: 100%;
-  }
-}
-
-/* 操作栏 */
-.mdui-grid-tile-actions {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  min-height: 48px;
-  max-height: 68px;
-  padding: 16px;
-  color: #fff;
-  background: rgba(0, 0, 0, 0.2);
-
-  .mdui-icon {
-    color: #fff;
-  }
-}
-
-/* 操作栏内的文本 */
-.mdui-grid-tile-text {
-  flex: 1;
-  overflow: hidden;
-}
-
-/* 标题 */
-.mdui-grid-tile-title {
-  height: 16px;
-  font-size: 16px;
-  line-height: 16px;
-  .mdui-text-truncate();
-
-  .mdui-icon {
-    margin-right: 8px;
-  }
-}
-
-/* 副标题 */
-.mdui-grid-tile-subtitle {
-  height: 18px;
-  margin-top: 4px;
-  font-size: 12px;
-  line-height: 18px;
-  .mdui-text-truncate();
-
-  .mdui-icon {
-    margin-right: 8px;
-    font-size: 18px;
-  }
-}
-
-/* 操作栏内的按钮 */
-.mdui-grid-tile-buttons {
-  flex: none;
-  margin: -8px;
-  white-space: nowrap;
-
-  .mdui-btn {
-    margin-left: 8px;
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-}
-
-.mdui-grid-tile-text + .mdui-grid-tile-buttons {
-  margin-left: 8px;
-}
-.mdui-grid-tile-buttons + .mdui-grid-tile-text {
-  margin-left: 16px;
-}
-
-/* 操作栏位于顶部 */
-.mdui-grid-tile-actions-top {
-  top: 0;
-  bottom: auto;
-}
-
-/* 操作栏背景透明 */
-.mdui-grid-tile-actions-transparent {
-  background: transparent;
-}
-
-/* 操作栏背景渐变 */
-.mdui-grid-tile-actions-gradient {
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
-
-  &.mdui-grid-tile-actions-top {
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
-  }
-}

package/src/components/headroom/customAttr.ts

@@ -1,13 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import mdui from '../../mdui';
-import '../../global/mutation';
-import { parseOptions } from '../../utils/parseOptions';
-import './index';
-
-const customAttr = 'mdui-headroom';
-
-$(() => {
-  mdui.mutation(`[${customAttr}]`, function () {
-    new mdui.Headroom(this, parseOptions(this, customAttr));
-  });
-});

package/src/components/headroom/index.less

@@ -1,51 +0,0 @@
-/**
- * =============================================================================
- * ************   Headroom   ************
- * =============================================================================
- */
-
- .mdui-headroom {
-  transition: all .3s @animation-curve-default !important;
-}
-
-/* 固定在顶部时 */
-.mdui-headroom-pinned-top {
-  transform: translate3d(0, 0, 0) !important;
-}
-
-/* 在顶部隐藏时 */
-.mdui-headroom-unpinned-top {
-  transform: translate3d(0, -100%, 0) !important;
-  .mdui-shadow(0) !important;
-}
-
-/* 固定在底部时 */
-.mdui-headroom-pinned-down {
-  transform: translate3d(0, 0, 0) !important;
-}
-
-/* 在底部隐藏时 */
-.mdui-headroom-unpinned-down {
-  transform: translate3d(0, 100%, 0) !important;
-  .mdui-shadow(0) !important;
-}
-
-/* 固定应用栏中的工具栏 */
-.mdui-headroom-pinned-toolbar {
-  transform: translate3d(0, 0, 0) !important;
-}
-
-/* 隐藏应用栏中的工具栏 */
-.mdui-headroom-unpinned-toolbar {
-  transform: translate3d(0, -@appbar-height-xs-portrait, 0) !important;
-
-  // 平板和桌面
-  @media (min-width: @screen-sm-min) {
-    transform: translate3d(0, -@appbar-height-sm, 0) !important;
-  }
-
-  // 手机横屏
-  @media (orientation: landscape) and (max-width: @screen-xs-max-landscape) {
-    transform: translate3d(0, -@appbar-height-xs-landscape, 0) !important;
-  }
-}