@douyinfe/semi-foundation 2.63.1 → 2.63.2-alpha.0

package/lib/cjs/tabs/variables.scss

@@ -26,9 +26,13 @@ $color-tabs_tab_line_disabled-text-hover: var(--semi-color-disabled-text); //
 
 $color-tabs_tab_card_default-border-default: var(--semi-color-border); // 卡片式页签描边颜色 - 默认
 
+$color-tabs_tab_button-bg-default:  transparent; // 按钮式页签背景颜色 - 默认
 $color-tabs_tab_button_selected-bg-default: var(--semi-color-primary-light-default); // 按钮式页签背景颜色 - 选中
 $color-tabs_tab_button_selected-text-default: var(--semi-color-primary); // 按钮式页签文本颜色 - 选中
 $color-tabs_tab_button-text-default: var(--semi-color-text-2); // 按钮式页签文本颜色 - 默认
+$color-tabs_tab_button-text-active: var(--semi-color-text-0); // 按钮式页签文本颜色 - 按下
+$color-tabs_tab_button-text-hover: var(--semi-color-text-0); // 按钮式页签文本颜色 - 按下
+
 $color-tabs_tab_button-bg-hover: var(--semi-color-fill-0); // 按钮式页签背景颜色 - 悬浮
 $color-tabs_tab_button-bg-active: var(--semi-color-fill-1); // 按钮式页签背景颜色 - 按下
 
@@ -65,6 +69,10 @@ $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);
 
+$color-tabs_tab_slash_line: var(--semi-color-text-2); //斜线式页签分割线字体颜色
+// $font-tabs_tab_slash_line-fontWeight: $font-weight-regular; //斜线式页签分割线字重
+$font-tabs_tab_slash_line-fontSize: $font-size-regular; //斜线式页签分割线字体大小
+
 $font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
 $font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
 
@@ -118,6 +126,11 @@ $spacing-tabs_bar_line_tab_left-padding: 12px; // 垂直线条式页签左侧内
 $spacing-tabs_bar_line_tab_left_small-padding: $spacing-tight - 2px;  // 小尺寸垂直线条式页签左侧内边距
 $spacing-tabs_bar_line_tab_left_medium-padding: $spacing-base-tight - 2px; // 中等尺寸垂直线条式页签左侧内边距
 
+$spacing-tabs_bar_slash_tab-paddingY: 12px; // 斜线式页签上下内边距
+$spacing-tabs_bar_slash_tab-paddingX: 4px; // 斜线式页签水平内边距
+$spacing-tabs_bar_slash-marginRight: 16px; // 斜线式页签右侧外边距
+$spacing-tabs_bar_slash_line_marginLeft: 16px; // 斜线式页签斜线左侧外边距
+
 $spacing-tabs_content-paddingY: 5px; // 页签内容区垂直方向内边距
 $spacing-tabs_content-paddingX: 0; // 页签内容区水平方向内边距
 
@@ -148,5 +161,11 @@ $radius-tabs_tab_button: var(--semi-border-radius-small); // 按钮式页签圆
 $font-tabs_bar_large-fontSize: $font-size-regular; // 大号模式 字体大小
 $font-tabs_bar_small-fontSize: $font-size-regular; // 小号模式 字体大小
 $font-tabs_bar_medium-fontSize: $font-size-regular; // 中等模式 字体大小
-
-
+$font-tabs_bar_button-fontSize: $font-size-regular; // 按钮式页签 字体大小
+$font-tabs_bar_slash-fontSize: $font-size-regular; // 斜线式页签 字体大小
+
+$font-tabs_bar_large-lineHeight: 20px; // 线条式页签大号模式 行高
+$font-tabs_bar_small-lineHeight: 20px; // 线条式页签小号模式 行高
+$font-tabs_bar_medium-lineHeight: 20px; // 线条式页签中等模式 行高
+$font-tabs_bar_button-lineHeight: 20px; // 按钮式页签 行高
+$font-tabs_bar_slash-lineHeight: 20px; // 卡片式页签 行高

package/lib/cjs/tree/treeUtil.d.ts

@@ -83,6 +83,6 @@ export declare function getValueOrKey(data: any, keyMaps?: KeyMapProps): any;
 export declare function normalizeValue(value: any, withObject: boolean, keyMaps?: KeyMapProps): any;
 export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities, keyMaps?: KeyMapProps): Set<string>;
-export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

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

@@ -18,7 +18,7 @@ declare const strings: {
     DRAG_AREA_ILLEGAL: string;
     TRIGGER_AUTO: "auto";
     TRIGGER_CUSTOM: "custom";
-    UPLOAD_TRIGGER: ("auto" | "custom")[];
+    UPLOAD_TRIGGER: ("custom" | "auto")[];
     VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
     PROMPT_POSITION: readonly ["left", "right", "bottom"];
 };

package/lib/es/base/foundation.js

@@ -85,7 +85,7 @@ class BaseFoundation {
   _isControlledComponent() {
     let key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'value';
     const props = this.getProps();
-    const isControlComponent = (key in props);
+    const isControlComponent = key in props;
     return isControlComponent;
   }
   // Does the user have incoming props, eg: _isInProps (value)

package/lib/es/chat/foundation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 export interface Content {
@@ -27,7 +26,7 @@ export interface Message {
     [x: string]: any;
 }
 export interface ChatAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getContainerRef: () => React.RefObject<HTMLDivElement>;
+    getContainerRef: () => HTMLDivElement;
     setWheelScroll: (flag: boolean) => void;
     notifyChatsChange: (chats: Message[]) => void;
     notifyLikeMessage: (message: Message) => void;

package/lib/es/chat/foundation.js

@@ -26,16 +26,14 @@ export default class ChatFoundation extends BaseFoundation {
       this._adapter.notifyStopGenerate(e);
     };
     this.scrollToBottomImmediately = () => {
-      const containerRef = this._adapter.getContainerRef();
-      const element = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      const element = this._adapter.getContainerRef();
       if (element) {
         element.scrollTop = element.scrollHeight;
       }
     };
     this.scrollToBottomWithAnimation = () => {
       const duration = SCROLL_ANIMATION_TIME;
-      const containerRef = this._adapter.getContainerRef();
-      const element = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      const element = this._adapter.getContainerRef();
       if (!element) {
         return;
       }
@@ -61,9 +59,6 @@ export default class ChatFoundation extends BaseFoundation {
       this.animation.start();
     };
     this.containerScroll = e => {
-      if (e.target !== e.currentTarget) {
-        return;
-      }
       e.persist();
       const update = () => {
         this.getScroll(e.target);

package/lib/es/checkbox/checkboxGroupFoundation.js

@@ -33,7 +33,7 @@ class CheckboxGroupFoundation extends BaseFoundation {
     } else {
       newValue = prevValue.filter((itm, idx) => itm !== evt.target.value);
     }
-    const isControlledMode = ('value' in this.getProps());
+    const isControlledMode = 'value' in this.getProps();
     if (isControlledMode) {
       // Controlled mode only needs to notify
       this.notifyChange(newValue);

package/lib/es/datePicker/foundation.js

@@ -258,7 +258,7 @@ export default class DatePickerFoundation extends BaseFoundation {
     const {
       value
     } = this._adapter.getStates();
-    const needResetCachedSelectedValue = !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
+    const needResetCachedSelectedValue = isNullOrUndefined(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
     if (needResetCachedSelectedValue) {
       this.resetCachedSelectedValue(value);
     }

package/lib/es/image/image.css

@@ -90,6 +90,7 @@
   align-items: center;
   padding: 0 24px;
   z-index: 1;
+  pointer-events: none;
 }
 .semi-image-preview-header-title {
   flex: 1;
@@ -102,6 +103,7 @@
   width: 30px;
   height: 30px;
   border-radius: 50%;
+  pointer-events: auto;
 }
 .semi-image-preview-header-close:hover {
   background-color: rgba(0, 0, 0, 0.75);
@@ -166,11 +168,13 @@
 .semi-image-preview-image {
   position: relative;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .semi-image-preview-image-img {
   position: absolute;
   transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
-  transition: transform 300ms 0s;
   z-index: 0;
   user-select: none;
 }

package/lib/es/image/image.scss

@@ -100,6 +100,7 @@ $module: #{$prefix}-image;
         align-items: center;
         padding: $spacing-image_preview_header-paddingY $spacing-image_preview_header-paddingX;
         z-index: $z-image_preview_header;
+        pointer-events: none;
 
         &-title {
             flex: 1;
@@ -113,6 +114,7 @@ $module: #{$prefix}-image;
             width: $width-image_preview_header_close;
             height: $height-image_preview_header_close;
             border-radius: 50%;
+            pointer-events: auto;
 
             &:hover {
                 background-color: $color-image_header_close-bg;
@@ -192,11 +194,14 @@ $module: #{$prefix}-image;
     &-image {
         position: relative;
         height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
         &-img {
             position: absolute;
             transform: scale3d($transform_scale3d-image_preview_image_img) $transform_rotate-image_preview_image_img;
-            transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
+            // transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
             user-select: none;
         }

package/lib/es/image/previewImageFoundation.d.ts

@@ -9,36 +9,69 @@ export interface DragDirection {
     canDragVertical: boolean;
     canDragHorizontal: boolean;
 }
-export interface ExtremeBounds {
-    left: number;
-    top: number;
+export interface ExtremeTranslate {
+    x: number;
+    y: number;
 }
-export interface ImageOffset {
+export interface Offset {
     x: number;
     y: number;
 }
+export interface Translate {
+    x: number;
+    y: number;
+}
+interface CalcBoundingRectMouseOffset {
+    offset: Offset;
+    width: number;
+    height: number;
+    rotation?: number;
+}
+export interface BoundingRectSize {
+    width: number;
+    height: number;
+}
 export default class PreviewImageFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewImageAdapter<P, S>, P, S> {
     constructor(adapter: PreviewImageAdapter<P, S>);
-    startMouseOffset: {
+    startMouseClientPosition: {
         x: number;
         y: number;
     };
     originImageWidth: any;
     originImageHeight: any;
+    containerWidth: number;
+    containerHeight: number;
+    init(): void;
     _isImageVertical: () => boolean;
-    _getImageBounds: () => DOMRect;
-    _getContainerBounds: () => DOMRect;
-    _getOffset: (e: any) => ImageOffset;
+    _getContainerBoundingRectSize: () => void;
+    _getAdaptationZoom: () => number;
+    _getInitialZoom: () => number;
     setLoading: (loading: boolean) => void;
     handleWindowResize: () => void;
     handleLoad: (e: any) => void;
     handleError: (e: any) => void;
-    handleResizeImage: (notify?: boolean) => void;
     handleRatioChange: () => void;
+    initializeImageZoom: (notify?: boolean) => void;
+    initializeTranslate: () => void;
+    initializeImage: (notify?: boolean) => void;
     handleRightClickImage: (e: any) => boolean;
-    calcCanDragDirection: () => DragDirection;
-    calculatePreviewImage: (newZoom: number, e: any) => void;
-    calcExtremeBounds: () => ExtremeBounds;
-    handleMoveImage: (e: any) => void;
+    calcBoundingRectSize(width?: number, height?: number, rotation?: number): {
+        width: number;
+        height: number;
+    };
+    getCanDragDirection: (width: number, height: number) => DragDirection;
+    changeZoom: (newZoom: number, e?: WheelEvent) => void;
+    getExtremeTranslate: (width: number, height: number) => ExtremeTranslate;
+    getSafeTranslate: (width: number, height: number, translateX: number, translateY: number) => {
+        x: number;
+        y: number;
+    };
+    handleImageMove: (e: MouseEvent) => void;
+    moveImage: (e: MouseEvent) => void;
     handleImageMouseDown: (e: any) => void;
+    calcBoundingRectMouseOffset: (calcBoundingRectMouseOffset: CalcBoundingRectMouseOffset) => {
+        x: number;
+        y: number;
+    };
 }
+export {};