@tendaui/components 1.3.0 → 1.3.1

package/color-picker/utils/color-picker/format.ts

@@ -1,90 +1,90 @@
-import Color from "./color";
-import { ALPHA_FORMAT_MAP, COLOR_FORMAT_INPUTS, FORMATS } from "./constants";
-import type { AlphaConvertibleFormat, BasicColorFormat, ColorFormat } from "./types";
-
-/**
- * 兜底处理用户传入的格式，例如：
- * - 传入 `RGB`， 但 `enableAlpha` ，则返回 `RGBA`
- */
-export const initColorFormat = (format: ColorFormat, enableAlpha: boolean) => {
-  if (enableAlpha && format in ALPHA_FORMAT_MAP) {
-    return format in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[format as AlphaConvertibleFormat] : format;
-  }
-  return format as BasicColorFormat;
-};
-
-/**
- * 获取不同格式的输入输出值
- * - encode：将字符串转换为单独的颜色值，例如 `{r: 255, g: 255, b: 255}`
- * - decode：获取完整的颜色字符串，例如 `rgb(255, 255, 255)`
- */
-export const getColorFormatMap = (color: Color, type: "encode" | "decode") => {
-  if (type === "encode") {
-    return {
-      HSV: color.getHsva(),
-      HSVA: color.getHsva(),
-      HSL: color.getHsla(),
-      HSLA: color.getHsla(),
-      RGB: color.getRgba(),
-      RGBA: color.getRgba(),
-      CMYK: color.getCmyk(),
-      CSS: {
-        css: color.css
-      },
-      HEX: {
-        hex: color.hex
-      },
-      HEX8: {
-        hex: color.hex8 // 为了减少转换 hex8 的 key 也对应 hex
-      }
-    };
-  }
-
-  // decode
-  return color.getFormatsColorMap();
-};
-
-/**
- * 获取下拉框的格式选项
- */
-export const getColorFormatOptions = (enableAlpha: boolean) =>
-  enableAlpha
-    ? FORMATS.map((item) => (item in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[item as AlphaConvertibleFormat] : item))
-    : FORMATS;
-
-/**
- * 获取当前格式的输入框配置
- */
-export const getColorFormatInputs = (format: ColorFormat = "RGB", enableAlpha: boolean) => {
-  let finalFormat;
-
-  /* 为了减少 `ALPHA_FORMAT_MAP` 中的重复代码
-     `RGBA/HEX8/HSLA/HSVA` 会被转换为 `RGB/HEX/HSL/HSV` 后再匹配
-     但在下一步会 push 一个代表透明度的输入框 */
-  if (enableAlpha) {
-    finalFormat =
-      Object.keys(ALPHA_FORMAT_MAP).find(
-        (key) => key in ALPHA_FORMAT_MAP && ALPHA_FORMAT_MAP[key as AlphaConvertibleFormat] === format
-      ) || format;
-  } else {
-    finalFormat = format;
-  }
-
-  if (!COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]) return [];
-
-  const configs = [...COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]];
-
-  // CMYK 格式不支持透明度
-  if (enableAlpha && format !== "CMYK") {
-    configs.push({
-      type: "inputNumber",
-      key: "a",
-      min: 0,
-      max: 100,
-      format: (value: number) => `${value}%`,
-      flex: 1.15
-    });
-  }
-
-  return configs;
-};
+import Color from "./color";
+import { ALPHA_FORMAT_MAP, COLOR_FORMAT_INPUTS, FORMATS } from "./constants";
+import type { AlphaConvertibleFormat, BasicColorFormat, ColorFormat } from "./types";
+
+/**
+ * 兜底处理用户传入的格式，例如：
+ * - 传入 `RGB`， 但 `enableAlpha` ，则返回 `RGBA`
+ */
+export const initColorFormat = (format: ColorFormat, enableAlpha: boolean) => {
+  if (enableAlpha && format in ALPHA_FORMAT_MAP) {
+    return format in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[format as AlphaConvertibleFormat] : format;
+  }
+  return format as BasicColorFormat;
+};
+
+/**
+ * 获取不同格式的输入输出值
+ * - encode：将字符串转换为单独的颜色值，例如 `{r: 255, g: 255, b: 255}`
+ * - decode：获取完整的颜色字符串，例如 `rgb(255, 255, 255)`
+ */
+export const getColorFormatMap = (color: Color, type: "encode" | "decode") => {
+  if (type === "encode") {
+    return {
+      HSV: color.getHsva(),
+      HSVA: color.getHsva(),
+      HSL: color.getHsla(),
+      HSLA: color.getHsla(),
+      RGB: color.getRgba(),
+      RGBA: color.getRgba(),
+      CMYK: color.getCmyk(),
+      CSS: {
+        css: color.css
+      },
+      HEX: {
+        hex: color.hex
+      },
+      HEX8: {
+        hex: color.hex8 // 为了减少转换 hex8 的 key 也对应 hex
+      }
+    };
+  }
+
+  // decode
+  return color.getFormatsColorMap();
+};
+
+/**
+ * 获取下拉框的格式选项
+ */
+export const getColorFormatOptions = (enableAlpha: boolean) =>
+  enableAlpha
+    ? FORMATS.map((item) => (item in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[item as AlphaConvertibleFormat] : item))
+    : FORMATS;
+
+/**
+ * 获取当前格式的输入框配置
+ */
+export const getColorFormatInputs = (format: ColorFormat = "RGB", enableAlpha: boolean) => {
+  let finalFormat;
+
+  /* 为了减少 `ALPHA_FORMAT_MAP` 中的重复代码
+     `RGBA/HEX8/HSLA/HSVA` 会被转换为 `RGB/HEX/HSL/HSV` 后再匹配
+     但在下一步会 push 一个代表透明度的输入框 */
+  if (enableAlpha) {
+    finalFormat =
+      Object.keys(ALPHA_FORMAT_MAP).find(
+        (key) => key in ALPHA_FORMAT_MAP && ALPHA_FORMAT_MAP[key as AlphaConvertibleFormat] === format
+      ) || format;
+  } else {
+    finalFormat = format;
+  }
+
+  if (!COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]) return [];
+
+  const configs = [...COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]];
+
+  // CMYK 格式不支持透明度
+  if (enableAlpha && format !== "CMYK") {
+    configs.push({
+      type: "inputNumber",
+      key: "a",
+      min: 0,
+      max: 100,
+      format: (value: number) => `${value}%`,
+      flex: 1.15
+    });
+  }
+
+  return configs;
+};

package/color-picker/utils/color-picker/gradient.ts

@@ -1,237 +1,237 @@
-import { isString, isNull } from "lodash-es";
-
-/**
- * 用于反解析渐变字符串为对象
- * https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex
- */
-import tinyColor from "tinycolor2";
-
-/**
- * Utility combine multiple regular expressions.
- *
- * @param {RegExp[]|string[]} regexpList List of regular expressions or strings.
- * @param {string} flags Normal RegExp flags.
- */
-const combineRegExp = (regexpList: (string | RegExp)[], flags: string): RegExp => {
-  let source = "";
-  for (let i = 0; i < regexpList.length; i++) {
-    if (isString(regexpList[i])) {
-      source += regexpList[i];
-    } else {
-      source += (regexpList[i] as RegExp).source;
-    }
-  }
-  return new RegExp(source, flags);
-};
-
-interface RegExpLib {
-  gradientSearch: RegExp;
-  colorStopSearch: RegExp;
-}
-
-interface ColorStop {
-  color: string;
-  position?: string;
-}
-
-interface ParseGradientResult {
-  original: string;
-  colorStopList?: ColorStop[];
-  line?: string;
-  angle?: string;
-  sideCorner?: string;
-}
-
-/**
- * Generate the required regular expressions once.
- *
- * Regular Expressions are easier to manage this way and can be well described.
- *
- * @result {object} Object containing regular expressions.
- */
-const generateRegExp = (): RegExpLib => {
-  // Note any variables with "Capture" in name include capturing bracket set(s).
-  const searchFlags = "gi"; // ignore case for angles, "rgb" etc
-  const rAngle = /(?:[+-]?\d*\.?\d+)(?:deg|grad|rad|turn)/; // Angle +ive, -ive and angle types
-  // optional 2nd part
-  const rSideCornerCapture = /to\s+((?:(?:left|right|top|bottom)(?:\s+(?:top|bottom|left|right))?))/;
-  const rComma = /\s*,\s*/; // Allow space around comma.
-  const rColorHex = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/; // 3 or 6 character form
-  const rDigits3 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)/;
-  const // "(1, 2, 3)"
-    rDigits4 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*,\s*\d*\.?\d+\)/;
-  const // "(1, 2, 3, 4)"
-    rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/;
-  const // ".9", "-5px", "100%".
-    rKeyword = /[_a-z-][_a-z0-9-]*/;
-  const // "red", "transparent".
-    rColor = combineRegExp(
-      ["(?:", rColorHex, "|", "(?:rgb|hsl)", rDigits3, "|", "(?:rgba|hsla)", rDigits4, "|", rKeyword, ")"],
-      ""
-    );
-  const rColorStop = combineRegExp([rColor, "(?:\\s+", rValue, "(?:\\s+", rValue, ")?)?"], "");
-  const // Single Color Stop, optional %, optional length.
-    rColorStopList = combineRegExp(["(?:", rColorStop, rComma, ")*", rColorStop], "");
-  const // List of color stops min 1.
-    rLineCapture = combineRegExp(["(?:(", rAngle, ")|", rSideCornerCapture, ")"], "");
-  const // Angle or SideCorner
-    rGradientSearch = combineRegExp(["(?:(", rLineCapture, ")", rComma, ")?(", rColorStopList, ")"], searchFlags);
-  const // Capture 1:"line", 2:"angle" (optional), 3:"side corner" (optional) and 4:"stop list".
-    rColorStopSearch = combineRegExp(
-      ["\\s*(", rColor, ")", "(?:\\s+", "(", rValue, "))?", "(?:", rComma, "\\s*)?"],
-      searchFlags
-    ); // Capture 1:"color" and 2:"position" (optional).
-
-  return {
-    gradientSearch: rGradientSearch,
-    colorStopSearch: rColorStopSearch
-  };
-};
-
-/**
- * Actually parse the input gradient parameters string into an object for reusability.
- *
- *
- * @note Really this only supports the standard syntax not historical versions, see MDN for details
- *       https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
- *
- * @param regExpLib
- * @param {string} input
- * @returns {object|undefined}
- */
-const parseGradient = (regExpLib: RegExpLib, input: string) => {
-  let result: ParseGradientResult;
-  let matchColorStop: any;
-  let stopResult: ColorStop;
-
-  // reset search position, because we reuse regex.
-  regExpLib.gradientSearch.lastIndex = 0;
-
-  const matchGradient = regExpLib.gradientSearch.exec(input);
-  if (!isNull(matchGradient)) {
-    result = {
-      original: matchGradient[0],
-      colorStopList: []
-    };
-
-    // Line (Angle or Side-Corner).
-    if (matchGradient[1]) {
-      result.line = matchGradient[1];
-    }
-    // Angle or undefined if side-corner.
-    if (matchGradient[2]) {
-      result.angle = matchGradient[2];
-    }
-    // Side-corner or undefined if angle.
-    if (matchGradient[3]) {
-      result.sideCorner = matchGradient[3];
-    }
-
-    // reset search position, because we reuse regex.
-    regExpLib.colorStopSearch.lastIndex = 0;
-
-    // Loop though all the color-stops.
-    matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
-    while (!isNull(matchColorStop)) {
-      stopResult = {
-        color: matchColorStop[1]
-      };
-
-      // Position (optional).
-      if (matchColorStop[2]) {
-        stopResult.position = matchColorStop[2];
-      }
-      result.colorStopList.push(stopResult);
-
-      // Continue searching from previous position.
-      matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
-    }
-  }
-
-  // Can be undefined if match not found.
-  return result;
-};
-
-export interface GradientColorPoint {
-  id?: string;
-  color?: string;
-  left?: number;
-}
-
-export interface GradientColors {
-  points: GradientColorPoint[];
-  degree: number;
-}
-
-const REGEXP_LIB = generateRegExp();
-const REG_GRADIENT = /.*gradient\s*\(((?:\([^)]*\)|[^)(]*)*)\)/gim;
-
-/**
- * 验证是否是渐变字符串
- * @param input
- * @returns
- */
-export const isGradientColor = (input: string): null | RegExpExecArray => {
-  REG_GRADIENT.lastIndex = 0;
-  return REG_GRADIENT.exec(input);
-};
-
-// 边界字符串和角度关系
-const sideCornerDegreeMap = {
-  top: 0,
-  right: 90,
-  bottom: 180,
-  left: 270,
-  "top left": 315,
-  "left top": 315,
-  "top right": 45,
-  "right top": 45,
-  "bottom left": 225,
-  "left bottom": 225,
-  "bottom right": 135,
-  "right bottom": 135
-};
-
-/**
- * 解析渐变字符串为 GradientColors 对象
- * @param input
- * @returns
- */
-export const parseGradientString = (input: string): GradientColors | false => {
-  const match = isGradientColor(input);
-  if (!match) return false;
-
-  const gradientColors: GradientColors = {
-    points: [],
-    degree: 0
-  };
-
-  const result: ParseGradientResult = parseGradient(REGEXP_LIB, match[1]);
-  if (result.original.trim() !== match[1].trim()) return false;
-
-  const points: GradientColorPoint[] = result.colorStopList.map(({ color, position }, index, array) => {
-    const point = Object.create(null);
-    point.color = tinyColor(color).toRgbString();
-
-    let left = parseFloat(position);
-    if (Number.isNaN(left)) {
-      left = (index / (array.length - 1)) * 100;
-    }
-
-    point.left = left;
-    return point;
-  });
-  gradientColors.points = points;
-
-  let degree = parseInt(result.angle, 10);
-  if (Number.isNaN(degree)) {
-    /* 如果角度不存在，使用 CSS 渐变的默认逻辑（180 deg）
-       https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients */
-    degree = sideCornerDegreeMap[result.sideCorner as keyof typeof sideCornerDegreeMap] || 180;
-  }
-  gradientColors.degree = degree;
-
-  return gradientColors;
-};
-
-export default parseGradientString;
+import { isString, isNull } from "lodash-es";
+
+/**
+ * 用于反解析渐变字符串为对象
+ * https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex
+ */
+import tinyColor from "tinycolor2";
+
+/**
+ * Utility combine multiple regular expressions.
+ *
+ * @param {RegExp[]|string[]} regexpList List of regular expressions or strings.
+ * @param {string} flags Normal RegExp flags.
+ */
+const combineRegExp = (regexpList: (string | RegExp)[], flags: string): RegExp => {
+  let source = "";
+  for (let i = 0; i < regexpList.length; i++) {
+    if (isString(regexpList[i])) {
+      source += regexpList[i];
+    } else {
+      source += (regexpList[i] as RegExp).source;
+    }
+  }
+  return new RegExp(source, flags);
+};
+
+interface RegExpLib {
+  gradientSearch: RegExp;
+  colorStopSearch: RegExp;
+}
+
+interface ColorStop {
+  color: string;
+  position?: string;
+}
+
+interface ParseGradientResult {
+  original: string;
+  colorStopList?: ColorStop[];
+  line?: string;
+  angle?: string;
+  sideCorner?: string;
+}
+
+/**
+ * Generate the required regular expressions once.
+ *
+ * Regular Expressions are easier to manage this way and can be well described.
+ *
+ * @result {object} Object containing regular expressions.
+ */
+const generateRegExp = (): RegExpLib => {
+  // Note any variables with "Capture" in name include capturing bracket set(s).
+  const searchFlags = "gi"; // ignore case for angles, "rgb" etc
+  const rAngle = /(?:[+-]?\d*\.?\d+)(?:deg|grad|rad|turn)/; // Angle +ive, -ive and angle types
+  // optional 2nd part
+  const rSideCornerCapture = /to\s+((?:(?:left|right|top|bottom)(?:\s+(?:top|bottom|left|right))?))/;
+  const rComma = /\s*,\s*/; // Allow space around comma.
+  const rColorHex = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/; // 3 or 6 character form
+  const rDigits3 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)/;
+  const // "(1, 2, 3)"
+    rDigits4 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*,\s*\d*\.?\d+\)/;
+  const // "(1, 2, 3, 4)"
+    rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/;
+  const // ".9", "-5px", "100%".
+    rKeyword = /[_a-z-][_a-z0-9-]*/;
+  const // "red", "transparent".
+    rColor = combineRegExp(
+      ["(?:", rColorHex, "|", "(?:rgb|hsl)", rDigits3, "|", "(?:rgba|hsla)", rDigits4, "|", rKeyword, ")"],
+      ""
+    );
+  const rColorStop = combineRegExp([rColor, "(?:\\s+", rValue, "(?:\\s+", rValue, ")?)?"], "");
+  const // Single Color Stop, optional %, optional length.
+    rColorStopList = combineRegExp(["(?:", rColorStop, rComma, ")*", rColorStop], "");
+  const // List of color stops min 1.
+    rLineCapture = combineRegExp(["(?:(", rAngle, ")|", rSideCornerCapture, ")"], "");
+  const // Angle or SideCorner
+    rGradientSearch = combineRegExp(["(?:(", rLineCapture, ")", rComma, ")?(", rColorStopList, ")"], searchFlags);
+  const // Capture 1:"line", 2:"angle" (optional), 3:"side corner" (optional) and 4:"stop list".
+    rColorStopSearch = combineRegExp(
+      ["\\s*(", rColor, ")", "(?:\\s+", "(", rValue, "))?", "(?:", rComma, "\\s*)?"],
+      searchFlags
+    ); // Capture 1:"color" and 2:"position" (optional).
+
+  return {
+    gradientSearch: rGradientSearch,
+    colorStopSearch: rColorStopSearch
+  };
+};
+
+/**
+ * Actually parse the input gradient parameters string into an object for reusability.
+ *
+ *
+ * @note Really this only supports the standard syntax not historical versions, see MDN for details
+ *       https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
+ *
+ * @param regExpLib
+ * @param {string} input
+ * @returns {object|undefined}
+ */
+const parseGradient = (regExpLib: RegExpLib, input: string) => {
+  let result: ParseGradientResult;
+  let matchColorStop: any;
+  let stopResult: ColorStop;
+
+  // reset search position, because we reuse regex.
+  regExpLib.gradientSearch.lastIndex = 0;
+
+  const matchGradient = regExpLib.gradientSearch.exec(input);
+  if (!isNull(matchGradient)) {
+    result = {
+      original: matchGradient[0],
+      colorStopList: []
+    };
+
+    // Line (Angle or Side-Corner).
+    if (matchGradient[1]) {
+      result.line = matchGradient[1];
+    }
+    // Angle or undefined if side-corner.
+    if (matchGradient[2]) {
+      result.angle = matchGradient[2];
+    }
+    // Side-corner or undefined if angle.
+    if (matchGradient[3]) {
+      result.sideCorner = matchGradient[3];
+    }
+
+    // reset search position, because we reuse regex.
+    regExpLib.colorStopSearch.lastIndex = 0;
+
+    // Loop though all the color-stops.
+    matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
+    while (!isNull(matchColorStop)) {
+      stopResult = {
+        color: matchColorStop[1]
+      };
+
+      // Position (optional).
+      if (matchColorStop[2]) {
+        stopResult.position = matchColorStop[2];
+      }
+      result.colorStopList.push(stopResult);
+
+      // Continue searching from previous position.
+      matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
+    }
+  }
+
+  // Can be undefined if match not found.
+  return result;
+};
+
+export interface GradientColorPoint {
+  id?: string;
+  color?: string;
+  left?: number;
+}
+
+export interface GradientColors {
+  points: GradientColorPoint[];
+  degree: number;
+}
+
+const REGEXP_LIB = generateRegExp();
+const REG_GRADIENT = /.*gradient\s*\(((?:\([^)]*\)|[^)(]*)*)\)/gim;
+
+/**
+ * 验证是否是渐变字符串
+ * @param input
+ * @returns
+ */
+export const isGradientColor = (input: string): null | RegExpExecArray => {
+  REG_GRADIENT.lastIndex = 0;
+  return REG_GRADIENT.exec(input);
+};
+
+// 边界字符串和角度关系
+const sideCornerDegreeMap = {
+  top: 0,
+  right: 90,
+  bottom: 180,
+  left: 270,
+  "top left": 315,
+  "left top": 315,
+  "top right": 45,
+  "right top": 45,
+  "bottom left": 225,
+  "left bottom": 225,
+  "bottom right": 135,
+  "right bottom": 135
+};
+
+/**
+ * 解析渐变字符串为 GradientColors 对象
+ * @param input
+ * @returns
+ */
+export const parseGradientString = (input: string): GradientColors | false => {
+  const match = isGradientColor(input);
+  if (!match) return false;
+
+  const gradientColors: GradientColors = {
+    points: [],
+    degree: 0
+  };
+
+  const result: ParseGradientResult = parseGradient(REGEXP_LIB, match[1]);
+  if (result.original.trim() !== match[1].trim()) return false;
+
+  const points: GradientColorPoint[] = result.colorStopList.map(({ color, position }, index, array) => {
+    const point = Object.create(null);
+    point.color = tinyColor(color).toRgbString();
+
+    let left = parseFloat(position);
+    if (Number.isNaN(left)) {
+      left = (index / (array.length - 1)) * 100;
+    }
+
+    point.left = left;
+    return point;
+  });
+  gradientColors.points = points;
+
+  let degree = parseInt(result.angle, 10);
+  if (Number.isNaN(degree)) {
+    /* 如果角度不存在，使用 CSS 渐变的默认逻辑（180 deg）
+       https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients */
+    degree = sideCornerDegreeMap[result.sideCorner as keyof typeof sideCornerDegreeMap] || 180;
+  }
+  gradientColors.degree = degree;
+
+  return gradientColors;
+};
+
+export default parseGradientString;

package/color-picker/utils/color-picker/index.ts

@@ -1,7 +1,7 @@
-export * from "./cmyk";
-export * from "./color";
-export * from "./constants";
-export * from "./draggable";
-export * from "./format";
-export * from "./gradient";
-export * from "./types";
+export * from "./cmyk";
+export * from "./color";
+export * from "./constants";
+export * from "./draggable";
+export * from "./format";
+export * from "./gradient";
+export * from "./types";