mdui 1.0.2 → 2.0.0

package/src/components/subheader/index.less

@@ -1,38 +0,0 @@
-/**
- * =============================================================================
- * ************   Subheader 副标题   ************
- * =============================================================================
- *
- * 用于 List 和 Grid list 组件
- */
-
-.mdui-subheader,
-.mdui-subheader-inset {
-  position: relative;
-  box-sizing: border-box;
-  height: 48px;
-  padding-right: 16px;
-  padding-left: 16px;
-  color: @color-black-secondary;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 48px;
-  cursor: default;
-  .mdui-text-truncate();
-}
-
-.mdui-subheader-inset {
-  padding-left: 72px;
-}
-
-/**
- * =============================================================================
- * ************   Subheader dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-subheader,
-  .mdui-subheader-inset {
-    color: @color-white-secondary;
-  }
-});

package/src/components/tab/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-tab';
-
-$(() => {
-  mdui.mutation(`[${customAttr}]`, function () {
-    new mdui.Tab(this, parseOptions(this, customAttr));
-  });
-});

package/src/components/tab/index.less

@@ -1,195 +0,0 @@
-/**
- * =============================================================================
- * ************   Tab   ************
- * =============================================================================
- *
- * 在手机上选项卡始终平分或可滚动，在平板以上的设备上默认左对齐，可以选择居中对齐，或全宽等分
- */
-
-/* 选项卡，默认的选项卡为全宽 */
-.mdui-tab {
-  position: relative;
-  display: flex;
-  min-height: 48px;
-  max-height: 72px;
-  margin: 0 auto;
-  padding: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-
-  a {
-    display: flex;
-    // 手机上始终等分选项卡
-    flex: 1;
-
-    // 使图标和文本垂直排列
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    min-width: 72px;
-    min-height: 48px;
-    max-height: 72px;
-    padding: 12px;
-    overflow: hidden;
-    color: inherit;
-    font-size: 14px;
-    text-align: center;
-    text-transform: uppercase;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    outline: none;
-    cursor: pointer;
-    opacity: 0.7;
-    user-select: none;
-
-    .mdui-icon {
-      opacity: 0.7;
-    }
-
-    // 平板或以上设备
-    @media (min-width: @screen-sm-min) {
-
-      // 平板/pc上选项卡左对齐
-      flex: none;
-      min-width: 99px;
-      max-width: 264px;
-
-      // 手机上 padding 12px，平板/pc上 padding 24px
-      padding: 12px 24px;
-    }
-
-    @media (min-width: @screen-md-min) {
-      min-width: 112px;
-    }
-
-    @media (min-width: @screen-lg-min) {
-      min-width: 136px;
-    }
-
-    @media (min-width: @screen-xl-min) {
-      min-width: 160px;
-    }
-
-    label {
-      display: block;
-      width: 100%;
-      cursor: pointer;
-    }
-
-    .mdui-icon + label {
-      margin-top: 8px;
-    }
-
-    &[disabled] {
-      cursor: default;
-      opacity: 0.38;
-
-      label {
-        cursor: default;
-      }
-    }
-  }
-
-  // 激活状态的选项
-  .mdui-tab-active {
-    color: @color-default-500;
-    opacity: 1;
-    .mdui-icon {
-      opacity: 1;
-    }
-  }
-}
-
-/* 选项卡居中 */
-.mdui-tab-centered {
-  @media (min-width: @screen-sm-min) {
-    &::before {
-      flex-grow: 1;
-      content: ' ';
-    }
-    &::after {
-      flex-grow: 1;
-      content: ' ';
-    }
-    a {
-      flex: none;
-    }
-  }
-}
-
-/* 选项卡始终全宽等分 */
-.mdui-tab-full-width {
-  a {
-    flex: 1;
-    max-width: none;
-  }
-}
-
-
-/* 可横向滚动的选项卡 */
-.mdui-tab-scrollable {
-  padding-left: 56px;
-
-  a {
-    flex: none;
-  }
-
-  @media (max-width: @screen-xs-max) {
-    padding-left: 60px;
-  }
-
-}
-
-/* 下划线指示器 */
-.mdui-tab-indicator {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  background-color: @color-default-500;
-  transition: all .35s @animation-curve-default;
-  will-change: left, width;
-}
-
-/**
- * =============================================================================
- * ************   Tab 主色   ************
- * =============================================================================
- */
-
-& {
-  .loop-primary-theme(@counter-color) when (@counter-color > 0) {
-    .loop-primary-theme((@counter-color - 1));
-    @colorName: extract(@globalPrimaryColors, @counter-color);
-    @color: 'color-@{colorName}-500';
-
-    .mdui-theme-primary-@{colorName} when not (@colorName = null) {
-      .mdui-tab .mdui-tab-active {
-        color: @@color;
-      }
-
-      .mdui-tab-indicator {
-        background-color: @@color;
-      }
-    }
-
-  }
-  .loop-primary-theme(length(@globalPrimaryColors));
-}
-
-/* 带背景色的选项卡 */
-.mdui-tab[class*="mdui-color-"]:not(.mdui-color-white) {
-  .mdui-tab-active {
-    color: inherit;
-  }
-  .mdui-tab-indicator {
-    background-color: @color-white-500;
-  }
-
-  // 带背景色的选项卡中使用浅色滚动条
-  & {
-    .mdui-scrollbar-beautify(dark);
-  }
-}

package/src/components/tab/index.ts

@@ -1,372 +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/children';
-import 'mdui.jq/es/methods/css';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/eq';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/get';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/hide';
-import 'mdui.jq/es/methods/index';
-import 'mdui.jq/es/methods/innerWidth';
-import 'mdui.jq/es/methods/offset';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/show';
-import Selector from 'mdui.jq/es/types/Selector';
-import { isNumber } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../jq_extends/static/throttle';
-import { componentEvent } from '../../utils/componentEvent';
-import { $window } from '../../utils/dom';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * Tab 选项卡组件
-     *
-     * 请通过 `new mdui.Tab()` 调用
-     */
-    Tab: {
-      /**
-       * 实例化 Tab 组件
-       * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-       * @param options 配置参数
-       */
-      new (
-        selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-        options?: OPTIONS,
-      ): Tab;
-    };
-  }
-}
-
-type OPTIONS = {
-  /**
-   * 切换选项卡的触发方式。`click`: 点击切换；`hover`: 鼠标悬浮切换
-   */
-  trigger?: 'click' | 'hover';
-
-  /**
-   * 是否启用循环切换，若为 `true`，则最后一个选项激活时调用 `next` 方法将回到第一个选项，第一个选项激活时调用 `prev` 方法将回到最后一个选项。
-   */
-  loop?: boolean;
-};
-
-type EVENT = 'change' | 'show';
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  trigger: 'click',
-  loop: false,
-};
-
-class Tab {
-  /**
-   * tab 元素的 JQ 对象
-   */
-  public $element: JQ;
-
-  /**
-   * 配置参数
-   */
-  public options: OPTIONS = extend({}, DEFAULT_OPTIONS);
-
-  /**
-   * 当前激活的 tab 的索引号。为 -1 时表示没有激活的选项卡，或不存在选项卡
-   */
-  public activeIndex = -1;
-
-  /**
-   * 选项数组 JQ 对象
-   */
-  private $tabs: JQ;
-
-  /**
-   * 激活状态的 tab 底部的指示符
-   */
-  private $indicator: JQ;
-
-  public constructor(
-    selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    options: OPTIONS = {},
-  ) {
-    this.$element = $(selector).first();
-
-    extend(this.options, options);
-
-    this.$tabs = this.$element.children('a');
-    this.$indicator = $('<div class="mdui-tab-indicator"></div>').appendTo(
-      this.$element,
-    );
-
-    // 根据 url hash 获取默认激活的选项卡
-    const hash = window.location.hash;
-    if (hash) {
-      this.$tabs.each((index, tab) => {
-        if ($(tab).attr('href') === hash) {
-          this.activeIndex = index;
-          return false;
-        }
-
-        return true;
-      });
-    }
-
-    // 含 .mdui-tab-active 的元素默认激活
-    if (this.activeIndex === -1) {
-      this.$tabs.each((index, tab) => {
-        if ($(tab).hasClass('mdui-tab-active')) {
-          this.activeIndex = index;
-          return false;
-        }
-
-        return true;
-      });
-    }
-
-    // 存在选项卡时，默认激活第一个选项卡
-    if (this.$tabs.length && this.activeIndex === -1) {
-      this.activeIndex = 0;
-    }
-
-    // 设置激活状态选项卡
-    this.setActive();
-
-    // 监听窗口大小变化事件，调整指示器位置
-    $window.on(
-      'resize',
-      $.throttle(() => this.setIndicatorPosition(), 100),
-    );
-
-    // 监听点击选项卡事件
-    this.$tabs.each((_, tab) => {
-      this.bindTabEvent(tab);
-    });
-  }
-
-  /**
-   * 指定选项卡是否已禁用
-   * @param $tab
-   */
-  private isDisabled($tab: JQ): boolean {
-    return $tab.attr('disabled') !== undefined;
-  }
-
-  /**
-   * 绑定在 Tab 上点击或悬浮的事件
-   * @param tab
-   */
-  private bindTabEvent(tab: HTMLElement): void {
-    const $tab = $(tab);
-
-    // 点击或鼠标移入触发的事件
-    const clickEvent = (): void | false => {
-      // 禁用状态的选项卡无法选中
-      if (this.isDisabled($tab)) {
-        return false;
-      }
-
-      this.activeIndex = this.$tabs.index(tab);
-      this.setActive();
-    };
-
-    // 无论 trigger 是 click 还是 hover，都会响应 click 事件
-    $tab.on('click', clickEvent);
-
-    // trigger 为 hover 时，额外响应 mouseenter 事件
-    if (this.options.trigger === 'hover') {
-      $tab.on('mouseenter', clickEvent);
-    }
-
-    // 阻止链接的默认点击动作
-    $tab.on('click', (): void | false => {
-      if (($tab.attr('href') || '').indexOf('#') === 0) {
-        return false;
-      }
-    });
-  }
-
-  /**
-   * 触发组件事件
-   * @param name
-   * @param $element
-   * @param parameters
-   */
-  private triggerEvent(name: EVENT, $element: JQ, parameters = {}): void {
-    componentEvent(name, 'tab', $element, this, parameters);
-  }
-
-  /**
-   * 设置激活状态的选项卡
-   */
-  private setActive(): void {
-    this.$tabs.each((index, tab) => {
-      const $tab = $(tab);
-      const targetId = $tab.attr('href') || '';
-
-      // 设置选项卡激活状态
-      if (index === this.activeIndex && !this.isDisabled($tab)) {
-        if (!$tab.hasClass('mdui-tab-active')) {
-          this.triggerEvent('change', this.$element, {
-            index: this.activeIndex,
-            id: targetId.substr(1),
-          });
-          this.triggerEvent('show', $tab);
-
-          $tab.addClass('mdui-tab-active');
-        }
-
-        $(targetId).show();
-        this.setIndicatorPosition();
-      } else {
-        $tab.removeClass('mdui-tab-active');
-        $(targetId).hide();
-      }
-    });
-  }
-
-  /**
-   * 设置选项卡指示器的位置
-   */
-  private setIndicatorPosition(): void {
-    // 选项卡数量为 0 时，不显示指示器
-    if (this.activeIndex === -1) {
-      this.$indicator.css({
-        left: 0,
-        width: 0,
-      });
-
-      return;
-    }
-
-    const $activeTab = this.$tabs.eq(this.activeIndex);
-
-    if (this.isDisabled($activeTab)) {
-      return;
-    }
-
-    const activeTabOffset = $activeTab.offset();
-
-    this.$indicator.css({
-      left: `${
-        activeTabOffset.left +
-        this.$element[0].scrollLeft -
-        this.$element[0].getBoundingClientRect().left
-      }px`,
-      width: `${$activeTab.innerWidth()}px`,
-    });
-  }
-
-  /**
-   * 切换到下一个选项卡
-   */
-  public next(): void {
-    if (this.activeIndex === -1) {
-      return;
-    }
-
-    if (this.$tabs.length > this.activeIndex + 1) {
-      this.activeIndex++;
-    } else if (this.options.loop) {
-      this.activeIndex = 0;
-    }
-
-    this.setActive();
-  }
-
-  /**
-   * 切换到上一个选项卡
-   */
-  public prev(): void {
-    if (this.activeIndex === -1) {
-      return;
-    }
-
-    if (this.activeIndex > 0) {
-      this.activeIndex--;
-    } else if (this.options.loop) {
-      this.activeIndex = this.$tabs.length - 1;
-    }
-
-    this.setActive();
-  }
-
-  /**
-   * 显示指定索引号、或指定id的选项卡
-   * @param index 索引号、或id
-   */
-  public show(index: number | string): void {
-    if (this.activeIndex === -1) {
-      return;
-    }
-
-    if (isNumber(index)) {
-      this.activeIndex = index;
-    } else {
-      this.$tabs.each((i, tab): void | false => {
-        if (tab.id === index) {
-          this.activeIndex = i;
-          return false;
-        }
-      });
-    }
-
-    this.setActive();
-  }
-
-  /**
-   * 在父元素的宽度变化时，需要调用该方法重新调整指示器位置
-   * 在添加或删除选项卡时，需要调用该方法
-   */
-  public handleUpdate(): void {
-    const $oldTabs = this.$tabs; // 旧的 tabs JQ对象
-    const $newTabs = this.$element.children('a'); // 新的 tabs JQ对象
-    const oldTabsElement = $oldTabs.get(); // 旧的 tabs 元素数组
-    const newTabsElement = $newTabs.get(); // 新的 tabs 元素数组
-
-    if (!$newTabs.length) {
-      this.activeIndex = -1;
-      this.$tabs = $newTabs;
-      this.setIndicatorPosition();
-
-      return;
-    }
-
-    // 重新遍历选项卡，找出新增的选项卡
-    $newTabs.each((index, tab) => {
-      // 有新增的选项卡
-      if (oldTabsElement.indexOf(tab) < 0) {
-        this.bindTabEvent(tab);
-
-        if (this.activeIndex === -1) {
-          this.activeIndex = 0;
-        } else if (index <= this.activeIndex) {
-          this.activeIndex++;
-        }
-      }
-    });
-
-    // 找出被移除的选项卡
-    $oldTabs.each((index, tab) => {
-      // 有被移除的选项卡
-      if (newTabsElement.indexOf(tab) < 0) {
-        if (index < this.activeIndex) {
-          this.activeIndex--;
-        } else if (index === this.activeIndex) {
-          this.activeIndex = 0;
-        }
-      }
-    });
-
-    this.$tabs = $newTabs;
-
-    this.setActive();
-  }
-}
-
-mdui.Tab = Tab;