@tendaui/components 1.2.3 → 1.3.0

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

@@ -1,187 +1,187 @@
-import type { BasicColorFormat, ColorInputProp } from "./types";
-
-// 最近使用颜色最大个数
-export const TD_COLOR_USED_COLORS_MAX_SIZE = 100; // 每行10个
-
-// 颜色模式options配置
-export const COLOR_MODES = {
-  monochrome: "singleColor",
-  "linear-gradient": "gradientColor"
-};
-
-// 默认颜色
-export const DEFAULT_COLOR = "#001F97";
-
-// 默认渐变色
-export const DEFAULT_LINEAR_GRADIENT = "linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%);";
-
-// 默认系统色彩
-export const DEFAULT_SYSTEM_SWATCH_COLORS = [
-  "#ECF2FE",
-  "#D4E3FC",
-  "#BBD3FB",
-  "#96BBF8",
-  "#699EF5",
-  "#4787F0",
-  "#266FE8",
-  "#0052D9",
-  "#0034B5",
-  "#001F97",
-  "#FDECEE",
-  "#F9D7D9",
-  "#F8B9BE",
-  "#F78D94",
-  "#F36D78",
-  "#E34D59",
-  "#C9353F",
-  "#B11F26",
-  "#951114",
-  "#680506",
-  "#FEF3E6",
-  "#F9E0C7",
-  "#F7C797",
-  "#F2995F",
-  "#ED7B2F",
-  "#D35A21",
-  "#BA431B",
-  "#9E3610",
-  "#842B0B",
-  "#5A1907",
-  "#E8F8F2",
-  "#BCEBDC",
-  "#85DBBE",
-  "#48C79C",
-  "#00A870",
-  "#078D5C",
-  "#067945",
-  "#056334",
-  "#044F2A",
-  "#033017"
-];
-
-/**
- * 非透明色格式化类型
- */
-export const FORMATS = ["HEX", "RGB", "HSL", "HSV", "CMYK", "CSS"] as const;
-
-/**
- * 透明色格式化类型映射
- */
-export const ALPHA_FORMAT_MAP = {
-  HEX: "HEX8",
-  RGB: "RGBA",
-  HSL: "HSLA",
-  HSV: "HSVA"
-} as const;
-
-/**
- * 不同格式对应的输入框
- */
-export const COLOR_FORMAT_INPUTS: Record<BasicColorFormat, ColorInputProp[]> = {
-  RGB: [
-    {
-      key: "r",
-      min: 0,
-      max: 255,
-      type: "inputNumber"
-    },
-    {
-      key: "g",
-      min: 0,
-      max: 255,
-      type: "inputNumber"
-    },
-    {
-      key: "b",
-      min: 0,
-      max: 255,
-      type: "inputNumber"
-    }
-  ],
-  HSV: [
-    {
-      key: "h",
-      min: 0,
-      max: 360,
-      type: "inputNumber"
-    },
-    {
-      key: "s",
-      min: 0,
-      max: 100,
-      type: "inputNumber"
-    },
-    {
-      key: "v",
-      min: 0,
-      max: 100,
-      type: "inputNumber"
-    }
-  ],
-  HSL: [
-    {
-      key: "h",
-      min: 0,
-      max: 360,
-      type: "inputNumber"
-    },
-    {
-      key: "s",
-      min: 0,
-      max: 100,
-      type: "inputNumber"
-    },
-    {
-      key: "l",
-      min: 0,
-      max: 100,
-      type: "inputNumber"
-    }
-  ],
-  CMYK: [
-    {
-      key: "c",
-      min: 0,
-      max: 255,
-      type: "inputNumber"
-    },
-    {
-      key: "m",
-      min: 0,
-      max: 255,
-      type: "inputNumber"
-    },
-    {
-      key: "y",
-      min: 0,
-      max: 255,
-      type: "inputNumber"
-    },
-    {
-      key: "k",
-      min: 0,
-      max: 255,
-      type: "inputNumber"
-    }
-  ],
-  CSS: [
-    {
-      key: "css",
-      type: "input",
-      flex: 3
-    }
-  ],
-  HEX: [
-    {
-      key: "hex",
-      type: "input",
-      flex: 3
-    }
-  ]
-};
-
-// 色板尺寸
-export const SATURATION_PANEL_DEFAULT_WIDTH = 230;
-export const SATURATION_PANEL_DEFAULT_HEIGHT = 168;
-export const SLIDER_DEFAULT_WIDTH = 186;
-export const GRADIENT_SLIDER_DEFAULT_WIDTH = 176;
+import type { BasicColorFormat, ColorInputProp } from "./types";
+
+// 最近使用颜色最大个数
+export const TD_COLOR_USED_COLORS_MAX_SIZE = 100; // 每行10个
+
+// 颜色模式options配置
+export const COLOR_MODES = {
+  monochrome: "singleColor",
+  "linear-gradient": "gradientColor"
+};
+
+// 默认颜色
+export const DEFAULT_COLOR = "#001F97";
+
+// 默认渐变色
+export const DEFAULT_LINEAR_GRADIENT = "linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%);";
+
+// 默认系统色彩
+export const DEFAULT_SYSTEM_SWATCH_COLORS = [
+  "#ECF2FE",
+  "#D4E3FC",
+  "#BBD3FB",
+  "#96BBF8",
+  "#699EF5",
+  "#4787F0",
+  "#266FE8",
+  "#0052D9",
+  "#0034B5",
+  "#001F97",
+  "#FDECEE",
+  "#F9D7D9",
+  "#F8B9BE",
+  "#F78D94",
+  "#F36D78",
+  "#E34D59",
+  "#C9353F",
+  "#B11F26",
+  "#951114",
+  "#680506",
+  "#FEF3E6",
+  "#F9E0C7",
+  "#F7C797",
+  "#F2995F",
+  "#ED7B2F",
+  "#D35A21",
+  "#BA431B",
+  "#9E3610",
+  "#842B0B",
+  "#5A1907",
+  "#E8F8F2",
+  "#BCEBDC",
+  "#85DBBE",
+  "#48C79C",
+  "#00A870",
+  "#078D5C",
+  "#067945",
+  "#056334",
+  "#044F2A",
+  "#033017"
+];
+
+/**
+ * 非透明色格式化类型
+ */
+export const FORMATS = ["HEX", "RGB", "HSL", "HSV", "CMYK", "CSS"] as const;
+
+/**
+ * 透明色格式化类型映射
+ */
+export const ALPHA_FORMAT_MAP = {
+  HEX: "HEX8",
+  RGB: "RGBA",
+  HSL: "HSLA",
+  HSV: "HSVA"
+} as const;
+
+/**
+ * 不同格式对应的输入框
+ */
+export const COLOR_FORMAT_INPUTS: Record<BasicColorFormat, ColorInputProp[]> = {
+  RGB: [
+    {
+      key: "r",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    },
+    {
+      key: "g",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    },
+    {
+      key: "b",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    }
+  ],
+  HSV: [
+    {
+      key: "h",
+      min: 0,
+      max: 360,
+      type: "inputNumber"
+    },
+    {
+      key: "s",
+      min: 0,
+      max: 100,
+      type: "inputNumber"
+    },
+    {
+      key: "v",
+      min: 0,
+      max: 100,
+      type: "inputNumber"
+    }
+  ],
+  HSL: [
+    {
+      key: "h",
+      min: 0,
+      max: 360,
+      type: "inputNumber"
+    },
+    {
+      key: "s",
+      min: 0,
+      max: 100,
+      type: "inputNumber"
+    },
+    {
+      key: "l",
+      min: 0,
+      max: 100,
+      type: "inputNumber"
+    }
+  ],
+  CMYK: [
+    {
+      key: "c",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    },
+    {
+      key: "m",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    },
+    {
+      key: "y",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    },
+    {
+      key: "k",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    }
+  ],
+  CSS: [
+    {
+      key: "css",
+      type: "input",
+      flex: 3
+    }
+  ],
+  HEX: [
+    {
+      key: "hex",
+      type: "input",
+      flex: 3
+    }
+  ]
+};
+
+// 色板尺寸
+export const SATURATION_PANEL_DEFAULT_WIDTH = 230;
+export const SATURATION_PANEL_DEFAULT_HEIGHT = 168;
+export const SLIDER_DEFAULT_WIDTH = 186;
+export const GRADIENT_SLIDER_DEFAULT_WIDTH = 176;

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

@@ -1,100 +1,99 @@
-/* eslint-disable no-use-before-define */
-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;
-}
-
-interface DraggableHandles {
-  start: (event: DraggableEvent) => void;
-  drag: (event: DraggableEvent) => void;
-  end: (event: DraggableEvent) => void;
-}
-
-// 配置项
-const defaultsOptions: DraggableProps = {
-  start: (coordinate: Coordinate, event: DraggableEvent) => {},
-  drag: (coordinate: Coordinate, event: DraggableEvent) => {},
-  end: (coordinate: Coordinate, event: DraggableEvent) => {},
-};
-
-export class Draggable {
-  private dragging = false;
-
-  private $el: HTMLElement;
-
-  private props: DraggableProps;
-
-  private handles: DraggableHandles;
-
-  constructor(el: HTMLElement, options?: DraggableProps) {
-    this.$el = el;
-    this.props = { ...defaultsOptions, ...options };
-    this.handles = {
-      start: this.#dragStart.bind(this),
-      drag: this.#drag.bind(this),
-      end: this.#dragEnd.bind(this),
-    };
-    this.$el.addEventListener('mousedown', this.handles.start, false);
-  }
-
-  #dragStart(event: DraggableEvent) {
-    if (this.dragging) {
-      return;
-    }
-    // event.preventDefault();
-    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(this.#getCoordinate(event), event);
-  }
-
-  #drag(event: DraggableEvent) {
-    if (!this.dragging) {
-      return;
-    }
-    this.props.drag(this.#getCoordinate(event), event);
-  }
-
-  #dragEnd(event: DraggableEvent) {
-    setTimeout(() => {
-      this.dragging = false;
-      this.props.end(this.#getCoordinate(event), event);
-    }, 0);
-    window.removeEventListener('mousemove', this.handles.drag, false);
-    window.removeEventListener('mouseup', this.handles.end, false);
-    window.removeEventListener('contextmenu', this.handles.end, false);
-  }
-
-  #getCoordinate(event: DraggableEvent) {
-    const rect = this.$el.getBoundingClientRect();
-    const mouseEvent = event;
-    const left = mouseEvent.clientX - rect.left;
-    const top = mouseEvent.clientY - rect.top;
-    return {
-      y: Math.min(Math.max(0, top), rect.height),
-      x: Math.min(Math.max(0, left), rect.width),
-    };
-  }
-
-  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);
-  }
-}
-
-export default Draggable;
+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;
+}
+
+interface DraggableHandles {
+  start: (event: DraggableEvent) => void;
+  drag: (event: DraggableEvent) => void;
+  end: (event: DraggableEvent) => void;
+}
+
+// 配置项
+const defaultsOptions: DraggableProps = {
+  start: (coordinate: Coordinate, event: DraggableEvent) => {},
+  drag: (coordinate: Coordinate, event: DraggableEvent) => {},
+  end: (coordinate: Coordinate, event: DraggableEvent) => {}
+};
+
+export class Draggable {
+  private dragging = false;
+
+  private $el: HTMLElement;
+
+  private props: DraggableProps;
+
+  private handles: DraggableHandles;
+
+  constructor(el: HTMLElement, options?: DraggableProps) {
+    this.$el = el;
+    this.props = { ...defaultsOptions, ...options };
+    this.handles = {
+      start: this.#dragStart.bind(this),
+      drag: this.#drag.bind(this),
+      end: this.#dragEnd.bind(this)
+    };
+    this.$el.addEventListener("mousedown", this.handles.start, false);
+  }
+
+  #dragStart(event: DraggableEvent) {
+    if (this.dragging) {
+      return;
+    }
+    // event.preventDefault();
+    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(this.#getCoordinate(event), event);
+  }
+
+  #drag(event: DraggableEvent) {
+    if (!this.dragging) {
+      return;
+    }
+    this.props.drag(this.#getCoordinate(event), event);
+  }
+
+  #dragEnd(event: DraggableEvent) {
+    setTimeout(() => {
+      this.dragging = false;
+      this.props.end(this.#getCoordinate(event), event);
+    }, 0);
+    window.removeEventListener("mousemove", this.handles.drag, false);
+    window.removeEventListener("mouseup", this.handles.end, false);
+    window.removeEventListener("contextmenu", this.handles.end, false);
+  }
+
+  #getCoordinate(event: DraggableEvent) {
+    const rect = this.$el.getBoundingClientRect();
+    const mouseEvent = event;
+    const left = mouseEvent.clientX - rect.left;
+    const top = mouseEvent.clientY - rect.top;
+    return {
+      y: Math.min(Math.max(0, top), rect.height),
+      x: Math.min(Math.max(0, left), rect.width)
+    };
+  }
+
+  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);
+  }
+}
+
+export default Draggable;