mdui 1.0.2 → 2.0.0

package/src/components/slider/index.ts

@@ -1,187 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/append';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/css';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/empty';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/remove';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/text';
-import 'mdui.jq/es/methods/val';
-import 'mdui.jq/es/methods/width';
-import Selector from 'mdui.jq/es/types/Selector';
-import { isUndefined } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import { $document } from '../../utils/dom';
-import {
-  endEvent,
-  isAllow,
-  register,
-  startEvent,
-  unlockEvent,
-} from '../../utils/touchHandler';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * 动态修改了滑块后，需要调用该方法重新初始化滑块
-     *
-     * 若传入了参数，则只初始化该参数对应的滑块。若没有传入参数，则重新初始化所有滑块。
-     * @param selector CSS 选择器、或 DOM 元素、或 DOM 元素组成的数组、或 JQ 对象
-     */
-    updateSliders(
-      selector?: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    ): void;
-  }
-}
-
-/**
- * 滑块的值改变后修改滑块样式
- * @param $slider
- */
-function updateValueStyle($slider: JQ): void {
-  const data = $slider.data();
-
-  const $track = data._slider_$track;
-  const $fill = data._slider_$fill;
-  const $thumb = data._slider_$thumb;
-  const $input = data._slider_$input;
-  const min = data._slider_min;
-  const max = data._slider_max;
-  const isDisabled = data._slider_disabled;
-  const isDiscrete = data._slider_discrete;
-  const $thumbText = data._slider_$thumbText;
-  const value = $input.val();
-  const percent = ((value - min) / (max - min)) * 100;
-
-  $fill.width(`${percent}%`);
-  $track.width(`${100 - percent}%`);
-
-  if (isDisabled) {
-    $fill.css('padding-right', '6px');
-    $track.css('padding-left', '6px');
-  }
-
-  $thumb.css('left', `${percent}%`);
-
-  if (isDiscrete) {
-    $thumbText.text(value);
-  }
-
-  percent === 0
-    ? $slider.addClass('mdui-slider-zero')
-    : $slider.removeClass('mdui-slider-zero');
-}
-
-/**
- * 重新初始化滑块
- * @param $slider
- */
-function reInit($slider: JQ): void {
-  const $track = $('<div class="mdui-slider-track"></div>');
-  const $fill = $('<div class="mdui-slider-fill"></div>');
-  const $thumb = $('<div class="mdui-slider-thumb"></div>');
-  const $input = $slider.find('input[type="range"]') as JQ<HTMLInputElement>;
-  const isDisabled = $input[0].disabled;
-  const isDiscrete = $slider.hasClass('mdui-slider-discrete');
-
-  // 禁用状态
-  isDisabled
-    ? $slider.addClass('mdui-slider-disabled')
-    : $slider.removeClass('mdui-slider-disabled');
-
-  // 重新填充 HTML
-  $slider.find('.mdui-slider-track').remove();
-  $slider.find('.mdui-slider-fill').remove();
-  $slider.find('.mdui-slider-thumb').remove();
-  $slider.append($track).append($fill).append($thumb);
-
-  // 间续型滑块
-  let $thumbText = $();
-  if (isDiscrete) {
-    $thumbText = $('<span></span>');
-    $thumb.empty().append($thumbText);
-  }
-
-  $slider.data('_slider_$track', $track);
-  $slider.data('_slider_$fill', $fill);
-  $slider.data('_slider_$thumb', $thumb);
-  $slider.data('_slider_$input', $input);
-  $slider.data('_slider_min', $input.attr('min'));
-  $slider.data('_slider_max', $input.attr('max'));
-  $slider.data('_slider_disabled', isDisabled);
-  $slider.data('_slider_discrete', isDiscrete);
-  $slider.data('_slider_$thumbText', $thumbText);
-
-  // 设置默认值
-  updateValueStyle($slider);
-}
-
-const rangeSelector = '.mdui-slider input[type="range"]';
-
-$(() => {
-  // 滑块滑动事件
-  $document.on('input change', rangeSelector, function () {
-    const $slider = $(this).parent() as JQ<HTMLElement>;
-
-    updateValueStyle($slider);
-  });
-
-  // 开始触摸滑块事件
-  $document.on(startEvent, rangeSelector, function (event: Event) {
-    if (!isAllow(event)) {
-      return;
-    }
-
-    register(event);
-
-    if ((this as HTMLInputElement).disabled) {
-      return;
-    }
-
-    const $slider = $(this).parent() as JQ<HTMLElement>;
-
-    $slider.addClass('mdui-slider-focus');
-  });
-
-  // 结束触摸滑块事件
-  $document.on(endEvent, rangeSelector, function (event: Event) {
-    if (!isAllow(event)) {
-      return;
-    }
-
-    if ((this as HTMLInputElement).disabled) {
-      return;
-    }
-
-    const $slider = $(this).parent() as JQ<HTMLElement>;
-
-    $slider.removeClass('mdui-slider-focus');
-  });
-
-  $document.on(unlockEvent, rangeSelector, register);
-
-  /**
-   * 初始化滑块
-   */
-  mdui.mutation('.mdui-slider', function () {
-    reInit($(this));
-  });
-});
-
-mdui.updateSliders = function (
-  selector?: Selector | HTMLElement | ArrayLike<HTMLElement>,
-): void {
-  const $elements = isUndefined(selector) ? $('.mdui-slider') : $(selector);
-
-  $elements.each((_, element) => {
-    reInit($(element));
-  });
-};

package/src/components/snackbar/index.less

@@ -1,133 +0,0 @@
-/**
- * =============================================================================
- * ************   Snackbar   ************
- * =============================================================================
- */
-
-@import '../button/index';
-
-.mdui-snackbar {
-  position: fixed;
-  z-index: @z-index-snackbar;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-
-  // 手机端的样式
-  width: 100%;
-  min-height: 48px;
-  padding: 0 24px 0 24px;
-  color: #fff;
-  font-size: 14px;
-  line-height: 20px;
-  background-color: #323232;
-  will-change: transform;
-
-  // 平板、桌面端样式
-  @media (min-width: @screen-sm-min) {
-    width: auto;
-    min-width: 288px;
-    max-width: 568px;
-    border-radius: 2px;
-  }
-}
-
-.mdui-snackbar-bottom,
-.mdui-snackbar-top,
-.mdui-snackbar-left-top,
-.mdui-snackbar-left-bottom,
-.mdui-snackbar-right-top,
-.mdui-snackbar-right-bottom {
-  transition: transform .3s @animation-curve-default;
-}
-
-/* 位置 */
-.mdui-snackbar-bottom,
-.mdui-snackbar-left-bottom,
-.mdui-snackbar-right-bottom {
-  bottom: 0;
-}
-
-.mdui-snackbar-top,
-.mdui-snackbar-left-top,
-.mdui-snackbar-right-top {
-  top: 0;
-}
-
-.mdui-snackbar-top,
-.mdui-snackbar-bottom {
-  left: 50%;
-}
-
-// 平板、桌面端位置
-@media (min-width: @screen-sm-min) {
-  .mdui-snackbar-left-top {
-    top: 24px;
-    left: 24px;
-  }
-
-  .mdui-snackbar-left-bottom {
-    bottom: 24px;
-    left: 24px;
-  }
-
-  .mdui-snackbar-right-top {
-    top: 24px;
-    right: 24px;
-  }
-
-  .mdui-snackbar-right-bottom {
-    right: 24px;
-    bottom: 24px;
-  }
-}
-
-/* 文本 */
-.mdui-snackbar-text {
-  position: relative;
-  max-width: 100%;
-  padding: 14px 0 14px 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* 按钮 */
-.mdui-snackbar-action {
-  margin-right: -16px;
-  white-space: nowrap;
-  .mdui-text-color(@color-accent-default-name, a100);
-}
-
-
-/**
- * =============================================================================
- * ************   Snackbar 强调色   ************
- * =============================================================================
- */
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    .mdui-theme-accent-@{colorName} when not (@colorName = null) {
-      .mdui-snackbar-action {
-        .mdui-text-color(@colorName, a100);
-      }
-    }
-
-  }
-  .loop-accent-theme(length(@globalAccentColors));
-}
-
-
-/**
- * =============================================================================
- * ************   Snackbar dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-snackbar {
-    background-color: #5d5d5d;
-  }
-});

package/src/components/snackbar/index.ts

@@ -1,367 +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/find';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/off';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/remove';
-import { isString } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../jq_extends/methods/reflow';
-import '../../jq_extends/methods/transform';
-import '../../jq_extends/methods/transitionEnd';
-import { $document } from '../../utils/dom';
-import { dequeue, queue } from '../../utils/queue';
-import { startEvent } from '../../utils/touchHandler';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * 打开一个 Snackbar
-     * @param message Snackbar 的文本
-     * @param options 配置参数
-     */
-    snackbar(message: string, options?: OPTIONS): Snackbar;
-
-    /**
-     * 打开一个 Snackbar
-     * @param options 配置参数
-     */
-    snackbar(options: OPTIONS): Snackbar;
-  }
-}
-
-type OPTIONS = {
-  /**
-   * Snackbar 的文本。通过 `mdui.snackbar(options)` 调用时，该参数不能为空
-   */
-  message?: string;
-
-  /**
-   * 在用户没有操作时多长时间自动隐藏，单位（毫秒）。为 `0` 时表示不自动关闭，默认为 `4000`
-   */
-  timeout?: number;
-
-  /**
-   * Snackbar 的位置，默认为 `bottom`。
-   * 取值范围包括：
-   *   `bottom`: 下方
-   *   `top`: 上方
-   *   `left-top`: 左上角
-   *   `left-bottom`: 左下角
-   *   `right-top`: 右上角
-   *   `right-bottom`: 右下角
-   */
-  position?:
-    | 'bottom'
-    | 'top'
-    | 'left-top'
-    | 'left-bottom'
-    | 'right-top'
-    | 'right-bottom';
-
-  /**
-   * 按钮的文本
-   */
-  buttonText?: string;
-
-  /**
-   * 按钮的文本颜色，可以是颜色名或颜色值，如 `red`、`#ffffff`、`rgba(255, 255, 255, 0.3)` 等。默认为 `#90CAF9`
-   */
-  buttonColor?: string;
-
-  /**
-   * 点击按钮时是否关闭 Snackbar，默认为 `true`
-   */
-  closeOnButtonClick?: boolean;
-
-  /**
-   * 点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar，默认为 `true`
-   */
-  closeOnOutsideClick?: boolean;
-
-  /**
-   * 在 Snackbar 上点击的回调函数，参数为 Snackbar 的实例
-   */
-  onClick?: (snackbar: Snackbar) => void;
-
-  /**
-   * 点击 Snackbar 上的按钮时的回调函数，参数为 Snackbar 的实例
-   */
-  onButtonClick?: (snackbar: Snackbar) => void;
-
-  /**
-   * Snackbar 开始打开时的回调函数，参数为 Snackbar 的实例
-   */
-  onOpen?: (snackbar: Snackbar) => void;
-
-  /**
-   * Snackbar 打开后的回调函数，参数为 Snackbar 的实例
-   */
-  onOpened?: (snackbar: Snackbar) => void;
-
-  /**
-   * Snackbar 开始关闭时的回调函数，参数为 Snackbar 的实例
-   */
-  onClose?: (snackbar: Snackbar) => void;
-
-  /**
-   * Snackbar 关闭后的回调函数，参数为 Snackbar 的实例
-   */
-  onClosed?: (snackbar: Snackbar) => void;
-};
-
-type STATE = 'opening' | 'opened' | 'closing' | 'closed';
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  message: '',
-  timeout: 4000,
-  position: 'bottom',
-  buttonText: '',
-  buttonColor: '',
-  closeOnButtonClick: true,
-  closeOnOutsideClick: true,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onClick: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onButtonClick: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onOpen: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onOpened: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onClose: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onClosed: () => {},
-};
-
-/**
- * 当前打开着的 Snackbar
- */
-let currentInst: null | Snackbar = null;
-
-/**
- * 队列名
- */
-const queueName = '_mdui_snackbar';
-
-class Snackbar {
-  /**
-   * Snackbar 元素
-   */
-  public $element: JQ;
-  /**
-   * 配置参数
-   */
-  public options: OPTIONS = extend({}, DEFAULT_OPTIONS);
-
-  /**
-   * 当前 Snackbar 的状态
-   */
-  private state: STATE = 'closed';
-
-  /**
-   * setTimeout 的 ID
-   */
-  private timeoutId: any = null;
-
-  public constructor(options: OPTIONS) {
-    extend(this.options, options);
-
-    // 按钮颜色
-    let buttonColorStyle = '';
-    let buttonColorClass = '';
-
-    if (
-      this.options.buttonColor!.indexOf('#') === 0 ||
-      this.options.buttonColor!.indexOf('rgb') === 0
-    ) {
-      buttonColorStyle = `style="color:${this.options.buttonColor}"`;
-    } else if (this.options.buttonColor !== '') {
-      buttonColorClass = `mdui-text-color-${this.options.buttonColor}`;
-    }
-
-    // 添加 HTML
-    this.$element = $(
-      '<div class="mdui-snackbar">' +
-        `<div class="mdui-snackbar-text">${this.options.message}</div>` +
-        (this.options.buttonText
-          ? `<a href="javascript:void(0)" class="mdui-snackbar-action mdui-btn mdui-ripple mdui-ripple-white ${buttonColorClass}" ${buttonColorStyle}>${this.options.buttonText}</a>`
-          : '') +
-        '</div>',
-    ).appendTo(document.body);
-
-    // 设置位置
-    this.setPosition('close');
-
-    this.$element.reflow().addClass(`mdui-snackbar-${this.options.position}`);
-  }
-
-  /**
-   * 点击 Snackbar 外面的区域关闭
-   * @param event
-   */
-  private closeOnOutsideClick(event: Event): void {
-    const $target = $(event.target as HTMLElement);
-
-    if (
-      !$target.hasClass('mdui-snackbar') &&
-      !$target.parents('.mdui-snackbar').length
-    ) {
-      currentInst!.close();
-    }
-  }
-
-  /**
-   * 设置 Snackbar 的位置
-   * @param state
-   */
-  private setPosition(state: 'open' | 'close'): void {
-    const snackbarHeight = this.$element[0].clientHeight;
-    const position = this.options.position;
-
-    let translateX;
-    let translateY;
-
-    // translateX
-    if (position === 'bottom' || position === 'top') {
-      translateX = '-50%';
-    } else {
-      translateX = '0';
-    }
-
-    // translateY
-    if (state === 'open') {
-      translateY = '0';
-    } else {
-      if (position === 'bottom') {
-        translateY = snackbarHeight;
-      }
-
-      if (position === 'top') {
-        translateY = -snackbarHeight;
-      }
-
-      if (position === 'left-top' || position === 'right-top') {
-        translateY = -snackbarHeight - 24;
-      }
-
-      if (position === 'left-bottom' || position === 'right-bottom') {
-        translateY = snackbarHeight + 24;
-      }
-    }
-
-    this.$element.transform(`translate(${translateX},${translateY}px`);
-  }
-
-  /**
-   * 打开 Snackbar
-   */
-  public open(): void {
-    if (this.state === 'opening' || this.state === 'opened') {
-      return;
-    }
-
-    // 如果当前有正在显示的 Snackbar，则先加入队列，等旧 Snackbar 关闭后再打开
-    if (currentInst) {
-      queue(queueName, () => this.open());
-      return;
-    }
-
-    currentInst = this;
-
-    // 开始打开
-    this.state = 'opening';
-    this.options.onOpen!(this);
-
-    this.setPosition('open');
-
-    this.$element.transitionEnd(() => {
-      if (this.state !== 'opening') {
-        return;
-      }
-
-      this.state = 'opened';
-      this.options.onOpened!(this);
-
-      // 有按钮时绑定事件
-      if (this.options.buttonText) {
-        this.$element.find('.mdui-snackbar-action').on('click', () => {
-          this.options.onButtonClick!(this);
-          if (this.options.closeOnButtonClick) {
-            this.close();
-          }
-        });
-      }
-
-      // 点击 snackbar 的事件
-      this.$element.on('click', (event) => {
-        if (!$(event.target as HTMLElement).hasClass('mdui-snackbar-action')) {
-          this.options.onClick!(this);
-        }
-      });
-
-      // 点击 Snackbar 外面的区域关闭
-      if (this.options.closeOnOutsideClick) {
-        $document.on(startEvent, this.closeOnOutsideClick);
-      }
-
-      // 超时后自动关闭
-      if (this.options.timeout) {
-        this.timeoutId = setTimeout(() => this.close(), this.options.timeout);
-      }
-    });
-  }
-
-  /**
-   * 关闭 Snackbar
-   */
-  public close(): void {
-    if (this.state === 'closing' || this.state === 'closed') {
-      return;
-    }
-
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
-
-    if (this.options.closeOnOutsideClick) {
-      $document.off(startEvent, this.closeOnOutsideClick);
-    }
-
-    this.state = 'closing';
-    this.options.onClose!(this);
-
-    this.setPosition('close');
-
-    this.$element.transitionEnd(() => {
-      if (this.state !== 'closing') {
-        return;
-      }
-
-      currentInst = null;
-      this.state = 'closed';
-      this.options.onClosed!(this);
-      this.$element.remove();
-      dequeue(queueName);
-    });
-  }
-}
-
-mdui.snackbar = function (message: any, options: any = {}): Snackbar {
-  if (isString(message)) {
-    options.message = message;
-  } else {
-    options = message;
-  }
-
-  const instance = new Snackbar(options);
-
-  instance.open();
-
-  return instance;
-};