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

package/lib/cjs/colorPicker/foundation.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+var _convert = require("./utils/convert");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class ColorPickerFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.handleChangeH = (currentColor, newH) => {
+      const hsva = Object.assign(Object.assign({}, currentColor.hsva), {
+        h: newH
+      });
+      const rgba = (0, _convert.hsvaToRgba)(hsva);
+      const hex = (0, _convert.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 = (0, _convert.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 = _convert.hsvaToRgba;
+ColorPickerFoundation.rgbaToHsva = _convert.rgbaToHsva;
+ColorPickerFoundation.rgbaToHex = _convert.rgbaToHex;
+ColorPickerFoundation.hsvaToHex = _convert.hsvaToHex;
+ColorPickerFoundation.hexToRgba = _convert.hexToRgba;
+ColorPickerFoundation.hexToHsva = _convert.hexToHsva;
+ColorPickerFoundation.hsvaToHslaString = _convert.hsvaToHslaString;
+ColorPickerFoundation.hsvaToHslString = _convert.hsvaToHslString;
+ColorPickerFoundation.rgbaStringToHsva = _convert.rgbaStringToHsva;
+ColorPickerFoundation.rgbaStringToRgba = _convert.rgbaStringToRgba;
+var _default = exports.default = ColorPickerFoundation;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,306 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.roundHsva = exports.rgbaToRgb = exports.rgbaToHsva = exports.rgbaToHex = exports.rgbaStringToRgba = exports.rgbaStringToHsva = exports.rgbStringToRgba = exports.rgbStringToHsva = exports.parseHue = exports.hsvaToRgbaString = exports.hsvaToRgba = exports.hsvaToRgbString = exports.hsvaToHsvaString = exports.hsvaToHsvString = exports.hsvaToHsv = exports.hsvaToHslaString = exports.hsvaToHsla = exports.hsvaToHslString = exports.hsvaToHex = exports.hsvaStringToHsva = exports.hsvStringToHsva = exports.hslaToHsva = exports.hslaToHsl = exports.hslaStringToHsva = exports.hslStringToHsva = exports.hexToRgba = exports.hexToHsva = void 0;
+var _round = require("./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)
+};
+const hexToHsva = hex => rgbaToHsva(hexToRgba(hex));
+exports.hexToHsva = hexToHsva;
+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))
+  };
+};
+exports.hexToRgba = hexToRgba;
+const parseHue = function (value) {
+  let unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "deg";
+  return Number(value) * (angleUnits[unit] || 1);
+};
+exports.parseHue = parseHue;
+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)
+  });
+};
+exports.hslaStringToHsva = hslaStringToHsva;
+const hslStringToHsva = exports.hslStringToHsva = hslaStringToHsva;
+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
+  };
+};
+exports.hslaToHsva = hslaToHsva;
+const hsvaToHex = hsva => rgbaToHex(hsvaToRgba(hsva));
+exports.hsvaToHex = hsvaToHex;
+const hsvaToHsla = _ref2 => {
+  let {
+    h,
+    s,
+    v,
+    a
+  } = _ref2;
+  const hh = (200 - s) * v / 100;
+  return {
+    h: (0, _round.round)(h),
+    s: (0, _round.round)(hh > 0 && hh < 200 ? s * v / 100 / (hh <= 100 ? hh : 200 - hh) * 100 : 0),
+    l: (0, _round.round)(hh / 2),
+    a: (0, _round.round)(a, 2)
+  };
+};
+exports.hsvaToHsla = hsvaToHsla;
+const hsvaToHslString = hsva => {
+  const {
+    h,
+    s,
+    l
+  } = hsvaToHsla(hsva);
+  return `hsl(${h}, ${s}%, ${l}%)`;
+};
+exports.hsvaToHslString = hsvaToHslString;
+const hsvaToHsvString = hsva => {
+  const {
+    h,
+    s,
+    v
+  } = roundHsva(hsva);
+  return `hsv(${h}, ${s}%, ${v}%)`;
+};
+exports.hsvaToHsvString = hsvaToHsvString;
+const hsvaToHsvaString = hsva => {
+  const {
+    h,
+    s,
+    v,
+    a
+  } = roundHsva(hsva);
+  return `hsva(${h}, ${s}%, ${v}%, ${a})`;
+};
+exports.hsvaToHsvaString = hsvaToHsvaString;
+const hsvaToHslaString = hsva => {
+  const {
+    h,
+    s,
+    l,
+    a
+  } = hsvaToHsla(hsva);
+  return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+};
+exports.hsvaToHslaString = hsvaToHslaString;
+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: (0, _round.round)([v, c, b, b, d, v][module] * 255),
+    g: (0, _round.round)([d, v, v, c, b, b][module] * 255),
+    b: (0, _round.round)([b, b, d, v, v, c][module] * 255),
+    a: (0, _round.round)(a, 2)
+  };
+};
+exports.hsvaToRgba = hsvaToRgba;
+const hsvaToRgbString = hsva => {
+  const {
+    r,
+    g,
+    b
+  } = hsvaToRgba(hsva);
+  return `rgb(${r}, ${g}, ${b})`;
+};
+exports.hsvaToRgbString = hsvaToRgbString;
+const hsvaToRgbaString = hsva => {
+  const {
+    r,
+    g,
+    b,
+    a
+  } = hsvaToRgba(hsva);
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+exports.hsvaToRgbaString = hsvaToRgbaString;
+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)
+  });
+};
+exports.hsvaStringToHsva = hsvaStringToHsva;
+const hsvStringToHsva = exports.hsvStringToHsva = hsvaStringToHsva;
+const rgbaStringToHsva = rgbaString => {
+  return rgbaToHsva(rgbaStringToRgba(rgbaString));
+};
+exports.rgbaStringToHsva = rgbaStringToHsva;
+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)
+  };
+};
+exports.rgbaStringToRgba = rgbaStringToRgba;
+const rgbStringToRgba = exports.rgbStringToRgba = rgbaStringToRgba;
+const rgbStringToHsva = exports.rgbStringToHsva = rgbaStringToHsva;
+const format = number => {
+  const hex = number.toString(16);
+  return hex.length < 2 ? "0" + hex : hex;
+};
+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);
+  }
+};
+exports.rgbaToHex = rgbaToHex;
+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: (0, _round.round)(60 * (hh < 0 ? hh + 6 : hh)),
+    s: (0, _round.round)(max ? delta / max * 100 : 0),
+    v: (0, _round.round)(max / 255 * 100),
+    a
+  };
+};
+exports.rgbaToHsva = rgbaToHsva;
+const roundHsva = hsva => ({
+  h: (0, _round.round)(hsva.h),
+  s: (0, _round.round)(hsva.s),
+  v: (0, _round.round)(hsva.v),
+  a: (0, _round.round)(hsva.a, 2)
+});
+exports.roundHsva = roundHsva;
+const rgbaToRgb = _ref6 => {
+  let {
+    r,
+    g,
+    b
+  } = _ref6;
+  return {
+    r,
+    g,
+    b
+  };
+};
+exports.rgbaToRgb = rgbaToRgb;
+const hslaToHsl = _ref7 => {
+  let {
+    h,
+    s,
+    l
+  } = _ref7;
+  return {
+    h,
+    s,
+    l
+  };
+};
+exports.hslaToHsl = hslaToHsl;
+const hsvaToHsv = hsva => {
+  const {
+    h,
+    s,
+    v
+  } = roundHsva(hsva);
+  return {
+    h,
+    s,
+    v
+  };
+};
+exports.hsvaToHsv = hsvaToHsv;

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.round = void 0;
+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;
+};
+exports.round = round;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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;
+  }
+};
+var _default = exports.default = split;

package/lib/cjs/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/cjs/datePicker/foundation.js

@@ -265,7 +265,7 @@ class DatePickerFoundation extends _foundation.default {
     const {
       value
     } = this._adapter.getStates();
-    const needResetCachedSelectedValue = !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
+    const needResetCachedSelectedValue = (0, _isNullOrUndefined.default)(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
     if (needResetCachedSelectedValue) {
       this.resetCachedSelectedValue(value);
     }

package/lib/cjs/image/image.css

@@ -90,6 +90,7 @@
   align-items: center;
   padding: 0 24px;
   z-index: 1;
+  pointer-events: none;
 }
 .semi-image-preview-header-title {
   flex: 1;
@@ -102,6 +103,7 @@
   width: 30px;
   height: 30px;
   border-radius: 50%;
+  pointer-events: auto;
 }
 .semi-image-preview-header-close:hover {
   background-color: rgba(0, 0, 0, 0.75);
@@ -166,11 +168,13 @@
 .semi-image-preview-image {
   position: relative;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .semi-image-preview-image-img {
   position: absolute;
   transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
-  transition: transform 300ms 0s;
   z-index: 0;
   user-select: none;
 }