@tendaui/react 1.1.1 → 1.1.3

package/es/color-picker/type.d.ts

@@ -0,0 +1,135 @@
+import { MouseEvent } from "react";
+import { StyledProps } from "../common";
+import { InputProps } from "../input";
+import { PopupProps } from "../popup";
+import { SelectInputProps } from "../select-input";
+import type { Color } from "./utils/color-picker/color";
+export interface TdColorPickerProps {
+    /**
+     * 无边框模式
+     * @default false
+     */
+    borderless?: boolean;
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * 是否禁用组件
+     */
+    disabled?: boolean;
+    /**
+     * 是否开启透明通道
+     * @default false
+     */
+    enableAlpha?: boolean;
+    /**
+     * 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色
+     * @default true
+     */
+    enableMultipleGradient?: boolean;
+    /**
+     * 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效
+     * @default RGB
+     */
+    format?: "HEX" | "HEX8" | "RGB" | "RGBA" | "HSL" | "HSLA" | "HSV" | "HSVA" | "CMYK" | "CSS";
+    /**
+     * 透传 Input 输入框组件全部属性
+     */
+    inputProps?: InputProps;
+    /**
+     * 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等
+     */
+    popupProps?: PopupProps;
+    /**
+     * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”
+     * @default []
+     */
+    recentColors?: Array<string> | boolean | null;
+    /**
+     * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”，非受控属性
+     * @default []
+     */
+    defaultRecentColors?: Array<string> | boolean | null;
+    /**
+     * 透传 SelectInputProps 筛选器输入框组件全部属性
+     */
+    selectInputProps?: SelectInputProps;
+    /**
+     * 是否展示颜色选择条右侧的颜色预览区域
+     * @default true
+     */
+    showPrimaryColorPreview?: boolean;
+    /**
+     * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
+     */
+    swatchColors?: Array<string> | null | undefined;
+    /**
+     * 色值
+     * @default ''
+     */
+    value?: string;
+    /**
+     * 色值，非受控属性
+     * @default ''
+     */
+    defaultValue?: string;
+    /**
+     * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源
+     */
+    onChange?: (value: string, context: {
+        color: ColorObject;
+        trigger: ColorPickerChangeTrigger;
+    }) => void;
+    /**
+     * 清空按钮点击时触发
+     */
+    onClear?: (context: {
+        e: MouseEvent<SVGElement>;
+    }) => void;
+    /**
+     * 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值
+     */
+    onPaletteBarChange?: (context: {
+        color: ColorObject;
+    }) => void;
+    /**
+     * 最近使用颜色发生变化时触发
+     */
+    onRecentColorsChange?: (value: Array<string>) => void;
+}
+export type ColorPickerChangeTrigger = "palette-saturation-brightness" | "palette-saturation" | "palette-brightness" | "palette-hue-bar" | "palette-alpha-bar" | "input" | "preset" | "recent";
+export interface ColorObject {
+    alpha: number;
+    css: string;
+    hex: string;
+    hex8: string;
+    hsl: string;
+    hsla: string;
+    hsv: string;
+    hsva: string;
+    rgb: string;
+    rgba: string;
+    saturation: number;
+    value: number;
+    isGradient: boolean;
+    linearGradient?: string;
+}
+export interface ColorPickerProps extends TdColorPickerProps, StyledProps {
+}
+export interface TdColorContext {
+    color: ColorObject;
+    trigger: ColorPickerChangeTrigger;
+}
+export type TdColorSaturationData = {
+    saturation: number;
+    value: number;
+};
+export interface TdColorBaseProps {
+    disabled: boolean;
+    color: Color;
+    onChange?: (options?: any) => void;
+    baseClassName: string;
+}
+export type TdColorModes = keyof typeof import("./utils/color-picker/constants").COLOR_MODES;

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

@@ -0,0 +1,27 @@
+/**
+ * rgb 转 cmyk
+ * @param red
+ * @param green
+ * @param blue
+ * @returns
+ */
+export declare const rgb2cmyk: (red: number, green: number, blue: number) => number[];
+/**
+ * cmyk 转 rgb
+ * @param cyan
+ * @param magenta
+ * @param yellow
+ * @param black
+ * @returns
+ */
+export declare const cmyk2rgb: (cyan: number, magenta: number, yellow: number, black: number) => {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * 输入色转rgb
+ * @param input
+ * @returns
+ */
+export declare const cmykInputToColor: (input: string) => string;

package/es/color-picker/utils/color-picker/color.d.ts

@@ -0,0 +1,144 @@
+import tinyColor from "tinycolor2";
+import { GradientColorPoint, GradientColors } from "./gradient";
+import type { ColorFormat } from "./types";
+export interface ColorObject {
+    alpha: number;
+    css: string;
+    hex: string;
+    hex8: string;
+    hsl: string;
+    hsla: string;
+    hsv: string;
+    hsva: string;
+    rgb: string;
+    rgba: string;
+    saturation: number;
+    value: number;
+    isGradient: boolean;
+    linearGradient?: string;
+}
+interface ColorStates {
+    s: number;
+    v: number;
+    h: number;
+    a: number;
+}
+interface GradientStates {
+    colors: GradientColorPoint[];
+    degree: number;
+    selectedId: string;
+    css?: string;
+}
+/**
+ * 将渐变对象转换成字符串
+ */
+export declare const gradientColors2string: (object: GradientColors) => string;
+/**
+ * 去除颜色的透明度
+ */
+export declare const getColorWithoutAlpha: (color: string) => string;
+export declare const genId: () => string;
+/**
+ * 生成一个渐变颜色
+ * @param left
+ * @param color
+ * @returns
+ */
+export declare const genGradientPoint: (left: number, color: string, id?: string) => GradientColorPoint;
+export declare class Color {
+    states: ColorStates;
+    originColor: string;
+    isGradient: boolean;
+    gradientStates: GradientStates;
+    constructor(input: string);
+    update(input: string): void;
+    get saturation(): number;
+    set saturation(value: number);
+    get value(): number;
+    set value(value: number);
+    get hue(): number;
+    set hue(value: number);
+    get alpha(): number;
+    set alpha(value: number);
+    get rgb(): string;
+    get rgba(): string;
+    get hsv(): string;
+    get hsva(): string;
+    get hsl(): string;
+    get hsla(): string;
+    get hex(): string;
+    get hex8(): string;
+    get cmyk(): string;
+    get css(): string;
+    get linearGradient(): string;
+    get gradientColors(): GradientColorPoint[];
+    set gradientColors(colors: GradientColorPoint[]);
+    get gradientSelectedId(): string;
+    set gradientSelectedId(id: string);
+    get gradientDegree(): number;
+    set gradientDegree(degree: number);
+    get gradientSelectedPoint(): GradientColorPoint;
+    getFormatsColorMap(): {
+        HEX: string;
+        CMYK: string;
+        RGB: string;
+        RGBA: string;
+        HSL: string;
+        HSLA: string;
+        HSV: string;
+        HSVA: string;
+        CSS: string;
+        HEX8: string;
+    };
+    getFormattedColor(format: ColorFormat, enableAlpha: boolean): string;
+    updateCurrentGradientColor(): false | this;
+    updateStates(input: string): void;
+    getRgba(): {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    getCmyk(): {
+        c: number;
+        m: number;
+        y: number;
+        k: number;
+    };
+    getHsva(): tinyColor.ColorFormats.HSVA;
+    getHsla(): tinyColor.ColorFormats.HSLA;
+    /**
+     * 判断输入色是否与当前色相同
+     */
+    equals(color: string): boolean;
+    /**
+     * 校验输入色是否是一个有效颜色
+     * @param color
+     * @returns
+     */
+    static isValid(color: string): boolean;
+    /**
+     * 对象转颜色字符串
+     */
+    static object2color(object: any, format: ColorFormat): string;
+    /**
+     * 是否是渐变色
+     * @param input
+     * @returns
+     */
+    static isGradientColor: (input: string) => boolean;
+    /**
+     * 比较两个颜色是否相同
+     * @param color1
+     * @param color2
+     * @returns
+     */
+    static compare: (color1: string, color2: string) => boolean;
+}
+/**
+ * 获取对外输出的color对象
+ * @param color
+ * @returns
+ */
+export declare const getColorObject: (color: Color) => ColorObject | null;
+export default Color;

package/es/color-picker/utils/color-picker/constants.d.ts

@@ -0,0 +1,30 @@
+import type { BasicColorFormat, ColorInputProp } from "./types";
+export declare const TD_COLOR_USED_COLORS_MAX_SIZE = 100;
+export declare const COLOR_MODES: {
+    monochrome: string;
+    "linear-gradient": string;
+};
+export declare const DEFAULT_COLOR = "#001F97";
+export declare const DEFAULT_LINEAR_GRADIENT = "linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%);";
+export declare const DEFAULT_SYSTEM_SWATCH_COLORS: string[];
+/**
+ * 非透明色格式化类型
+ */
+export declare const FORMATS: readonly ["HEX", "RGB", "HSL", "HSV", "CMYK", "CSS"];
+/**
+ * 透明色格式化类型映射
+ */
+export declare const ALPHA_FORMAT_MAP: {
+    readonly HEX: "HEX8";
+    readonly RGB: "RGBA";
+    readonly HSL: "HSLA";
+    readonly HSV: "HSVA";
+};
+/**
+ * 不同格式对应的输入框
+ */
+export declare const COLOR_FORMAT_INPUTS: Record<BasicColorFormat, ColorInputProp[]>;
+export declare const SATURATION_PANEL_DEFAULT_WIDTH = 230;
+export declare const SATURATION_PANEL_DEFAULT_HEIGHT = 168;
+export declare const SLIDER_DEFAULT_WIDTH = 186;
+export declare const GRADIENT_SLIDER_DEFAULT_WIDTH = 176;

package/es/color-picker/utils/color-picker/draggable.d.ts

@@ -0,0 +1,23 @@
+export interface Coordinate {
+    x: number;
+    y: number;
+}
+export type DraggableEvent = MouseEvent;
+interface DraggableCallback {
+    (coordinate: Coordinate, event?: DraggableEvent): void;
+}
+export interface DraggableProps {
+    start?: DraggableCallback;
+    drag?: DraggableCallback;
+    end?: DraggableCallback;
+}
+export declare class Draggable {
+    #private;
+    private dragging;
+    private $el;
+    private props;
+    private handles;
+    constructor(el: HTMLElement, options?: DraggableProps);
+    destroy(): void;
+}
+export default Draggable;

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

@@ -0,0 +1,64 @@
+import Color from './color';
+import type { ColorFormat } from './types';
+/**
+ * 兜底处理用户传入的格式，例如：
+ * - 传入 `RGB`， 但 `enableAlpha` ，则返回 `RGBA`
+ */
+export declare const initColorFormat: (format: ColorFormat, enableAlpha: boolean) => ColorFormat;
+/**
+ * 获取不同格式的输入输出值
+ * - encode：将字符串转换为单独的颜色值，例如 `{r: 255, g: 255, b: 255}`
+ * - decode：获取完整的颜色字符串，例如 `rgb(255, 255, 255)`
+ */
+export declare const getColorFormatMap: (color: Color, type: "encode" | "decode") => {
+    HEX: string;
+    CMYK: string;
+    RGB: string;
+    RGBA: string;
+    HSL: string;
+    HSLA: string;
+    HSV: string;
+    HSVA: string;
+    CSS: string;
+    HEX8: string;
+} | {
+    HSV: import("tinycolor2").ColorFormats.HSVA;
+    HSVA: import("tinycolor2").ColorFormats.HSVA;
+    HSL: import("tinycolor2").ColorFormats.HSLA;
+    HSLA: import("tinycolor2").ColorFormats.HSLA;
+    RGB: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    RGBA: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    CMYK: {
+        c: number;
+        m: number;
+        y: number;
+        k: number;
+    };
+    CSS: {
+        css: string;
+    };
+    HEX: {
+        hex: string;
+    };
+    HEX8: {
+        hex: string;
+    };
+};
+/**
+ * 获取下拉框的格式选项
+ */
+export declare const getColorFormatOptions: (enableAlpha: boolean) => readonly ["HEX", "RGB", "HSL", "HSV", "CMYK", "CSS"] | ("HEX" | "RGB" | "HSL" | "HSV" | "CMYK" | "CSS" | "HEX8" | "RGBA" | "HSLA" | "HSVA")[];
+/**
+ * 获取当前格式的输入框配置
+ */
+export declare const getColorFormatInputs: (format: ColorFormat, enableAlpha: boolean) => import("./types").ColorInputProp[];

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

@@ -0,0 +1,22 @@
+export interface GradientColorPoint {
+    id?: string;
+    color?: string;
+    left?: number;
+}
+export interface GradientColors {
+    points: GradientColorPoint[];
+    degree: number;
+}
+/**
+ * 验证是否是渐变字符串
+ * @param input
+ * @returns
+ */
+export declare const isGradientColor: (input: string) => null | RegExpExecArray;
+/**
+ * 解析渐变字符串为 GradientColors 对象
+ * @param input
+ * @returns
+ */
+export declare const parseGradientString: (input: string) => GradientColors | false;
+export default parseGradientString;

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

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

package/es/color-picker/utils/color-picker/index.js

@@ -0,0 +1,147 @@
+import { A as ALPHA_FORMAT_MAP, F as FORMATS, b as COLOR_FORMAT_INPUTS } from '../../../_chunks/dep-DJmE940f.js';
+export { j as COLOR_MODES, C as Color, D as DEFAULT_COLOR, k as DEFAULT_LINEAR_GRADIENT, a as DEFAULT_SYSTEM_SWATCH_COLORS, G as GRADIENT_SLIDER_DEFAULT_WIDTH, l as SATURATION_PANEL_DEFAULT_HEIGHT, S as SATURATION_PANEL_DEFAULT_WIDTH, m as SLIDER_DEFAULT_WIDTH, T as TD_COLOR_USED_COLORS_MAX_SIZE, c as cmyk2rgb, d as cmykInputToColor, i as genGradientPoint, h as genId, g as getColorObject, f as getColorWithoutAlpha, e as gradientColors2string, n as isGradientColor, p as parseGradientString, r as rgb2cmyk } from '../../../_chunks/dep-DJmE940f.js';
+import { a as _classCallCheck, _ as _createClass } from '../../../_chunks/dep-Chz4ZJCb.js';
+import { _ as _defineProperty } from '../../../_chunks/dep-Cwish4GD.js';
+import { _ as _toConsumableArray } from '../../../_chunks/dep-CgyDw_YI.js';
+import '../../../_chunks/dep-CzLhKWCf.js';
+import '../../../_chunks/dep-zOZQ0R9g.js';
+import 'lodash-es';
+import '../../../_chunks/dep-D-UKOauR.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+var defaultsOptions = {
+  start: function start(coordinate, event) {},
+  drag: function drag(coordinate, event) {},
+  end: function end(coordinate, event) {}
+};
+var _Draggable_brand = /*#__PURE__*/new WeakSet();
+var Draggable = /*#__PURE__*/function () {
+  function Draggable(el, options) {
+    _classCallCheck(this, Draggable);
+    _classPrivateMethodInitSpec(this, _Draggable_brand);
+    _defineProperty(this, "dragging", false);
+    this.$el = el;
+    this.props = _objectSpread(_objectSpread({}, defaultsOptions), options);
+    this.handles = {
+      start: _assertClassBrand(_Draggable_brand, this, _dragStart).bind(this),
+      drag: _assertClassBrand(_Draggable_brand, this, _drag).bind(this),
+      end: _assertClassBrand(_Draggable_brand, this, _dragEnd).bind(this)
+    };
+    this.$el.addEventListener("mousedown", this.handles.start, false);
+  }
+  return _createClass(Draggable, [{
+    key: "destroy",
+    value: function destroy() {
+      this.$el.removeEventListener("mousedown", this.handles.start, false);
+      window.removeEventListener("mousemove", this.handles.drag, false);
+      window.removeEventListener("mouseup", this.handles.end, false);
+      window.removeEventListener("contextmenu", this.handles.end, false);
+    }
+  }]);
+}();
+function _dragStart(event) {
+  if (this.dragging) {
+    return;
+  }
+  window.addEventListener("mousemove", this.handles.drag, false);
+  window.addEventListener("mouseup", this.handles.end, false);
+  window.addEventListener("contextmenu", this.handles.end, false);
+  this.dragging = true;
+  this.props.start(_assertClassBrand(_Draggable_brand, this, _getCoordinate).call(this, event), event);
+}
+function _drag(event) {
+  if (!this.dragging) {
+    return;
+  }
+  this.props.drag(_assertClassBrand(_Draggable_brand, this, _getCoordinate).call(this, event), event);
+}
+function _dragEnd(event) {
+  var _this = this;
+  setTimeout(function () {
+    _this.dragging = false;
+    _this.props.end(_assertClassBrand(_Draggable_brand, _this, _getCoordinate).call(_this, event), event);
+  }, 0);
+  window.removeEventListener("mousemove", this.handles.drag, false);
+  window.removeEventListener("mouseup", this.handles.end, false);
+  window.removeEventListener("contextmenu", this.handles.end, false);
+}
+function _getCoordinate(event) {
+  var rect = this.$el.getBoundingClientRect();
+  var mouseEvent = event;
+  var left = mouseEvent.clientX - rect.left;
+  var top = mouseEvent.clientY - rect.top;
+  return {
+    y: Math.min(Math.max(0, top), rect.height),
+    x: Math.min(Math.max(0, left), rect.width)
+  };
+}
+
+var initColorFormat = function initColorFormat(format, enableAlpha) {
+  if (enableAlpha && format in ALPHA_FORMAT_MAP) {
+    return format in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[format] : format;
+  }
+  return format;
+};
+var getColorFormatMap = function getColorFormatMap(color, type) {
+  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
+      }
+    };
+  }
+  return color.getFormatsColorMap();
+};
+var getColorFormatOptions = function getColorFormatOptions(enableAlpha) {
+  return enableAlpha ? FORMATS.map(function (item) {
+    return item in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[item] : item;
+  }) : FORMATS;
+};
+var getColorFormatInputs = function getColorFormatInputs() {
+  var format = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "RGB";
+  var enableAlpha = arguments.length > 1 ? arguments[1] : undefined;
+  var finalFormat;
+  if (enableAlpha) {
+    finalFormat = Object.keys(ALPHA_FORMAT_MAP).find(function (key) {
+      return key in ALPHA_FORMAT_MAP && ALPHA_FORMAT_MAP[key] === format;
+    }) || format;
+  } else {
+    finalFormat = format;
+  }
+  if (!COLOR_FORMAT_INPUTS[finalFormat]) return [];
+  var configs = _toConsumableArray(COLOR_FORMAT_INPUTS[finalFormat]);
+  if (enableAlpha && format !== "CMYK") {
+    configs.push({
+      type: "inputNumber",
+      key: "a",
+      min: 0,
+      max: 100,
+      format: function format(value) {
+        return "".concat(value, "%");
+      },
+      flex: 1.15
+    });
+  }
+  return configs;
+};
+
+export { ALPHA_FORMAT_MAP, COLOR_FORMAT_INPUTS, Draggable, FORMATS, getColorFormatInputs, getColorFormatMap, getColorFormatOptions, initColorFormat };
+//# sourceMappingURL=index.js.map

package/es/color-picker/utils/color-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../components/color-picker/utils/color-picker/draggable.ts","../../../../../components/color-picker/utils/color-picker/format.ts"],"sourcesContent":["/* eslint-disable no-use-before-define */\r\nexport interface Coordinate {\r\n  x: number;\r\n  y: number;\r\n}\r\n\r\nexport type DraggableEvent = MouseEvent;\r\n\r\ninterface DraggableCallback {\r\n  (coordinate: Coordinate, event?: DraggableEvent): void;\r\n}\r\n\r\nexport interface DraggableProps {\r\n  start?: DraggableCallback;\r\n  drag?: DraggableCallback;\r\n  end?: DraggableCallback;\r\n}\r\n\r\ninterface DraggableHandles {\r\n  start: (event: DraggableEvent) => void;\r\n  drag: (event: DraggableEvent) => void;\r\n  end: (event: DraggableEvent) => void;\r\n}\r\n\r\n// 配置项\r\nconst defaultsOptions: DraggableProps = {\r\n  start: (coordinate: Coordinate, event: DraggableEvent) => {},\r\n  drag: (coordinate: Coordinate, event: DraggableEvent) => {},\r\n  end: (coordinate: Coordinate, event: DraggableEvent) => {},\r\n};\r\n\r\nexport class Draggable {\r\n  private dragging = false;\r\n\r\n  private $el: HTMLElement;\r\n\r\n  private props: DraggableProps;\r\n\r\n  private handles: DraggableHandles;\r\n\r\n  constructor(el: HTMLElement, options?: DraggableProps) {\r\n    this.$el = el;\r\n    this.props = { ...defaultsOptions, ...options };\r\n    this.handles = {\r\n      start: this.#dragStart.bind(this),\r\n      drag: this.#drag.bind(this),\r\n      end: this.#dragEnd.bind(this),\r\n    };\r\n    this.$el.addEventListener('mousedown', this.handles.start, false);\r\n  }\r\n\r\n  #dragStart(event: DraggableEvent) {\r\n    if (this.dragging) {\r\n      return;\r\n    }\r\n    // event.preventDefault();\r\n    window.addEventListener('mousemove', this.handles.drag, false);\r\n    window.addEventListener('mouseup', this.handles.end, false);\r\n    window.addEventListener('contextmenu', this.handles.end, false);\r\n    this.dragging = true;\r\n    this.props.start(this.#getCoordinate(event), event);\r\n  }\r\n\r\n  #drag(event: DraggableEvent) {\r\n    if (!this.dragging) {\r\n      return;\r\n    }\r\n    this.props.drag(this.#getCoordinate(event), event);\r\n  }\r\n\r\n  #dragEnd(event: DraggableEvent) {\r\n    setTimeout(() => {\r\n      this.dragging = false;\r\n      this.props.end(this.#getCoordinate(event), event);\r\n    }, 0);\r\n    window.removeEventListener('mousemove', this.handles.drag, false);\r\n    window.removeEventListener('mouseup', this.handles.end, false);\r\n    window.removeEventListener('contextmenu', this.handles.end, false);\r\n  }\r\n\r\n  #getCoordinate(event: DraggableEvent) {\r\n    const rect = this.$el.getBoundingClientRect();\r\n    const mouseEvent = event;\r\n    const left = mouseEvent.clientX - rect.left;\r\n    const top = mouseEvent.clientY - rect.top;\r\n    return {\r\n      y: Math.min(Math.max(0, top), rect.height),\r\n      x: Math.min(Math.max(0, left), rect.width),\r\n    };\r\n  }\r\n\r\n  destroy() {\r\n    this.$el.removeEventListener('mousedown', this.handles.start, false);\r\n    window.removeEventListener('mousemove', this.handles.drag, false);\r\n    window.removeEventListener('mouseup', this.handles.end, false);\r\n    window.removeEventListener('contextmenu', this.handles.end, false);\r\n  }\r\n}\r\n\r\nexport default Draggable;\r\n","import Color from './color';\r\nimport { ALPHA_FORMAT_MAP, COLOR_FORMAT_INPUTS, FORMATS } from './constants';\r\nimport type { AlphaConvertibleFormat, BasicColorFormat, ColorFormat } from './types';\r\n\r\n/**\r\n * 兜底处理用户传入的格式，例如：\r\n * - 传入 `RGB`， 但 `enableAlpha` ，则返回 `RGBA`\r\n */\r\nexport const initColorFormat = (format: ColorFormat, enableAlpha: boolean) => {\r\n  if (enableAlpha && format in ALPHA_FORMAT_MAP) {\r\n    return format in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[format as AlphaConvertibleFormat] : format;\r\n  }\r\n  return format as BasicColorFormat;\r\n};\r\n\r\n/**\r\n * 获取不同格式的输入输出值\r\n * - encode：将字符串转换为单独的颜色值，例如 `{r: 255, g: 255, b: 255}`\r\n * - decode：获取完整的颜色字符串，例如 `rgb(255, 255, 255)`\r\n */\r\nexport const getColorFormatMap = (color: Color, type: 'encode' | 'decode') => {\r\n  if (type === 'encode') {\r\n    return {\r\n      HSV: color.getHsva(),\r\n      HSVA: color.getHsva(),\r\n      HSL: color.getHsla(),\r\n      HSLA: color.getHsla(),\r\n      RGB: color.getRgba(),\r\n      RGBA: color.getRgba(),\r\n      CMYK: color.getCmyk(),\r\n      CSS: {\r\n        css: color.css,\r\n      },\r\n      HEX: {\r\n        hex: color.hex,\r\n      },\r\n      HEX8: {\r\n        hex: color.hex8, // 为了减少转换 hex8 的 key 也对应 hex\r\n      },\r\n    };\r\n  }\r\n\r\n  // decode\r\n  return color.getFormatsColorMap();\r\n};\r\n\r\n/**\r\n * 获取下拉框的格式选项\r\n */\r\nexport const getColorFormatOptions = (enableAlpha: boolean) => (\r\n  enableAlpha\r\n    ? FORMATS.map((item) => (item in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[item as AlphaConvertibleFormat] : item))\r\n    : FORMATS\r\n);\r\n\r\n/**\r\n * 获取当前格式的输入框配置\r\n */\r\nexport const getColorFormatInputs = (\r\n  format: ColorFormat = 'RGB',\r\n  enableAlpha: boolean\r\n) => {\r\n  let finalFormat;\r\n\r\n  /* 为了减少 `ALPHA_FORMAT_MAP` 中的重复代码\r\n     `RGBA/HEX8/HSLA/HSVA` 会被转换为 `RGB/HEX/HSL/HSV` 后再匹配\r\n     但在下一步会 push 一个代表透明度的输入框 */\r\n  if (enableAlpha) {\r\n    finalFormat = Object.keys(ALPHA_FORMAT_MAP).find(\r\n      (key) => key in ALPHA_FORMAT_MAP && ALPHA_FORMAT_MAP[key as AlphaConvertibleFormat] === format\r\n    ) || format;\r\n  } else {\r\n    finalFormat = format;\r\n  }\r\n\r\n  if (!COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]) return [];\r\n\r\n  const configs = [\r\n    ...(COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]),\r\n  ];\r\n\r\n  // CMYK 格式不支持透明度\r\n  if (enableAlpha && format !== 'CMYK') {\r\n    configs.push({\r\n      type: 'inputNumber',\r\n      key: 'a',\r\n      min: 0,\r\n      max: 100,\r\n      format: (value: number) => `${value}%`,\r\n      flex: 1.15,\r\n    });\r\n  }\r\n\r\n  return configs;\r\n};\r\n"],"names":["defaultsOptions","start","coordinate","event","drag","end","_Draggable_brand","WeakSet","Draggable","el","options","_classCallCheck","_classPrivateMethodInitSpec","_defineProperty","$el","props","_objectSpread","handles","_assertClassBrand","_dragStart","bind","_drag","_dragEnd","addEventListener","_createClass","key","value","destroy","removeEventListener","window","dragging","_getCoordinate","call","_this","setTimeout","rect","getBoundingClientRect","mouseEvent","left","clientX","top","clientY","y","Math","min","max","height","x","width","initColorFormat","format","enableAlpha","ALPHA_FORMAT_MAP","getColorFormatMap","color","type","HSV","getHsva","HSVA","HSL","getHsla","HSLA","RGB","getRgba","RGBA","CMYK","getCmyk","CSS","css","HEX","hex","HEX8","hex8","getFormatsColorMap","getColorFormatOptions","FORMATS","map","item","getColorFormatInputs","arguments","length","undefined","finalFormat","Object","keys","find","COLOR_FORMAT_INPUTS","configs","_toConsumableArray","push","concat","flex"],"mappings":"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"}

package/es/color-picker/utils/color-picker/types.d.ts

@@ -0,0 +1,28 @@
+import { ALPHA_FORMAT_MAP, FORMATS } from './constants';
+/**
+ * 非透明色类型
+ */
+export type BasicColorFormat = typeof FORMATS[number];
+/**
+ * 支持转为透明格式的非透明色类型
+ */
+export type AlphaConvertibleFormat = keyof typeof ALPHA_FORMAT_MAP;
+/**
+ * 透明色类型
+ */
+export type AlphaColorFormat = typeof ALPHA_FORMAT_MAP[AlphaConvertibleFormat];
+/**
+ * 完整的颜色格式类型
+ */
+export type ColorFormat = BasicColorFormat | AlphaColorFormat;
+/**
+ * 不同颜色格式对应的输入框配置
+ */
+export interface ColorInputProp {
+    key: string;
+    min?: number;
+    max?: number;
+    type: 'input' | 'inputNumber';
+    flex?: number;
+    format?: Function;
+}