@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/spin/foundation.js

@@ -1,62 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
-
-var _foundation = _interopRequireDefault(require("../base/foundation"));
-
-class SpinFoundation extends _foundation.default {
-  constructor(adapter) {
-    super((0, _assign.default)((0, _assign.default)({}, SpinFoundation.spinDefaultAdapter), adapter));
-  }
-
-  static get spinDefaultAdapter() {
-    return {
-      getProp: () => undefined,
-      setLoading: val => undefined
-    };
-  }
-
-  updateLoadingIfNeedDelay() {
-    const {
-      spinning: propsSpinning,
-      delay: propsDelay
-    } = this._adapter.getProps();
-
-    const {
-      delay
-    } = this._adapter.getStates();
-
-    if (delay) {
-      const self = this;
-      this._timer = (0, _setTimeout2.default)(() => {
-        self._adapter.setState({
-          loading: propsSpinning,
-          delay: 0
-        });
-      }, propsDelay);
-    }
-  }
-
-  destroy() {
-    if (this._timer) {
-      clearTimeout(this._timer);
-      this._timer = null;
-    }
-  }
-
-}
-
-var _default = SpinFoundation;
-exports.default = _default;

package/lib/cjs/spin/mixin.css

@@ -1,3 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */

package/lib/cjs/spin/mixin.scss

@@ -1,5 +0,0 @@
-// Mixin
-@mixin size($num) {
-    width: $num;
-    height: $num;
-}

package/lib/cjs/spin/rtl.scss

@@ -1,12 +0,0 @@
-$module: #{$prefix}-spin;
-
-.#{$prefix}-rtl,
-.#{$prefix}-portal-rtl {
-    .#{$module} {
-        direction: rtl;
-    }
-
-    .#{$module}-container {
-        direction: rtl;
-    }
-}

package/lib/cjs/spin/spin.css

@@ -1,104 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-@keyframes semi-animation-rotate {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-.semi-spin {
-  position: relative;
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-}
-.semi-spin-wrapper {
-  text-align: center;
-  position: absolute;
-  width: 100%;
-  transform: translate(0, -50%);
-  top: 50%;
-  color: var(--semi-color-primary);
-}
-.semi-spin-wrapper > svg {
-  animation: 0.6s linear infinite semi-animation-rotate;
-  width: 20px;
-  height: 20px;
-}
-.semi-spin-animate {
-  display: inline-flex;
-  animation: 1.6s linear infinite semi-animation-rotate;
-}
-.semi-spin-children {
-  opacity: 0.5;
-  user-select: none;
-}
-.semi-spin-block {
-  display: block;
-}
-.semi-spin-block::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-.semi-spin-block .semi-spin-wrapper {
-  display: block;
-}
-.semi-spin-block.semi-spin {
-  height: auto;
-  width: auto;
-}
-.semi-spin-hidden::after {
-  content: none;
-}
-.semi-spin-hidden > .semi-spin-children {
-  opacity: 1;
-  user-select: auto;
-}
-
-.semi-spin-small {
-  width: 14px;
-  height: 14px;
-}
-.semi-spin-small > .semi-spin-wrapper svg {
-  width: 14px;
-  height: 14px;
-}
-
-.semi-spin-middle {
-  width: 20px;
-  height: 20px;
-}
-.semi-spin-middle > .semi-spin-wrapper svg {
-  width: 20px;
-  height: 20px;
-}
-
-.semi-spin-large {
-  width: 32px;
-  height: 32px;
-}
-.semi-spin-large > .semi-spin-wrapper svg {
-  width: 32px;
-  height: 32px;
-}
-
-.semi-spin-container {
-  overflow: hidden;
-}
-
-.semi-rtl .semi-spin,
-.semi-portal-rtl .semi-spin {
-  direction: rtl;
-}
-.semi-rtl .semi-spin-container,
-.semi-portal-rtl .semi-spin-container {
-  direction: rtl;
-}

package/lib/cjs/spin/spin.scss

@@ -1,104 +0,0 @@
-//@import '../theme/variables.scss';
-@import "./variables.scss";
-@import "./mixin.scss";
-@import "../keyframes/rotate.scss";
-
-$module: #{$prefix}-spin;
-
-.#{$module} {
-    position: relative;
-    display: inline-block;
-    @include size($width-spin_middle);
-
-    &-wrapper {
-        text-align: center;
-        position: absolute;
-        width: 100%;
-        transform: $motion-spin_wrapper-translate;
-        top: $spacing-spin_wrapper-top;
-        color: $color-spin-bg;
-
-        &>svg {
-            animation: $motion-spin_wrapper_svg-animationDuration linear infinite #{$prefix}-animation-rotate;
-            @include size($width-spin_middle);
-        }
-    }
-
-    &-animate {
-        display: inline-flex;
-        animation: $motion-spin_animate_svg-animationDuration linear infinite #{$prefix}-animation-rotate;
-    }
-
-    &-children {
-        opacity: $opacity-spin_children;
-        user-select: none;
-    }
-
-    &-block {
-        display: block;
-
-        // 添加一个遮罩解决嵌套 Spin 穿透问题
-
-        &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-        }
-
-        .#{$module}-wrapper {
-            display: block;
-        }
-
-        &.#{$module} {
-            height: auto;
-            width: auto;
-        }
-    }
-
-    &-hidden {
-
-        &::after {
-            content: none;
-        }
-
-        // 考虑到嵌套，.spin-chidren 节点的 opacity 由直接父级节点的 .spin-hidden 决定
-        &>.#{$module}-children {
-            opacity: 1;
-            user-select: auto;
-        }
-    }
-}
-
-.#{$module}-small {
-    @include size($width-spin_small);
-
-    &>.#{$module}-wrapper svg {
-        @include size($width-spin_small);
-    }
-}
-
-.#{$module}-middle {
-    @include size($width-spin_middle);
-
-    &>.#{$module}-wrapper svg {
-        @include size($width-spin_middle);
-    }
-}
-
-.#{$module}-large {
-    @include size($width-spin_large);
-
-    &>.#{$module}-wrapper svg {
-        @include size($width-spin_large);
-    }
-}
-
-.#{$module}-container {
-    overflow: hidden;
-}
-
-@import "./rtl.scss";

package/lib/cjs/spin/variables.scss

@@ -1,18 +0,0 @@
-// Color
-$color-spin-bg: var(--semi-color-primary); // 加载图标背景颜色
-
-// Width
-$width-spin_large: 32px; // 加载图标尺寸 - 大
-$width-spin_middle: 20px; // 加载图标尺寸 - 中
-$width-spin_small: 14px; // 加载图标尺寸 - 小
-
-// Spacing
-$spacing-spin_wrapper-top: 50%; // 加载图标尺寸 - 中
-
-// Motion
-$motion-spin_wrapper-translate: translate(0, -50%); // 加载图标d旋转动画
-$motion-spin_wrapper_svg-animationDuration: .6s; // 加载图标容器旋转一周时长
-$motion-spin_animate_svg-animationDuration: 1.6s; // 加载图标旋转一周时长
-
-// Other
-$opacity-spin_children: .5; // 加载图标旋转一周时长

package/lib/cjs/steps/bacisSteps.scss

@@ -1,344 +0,0 @@
-$module: #{$prefix}-steps;
-$item: #{$module}-item;
-$basicType: #{$module}-basic;
-
-.#{$basicType} {
-
-    &.#{$module}-horizontal {
-        &.#{$module}-hasline {
-            .#{$item}-title {
-
-                &::after {
-                    content: "";
-                    position: absolute;
-                    top: 50%;
-                    left: 100%;
-                    display: block;
-                    width: $width-steps_title_after;
-                    height: $height-steps_title_after;
-                    background: $color-steps_title_after-bg;
-                }
-            }
-        }
-
-        display: flex;
-        flex-flow: row nowrap;
-
-        .#{$item} {
-            padding-left: $spacing-steps_basic_item-paddingLeft;
-
-            &:first-child {
-                padding-left: 0;
-            }
-
-            &:last-child {
-                flex: none;
-
-                .#{$item}-title {
-                    max-width: 100%;
-                    padding-right: 0;
-
-                    &::after {
-                        display: none;
-                    }
-                }
-            }
-
-            &-done {
-                .#{$item}-container {
-                    .#{$item}-title {
-
-                        &::after {
-                            background: $color-steps_item_done_after-bg;
-                        }
-                    }
-                }
-            }
-
-            .#{$item}-content {
-                flex: 1;
-            }
-
-            .#{$item}-description {
-                @include font-size-small;
-                color: $color-steps_minor-text-default;
-                width: $width-steps_basic_item_description;
-                max-width: $width-steps_basic_item_description-maxWidth;
-                @include text-overflow-hidden;
-            }
-
-            .#{$item}-title {
-                max-width: $width-steps_basic_item_title-maxWidth;
-
-                .#{$item}-title-text {
-                    @include text-overflow-hidden;
-                }
-            }
-
-        }
-    }
-
-    &.#{$module}-vertical {
-        display: flex;
-        flex-flow: column nowrap;
-
-        &.#{$module}-small {
-            .#{$item} {
-                .#{$item}-content {
-                    min-height: $height-steps_basic_vertical_small_item_content-minHeight;
-                }
-            }
-        }
-
-        &.#{$module}-hasline {
-            .#{$item}-icon {
-
-                &::after {
-                    content: "";
-                    position: absolute;
-                    top: 100%;
-                    left: 50%;
-                    display: block;
-                    width: $width-steps_vertical_icon_after;
-                    height: $height-steps_vertical_icon_after;
-                    background: $color-steps_icon_after-bg;
-                }
-            }
-        }
-
-        .#{$item} {
-            padding-top: $spacing-steps_basic_vertical_item-paddingTop;
-
-            &:first-child {
-                padding-top: 0;
-            }
-
-            &:last-child {
-                .#{$item}-icon {
-
-                    &::after {
-                        display: none;
-                    }
-                }
-            }
-
-            &-done {
-                .#{$item}-icon {
-
-                    &::after {
-                        background: $color-steps_item_done_icon_after-bg;
-                    }
-                }
-            }
-
-            .#{$item}-content {
-                min-height: $height-steps_basic_vertical_icon_content-minHeight;
-                padding-bottom: $spacing-steps_basic_vertical_item_content-paddingBottom;
-            }
-
-            .#{$item}-icon {
-                display: inline-flex;
-                position: relative;
-                padding-bottom: $spacing-steps_basic_vertical_item_icon-paddingBottom;
-            }
-
-            .#{$item}-description {
-                @include font-size-small;
-                color: $color-steps_minor-text-default;
-                width: $width-steps_basic_vertical_item_description;
-            }
-
-            .#{$item}-title {
-                max-width: $width-steps_basic_vertical_item_title-maxWidth;
-
-                .#{$item}-title-text {
-                    @include text-overflow-hidden;
-                }
-            }
-        }
-    }
-
-    .#{$item} {
-        @include box-sizing;
-        position: relative;
-        display: inline-block;
-        vertical-align: top;
-        overflow: hidden;
-        flex: 1;
-        cursor: pointer;
-
-        &:hover {
-
-            .#{$item}-title {
-                color: $color-steps_item_title-text-hover;
-            }
-
-            .#{$item}-description {
-                color: $color-steps_item_description-text-hover;
-            }
-        }
-
-        .#{$item}-container {
-            display: flex;
-            align-items: flex-start;
-        }
-        .#{$item}-left {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-right: $spacing-steps_basic_item_left-marginRight;
-
-
-            .#{$item}-icon {
-                display: flex;
-                height: $height-steps_basic_item_left-icon;
-                align-items: center;
-            }
-
-            .#{$item}-number-icon {
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                width: $width-steps_basic_item_left_number-icon;
-                height: $height-steps_basic_item_left_number-icon;
-                @include font-size-header-6;
-                font-weight: $font-steps_basic_item_left_number_icon-fontWeight;
-                background: $color-steps_item_left_number_icon-bg;
-                border-radius: $radius-steps_basic_item_left_number_icon;
-                color: $color-steps_item_left_number_icon-icon;
-
-            }
-        }
-
-
-        .#{$item}-title {
-            position: relative;
-            display: inline-block;
-            @include font-size-header-6;
-            line-height: $font-steps_basic_item_title-lineHeight;
-            font-weight: $font-steps_basic_item_title-fontWeight;
-            color: $color-steps_main-text-default;
-            vertical-align: top;
-            padding-right: $spacing-steps_basic_item_title-paddingRight;
-            padding-bottom: $spacing-steps_basic_item_title-paddingBottom;
-        }
-
-        // 完成状态的样式
-
-        &-finish {
-            .#{$item}-left {
-
-                .#{$item}-icon {
-                    color: $color-steps_item_finish-icon;
-
-                    .#{$item}-number-icon {
-                        color: $color-steps_item_finish_number-icon;
-                    }
-                }
-            }
-
-
-        }
-
-        // 等待状态的样式
-
-        &-wait {
-            .#{$item}-title {
-                color: $color-steps_item_wait_title-text;
-            }
-
-            .#{$item}-left {
-
-                .#{$item}-icon {
-                    color: $color-steps_item_wait_left_icon-icon;
-
-                    .#{$item}-number-icon {
-                        background: $color-steps_item_wait_left_number_icon-bg;
-                        color: $color-steps_item_wait_left_number_icon-icon;
-                    }
-                }
-            }
-
-            &:hover {
-                .#{$item}-left {
-
-                    .#{$item}-icon {
-
-                        .#{$item}-number-icon {
-                            background: $color-steps_item_wait_left_number_icon-bg-hover;
-                            color: $color-steps_item_wait_left_number_icon-icon-hover;
-                        }
-                    }
-                }
-            }
-        }
-
-        // 进行状态的样式
-
-        &-process {
-            .#{$item}-left {
-
-                .#{$item}-icon {
-                    color: $color-steps_item_process_left-icon;
-
-                    .#{$item}-number-icon {
-                        color: $color-steps_item_process_left_number-icon;
-                    }
-                }
-            }
-        }
-
-        // 错误状态的样式
-
-        &-error {
-            .#{$item}-left {
-
-                .#{$item}-icon {
-                    color: $color-steps_item_error_left-icon;
-
-                    .#{$item}-number-icon {
-                        color: $color-steps_item_error_left_number-icon;
-                    }
-                }
-            }
-        }
-
-        // 警告状态的样式
-
-        &-warning {
-            .#{$item}-left {
-
-                .#{$item}-icon {
-                    color: $color-steps_item_warning_left-icon;
-
-                    .#{$item}-number-icon {
-                        color: $color-steps_item_warning_left_number-icon;
-                    }
-                }
-            }
-        }
-    }
-
-    &.#{$module}-small {
-
-        .#{$item} {
-
-            .#{$item}-title {
-                @include font-size-regular;
-            }
-
-            .#{$item}-left {
-
-                .#{$item}-icon {
-                    height: $height-steps_basic_small_item_left-icon;
-
-                    .#{$item}-number-icon {
-                        @include font-size-small;
-                        width: $width-steps_basic_small_item_left_number-icon;
-                        height: $width-steps_basic_small_item_left_number-icon;
-                    }
-                }
-            }
-        }
-    }
-}

package/lib/cjs/steps/constants.d.ts

@@ -1,5 +0,0 @@
-declare const stepsClasses: {
-    PREFIX: string;
-    ITEM: string;
-};
-export { stepsClasses };

package/lib/cjs/steps/constants.js

@@ -1,17 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.stepsClasses = void 0;
-
-var _constants = require("../base/constants");
-
-const stepsClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-steps"),
-  ITEM: "".concat(_constants.BASE_CLASS_PREFIX, "-steps-item")
-};
-exports.stepsClasses = stepsClasses;