@douyinfe/semi-foundation 2.63.0 → 2.64.0-beta.0

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;

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

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+var _foundation2 = _interopRequireDefault(require("./foundation"));
+var _split = _interopRequireDefault(require("./utils/split"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __awaiter = void 0 && (void 0).__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());
+  });
+};
+class DataPartFoundation extends _foundation.default {
+  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 = (0, _split.default)(value, format);
+        if (result) {
+          return result;
+        }
+      } else if (format === 'hsva') {
+        const result = (0, _split.default)(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 = _foundation2.default.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
+      });
+    };
+  }
+}
+var _default = exports.default = DataPartFoundation;

package/lib/cjs/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;
+}

package/lib/cjs/colorPicker/colorPicker.scss

@@ -0,0 +1,113 @@
+@import "./variables.scss";
+
+
+$module: #{$prefix}-colorPicker;
+
+
+.#{$module} {
+
+    &-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: $radius-colorPicker-topLeft $radius-colorPicker-topRight $radius-colorPicker-bottomLeft $radius-colorPicker-bottomRight;
+        background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+    }
+
+
+    &-handle{
+        border-radius: $radius-colorPicker-handle;
+        border: $width-colorPicker_handle-border solid $color-colorPicker_handle-border;
+        position: absolute;
+        box-sizing: border-box;
+        cursor: grab;
+    }
+
+
+
+
+    &-alphaSlider{
+        position: relative;
+        cursor: pointer;
+        margin-top: $spacing-colorPicker_slider-marginTop;
+        border-radius: $radius-colorPicker-handle;
+        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>');
+
+
+        .#{$module}-alphaSliderInner{
+            width: 100%;
+            height: 100%;
+            border-radius: $radius-colorPicker-alphaSliderInner;
+        }
+
+        .#{$module}-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: $radius-colorPicker-handle;
+            border: $width-colorPicker_handle-border solid $color-colorPicker_handle-border;
+            position: absolute;
+            box-sizing: border-box;
+            cursor: grab;
+
+        }
+
+    }
+
+    &-colorSlider{
+        position: relative;
+        cursor: pointer;
+        margin-top: $spacing-colorPicker_slider-marginTop;
+        border-radius: $radius-colorPicker-handle;
+        background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+    }
+
+
+
+    &-dataPart{
+        margin-top: $spacing-colorPicker_dataPart-marginTop;
+        display: flex;
+        align-items: center;
+        .#{$module}-colorDemoBlock{
+            border-radius: $radius-colorPicker-demoBlock;
+        }
+        .#{$module}-inputGroup{
+            margin-left: $spacing-colorPicker_inputGroup-marginLeft;
+            width: 100%;
+            flex:1;
+            flex-wrap: nowrap;
+            .#{$module}-colorPickerInput{
+                flex: 1;
+            }
+            .#{$module}-colorPickerInputNumber{
+                width: $width-colorPicker-colorPickerInputNumber;
+                .#{$module}-inputNumberSuffix{
+                    font-size: $font-colorPicker_inputNumberSuffix-fontSize;
+                    padding: $spacing-colorPicker_inputNumberSuffix-vertical $spacing-colorPicker_inputNumberSuffix-horizontal;
+                }
+            }
+        }
+        .#{$module}-formatSelect{
+            width: $width-colorPicker-formatSelect;
+        }
+    }
+
+
+    &-popover{
+        padding: $spacing-colorPicker_popover-padding;
+
+        &-defaultChildren{
+            width:$width-colorPicker-defaultTrigger;
+            height: $width-colorPicker-defaultTrigger;
+            border-radius: $radius-colorPicker-defaultTrigger;
+            cursor: pointer;
+        }
+
+    }
+
+
+
+}

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

@@ -0,0 +1,4 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+export { cssClasses };

package/lib/cjs/colorPicker/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cssClasses = void 0;
+var _constants = require("../base/constants");
+const cssClasses = exports.cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-colorPicker`
+};
+const strings = {};

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

@@ -0,0 +1,66 @@
+import { HsvaColor, RgbaColor } from './interface';
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export type ColorValue = {
+    hsva: HsvaColor;
+    rgba: RgbaColor;
+    hex: string;
+};
+export interface ColorPickerProps {
+    eyeDropper?: boolean;
+    defaultValue?: ColorValue;
+    value?: ColorValue;
+    onChange: (value: ColorValue) => void;
+    alpha: boolean;
+    width?: number;
+    height?: number;
+    defaultFormat: 'hex' | 'rgba' | 'hsva';
+}
+export interface ColorPickerState {
+    currentColor: ColorValue;
+}
+export interface ColorPickerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyChange: (value: ColorValue) => void;
+}
+declare class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPickerProps, ColorPickerState>, ColorPickerProps, ColorPickerState> {
+    constructor(adapter: ColorPickerAdapter<ColorPickerProps, ColorPickerState>);
+    static hsvaToRgba: ({ h, s, v, a }: HsvaColor) => RgbaColor;
+    static rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
+    static rgbaToHex: ({ r, g, b, a }: RgbaColor) => string;
+    static hsvaToHex: (hsva: HsvaColor) => string;
+    static hexToRgba: (hex: string) => RgbaColor;
+    static hexToHsva: (hex: string) => HsvaColor;
+    static hsvaToHslaString: (hsva: HsvaColor) => string;
+    static hsvaToHslString: (hsva: HsvaColor) => string;
+    static rgbaStringToHsva: (rgbaString: string) => HsvaColor;
+    static rgbaStringToRgba: (rgbaString: string) => RgbaColor;
+    handleChangeH: (currentColor: ColorValue, newH: number) => void;
+    handleChangeA: (currentColor: ColorValue, newAlpha: number) => void;
+    getCurrentColor: () => any;
+    handleChange: (color: HsvaColor | RgbaColor | string, format: 'hex' | 'rgba' | 'hsva') => void;
+    handleAlphaChangeByHandle: (newAlpha: {
+        a: number;
+    }) => void;
+    handleColorChangeByHandle: (newHue: {
+        h: number;
+    }) => void;
+    getHandlePositionByHSVA: (hsva: HsvaColor, { width, height }: {
+        width: number;
+        height: number;
+    }, handleSize: number) => {
+        x: number;
+        y: number;
+    };
+    getHandlePositionByMousePosition: (mousePosition: {
+        x: number;
+        y: number;
+    }, { width, height }: {
+        width: number;
+        height: number;
+    }, handleSize: number) => {
+        x: number;
+        y: number;
+    };
+    getAlphaHandlePositionByMousePosition: (mousePosition: number, width: number, handleSize: number) => number;
+    getColorHandlePositionByMousePosition: (mousePosition: number, width: number, handleSize: number) => number;
+}
+export default ColorPickerFoundation;