@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/slider/slider.css

@@ -0,0 +1,192 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-slider {
+  padding: 0 13px;
+  margin: 0;
+}
+.semi-slider-wrapper {
+  box-sizing: border-box;
+  position: relative;
+  height: 32px;
+  width: 100%;
+  display: inline-block;
+  vertical-align: bottom;
+}
+.semi-slider-rail {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5;
+  list-style: none;
+  font-feature-settings: "tnum";
+  position: absolute;
+  height: 4px;
+  cursor: pointer;
+  touch-action: none;
+  background-color: var(--semi-color-fill-0);
+  width: 100%;
+  border-radius: var(--semi-border-radius-small);
+  top: 14px;
+}
+.semi-slider-handle {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3);
+  box-sizing: border-box;
+  touch-action: none;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  margin-top: 4px;
+  background-color: var(--semi-color-white);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: #fff 0.3s;
+}
+.semi-slider-handle:hover {
+  background-color: var(--semi-color-white);
+}
+.semi-slider-handle-clicked {
+  border: solid 1px var(--semi-color-focus-border);
+}
+.semi-slider-track {
+  height: 4px;
+  background: var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-small);
+  position: absolute;
+  cursor: pointer;
+  top: 14px;
+}
+.semi-slider-tooltip {
+  position: absolute;
+  top: -40px;
+}
+.semi-slider-dots {
+  width: 100%;
+  background: transparent;
+}
+.semi-slider-dot {
+  position: absolute;
+  top: 14px;
+  width: 4px;
+  height: 4px;
+  background-color: var(--semi-color-white);
+  border-radius: 50%;
+  cursor: pointer;
+}
+.semi-slider-dot-active {
+  background-color: var(--semi-color-white);
+}
+.semi-slider-marks {
+  position: absolute;
+  top: 23px;
+  left: 0;
+  width: 100%;
+  font-size: 14px;
+}
+.semi-slider-mark {
+  position: absolute;
+  display: inline-block;
+  color: var(--semi-color-text-2);
+  text-align: center;
+  cursor: pointer;
+  transform: translate(-50%, 0);
+}
+.semi-slider-marks-reverse {
+  position: absolute;
+  top: 23px;
+  left: 0;
+  width: 100%;
+  font-size: 14px;
+}
+.semi-slider-mark-reverse {
+  position: absolute;
+  display: inline-block;
+  color: var(--semi-color-text-2);
+  text-align: center;
+  cursor: pointer;
+  transform: translate(-50%, 0) rotate(-180deg);
+}
+.semi-slider-boundary {
+  position: relative;
+  font-size: 12px;
+  color: var(--semi-color-text-0);
+  visibility: hidden;
+  top: 30px;
+}
+.semi-slider-boundary span {
+  position: absolute;
+  display: inline-block;
+}
+.semi-slider-boundary-min {
+  left: 0;
+}
+.semi-slider-boundary-max {
+  right: 0;
+}
+.semi-slider-boundary-show {
+  visibility: visible;
+}
+
+.semi-slider-vertical-wrapper {
+  width: 4px;
+  height: 100%;
+}
+.semi-slider-vertical-wrapper .semi-slider-track {
+  width: 4px;
+}
+.semi-slider-vertical-wrapper .semi-slider-marks {
+  height: 100%;
+  margin-top: -30px;
+  margin-left: 29px;
+}
+.semi-slider-vertical-wrapper .semi-slider-marks-reverse {
+  height: 100%;
+  margin-top: -30px;
+  margin-left: -26px;
+}
+.semi-slider-vertical-wrapper .semi-slider-rail {
+  width: 4px;
+  height: 100%;
+  top: 0;
+}
+.semi-slider-vertical-wrapper .semi-slider-handle {
+  margin-top: 0;
+  margin-left: -10px;
+}
+
+.semi-slider-disabled {
+  cursor: not-allowed;
+}
+.semi-slider-disabled .semi-slider-handle {
+  cursor: not-allowed;
+  box-shadow: none;
+  border: 1px var(--semi-color-border) solid;
+}
+.semi-slider-disabled .semi-slider-handle:hover {
+  background-color: var(--semi-color-white);
+}
+.semi-slider-disabled .semi-slider-rail {
+  cursor: not-allowed;
+}
+.semi-slider-disabled .semi-slider-track {
+  cursor: not-allowed;
+  background-color: var(--semi-color-primary-disabled);
+}
+.semi-slider-disabled .semi-slider-dot {
+  cursor: not-allowed;
+  background-color: var(--semi-color-white);
+  border-color: var(--semi-color-white);
+  box-shadow: none;
+}
+
+.semi-slider-handle-tooltip {
+  text-align: center;
+}
+
+.semi-slider-reverse {
+  transform: rotate(180deg);
+}

package/lib/cjs/slider/slider.scss

@@ -0,0 +1,234 @@
+//@import '../theme/variables.scss';
+@import "./variables.scss";
+
+$module: #{$prefix}-slider;
+
+.#{$module} {
+    padding: $spacing-slider-paddingY $spacing-slider-paddingX;
+    margin: $spacing-slider-margin;
+
+    &-wrapper {
+        box-sizing: border-box;
+        position: relative;
+        // margin: 15px 0px 15px 0px;
+        height: $height-slider_wrapper;
+        width: 100%;
+        //padding-top: 12px;
+        // min-width: 500px;
+        display: inline-block;
+        // vertical-align 默认值 baseline 会导致父级元素高度比子元素高 https://codepen.io/shijiame/pen/rNeraYg
+        vertical-align: bottom;
+    }
+
+    &-rail {
+        box-sizing: border-box;
+        margin: $spacing-slider_rail-margin;
+        padding: $spacing-slider_rail-padding;
+        color: $color-slider_rail;
+        font-size: $font-slider_rail-fontSize;
+        font-variant: tabular-nums;
+        line-height: $font-slider_rail-lineHeight;
+        list-style: none;
+        font-feature-settings: "tnum";
+        position: absolute;
+        height: $height-slider_rail;
+        cursor: pointer;
+        touch-action: none;
+        background-color: $color-slider_rail-bg-default;
+        width: 100%;
+        border-radius: $radius-slider_rail;
+        top: $spacing-slider_rail-top;
+    }
+
+    &-handle {
+        @include shadow-knob;
+        // 不设置border-box会在点击时border向下偏移1px
+        box-sizing: border-box;
+        touch-action: none;
+        position: absolute;
+        width: $width-slider_handle;
+        height: $width-slider_handle;
+        margin-top: $spacing-slider_handle-marginTop;
+        // margin-left: -11px;
+        background-color: $color-slider_handle-bg-default; //$color-white;
+        border: none;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: #fff .3s;
+    }
+
+    &-handle:hover {
+        background-color: $color-slider_handle-bg-hover;
+    }
+
+    &-handle-clicked {
+        border: solid $width-slider_handle_clicked $color-slider_handle-border-focus;
+    }
+
+    &-track {
+        height: $height-slider_track;
+        background: $color-slider_track-bg-default;
+        border-radius: $radius-slider_track;
+        position: absolute;
+        cursor: pointer;
+        top: $spacing-slider_track-top;
+    }
+
+    &-tooltip {
+        position: absolute;
+        top: $spacing-slider_tooltip-top;
+        // margin-left: -15px;
+    }
+
+    &-dots {
+        width: 100%;
+        background: transparent;
+    }
+
+    &-dot {
+        position: absolute;
+        top: $spacing-slider_dot-top;
+        width: $width-slider_dot;
+        height: $width-slider_dot;
+        background-color: $color-slider_dot-bg-default;
+        //border: 1px solid $color-control-bg-default;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+
+    &-dot-active {
+        background-color: $color-slider_dot-border-active;
+    }
+
+    &-marks {
+        position: absolute;
+        top: $spacing-slider_marks-top;
+        left: $spacing-slider_marks-left;
+        width: 100%;
+        font-size: $font-slider_marks-fontSize;
+    }
+
+    &-mark {
+        position: absolute;
+        display: inline-block;
+        color: $color-slider_mark-text-default;
+        text-align: center;
+        cursor: pointer;
+        transform: translate(-50%, 0);
+    }
+
+    &-marks-reverse {
+        position: absolute;
+        top: $spacing-slider_marks-top;
+        left: $spacing-slider_marks-left;
+        width: 100%;
+        font-size: $font-slider_marks-fontSize;
+    }
+
+    &-mark-reverse {
+        position: absolute;
+        display: inline-block;
+        color: $color-slider_mark-text-default;
+        text-align: center;
+        cursor: pointer;
+        transform: translate(-50%, 0) rotate(-180deg);
+
+    }
+
+
+    &-boundary {
+        position: relative;
+        font-size: $font-size-small;
+        color: $color-slider-text-default;
+        visibility: hidden;
+        top: $spacing-slider_boundary-top;
+
+        span {
+            position: absolute;
+            display: inline-block;
+        }
+    }
+
+    &-boundary-min {
+        left: $spacing-slider_boundary_min-left;
+    }
+
+    &-boundary-max {
+        right: $spacing-slider_boundary_max-right;
+    }
+
+    &-boundary-show {
+        visibility: visible;
+    }
+}
+
+.#{$module}-vertical-wrapper {
+    width: $height-slider_vertical_wrapper;
+    height: 100%;
+
+    .#{$module}-track {
+        width: $height-slider_track;
+    }
+
+    .#{$module}-marks {
+        height: 100%;
+        margin-top: $spacing-slider_vertical_marks-marginTop;
+        margin-left: $spacing-slider_vertical_marks-marginLeft;
+    }
+
+    .#{$module}-marks-reverse {
+        height: 100%;
+        margin-top: $spacing-slider_vertical_marks-marginTop;
+        margin-left: $spacing-slider_vertical_marks-reverse-marginLeft;
+    }
+
+    .#{$module}-rail {
+        width: $height-slider_rail;
+        height: 100%;
+        top: $spacing-slider_vertical_rail-top;
+    }
+
+    .#{$module}-handle {
+        margin-top: $spacing-slider_vertical_handle-marginTop;
+        margin-left: $spacing-slider_vertical_handle-marginLeft;
+    }
+}
+
+.#{$module}-disabled {
+    cursor: not-allowed;
+    $color: $color-slider_disabled-text-default !important;
+
+    .#{$module}-handle {
+        cursor: not-allowed;
+        @include shadow-0;
+        border: $width-slider_handle_border_disabled $color-slider_handle_disabled-border solid;
+
+        &:hover {
+            background-color: $color-slider_handle_disabled-border-hover;
+        }
+    }
+
+    .#{$module}-rail {
+        cursor: not-allowed;
+    }
+
+    .#{$module}-track {
+        cursor: not-allowed;
+        background-color: $color-slider_track_disabled-bg;
+    }
+
+    .#{$module}-dot {
+        cursor: not-allowed;
+        background-color: $color-slider_dot-bg-default;
+        border-color: $color-slider_dot-border;
+        box-shadow: none;
+    }
+}
+
+.#{$module}-handle-tooltip {
+    text-align: center;
+}
+
+.#{$module}-reverse {
+    transform: rotate(180deg);
+}

package/lib/cjs/slider/variables.scss

@@ -0,0 +1,60 @@
+// Color
+$color-slider-text-default: var(--semi-color-text-0); // 滑动条文本颜色 - 默认
+$color-slider_disabled-text-default: var(--semi-color-disabled-text); // 滑动条禁用文本颜色 - 默认
+$color-slider_dot-bg-default: var(--semi-color-white); // 滑动条圆形刻度点颜色 - 默认态
+$color-slider_dot-border-active: var(--semi-color-white); // 滑动条圆形刻度点描边颜色 - 按下态
+$color-slider_dot-border: var(--semi-color-white); // 滑动条圆形刻度点描边颜色 - 默认态
+$color-slider_handle-bg-default: var(--semi-color-white); // 滑动条圆形按钮颜色 - 默认态
+$color-slider_handle-bg-hover: var(--semi-color-white); // 滑动条圆形按钮颜色 - 悬停态
+$color-slider_handle-border-focus: var(--semi-color-focus-border); // 滑动条圆形描边颜色 - 激活态
+$color-slider_handle_disabled-border-hover: var(--semi-color-white); // 禁用滑动条圆形描边颜色 - 悬停态
+$color-slider_handle_disabled-border: var(--semi-color-border); // 禁用滑动条圆形描边颜色 - 默认态
+$color-slider_mark-text-default: var(--semi-color-text-2); // 滑动条刻度文字颜色
+$color-slider_rail-bg-default: var(--semi-color-fill-0); // 滑动条轨道颜色 - 未填充
+$color-slider_rail: rgba(0, 0, 0, .65);
+$color-slider_track-bg-default: var(--semi-color-primary); // 滑动条轨道颜色 - 已填充
+$color-slider_track_disabled-bg: var(--semi-color-primary-disabled); // 禁用滑动条轨道颜色 - 已填充
+
+// Spacing
+$spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
+$spacing-slider-paddingY: 0; // 滑动条整体垂直内边距
+$spacing-slider-margin: 0; // 滑动条整体外边距
+$spacing-slider_rail-margin: 0; // 滑动条轨道外边距
+$spacing-slider_rail-padding: 0; // 滑动条轨道内边距
+$spacing-slider_rail-top: 14px; // 滑动条未填充轨道顶部距离
+$spacing-slider_handle-marginTop: 4px; // 滑动条圆形按钮顶部外边距
+$spacing-slider_track-top: 14px; // 滑动条已填充轨道顶部距离
+$spacing-slider_tooltip-top: -40px; // 滑动条工具提示顶部距离
+$spacing-slider_dot-top: 14px; // 滑动条圆形刻度点顶部距离
+$spacing-slider_marks-top: 23px; // 滑动条刻度标签顶部距离
+$spacing-slider_marks-left: 0; // 滑动条刻度标签左侧距离
+$spacing-slider_boundary-top: 30px;
+$spacing-slider_boundary_min-left: 0;
+$spacing-slider_boundary_max-right: 0;
+$spacing-slider_vertical_marks-marginTop: -30px; // 垂直滑动条刻度标签顶部外边距
+$spacing-slider_vertical_marks-marginLeft: 29px; // 垂直滑动条刻度标签左侧外边距
+$spacing-slider_vertical_marks-reverse-marginLeft: -26px;// 垂直滑动条刻度标签左侧外边距（标签在左侧时）
+$spacing-slider_vertical_rail-top: 0; // 垂直滑动条轨道顶部距离
+$spacing-slider_vertical_handle-marginTop: 0; // 垂直滑动条原型按钮顶部外边距
+$spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按钮左侧外边距
+
+// Radius
+$radius-slider_rail: var(--semi-border-radius-small); // 滚动条未填充轨道圆角
+$radius-slider_track: var(--semi-border-radius-small); // 滚动条已填充轨道圆角
+
+
+// Width/Height
+$height-slider_wrapper: 32px; // 滚动条容器整体高度
+$height-slider_vertical_wrapper: 4px; // 垂直滚动条整体宽度
+$height-slider_rail: 4px; // 滚动条未填充轨道高度
+$width-slider_handle: 24px; // 滚动条圆形按钮宽度
+$width-slider_handle_clicked: 1px; // 滚动条圆形按钮按下后描边宽度
+$height-slider_track: 4px; // 滚动条已填充轨道高度
+$width-slider_dot: 4px; // 滚动条圆形刻度点宽度
+$width-slider_handle_border_disabled: 1px; // 禁用滚动条圆形按钮按下后描边宽度
+
+
+// Font
+$font-slider_rail-fontSize: 14px; // 滚动条轨道文本字号
+$font-slider_marks-fontSize: 14px; // 滚动条刻度标签字号
+$font-slider_rail-lineHeight: 1.5; // 滚动条轨道文本行高倍数

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

@@ -0,0 +1,10 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    ALIGN_SET: string[];
+    SPACING_LOOSE: string;
+    SPACING_MEDIUM: string;
+    SPACING_TIGHT: string;
+};
+export { cssClasses, strings };

package/lib/cjs/space/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-space")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  ALIGN_SET: ['start', 'end', 'center', 'baseline'],
+  SPACING_LOOSE: 'loose',
+  SPACING_MEDIUM: 'medium',
+  SPACING_TIGHT: 'tight'
+};
+exports.strings = strings;

package/lib/cjs/space/rtl.scss

@@ -0,0 +1,8 @@
+$module: #{$prefix}-space;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+    }
+}

package/lib/cjs/space/space.css

@@ -0,0 +1,50 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-space {
+  display: inline-flex;
+}
+.semi-space-vertical {
+  flex-direction: column;
+}
+.semi-space-horizontal {
+  flex-direction: row;
+}
+.semi-space-align-center {
+  align-items: center;
+}
+.semi-space-align-end {
+  align-items: flex-end;
+}
+.semi-space-align-start {
+  align-items: flex-start;
+}
+.semi-space-align-baseline {
+  align-items: baseline;
+}
+.semi-space-wrap {
+  flex-wrap: wrap;
+}
+.semi-space-tight-horizontal {
+  column-gap: 8px;
+}
+.semi-space-tight-vertical {
+  row-gap: 8px;
+}
+.semi-space-medium-horizontal {
+  column-gap: 16px;
+}
+.semi-space-medium-vertical {
+  row-gap: 16px;
+}
+.semi-space-loose-horizontal {
+  column-gap: 24px;
+}
+.semi-space-loose-vertical {
+  row-gap: 24px;
+}
+
+.semi-rtl .semi-space,
+.semi-portal-rtl .semi-space {
+  direction: rtl;
+}

package/lib/cjs/space/space.scss

@@ -0,0 +1,58 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-space;
+
+.#{$module} {
+    display: inline-flex;
+    
+    &-vertical {
+        flex-direction: column;
+    }
+    &-horizontal {
+        flex-direction: row;
+    }
+    &-align {
+        &-center {
+            align-items: center;
+        }
+        &-end {
+            align-items: flex-end;
+        }
+        &-start {
+            align-items: flex-start;
+        }
+        &-baseline {
+            align-items: baseline;
+        }
+    }
+    &-wrap {
+        flex-wrap: wrap;
+    }
+    
+    &-tight-horizontal {
+        column-gap: $spacing-space-tight
+    }
+
+    &-tight-vertical {
+        row-gap: $spacing-space-tight;
+    }
+    
+    &-medium-horizontal {
+        column-gap: $spacing-space-medium
+    }
+
+    &-medium-vertical {
+        row-gap: $spacing-space-medium;
+    }
+    
+    &-loose-horizontal {
+        column-gap: $spacing-space-loose
+    }
+
+    &-loose-vertical {
+        row-gap: $spacing-space-loose;
+    }
+}
+
+@import './rtl.scss';
+

package/lib/cjs/space/variables.scss

@@ -0,0 +1,3 @@
+$spacing-space-tight: $spacing-tight; // 默认间距尺寸
+$spacing-space-medium: $spacing-base; // 中等间距尺寸
+$spacing-space-loose: $spacing-loose; // 宽松间距尺寸

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

@@ -0,0 +1,8 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    SIZE: string[];
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/cjs/spin/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const PREFIX = "".concat(_constants.BASE_CLASS_PREFIX, "-spin");
+const cssClasses = {
+  PREFIX
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  SIZE: ['small', 'middle', 'large']
+};
+exports.strings = strings;
+const numbers = {};
+exports.numbers = numbers;

package/lib/cjs/spin/foundation.d.ts

@@ -0,0 +1,12 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface SpinAdapter extends Partial<DefaultAdapter> {
+    setLoading: (val: boolean) => void;
+}
+declare class SpinFoundation extends BaseFoundation<SpinAdapter> {
+    _timer: ReturnType<typeof setTimeout>;
+    static get spinDefaultAdapter(): SpinAdapter;
+    constructor(adapter: SpinAdapter);
+    updateLoadingIfNeedDelay(): void;
+    destroy(): void;
+}
+export default SpinFoundation;