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

package/lib/cjs/tabs/variables.scss

@@ -26,13 +26,9 @@ $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); // 按钮式页签背景颜色 - 按下
 
@@ -69,10 +65,6 @@ $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; // 页签文本字重 - 选中
 
@@ -126,11 +118,6 @@ $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; // 页签内容区水平方向内边距
 
@@ -161,11 +148,5 @@ $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/tooltip/foundation.js

@@ -84,8 +84,9 @@ class Tooltip extends _foundation.default {
       });
       if (trigger === "hover") {
         const checkTriggerIsHover = () => {
+          var _a;
           const triggerDOM = this._adapter.getTriggerDOM();
-          if (trigger && !triggerDOM.matches(":hover")) {
+          if (trigger && !((_a = triggerDOM === null || triggerDOM === void 0 ? void 0 : triggerDOM.matches) === null || _a === void 0 ? void 0 : _a.call(triggerDOM, ":hover"))) {
             this.hide();
           }
           this._adapter.off("portalInserted", checkTriggerIsHover);

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): 0 | 1 | -1;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 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: ("custom" | "auto")[];
+    UPLOAD_TRIGGER: ("auto" | "custom")[];
     VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
     PROMPT_POSITION: readonly ["left", "right", "bottom"];
 };

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

@@ -80,6 +80,7 @@ export interface UploadAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyPastingError: (error: Error | PermissionStatus) => void;
 }
 declare class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<UploadAdapter<P, S>, P, S> {
+    destroyState: boolean;
     constructor(adapter: UploadAdapter<P, S>);
     init(): void;
     destroy(): void;

package/lib/cjs/upload/foundation.js

@@ -50,6 +50,7 @@ const {
 class UploadFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this.destroyState = false;
   }
   init() {
     const {
@@ -69,6 +70,7 @@ class UploadFoundation extends _foundation.default {
     if (!disabled) {
       this.unbindPastingHandler();
     }
+    this.destroyState = true;
   }
   getError(_ref) {
     let {
@@ -577,22 +579,36 @@ class UploadFoundation extends _foundation.default {
       xhr.withCredentials = true;
     }
     if (xhr.upload) {
-      xhr.upload.onprogress = e => this.handleProgress({
-        e,
-        fileInstance
-      });
+      xhr.upload.onprogress = e => {
+        if (!this.destroyState) {
+          this.handleProgress({
+            e,
+            fileInstance
+          });
+        } else {
+          xhr.abort();
+        }
+      };
     }
     // Callback function after upload is completed
-    xhr.onload = e => this.handleOnLoad({
-      e,
-      xhr,
-      fileInstance
-    });
-    xhr.onerror = e => this.handleError({
-      e,
-      xhr,
-      fileInstance
-    });
+    xhr.onload = e => {
+      if (!this.destroyState) {
+        this.handleOnLoad({
+          e,
+          xhr,
+          fileInstance
+        });
+      }
+    };
+    xhr.onerror = e => {
+      if (!this.destroyState) {
+        this.handleError({
+          e,
+          xhr,
+          fileInstance
+        });
+      }
+    };
     // add headers
     let headers = option.headers || {};
     if (typeof headers === 'function') {

package/lib/es/calendar/foundation.js

@@ -146,6 +146,24 @@ export default class CalendarFoundation extends BaseFoundation {
       parsed.day = [];
     }
     parsed.day = parsed.day.map(item => renderDailyEvent(item));
+    // 将 startPos & endPos 完全相同的事件编为一组
+    const sameTimeRangeGroup = parsed.day.reduce((acc, item) => {
+      const key = `${item.startPos}-${item.endPos}`;
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(item);
+      return acc;
+    }, {});
+    // 计算每个 item 的 left 值， 
+    const eventCountMap = {};
+    parsed.day = parsed.day.map(item => {
+      const key = `${item.startPos}-${item.endPos}`;
+      let curCount = eventCountMap[key];
+      eventCountMap[key] = curCount === undefined ? 0 : ++curCount;
+      item.left = curCount !== 0 ? `${curCount / sameTimeRangeGroup[key].length * 100}%` : 0;
+      return item;
+    });
     return parsed;
   }
   parseDailyEvents() {

package/lib/es/colorPicker/AlphaSliderFoundation.d.ts

@@ -0,0 +1,27 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation from "./foundation";
+import { HsvaColor } from "./interface";
+export interface AlphaSliderBaseProps {
+    width: number;
+    height: number;
+    hsva: HsvaColor;
+    handleSize: number;
+    foundation: ColorPickerFoundation;
+}
+export interface AlphaSliderBaseState {
+    handlePosition: number;
+    isHandleGrabbing: boolean;
+}
+export interface AlphaSliderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    getColorPickerFoundation: () => ColorPickerFoundation;
+    getDOM: () => HTMLDivElement;
+}
+declare class AlphaSliderFoundation extends BaseFoundation<AlphaSliderAdapter<AlphaSliderBaseProps, AlphaSliderBaseState>, AlphaSliderBaseProps, AlphaSliderBaseState> {
+    constructor(adapter: AlphaSliderAdapter<AlphaSliderBaseProps, AlphaSliderBaseState>);
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    setHandlePositionByMousePosition: (e: MouseEvent) => void;
+}
+export default AlphaSliderFoundation;

package/lib/es/colorPicker/AlphaSliderFoundation.js

@@ -0,0 +1,33 @@
+import BaseFoundation from "../base/foundation";
+class AlphaSliderFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.handleMouseDown = e => {
+      this._adapter.handleMouseDown(e);
+    };
+    this.handleMouseUp = e => {
+      this._adapter.handleMouseUp(e);
+    };
+    this.setHandlePositionByMousePosition = e => {
+      var _a;
+      const rect = (_a = this._adapter.getDOM()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+      if (!rect) {
+        return;
+      }
+      const {
+        width,
+        handleSize
+      } = this._adapter.getProps();
+      const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+      const mousePosition = e.clientX - rect.x;
+      const handlePosition = colorPickerFoundation.getAlphaHandlePositionByMousePosition(mousePosition, width, handleSize);
+      colorPickerFoundation.handleAlphaChangeByHandle({
+        a: Number(Math.min(Math.max(mousePosition / width, 0), 1).toFixed(2))
+      });
+      this.setState({
+        handlePosition
+      });
+    };
+  }
+}
+export default AlphaSliderFoundation;

package/lib/es/colorPicker/ColorChooseAreaFoundation.d.ts

@@ -0,0 +1,42 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation from "./foundation";
+import { HsvaColor } from "./interface";
+export interface ColorChooseAreaBaseProps {
+    hsva: HsvaColor;
+    onChange: (newColor: {
+        s: number;
+        v: number;
+    }) => void;
+    handleSize: number;
+    width: number;
+    height: number;
+    foundation: ColorPickerFoundation;
+}
+export interface ColorChooseAreaBaseState {
+    handlePosition: {
+        x: number;
+        y: number;
+    };
+    isHandleGrabbing: boolean;
+}
+export interface ColorChooseAreaAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getColorPickerFoundation: () => ColorPickerFoundation;
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    getDOM: () => HTMLDivElement;
+    notifyChange: (newColor: {
+        s: number;
+        v: number;
+    }) => void;
+}
+declare class ColorChooseAreaFoundation extends BaseFoundation<ColorChooseAreaAdapter<ColorChooseAreaBaseProps, ColorChooseAreaBaseState>, ColorChooseAreaBaseProps, ColorChooseAreaBaseState> {
+    constructor(adapter: ColorChooseAreaAdapter<ColorChooseAreaBaseProps, ColorChooseAreaBaseState>);
+    getHandlePositionByHSVA: () => {
+        x: number;
+        y: number;
+    };
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    setHandlePositionByMousePosition: (e: globalThis.MouseEvent) => void;
+}
+export default ColorChooseAreaFoundation;

package/lib/es/colorPicker/ColorChooseAreaFoundation.js

@@ -0,0 +1,55 @@
+import BaseFoundation from "../base/foundation";
+class ColorChooseAreaFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.getHandlePositionByHSVA = () => {
+      const {
+        hsva,
+        width,
+        height,
+        handleSize
+      } = this.getProps();
+      return this._adapter.getColorPickerFoundation().getHandlePositionByHSVA(hsva, {
+        width: width,
+        height: height
+      }, handleSize);
+    };
+    this.handleMouseDown = e => {
+      this._adapter.handleMouseDown(e);
+    };
+    this.handleMouseUp = e => {
+      this._adapter.handleMouseUp(e);
+    };
+    this.setHandlePositionByMousePosition = e => {
+      var _a;
+      const rect = (_a = this._adapter.getDOM()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+      if (!rect) {
+        return;
+      }
+      const mousePosition = {
+        x: e.clientX - rect.x,
+        y: e.clientY - rect.y
+      };
+      const {
+        width,
+        height,
+        handleSize
+      } = this.getProps();
+      const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+      const handlePosition = colorPickerFoundation.getHandlePositionByMousePosition(mousePosition, {
+        width,
+        height
+      }, handleSize);
+      if (handlePosition) {
+        this.setState({
+          handlePosition
+        });
+        this._adapter.notifyChange({
+          s: Math.round(mousePosition.x / width * 100),
+          v: Math.round(100 - Math.min(Math.max(mousePosition.y / height, 0), 1) * 100)
+        });
+      }
+    };
+  }
+}
+export default ColorChooseAreaFoundation;

package/lib/es/colorPicker/ColorSliderFoundation.d.ts

@@ -0,0 +1,26 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation from "./foundation";
+export interface ColorSliderBaseProps {
+    width: number;
+    height: number;
+    hue: number;
+    handleSize: number;
+    foundation: ColorPickerFoundation;
+}
+export interface ColorSliderBaseState {
+    handlePosition: number;
+    isHandleGrabbing: boolean;
+}
+export interface ColorSliderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    getColorPickerFoundation: () => ColorPickerFoundation;
+    getDOM: () => HTMLDivElement;
+}
+declare class ColorSliderFoundation extends BaseFoundation<ColorSliderAdapter<ColorSliderBaseProps, ColorSliderBaseState>, ColorSliderBaseProps, ColorSliderBaseState> {
+    constructor(adapter: ColorSliderAdapter<ColorSliderBaseProps, ColorSliderBaseState>);
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    setHandlePositionByMousePosition: (e: MouseEvent) => void;
+}
+export default ColorSliderFoundation;

package/lib/es/colorPicker/ColorSliderFoundation.js

@@ -0,0 +1,33 @@
+import BaseFoundation from "../base/foundation";
+class ColorSliderFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.handleMouseDown = e => {
+      this._adapter.handleMouseDown(e);
+    };
+    this.handleMouseUp = e => {
+      this._adapter.handleMouseUp(e);
+    };
+    this.setHandlePositionByMousePosition = e => {
+      var _a;
+      const rect = (_a = this._adapter.getDOM()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+      if (!rect) {
+        return;
+      }
+      const {
+        width,
+        handleSize
+      } = this._adapter.getProps();
+      const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+      const mousePosition = e.clientX - rect.x;
+      colorPickerFoundation.handleColorChangeByHandle({
+        h: Math.round(Math.min(Math.max(mousePosition / width, 0), 1) * 360)
+      });
+      const handlePosition = colorPickerFoundation.getColorHandlePositionByMousePosition(mousePosition, width, handleSize);
+      this.setState({
+        handlePosition
+      });
+    };
+  }
+}
+export default ColorSliderFoundation;

package/lib/es/colorPicker/DataPartFoundation.d.ts

@@ -0,0 +1,28 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation, { ColorPickerProps } from "./foundation";
+import { HsvaColor, RgbaColor } from "./interface";
+type Value = ColorPickerProps['value'];
+export interface DataPartBaseProps {
+    currentColor: Value;
+    defaultFormat: 'hex' | 'rgba' | 'hsva';
+    width: number;
+    alpha?: boolean;
+    foundation: ColorPickerFoundation;
+    eyeDropper: boolean;
+}
+export interface DataPartBaseState {
+    format: 'hex' | 'rgba' | 'hsva';
+    inputValue: string;
+}
+export interface DataPartAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getColorPickerFoundation: () => ColorPickerFoundation;
+}
+declare class DataPartFoundation extends BaseFoundation<DataPartAdapter<DataPartBaseProps, DataPartBaseState>, DataPartBaseProps, DataPartBaseState> {
+    constructor(adapter: DataPartAdapter<DataPartBaseProps, DataPartBaseState>);
+    getInputValue: () => string;
+    getValueByInputValue: (value: string) => string | false | HsvaColor | RgbaColor;
+    handlePickValueWithStraw: () => Promise<void>;
+    handleInputValueChange: (value: string) => void;
+    handleFormatChange: (format: DataPartBaseState['format']) => void;
+}
+export default DataPartFoundation;

package/lib/es/colorPicker/DataPartFoundation.js

@@ -0,0 +1,108 @@
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+import BaseFoundation from "../base/foundation";
+import ColorPickerFoundation from "./foundation";
+import split from "./utils/split";
+class DataPartFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.getInputValue = () => {
+      const {
+        currentColor
+      } = this._adapter.getProps();
+      const {
+        format
+      } = this._adapter.getStates();
+      const rgba = currentColor.rgba;
+      const hsva = currentColor.hsva;
+      const hex = currentColor.hex;
+      if (format === 'rgba') {
+        return `${rgba.r},${rgba.g},${rgba.b}`;
+      } else if (format === 'hsva') {
+        return `${hsva.h},${hsva.s},${hsva.v}`;
+      } else {
+        return hex.slice(0, 7);
+      }
+    };
+    this.getValueByInputValue = value => {
+      const {
+        format
+      } = this.getStates();
+      if (format === 'rgba') {
+        const result = split(value, format);
+        if (result) {
+          return result;
+        }
+      } else if (format === 'hsva') {
+        const result = split(value, format);
+        if (result) {
+          return result;
+        }
+      } else if (format === 'hex') {
+        // hack chrome bug, format mismatch with w3c.
+        if (!value.startsWith('#')) {
+          value = '#' + value;
+        }
+        if (/#[\d\w]{6,8}/.test(value)) {
+          return value;
+        }
+      }
+      return false;
+    };
+    this.handlePickValueWithStraw = () => __awaiter(this, void 0, void 0, function* () {
+      const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+      if (!window['EyeDropper']) {
+        return;
+      }
+      //@ts-ignore
+      const eyeDropper = new EyeDropper();
+      try {
+        const result = yield eyeDropper.open();
+        const color = result['sRGBHex'];
+        if (color.startsWith("#")) {
+          colorPickerFoundation.handleChange(color, 'hex');
+        } else if (color.startsWith('rgba')) {
+          const rgba = ColorPickerFoundation.rgbaStringToRgba(color);
+          rgba.a = 1;
+          colorPickerFoundation.handleChange(rgba, 'rgba');
+        }
+      } catch (e) {}
+    });
+    this.handleInputValueChange = value => {
+      this._adapter.setState({
+        inputValue: value
+      });
+    };
+    this.handleFormatChange = format => {
+      this._adapter.setState({
+        format
+      });
+    };
+  }
+}
+export default DataPartFoundation;

package/lib/es/colorPicker/colorPicker.css

@@ -0,0 +1,84 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-colorPicker-colorChooseArea {
+  /**
+   *  Referrer from https://github.com/web-padawan/vanilla-colorful/blob/5d219ee360ae2f29534864b28ca9e6074233b9ce/src/lib/styles/saturation.css
+   */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+  position: relative;
+  flex-grow: 1;
+  border-color: transparent;
+  border-radius: 8px 8px 0px 0px;
+  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+.semi-colorPicker-handle {
+  border-radius: var(--semi-border-radius-full);
+  border: 2px solid var(--semi-color-white);
+  position: absolute;
+  box-sizing: border-box;
+  cursor: grab;
+}
+.semi-colorPicker-alphaSlider {
+  position: relative;
+  cursor: pointer;
+  margin-top: 6px;
+  border-radius: var(--semi-border-radius-full);
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+}
+.semi-colorPicker-alphaSlider .semi-colorPicker-alphaSliderInner {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.semi-colorPicker-alphaSlider .semi-colorPicker-alphaHandle {
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+  border-radius: var(--semi-border-radius-full);
+  border: 2px solid var(--semi-color-white);
+  position: absolute;
+  box-sizing: border-box;
+  cursor: grab;
+}
+.semi-colorPicker-colorSlider {
+  position: relative;
+  cursor: pointer;
+  margin-top: 6px;
+  border-radius: var(--semi-border-radius-full);
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+}
+.semi-colorPicker-dataPart {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-colorDemoBlock {
+  border-radius: 4px;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup {
+  margin-left: 4px;
+  width: 100%;
+  flex: 1;
+  flex-wrap: nowrap;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInput {
+  flex: 1;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInputNumber {
+  width: 58px;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInputNumber .semi-colorPicker-inputNumberSuffix {
+  font-size: 14px;
+  padding: 4px 4px;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-formatSelect {
+  width: 80px;
+}
+.semi-colorPicker-popover {
+  padding: 8px;
+}
+.semi-colorPicker-popover-defaultChildren {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+}