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

package/lib/es/colorPicker/utils/split.d.ts

@@ -0,0 +1,18 @@
+declare const split: (str: string, mode: 'rgba' | 'hsva') => false | {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+    h?: undefined;
+    s?: undefined;
+    v?: undefined;
+} | {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+    r?: undefined;
+    g?: undefined;
+    b?: undefined;
+};
+export default split;

package/lib/es/colorPicker/utils/split.js

@@ -0,0 +1,34 @@
+const split = (str, mode) => {
+  // 12,32,43 => [12,32,43]
+  const reg = /^\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,?\s*([\d.]*)\s*$/;
+  const res = str.match(reg);
+  const result = [];
+  result[0] = Number(res === null || res === void 0 ? void 0 : res[1]);
+  result[1] = Number(res === null || res === void 0 ? void 0 : res[2]);
+  result[2] = Number(res === null || res === void 0 ? void 0 : res[3]);
+  result[3] = Number((res === null || res === void 0 ? void 0 : res[4]) === undefined || (res === null || res === void 0 ? void 0 : res[4]) === '' ? 1 : res === null || res === void 0 ? void 0 : res[4]);
+  const check = (a, max) => {
+    return !(isNaN(a) || a < 0 || a > max);
+  };
+  const ok = check(result[0], mode === 'rgba' ? 255 : 360) && check(result[1], mode === 'rgba' ? 255 : 100) && check(result[2], mode === 'rgba' ? 255 : 100) && check(result[3], 1);
+  if (ok) {
+    if (mode === 'rgba') {
+      return {
+        r: result[0],
+        g: result[1],
+        b: result[2],
+        a: result[3]
+      };
+    } else {
+      return {
+        h: result[0],
+        s: result[1],
+        v: result[2],
+        a: result[3]
+      };
+    }
+  } else {
+    return false;
+  }
+};
+export default split;

package/lib/es/colorPicker/variables.scss

@@ -0,0 +1,28 @@
+$radius-colorPicker-topLeft:8px; // 圆角 - 左上
+$radius-colorPicker-topRight:8px; // 圆角 - 右上
+$radius-colorPicker-bottomLeft:0px; // 圆角 - 左下
+$radius-colorPicker-bottomRight:0px; // 圆角 - 右下
+$radius-colorPicker-handle:var(--semi-border-radius-full); // 圆角 - 拖拽把手
+$radius-colorPicker-alphaSliderInner:4px; // 圆角 - 透明度 Slider
+$radius-colorPicker-demoBlock: 4px; // 圆角 - 颜色手动输入区域左侧当前选中颜色色块
+$radius-colorPicker-defaultTrigger:4px; // 默认 trigger 圆角
+
+
+$width-colorPicker_handle-border: 2px; // 把手宽度
+$width-colorPicker-colorPickerInputNumber:58px; // 数组输入器宽度
+$width-colorPicker-formatSelect:80px; // 格式选择下拉 Select 宽度
+$width-colorPicker-defaultTrigger: 24px; // 默认 trigger 大小
+
+$color-colorPicker_handle-border:var(--semi-color-white); // 把手边框颜色
+
+
+$spacing-colorPicker_inputNumberSuffix-horizontal:4px; // 数字输入框后百分比水平距离
+$spacing-colorPicker_inputGroup-marginLeft:4px; //  颜色手动输入区域 左侧距离色块距离
+$spacing-colorPicker_popover-padding:8px; // 弹层模式时整体内边距
+$spacing-colorPicker_inputNumberSuffix-vertical:4px; // 数字输入框后百分比垂直距离
+$spacing-colorPicker_slider-marginTop:6px; // 滑动选择器上边距
+$spacing-colorPicker_dataPart-marginTop:8px; // 颜色手动输入区域 上边距
+
+
+$font-colorPicker_inputNumberSuffix-fontSize:14px; // 颜色手动输入区域百分比字体大小
+

package/lib/es/image/previewImageFoundation.js

@@ -158,24 +158,28 @@ export default class PreviewImageFoundation extends BaseFoundation {
         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;
+        let angle = rotation % 360;
+        angle < 0 && (angle = 360 + angle);
+        switch (angle) {
+          case 0:
+            newTranslateX = (e.offsetX - 0.5 * width) * (1 - newZoom / currZoom) + translate.x;
+            newTranslateY = (e.offsetY - 0.5 * height) * (1 - newZoom / currZoom) + translate.y;
+            break;
+          case 90:
+            newTranslateX = (0.5 * height - e.offsetY) * (1 - newZoom / currZoom) + translate.x;
+            newTranslateY = (e.offsetX - 0.5 * width) * (1 - newZoom / currZoom) + translate.y;
+            break;
+          case 180:
+            newTranslateX = (0.5 * width - e.offsetX) * (1 - newZoom / currZoom) + translate.x;
+            newTranslateY = (0.5 * height - e.offsetY) * (1 - newZoom / currZoom) + translate.y;
+            break;
+          case 270:
+            newTranslateX = (e.offsetY - 0.5 * height) * (1 - newZoom / currZoom) + translate.x;
+            newTranslateY = (0.5 * width - e.offsetX) * (1 - newZoom / currZoom) + translate.y;
+            break;
+          default:
+            break;
+        }
       }
       const newTranslate = this.getSafeTranslate(newImageBound.width, newImageBound.height, newTranslateX, newTranslateY);
       this.setState({

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

@@ -202,6 +202,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
     _handleHomeKey: (handler: 'min' | 'max') => any;
     _handleEndKey: (handler: 'min' | 'max') => any;
     handleKeyDown: (event: any, handler: 'min' | 'max') => void;
+    _noTooltip: () => boolean;
     onFocus: (e: any, handler: 'min' | 'max') => void;
     onBlur: (e: any, handler: 'min' | 'max') => void;
     handleWrapClick: (e: any) => void;

package/lib/es/slider/foundation.js

@@ -612,7 +612,18 @@ export default class SliderFoundation extends BaseFoundation {
         handlePrevent(event);
       }
     };
+    this._noTooltip = () => {
+      const {
+        tipFormatter,
+        tooltipVisible
+      } = this.getProps();
+      return tipFormatter === null || tooltipVisible === false;
+    };
     this.onFocus = (e, handler) => {
+      const noTooltip = this._noTooltip();
+      if (noTooltip) {
+        return;
+      }
       handlePrevent(e);
       const {
         target
@@ -630,6 +641,10 @@ export default class SliderFoundation extends BaseFoundation {
       }
     };
     this.onBlur = (e, handler) => {
+      const noTooltip = this._noTooltip();
+      if (noTooltip) {
+        return;
+      }
       const {
         firstDotFocusVisible,
         secondDotFocusVisible

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

@@ -4,7 +4,6 @@ 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,7 +5,6 @@ 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`,
@@ -27,7 +26,7 @@ const numbers = {
   DEFAULT_ACTIVE_KEY: 1
 };
 const strings = {
-  TYPE_MAP: ['line', 'card', 'button', 'slash'],
+  TYPE_MAP: ['line', 'card', 'button'],
   SIZE: ['small', 'medium', 'large'],
   POSITION_MAP: ['top', 'left']
 };

package/lib/es/tabs/tabs.css

@@ -109,6 +109,66 @@
   color: var(--semi-color-disabled-text);
   border-bottom: none;
 }
+.semi-tabs-tab-single.semi-tabs-tab {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  font-weight: 400;
+  color: var(--semi-color-text-2);
+  user-select: none;
+}
+.semi-tabs-tab-single.semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
+  position: relative;
+  margin-right: 8px;
+  top: 3px;
+  color: var(--semi-color-text-2);
+  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+}
+.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
+  margin-right: 0;
+  font-size: 14px;
+  color: var(--semi-color-text-2);
+  margin-left: 10px;
+  cursor: pointer;
+}
+.semi-tabs-tab-single.semi-tabs-tab:hover {
+  color: var(--semi-color-text-0);
+}
+.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
+  color: var(--semi-color-text-0);
+}
+.semi-tabs-tab-single.semi-tabs-tab:active {
+  color: var(--semi-color-text-0);
+}
+.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
+  color: var(--semi-color-text-0);
+}
+.semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
+  cursor: default;
+  font-weight: 600;
+  color: var(--semi-color-text-0);
+}
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
+  color: var(--semi-color-primary);
+}
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
+  color: var(--semi-color-text-2);
+}
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
+  color: var(--semi-color-text-1);
+}
+.semi-tabs-tab-single.semi-tabs-tab-disabled {
+  cursor: not-allowed;
+  color: var(--semi-color-disabled-text);
+}
+.semi-tabs-tab-single.semi-tabs-tab-disabled:hover {
+  color: var(--semi-color-disabled-text);
+  border-bottom: none;
+}
 .semi-tabs-bar-collapse,
 .semi-tabs-bar-collapse .semi-tabs-bar-overflow-list {
   display: flex;
@@ -192,8 +252,6 @@
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab {
-  font-size: 14px;
-  line-height: 20px;
   padding: 16px 4px 14px 4px;
   transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   border-bottom: 2px solid transparent;
@@ -215,13 +273,9 @@
   margin-right: 24px;
 }
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-small {
-  font-size: 14px;
-  line-height: 20px;
   padding: 8px 4px 6px 4px;
 }
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-medium {
-  font-size: 14px;
-  line-height: 20px;
   padding: 12px 4px 10px 4px;
 }
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active:hover {
@@ -349,17 +403,13 @@
 .semi-tabs-bar-button .semi-tabs-tab {
   padding: 8px 12px;
   border-radius: var(--semi-border-radius-small);
-  background-color: transparent;
   color: var(--semi-color-text-2);
-  font-size: 14px;
-  line-height: 20px;
   border: none;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-tabs-bar-button .semi-tabs-tab:hover {
   border: none;
-  color: var(--semi-color-text-0);
   background-color: var(--semi-color-fill-0);
 }
 .semi-tabs-bar-button .semi-tabs-tab:focus-visible {
@@ -367,7 +417,6 @@
   outline-offset: -2px;
 }
 .semi-tabs-bar-button .semi-tabs-tab:active {
-  color: var(--semi-color-text-0);
   background-color: var(--semi-color-fill-1);
 }
 .semi-tabs-bar-button .semi-tabs-tab-active, .semi-tabs-bar-button .semi-tabs-tab-active:hover {
@@ -375,23 +424,6 @@
   border: none;
   background-color: var(--semi-color-primary-light-default);
 }
-.semi-tabs-bar-slash .semi-tabs-tab {
-  padding: 12px 4px;
-  font-size: 14px;
-  line-height: 20px;
-}
-.semi-tabs-bar-slash .semi-tabs-tab:nth-of-type(1) {
-  padding-left: 0;
-}
-.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type) {
-  margin-right: 16px;
-}
-.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type):after {
-  content: "/";
-  font-size: 14px;
-  margin-left: 16px;
-  color: var(--semi-color-text-2);
-}
 .semi-tabs-content {
   width: 100%;
   padding: 5px 0;
@@ -467,6 +499,145 @@
   animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
   animation-fill-mode: forwards;
 }
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
+  font-size: 14px;
+  padding: 16px 4px 14px 4px;
+  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+  border-bottom: 2px solid transparent;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) {
+  padding-left: 0;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover {
+  border-bottom: 2px solid var(--semi-color-fill-0);
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -1px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active {
+  border-bottom: 2px solid var(--semi-color-fill-1);
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
+  font-size: 14px;
+  padding: 8px 4px 6px 4px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
+  font-size: 14px;
+  padding: 12px 4px 10px 4px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active:hover {
+  border-bottom: 2px solid var(--semi-color-primary);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab {
+  padding: 12px;
+  border-left: 2px solid transparent;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover {
+  border-left: 2px solid var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-0);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active {
+  border-left: 2px solid var(--semi-color-fill-1);
+  background-color: var(--semi-color-fill-1);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small {
+  padding: 6px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium {
+  padding: 10px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active {
+  background-color: var(--semi-color-primary-light-default);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active:hover {
+  border-left: 2px solid var(--semi-color-primary);
+  background-color: var(--semi-color-primary-light-default);
+}
+.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab {
+  border: 1px solid transparent;
+  border-bottom: none;
+  border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
+}
+.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover {
+  border-bottom: none;
+}
+.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active:hover {
+  padding: 8px 12px 7px 12px;
+  border: 1px solid var(--semi-color-border);
+  border-bottom: 1px solid var(--semi-color-bg-1);
+  background: transparent;
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab {
+  border: 1px solid transparent;
+  border-right: none;
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover {
+  border-right: none;
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after {
+  content: " ";
+  width: 1px;
+  position: absolute;
+  right: -1px;
+  top: 0;
+  bottom: 0;
+  background: var(--semi-color-bg-1);
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:hover {
+  padding: 8px 12px;
+  border: 1px solid var(--semi-color-border);
+  border-right: none;
+  background: transparent;
+}
+.semi-tabs-tab-card.semi-tabs-tab {
+  padding: 8px 12px;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+  transform: scale(var(--semi-transform_scale-none));
+}
+.semi-tabs-tab-card.semi-tabs-tab:hover {
+  background: var(--semi-color-fill-0);
+}
+.semi-tabs-tab-card.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
+.semi-tabs-tab-card.semi-tabs-tab:active {
+  background: var(--semi-color-fill-1);
+}
+.semi-tabs-tab-button {
+  border: none;
+}
+.semi-tabs-tab-button.semi-tabs-tab {
+  padding: 8px 12px;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-2);
+  border: none;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+  transform: scale(var(--semi-transform_scale-none));
+}
+.semi-tabs-tab-button.semi-tabs-tab:hover {
+  border: none;
+  background-color: var(--semi-color-fill-0);
+}
+.semi-tabs-tab-button.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
+.semi-tabs-tab-button.semi-tabs-tab:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover {
+  color: var(--semi-color-primary);
+  border: none;
+  background-color: var(--semi-color-primary-light-default);
+}
 
 .semi-rtl .semi-tabs,
 .semi-portal-rtl .semi-tabs {