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

package/lib/es/image/previewImageFoundation.js

@@ -1,58 +1,58 @@
 import BaseFoundation from "../base/foundation";
-const DefaultDOMRect = {
-  bottom: 0,
-  height: 0,
-  left: 0,
-  right: 0,
-  top: 0,
-  width: 0,
-  x: 0,
-  y: 0,
-  toJSON: () => ({})
-};
 export default class PreviewImageFoundation extends BaseFoundation {
   constructor(adapter) {
     var _this;
     super(Object.assign({}, adapter));
     _this = this;
-    this.startMouseOffset = {
+    this.startMouseClientPosition = {
       x: 0,
       y: 0
     };
     this.originImageWidth = null;
     this.originImageHeight = null;
+    this.containerWidth = 0;
+    this.containerHeight = 0;
     this._isImageVertical = () => this.getProp("rotation") % 180 !== 0;
-    this._getImageBounds = () => {
-      const imageDOM = this._adapter.getImage();
-      if (imageDOM) {
-        return imageDOM.getBoundingClientRect();
+    this._getContainerBoundingRectSize = () => {
+      const containerDOM = this._adapter.getContainer();
+      if (containerDOM) {
+        this.containerWidth = containerDOM.clientWidth;
+        this.containerHeight = containerDOM.clientHeight;
       }
-      return DefaultDOMRect;
     };
-    this._getContainerBounds = () => {
+    this._getAdaptationZoom = () => {
+      let _zoom = 1;
       const containerDOM = this._adapter.getContainer();
-      if (containerDOM) {
-        return containerDOM.getBoundingClientRect();
+      if (containerDOM && this.originImageWidth && this.originImageHeight) {
+        const {
+          rotation
+        } = this.getProps();
+        const {
+          width: imageWidth,
+          height: imageHeight
+        } = this.calcBoundingRectSize(this.originImageWidth, this.originImageHeight, rotation);
+        const reservedWidth = this.containerWidth - 80;
+        const reservedHeight = this.containerHeight - 80;
+        _zoom = Number(Math.min(reservedWidth / imageWidth, reservedHeight / imageHeight).toFixed(2));
       }
-      return DefaultDOMRect;
+      return _zoom;
     };
-    this._getOffset = e => {
+    this._getInitialZoom = () => {
       const {
-        left,
-        top
-      } = this._getImageBounds();
-      return {
-        x: e.clientX - left,
-        y: e.clientY - top
-      };
+        ratio
+      } = this.getProps();
+      let _zoom = 1;
+      if (ratio === 'adaptation') {
+        _zoom = this._getAdaptationZoom();
+      }
+      return _zoom;
     };
     this.setLoading = loading => {
       this._adapter.setLoading(loading);
     };
     this.handleWindowResize = () => {
-      if (this.originImageWidth && this.originImageHeight) {
-        this.handleResizeImage();
-      }
+      this._getContainerBoundingRectSize();
+      this.initializeImage();
     };
     this.handleLoad = e => {
       if (e.target) {
@@ -67,7 +67,7 @@ export default class PreviewImageFoundation extends BaseFoundation {
         });
         // 图片初次加载，计算 zoom，zoom 改变不需要通过回调透出
         // When the image is loaded for the first time, zoom is calculated, and zoom changes do not need to be exposed through callbacks.
-        this.handleResizeImage(false);
+        this.initializeImage(false);
       }
       const {
         src,
@@ -85,66 +85,36 @@ export default class PreviewImageFoundation extends BaseFoundation {
       });
       onError && onError(src);
     };
-    this.handleResizeImage = function () {
+    this.handleRatioChange = () => {
+      this.initializeImage();
+    };
+    this.initializeImageZoom = function () {
       let notify = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      const horizontal = !_this._isImageVertical();
       const {
         currZoom
       } = _this.getStates();
-      const imgWidth = horizontal ? _this.originImageWidth : _this.originImageHeight;
-      const imgHeight = horizontal ? _this.originImageHeight : _this.originImageWidth;
       const {
-        onZoom,
-        setRatio,
-        ratio
+        onZoom
       } = _this.getProps();
-      const containerDOM = _this._adapter.getContainer();
-      if (containerDOM) {
-        const {
-          width: containerWidth,
-          height: containerHeight
-        } = _this._getContainerBounds();
-        const reservedWidth = containerWidth - 80;
-        const reservedHeight = containerHeight - 80;
-        let _zoom = 1;
-        if (imgWidth > reservedWidth || imgHeight > reservedHeight) {
-          _zoom = Number(Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2));
-        }
-        if (currZoom === _zoom) {
-          _this.calculatePreviewImage(_zoom, null);
-        } else {
-          onZoom(_zoom, notify);
-        }
+      const _zoom = _this._getInitialZoom();
+      if (currZoom !== _zoom) {
+        onZoom(_zoom, notify);
+      } else {
+        _this.changeZoom(_zoom);
       }
     };
-    this.handleRatioChange = () => {
-      if (this.originImageWidth && this.originImageHeight) {
-        const {
-          currZoom
-        } = this.getStates();
-        const {
-          ratio,
-          onZoom
-        } = this.getProps();
-        let _zoom;
-        if (ratio === 'adaptation') {
-          const horizontal = !this._isImageVertical();
-          const imgWidth = horizontal ? this.originImageWidth : this.originImageHeight;
-          const imgHeight = horizontal ? this.originImageHeight : this.originImageWidth;
-          const {
-            width: containerWidth,
-            height: containerHeight
-          } = this._getContainerBounds();
-          const reservedWidth = containerWidth - 80;
-          const reservedHeight = containerHeight - 80;
-          _zoom = Number(Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2));
-        } else {
-          _zoom = 1;
-        }
-        if (currZoom !== _zoom) {
-          onZoom(_zoom);
+    this.initializeTranslate = () => {
+      this.setState({
+        translate: {
+          x: 0,
+          y: 0
         }
-      }
+      });
+    };
+    this.initializeImage = function () {
+      let notify = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      _this.initializeImageZoom(notify);
+      _this.initializeTranslate();
     };
     this.handleRightClickImage = e => {
       const {
@@ -158,140 +128,196 @@ export default class PreviewImageFoundation extends BaseFoundation {
         return true;
       }
     };
-    this.calcCanDragDirection = () => {
-      const {
-        width,
-        height
-      } = this.getStates();
-      const {
-        rotation
-      } = this.getProps();
-      const {
-        width: containerWidth,
-        height: containerHeight
-      } = this._getContainerBounds();
-      let canDragHorizontal = width > containerWidth;
-      let canDragVertical = height > containerHeight;
-      if (this._isImageVertical()) {
-        canDragHorizontal = height > containerWidth;
-        canDragVertical = width > containerHeight;
-      }
+    this.getCanDragDirection = (width, height) => {
+      let canDragHorizontal = width > this.containerWidth;
+      let canDragVertical = height > this.containerHeight;
       return {
         canDragVertical,
         canDragHorizontal
       };
     };
-    this.calculatePreviewImage = (newZoom, e) => {
+    this.changeZoom = (newZoom, e) => {
       const imageDOM = this._adapter.getImage();
       const {
-        canDragVertical,
-        canDragHorizontal
-      } = this.calcCanDragDirection();
-      const canDrag = canDragVertical || canDragHorizontal;
+        currZoom,
+        translate,
+        width,
+        height
+      } = this.getStates();
       const {
-        width: containerWidth,
-        height: containerHeight
-      } = this._getContainerBounds();
+        rotation
+      } = this.getProps();
+      const changeScale = newZoom / (currZoom || 1);
       const newWidth = Math.floor(this.originImageWidth * newZoom);
       const newHeight = Math.floor(this.originImageHeight * newZoom);
-      // debugger;
-      let _offset;
-      const horizontal = !this._isImageVertical();
-      let newTop = 0;
-      let newLeft = 0;
-      if (horizontal) {
-        _offset = {
-          x: 0.5 * (containerWidth - newWidth),
-          y: 0.5 * (containerHeight - newHeight)
-        };
-        newLeft = _offset.x;
-        newTop = _offset.y;
-      } else {
-        _offset = {
-          x: 0.5 * (containerWidth - newHeight),
-          y: 0.5 * (containerHeight - newWidth)
-        };
-        newLeft = _offset.x - (newWidth - newHeight) / 2;
-        newTop = _offset.y + (newWidth - newHeight) / 2;
+      let newTranslateX = Math.floor(translate.x * changeScale);
+      let newTranslateY = Math.floor(translate.y * changeScale);
+      const imageBound = this.calcBoundingRectSize(width, height, rotation);
+      const newImageBound = {
+        width: imageBound.width * changeScale,
+        height: imageBound.height * changeScale
+      };
+      if (e && imageDOM && e.target === imageDOM) {
+        const {
+          x: offsetX,
+          y: offsetY
+        } = this.calcBoundingRectMouseOffset({
+          width,
+          height,
+          offset: {
+            x: e.offsetX,
+            y: e.offsetY
+          },
+          rotation
+        });
+        const imageNewCenterX = e.clientX + (imageBound.width / 2 - offsetX) * changeScale;
+        const imageNewCenterY = e.clientY + (imageBound.height / 2 - offsetY) * changeScale;
+        const containerCenterX = this.containerWidth / 2;
+        const containerCenterY = this.containerHeight / 2;
+        newTranslateX = imageNewCenterX - containerCenterX;
+        newTranslateY = imageNewCenterY - containerCenterY;
       }
+      const newTranslate = this.getSafeTranslate(newImageBound.width, newImageBound.height, newTranslateX, newTranslateY);
       this.setState({
+        translate: newTranslate,
         width: newWidth,
         height: newHeight,
-        offset: _offset,
-        left: newLeft,
-        top: newTop,
         currZoom: newZoom
       });
       if (imageDOM) {
+        const {
+          canDragVertical,
+          canDragHorizontal
+        } = this.getCanDragDirection(newImageBound.width, newImageBound.height);
+        const canDrag = canDragVertical || canDragHorizontal;
         this._adapter.setImageCursor(canDrag);
       }
     };
-    this.calcExtremeBounds = () => {
+    this.getExtremeTranslate = (width, height) => {
+      return {
+        x: (width - this.containerWidth) / 2,
+        y: (height - this.containerHeight) / 2
+      };
+    };
+    this.getSafeTranslate = (width, height, translateX, translateY) => {
       const {
-        width,
-        height
-      } = this.getStates();
+        x: extremeX,
+        y: extremeY
+      } = this.getExtremeTranslate(width, height);
       const {
-        width: containerWidth,
-        height: containerHeight
-      } = this._getContainerBounds();
-      let extremeLeft = containerWidth - width;
-      let extremeTop = containerHeight - height;
-      if (this._isImageVertical()) {
-        extremeLeft = containerWidth - height;
-        extremeTop = containerHeight - width;
+        canDragVertical,
+        canDragHorizontal
+      } = this.getCanDragDirection(width, height);
+      let newTranslateX = 0,
+        newTranslateY = 0;
+      if (canDragHorizontal) {
+        newTranslateX = translateX > 0 ? Math.min(translateX, extremeX) : Math.max(translateX, -extremeX);
+      }
+      if (canDragVertical) {
+        newTranslateY = translateY > 0 ? Math.min(translateY, extremeY) : Math.max(translateY, -extremeY);
       }
       return {
-        left: extremeLeft,
-        top: extremeTop
+        x: newTranslateX,
+        y: newTranslateY
       };
     };
-    this.handleMoveImage = e => {
+    this.handleImageMove = e => {
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+      const mouseLeftPress = e.buttons === 1;
+      if (mouseLeftPress) {
+        this.moveImage(e);
+      }
+    };
+    this.moveImage = e => {
+      const {
+        clientX,
+        clientY
+      } = e;
       const {
-        offset,
         width,
-        height
+        height,
+        translate
       } = this.getStates();
+      const {
+        rotation
+      } = this.getProps();
+      const imageBound = this.calcBoundingRectSize(width, height, rotation);
       const {
         canDragVertical,
         canDragHorizontal
-      } = this.calcCanDragDirection();
-      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
-      const mouseLeftPress = e.buttons === 1;
-      if (mouseLeftPress && (canDragVertical || canDragHorizontal)) {
-        const {
-          clientX,
-          clientY
-        } = e;
-        const {
-          left: containerLeft,
-          top: containerTop
-        } = this._getContainerBounds();
-        const {
-          left: extremeLeft,
-          top: extremeTop
-        } = this.calcExtremeBounds();
-        let newX = canDragHorizontal ? clientX - containerLeft - this.startMouseOffset.x : offset.x;
-        let newY = canDragVertical ? clientY - containerTop - this.startMouseOffset.y : offset.y;
-        if (canDragHorizontal) {
-          newX = newX > 0 ? 0 : newX < extremeLeft ? extremeLeft : newX;
-        }
-        if (canDragVertical) {
-          newY = newY > 0 ? 0 : newY < extremeTop ? extremeTop : newY;
-        }
-        const _offset = {
-          x: newX,
-          y: newY
-        };
+      } = this.getCanDragDirection(imageBound.width, imageBound.height);
+      if (canDragVertical || canDragHorizontal) {
+        let newTranslateX = canDragHorizontal ? translate.x + clientX - this.startMouseClientPosition.x : translate.x;
+        let newTranslateY = canDragVertical ? translate.y + clientY - this.startMouseClientPosition.y : translate.y;
+        const newTranslate = this.getSafeTranslate(imageBound.width, imageBound.height, newTranslateX, newTranslateY);
         this.setState({
-          offset: _offset,
-          left: this._isImageVertical() ? _offset.x - (width - height) / 2 : _offset.x,
-          top: this._isImageVertical() ? _offset.y + (width - height) / 2 : _offset.y
+          translate: newTranslate
         });
+        this.startMouseClientPosition = {
+          x: clientX,
+          y: clientY
+        };
       }
     };
     this.handleImageMouseDown = e => {
-      this.startMouseOffset = this._getOffset(e);
+      this.startMouseClientPosition = {
+        x: e.clientX,
+        y: e.clientY
+      };
+    };
+    // 鼠标事件的 e.offset 是以 dom 旋转前左上角为零点的, 这个方法会转换为以旋转后元素的外接矩形左上角为零点的 offset
+    this.calcBoundingRectMouseOffset = calcBoundingRectMouseOffset => {
+      const {
+        width,
+        height,
+        offset,
+        rotation = 0
+      } = calcBoundingRectMouseOffset;
+      let degrees = rotation % 360;
+      degrees = degrees >= 0 ? degrees : 360 + degrees;
+      let boundOffsetX = 0,
+        boundOffsetY = 0;
+      switch (degrees) {
+        case 0:
+          boundOffsetX = offset.x;
+          boundOffsetY = offset.y;
+          break;
+        case 90:
+          boundOffsetX = height - offset.y;
+          boundOffsetY = offset.x;
+          break;
+        case 180:
+          boundOffsetX = width - offset.x;
+          boundOffsetY = height - offset.y;
+          break;
+        case 270:
+          boundOffsetX = offset.y;
+          boundOffsetY = width - offset.x;
+          break;
+        default:
+          break;
+      }
+      return {
+        x: boundOffsetX,
+        y: boundOffsetY
+      };
+    };
+  }
+  init() {
+    this._getContainerBoundingRectSize();
+  }
+  calcBoundingRectSize() {
+    let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    let height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let rotation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    const angleInRadians = rotation * Math.PI / 180;
+    const sinTheta = Math.abs(Math.sin(angleInRadians));
+    const cosTheta = Math.abs(Math.cos(angleInRadians));
+    const boundingWidth = width * cosTheta + height * sinTheta;
+    const boundingHeight = width * sinTheta + height * cosTheta;
+    return {
+      width: boundingWidth,
+      height: boundingHeight
     };
   }
 }

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

@@ -17,6 +17,7 @@ export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string,
     enabledBodyScroll: () => void;
     getSetDownloadFunc: () => (src: string) => string;
     isValidTarget: (e: any) => boolean;
+    changeImageZoom: (zoom: number, e?: WheelEvent) => void;
 }
 export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewInnerAdapter<P, S>, P, S> {
     constructor(adapter: PreviewInnerAdapter<P, S>);
@@ -32,8 +33,8 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
     mouseMoveHandler: import("lodash").DebouncedFuncLeading<(e: any) => void>;
     updateTimer: () => void;
     clearTimer: () => void;
-    handleWheel: (e: any) => void;
-    onWheel: (e: any) => void;
+    handleWheel: (e: WheelEvent) => void;
+    onWheel: (e: WheelEvent) => void;
     handleMouseUp: (e: any) => void;
     handleMouseDown: (e: any) => void;
     handleKeyDown: (e: any) => void;
@@ -42,7 +43,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
     handlePreviewClose: (e: any) => void;
     handleAdjustRatio: (type: RatioType) => void;
     handleRotateImage: (direction: string) => void;
-    handleZoomImage: (newZoom: number, notify?: boolean) => void;
+    handleZoomImage: (newZoom: number, notify?: boolean, e?: WheelEvent) => void;
     preloadGapImage: () => void;
     preloadSingleImage: () => void;
     setLoadSuccessStatus: (src: string) => void;

package/lib/es/image/previewInnerFoundation.js

@@ -86,7 +86,7 @@ export default class PreviewInnerFoundation extends BaseFoundation {
         }
       }
       if (!_isUndefined(_zoom)) {
-        this.handleZoomImage(_zoom);
+        this.handleZoomImage(_zoom, true, e);
       }
     };
     this.handleMouseUp = e => {
@@ -184,7 +184,8 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       const {
         rotation
       } = this.getStates();
-      const newRotation = rotation + (direction === "left" ? 90 : -90);
+      const ROTATE_STEP = 90;
+      const newRotation = rotation + (direction === "left" ? -ROTATE_STEP : ROTATE_STEP);
       this.setState({
         rotation: newRotation
       });
@@ -192,11 +193,13 @@ export default class PreviewInnerFoundation extends BaseFoundation {
     };
     this.handleZoomImage = function (newZoom) {
       let notify = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      let e = arguments.length > 2 ? arguments[2] : undefined;
       const {
         zoom
       } = _this.getStates();
       if (zoom !== newZoom) {
         notify && _this._adapter.notifyZoom(newZoom, newZoom > zoom);
+        _this._adapter.changeImageZoom(newZoom, e);
         _this.setState({
           zoom: newZoom
         });

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

@@ -1,19 +1,19 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { ItemProps } from './itemFoundation';
+import { ItemProps, ItemKey } from './itemFoundation';
 export interface ItemKey2ParentKeysMap {
     [key: string]: (string | number)[];
 }
 export interface OnClickData {
-    itemKey: string | number;
+    itemKey: ItemKey;
     domEvent: any;
     isOpen: boolean;
 }
 export interface OnSelectData extends OnClickData {
-    selectedKeys: (string | number)[];
+    selectedKeys: ItemKey[];
     selectedItems: ItemProps[];
 }
 export interface OnOpenChangeData extends OnClickData {
-    openKeys: (string | number)[];
+    openKeys: ItemKey[];
 }
 export interface NavItemType {
     props?: ItemProps;
@@ -39,7 +39,7 @@ export interface NavigationAdapter<P = Record<string, any>, S = Record<string, a
 }
 export default class NavigationFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<NavigationAdapter<P, S>, P, S> {
     constructor(adapter: NavigationAdapter<P, S>);
-    static getZeroParentKeys(itemKeysMap?: {}, ...itemKeys: (string | number)[]): any[];
+    static getZeroParentKeys(itemKeysMap?: {}, ...itemKeys: ItemKey[]): any[];
     static buildItemKeysMap(items?: NavItemType[], keysMap?: {}, parentKeys?: (string | number)[], keyPropName?: string): {};
     /**
      * init is called in constructor and componentDidMount.
@@ -74,12 +74,12 @@ export default class NavigationFoundation<P = Record<string, any>, S = Record<st
      * @param {*} itemKeysMap
      */
     getWillOpenKeys(itemKeysMap: ItemKey2ParentKeysMap): any[];
-    getShouldOpenKeys(itemKeysMap?: ItemKey2ParentKeysMap, selectedKeys?: (string | number)[]): unknown[];
+    getShouldOpenKeys(itemKeysMap?: ItemKey2ParentKeysMap, selectedKeys?: ItemKey[]): unknown[];
     destroy(): void;
-    selectLevelZeroParentKeys(itemKeysMap: ItemKey2ParentKeysMap, itemKeys: (string | number)[]): any[];
+    selectLevelZeroParentKeys(itemKeysMap: ItemKey2ParentKeysMap, itemKeys: ItemKey[]): any[];
     formatItems(items?: ItemProps[]): any[];
     handleSelect(data: OnSelectData): void;
-    judgeIfOpen(openKeys: (string | number)[], items: NavItemType[]): boolean;
+    judgeIfOpen(openKeys: ItemKey[], items: NavItemType[]): boolean;
     handleCollapseChange(): void;
     handleItemsChange(isChanged: boolean): void;
 }

package/lib/es/navigation/itemFoundation.d.ts

@@ -12,10 +12,11 @@ export interface ItemProps {
     disabled?: boolean;
     children?: any;
 }
+export type ItemKey = string | number;
 export interface SelectedItemProps<Props = ItemProps> {
-    itemKey: string | number;
+    itemKey: ItemKey;
     text?: any;
-    selectedKeys?: string | number[];
+    selectedKeys?: ItemKey[];
     selectedItems?: Props[];
     domEvent?: any;
 }
@@ -23,8 +24,8 @@ export interface ItemAdapter<P = Record<string, any>, S = Record<string, any>> e
     cloneDeep(value: any, customizer?: (value: any) => void): any;
     updateTooltipShow(showTooltip: boolean): void;
     updateSelected(selected: boolean): void;
-    updateGlobalSelectedKeys(keys: string[]): void;
-    getSelectedKeys(): string[];
+    updateGlobalSelectedKeys(keys: ItemKey[]): void;
+    getSelectedKeys(): ItemKey[];
     getSelectedKeysIsControlled(): boolean;
     notifyGlobalOnSelect(item: SelectedItemProps): void;
     notifyGlobalOnClick(item: SelectedItemProps): void;

package/lib/es/radio/radioInnerFoundation.js

@@ -15,7 +15,7 @@ export default class RadioInnerFoundation extends BaseFoundation {
     return this._adapter.getProp('checked');
   }
   handleChange(e) {
-    const isControlledMode = ('checked' in this.getProps());
+    const isControlledMode = 'checked' in this.getProps();
     const {
       checked
     } = e.target;

package/lib/es/table/utils.d.ts

@@ -102,4 +102,4 @@ export declare function isTreeTable({ dataSource, childrenRecordName }: {
 }): boolean;
 export declare function getRTLAlign(align: typeof strings.ALIGNS[number], direction?: 'ltr' | 'rtl'): typeof strings.ALIGNS[number];
 export declare function getRTLFlexAlign(align: typeof strings.ALIGNS[number], direction?: 'ltr' | 'rtl'): typeof strings.JUSTIFY_CONTENT[number];
-export declare function shouldShowEllipsisTitle(ellipsis: BaseEllipsis): true;
+export declare function shouldShowEllipsisTitle(ellipsis: BaseEllipsis): boolean;

package/lib/es/tabs/constants.d.ts

@@ -4,6 +4,7 @@ declare const cssClasses: {
     TABS_BAR_LINE: string;
     TABS_BAR_CARD: string;
     TABS_BAR_BUTTON: string;
+    TABS_BAR_SLASH: string;
     TABS_BAR_EXTRA: string;
     TABS_TAB: string;
     TABS_TAB_ACTIVE: string;

package/lib/es/tabs/constants.js

@@ -5,6 +5,7 @@ const cssClasses = {
   TABS_BAR_LINE: `${BASE_CLASS_PREFIX}-tabs-bar-line`,
   TABS_BAR_CARD: `${BASE_CLASS_PREFIX}-tabs-bar-card`,
   TABS_BAR_BUTTON: `${BASE_CLASS_PREFIX}-tabs-bar-button`,
+  TABS_BAR_SLASH: `${BASE_CLASS_PREFIX}-tabs-bar-slash`,
   TABS_BAR_EXTRA: `${BASE_CLASS_PREFIX}-tabs-bar-extra`,
   TABS_TAB: `${BASE_CLASS_PREFIX}-tabs-tab`,
   TABS_TAB_ACTIVE: `${BASE_CLASS_PREFIX}-tabs-tab-active`,
@@ -26,7 +27,7 @@ const numbers = {
   DEFAULT_ACTIVE_KEY: 1
 };
 const strings = {
-  TYPE_MAP: ['line', 'card', 'button'],
+  TYPE_MAP: ['line', 'card', 'button', 'slash'],
   SIZE: ['small', 'medium', 'large'],
   POSITION_MAP: ['top', 'left']
 };