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

package/colorPicker/interface.ts

@@ -0,0 +1,51 @@
+export interface HsvColor {
+    h: number;
+    s: number;
+    v: number
+}
+
+export interface HsvaColor extends HsvColor {
+    a: number
+}
+
+
+export interface RgbColor {
+    r: number;
+    g: number;
+    b: number
+}
+
+export interface RgbaColor extends RgbColor {
+    a: number
+}
+
+export interface HslColor {
+    h: number;
+    s: number;
+    l: number
+}
+
+export interface HslaColor extends HslColor {
+    a: number
+}
+
+export interface HsvColor {
+    h: number;
+    s: number;
+    v: number
+}
+
+export interface HsvaColor extends HsvColor {
+    a: number
+}
+
+export type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
+
+export type AnyColor = string | ObjectColor;
+
+export interface ColorModel<T extends AnyColor> {
+    defaultColor: T;
+    toHsva: (defaultColor: T) => HsvaColor;
+    fromHsva: (hsva: HsvaColor) => T;
+    equal: (first: T, second: T) => boolean
+}

package/colorPicker/utils/convert.ts

@@ -0,0 +1,228 @@
+import { round } from "./round";
+import { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from "../interface";
+/**
+ * Valid CSS <angle> units.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/angle
+ */
+
+/**
+ *  Referrer from https://github.com/web-padawan/vanilla-colorful/blob/master/src/lib/utils/convert.ts
+ */
+const angleUnits: Record<string, number> = {
+    grad: 360 / 400,
+    turn: 360,
+    rad: 360 / (Math.PI * 2),
+};
+
+export const hexToHsva = (hex: string): HsvaColor => rgbaToHsva(hexToRgba(hex));
+
+export const hexToRgba = (hex: string): RgbaColor => {
+    if (hex[0] === "#") hex = hex.substring(1);
+
+    const hexToPercent = (str: string) => {
+        const decimal = parseInt(str, 16);
+        if (!isNaN(decimal)) {
+            const percent = decimal / 255;
+            return percent;
+        }
+        return 1;
+    };
+
+
+    return {
+        r: parseInt(hex.substring(0, 2), 16),
+        g: parseInt(hex.substring(2, 4), 16),
+        b: parseInt(hex.substring(4, 6), 16),
+        a: hexToPercent(hex.substring(6, 8)),
+    };
+};
+
+export const parseHue = (value: string, unit = "deg"): number => {
+    return Number(value) * (angleUnits[unit] || 1);
+};
+
+export const hslaStringToHsva = (hslString: string): HsvaColor => {
+    const matcher = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+    const match = matcher.exec(hslString);
+
+    if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+
+    return hslaToHsva({
+        h: parseHue(match[1], match[2]),
+        s: Number(match[3]),
+        l: Number(match[4]),
+        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
+    });
+};
+
+export const hslStringToHsva = hslaStringToHsva;
+
+export const hslaToHsva = ({ h, s, l, a }: HslaColor): HsvaColor => {
+    s *= (l < 50 ? l : 100 - l) / 100;
+
+    return {
+        h: h,
+        s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,
+        v: l + s,
+        a,
+    };
+};
+
+export const hsvaToHex = (hsva: HsvaColor): string => rgbaToHex(hsvaToRgba(hsva));
+
+export const hsvaToHsla = ({ h, s, v, a }: HsvaColor): HslaColor => {
+    const hh = ((200 - s) * v) / 100;
+
+    return {
+        h: round(h),
+        s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),
+        l: round(hh / 2),
+        a: round(a, 2),
+    };
+};
+
+export const hsvaToHslString = (hsva: HsvaColor): string => {
+    const { h, s, l } = hsvaToHsla(hsva);
+    return `hsl(${h}, ${s}%, ${l}%)`;
+};
+
+export const hsvaToHsvString = (hsva: HsvaColor): string => {
+    const { h, s, v } = roundHsva(hsva);
+    return `hsv(${h}, ${s}%, ${v}%)`;
+};
+
+export const hsvaToHsvaString = (hsva: HsvaColor): string => {
+    const { h, s, v, a } = roundHsva(hsva);
+    return `hsva(${h}, ${s}%, ${v}%, ${a})`;
+};
+
+export const hsvaToHslaString = (hsva: HsvaColor): string => {
+    const { h, s, l, a } = hsvaToHsla(hsva);
+    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+};
+
+export const hsvaToRgba = ({ h, s, v, a }: HsvaColor): RgbaColor => {
+
+
+    h = (h / 360) * 6;
+    s = s / 100;
+    v = v / 100;
+
+    const hh = Math.floor(h),
+        b = v * (1 - s),
+        c = v * (1 - (h - hh) * s),
+        d = v * (1 - (1 - h + hh) * s),
+        module = hh % 6;
+
+    return {
+        r: round([v, c, b, b, d, v][module] * 255),
+        g: round([d, v, v, c, b, b][module] * 255),
+        b: round([b, b, d, v, v, c][module] * 255),
+        a: round(a, 2),
+    };
+};
+
+export const hsvaToRgbString = (hsva: HsvaColor): string => {
+    const { r, g, b } = hsvaToRgba(hsva);
+    return `rgb(${r}, ${g}, ${b})`;
+};
+
+export const hsvaToRgbaString = (hsva: HsvaColor): string => {
+    const { r, g, b, a } = hsvaToRgba(hsva);
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+
+export const hsvaStringToHsva = (hsvString: string): HsvaColor => {
+    const matcher = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+    const match = matcher.exec(hsvString);
+
+    if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+
+    return roundHsva({
+        h: parseHue(match[1], match[2]),
+        s: Number(match[3]),
+        v: Number(match[4]),
+        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
+    });
+};
+
+export const hsvStringToHsva = hsvaStringToHsva;
+
+export const rgbaStringToHsva = (rgbaString: string): HsvaColor => {
+    return rgbaToHsva(rgbaStringToRgba(rgbaString));
+};
+
+export const rgbaStringToRgba = (rgbaString: string): RgbaColor => {
+    const matcher = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+    const match = matcher.exec(rgbaString);
+
+    if (!match) return { r: 0, g: 0, b: 0, a: 1 };
+
+    return {
+        r: Number(match[1]) / (match[2] ? 100 / 255 : 1),
+        g: Number(match[3]) / (match[4] ? 100 / 255 : 1),
+        b: Number(match[5]) / (match[6] ? 100 / 255 : 1),
+        a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1),
+    };
+};
+export const rgbStringToRgba = rgbaStringToRgba;
+
+export const rgbStringToHsva = rgbaStringToHsva;
+
+const format = (number: number) => {
+    const hex = number.toString(16);
+    return hex.length < 2 ? "0" + hex : hex;
+};
+
+export const rgbaToHex = ({ r, g, b, a }: RgbaColor): string => {
+    const percentToHex = (p) => {
+        //const percent = Math.max(0, Math.min(100, p)); // bound percent from 0 to 100
+        const intValue = Math.round(p / 100 * 255); // map percent to nearest integer (0 - 255)
+        const hexValue = intValue.toString(16); // get hexadecimal representation
+        return hexValue.padStart(2, '0').toLowerCase(); // format with leading 0 and upper case characters
+    };
+    if (a === undefined || a === 1) {
+        return "#" + format(r) + format(g) + format(b);
+    } else {
+        return "#" + format(r) + format(g) + format(b) + percentToHex(a * 100);
+    }
+
+};
+
+export const rgbaToHsva = ({ r, g, b, a }: RgbaColor): HsvaColor => {
+
+    const max = Math.max(r, g, b);
+    const delta = max - Math.min(r, g, b);
+
+    // prettier-ignore
+    const hh = delta
+        ? max === r
+            ? (g - b) / delta
+            : max === g
+                ? 2 + (b - r) / delta
+                : 4 + (r - g) / delta
+        : 0;
+
+    return {
+        h: round(60 * (hh < 0 ? hh + 6 : hh)),
+        s: round(max ? (delta / max) * 100 : 0),
+        v: round((max / 255) * 100),
+        a,
+    };
+};
+
+export const roundHsva = (hsva: HsvaColor): HsvaColor => ({
+    h: round(hsva.h),
+    s: round(hsva.s),
+    v: round(hsva.v),
+    a: round(hsva.a, 2),
+});
+
+export const rgbaToRgb = ({ r, g, b }: RgbaColor): RgbColor => ({ r, g, b });
+
+export const hslaToHsl = ({ h, s, l }: HslaColor): HslColor => ({ h, s, l });
+
+export const hsvaToHsv = (hsva: HsvaColor): HsvColor => {
+    const { h, s, v } = roundHsva(hsva);
+    return { h, s, v };
+};

package/colorPicker/utils/round.ts

@@ -0,0 +1,3 @@
+export const round = (number: number, digits = 0, base = Math.pow(10, digits)): number => {
+    return Math.round(base * number) / base;
+};

package/colorPicker/utils/split.ts

@@ -0,0 +1,40 @@
+const split = (str: string, mode: 'rgba' | 'hsva') => {
+    // 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: number[] = [];
+    result[0] = Number(res?.[1]);
+    result[1] = Number(res?.[2]);
+    result[2] = Number(res?.[3]);
+    result[3] = Number((res?.[4] === undefined || res?.[4] === '') ? 1 : res?.[4]);
+
+    const check = (a: number, max: number) => {
+        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/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/image/previewImageFoundation.ts

@@ -209,23 +209,28 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         };
 
         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);

package/lib/cjs/calendar/foundation.js

@@ -153,6 +153,24 @@ class CalendarFoundation extends _foundation.default {
       parsed.day = [];
     }
     parsed.day = parsed.day.map(item => (0, _eventUtil.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/cjs/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/cjs/colorPicker/AlphaSliderFoundation.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class AlphaSliderFoundation extends _foundation.default {
+  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
+      });
+    };
+  }
+}
+var _default = exports.default = AlphaSliderFoundation;

package/lib/cjs/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/cjs/colorPicker/ColorChooseAreaFoundation.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class ColorChooseAreaFoundation extends _foundation.default {
+  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)
+        });
+      }
+    };
+  }
+}
+var _default = exports.default = ColorChooseAreaFoundation;

package/lib/cjs/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/cjs/colorPicker/ColorSliderFoundation.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class ColorSliderFoundation extends _foundation.default {
+  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
+      });
+    };
+  }
+}
+var _default = exports.default = ColorSliderFoundation;