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

package/lib/es/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/es/colorPicker/constants.d.ts

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

package/lib/es/colorPicker/constants.js

@@ -0,0 +1,6 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-colorPicker`
+};
+const strings = {};
+export { cssClasses };

package/lib/es/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;

package/lib/es/colorPicker/foundation.js

@@ -0,0 +1,143 @@
+import BaseFoundation from '../base/foundation';
+import { hexToHsva, hexToRgba, hsvaToHex, hsvaToHslaString, hsvaToHslString, hsvaToRgba, rgbaStringToHsva, rgbaStringToRgba, rgbaToHex, rgbaToHsva } from './utils/convert';
+class ColorPickerFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.handleChangeH = (currentColor, newH) => {
+      const hsva = Object.assign(Object.assign({}, currentColor.hsva), {
+        h: newH
+      });
+      const rgba = hsvaToRgba(hsva);
+      const hex = hsvaToHex(hsva);
+      const newCurrentColor = {
+        rgba,
+        hsva,
+        hex
+      };
+      this._adapter.notifyChange(newCurrentColor);
+      if (!this.getProp("value")) {
+        this._adapter.setState({
+          currentColor: newCurrentColor
+        });
+      }
+    };
+    this.handleChangeA = (currentColor, newAlpha) => {
+      let alpha = this._adapter.getProp('alpha');
+      if (!alpha) {
+        newAlpha = 1;
+      }
+      const rgba = Object.assign(Object.assign({}, currentColor.rgba), {
+        a: newAlpha
+      });
+      const hex = rgbaToHex(rgba);
+      currentColor = {
+        rgba,
+        hex: alpha ? hex : hex.slice(0, 7),
+        hsva: Object.assign(Object.assign({}, currentColor.hsva), {
+          a: newAlpha
+        })
+      };
+      this._adapter.notifyChange(currentColor);
+      if (!this.getProp("value")) {
+        this._adapter.setState({
+          currentColor: currentColor
+        });
+      }
+    };
+    this.getCurrentColor = () => {
+      const value = this.getProp("value");
+      const currentColor = this.getState("currentColor");
+      return value || currentColor;
+    };
+    this.handleChange = (color, format) => {
+      let currentColor;
+      if (format === 'hsva') {
+        currentColor = {
+          hsva: color,
+          rgba: ColorPickerFoundation.hsvaToRgba(color),
+          hex: ColorPickerFoundation.hsvaToHex(color)
+        };
+      } else if (format === 'rgba') {
+        currentColor = {
+          rgba: color,
+          hsva: ColorPickerFoundation.rgbaToHsva(color),
+          hex: ColorPickerFoundation.rgbaToHex(color)
+        };
+      } else if (format === 'hex') {
+        currentColor = {
+          hex: color,
+          hsva: ColorPickerFoundation.hexToHsva(color),
+          rgba: ColorPickerFoundation.hexToRgba(color)
+        };
+      } else {
+        throw new Error('format error');
+      }
+      this._adapter.notifyChange(currentColor);
+      if (!this.getProp("value")) {
+        this._adapter.setState({
+          currentColor: currentColor
+        });
+      }
+    };
+    this.handleAlphaChangeByHandle = newAlpha => {
+      this.handleChangeA(this.getCurrentColor(), newAlpha.a);
+    };
+    this.handleColorChangeByHandle = newHue => {
+      this.handleChangeH(this.getCurrentColor(), newHue.h);
+    };
+    this.getHandlePositionByHSVA = (hsva, _ref, handleSize) => {
+      let {
+        width,
+        height
+      } = _ref;
+      const defaultColorPosition = {
+        x: hsva.s / 100 * width,
+        y: (1 - hsva.v / 100) * height
+      };
+      return {
+        x: defaultColorPosition.x - handleSize / 2,
+        y: defaultColorPosition.y - handleSize / 2
+      };
+    };
+    this.getHandlePositionByMousePosition = (mousePosition, _ref2, handleSize) => {
+      let {
+        width,
+        height
+      } = _ref2;
+      if (mousePosition.x > width || mousePosition.x < 0) {
+        return null;
+      }
+      if (mousePosition.y > height || mousePosition.y < 0) {
+        return null;
+      }
+      const handlePosition = {
+        x: mousePosition.x - handleSize / 2,
+        y: mousePosition.y - handleSize / 2
+      };
+      return handlePosition;
+    };
+    this.getAlphaHandlePositionByMousePosition = (mousePosition, width, handleSize) => {
+      if (mousePosition < 0 || mousePosition > width) {
+        return null;
+      }
+      return mousePosition - handleSize / 2;
+    };
+    this.getColorHandlePositionByMousePosition = (mousePosition, width, handleSize) => {
+      if (mousePosition < 0 || mousePosition > width) {
+        return null;
+      }
+      return mousePosition - handleSize / 2;
+    };
+  }
+}
+ColorPickerFoundation.hsvaToRgba = hsvaToRgba;
+ColorPickerFoundation.rgbaToHsva = rgbaToHsva;
+ColorPickerFoundation.rgbaToHex = rgbaToHex;
+ColorPickerFoundation.hsvaToHex = hsvaToHex;
+ColorPickerFoundation.hexToRgba = hexToRgba;
+ColorPickerFoundation.hexToHsva = hexToHsva;
+ColorPickerFoundation.hsvaToHslaString = hsvaToHslaString;
+ColorPickerFoundation.hsvaToHslString = hsvaToHslString;
+ColorPickerFoundation.rgbaStringToHsva = rgbaStringToHsva;
+ColorPickerFoundation.rgbaStringToRgba = rgbaStringToRgba;
+export default ColorPickerFoundation;

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

@@ -0,0 +1,40 @@
+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/lib/es/colorPicker/interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,28 @@
+import { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from "../interface";
+export declare const hexToHsva: (hex: string) => HsvaColor;
+export declare const hexToRgba: (hex: string) => RgbaColor;
+export declare const parseHue: (value: string, unit?: string) => number;
+export declare const hslaStringToHsva: (hslString: string) => HsvaColor;
+export declare const hslStringToHsva: (hslString: string) => HsvaColor;
+export declare const hslaToHsva: ({ h, s, l, a }: HslaColor) => HsvaColor;
+export declare const hsvaToHex: (hsva: HsvaColor) => string;
+export declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor;
+export declare const hsvaToHslString: (hsva: HsvaColor) => string;
+export declare const hsvaToHsvString: (hsva: HsvaColor) => string;
+export declare const hsvaToHsvaString: (hsva: HsvaColor) => string;
+export declare const hsvaToHslaString: (hsva: HsvaColor) => string;
+export declare const hsvaToRgba: ({ h, s, v, a }: HsvaColor) => RgbaColor;
+export declare const hsvaToRgbString: (hsva: HsvaColor) => string;
+export declare const hsvaToRgbaString: (hsva: HsvaColor) => string;
+export declare const hsvaStringToHsva: (hsvString: string) => HsvaColor;
+export declare const hsvStringToHsva: (hsvString: string) => HsvaColor;
+export declare const rgbaStringToHsva: (rgbaString: string) => HsvaColor;
+export declare const rgbaStringToRgba: (rgbaString: string) => RgbaColor;
+export declare const rgbStringToRgba: (rgbaString: string) => RgbaColor;
+export declare const rgbStringToHsva: (rgbaString: string) => HsvaColor;
+export declare const rgbaToHex: ({ r, g, b, a }: RgbaColor) => string;
+export declare const rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
+export declare const roundHsva: (hsva: HsvaColor) => HsvaColor;
+export declare const rgbaToRgb: ({ r, g, b }: RgbaColor) => RgbColor;
+export declare const hslaToHsl: ({ h, s, l }: HslaColor) => HslColor;
+export declare const hsvaToHsv: (hsva: HsvaColor) => HsvColor;

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

@@ -0,0 +1,277 @@
+import { round } from "./round";
+/**
+ * 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 = {
+  grad: 360 / 400,
+  turn: 360,
+  rad: 360 / (Math.PI * 2)
+};
+export const hexToHsva = hex => rgbaToHsva(hexToRgba(hex));
+export const hexToRgba = hex => {
+  if (hex[0] === "#") hex = hex.substring(1);
+  const hexToPercent = str => {
+    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 = function (value) {
+  let unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "deg";
+  return Number(value) * (angleUnits[unit] || 1);
+};
+export const hslaStringToHsva = hslString => {
+  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 = _ref => {
+  let {
+    h,
+    s,
+    l,
+    a
+  } = _ref;
+  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 => rgbaToHex(hsvaToRgba(hsva));
+export const hsvaToHsla = _ref2 => {
+  let {
+    h,
+    s,
+    v,
+    a
+  } = _ref2;
+  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 => {
+  const {
+    h,
+    s,
+    l
+  } = hsvaToHsla(hsva);
+  return `hsl(${h}, ${s}%, ${l}%)`;
+};
+export const hsvaToHsvString = hsva => {
+  const {
+    h,
+    s,
+    v
+  } = roundHsva(hsva);
+  return `hsv(${h}, ${s}%, ${v}%)`;
+};
+export const hsvaToHsvaString = hsva => {
+  const {
+    h,
+    s,
+    v,
+    a
+  } = roundHsva(hsva);
+  return `hsva(${h}, ${s}%, ${v}%, ${a})`;
+};
+export const hsvaToHslaString = hsva => {
+  const {
+    h,
+    s,
+    l,
+    a
+  } = hsvaToHsla(hsva);
+  return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+};
+export const hsvaToRgba = _ref3 => {
+  let {
+    h,
+    s,
+    v,
+    a
+  } = _ref3;
+  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 => {
+  const {
+    r,
+    g,
+    b
+  } = hsvaToRgba(hsva);
+  return `rgb(${r}, ${g}, ${b})`;
+};
+export const hsvaToRgbaString = hsva => {
+  const {
+    r,
+    g,
+    b,
+    a
+  } = hsvaToRgba(hsva);
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+export const hsvaStringToHsva = hsvString => {
+  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 => {
+  return rgbaToHsva(rgbaStringToRgba(rgbaString));
+};
+export const rgbaStringToRgba = rgbaString => {
+  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 => {
+  const hex = number.toString(16);
+  return hex.length < 2 ? "0" + hex : hex;
+};
+export const rgbaToHex = _ref4 => {
+  let {
+    r,
+    g,
+    b,
+    a
+  } = _ref4;
+  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 = _ref5 => {
+  let {
+    r,
+    g,
+    b,
+    a
+  } = _ref5;
+  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 => ({
+  h: round(hsva.h),
+  s: round(hsva.s),
+  v: round(hsva.v),
+  a: round(hsva.a, 2)
+});
+export const rgbaToRgb = _ref6 => {
+  let {
+    r,
+    g,
+    b
+  } = _ref6;
+  return {
+    r,
+    g,
+    b
+  };
+};
+export const hslaToHsl = _ref7 => {
+  let {
+    h,
+    s,
+    l
+  } = _ref7;
+  return {
+    h,
+    s,
+    l
+  };
+};
+export const hsvaToHsv = hsva => {
+  const {
+    h,
+    s,
+    v
+  } = roundHsva(hsva);
+  return {
+    h,
+    s,
+    v
+  };
+};

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

@@ -0,0 +1 @@
+export declare const round: (number: number, digits?: number, base?: number) => number;

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

@@ -0,0 +1,5 @@
+export const round = function (number) {
+  let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let base = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Math.pow(10, digits);
+  return Math.round(base * number) / base;
+};