@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

package/src/dnd/createDraggableCollectionState.d.ts

@@ -3,49 +3,58 @@
  *
  * Provides reactive state for dragging items from a collection.
  */
-import { type Accessor } from 'solid-js';
-import type { DragItem, DraggableCollectionStartEvent, DraggableCollectionMoveEvent, DraggableCollectionEndEvent, DropOperation, DragPreviewRenderer } from './types';
+import { type Accessor } from "solid-js";
+import type {
+  DragItem,
+  DraggableCollectionStartEvent,
+  DraggableCollectionMoveEvent,
+  DraggableCollectionEndEvent,
+  DropOperation,
+  DragPreviewRenderer,
+} from "./types";
 export interface DraggableCollectionStateOptions<T = object> {
-    /** A function that returns the items being dragged. */
-    getItems: (keys: Set<string | number>) => DragItem[];
-    /** Function that returns the allowed drop operations. */
-    getAllowedDropOperations?: () => DropOperation[];
-    /** Handler that is called when a drag operation is started. */
-    onDragStart?: (e: DraggableCollectionStartEvent) => void;
-    /** Handler that is called when the drag is moved. */
-    onDragMove?: (e: DraggableCollectionMoveEvent) => void;
-    /** Handler that is called when the drag operation ends. */
-    onDragEnd?: (e: DraggableCollectionEndEvent) => void;
-    /** Whether the drag operation is disabled. */
-    isDisabled?: boolean;
-    /** Preview renderer function ref. */
-    preview?: {
-        current: DragPreviewRenderer | null;
-    };
+  /** A function that returns the items being dragged. */
+  getItems: (keys: Set<string | number>) => DragItem[];
+  /** Function that returns the allowed drop operations. */
+  getAllowedDropOperations?: () => DropOperation[];
+  /** Handler that is called when a drag operation is started. */
+  onDragStart?: (e: DraggableCollectionStartEvent) => void;
+  /** Handler that is called when the drag is moved. */
+  onDragMove?: (e: DraggableCollectionMoveEvent) => void;
+  /** Handler that is called when the drag operation ends. */
+  onDragEnd?: (e: DraggableCollectionEndEvent) => void;
+  /** Whether the drag operation is disabled. */
+  isDisabled?: boolean;
+  /** Preview renderer function ref. */
+  preview?: {
+    current: DragPreviewRenderer | null;
+  };
 }
 export interface DraggableCollectionState {
-    /** Whether items are currently being dragged. */
-    readonly isDragging: boolean;
-    /** The keys of the items being dragged. */
-    readonly draggingKeys: Set<string | number>;
-    /** Whether dragging is disabled. */
-    readonly isDisabled: boolean;
-    /** Start a drag operation with the given keys. */
-    startDrag(keys: Set<string | number>, x: number, y: number): void;
-    /** Update drag position. */
-    moveDrag(x: number, y: number): void;
-    /** End a drag operation. */
-    endDrag(x: number, y: number, dropOperation: DropOperation, isInternal: boolean): void;
-    /** Cancel a drag operation. */
-    cancelDrag(): void;
-    /** Get the items being dragged for the given keys. */
-    getItems(keys: Set<string | number>): DragItem[];
-    /** Get allowed drop operations. */
-    getAllowedDropOperations(): DropOperation[];
-    /** Preview renderer. */
-    readonly preview: {
+  /** Whether items are currently being dragged. */
+  readonly isDragging: boolean;
+  /** The keys of the items being dragged. */
+  readonly draggingKeys: Set<string | number>;
+  /** Whether dragging is disabled. */
+  readonly isDisabled: boolean;
+  /** Start a drag operation with the given keys. */
+  startDrag(keys: Set<string | number>, x: number, y: number): void;
+  /** Update drag position. */
+  moveDrag(x: number, y: number): void;
+  /** End a drag operation. */
+  endDrag(x: number, y: number, dropOperation: DropOperation, isInternal: boolean): void;
+  /** Cancel a drag operation. */
+  cancelDrag(): void;
+  /** Get the items being dragged for the given keys. */
+  getItems(keys: Set<string | number>): DragItem[];
+  /** Get allowed drop operations. */
+  getAllowedDropOperations(): DropOperation[];
+  /** Preview renderer. */
+  readonly preview:
+    | {
         current: DragPreviewRenderer | null;
-    } | undefined;
+      }
+    | undefined;
 }
 /**
  * Creates state for dragging items from a collection.
@@ -53,5 +62,7 @@ export interface DraggableCollectionState {
  * @param props - Accessor returning draggable collection options
  * @returns Draggable collection state object
  */
-export declare function createDraggableCollectionState<T = object>(props: Accessor<DraggableCollectionStateOptions<T>>): DraggableCollectionState;
-//# sourceMappingURL=createDraggableCollectionState.d.ts.map
+export declare function createDraggableCollectionState<T = object>(
+  props: Accessor<DraggableCollectionStateOptions<T>>,
+): DraggableCollectionState;
+//# sourceMappingURL=createDraggableCollectionState.d.ts.map

package/src/dnd/createDraggableCollectionState.ts

@@ -1,165 +1,158 @@
-/**
- * Draggable collection state management for solid-stately.
- *
- * Provides reactive state for dragging items from a collection.
- */
-
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import type {
-  DragItem,
-  DraggableCollectionStartEvent,
-  DraggableCollectionMoveEvent,
-  DraggableCollectionEndEvent,
-  DropOperation,
-  DragPreviewRenderer,
-} from './types';
-
-export interface DraggableCollectionStateOptions<T = object> {
-  /** A function that returns the items being dragged. */
-  getItems: (keys: Set<string | number>) => DragItem[];
-  /** Function that returns the allowed drop operations. */
-  getAllowedDropOperations?: () => DropOperation[];
-  /** Handler that is called when a drag operation is started. */
-  onDragStart?: (e: DraggableCollectionStartEvent) => void;
-  /** Handler that is called when the drag is moved. */
-  onDragMove?: (e: DraggableCollectionMoveEvent) => void;
-  /** Handler that is called when the drag operation ends. */
-  onDragEnd?: (e: DraggableCollectionEndEvent) => void;
-  /** Whether the drag operation is disabled. */
-  isDisabled?: boolean;
-  /** Preview renderer function ref. */
-  preview?: { current: DragPreviewRenderer | null };
-}
-
-export interface DraggableCollectionState {
-  /** Whether items are currently being dragged. */
-  readonly isDragging: boolean;
-  /** The keys of the items being dragged. */
-  readonly draggingKeys: Set<string | number>;
-  /** Whether dragging is disabled. */
-  readonly isDisabled: boolean;
-  /** Start a drag operation with the given keys. */
-  startDrag(keys: Set<string | number>, x: number, y: number): void;
-  /** Update drag position. */
-  moveDrag(x: number, y: number): void;
-  /** End a drag operation. */
-  endDrag(x: number, y: number, dropOperation: DropOperation, isInternal: boolean): void;
-  /** Cancel a drag operation. */
-  cancelDrag(): void;
-  /** Get the items being dragged for the given keys. */
-  getItems(keys: Set<string | number>): DragItem[];
-  /** Get allowed drop operations. */
-  getAllowedDropOperations(): DropOperation[];
-  /** Preview renderer. */
-  readonly preview: { current: DragPreviewRenderer | null } | undefined;
-}
-
-/**
- * Creates state for dragging items from a collection.
- *
- * @param props - Accessor returning draggable collection options
- * @returns Draggable collection state object
- */
-export function createDraggableCollectionState<T = object>(
-  props: Accessor<DraggableCollectionStateOptions<T>>
-): DraggableCollectionState {
-  const getProps = createMemo(() => props());
-
-  const [isDragging, setIsDragging] = createSignal(false);
-  const [draggingKeys, setDraggingKeys] = createSignal<Set<string | number>>(
-    new Set()
-  );
-
-  const startDrag = (keys: Set<string | number>, x: number, y: number) => {
-    const p = getProps();
-    if (p.isDisabled) return;
-
-    setIsDragging(true);
-    setDraggingKeys(keys);
-
-    if (typeof p.onDragStart === 'function') {
-      p.onDragStart({
-        type: 'dragstart',
-        x,
-        y,
-        keys,
-      });
-    }
-  };
-
-  const moveDrag = (x: number, y: number) => {
-    const p = getProps();
-    if (!isDragging() || p.isDisabled) return;
-
-    if (typeof p.onDragMove === 'function') {
-      p.onDragMove({
-        type: 'dragmove',
-        x,
-        y,
-        keys: draggingKeys(),
-      });
-    }
-  };
-
-  const endDrag = (
-    x: number,
-    y: number,
-    dropOperation: DropOperation,
-    isInternal: boolean
-  ) => {
-    const p = getProps();
-    const keys = draggingKeys();
-
-    setIsDragging(false);
-    setDraggingKeys(new Set<string | number>());
-
-    if (typeof p.onDragEnd === 'function') {
-      p.onDragEnd({
-        type: 'dragend',
-        x,
-        y,
-        dropOperation,
-        keys,
-        isInternal,
-      });
-    }
-  };
-
-  const cancelDrag = () => {
-    endDrag(0, 0, 'cancel', false);
-  };
-
-  const getItems = (keys: Set<string | number>) => {
-    const p = getProps();
-    return p.getItems(keys);
-  };
-
-  const getAllowedDropOperations = (): DropOperation[] => {
-    const p = getProps();
-    if (typeof p.getAllowedDropOperations === 'function') {
-      return p.getAllowedDropOperations();
-    }
-    return ['move', 'copy', 'link'];
-  };
-
-  return {
-    get isDragging() {
-      return isDragging();
-    },
-    get draggingKeys() {
-      return draggingKeys();
-    },
-    get isDisabled() {
-      return getProps().isDisabled ?? false;
-    },
-    get preview() {
-      return getProps().preview;
-    },
-    startDrag,
-    moveDrag,
-    endDrag,
-    cancelDrag,
-    getItems,
-    getAllowedDropOperations,
-  };
-}
+/**
+ * Draggable collection state management for solid-stately.
+ *
+ * Provides reactive state for dragging items from a collection.
+ */
+
+import { createSignal, createMemo, type Accessor } from "solid-js";
+import type {
+  DragItem,
+  DraggableCollectionStartEvent,
+  DraggableCollectionMoveEvent,
+  DraggableCollectionEndEvent,
+  DropOperation,
+  DragPreviewRenderer,
+} from "./types";
+
+export interface DraggableCollectionStateOptions<T = object> {
+  /** A function that returns the items being dragged. */
+  getItems: (keys: Set<string | number>) => DragItem[];
+  /** Function that returns the allowed drop operations. */
+  getAllowedDropOperations?: () => DropOperation[];
+  /** Handler that is called when a drag operation is started. */
+  onDragStart?: (e: DraggableCollectionStartEvent) => void;
+  /** Handler that is called when the drag is moved. */
+  onDragMove?: (e: DraggableCollectionMoveEvent) => void;
+  /** Handler that is called when the drag operation ends. */
+  onDragEnd?: (e: DraggableCollectionEndEvent) => void;
+  /** Whether the drag operation is disabled. */
+  isDisabled?: boolean;
+  /** Preview renderer function ref. */
+  preview?: { current: DragPreviewRenderer | null };
+}
+
+export interface DraggableCollectionState {
+  /** Whether items are currently being dragged. */
+  readonly isDragging: boolean;
+  /** The keys of the items being dragged. */
+  readonly draggingKeys: Set<string | number>;
+  /** Whether dragging is disabled. */
+  readonly isDisabled: boolean;
+  /** Start a drag operation with the given keys. */
+  startDrag(keys: Set<string | number>, x: number, y: number): void;
+  /** Update drag position. */
+  moveDrag(x: number, y: number): void;
+  /** End a drag operation. */
+  endDrag(x: number, y: number, dropOperation: DropOperation, isInternal: boolean): void;
+  /** Cancel a drag operation. */
+  cancelDrag(): void;
+  /** Get the items being dragged for the given keys. */
+  getItems(keys: Set<string | number>): DragItem[];
+  /** Get allowed drop operations. */
+  getAllowedDropOperations(): DropOperation[];
+  /** Preview renderer. */
+  readonly preview: { current: DragPreviewRenderer | null } | undefined;
+}
+
+/**
+ * Creates state for dragging items from a collection.
+ *
+ * @param props - Accessor returning draggable collection options
+ * @returns Draggable collection state object
+ */
+export function createDraggableCollectionState<T = object>(
+  props: Accessor<DraggableCollectionStateOptions<T>>,
+): DraggableCollectionState {
+  const getProps = createMemo(() => props());
+
+  const [isDragging, setIsDragging] = createSignal(false);
+  const [draggingKeys, setDraggingKeys] = createSignal<Set<string | number>>(new Set());
+
+  const startDrag = (keys: Set<string | number>, x: number, y: number) => {
+    const p = getProps();
+    if (p.isDisabled) return;
+
+    setIsDragging(true);
+    setDraggingKeys(keys);
+
+    if (typeof p.onDragStart === "function") {
+      p.onDragStart({
+        type: "dragstart",
+        x,
+        y,
+        keys,
+      });
+    }
+  };
+
+  const moveDrag = (x: number, y: number) => {
+    const p = getProps();
+    if (!isDragging() || p.isDisabled) return;
+
+    if (typeof p.onDragMove === "function") {
+      p.onDragMove({
+        type: "dragmove",
+        x,
+        y,
+        keys: draggingKeys(),
+      });
+    }
+  };
+
+  const endDrag = (x: number, y: number, dropOperation: DropOperation, isInternal: boolean) => {
+    const p = getProps();
+    const keys = draggingKeys();
+
+    setIsDragging(false);
+    setDraggingKeys(new Set<string | number>());
+
+    if (typeof p.onDragEnd === "function") {
+      p.onDragEnd({
+        type: "dragend",
+        x,
+        y,
+        dropOperation,
+        keys,
+        isInternal,
+      });
+    }
+  };
+
+  const cancelDrag = () => {
+    endDrag(0, 0, "cancel", false);
+  };
+
+  const getItems = (keys: Set<string | number>) => {
+    const p = getProps();
+    return p.getItems(keys);
+  };
+
+  const getAllowedDropOperations = (): DropOperation[] => {
+    const p = getProps();
+    if (typeof p.getAllowedDropOperations === "function") {
+      return p.getAllowedDropOperations();
+    }
+    return ["move", "copy", "link"];
+  };
+
+  return {
+    get isDragging() {
+      return isDragging();
+    },
+    get draggingKeys() {
+      return draggingKeys();
+    },
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get preview() {
+      return getProps().preview;
+    },
+    startDrag,
+    moveDrag,
+    endDrag,
+    cancelDrag,
+    getItems,
+    getAllowedDropOperations,
+  };
+}

package/src/dnd/createDropState.d.ts

@@ -3,53 +3,72 @@
  *
  * Provides reactive state for drop target operations.
  */
-import { type Accessor } from 'solid-js';
-import type { DropItem, DropEnterEvent, DropMoveEvent, DropExitEvent, DropActivateEvent, DropEvent, DropOperation, DragTypes } from './types';
+import { type Accessor } from "solid-js";
+import type {
+  DropItem,
+  DropEnterEvent,
+  DropMoveEvent,
+  DropExitEvent,
+  DropActivateEvent,
+  DropEvent,
+  DropOperation,
+  DragTypes,
+} from "./types";
 export interface DropStateOptions {
-    /**
-     * A function returning the drop operation to be performed.
-     */
-    getDropOperation?: (types: DragTypes, allowedOperations: DropOperation[]) => DropOperation;
-    /**
-     * A function returning the drop operation for a specific point.
-     */
-    getDropOperationForPoint?: (types: DragTypes, allowedOperations: DropOperation[], x: number, y: number) => DropOperation;
-    /** Handler that is called when a valid drag enters the drop target. */
-    onDropEnter?: (e: DropEnterEvent) => void;
-    /** Handler that is called when a valid drag is moved within the drop target. */
-    onDropMove?: (e: DropMoveEvent) => void;
-    /** Handler that is called after a valid drag is held over the drop target. */
-    onDropActivate?: (e: DropActivateEvent) => void;
-    /** Handler that is called when a valid drag exits the drop target. */
-    onDropExit?: (e: DropExitEvent) => void;
-    /** Handler that is called when a valid drag is dropped on the drop target. */
-    onDrop?: (e: DropEvent) => void;
-    /** Whether there is a separate drop button affordance. */
-    hasDropButton?: boolean;
-    /** Whether the drop target is disabled. */
-    isDisabled?: boolean;
+  /**
+   * A function returning the drop operation to be performed.
+   */
+  getDropOperation?: (types: DragTypes, allowedOperations: DropOperation[]) => DropOperation;
+  /**
+   * A function returning the drop operation for a specific point.
+   */
+  getDropOperationForPoint?: (
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+    x: number,
+    y: number,
+  ) => DropOperation;
+  /** Handler that is called when a valid drag enters the drop target. */
+  onDropEnter?: (e: DropEnterEvent) => void;
+  /** Handler that is called when a valid drag is moved within the drop target. */
+  onDropMove?: (e: DropMoveEvent) => void;
+  /** Handler that is called after a valid drag is held over the drop target. */
+  onDropActivate?: (e: DropActivateEvent) => void;
+  /** Handler that is called when a valid drag exits the drop target. */
+  onDropExit?: (e: DropExitEvent) => void;
+  /** Handler that is called when a valid drag is dropped on the drop target. */
+  onDrop?: (e: DropEvent) => void;
+  /** Whether there is a separate drop button affordance. */
+  hasDropButton?: boolean;
+  /** Whether the drop target is disabled. */
+  isDisabled?: boolean;
 }
 export interface DropState {
-    /** Whether the drop target is currently being hovered or focused. */
-    readonly isDropTarget: boolean;
-    /** Whether the drop target is disabled. */
-    readonly isDisabled: boolean;
-    /** Whether there is a drop button. */
-    readonly hasDropButton: boolean;
-    /** Enter the drop target. */
-    enterTarget(x: number, y: number): void;
-    /** Move within the drop target. */
-    moveInTarget(x: number, y: number): void;
-    /** Exit the drop target. */
-    exitTarget(x: number, y: number): void;
-    /** Activate the drop target (after holding). */
-    activateTarget(x: number, y: number): void;
-    /** Perform a drop on the target. */
-    drop(x: number, y: number, items: DropItem[], dropOperation: DropOperation): void;
-    /** Get the drop operation for given types. */
-    getDropOperation(types: DragTypes, allowedOperations: DropOperation[]): DropOperation;
-    /** Get the drop operation for a specific point. */
-    getDropOperationForPoint(types: DragTypes, allowedOperations: DropOperation[], x: number, y: number): DropOperation;
+  /** Whether the drop target is currently being hovered or focused. */
+  readonly isDropTarget: boolean;
+  /** Whether the drop target is disabled. */
+  readonly isDisabled: boolean;
+  /** Whether there is a drop button. */
+  readonly hasDropButton: boolean;
+  /** Enter the drop target. */
+  enterTarget(x: number, y: number): void;
+  /** Move within the drop target. */
+  moveInTarget(x: number, y: number): void;
+  /** Exit the drop target. */
+  exitTarget(x: number, y: number): void;
+  /** Activate the drop target (after holding). */
+  activateTarget(x: number, y: number): void;
+  /** Perform a drop on the target. */
+  drop(x: number, y: number, items: DropItem[], dropOperation: DropOperation): void;
+  /** Get the drop operation for given types. */
+  getDropOperation(types: DragTypes, allowedOperations: DropOperation[]): DropOperation;
+  /** Get the drop operation for a specific point. */
+  getDropOperationForPoint(
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+    x: number,
+    y: number,
+  ): DropOperation;
 }
 /**
  * Creates drop state for managing drop target operations.
@@ -58,4 +77,4 @@ export interface DropState {
  * @returns Drop state object
  */
 export declare function createDropState(props: Accessor<DropStateOptions>): DropState;
-//# sourceMappingURL=createDropState.d.ts.map
+//# sourceMappingURL=createDropState.d.ts.map