mdui 1.0.2 → 2.0.1

package/src/components/ripple/index.less

@@ -1,92 +0,0 @@
-/**
- * =============================================================================
- * ************   涟漪动画   ************
- * =============================================================================
- */
-
-.mdui-ripple {
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  user-select: none;
-}
-
-/* Ripple */
-.mdui-ripple-wave {
-  position: absolute !important;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  margin: 0;
-  padding: 0;
-  font-size: 0;
-  background-color: rgba(0, 0, 0, 0.1);
-  border-radius: 50%;
-  transform: translate3d(0, 0, 0) scale(0);
-  transition-duration: 1400ms;
-  pointer-events: none;
-}
-
-/* 有背景色的默认使用白色涟漪 */
-.mdui-ripple[class*="mdui-color-"] {
-  .mdui-ripple-wave {
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-}
-
-/* 白色涟漪 */
-.mdui-ripple-white .mdui-ripple-wave {
-  background-color: rgba(255, 255, 255, 0.3) !important;
-}
-
-/* 黑色涟漪 */
-.mdui-ripple-black .mdui-ripple-wave {
-  background-color: rgba(0, 0, 0, 0.1) !important;
-}
-
-.mdui-ripple-wave-fill {
-  opacity: 0.35;
-  transition-duration: 300ms;
-}
-
-.mdui-ripple-wave-out {
-  opacity: 0;
-  transition-duration: 600ms;
-}
-
-
-/**
- * =============================================================================
- * ************   Ripple 颜色   ************
- * =============================================================================
- */
-& {
-  .loop-primary-theme(@counter-color) when (@counter-color > 0) {
-    .loop-primary-theme((@counter-color - 1));
-    @colorName: extract(@globalPrimaryColors, @counter-color);
-
-    // 指定涟漪颜色
-    .mdui-ripple-@{colorName} when not (@colorName = null) {
-      .mdui-ripple-wave {
-        @color: 'color-@{colorName}-500';
-
-        background-color: rgba(red(@@color), green(@@color), blue(@@color), 0.3) !important;
-      }
-    }
-
-  }
-  .loop-primary-theme(length(@globalPrimaryColors));
-}
-
-
-/**
- * =============================================================================
- * ************   Ripple dark   ************
- * =============================================================================
- */
-.layout-theme({
-  // 深色主题下使用白色涟漪
-  .mdui-ripple-wave {
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-});

package/src/components/ripple/index.ts

@@ -1,217 +0,0 @@
-/**
- * Inspired by https://github.com/nolimits4web/Framework7/blob/master/src/js/fast-clicks.js
- * https://github.com/nolimits4web/Framework7/blob/master/LICENSE
- *
- * Inspired by https://github.com/fians/Waves
- */
-
-import $ from 'mdui.jq/es/$';
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/innerHeight';
-import 'mdui.jq/es/methods/innerWidth';
-import 'mdui.jq/es/methods/off';
-import 'mdui.jq/es/methods/offset';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/prependTo';
-import 'mdui.jq/es/methods/prop';
-import 'mdui.jq/es/methods/remove';
-import { isUndefined } from 'mdui.jq/es/utils';
-import '../../jq_extends/methods/reflow';
-import '../../jq_extends/methods/transform';
-import '../../jq_extends/methods/transitionEnd';
-import { $document } from '../../utils/dom';
-import {
-  cancelEvent,
-  endEvent,
-  isAllow,
-  moveEvent,
-  register,
-  startEvent,
-  unlockEvent,
-} from '../../utils/touchHandler';
-
-/**
- * 显示涟漪动画
- * @param event
- * @param $ripple
- */
-function show(event: Event, $ripple: JQ): void {
-  // 鼠标右键不产生涟漪
-  if (event instanceof MouseEvent && event.button === 2) {
-    return;
-  }
-
-  // 点击位置坐标
-  const touchPosition =
-    typeof TouchEvent !== 'undefined' &&
-    event instanceof TouchEvent &&
-    event.touches.length
-      ? event.touches[0]
-      : (event as MouseEvent);
-
-  const touchStartX = touchPosition.pageX;
-  const touchStartY = touchPosition.pageY;
-
-  // 涟漪位置
-  const offset = $ripple.offset();
-  const height = $ripple.innerHeight();
-  const width = $ripple.innerWidth();
-  const center = {
-    x: touchStartX - offset.left,
-    y: touchStartY - offset.top,
-  };
-  const diameter = Math.max(
-    Math.pow(Math.pow(height, 2) + Math.pow(width, 2), 0.5),
-    48,
-  );
-
-  // 涟漪扩散动画
-  const translate =
-    `translate3d(${-center.x + width / 2}px,` +
-    `${-center.y + height / 2}px, 0) scale(1)`;
-
-  // 涟漪的 DOM 结构，并缓存动画效果
-  $(
-    `<div class="mdui-ripple-wave" ` +
-      `style="width:${diameter}px;height:${diameter}px;` +
-      `margin-top:-${diameter / 2}px;margin-left:-${diameter / 2}px;` +
-      `left:${center.x}px;top:${center.y}px;"></div>`,
-  )
-    .data('_ripple_wave_translate', translate)
-    .prependTo($ripple)
-    .reflow()
-    .transform(translate);
-}
-
-/**
- * 隐藏并移除涟漪
- * @param $wave
- */
-function removeRipple($wave: JQ): void {
-  if (!$wave.length || $wave.data('_ripple_wave_removed')) {
-    return;
-  }
-
-  $wave.data('_ripple_wave_removed', true);
-
-  let removeTimer = setTimeout(() => $wave.remove(), 400);
-  const translate = $wave.data('_ripple_wave_translate');
-
-  $wave
-    .addClass('mdui-ripple-wave-fill')
-    .transform(translate.replace('scale(1)', 'scale(1.01)'))
-    .transitionEnd(() => {
-      clearTimeout(removeTimer);
-
-      $wave
-        .addClass('mdui-ripple-wave-out')
-        .transform(translate.replace('scale(1)', 'scale(1.01)'));
-
-      removeTimer = setTimeout(() => $wave.remove(), 700);
-
-      setTimeout(() => {
-        $wave.transitionEnd(() => {
-          clearTimeout(removeTimer);
-          $wave.remove();
-        });
-      }, 0);
-    });
-}
-
-/**
- * 隐藏涟漪动画
- * @param this
- */
-function hide(this: any): void {
-  const $ripple = $(this as HTMLElement);
-
-  $ripple.children('.mdui-ripple-wave').each((_, wave) => {
-    removeRipple($(wave));
-  });
-
-  $ripple.off(`${moveEvent} ${endEvent} ${cancelEvent}`, hide);
-}
-
-/**
- * 显示涟漪，并绑定 touchend 等事件
- * @param event
- */
-function showRipple(event: Event): void {
-  if (!isAllow(event)) {
-    return;
-  }
-
-  register(event);
-
-  // Chrome 59 点击滚动条时，会在 document 上触发事件
-  if (event.target === document) {
-    return;
-  }
-
-  const $target = $(event.target as HTMLElement);
-
-  // 获取含 .mdui-ripple 类的元素
-  const $ripple = $target.hasClass('mdui-ripple')
-    ? $target
-    : $target.parents('.mdui-ripple').first();
-
-  if (!$ripple.length) {
-    return;
-  }
-
-  // 禁用状态的元素上不产生涟漪效果
-  if ($ripple.prop('disabled') || !isUndefined($ripple.attr('disabled'))) {
-    return;
-  }
-
-  if (event.type === 'touchstart') {
-    let hidden = false;
-
-    // touchstart 触发指定时间后开始涟漪动画，避免手指滑动时也触发涟漪
-    let timer = setTimeout(() => {
-      timer = 0;
-      show(event, $ripple);
-    }, 200);
-
-    const hideRipple = (): void => {
-      // 如果手指没有移动，且涟漪动画还没有开始，则开始涟漪动画
-      if (timer) {
-        clearTimeout(timer);
-        timer = 0;
-        show(event, $ripple);
-      }
-
-      if (!hidden) {
-        hidden = true;
-        hide.call($ripple);
-      }
-    };
-
-    // 手指移动后，移除涟漪动画
-    const touchMove = (): void => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = 0;
-      }
-
-      hideRipple();
-    };
-
-    $ripple.on('touchmove', touchMove).on('touchend touchcancel', hideRipple);
-  } else {
-    show(event, $ripple);
-    $ripple.on(`${moveEvent} ${endEvent} ${cancelEvent}`, hide);
-  }
-}
-
-$(() => {
-  $document.on(startEvent, showRipple).on(unlockEvent, register);
-});

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

package/src/components/select/index.less

@@ -1,342 +0,0 @@
-/**
- * =============================================================================
- * ************   Select 下拉选择   ************
- * =============================================================================
- */
-
-.mdui-select {
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  max-width: 100%;
-  height: 36px;
-  padding-right: 24px;
-  padding-left: 0;
-  font-size: 16px;
-  font-family: @font-family-base;
-  vertical-align: middle;
-  //background-image: data-uri('image/svg+xml', './components/select/svg/arrow_down_dark.svg');
-  // https://www.zhangxinxu.com/sp/svgo/ CSS 转义
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M-.003 2.5l5 5 5-5h-10z' opacity='.54'/%3E%3C/svg%3E");
-
-  // 箭头
-  background-repeat: no-repeat;
-  background-position: right center;
-  border: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  outline: none;
-  cursor: pointer;
-  transition-timing-function: @animation-curve-default;
-  transition-duration: .2s;
-  transition-property: background-color, box-shadow, background-position-x;
-  appearance: none;
-  user-select: none;
-  will-change: background-color, box-shadow, background-position-x;
-
-  &.mdui-select-open {
-    border-bottom: none;
-  }
-}
-
-.mdui-select-position-top {
-  //background-image: data-uri('image/svg+xml', './components/select/svg/arrow_up_dark.svg');
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M10.003 7.5l-5-5-5 5h10z' opacity='.54'/%3E%3C/svg%3E");
-}
-
-/* 底部和顶部菜单的样式 */
-.mdui-select-open {
-  &.mdui-select-position-top,
-  &.mdui-select-position-bottom {
-    z-index: 99999;
-    background-color: #fff;
-    /* stylelint-disable-next-line */
-    background-position-x: calc(~'100% - 12px');
-    border-radius: 2px;
-  }
-
-  &.mdui-select-position-top {
-    border-top: 1px solid rgba(0, 0, 0, 0.12);
-    border-bottom: 2px solid transparent;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    box-shadow: 0 10px 10px -3px rgba(0,0,0,.2), 0 0 14px 1px rgba(0,0,0,.14), 0 -7px 24px 2px rgba(0,0,0,.12);
-
-    .mdui-select-menu {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-
-      // 隐藏下方的阴影
-      box-shadow: 0 -4px 4px -2px rgba(0,0,0,.06), 8px 0 8px -4px rgba(0,0,0,.12), -8px 0 8px -4px rgba(0,0,0,.12)
-    }
-  }
-
-  &.mdui-select-position-bottom {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    .mdui-shadow(8);
-
-    .mdui-select-menu {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-
-      // 隐藏上方阴影
-      box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 9px 9px 1px rgba(0,0,0,.14), 0 8px 8px 2px rgba(0,0,0,.06);
-    }
-  }
-}
-
-/* 当前选中项文本 */
-.mdui-select-selected {
-  position: absolute;
-  top: 50%;
-  right: 24px;
-  left: 0;
-  display: block;
-  transform: translateY(-50%);
-  transition: left .2s @animation-curve-linear-out-slow-in;
-  .mdui-text-truncate();
-
-  .mdui-select-open & {
-    right: 32px;
-    left: 16px;
-  }
-
-  .mdui-select-open.mdui-select-position-auto & {
-    visibility: hidden;
-  }
-}
-
-/* 菜单 */
-.mdui-select-menu {
-  position: relative;
-  z-index: 99999;
-  box-sizing: border-box;
-  height: 36px;
-  margin: 0 -24px 0 0;
-
-  // 在计算宽度时，把滚动条计算进去
-  overflow-y: scroll;
-  color: @color-black-text;
-  background-color: #fff;
-  border-radius: 2px;
-  transform: scale(1, 0);
-  visibility: hidden;
-  cursor: default;
-  opacity: 0;
-  transition-timing-function: @animation-curve-linear-out-slow-in;
-  transition-duration: .2s;
-  transition-property: transform, opacity, visibility;
-  will-change: transform, opacity, visibility;
-  -webkit-overflow-scrolling: touch;
-  .mdui-shadow(8);
-
-  // 打开状态的菜单
-  .mdui-select-open & {
-    overflow-y: hidden;
-    transform: scale(1, 1);
-    visibility: visible;
-    opacity: 1;
-  }
-
-  // 关闭状态的菜单
-  .mdui-select-closing & {
-    overflow-y: hidden;
-    box-shadow: none;
-    transform: scale(1, 1);
-    visibility: visible;
-    opacity: 0;
-  }
-}
-
-/* 菜单项 */
-.mdui-select-menu-item {
-  height: 48px;
-  padding: 0 16px;
-  line-height: 48px;
-  cursor: pointer;
-  .mdui-text-truncate();
-
-  &:hover {
-    background-color: @color-grey-200;
-  }
-
-  &:first-child {
-    margin-top: 8px;
-  }
-
-  &:last-child {
-    margin-bottom: 8px;
-  }
-
-  // 禁用项
-  &[disabled] {
-    color: @color-black-disabled !important;
-    cursor: default;
-
-    &:hover {
-      background-color: inherit !important;
-    }
-  }
-
-  // 已选中项
-  &[selected] {
-    color: @color-default-a200;
-  }
-}
-
-
-/* 原生 select 组件 */
-select.mdui-select {
-  background-color: transparent;
-
-  option {
-    color: rgba(0, 0, 0, 0.87);
-  }
-
-  // 移除 IE 的下拉按钮
-  &::-ms-expand {
-    display: none;
-  }
-}
-
-/* 原生多选 select 组件 */
-select.mdui-select[multiple] {
-  height: auto;
-  padding: 0;
-  font-size: 15px;
-  background-color: #FFF;
-  background-image: none;
-  border: 1px solid rgba(0, 0, 0, 0.38);
-  cursor: default;
-
-  optgroup {
-    margin: 8px 0 0 0;
-    padding: 0 0 0 16px;
-    color: rgba(0, 0, 0, 0.38);
-
-    &:last-child {
-      margin-bottom: 8px;
-    }
-
-    &:not(:first-child) {
-      padding-top: 8px;
-      border-top: 1px solid rgba(0, 0, 0, 0.12);
-    }
-  }
-
-  option {
-    display: flex;
-    align-items: center;
-    height: 32px;
-    margin: 0 0 0 -16px;
-    padding: 0 16px;
-    color: rgba(0, 0, 0, 0.87);
-
-    &:first-child {
-      margin-top: 8px;
-    }
-
-    &:last-child {
-      margin-bottom: 8px;
-    }
-  }
-}
-
-/**
- * =============================================================================
- * ************   Select 强调色   ************
- * =============================================================================
- */
-
-& {
-  .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-select-menu-item {
-        // 菜单中已选中项
-        &[selected] {
-          .mdui-text-color(@colorName);
-        }
-      }
-
-    }
-  }
-  .loop-accent-theme(length(@globalAccentColors));
-}
-
-
-/**
- * =============================================================================
- * ************   Select dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-select {
-    //background-image: data-uri('image/svg+xml', './components/select/svg/arrow_down_light.svg');
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M-.003 2.5l5 5 5-5h-10z' fill='%23FFF'/%3E%3C/svg%3E");
-    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-  }
-
-  .mdui-select-position-top {
-    //background-image: data-uri('image/svg+xml', './components/select/svg/arrow_up_light.svg');
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M10.003 7.5l-5-5-5 5h10z' fill='%23FFF'/%3E%3C/svg%3E");
-  }
-
-  .mdui-select-open {
-    &.mdui-select-position-top,
-    &.mdui-select-position-bottom {
-      background-color: @layout-dark-color-4;
-    }
-
-    &.mdui-select-position-top {
-      border-top: 1px solid rgba(255, 255, 255, 0.12);
-    }
-
-    &.mdui-select-position-bottom {
-      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-    }
-  }
-
-  .mdui-select-menu {
-    color: #fff;
-    background-color: @layout-dark-color-4;
-  }
-
-  .mdui-select-menu-item {
-    &:hover {
-      background-color: @color-grey-700;
-    }
-
-    &[disabled] {
-      color: @color-white-disabled !important;
-    }
-  }
-
-  // 原生 select 组件
-  select.mdui-select {
-    color: #FFF;
-    background-color: @layout-dark-color-3;
-
-    option {
-      color: #FFF;
-      background-color: @layout-dark-color-3;
-    }
-  }
-
-  // 原生多选 select 组件
-  select.mdui-select[multiple] {
-    border: 1px solid rgba(255, 255, 255, 0.5);
-
-    optgroup {
-      color: rgba(255, 255, 255, 0.5);
-
-      &:not(:first-child) {
-        border-top: 1px solid rgba(255, 255, 255, 0.12);
-      }
-    }
-  }
-});