mdui 1.0.2 → 2.0.0

package/src/components/menu/svg/arrow_right_dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" opacity="0.54" transform="rotate(-90 12,12.5)" fill="#000000"/></svg>

package/src/components/menu/svg/arrow_right_light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" transform="rotate(-90 12,12.5)" fill="#FFFFFF"/></svg>

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

package/src/components/panel/index.less

@@ -1,191 +0,0 @@
-/**
- * =============================================================================
- * ************   Expansion panel 可扩展面板   ************
- * =============================================================================
- */
-
-/* 可扩展面板 */
-.mdui-panel {
-  box-sizing: border-box;
-  width: 100%;
-}
-
-/* 面板项 */
-.mdui-panel-item {
-  color: @color-black-text;
-  background-color: #fff;
-  transition: margin .3s @animation-curve-default;
-  will-change: margin;
-  .mdui-divider-bottom-dark();
-  .mdui-shadow(2);
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-/* 面板头部 */
-.mdui-panel-item-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  height: 48px;
-  padding: 0 24px;
-  font-size: 15px;
-  cursor: pointer;
-  transition: all .3s @animation-curve-default;
-  will-change: height, background-color;
-  .mdui-text-truncate();
-
-  &:active {
-    background-color: @color-grey-200;
-  }
-}
-
-/* 面板项标题 */
-.mdui-panel-item-title {
-  box-sizing: border-box;
-  width: 36%;
-  min-width: 36%;
-  padding-right: 16px;
-  font-weight: 500;
-  .mdui-text-truncate();
-}
-
-/* 面板项内容 */
-.mdui-panel-item-summary {
-  flex-grow: 1;
-  box-sizing: border-box;
-  padding-right: 16px;
-  color: @color-black-secondary;
-  .mdui-text-truncate();
-}
-
-/* 展开收起的图标 */
-.mdui-panel-item-arrow {
-  position: absolute;
-  top: 12px;
-  right: 24px;
-  color: @color-black-icon;
-  transform: rotate(0);
-  transition: all .3s @animation-curve-default;
-  user-select: none;
-  will-change: transform, top;
-}
-
-.mdui-panel-item-summary + .mdui-panel-item-arrow {
-  position: relative;
-  top: 0 !important;
-  right: 0;
-}
-
-/* 面板项内容 */
-.mdui-panel-item-body {
-  height: 0;
-  padding: 0 24px;
-  overflow: hidden;
-  transition: height .3s @animation-curve-default;
-  will-change: height;
-  .mdui-clearfix();
-
-  &::after {
-    height: 16px;
-  }
-}
-
-/* 面板项操作栏 */
-.mdui-panel-item-actions {
-  display: block;
-  width: 100%;
-  margin: 16px -24px 0 -24px;
-  padding: 16px 24px 0 24px;
-  text-align: right;
-  .mdui-divider-top-dark();
-
-  .mdui-btn {
-    margin-left: 8px;
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-}
-
-/* 打开状态的面板项 */
-.mdui-panel-item-open {
-  height: auto;
-  margin-top: 16px;
-  margin-bottom: 16px;
-
-  // 打开状态的面板头部更高
-  &>.mdui-panel-item-header {
-    height: 64px;
-
-    .mdui-panel-item-arrow {
-      top: 20px;
-      transform: rotate(180deg);
-    }
-  }
-
-  &>.mdui-panel-item-body {
-    height: auto;
-  }
-}
-
-/* 使打开项上下没有边距 */
-.mdui-panel-gapless {
-  .mdui-shadow(2);
-
-  .mdui-panel-item {
-    .mdui-shadow(0);
-  }
-
-  .mdui-panel-item-open {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-/* 弹出面板 */
-.mdui-panel-popout {
-  .mdui-panel-item-open {
-    margin-right: -16px;
-    margin-left: -16px;
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Expansion panel dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-panel-item {
-    color: #fff;
-    background-color: @layout-dark-color-3;
-    .mdui-divider-bottom-light();
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-  .mdui-panel-item-header {
-    &:active {
-      background-color: @color-grey-800;
-    }
-  }
-  .mdui-panel-item-summary {
-    color: @color-white-secondary;
-  }
-
-  /* stylelint-disable-next-line */
-  .mdui-panel-item-arrow {
-    color: @color-white-icon;
-  }
-  .mdui-panel-item-actions {
-    .mdui-divider-top-light();
-  }
-});

package/src/components/panel/index.ts

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

package/src/components/progress/progress.less

@@ -1,113 +0,0 @@
-/**
- * =============================================================================
- * ************   Progress Linear 线性进度条   ************
- * =============================================================================
- */
-
-/* 线性进度条 */
-.mdui-progress {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 4px;
-  overflow: hidden;
-  background-color: rgba(red(@color-default-500), green(@color-default-500), blue(@color-default-500), .2);
-  border-radius: 2px;
-}
-
-/* 确定进度的线性进度条 */
-.mdui-progress-determinate {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  background-color: @color-default-500;
-  transition: width .3s linear;
-}
-
-/* 不确定进度的线性进度条 */
-.mdui-progress-indeterminate {
-  background-color: @color-default-500;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    background-color: inherit;
-    animation: mdui-progress-indeterminate 2s linear infinite;
-    content: ' ';
-    will-change: left, width;
-  }
-
-  &::after {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    background-color: inherit;
-    animation: mdui-progress-indeterminate-short 2s linear infinite;
-    content: ' ';
-    will-change: left, width;
-  }
-}
-
-@keyframes mdui-progress-indeterminate {
-  0% {
-    left: 0;
-    width: 0;
-  }
-  50% {
-    left: 30%;
-    width: 70%;
-  }
-  75% {
-    left: 100%;
-    width: 0;
-  }
-}
-
-@keyframes mdui-progress-indeterminate-short {
-  0% {
-    left: 0;
-    width: 0;
-  }
-  50% {
-    left: 0;
-    width: 0;
-  }
-  75% {
-    left: 0;
-    width: 25%;
-  }
-  100% {
-    left: 100%;
-    width: 0;
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Progress linear 主色   ************
- * =============================================================================
- */
-& {
-  .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-progress {
-        background-color: rgba(red(@@color), green(@@color), blue(@@color), .2);
-      }
-      .mdui-progress-determinate,
-      .mdui-progress-indeterminate {
-        .mdui-background-color(@colorName);
-      }
-    }
-
-  }
-  .loop-primary-theme(length(@globalPrimaryColors));
-}

package/src/components/progress/spinner.less

@@ -1,198 +0,0 @@
-/**
- * =============================================================================
- * ************   Progress Circular 圆形进度条   ************
- * =============================================================================
- */
-
-.mdui-spinner {
-  position: relative;
-  display: inline-block;
-  width: 28px;
-  height: 28px;
-  animation: mdui-spinner 1568ms linear infinite;
-}
-
-@keyframes mdui-spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.mdui-spinner-layer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-color: @color-default-500;
-  opacity: 0;
-  opacity: 1;
-  animation: mdui-spinner-layer-fill-unfill-rotate 5332ms @animation-curve-default infinite both;
-}
-
-.mdui-spinner-layer-1 {
-  border-color: @color-blue-400 !important;
-  animation:
-    mdui-spinner-layer-fill-unfill-rotate 5332ms @animation-curve-default infinite both,
-    mdui-spinner-layer-1-fade-in-out 5332ms @animation-curve-default infinite both;
-}
-
-.mdui-spinner-layer-2 {
-  border-color: @color-red-500 !important;
-  animation:
-    mdui-spinner-layer-fill-unfill-rotate 5332ms @animation-curve-default infinite both,
-    mdui-spinner-layer-2-fade-in-out 5332ms @animation-curve-default infinite both;
-}
-
-.mdui-spinner-layer-3 {
-  border-color: @color-yellow-600 !important;
-  animation:
-    mdui-spinner-layer-fill-unfill-rotate 5332ms @animation-curve-default infinite both,
-    mdui-spinner-layer-3-fade-in-out 5332ms @animation-curve-default infinite both;
-}
-
-.mdui-spinner-layer-4 {
-  border-color: @color-green-500 !important;
-  animation:
-    mdui-spinner-layer-fill-unfill-rotate 5332ms @animation-curve-default infinite both,
-    mdui-spinner-layer-4-fade-in-out 5332ms @animation-curve-default infinite both;
-}
-
-@keyframes mdui-spinner-layer-fill-unfill-rotate {
-  12.5% { transform: rotate(135deg);  }
-  25%   { transform: rotate(270deg);  }
-  37.5% { transform: rotate(405deg);  }
-  50%   { transform: rotate(540deg);  }
-  62.5% { transform: rotate(675deg);  }
-  75%   { transform: rotate(810deg);  }
-  87.5% { transform: rotate(945deg);  }
-  to    { transform: rotate(1080deg); }
-}
-
-@keyframes mdui-spinner-layer-1-fade-in-out {
-  from { opacity: 1; }
-  25%  { opacity: 1; }
-  26%  { opacity: 0; }
-  89%  { opacity: 0; }
-  90%  { opacity: 1; }
-  100% { opacity: 1; }
-}
-
-@keyframes mdui-spinner-layer-2-fade-in-out {
-  from { opacity: 0; }
-  15%  { opacity: 0; }
-  25%  { opacity: 1; }
-  50%  { opacity: 1; }
-  51%  { opacity: 0; }
-}
-
-@keyframes mdui-spinner-layer-3-fade-in-out {
-  from { opacity: 0; }
-  40%  { opacity: 0; }
-  50%  { opacity: 1; }
-  75%  { opacity: 1; }
-  76%  { opacity: 0; }
-}
-
-@keyframes mdui-spinner-layer-4-fade-in-out {
-  from { opacity: 0; }
-  65%  { opacity: 0; }
-  75%  { opacity: 1; }
-  90%  { opacity: 1; }
-  100% { opacity: 0; }
-}
-
-.mdui-spinner-gap-patch {
-  position: absolute;
-  top: 0;
-  left: 45%;
-  width: 10%;
-  height: 100%;
-  overflow: hidden;
-  border-color: inherit;
-
-  .mdui-spinner-circle {
-    left: -450%;
-    box-sizing: border-box;
-    width: 1000%;
-  }
-}
-
-.mdui-spinner-circle-clipper {
-  position: relative;
-  display: inline-block;
-  width: 50%;
-  height: 100%;
-  overflow: hidden;
-  border-color: inherit;
-
-  .mdui-spinner-circle {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    width: 200%;
-    height: 100%;
-    border-color: inherit;
-    border-style: solid;
-    border-width: 3px;
-    border-bottom-color: transparent !important;
-    border-radius: 50%;
-    animation: none;
-  }
-
-  &.mdui-spinner-left {
-    float: left;
-
-    .mdui-spinner-circle {
-      left: 0;
-      border-right-color: transparent !important;
-      transform: rotate(129deg);
-      animation: mdui-spinner-left-spin 1333ms @animation-curve-default infinite both;
-    }
-  }
-
-  &.mdui-spinner-right {
-    float: right;
-
-    .mdui-spinner-circle {
-      left: -100%;
-      border-left-color: transparent !important;
-      transform: rotate(-129deg);
-      animation: mdui-spinner-right-spin 1333ms @animation-curve-default infinite both;
-    }
-  }
-}
-
-@keyframes mdui-spinner-left-spin {
-  from { transform: rotate(130deg); }
-  50%  { transform: rotate(-5deg);  }
-  to   { transform: rotate(130deg); }
-}
-
-@keyframes mdui-spinner-right-spin {
-  from { transform: rotate(-130deg); }
-  50%  { transform: rotate(5deg);    }
-  to   { transform: rotate(-130deg); }
-}
-
-
-/**
- * =============================================================================
- * ************   Spinner linear 主色   ************
- * =============================================================================
- */
-& {
-  .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-spinner-layer {
-        border-color: @@color;
-      }
-    }
-
-  }
-  .loop-primary-theme(length(@globalPrimaryColors));
-}

package/src/components/progress/spinner.ts

@@ -1,75 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/html';
-import Selector from 'mdui.jq/es/types/Selector';
-import { isUndefined } from 'mdui.jq/es/utils';
-import mdui from '../../mdui';
-import '../../global/mutation';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * 如果需要修改已有的圆形进度条组件，需要调用该方法来重新初始化组件。
-     *
-     * 若传入了参数，则只重新初始化该参数对应的圆形进度条。若没有传入参数，则重新初始化所有圆形进度条。
-     * @param selector CSS 选择器、或 DOM 元素、或 DOM 元素组成的数组、或 JQ 对象
-     */
-    updateSpinners(
-      selector?: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    ): void;
-  }
-}
-
-/**
- * layer 的 HTML 结构
- * @param index
- */
-function layerHTML(index: number | false = false): string {
-  return (
-    `<div class="mdui-spinner-layer ${
-      index ? `mdui-spinner-layer-${index}` : ''
-    }">` +
-    '<div class="mdui-spinner-circle-clipper mdui-spinner-left">' +
-    '<div class="mdui-spinner-circle"></div>' +
-    '</div>' +
-    '<div class="mdui-spinner-gap-patch">' +
-    '<div class="mdui-spinner-circle"></div>' +
-    '</div>' +
-    '<div class="mdui-spinner-circle-clipper mdui-spinner-right">' +
-    '<div class="mdui-spinner-circle"></div>' +
-    '</div>' +
-    '</div>'
-  );
-}
-
-/**
- * 填充 HTML
- * @param spinner
- */
-function fillHTML(spinner: HTMLElement): void {
-  const $spinner = $(spinner);
-
-  const layer = $spinner.hasClass('mdui-spinner-colorful')
-    ? layerHTML(1) + layerHTML(2) + layerHTML(3) + layerHTML(4)
-    : layerHTML();
-
-  $spinner.html(layer);
-}
-
-$(() => {
-  // 页面加载完后自动填充 HTML 结构
-  mdui.mutation('.mdui-spinner', function () {
-    fillHTML(this);
-  });
-});
-
-mdui.updateSpinners = function (
-  selector?: Selector | HTMLElement | ArrayLike<HTMLElement>,
-): void {
-  const $elements = isUndefined(selector) ? $('.mdui-spinner') : $(selector);
-
-  $elements.each(function () {
-    fillHTML(this);
-  });
-};