@proyecto-viviana/solid-stately 0.2.4 → 0.2.7

package/src/dnd/createDragState.ts

@@ -1,153 +1,153 @@
-/**
- * Drag state management for solid-stately.
- *
- * Provides reactive state for drag operations.
- */
-
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import type {
-  DragItem,
-  DragStartEvent,
-  DragMoveEvent,
-  DragEndEvent,
-  DropOperation,
-  DragPreviewRenderer,
-} from './types';
-
-export interface DragStateOptions {
-  /** A function that returns the items being dragged. */
-  getItems: () => DragItem[];
-  /** Function that returns the allowed drop operations. */
-  getAllowedDropOperations?: () => DropOperation[];
-  /** Handler that is called when a drag operation is started. */
-  onDragStart?: (e: DragStartEvent) => void;
-  /** Handler that is called when the drag is moved. */
-  onDragMove?: (e: DragMoveEvent) => void;
-  /** Handler that is called when the drag operation ends. */
-  onDragEnd?: (e: DragEndEvent) => void;
-  /** Whether the drag operation is disabled. */
-  isDisabled?: boolean;
-  /** Whether there is a separate drag button affordance. */
-  hasDragButton?: boolean;
-  /** Preview renderer function ref. */
-  preview?: { current: DragPreviewRenderer | null };
-}
-
-export interface DragState {
-  /** Whether an element is currently being dragged. */
-  readonly isDragging: boolean;
-  /** Whether drag is disabled. */
-  readonly isDisabled: boolean;
-  /** Start a drag operation. */
-  startDrag(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): void;
-  /** Cancel a drag operation. */
-  cancelDrag(): void;
-  /** Get the items being dragged. */
-  getItems(): DragItem[];
-  /** Get allowed drop operations. */
-  getAllowedDropOperations(): DropOperation[];
-  /** Whether there is a drag button. */
-  readonly hasDragButton: boolean;
-  /** Preview renderer. */
-  readonly preview: { current: DragPreviewRenderer | null } | undefined;
-}
-
-/**
- * Creates drag state for managing drag operations.
- *
- * @param props - Accessor returning drag state options
- * @returns Drag state object
- */
-export function createDragState(
-  props: Accessor<DragStateOptions>
-): DragState {
-  const getProps = createMemo(() => props());
-
-  const [isDragging, setIsDragging] = createSignal(false);
-
-  const startDrag = (x: number, y: number) => {
-    const p = getProps();
-    if (p.isDisabled) return;
-
-    setIsDragging(true);
-
-    if (typeof p.onDragStart === 'function') {
-      p.onDragStart({
-        type: 'dragstart',
-        x,
-        y,
-      });
-    }
-  };
-
-  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,
-      });
-    }
-  };
-
-  const endDrag = (x: number, y: number, dropOperation: DropOperation) => {
-    const p = getProps();
-    if (!isDragging()) return;
-
-    setIsDragging(false);
-
-    if (typeof p.onDragEnd === 'function') {
-      p.onDragEnd({
-        type: 'dragend',
-        x,
-        y,
-        dropOperation,
-      });
-    }
-  };
-
-  const cancelDrag = () => {
-    endDrag(0, 0, 'cancel');
-  };
-
-  const getItems = () => {
-    const p = getProps();
-    return p.getItems();
-  };
-
-  const getAllowedDropOperations = (): DropOperation[] => {
-    const p = getProps();
-    if (typeof p.getAllowedDropOperations === 'function') {
-      return p.getAllowedDropOperations();
-    }
-    return ['move', 'copy', 'link'];
-  };
-
-  return {
-    get isDragging() {
-      return isDragging();
-    },
-    get isDisabled() {
-      return getProps().isDisabled ?? false;
-    },
-    get hasDragButton() {
-      return getProps().hasDragButton ?? false;
-    },
-    get preview() {
-      return getProps().preview;
-    },
-    startDrag,
-    moveDrag,
-    endDrag,
-    cancelDrag,
-    getItems,
-    getAllowedDropOperations,
-  };
-}
+/**
+ * Drag state management for solid-stately.
+ *
+ * Provides reactive state for drag operations.
+ */
+
+import { createSignal, createMemo, type Accessor } from 'solid-js';
+import type {
+  DragItem,
+  DragStartEvent,
+  DragMoveEvent,
+  DragEndEvent,
+  DropOperation,
+  DragPreviewRenderer,
+} from './types';
+
+export interface DragStateOptions {
+  /** A function that returns the items being dragged. */
+  getItems: () => DragItem[];
+  /** Function that returns the allowed drop operations. */
+  getAllowedDropOperations?: () => DropOperation[];
+  /** Handler that is called when a drag operation is started. */
+  onDragStart?: (e: DragStartEvent) => void;
+  /** Handler that is called when the drag is moved. */
+  onDragMove?: (e: DragMoveEvent) => void;
+  /** Handler that is called when the drag operation ends. */
+  onDragEnd?: (e: DragEndEvent) => void;
+  /** Whether the drag operation is disabled. */
+  isDisabled?: boolean;
+  /** Whether there is a separate drag button affordance. */
+  hasDragButton?: boolean;
+  /** Preview renderer function ref. */
+  preview?: { current: DragPreviewRenderer | null };
+}
+
+export interface DragState {
+  /** Whether an element is currently being dragged. */
+  readonly isDragging: boolean;
+  /** Whether drag is disabled. */
+  readonly isDisabled: boolean;
+  /** Start a drag operation. */
+  startDrag(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): void;
+  /** Cancel a drag operation. */
+  cancelDrag(): void;
+  /** Get the items being dragged. */
+  getItems(): DragItem[];
+  /** Get allowed drop operations. */
+  getAllowedDropOperations(): DropOperation[];
+  /** Whether there is a drag button. */
+  readonly hasDragButton: boolean;
+  /** Preview renderer. */
+  readonly preview: { current: DragPreviewRenderer | null } | undefined;
+}
+
+/**
+ * Creates drag state for managing drag operations.
+ *
+ * @param props - Accessor returning drag state options
+ * @returns Drag state object
+ */
+export function createDragState(
+  props: Accessor<DragStateOptions>
+): DragState {
+  const getProps = createMemo(() => props());
+
+  const [isDragging, setIsDragging] = createSignal(false);
+
+  const startDrag = (x: number, y: number) => {
+    const p = getProps();
+    if (p.isDisabled) return;
+
+    setIsDragging(true);
+
+    if (typeof p.onDragStart === 'function') {
+      p.onDragStart({
+        type: 'dragstart',
+        x,
+        y,
+      });
+    }
+  };
+
+  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,
+      });
+    }
+  };
+
+  const endDrag = (x: number, y: number, dropOperation: DropOperation) => {
+    const p = getProps();
+    if (!isDragging()) return;
+
+    setIsDragging(false);
+
+    if (typeof p.onDragEnd === 'function') {
+      p.onDragEnd({
+        type: 'dragend',
+        x,
+        y,
+        dropOperation,
+      });
+    }
+  };
+
+  const cancelDrag = () => {
+    endDrag(0, 0, 'cancel');
+  };
+
+  const getItems = () => {
+    const p = getProps();
+    return p.getItems();
+  };
+
+  const getAllowedDropOperations = (): DropOperation[] => {
+    const p = getProps();
+    if (typeof p.getAllowedDropOperations === 'function') {
+      return p.getAllowedDropOperations();
+    }
+    return ['move', 'copy', 'link'];
+  };
+
+  return {
+    get isDragging() {
+      return isDragging();
+    },
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get hasDragButton() {
+      return getProps().hasDragButton ?? false;
+    },
+    get preview() {
+      return getProps().preview;
+    },
+    startDrag,
+    moveDrag,
+    endDrag,
+    cancelDrag,
+    getItems,
+    getAllowedDropOperations,
+  };
+}

package/src/dnd/createDraggableCollectionState.ts

@@ -1,165 +1,165 @@
-/**
- * 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,
+  };
+}