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

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/image/previewImageFoundation.js

@@ -165,24 +165,28 @@ class PreviewImageFoundation extends _foundation.default {
         height: imageBound.height * changeScale
       };
       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);
       this.setState({

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

@@ -202,6 +202,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
     _handleHomeKey: (handler: 'min' | 'max') => any;
     _handleEndKey: (handler: 'min' | 'max') => any;
     handleKeyDown: (event: any, handler: 'min' | 'max') => void;
+    _noTooltip: () => boolean;
     onFocus: (e: any, handler: 'min' | 'max') => void;
     onBlur: (e: any, handler: 'min' | 'max') => void;
     handleWrapClick: (e: any) => void;

package/lib/cjs/slider/foundation.js

@@ -619,7 +619,18 @@ class SliderFoundation extends _foundation.default {
         (0, _a11y.handlePrevent)(event);
       }
     };
+    this._noTooltip = () => {
+      const {
+        tipFormatter,
+        tooltipVisible
+      } = this.getProps();
+      return tipFormatter === null || tooltipVisible === false;
+    };
     this.onFocus = (e, handler) => {
+      const noTooltip = this._noTooltip();
+      if (noTooltip) {
+        return;
+      }
       (0, _a11y.handlePrevent)(e);
       const {
         target
@@ -637,6 +648,10 @@ class SliderFoundation extends _foundation.default {
       }
     };
     this.onBlur = (e, handler) => {
+      const noTooltip = this._noTooltip();
+      if (noTooltip) {
+        return;
+      }
       const {
         firstDotFocusVisible,
         secondDotFocusVisible

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

@@ -4,7 +4,6 @@ declare const cssClasses: {
     TABS_BAR_LINE: string;
     TABS_BAR_CARD: string;
     TABS_BAR_BUTTON: string;
-    TABS_BAR_SLASH: string;
     TABS_BAR_EXTRA: string;
     TABS_TAB: string;
     TABS_TAB_ACTIVE: string;

package/lib/cjs/tabs/constants.js

@@ -11,7 +11,6 @@ const cssClasses = exports.cssClasses = {
   TABS_BAR_LINE: `${_constants.BASE_CLASS_PREFIX}-tabs-bar-line`,
   TABS_BAR_CARD: `${_constants.BASE_CLASS_PREFIX}-tabs-bar-card`,
   TABS_BAR_BUTTON: `${_constants.BASE_CLASS_PREFIX}-tabs-bar-button`,
-  TABS_BAR_SLASH: `${_constants.BASE_CLASS_PREFIX}-tabs-bar-slash`,
   TABS_BAR_EXTRA: `${_constants.BASE_CLASS_PREFIX}-tabs-bar-extra`,
   TABS_TAB: `${_constants.BASE_CLASS_PREFIX}-tabs-tab`,
   TABS_TAB_ACTIVE: `${_constants.BASE_CLASS_PREFIX}-tabs-tab-active`,
@@ -33,7 +32,7 @@ const numbers = exports.numbers = {
   DEFAULT_ACTIVE_KEY: 1
 };
 const strings = exports.strings = {
-  TYPE_MAP: ['line', 'card', 'button', 'slash'],
+  TYPE_MAP: ['line', 'card', 'button'],
   SIZE: ['small', 'medium', 'large'],
   POSITION_MAP: ['top', 'left']
 };