mdui 1.0.2 → 2.0.1

package/src/components/divider/index.less

@@ -1,49 +0,0 @@
-/**
- * =============================================================================
- * ************   Divider 分割线   ************
- * =============================================================================
- */
-
-.mdui-divider,
-.mdui-divider-light,
-.mdui-divider-dark,
-.mdui-divider-inset,
-.mdui-divider-inset-light,
-.mdui-divider-inset-dark {
-  height: 1px;
-  margin: -1px 0 0 0;
-  border: none;
-}
-
-.mdui-divider-inset,
-.mdui-divider-inset-light,
-.mdui-divider-inset-dark {
-  margin-left: 72px;
-}
-
-.mdui-divider,
-.mdui-divider-inset {
-  background-color: @color-black-divider;
-}
-
-.mdui-divider-light,
-.mdui-divider-inset-light {
-  background-color: @color-white-divider;
-}
-
-.mdui-divider-dark,
-.mdui-divider-inset-dark {
-  background-color: @color-black-divider;
-}
-
-/**
- * =============================================================================
- * ************   Divider dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-divider,
-  .mdui-divider-inset {
-    background-color: @color-white-divider;
-  }
-});

package/src/components/drawer/customAttr.ts

@@ -1,30 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/on';
-import mdui from '../../mdui';
-import '../../global/mutation';
-import { parseOptions } from '../../utils/parseOptions';
-import './index';
-
-const customAttr = 'mdui-drawer';
-
-type OPTIONS = {
-  target: string;
-  overlay?: boolean;
-  swipe?: boolean;
-};
-
-$(() => {
-  mdui.mutation(`[${customAttr}]`, function () {
-    const $element = $(this);
-    const options = parseOptions(this, customAttr) as OPTIONS;
-    const selector = options.target;
-    // @ts-ignore
-    delete options.target;
-
-    const $drawer = $(selector).first();
-    const instance = new mdui.Drawer($drawer, options);
-
-    $element.on('click', () => instance.toggle());
-  });
-});

package/src/components/drawer/index.less

@@ -1,177 +0,0 @@
-/**
- * =============================================================================
- * ************   Drawer 抽屉栏导航   ************
- * =============================================================================
- */
-
-/* DOM 加载完后再添加 transition */
-body.mdui-loaded {
-  transition: padding .3s @animation-curve-linear-out-slow-in;
-}
-body.mdui-loaded .mdui-drawer {
-  transition: all .3s @animation-curve-linear-out-slow-in;
-}
-
-/* 抽屉栏外层，默认出现在左侧且隐藏 */
-.mdui-drawer {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: @z-index-drawer;
-  box-sizing: border-box;
-
-  // 手机端宽度为 100% - 56px，最大为 280px
-  /* stylelint-disable-next-line */
-  width: calc(~"100% - 56px");
-  max-width: @drawer-width-xs;
-  margin: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  white-space: nowrap;
-  will-change: transform;
-  -webkit-overflow-scrolling: touch;
-
-  // 隐藏时不显示阴影
-  @media (max-width: @screen-sm-max) {
-    &:not(.mdui-drawer-open) {
-      box-shadow: none !important;
-    }
-  }
-
-  // 平板端宽度为 100% - 64px，最大为 320px
-  @media (min-width: @screen-sm-min) {
-    /* stylelint-disable-next-line */
-    width: calc(~"100% - 64px");
-    max-width: @drawer-width-sm;
-  }
-
-  // 桌面端宽度
-  @media (min-width: @screen-md-min) {
-    width: @drawer-width-md;
-    max-width: none;
-
-    // 隐藏时不显示阴影
-    &.mdui-drawer-close {
-      box-shadow: none !important;
-    }
-  }
-}
-
-/* 出现在右侧的抽屉栏 */
-.mdui-drawer-right {
-  right: 0;
-  left: auto;
-}
-
-/* 平板上的样式 */
-@media (max-width: @screen-sm-max) {
-  .mdui-drawer {
-    /* 始终有背景和阴影 */
-    background-color: #fff;
-
-    /* 默认隐藏 */
-    transform: translateX(-@drawer-width-sm - 10);
-    .mdui-shadow(16);
-  }
-
-  .mdui-drawer-right {
-    /* 右侧 drawer 也默认隐藏 */
-    transform: translateX(@drawer-width-sm + 10);
-  }
-}
-
-/* 手机上的样式 */
-@media (max-width: @screen-xs-max) {
-  .mdui-drawer {
-    transform: translateX(-@drawer-width-xs - 10);
-  }
-
-  .mdui-drawer-right {
-    transform: translateX(@drawer-width-xs + 10);
-  }
-}
-
-/* 强制隐藏抽屉栏 */
-._drawer_close(@drawer-width) {
-  .mdui-drawer-close {
-    transform: translateX(-@drawer-width - 10);
-    &.mdui-drawer-right {
-      transform: translateX(@drawer-width + 10);
-    }
-  }
-}
-
-._drawer_close(@drawer-width-xs);
-
-@media (min-width: @screen-sm-min) {
-  ._drawer_close(@drawer-width-sm);
-}
-
-@media (min-width: @screen-md-min) {
-  ._drawer_close(@drawer-width-md);
-}
-
-/* 强制显示抽屉栏 */
-.mdui-drawer-open {
-  transform: translateX(0) !important;
-}
-
-/* PC 上的样式 */
-@media (min-width: @screen-md-min) {
-  /* 使该类所在元素获得 padding-left 或 padding-right，避免被抽屉栏覆盖住页面 */
-  .mdui-drawer-body-left {
-    padding-left: @drawer-width-md;
-  }
-  .mdui-drawer-body-right {
-    padding-right: @drawer-width-md;
-  }
-
-  /* PC 上默认有上边距 */
-  .mdui-drawer {
-    .mdui-appbar-with-toolbar & {
-      top: @appbar-height-sm;
-    }
-
-    .mdui-appbar-with-tab & {
-      top: 48px;
-    }
-
-    .mdui-appbar-with-tab-larger & {
-      top: 72px;
-    }
-
-    .mdui-appbar-with-toolbar.mdui-appbar-with-tab & {
-      top: @appbar-height-sm + 48px;
-    }
-
-    .mdui-appbar-with-toolbar.mdui-appbar-with-tab-larger & {
-      top: @appbar-height-sm + 72px;
-    }
-  }
-}
-
-/* 抽屉栏不是透明时添加阴影 */
-.mdui-drawer[class*="mdui-color-"]:not(.mdui-color-transparent) {
-  .mdui-shadow(16);
-}
-
-/* 抽屉栏 100% 高度，覆盖在导航栏上面 */
-.mdui-drawer-full-height {
-  top: 0 !important;
-}
-
-
-/**
- * =============================================================================
- * ************   Drawer dark   ************
- * =============================================================================
- */
-.layout-theme({
-  // 手机平板上的样式
-  @media (max-width: @screen-sm-max) {
-    .mdui-drawer {
-      background-color: @layout-dark-color-4;
-    }
-  }
-});

package/src/components/drawer/index.ts

@@ -1,425 +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/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/off';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/one';
-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/transitionEnd';
-import '../../jq_extends/static/hideOverlay';
-import '../../jq_extends/static/lockScreen';
-import '../../jq_extends/static/showOverlay';
-import '../../jq_extends/static/throttle';
-import '../../jq_extends/static/unlockScreen';
-import { componentEvent } from '../../utils/componentEvent';
-import { $window } from '../../utils/dom';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * Drawer 组件
-     *
-     * 请通过 `new mdui.Drawer()` 调用
-     */
-    Drawer: {
-      /**
-       * 实例化 Drawer 组件
-       * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-       * @param options 配置参数
-       */
-      new (
-        selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-        options?: OPTIONS,
-      ): Drawer;
-    };
-  }
-}
-
-type OPTIONS = {
-  /**
-   * 打开抽屉栏时是否显示遮罩层。该参数只对中等屏幕及以上的设备有效，在超小屏和小屏设备上始终会显示遮罩层。
-   */
-  overlay?: boolean;
-
-  /**
-   * 是否启用滑动手势。
-   */
-  swipe?: boolean;
-};
-
-type STATE = 'opening' | 'opened' | 'closing' | 'closed';
-type EVENT = 'open' | 'opened' | 'close' | 'closed';
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  overlay: false,
-  swipe: false,
-};
-
-class Drawer {
-  /**
-   * drawer 元素的 JQ 对象
-   */
-  public $element: JQ;
-
-  /**
-   * 配置参数
-   */
-  public options: OPTIONS = extend({}, DEFAULT_OPTIONS);
-
-  /**
-   * 当前是否显示着遮罩层
-   */
-  private overlay = false;
-
-  /**
-   * 抽屉栏的位置
-   */
-  private position: 'left' | 'right';
-
-  /**
-   * 当前抽屉栏状态
-   */
-  private state: STATE;
-
-  public constructor(
-    selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    options: OPTIONS = {},
-  ) {
-    this.$element = $(selector).first();
-
-    extend(this.options, options);
-
-    this.position = this.$element.hasClass('mdui-drawer-right')
-      ? 'right'
-      : 'left';
-
-    if (this.$element.hasClass('mdui-drawer-close')) {
-      this.state = 'closed';
-    } else if (this.$element.hasClass('mdui-drawer-open')) {
-      this.state = 'opened';
-    } else if (this.isDesktop()) {
-      this.state = 'opened';
-    } else {
-      this.state = 'closed';
-    }
-
-    // 浏览器窗口大小调整时
-    $window.on(
-      'resize',
-      $.throttle(() => {
-        if (this.isDesktop()) {
-          // 由手机平板切换到桌面时
-          // 如果显示着遮罩，则隐藏遮罩
-          if (this.overlay && !this.options.overlay) {
-            $.hideOverlay();
-            this.overlay = false;
-            $.unlockScreen();
-          }
-
-          // 没有强制关闭，则状态为打开状态
-          if (!this.$element.hasClass('mdui-drawer-close')) {
-            this.state = 'opened';
-          }
-        } else if (!this.overlay && this.state === 'opened') {
-          // 由桌面切换到手机平板时。如果抽屉栏是打开着的且没有遮罩层，则关闭抽屉栏
-          if (this.$element.hasClass('mdui-drawer-open')) {
-            $.showOverlay();
-            this.overlay = true;
-            $.lockScreen();
-
-            $('.mdui-overlay').one('click', () => this.close());
-          } else {
-            this.state = 'closed';
-          }
-        }
-      }, 100),
-    );
-
-    // 绑定关闭按钮事件
-    this.$element.find('[mdui-drawer-close]').each((_, close) => {
-      $(close).on('click', () => this.close());
-    });
-
-    this.swipeSupport();
-  }
-
-  /**
-   * 是否是桌面设备
-   */
-  private isDesktop(): boolean {
-    return $window.width() >= 1024;
-  }
-
-  /**
-   * 滑动手势支持
-   */
-  private swipeSupport(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const that = this;
-
-    // 抽屉栏滑动手势控制
-    let openNavEventHandler: (event: Event) => void;
-    let touchStartX: number;
-    let touchStartY: number;
-    let swipeStartX: number;
-    let swiping: null | 'opening' | 'closing' = null;
-    let maybeSwiping = false;
-    const $body = $('body');
-
-    // 手势触发的范围
-    const swipeAreaWidth = 24;
-
-    function setPosition(translateX: number): void {
-      const rtlTranslateMultiplier = that.position === 'right' ? -1 : 1;
-      const transformCSS = `translate(${
-        -1 * rtlTranslateMultiplier * translateX
-      }px, 0) !important;`;
-      const transitionCSS = 'initial !important;';
-
-      that.$element.css(
-        'cssText',
-        `transform: ${transformCSS}; transition: ${transitionCSS};`,
-      );
-    }
-
-    function cleanPosition(): void {
-      that.$element[0].style.transform = '';
-      that.$element[0].style.webkitTransform = '';
-      that.$element[0].style.transition = '';
-      that.$element[0].style.webkitTransition = '';
-    }
-
-    function getMaxTranslateX(): number {
-      return that.$element.width() + 10;
-    }
-
-    function getTranslateX(currentX: number): number {
-      return Math.min(
-        Math.max(
-          swiping === 'closing'
-            ? swipeStartX - currentX
-            : getMaxTranslateX() + swipeStartX - currentX,
-          0,
-        ),
-        getMaxTranslateX(),
-      );
-    }
-
-    function onBodyTouchEnd(event?: Event): void {
-      if (swiping) {
-        let touchX = (event as TouchEvent).changedTouches[0].pageX;
-        if (that.position === 'right') {
-          touchX = $body.width() - touchX;
-        }
-
-        const translateRatio = getTranslateX(touchX) / getMaxTranslateX();
-
-        maybeSwiping = false;
-        const swipingState = swiping;
-        swiping = null;
-
-        if (swipingState === 'opening') {
-          if (translateRatio < 0.92) {
-            cleanPosition();
-            that.open();
-          } else {
-            cleanPosition();
-          }
-        } else {
-          if (translateRatio > 0.08) {
-            cleanPosition();
-            that.close();
-          } else {
-            cleanPosition();
-          }
-        }
-
-        $.unlockScreen();
-      } else {
-        maybeSwiping = false;
-      }
-
-      $body.off({
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        touchmove: onBodyTouchMove,
-        touchend: onBodyTouchEnd,
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        touchcancel: onBodyTouchMove,
-      });
-    }
-
-    function onBodyTouchMove(event: Event): void {
-      let touchX = (event as TouchEvent).touches[0].pageX;
-      if (that.position === 'right') {
-        touchX = $body.width() - touchX;
-      }
-
-      const touchY = (event as TouchEvent).touches[0].pageY;
-
-      if (swiping) {
-        setPosition(getTranslateX(touchX));
-      } else if (maybeSwiping) {
-        const dXAbs = Math.abs(touchX - touchStartX);
-        const dYAbs = Math.abs(touchY - touchStartY);
-        const threshold = 8;
-
-        if (dXAbs > threshold && dYAbs <= threshold) {
-          swipeStartX = touchX;
-          swiping = that.state === 'opened' ? 'closing' : 'opening';
-          $.lockScreen();
-          setPosition(getTranslateX(touchX));
-        } else if (dXAbs <= threshold && dYAbs > threshold) {
-          onBodyTouchEnd();
-        }
-      }
-    }
-
-    function onBodyTouchStart(event: Event): void {
-      touchStartX = (event as TouchEvent).touches[0].pageX;
-      if (that.position === 'right') {
-        touchStartX = $body.width() - touchStartX;
-      }
-
-      touchStartY = (event as TouchEvent).touches[0].pageY;
-
-      if (that.state !== 'opened') {
-        if (
-          touchStartX > swipeAreaWidth ||
-          openNavEventHandler !== onBodyTouchStart
-        ) {
-          return;
-        }
-      }
-
-      maybeSwiping = true;
-
-      $body.on({
-        touchmove: onBodyTouchMove,
-        touchend: onBodyTouchEnd,
-        touchcancel: onBodyTouchMove,
-      });
-    }
-
-    function enableSwipeHandling(): void {
-      if (!openNavEventHandler) {
-        $body.on('touchstart', onBodyTouchStart);
-        openNavEventHandler = onBodyTouchStart;
-      }
-    }
-
-    if (this.options.swipe) {
-      enableSwipeHandling();
-    }
-  }
-
-  /**
-   * 触发组件事件
-   * @param name
-   */
-  private triggerEvent(name: EVENT): void {
-    componentEvent(name, 'drawer', this.$element, this);
-  }
-
-  /**
-   * 动画结束回调
-   */
-  private transitionEnd(): void {
-    if (this.$element.hasClass('mdui-drawer-open')) {
-      this.state = 'opened';
-      this.triggerEvent('opened');
-    } else {
-      this.state = 'closed';
-      this.triggerEvent('closed');
-    }
-  }
-
-  /**
-   * 是否处于打开状态
-   */
-  private isOpen(): boolean {
-    return this.state === 'opening' || this.state === 'opened';
-  }
-
-  /**
-   * 打开抽屉栏
-   */
-  public open(): void {
-    if (this.isOpen()) {
-      return;
-    }
-
-    this.state = 'opening';
-    this.triggerEvent('open');
-
-    if (!this.options.overlay) {
-      $('body').addClass(`mdui-drawer-body-${this.position}`);
-    }
-
-    this.$element
-      .removeClass('mdui-drawer-close')
-      .addClass('mdui-drawer-open')
-      .transitionEnd(() => this.transitionEnd());
-
-    if (!this.isDesktop() || this.options.overlay) {
-      this.overlay = true;
-      $.showOverlay().one('click', () => this.close());
-      $.lockScreen();
-    }
-  }
-
-  /**
-   * 关闭抽屉栏
-   */
-  public close(): void {
-    if (!this.isOpen()) {
-      return;
-    }
-
-    this.state = 'closing';
-    this.triggerEvent('close');
-
-    if (!this.options.overlay) {
-      $('body').removeClass(`mdui-drawer-body-${this.position}`);
-    }
-
-    this.$element
-      .addClass('mdui-drawer-close')
-      .removeClass('mdui-drawer-open')
-      .transitionEnd(() => this.transitionEnd());
-
-    if (this.overlay) {
-      $.hideOverlay();
-      this.overlay = false;
-      $.unlockScreen();
-    }
-  }
-
-  /**
-   * 切换抽屉栏打开/关闭状态
-   */
-  public toggle(): void {
-    this.isOpen() ? this.close() : this.open();
-  }
-
-  /**
-   * 返回当前抽屉栏的状态。共包含四种状态：`opening`、`opened`、`closing`、`closed`
-   */
-  public getState(): STATE {
-    return this.state;
-  }
-}
-
-mdui.Drawer = Drawer;

package/src/components/fab/customAttr.ts

@@ -1,23 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import mdui from '../../mdui';
-import { $document } from '../../utils/dom';
-import { parseOptions } from '../../utils/parseOptions';
-import './index';
-
-const customAttr = 'mdui-fab';
-
-$(() => {
-  // mouseenter 不冒泡，无法进行事件委托，这里用 mouseover 代替。
-  // 不管是 click 、 mouseover 还是 touchstart ，都先初始化。
-
-  $document.on(
-    'touchstart mousedown mouseover',
-    `[${customAttr}]`,
-    function () {
-      new mdui.Fab(
-        this as HTMLElement,
-        parseOptions(this as HTMLElement, customAttr),
-      );
-    },
-  );
-});