@douyinfe/semi-foundation 2.22.3 → 2.23.0-alpha.2

package/lib/cjs/tabs/tabs.css

@@ -103,12 +103,52 @@
   outline: 2px solid var(--semi-color-primary-light-active);
   outline-offset: -2px;
 }
+.semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled {
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+}
+.semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled:hover {
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+}
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
   margin-right: 4px;
 }
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button {
+  color: var(--semi-color-primary);
+  padding: 8px;
+  border: 0px solid transparent;
+  background-color: transparent;
+}
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:hover {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-primary);
+  border-color: transparent;
+}
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:active {
+  background-color: var(--semi-color-fill-1);
+  color: var(--semi-color-primary);
+  border-color: transparent;
+}
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
   margin-left: 4px;
 }
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button {
+  color: var(--semi-color-primary);
+  padding: 8px;
+  border: 0px solid transparent;
+  background-color: transparent;
+}
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:hover {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-primary);
+  border-color: transparent;
+}
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:active {
+  background-color: var(--semi-color-fill-1);
+  color: var(--semi-color-primary);
+  border-color: transparent;
+}
 .semi-tabs-bar-dropdown {
   max-height: 300px;
   overflow-y: auto;

package/lib/cjs/tabs/tabs.scss

@@ -134,14 +134,55 @@ $module: #{$prefix}-tabs;
                     outline-offset: $width-tabs-outline-offset;
                 }
             }
+            & > .#{$prefix}-button-disabled{
+                color: $color-tabs_tab-pane_arrow_disabled-text-default;
+                background-color: $color-tabs_tab-pane_arrow_disabled-bg-default;
+                &:hover{
+                    color: $color-tabs_tab-pane_arrow_disabled-text-hover;
+                    background-color: $color-tabs_tab-pane_arrow_disabled-bg-hover;
+                }
+            }
         }
 
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
+            & > .#{$prefix}-button{
+                color: $color-tabs_tab-pane_arrow-text-default;
+                padding: $spacing-tabs_tab-pane_arrow;
+                border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
+                background-color: $color-tabs_tab-pane_arrow-bg-default;
+                &:hover{
+                    background-color: var(--semi-color-fill-0);
+                    color: $color-tabs_tab-pane_arrow-text-hover;
+                    border-color: $color-tabs_tab-pane_arrow-border-hover;
+                }
+                &:active{
+                    background-color: var(--semi-color-fill-1);
+                    color: $color-tabs_tab-pane_arrow-text-active;
+                    border-color: $color-tabs_tab-pane_arrow-border-active;
+                }
+            }
+
         }
 
         .#{$module}-bar-arrow-end {
             margin-left: $spacing-tabs_overflow_icon-marginLeft;
+            & > .#{$prefix}-button{
+                color: $color-tabs_tab-pane_arrow-text-default;
+                padding: $spacing-tabs_tab-pane_arrow;
+                border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
+                background-color: $color-tabs_tab-pane_arrow-bg-default;
+                &:hover{
+                    background-color: var(--semi-color-fill-0);
+                    color: $color-tabs_tab-pane_arrow-text-hover;
+                    border-color: $color-tabs_tab-pane_arrow-border-hover;
+                }
+                &:active{
+                    background-color: var(--semi-color-fill-1);
+                    color: $color-tabs_tab-pane_arrow-text-active;
+                    border-color: $color-tabs_tab-pane_arrow-border-active;
+                }
+            }
         }
     }
 
@@ -160,13 +201,13 @@ $module: #{$prefix}-tabs;
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
-            transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
+            transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的 color的transition
             transform:scale($transform_scale-tabs_tab_line-item);
 
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
                 transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
-                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的border-color 的 transition
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }

package/lib/cjs/tabs/variables.scss

@@ -48,6 +48,23 @@ $color-tabs_tab-outline-focus: var(--semi-color-primary-light-active); // 页签
 
 $color-tabs_tab-pane-text-default: var(--semi-color-text-0); // 标签页内容文本颜色 - 默认
 
+$color-tabs_tab-pane_arrow-text-default: var(--semi-color-primary); // 滚动折叠箭头颜色 - 默认
+$color-tabs_tab-pane_arrow-border-default: transparent; // 滚动折叠箭头边框颜色 - 默认
+$color-tabs_tab-pane_arrow-bg-default:transparent; // 滚动折叠箭头背景色 - 默认
+
+$color-tabs_tab-pane_arrow-text-hover: var(--semi-color-primary); // 滚动折叠箭头颜色 - 悬浮
+$color-tabs_tab-pane_arrow-border-hover: transparent; // 滚动折叠箭头边框颜色 - 悬浮
+$color-tabs_tab-pane_arrow-bg-hover: var(--semi-color-fill-0); // 滚动折叠箭头背景色 - 悬浮
+
+$color-tabs_tab-pane_arrow-text-active: var(--semi-color-primary); // 滚动折叠箭头颜色 - 按下
+$color-tabs_tab-pane_arrow-border-active: transparent; // 滚动折叠箭头边框颜色 - 按下
+$color-tabs_tab-pane_arrow-bg-active: var(--semi-color-fill-1); // 滚动折叠箭头背景色 - 按下
+
+$color-tabs_tab-pane_arrow_disabled-bg-default: transparent;
+$color-tabs_tab-pane_arrow_disabled-bg-hover:  transparent;
+$color-tabs_tab-pane_arrow_disabled-text-default: var(--semi-color-disabled-text);
+$color-tabs_tab-pane_arrow_disabled-text-hover:  var(--semi-color-disabled-text);
+
 $font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
 $font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
 
@@ -60,6 +77,7 @@ $width-tabs_bar_card-border: $border-thickness-control; // 卡片式页签底部
 $width-tabs-outline: 2px; // 聚焦轮廓宽度
 $width-tabs-outline-offset: -2px; // 聚焦轮廓偏移宽度
 $width-tabs_bar_line-outline-offset: -1px; // 线条式页签聚焦轮廓偏移宽度
+$width-tabs_tab-pane_arrow-border:0px; // 滚动折叠箭头边框宽度
 
 $height-tabs_bar_extra_large: 50px; // 大尺寸页签高度
 $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺寸页签文字行高
@@ -67,6 +85,7 @@ $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺
 $height-tabs_bar_extra_small: 36px; // 小尺寸页签高度
 $font-tabs_bar_extra_small-lineHeight: $height-tabs_bar_extra_small; // 小尺寸页签文字行高
 
+$spacing-tabs_tab-pane_arrow: 8px; //滚动折叠箭头内边距
 $spacing-tabs_bar_extra-paddingY: 0px; // 附加操作垂直内边距
 $spacing-tabs_bar_extra-paddingX: 5px; // 附加操作水平内边距
 $spacing-tabs_tab_icon-marginRight: $spacing-tight; // 附加操作垂直内边距
@@ -119,3 +138,4 @@ $spacing-tabs_bar_button_tab-paddingX: $spacing-base-tight; // 按钮式页签
 $radius-tabs_tab_card: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0; // 卡片式页签四向圆角
 $radius-tabs_tab_card_left: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); // 垂直卡片式页签四向圆角
 $radius-tabs_tab_button: var(--semi-border-radius-small); // 按钮式页签圆角
+

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

@@ -18,5 +18,6 @@ declare const numbers: {
     readonly MOUSE_ENTER_DELAY: 50;
     readonly MOUSE_LEAVE_DELAY: 50;
     readonly SPACING: 8;
+    readonly MARGIN: 0;
 };
 export { cssClasses, strings, numbers };

package/lib/cjs/tooltip/constants.js

@@ -28,7 +28,7 @@ const numbers = {
   DEFAULT_Z_INDEX: 1060,
   MOUSE_ENTER_DELAY: 50,
   MOUSE_LEAVE_DELAY: 50,
-  SPACING: 8 // Values are consistent with spacing-tight in scss
-
+  SPACING: 8,
+  MARGIN: 0
 };
 exports.numbers = numbers;

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

@@ -65,7 +65,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _bindResizeEvent(): void;
     unBindResizeEvent(): void;
     removePortal: () => void;
+    _adjustPos(position?: string, isVertical?: boolean, adjustType?: string, concatPos?: any): string;
     _reversePos(position?: string, isVertical?: boolean): string;
+    _expandPos(position: string, concatPos: string): string;
+    _reducePos(position?: string): string;
     clearDelayTimer(): void;
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>): {
         triggerEventSet: {
@@ -80,7 +83,14 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _togglePortalVisible(isVisible: boolean): void;
     _roundPixel(pixel: number): number;
     calcTransformOrigin(position: Position, triggerRect: DOMRect, translateX: number, translateY: number): string;
-    calcPosStyle(triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect, position?: Position, spacing?: number): Record<string, string | number>;
+    calcPosStyle(props: {
+        triggerRect: DOMRect;
+        wrapperRect: DOMRect;
+        containerRect: PopupContainerDOMRect;
+        position?: Position;
+        spacing?: number;
+        isOverFlow?: [boolean, boolean];
+    }): Record<string, string | number>;
     /**
      * 耦合的东西比较多，稍微罗列一下：
      *
@@ -97,7 +107,16 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     calcPosition: (triggerRect?: DOMRect, wrapperRect?: DOMRect, containerRect?: PopupContainerDOMRect, shouldUpdatePos?: boolean) => Record<string, string | number>;
     isLR(position?: string): boolean;
     isTB(position?: string): boolean;
-    adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect): string;
+    isReverse(rowSpace: number, reverseSpace: number, size: number): boolean;
+    isOverFlow(rowSpace: number, reverseSpace: number, size: number): boolean;
+    isHalfOverFlow(posSpace: number, negSpace: number, size: number): boolean;
+    isHalfAllEnough(posSpace: number, negSpace: number, size: number): boolean;
+    getReverse(viewOverFlow: boolean, containerOverFlow: boolean, shouldReverseView: boolean, shouldReverseContainer: boolean): boolean;
+    adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect): {
+        position: string;
+        isHeightOverFlow: boolean;
+        isWidthOverFlow: boolean;
+    };
     delayHide: () => void;
     hide: () => void;
     _bindScrollEvent(): void;