@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/spin/foundation.js

@@ -0,0 +1,62 @@
+"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

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

package/lib/cjs/spin/mixin.scss

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

package/lib/cjs/spin/rtl.scss

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

package/lib/cjs/spin/spin.css

@@ -0,0 +1,104 @@
+/* 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

@@ -0,0 +1,104 @@
+//@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

@@ -0,0 +1,18 @@
+// 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

@@ -0,0 +1,344 @@
+$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

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

package/lib/cjs/steps/constants.js

@@ -0,0 +1,17 @@
+"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;