@tendaui/components 1.2.3 → 1.3.0

package/color-picker/_example/manual-input.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function ManualInput() {
+  const [color, setColor] = useState("#0052d9");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div style={{ color: "#666", fontSize: "14px" }}>
+        <p style={{ margin: "0 0 8px 0" }}>
+          <strong>触发器输入框：</strong>在触发器中直接输入任意格式的颜色值，按回车或失焦后会自动转换为指定格式。
+        </p>
+        <p style={{ margin: "0" }}>
+          <strong>面板格式输入：</strong>
+          打开颜色选择面板，可以通过格式选择器切换不同的输入格式（HEX/RGB/HSL/HSV/CMYK），并通过数值输入框精确调整颜色各分量的值。
+        </p>
+      </div>
+      <div style={{ display: "flex", gap: "24px", flexWrap: "wrap" }}>
+        <div>
+          <div style={{ marginBottom: "8px", color: "#666" }}>HEX 格式</div>
+          <ColorPicker format="HEX" value={color} onChange={(v) => setColor(v)} />
+          <div style={{ marginTop: "8px", fontSize: "12px", color: "#999" }}>
+            触发器支持输入: rgb(255, 0, 0) 或 red
+          </div>
+        </div>
+        <div>
+          <div style={{ marginBottom: "8px", color: "#666" }}>RGB 格式（面板内可切换格式）</div>
+          <ColorPicker format="RGB" value={color} onChange={(v) => setColor(v)} />
+          <div style={{ marginTop: "8px", fontSize: "12px", color: "#999" }}>面板内支持 R/G/B 分量精确输入</div>
+        </div>
+        <div>
+          <div style={{ marginBottom: "8px", color: "#666" }}>带透明度（RGBA）</div>
+          <ColorPicker format="RGBA" enableAlpha value={color} onChange={(v) => setColor(v)} />
+          <div style={{ marginTop: "8px", fontSize: "12px", color: "#999" }}>面板内可调整透明度百分比</div>
+        </div>
+      </div>
+      <div>当前颜色值：{color}</div>
+    </div>
+  );
+}

package/color-picker/_example/recent-colors.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function RecentColors() {
+  const [color, setColor] = useState("#0052d9");
+  const [recentColors, setRecentColors] = useState<string[]>(["#ff0000", "#00ff00", "#0000ff"]);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ColorPicker
+        recentColors={recentColors}
+        onRecentColorsChange={setRecentColors}
+        value={color}
+        onChange={(v) => setColor(v)}
+      />
+      <div>当前颜色值：{color}</div>
+      <div>最近使用：{recentColors.join(", ")}</div>
+    </div>
+  );
+}

package/color-picker/_example/swatch-colors.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function SwatchColors() {
+  const [color, setColor] = useState("#0052d9");
+  const customSwatchColors = [
+    "#ff0000",
+    "#ff7800",
+    "#ffff00",
+    "#00ff00",
+    "#00ffff",
+    "#0000ff",
+    "#8b00ff",
+    "#ff00ff",
+    "#000000",
+    "#333333",
+    "#666666",
+    "#999999",
+    "#cccccc",
+    "#ffffff"
+  ];
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ColorPicker swatchColors={customSwatchColors} value={color} onChange={(v) => setColor(v)} />
+      <div>当前颜色值：{color}</div>
+    </div>
+  );
+}

package/color-picker/_example/with-alpha.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function WithAlpha() {
+  const [color, setColor] = useState("rgba(0, 82, 217, 0.8)");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ColorPicker format="RGBA" enableAlpha value={color} onChange={(v) => setColor(v)} />
+      <div>当前颜色值：{color}</div>
+      <div
+        style={{
+          width: "100px",
+          height: "40px",
+          backgroundColor: color,
+          borderRadius: "4px",
+          border: "1px solid #ddd"
+        }}
+      />
+    </div>
+  );
+}

package/color-picker/components/panel/format/inputs.tsx

@@ -95,7 +95,7 @@ const FormatInputs = (props: TdColorFormatProps) => {
                 {...commonProps}
                 defaultValue={currentValue as string}
                 key={`${inputKey.current}-${currentValue}`}
-                maxlength={format === "HEX" ? 9 : undefined}
+                maxLength={format === "HEX" ? 9 : undefined}
               />
             ) : (
               <InputNumber

package/color-picker/components/panel/index.tsx

@@ -20,6 +20,7 @@ import AlphaSlider from "./alpha";
 import HueSlider from "./hue";
 import SaturationPanel from "./saturation";
 import SwatchesPanel from "./swatches";
+import FormatPanel from "./format";
 
 const Panel = forwardRef<HTMLDivElement, ColorPickerProps>((props, ref) => {
   const baseClassName = useClassName();
@@ -33,6 +34,8 @@ const Panel = forwardRef<HTMLDivElement, ColorPickerProps>((props, ref) => {
     style,
     swatchColors,
     showPrimaryColorPreview,
+    inputProps,
+    selectInputProps,
     onChange,
     onPaletteBarChange
   } = useDefaultProps(props, colorPickerDefaultProps);
@@ -170,6 +173,16 @@ const Panel = forwardRef<HTMLDivElement, ColorPickerProps>((props, ref) => {
           ) : null}
         </div>
 
+        {/* 颜色格式输入区域 */}
+        <FormatPanel
+          {...baseProps}
+          format={format}
+          enableAlpha={enableAlpha}
+          inputProps={inputProps}
+          selectInputProps={selectInputProps}
+          onInputChange={() => emitColorChange("input")}
+        />
+
         {showSystemColors && (
           <div className={`${baseClassName}__swatches-wrap`}>
             {showSystemColors && (

package/color-picker/components/trigger.tsx

@@ -1,30 +1,79 @@
-import React from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import classNames from "classnames";
 import { Color, getColorObject } from "../utils/color-picker/color";
+import { initColorFormat } from "../utils/color-picker/format";
 import { Input } from "../../input";
 import { TdColorPickerProps } from "../type";
 import useClassName from "../hooks/useClassNames";
 import { TdColorContext } from "../type";
 import noop from "../../utils/noop";
+import type { ColorFormat } from "../utils/color-picker/types";
 
 export interface ColorTriggerProps
-  extends Pick<TdColorPickerProps, "disabled" | "inputProps" | "borderless" | "clearable" | "onClear"> {
+  extends Pick<
+    TdColorPickerProps,
+    "disabled" | "inputProps" | "borderless" | "clearable" | "onClear" | "format" | "enableAlpha"
+  > {
   value?: string;
   onChange?: (v?: string, context?: TdColorContext) => void;
 }
 
 const ColorPickerTrigger = (props: ColorTriggerProps) => {
   const baseClassName = useClassName();
-  const { disabled = false, borderless = false, inputProps = { autoWidth: true }, clearable, onClear } = props;
-
-  const handleChange = (input: string) => {
-    if (input !== props.value) {
-      props.onChange?.(input, {
-        color: getColorObject(new Color(input)),
-        trigger: "input"
-      });
+  const {
+    disabled = false,
+    borderless = false,
+    inputProps = { autoWidth: true },
+    clearable,
+    onClear,
+    format = "RGB",
+    enableAlpha = false
+  } = props;
+
+  // 内部输入状态，用于处理用户输入
+  const [inputValue, setInputValue] = useState<string>(props.value || "");
+
+  // 同步外部 value 变化
+  useEffect(() => {
+    setInputValue(props.value || "");
+  }, [props.value]);
+
+  // 处理输入变化（实时更新内部状态）
+  const handleInputChange = useCallback((input: string) => {
+    setInputValue(input);
+  }, []);
+
+  // 处理失焦事件 - 验证并格式化颜色值
+  const handleBlur = useCallback(() => {
+    if (!inputValue) {
+      return;
     }
-  };
+
+    // 验证颜色是否有效
+    if (Color.isValid(inputValue)) {
+      const colorInstance = new Color(inputValue);
+      const finalFormat = initColorFormat(format as ColorFormat, enableAlpha);
+      const formattedValue = colorInstance.getFormattedColor(finalFormat, enableAlpha);
+
+      // 如果格式化后的值与当前值不同，触发 onChange
+      if (formattedValue !== props.value) {
+        props.onChange?.(formattedValue, {
+          color: getColorObject(colorInstance),
+          trigger: "input"
+        });
+      }
+      // 更新显示值为格式化后的值
+      setInputValue(formattedValue);
+    } else {
+      // 如果颜色无效，恢复为之前的有效值
+      setInputValue(props.value || "");
+    }
+  }, [inputValue, props.value, props.onChange, format, enableAlpha]);
+
+  // 处理回车确认
+  const handleEnter = useCallback(() => {
+    handleBlur();
+  }, [handleBlur]);
 
   return (
     <div className={`${baseClassName}__trigger--default`}>
@@ -32,14 +81,16 @@ const ColorPickerTrigger = (props: ColorTriggerProps) => {
         borderless={borderless}
         clearable={clearable}
         {...inputProps}
-        value={props.value}
+        value={inputValue}
         disabled={disabled}
         label={
           <div className={classNames(`${baseClassName}__trigger--default__color`, `${baseClassName}--bg-alpha`)}>
             <span className={"color-inner"} style={{ background: props.value }}></span>
           </div>
         }
-        onChange={handleChange}
+        onChange={handleInputChange}
+        onBlur={handleBlur}
+        onEnter={handleEnter}
         onClear={onClear || noop}
       />
     </div>

package/color-picker/defaultProps.ts

@@ -3,5 +3,8 @@ import { TdColorPickerProps } from "./type";
 export const colorPickerDefaultProps: TdColorPickerProps = {
   borderless: false,
   clearable: false,
-  disabled: false
+  disabled: false,
+  enableAlpha: false,
+  format: "RGB",
+  showPrimaryColorPreview: true
 };

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

@@ -1,89 +1,89 @@
-/**
- * rgb 转 cmyk
- * @param red
- * @param green
- * @param blue
- * @returns
- */
-export const rgb2cmyk = (red: number, green: number, blue: number) => {
-  let computedC = 0;
-  let computedM = 0;
-  let computedY = 0;
-  let computedK = 0;
-
-  const r = parseInt(`${red}`.replace(/\s/g, ''), 10);
-  const g = parseInt(`${green}`.replace(/\s/g, ''), 10);
-  const b = parseInt(`${blue}`.replace(/\s/g, ''), 10);
-
-  if (r === 0 && g === 0 && b === 0) {
-    computedK = 1;
-    return [0, 0, 0, 1];
-  }
-
-  computedC = 1 - r / 255;
-  computedM = 1 - g / 255;
-  computedY = 1 - b / 255;
-
-  const minCMY = Math.min(computedC, Math.min(computedM, computedY));
-  computedC = (computedC - minCMY) / (1 - minCMY);
-  computedM = (computedM - minCMY) / (1 - minCMY);
-  computedY = (computedY - minCMY) / (1 - minCMY);
-  computedK = minCMY;
-
-  return [computedC, computedM, computedY, computedK];
-};
-
-/**
- * cmyk 转 rgb
- * @param cyan
- * @param magenta
- * @param yellow
- * @param black
- * @returns
- */
-export const cmyk2rgb = (cyan: number, magenta: number, yellow: number, black: number) => {
-  let c = cyan / 100;
-  let m = magenta / 100;
-  let y = yellow / 100;
-  const k = black / 100;
-
-  c = c * (1 - k) + k;
-  m = m * (1 - k) + k;
-  y = y * (1 - k) + k;
-
-  let r = 1 - c;
-  let g = 1 - m;
-  let b = 1 - y;
-
-  r = Math.round(255 * r);
-  g = Math.round(255 * g);
-  b = Math.round(255 * b);
-  return {
-    r,
-    g,
-    b,
-  };
-};
-
-const REG_CMYK_STRING = /cmyk\((\d+%?),(\d+%?),(\d+%?),(\d+%?)\)/;
-
-const toNumber = (str: string) => Math.max(0, Math.min(255, parseInt(str, 10)));
-
-/**
- * 输入色转rgb
- * @param input
- * @returns
- */
-export const cmykInputToColor = (input: string) => {
-  if (/cmyk/i.test(input)) {
-    const str = input.replace(/\s/g, '');
-    const match = str.match(REG_CMYK_STRING);
-    const c = toNumber(match[1]);
-    const m = toNumber(match[2]);
-    const y = toNumber(match[3]);
-    const k = toNumber(match[4]);
-    const { r, g, b } = cmyk2rgb(c, m, y, k);
-    return `rgb(${r}, ${g}, ${b})`;
-  }
-  return input;
-};
+/**
+ * rgb 转 cmyk
+ * @param red
+ * @param green
+ * @param blue
+ * @returns
+ */
+export const rgb2cmyk = (red: number, green: number, blue: number) => {
+  let computedC = 0;
+  let computedM = 0;
+  let computedY = 0;
+  let computedK = 0;
+
+  const r = parseInt(`${red}`.replace(/\s/g, ""), 10);
+  const g = parseInt(`${green}`.replace(/\s/g, ""), 10);
+  const b = parseInt(`${blue}`.replace(/\s/g, ""), 10);
+
+  if (r === 0 && g === 0 && b === 0) {
+    computedK = 1;
+    return [0, 0, 0, 1];
+  }
+
+  computedC = 1 - r / 255;
+  computedM = 1 - g / 255;
+  computedY = 1 - b / 255;
+
+  const minCMY = Math.min(computedC, Math.min(computedM, computedY));
+  computedC = (computedC - minCMY) / (1 - minCMY);
+  computedM = (computedM - minCMY) / (1 - minCMY);
+  computedY = (computedY - minCMY) / (1 - minCMY);
+  computedK = minCMY;
+
+  return [computedC, computedM, computedY, computedK];
+};
+
+/**
+ * cmyk 转 rgb
+ * @param cyan
+ * @param magenta
+ * @param yellow
+ * @param black
+ * @returns
+ */
+export const cmyk2rgb = (cyan: number, magenta: number, yellow: number, black: number) => {
+  let c = cyan / 100;
+  let m = magenta / 100;
+  let y = yellow / 100;
+  const k = black / 100;
+
+  c = c * (1 - k) + k;
+  m = m * (1 - k) + k;
+  y = y * (1 - k) + k;
+
+  let r = 1 - c;
+  let g = 1 - m;
+  let b = 1 - y;
+
+  r = Math.round(255 * r);
+  g = Math.round(255 * g);
+  b = Math.round(255 * b);
+  return {
+    r,
+    g,
+    b
+  };
+};
+
+const REG_CMYK_STRING = /cmyk\((\d+%?),(\d+%?),(\d+%?),(\d+%?)\)/;
+
+const toNumber = (str: string) => Math.max(0, Math.min(255, parseInt(str, 10)));
+
+/**
+ * 输入色转rgb
+ * @param input
+ * @returns
+ */
+export const cmykInputToColor = (input: string) => {
+  if (/cmyk/i.test(input)) {
+    const str = input.replace(/\s/g, "");
+    const match = str.match(REG_CMYK_STRING);
+    const c = toNumber(match[1]);
+    const m = toNumber(match[2]);
+    const y = toNumber(match[3]);
+    const k = toNumber(match[4]);
+    const { r, g, b } = cmyk2rgb(c, m, y, k);
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  return input;
+};