@tendaui/components 1.2.4 → 1.3.1

package/checkbox/_example/group-disabled.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function GroupDisabled() {
+  return (
+    <Checkbox.Group defaultValue={["北京", "深圳"]} disabled>
+      <Checkbox value="北京">北京</Checkbox>
+      <Checkbox value="上海">上海</Checkbox>
+      <Checkbox value="广州">广州</Checkbox>
+      <Checkbox value="深圳">深圳</Checkbox>
+    </Checkbox.Group>
+  );
+}

package/checkbox/_example/group-with-check-all.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function GroupWithCheckAll() {
+  const [value, setValue] = useState<string[]>(["上海"]);
+  const handleValueChange = (val) => {
+    console.log(val);
+    setValue(val);
+  };
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>当前选中：{value.filter((item) => item).join(", ")}</div>
+      <Checkbox.Group value={value} onChange={(val) => handleValueChange(val)}>
+        <Checkbox checkAll>全选</Checkbox>
+        <Checkbox value="北京">北京</Checkbox>
+        <Checkbox value="上海">上海</Checkbox>
+        <Checkbox value="广州">广州</Checkbox>
+        <Checkbox value="深圳">深圳</Checkbox>
+      </Checkbox.Group>
+    </div>
+  );
+}

package/checkbox/_example/group-with-max.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function GroupWithMax() {
+  const [value, setValue] = useState<string[]>(["北京"]);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>最多选择 2 项，当前选中：{value.join(", ") || "无"}</div>
+      <Checkbox.Group value={value} onChange={(val) => setValue(val as string[])} max={2}>
+        <Checkbox value="北京">北京</Checkbox>
+        <Checkbox value="上海">上海</Checkbox>
+        <Checkbox value="广州">广州</Checkbox>
+        <Checkbox value="深圳">深圳</Checkbox>
+      </Checkbox.Group>
+    </div>
+  );
+}

package/checkbox/_example/group-with-options.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function GroupWithOptions() {
+  const [value, setValue] = useState<(string | number)[]>([2]);
+  const options = [
+    { label: "选项一", value: 1 },
+    { label: "选项二", value: 2 },
+    { label: "选项三", value: 3, disabled: true },
+    { label: "选项四", value: 4 }
+  ];
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>当前选中值：{JSON.stringify(value)}</div>
+      <Checkbox.Group options={options} value={value} onChange={(val) => setValue(val as (string | number)[])} />
+    </div>
+  );
+}

package/checkbox/_example/group.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function Group() {
+  const [value, setValue] = useState<string[]>(["北京"]);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>当前选中：{value.join(", ") || "无"}</div>
+      <Checkbox.Group value={value} onChange={(val) => setValue(val as string[])}>
+        <Checkbox value="北京">北京</Checkbox>
+        <Checkbox value="上海">上海</Checkbox>
+        <Checkbox value="广州">广州</Checkbox>
+        <Checkbox value="深圳">深圳</Checkbox>
+      </Checkbox.Group>
+    </div>
+  );
+}

package/checkbox/_example/states.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function States() {
+  return (
+    <div style={{ display: "flex", gap: "16px", flexWrap: "wrap" }}>
+      <Checkbox>未选中项</Checkbox>
+      <Checkbox defaultChecked>选中项</Checkbox>
+      <Checkbox indeterminate>半选状态</Checkbox>
+      <Checkbox disabled>未选禁用项</Checkbox>
+      <Checkbox disabled defaultChecked>
+        选中禁用项
+      </Checkbox>
+      <Checkbox readonly defaultChecked>
+        只读选中项
+      </Checkbox>
+    </div>
+  );
+}

package/color-picker/ColorPicker.tsx

@@ -11,8 +11,18 @@ import useDefaultProps from "../hooks/useDefaultProps";
 
 const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   const baseClassName = useClassName();
-  const { popupProps, clearable, disabled, borderless, inputProps, onChange, onClear, ...panelProps } =
-    useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);
+  const {
+    popupProps,
+    clearable,
+    disabled,
+    borderless,
+    inputProps,
+    format,
+    enableAlpha,
+    onChange,
+    onClear,
+    ...panelProps
+  } = useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);
   const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};
 
   const [innerValue, setInnerValue] = useControlled(props, "value", onChange);
@@ -40,6 +50,8 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
             {...panelProps}
             clearable={clearable}
             disabled={disabled}
+            format={format}
+            enableAlpha={enableAlpha}
             value={innerValue}
             onChange={(value: string, context: TdColorContext) => setInnerValue(value, context)}
             ref={colorPanelRef}
@@ -53,6 +65,8 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
           disabled={disabled}
           borderless={borderless}
           inputProps={inputProps}
+          format={format}
+          enableAlpha={enableAlpha}
           value={innerValue}
           onChange={setInnerValue}
           onClear={onClear}

package/color-picker/_example/base.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function Base() {
+  const [color, setColor] = useState("#0052d9");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ColorPicker format="HEX" value={color} onChange={(v) => setColor(v)} />
+      <div>当前颜色值：{color}</div>
+    </div>
+  );
+}

package/color-picker/_example/borderless.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function Borderless() {
+  return (
+    <div style={{ display: "flex", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>有边框</div>
+        <ColorPicker defaultValue="#0052d9" />
+      </div>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>无边框</div>
+        <ColorPicker borderless defaultValue="#0052d9" />
+      </div>
+    </div>
+  );
+}

package/color-picker/_example/clearable.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function Clearable() {
+  const [color, setColor] = useState("#0052d9");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ColorPicker clearable value={color} onChange={(v) => setColor(v)} onClear={() => setColor("")} />
+      <div>当前颜色值：{color || "(空)"}</div>
+    </div>
+  );
+}

package/color-picker/_example/disabled.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function Disabled() {
+  return (
+    <div style={{ display: "flex", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>正常状态</div>
+        <ColorPicker defaultValue="#0052d9" />
+      </div>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>禁用状态</div>
+        <ColorPicker disabled defaultValue="#0052d9" />
+      </div>
+    </div>
+  );
+}

package/color-picker/_example/formats.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { ColorPicker } from "@tendaui/react";
+
+export default function Formats() {
+  const [hexColor, setHexColor] = useState("#0052d9");
+  const [rgbColor, setRgbColor] = useState("rgb(0, 82, 217)");
+  const [hslColor, setHslColor] = useState("hsl(217, 100%, 43%)");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>HEX 格式</div>
+        <ColorPicker format="HEX" value={hexColor} onChange={(v) => setHexColor(v)} />
+        <div style={{ marginTop: "8px", fontSize: "12px", color: "#999" }}>值：{hexColor}</div>
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>RGB 格式</div>
+        <ColorPicker format="RGB" value={rgbColor} onChange={(v) => setRgbColor(v)} />
+        <div style={{ marginTop: "8px", fontSize: "12px", color: "#999" }}>值：{rgbColor}</div>
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>HSL 格式</div>
+        <ColorPicker format="HSL" value={hslColor} onChange={(v) => setHslColor(v)} />
+        <div style={{ marginTop: "8px", fontSize: "12px", color: "#999" }}>值：{hslColor}</div>
+      </div>
+    </div>
+  );
+}

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

@@ -11,9 +11,9 @@ export const rgb2cmyk = (red: number, green: number, blue: number) => {
   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);
+  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;
@@ -61,7 +61,7 @@ export const cmyk2rgb = (cyan: number, magenta: number, yellow: number, black: n
   return {
     r,
     g,
-    b,
+    b
   };
 };
 
@@ -76,7 +76,7 @@ const toNumber = (str: string) => Math.max(0, Math.min(255, parseInt(str, 10)));
  */
 export const cmykInputToColor = (input: string) => {
   if (/cmyk/i.test(input)) {
-    const str = input.replace(/\s/g, '');
+    const str = input.replace(/\s/g, "");
     const match = str.match(REG_CMYK_STRING);
     const c = toNumber(match[1]);
     const m = toNumber(match[2]);

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-use-before-define */
 export interface Coordinate {
   x: number;
   y: number;
@@ -26,7 +25,7 @@ interface DraggableHandles {
 const defaultsOptions: DraggableProps = {
   start: (coordinate: Coordinate, event: DraggableEvent) => {},
   drag: (coordinate: Coordinate, event: DraggableEvent) => {},
-  end: (coordinate: Coordinate, event: DraggableEvent) => {},
+  end: (coordinate: Coordinate, event: DraggableEvent) => {}
 };
 
 export class Draggable {
@@ -44,9 +43,9 @@ export class Draggable {
     this.handles = {
       start: this.#dragStart.bind(this),
       drag: this.#drag.bind(this),
-      end: this.#dragEnd.bind(this),
+      end: this.#dragEnd.bind(this)
     };
-    this.$el.addEventListener('mousedown', this.handles.start, false);
+    this.$el.addEventListener("mousedown", this.handles.start, false);
   }
 
   #dragStart(event: DraggableEvent) {
@@ -54,9 +53,9 @@ export class Draggable {
       return;
     }
     // event.preventDefault();
-    window.addEventListener('mousemove', this.handles.drag, false);
-    window.addEventListener('mouseup', this.handles.end, false);
-    window.addEventListener('contextmenu', this.handles.end, false);
+    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);
   }
@@ -73,9 +72,9 @@ export class Draggable {
       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);
+    window.removeEventListener("mousemove", this.handles.drag, false);
+    window.removeEventListener("mouseup", this.handles.end, false);
+    window.removeEventListener("contextmenu", this.handles.end, false);
   }
 
   #getCoordinate(event: DraggableEvent) {
@@ -85,15 +84,15 @@ export class Draggable {
     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),
+      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);
+    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);
   }
 }