mdui 1.0.1 → 2.0.0

package/src/components/headroom/index.ts

@@ -1,275 +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/data';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/removeClass';
-import Selector from 'mdui.jq/es/types/Selector';
-import { isNumber } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../jq_extends/methods/transitionEnd';
-import { componentEvent } from '../../utils/componentEvent';
-import { $window } from '../../utils/dom';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * Headroom 插件
-     *
-     * 请通过 `new mdui.Headroom()` 调用
-     */
-    Headroom: {
-      /**
-       * 实例化 Headroom 组件
-       * @param selector CSS 选择器、或 DOM 元素、或 JQ 对象
-       * @param options 配置参数
-       */
-      new (
-        selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-        options?: OPTIONS,
-      ): Headroom;
-    };
-  }
-}
-
-type TOLERANCE = {
-  /**
-   * 滚动条向下滚动多少距离开始隐藏或显示元素
-   */
-  down: number;
-
-  /**
-   * 滚动条向上滚动多少距离开始隐藏或显示元素
-   */
-  up: number;
-};
-
-type OPTIONS = {
-  /**
-   * 滚动条滚动多少距离开始隐藏或显示元素
-   */
-  tolerance?: TOLERANCE | number;
-
-  /**
-   * 在页面顶部多少距离内滚动不会隐藏元素
-   */
-  offset?: number;
-
-  /**
-   * 初始化时添加的类
-   */
-  initialClass?: string;
-
-  /**
-   * 元素固定时添加的类
-   */
-  pinnedClass?: string;
-
-  /**
-   * 元素隐藏时添加的类
-   */
-  unpinnedClass?: string;
-};
-
-type STATE = 'pinning' | 'pinned' | 'unpinning' | 'unpinned';
-type EVENT = 'pin' | 'pinned' | 'unpin' | 'unpinned';
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  tolerance: 5,
-  offset: 0,
-  initialClass: 'mdui-headroom',
-  pinnedClass: 'mdui-headroom-pinned-top',
-  unpinnedClass: 'mdui-headroom-unpinned-top',
-};
-
-class Headroom {
-  /**
-   * headroom 元素的 JQ 对象
-   */
-  public $element: JQ;
-
-  /**
-   * 配置参数
-   */
-  public options: OPTIONS = extend({}, DEFAULT_OPTIONS);
-
-  /**
-   * 当前 headroom 的状态
-   */
-  private state: STATE = 'pinned';
-
-  /**
-   * 当前是否启用
-   */
-  private isEnable = false;
-
-  /**
-   * 上次滚动后，垂直方向的距离
-   */
-  private lastScrollY = 0;
-
-  /**
-   * AnimationFrame ID
-   */
-  private rafId = 0;
-
-  public constructor(
-    selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    options: OPTIONS = {},
-  ) {
-    this.$element = $(selector).first();
-
-    extend(this.options, options);
-
-    // tolerance 参数若为数值，转换为对象
-    const tolerance = this.options.tolerance;
-    if (isNumber(tolerance)) {
-      this.options.tolerance = {
-        down: tolerance,
-        up: tolerance,
-      };
-    }
-
-    this.enable();
-  }
-
-  /**
-   * 滚动时的处理
-   */
-  private onScroll(): void {
-    this.rafId = window.requestAnimationFrame(() => {
-      const currentScrollY = window.pageYOffset;
-      const direction = currentScrollY > this.lastScrollY ? 'down' : 'up';
-      const tolerance = (this.options.tolerance as TOLERANCE)[direction];
-      const scrolled = Math.abs(currentScrollY - this.lastScrollY);
-      const toleranceExceeded = scrolled >= tolerance;
-
-      if (
-        currentScrollY > this.lastScrollY &&
-        currentScrollY >= this.options.offset! &&
-        toleranceExceeded
-      ) {
-        this.unpin();
-      } else if (
-        (currentScrollY < this.lastScrollY && toleranceExceeded) ||
-        currentScrollY <= this.options.offset!
-      ) {
-        this.pin();
-      }
-
-      this.lastScrollY = currentScrollY;
-    });
-  }
-
-  /**
-   * 触发组件事件
-   * @param name
-   */
-  private triggerEvent(name: EVENT): void {
-    componentEvent(name, 'headroom', this.$element, this);
-  }
-
-  /**
-   * 动画结束的回调
-   */
-  private transitionEnd(): void {
-    if (this.state === 'pinning') {
-      this.state = 'pinned';
-      this.triggerEvent('pinned');
-    }
-
-    if (this.state === 'unpinning') {
-      this.state = 'unpinned';
-      this.triggerEvent('unpinned');
-    }
-  }
-
-  /**
-   * 使元素固定住
-   */
-  public pin(): void {
-    if (
-      this.state === 'pinning' ||
-      this.state === 'pinned' ||
-      !this.$element.hasClass(this.options.initialClass!)
-    ) {
-      return;
-    }
-
-    this.triggerEvent('pin');
-    this.state = 'pinning';
-    this.$element
-      .removeClass(this.options.unpinnedClass)
-      .addClass(this.options.pinnedClass!)
-      .transitionEnd(() => this.transitionEnd());
-  }
-
-  /**
-   * 使元素隐藏
-   */
-  public unpin(): void {
-    if (
-      this.state === 'unpinning' ||
-      this.state === 'unpinned' ||
-      !this.$element.hasClass(this.options.initialClass!)
-    ) {
-      return;
-    }
-
-    this.triggerEvent('unpin');
-    this.state = 'unpinning';
-    this.$element
-      .removeClass(this.options.pinnedClass)
-      .addClass(this.options.unpinnedClass!)
-      .transitionEnd(() => this.transitionEnd());
-  }
-
-  /**
-   * 启用 headroom 插件
-   */
-  public enable(): void {
-    if (this.isEnable) {
-      return;
-    }
-
-    this.isEnable = true;
-    this.state = 'pinned';
-    this.$element
-      .addClass(this.options.initialClass!)
-      .removeClass(this.options.pinnedClass)
-      .removeClass(this.options.unpinnedClass);
-    this.lastScrollY = window.pageYOffset;
-
-    $window.on('scroll', () => this.onScroll());
-  }
-
-  /**
-   * 禁用 headroom 插件
-   */
-  public disable(): void {
-    if (!this.isEnable) {
-      return;
-    }
-
-    this.isEnable = false;
-    this.$element
-      .removeClass(this.options.initialClass)
-      .removeClass(this.options.pinnedClass)
-      .removeClass(this.options.unpinnedClass);
-
-    $window.off('scroll', () => this.onScroll());
-    window.cancelAnimationFrame(this.rafId);
-  }
-
-  /**
-   * 获取当前状态。共包含四种状态：`pinning`、`pinned`、`unpinning`、`unpinned`
-   */
-  public getState(): STATE {
-    return this.state;
-  }
-}
-
-mdui.Headroom = Headroom;

package/src/components/list/index.less

@@ -1,347 +0,0 @@
-/**
- * =============================================================================
- * ************   List 列表   ************
- * =============================================================================
- */
-
-/* 列表 */
-.mdui-list {
-  margin: 0;
-  padding: 8px 0;
-  list-style: none;
-  background-color: transparent;
-
-  // 子列表没有上下间距
-  .mdui-list {
-    padding: 0;
-  }
-
-  // 分割线上下边距
-  &>.mdui-divider,
-  &>.mdui-divider-light,
-  &>.mdui-divider-dark,
-  &>.mdui-divider-inset,
-  &>.mdui-divider-inset-light,
-  &>.mdui-divider-inset-dark {
-    margin-top: 8px;
-    margin-bottom: 8px;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  // 使用副标题时自动添加分割线
-  .mdui-subheader,
-  .mdui-subheader-inset {
-    &::before {
-      position: absolute;
-      right: 0;
-      left: 0;
-      display: block;
-      height: 1px;
-      background-color: @color-black-divider;
-      content: ' ';
-    }
-
-    margin-top: 8px;
-
-    &:first-child {
-      &::before {
-        background-color: transparent;
-      }
-
-      // 第一个副标题把列表的 padding-top 抵消掉
-      margin-top: -8px;
-    }
-  }
-  .mdui-subheader-inset {
-    &::before {
-      left: 72px;
-    }
-  }
-}
-
-/* 列表项 */
-.mdui-list-item {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  min-height: 48px;
-  padding: 0 16px;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background-color .3s @animation-curve-default;
-
-  &:hover {
-    background-color: @color-hover-black;
-  }
-
-  // http://stackoverflow.com/a/31915203
-  &::after {
-    height: 48px;
-    visibility: hidden;
-    content: ' ';
-  }
-}
-
-/* 列表项图标 */
-.mdui-list-item-icon {
-  width: 24px;
-  min-width: 24px;
-  height: 24px;
-  color: @color-black-icon;
-}
-
-/* 列表项头像 */
-.mdui-list-item-avatar {
-  min-width: 40px;
-  max-width: 40px;
-  height: 40px;
-  margin-top: 8px;
-  margin-bottom: 8px;
-  color: @color-white;
-  line-height: 40px;
-  text-align: center;
-  background-color: @color-grey-400;
-  border-radius: 50%;
-  img {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-  }
-}
-
-/* 列表项内容 */
-.mdui-list-item-content {
-  flex-grow: 1;
-  padding-top: 14px;
-  padding-bottom: 14px;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 20px;
-}
-
-/* 列表项内容的副内容 */
-.mdui-list-item-text {
-  font-size: 14px;
-  opacity: @opacity-black-secondary;
-}
-.mdui-list-item-title {
-  ~ .mdui-list-item-text {
-    margin-top: 4px;
-  }
-}
-
-/* 激活状态的列表项 */
-.mdui-list-item-active {
-  font-weight: 700;
-  background-color: @color-hover-black;
-
-  .mdui-list-item-content {
-    font-weight: 700;
-  }
-  .mdui-list-item-text {
-    font-weight: 400;
-  }
-}
-
-/* 限制文本高度 */
-.mdui-list-item-one-line,
-.mdui-list-item-two-line,
-.mdui-list-item-three-line {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-}
-.mdui-list-item-one-line {
-  -webkit-line-clamp: 1;
-  height: 20px;
-}
-.mdui-list-item-two-line {
-  -webkit-line-clamp: 2;
-  height: 40px;
-}
-.mdui-list-item-three-line {
-  -webkit-line-clamp: 3;
-  height: 60px;
-}
-
-/* 列表项内的元素间添加间距 */
-.mdui-list-item-icon {
-  ~ .mdui-list-item-content {
-    margin-left: 32px;
-  }
-}
-.mdui-checkbox,
-.mdui-radio,
-.mdui-switch {
-  ~ .mdui-list-item-content {
-    margin-left: 20px;
-  }
-}
-
-
-.mdui-list-item-avatar {
-  ~ .mdui-list-item-content {
-    margin-left: 16px;
-  }
-}
-.mdui-list-item-content {
-  ~ .mdui-list-item-icon,
-  ~ .mdui-list-item-avatar,
-  ~ .mdui-checkbox,
-  ~ .mdui-radio,
-  ~ .mdui-switch {
-    margin-left: 16px;
-  }
-
-  ~ .mdui-checkbox,
-  ~ .mdui-radio {
-    padding-left: 24px;
-  }
-}
-
-/* 密集型列表 */
-.mdui-list-dense {
-  padding: 4px 0;
-  font-size: 13px;
-
-  &>.mdui-divider,
-  &>.mdui-divider-light,
-  &>.mdui-divider-dark,
-  &>.mdui-divider-inset,
-  &>.mdui-divider-inset-light,
-  &>.mdui-divider-inset-dark {
-    margin-top: 4px;
-    margin-bottom: 4px;
-  }
-
-  // 副标题
-  .mdui-subheader,
-  .mdui-subheader-inset {
-    height: 40px;
-    margin-top: 4px;
-    font-size: 12px;
-    line-height: 40px;
-
-    &:first-child {
-      margin-top: -4px;
-    }
-  }
-
-  // 密集型列表项
-  .mdui-list-item {
-    min-height: 40px;
-
-    &::after {
-      height: 40px;
-    }
-  }
-
-  // 图标
-  .mdui-list-item-icon {
-    width: 20px;
-    height: 20px;
-    font-size: 20px;
-  }
-
-  // 头像
-  .mdui-list-item-avatar {
-    width: 36px;
-    min-width: 36px;
-    height: 36px;
-    min-height: 36px;
-  }
-
-  // 列表项内容
-  .mdui-list-item-content {
-    padding-top: 11px;
-    padding-bottom: 11px;
-    font-size: 13px;
-    line-height: 18px;
-  }
-  .mdui-list-item-text {
-    font-size: 13px;
-  }
-  .mdui-list-item-title {
-    ~ .mdui-list-item-text {
-      margin-top: 2px;
-    }
-  }
-
-  // 限制文本高度
-  .mdui-list-item-one-line {
-    height: 18px;
-  }
-  .mdui-list-item-two-line {
-    height: 36px;
-  }
-  .mdui-list-item-three-line {
-    height: 54px;
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   List dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-list {
-    // 副标题的分割线
-    .mdui-subheader,
-    .mdui-subheader-inset {
-      &::before {
-        background-color: @color-white-divider;
-      }
-
-      &:first-child {
-        &::before {
-          background-color: transparent;
-        }
-      }
-    }
-  }
-
-  // 列表项
-  .mdui-list-item {
-    color: @color-white-text;
-
-    &:hover {
-      background-color: @color-hover-white;
-    }
-  }
-
-  // 列表项图标
-  .mdui-list-item-icon {
-    color: @color-white-icon;
-  }
-
-  // 列表内容副内容
-  .mdui-list-item-text {
-    opacity: @opacity-white-secondary;
-  }
-
-  // 激活状态的列表项
-  .mdui-list-item-active {
-    background-color: @color-hover-white;
-  }
-});
-
-/**
- * ==============================================================================
- * ************   List inner theme   ************
- * ==============================================================================
- */
-[class*="mdui-color-"] {
-  .mdui-list-item {
-    color: inherit;
-  }
-  .mdui-list-item-icon {
-    color: inherit;
-  }
-}

package/src/components/menu/customAttr.ts

@@ -1,40 +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-menu';
-const dataName = '_mdui_menu';
-
-type OPTIONS = {
-  target: string;
-  position?: 'auto' | 'top' | 'bottom' | 'center';
-  align?: 'auto' | 'left' | 'right' | 'center';
-  gutter?: number;
-  fixed?: boolean;
-  covered?: boolean | 'auto';
-  subMenuTrigger?: 'click' | 'hover';
-  subMenuDelay?: number;
-};
-
-$(() => {
-  $document.on('click', `[${customAttr}]`, function () {
-    const $this = $(this as HTMLElement);
-    let instance = $this.data(dataName);
-
-    if (!instance) {
-      const options = parseOptions(this as HTMLElement, customAttr) as OPTIONS;
-      const menuSelector = options.target;
-      // @ts-ignore
-      delete options.target;
-
-      instance = new mdui.Menu($this, menuSelector, options);
-      $this.data(dataName, instance);
-
-      instance.toggle();
-    }
-  });
-});