mdui 1.0.2 → 2.0.0

package/src/components/card/index.less

@@ -1,200 +0,0 @@
-/**
- * =============================================================================
- * ************   Card 卡片   ************
- * =============================================================================
- */
-
-/* 卡片 */
-.mdui-card {
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-  color: #000;
-  background-color: #fff;
-  border-radius: 2px;
-  .mdui-shadow(2);
-}
-
-/**
- * ===================== 头部，包含头像、标题、副标题
- */
-.mdui-card-header {
-  position: relative;
-  box-sizing: border-box;
-  height: 72px;
-  padding: 16px;
-}
-
-/* 卡片头部头像 */
-.mdui-card-header-avatar {
-  float: left;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-
-/* 卡片头部标题 */
-.mdui-card-header-title {
-  display: block;
-  margin-left: 52px;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 20px;
-  opacity: @opacity-black-text;
-  .mdui-text-truncate();
-}
-
-/* 卡片头部副标题 */
-.mdui-card-header-subtitle {
-  display: block;
-  margin-left: 52px;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  opacity: @opacity-black-secondary;
-  .mdui-text-truncate();
-}
-
-/**
- * =========================== 主标题区域
- */
-.mdui-card-primary {
-  position: relative;
-  padding: 24px 16px 16px 16px;
-}
-
-/* 主标题区域标题 */
-.mdui-card-primary-title {
-  display: block;
-  font-size: 24px;
-  line-height: 36px;
-  opacity: @opacity-black-text;
-}
-
-/* 主标题区域副标题 */
-.mdui-card-primary-subtitle {
-  display: block;
-  font-size: 14px;
-  line-height: 24px;
-  opacity: @opacity-black-secondary;
-}
-
-/**
- * ============================ 内容区域
- */
-.mdui-card-content {
-  position: relative;
-  padding: 16px;
-  font-size: 14px;
-  line-height: 24px;
-}
-
-/**
- * ============================ 卡片菜单
- */
-.mdui-card-menu {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  z-index: 1;
-
-  .mdui-btn {
-    margin-left: 8px;
-  }
-}
-
-/**
- * =========================== 按钮区域
- */
-.mdui-card-actions {
-  .mdui-clearfix();
-
-  position: relative;
-  box-sizing: border-box;
-  padding: 8px;
-
-  .mdui-btn {
-    max-width: 100%;
-    margin: 0 8px 0 0;
-    .mdui-text-truncate();
-  }
-
-  .mdui-btn-icon {
-    width: @button-height;
-    height: @button-height;
-    margin: 0 8px;
-  }
-}
-
-/* 使按钮竖向排列 */
-.mdui-card-actions-stacked {
-  .mdui-btn {
-    display: block;
-    margin: 0 0 4px 0;
-    &:last-child {
-      margin: 0;
-    }
-  }
-}
-
-/**
- * ============================= 媒体元素区域
- */
-.mdui-card-media {
-  position: relative;
-  img, video {
-    display: block;
-    width: 100%;
-  }
-}
-
-/* 覆盖在媒体元素上的内容 */
-.mdui-card-media-covered {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  color: #fff;
-  background: rgba(0, 0, 0, 0.2);
-
-  /* 覆盖在媒体元素上的标题 */
-  .mdui-card-primary-title {
-    opacity: @opacity-white-text;
-  }
-  .mdui-card-primary-subtitle {
-    opacity: @opacity-white-secondary;
-  }
-}
-
-/* 覆盖在媒体元素顶部 */
-.mdui-card-media-covered-top {
-  top: 0;
-  bottom: auto;
-}
-
-/* 覆盖层透明 */
-.mdui-card-media-covered-transparent {
-  background: transparent;
-}
-
-/* 覆盖层渐变 */
-.mdui-card-media-covered-gradient {
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
-
-  &.mdui-card-media-covered-top {
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Card dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-card {
-    color: #fff;
-    background-color: @layout-dark-color-4;
-  }
-});

package/src/components/chip/index.less

@@ -1,97 +0,0 @@
-/**
- * =============================================================================
- * ************   Chip 纸片   ************
- * =============================================================================
- */
-
-@chip-height: 32px;
-
-.mdui-chip {
-  display: inline-block;
-  box-sizing: border-box;
-  height: @chip-height;
-  margin: 2px 0;
-  color: inherit;
-  white-space: nowrap;
-  background-color: #e0e0e0;
-  border-radius: @chip-height / 2;
-  cursor: pointer;
-  user-select: none;
-  .mdui-hoverable(2);
-
-  &:active {
-    background-color: #d6d6d6;
-  }
-}
-
-/* 左侧的图标 */
-.mdui-chip-icon {
-  position: relative;
-  display: inline-block;
-  width: @chip-height;
-  height: @chip-height;
-  margin-right: -4px;
-  overflow: hidden;
-  color: #fff;
-  font-size: 18px;
-  line-height: @chip-height;
-  text-align: center;
-  vertical-align: middle;
-  background-color: #989898;
-  border-radius: 50%;
-
-  .mdui-icon {
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    color: #fff;
-  }
-}
-
-/* 文本 */
-.mdui-chip-title {
-  display: inline-block;
-  height: @chip-height;
-  padding-right: 12px;
-  padding-left: 12px;
-  font-size: 14px;
-  line-height: @chip-height;
-  vertical-align: middle;
-}
-
-/* 删除按钮 */
-.mdui-chip-delete {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  margin-right: 4px;
-  margin-left: -8px;
-  overflow: hidden;
-  text-align: center;
-  text-decoration: none;
-  vertical-align: middle;
-  border-radius: 50%;
-  cursor: pointer;
-  opacity: .54;
-  transition: opacity .25s @animation-curve-default;
-  will-change: opacity;
-  &:hover,
-  &:focus {
-    opacity: .87;
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Chip dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-chip {
-    background-color: #484848;
-    &:active {
-      background-color: #5d5d5d;
-    }
-  }
-});

package/src/components/collapse/collapseAbstract.ts

@@ -1,270 +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/children';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/eq';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/height';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/removeClass';
-import Selector from 'mdui.jq/es/types/Selector';
-import { isNumber } from 'mdui.jq/es/utils';
-import '../../jq_extends/methods/reflow';
-import '../../jq_extends/methods/transition';
-import '../../jq_extends/methods/transitionEnd';
-import { componentEvent } from '../../utils/componentEvent';
-
-type OPTIONS = {
-  /**
-   * 是否启用手风琴效果
-   * 为 `true` 时，最多只能有一个面板项处于打开状态，打开一个面板项时会关闭其他面板项
-   * 为 `false` 时，可同时打开多个面板项
-   */
-  accordion?: boolean;
-};
-
-type EVENT = 'open' | 'opened' | 'close' | 'closed';
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  accordion: false,
-};
-
-abstract class CollapseAbstract {
-  /**
-   * collapse 元素的 JQ 对象
-   */
-  public $element: JQ;
-
-  /**
-   * 配置参数
-   */
-  public options: OPTIONS = extend({}, DEFAULT_OPTIONS);
-
-  /**
-   * item 的 class 名
-   */
-  private classItem: string;
-
-  /**
-   * 打开状态的 item 的 class 名
-   */
-  private classItemOpen: string;
-
-  /**
-   * item-header 的 class 名
-   */
-  private classHeader: string;
-
-  /**
-   * item-body 的 class 名
-   */
-  private classBody: string;
-
-  /**
-   * 获取继承的组件名称
-   */
-  protected abstract getNamespace(): string;
-
-  public constructor(
-    selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    options: OPTIONS = {},
-  ) {
-    // CSS 类名
-    const classPrefix = `mdui-${this.getNamespace()}-item`;
-    this.classItem = classPrefix;
-    this.classItemOpen = `${classPrefix}-open`;
-    this.classHeader = `${classPrefix}-header`;
-    this.classBody = `${classPrefix}-body`;
-
-    this.$element = $(selector).first();
-
-    extend(this.options, options);
-
-    this.bindEvent();
-  }
-
-  /**
-   * 绑定事件
-   */
-  private bindEvent(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const that = this;
-
-    // 点击 header 时，打开/关闭 item
-    this.$element.on('click', `.${this.classHeader}`, function () {
-      const $header = $(this as HTMLElement);
-      const $item = $header.parent();
-      const $items = that.getItems();
-
-      $items.each((_, item) => {
-        if ($item.is(item)) {
-          that.toggle(item);
-        }
-      });
-    });
-
-    // 点击关闭按钮时，关闭 item
-    this.$element.on(
-      'click',
-      `[mdui-${this.getNamespace()}-item-close]`,
-      function () {
-        const $target = $(this as HTMLElement);
-        const $item = $target.parents(`.${that.classItem}`).first();
-
-        that.close($item);
-      },
-    );
-  }
-
-  /**
-   * 指定 item 是否处于打开状态
-   * @param $item
-   */
-  private isOpen($item: JQ): boolean {
-    return $item.hasClass(this.classItemOpen);
-  }
-
-  /**
-   * 获取所有 item
-   */
-  private getItems(): JQ {
-    return this.$element.children(`.${this.classItem}`);
-  }
-
-  /**
-   * 获取指定 item
-   * @param item
-   */
-  private getItem(
-    item: number | Selector | HTMLElement | ArrayLike<HTMLElement>,
-  ): JQ {
-    if (isNumber(item)) {
-      return this.getItems().eq(item);
-    }
-
-    return $(item).first();
-  }
-
-  /**
-   * 触发组件事件
-   * @param name 事件名
-   * @param $item 事件触发的目标 item
-   */
-  private triggerEvent(name: EVENT, $item: JQ): void {
-    componentEvent(name, this.getNamespace(), $item, this);
-  }
-
-  /**
-   * 动画结束回调
-   * @param $content body 元素
-   * @param $item item 元素
-   */
-  private transitionEnd($content: JQ, $item: JQ): void {
-    if (this.isOpen($item)) {
-      $content.transition(0).height('auto').reflow().transition('');
-
-      this.triggerEvent('opened', $item);
-    } else {
-      $content.height('');
-
-      this.triggerEvent('closed', $item);
-    }
-  }
-
-  /**
-   * 打开指定面板项
-   * @param item 面板项的索引号、或 CSS 选择器、或 DOM 元素、或 JQ 对象
-   */
-  public open(
-    item: number | Selector | HTMLElement | ArrayLike<HTMLElement>,
-  ): void {
-    const $item = this.getItem(item);
-
-    if (this.isOpen($item)) {
-      return;
-    }
-
-    // 关闭其他项
-    if (this.options.accordion) {
-      this.$element.children(`.${this.classItemOpen}`).each((_, element) => {
-        const $element = $(element);
-
-        if (!$element.is($item)) {
-          this.close($element);
-        }
-      });
-    }
-
-    const $content = $item.children(`.${this.classBody}`);
-
-    $content
-      .height($content[0].scrollHeight)
-      .transitionEnd(() => this.transitionEnd($content, $item));
-
-    this.triggerEvent('open', $item);
-
-    $item.addClass(this.classItemOpen);
-  }
-
-  /**
-   * 关闭指定面板项
-   * @param item 面板项的索引号、或 CSS 选择器、或 DOM 元素、或 JQ 对象
-   */
-  public close(
-    item: number | Selector | HTMLElement | ArrayLike<HTMLElement>,
-  ): void {
-    const $item = this.getItem(item);
-
-    if (!this.isOpen($item)) {
-      return;
-    }
-
-    const $content = $item.children(`.${this.classBody}`);
-
-    this.triggerEvent('close', $item);
-
-    $item.removeClass(this.classItemOpen);
-
-    $content
-      .transition(0)
-      .height($content[0].scrollHeight)
-      .reflow()
-      .transition('')
-      .height('')
-      .transitionEnd(() => this.transitionEnd($content, $item));
-  }
-
-  /**
-   * 切换指定面板项的打开状态
-   * @param item 面板项的索引号、或 CSS 选择器、或 DOM 元素、或 JQ 对象
-   */
-  public toggle(
-    item: number | Selector | HTMLElement | ArrayLike<HTMLElement>,
-  ): void {
-    const $item = this.getItem(item);
-
-    this.isOpen($item) ? this.close($item) : this.open($item);
-  }
-
-  /**
-   * 打开所有面板项
-   */
-  public openAll(): void {
-    this.getItems().each((_, element) => this.open(element));
-  }
-
-  /**
-   * 关闭所有面板项
-   */
-  public closeAll(): void {
-    this.getItems().each((_, element) => this.close(element));
-  }
-}
-
-export { OPTIONS, CollapseAbstract };

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

package/src/components/collapse/index.less

@@ -1,44 +0,0 @@
-/**
- * =============================================================================
- * ************   Collapse 折叠插件   ************
- * =============================================================================
- */
-
- .mdui-collapse-item-header {
-  // 图标，打开时翻转 180 度
-  .mdui-collapse-item-arrow,
-  &.mdui-collapse-item-arrow {
-    transform: rotate(0);
-    transition: transform .3s @animation-curve-default;
-    will-change: transform;
-  }
-}
-
-.mdui-collapse-item-body {
-  height: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  overflow: hidden;
-  transition: all .3s @animation-curve-default;
-  will-change: height;
-
-  // 使子列表缩进
-  .mdui-list-item {
-    padding-left: 72px;
-  }
-}
-
-.mdui-collapse-item-open {
-  &>.mdui-collapse-item-header {
-    .mdui-collapse-item-arrow,
-    &.mdui-collapse-item-arrow {
-      transform: rotate(180deg);
-    }
-  }
-
-  &>.mdui-collapse-item-body {
-    height: auto;
-  }
-}

package/src/components/collapse/index.ts

@@ -1,32 +0,0 @@
-import Selector from 'mdui.jq/es/types/Selector';
-import mdui from '../../mdui';
-import { CollapseAbstract, OPTIONS } from './collapseAbstract';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * 折叠内容块组件
-     *
-     * 请通过 `new mdui.Collapse()` 调用
-     */
-    Collapse: {
-      /**
-       * 实例化 Collapse 组件
-       * @param selector CSS 选择器或 DOM 元素
-       * @param options 配置参数
-       */
-      new (
-        selector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-        options?: OPTIONS,
-      ): Collapse;
-    };
-  }
-}
-
-class Collapse extends CollapseAbstract {
-  protected getNamespace(): string {
-    return 'collapse';
-  }
-}
-
-mdui.Collapse = Collapse;

package/src/components/dialog/alert.less

@@ -1,11 +0,0 @@
-/**
- * =============================================================================
- * ************   Dialog alert   ************
- * =============================================================================
- */
-
- @import './index';
-
-.mdui-dialog-alert {
-  max-width: 448px;
-}