@bquery/bquery 1.7.0 → 1.8.2

package/src/dnd/droppable.ts

@@ -1,228 +1,228 @@
-/**
- * Define drop zones for draggable elements.
- *
- * Drop zones detect when draggable elements enter, move over,
- * leave, or are dropped onto them using pointer event hit-testing.
- *
- * @module bquery/dnd
- */
-
-import { getActiveDrag } from './draggable';
-import type { DropEventData, DroppableHandle, DroppableOptions } from './types';
-
-type DroppableListener = {
-  handlePointerMove: (event: PointerEvent) => void;
-  handlePointerUp: (event: PointerEvent) => void;
-};
-
-const passivePointerMoveListenerOptions = { passive: true } as const;
-
-const droppableListeners = new Set<DroppableListener>();
-let queuedPointerMove: PointerEvent | null = null;
-let pointerMoveFrame: number | null = null;
-
-const getDroppableListenersSnapshot = (): DroppableListener[] => Array.from(droppableListeners);
-
-const hasDroppableEnvironment = (): boolean => {
-  return (
-    typeof document !== 'undefined' &&
-    typeof document.addEventListener === 'function' &&
-    typeof document.removeEventListener === 'function' &&
-    typeof requestAnimationFrame === 'function' &&
-    typeof cancelAnimationFrame === 'function'
-  );
-};
-
-const dispatchPointerMove = (event: PointerEvent): void => {
-  for (const listener of getDroppableListenersSnapshot()) {
-    listener.handlePointerMove(event);
-  }
-};
-
-const flushPointerMove = (): void => {
-  pointerMoveFrame = null;
-  const event = queuedPointerMove;
-  queuedPointerMove = null;
-  if (!event) return;
-  dispatchPointerMove(event);
-};
-
-const handleDocumentPointerMove = (event: PointerEvent): void => {
-  queuedPointerMove = event;
-  if (pointerMoveFrame === null) {
-    pointerMoveFrame = requestAnimationFrame(flushPointerMove);
-  }
-};
-
-const handleDocumentPointerUp = (event: PointerEvent): void => {
-  if (pointerMoveFrame !== null) {
-    cancelAnimationFrame(pointerMoveFrame);
-    pointerMoveFrame = null;
-    queuedPointerMove = null;
-  }
-
-  for (const listener of getDroppableListenersSnapshot()) {
-    listener.handlePointerUp(event);
-  }
-};
-
-const registerDroppableListener = (listener: DroppableListener): void => {
-  if (droppableListeners.size === 0) {
-    document.addEventListener(
-      'pointermove',
-      handleDocumentPointerMove,
-      passivePointerMoveListenerOptions
-    );
-    document.addEventListener('pointerup', handleDocumentPointerUp);
-  }
-
-  droppableListeners.add(listener);
-};
-
-const unregisterDroppableListener = (listener: DroppableListener): void => {
-  droppableListeners.delete(listener);
-
-  if (droppableListeners.size !== 0) return;
-
-  document.removeEventListener('pointermove', handleDocumentPointerMove);
-  document.removeEventListener('pointerup', handleDocumentPointerUp);
-  if (pointerMoveFrame !== null) {
-    cancelAnimationFrame(pointerMoveFrame);
-    pointerMoveFrame = null;
-  }
-  queuedPointerMove = null;
-};
-
-/**
- * Checks whether a dragged element is accepted by the drop zone.
- * @internal
- */
-const isAccepted = (dragged: HTMLElement, accept: DroppableOptions['accept']): boolean => {
-  if (!accept) return true;
-  if (typeof accept === 'string') return dragged.matches(accept);
-  return accept(dragged);
-};
-
-/**
- * Defines an element as a drop zone.
- *
- * Drop zones respond to draggable elements being moved over them
- * by firing callbacks and applying CSS classes. They work with
- * the `draggable()` function from this module.
- *
- * @param el - The drop zone element
- * @param options - Configuration options
- * @returns A handle with a `destroy()` method
- *
- * @example
- * ```ts
- * import { droppable } from '@bquery/bquery/dnd';
- *
- * const handle = droppable(document.querySelector('#dropzone'), {
- *   accept: '.draggable-item',
- *   overClass: 'drop-active',
- *   onDrop: ({ dragged }) => {
- *     console.log('Dropped:', dragged);
- *   },
- * });
- *
- * // Later:
- * handle.destroy();
- * ```
- */
-export const droppable = (el: HTMLElement, options: DroppableOptions = {}): DroppableHandle => {
-  const {
-    overClass = 'bq-drop-over',
-    accept,
-    onDragEnter,
-    onDragOver,
-    onDragLeave,
-    onDrop,
-  } = options;
-
-  if (!hasDroppableEnvironment()) {
-    return {
-      destroy: () => {},
-    };
-  }
-
-  let isOver = false;
-  let currentDragged: HTMLElement | null = null;
-
-  const createEventData = (dragged: HTMLElement, event: PointerEvent): DropEventData => ({
-    zone: el,
-    dragged,
-    event,
-  });
-
-  const isPointerInside = (event: PointerEvent): boolean => {
-    const rect = el.getBoundingClientRect();
-    return (
-      event.clientX >= rect.left &&
-      event.clientX <= rect.right &&
-      event.clientY >= rect.top &&
-      event.clientY <= rect.bottom
-    );
-  };
-
-  const resolveDraggedElement = (): HTMLElement | null => {
-    return getActiveDrag()?.element ?? currentDragged;
-  };
-
-  const clearOverState = (event: PointerEvent, dragged = currentDragged): void => {
-    if (!isOver) return;
-    isOver = false;
-    el.classList.remove(overClass);
-    if (dragged) {
-      onDragLeave?.(createEventData(dragged, event));
-    }
-    currentDragged = null;
-  };
-
-  const handlePointerMove = (e: PointerEvent): void => {
-    const dragged = getActiveDrag()?.element ?? null;
-    const isInside = isPointerInside(e);
-    const acceptsDragged = dragged !== null && dragged !== el && isAccepted(dragged, accept);
-
-    if (!acceptsDragged || !isInside) {
-      clearOverState(e, dragged ?? currentDragged);
-      return;
-    }
-
-    if (!isOver) {
-      isOver = true;
-      currentDragged = dragged;
-      el.classList.add(overClass);
-      onDragEnter?.(createEventData(dragged, e));
-    } else {
-      onDragOver?.(createEventData(dragged, e));
-    }
-  };
-
-  const handlePointerUp = (e: PointerEvent): void => {
-    const dragged = resolveDraggedElement();
-    const isInside = isPointerInside(e);
-    const acceptsDragged = dragged !== null && dragged !== el && isAccepted(dragged, accept);
-
-    if (isInside && acceptsDragged && dragged) {
-      onDrop?.(createEventData(dragged, e));
-    }
-
-    if (isOver) {
-      isOver = false;
-      el.classList.remove(overClass);
-    }
-    currentDragged = null;
-  };
-
-  const listener: DroppableListener = { handlePointerMove, handlePointerUp };
-  registerDroppableListener(listener);
-
-  return {
-    destroy: () => {
-      unregisterDroppableListener(listener);
-      el.classList.remove(overClass);
-      currentDragged = null;
-    },
-  };
-};
+/**
+ * Define drop zones for draggable elements.
+ *
+ * Drop zones detect when draggable elements enter, move over,
+ * leave, or are dropped onto them using pointer event hit-testing.
+ *
+ * @module bquery/dnd
+ */
+
+import { getActiveDrag } from './draggable';
+import type { DropEventData, DroppableHandle, DroppableOptions } from './types';
+
+type DroppableListener = {
+  handlePointerMove: (event: PointerEvent) => void;
+  handlePointerUp: (event: PointerEvent) => void;
+};
+
+const passivePointerMoveListenerOptions = { passive: true } as const;
+
+const droppableListeners = new Set<DroppableListener>();
+let queuedPointerMove: PointerEvent | null = null;
+let pointerMoveFrame: number | null = null;
+
+const getDroppableListenersSnapshot = (): DroppableListener[] => Array.from(droppableListeners);
+
+const hasDroppableEnvironment = (): boolean => {
+  return (
+    typeof document !== 'undefined' &&
+    typeof document.addEventListener === 'function' &&
+    typeof document.removeEventListener === 'function' &&
+    typeof requestAnimationFrame === 'function' &&
+    typeof cancelAnimationFrame === 'function'
+  );
+};
+
+const dispatchPointerMove = (event: PointerEvent): void => {
+  for (const listener of getDroppableListenersSnapshot()) {
+    listener.handlePointerMove(event);
+  }
+};
+
+const flushPointerMove = (): void => {
+  pointerMoveFrame = null;
+  const event = queuedPointerMove;
+  queuedPointerMove = null;
+  if (!event) return;
+  dispatchPointerMove(event);
+};
+
+const handleDocumentPointerMove = (event: PointerEvent): void => {
+  queuedPointerMove = event;
+  if (pointerMoveFrame === null) {
+    pointerMoveFrame = requestAnimationFrame(flushPointerMove);
+  }
+};
+
+const handleDocumentPointerUp = (event: PointerEvent): void => {
+  if (pointerMoveFrame !== null) {
+    cancelAnimationFrame(pointerMoveFrame);
+    pointerMoveFrame = null;
+    queuedPointerMove = null;
+  }
+
+  for (const listener of getDroppableListenersSnapshot()) {
+    listener.handlePointerUp(event);
+  }
+};
+
+const registerDroppableListener = (listener: DroppableListener): void => {
+  if (droppableListeners.size === 0) {
+    document.addEventListener(
+      'pointermove',
+      handleDocumentPointerMove,
+      passivePointerMoveListenerOptions
+    );
+    document.addEventListener('pointerup', handleDocumentPointerUp);
+  }
+
+  droppableListeners.add(listener);
+};
+
+const unregisterDroppableListener = (listener: DroppableListener): void => {
+  droppableListeners.delete(listener);
+
+  if (droppableListeners.size !== 0) return;
+
+  document.removeEventListener('pointermove', handleDocumentPointerMove);
+  document.removeEventListener('pointerup', handleDocumentPointerUp);
+  if (pointerMoveFrame !== null) {
+    cancelAnimationFrame(pointerMoveFrame);
+    pointerMoveFrame = null;
+  }
+  queuedPointerMove = null;
+};
+
+/**
+ * Checks whether a dragged element is accepted by the drop zone.
+ * @internal
+ */
+const isAccepted = (dragged: HTMLElement, accept: DroppableOptions['accept']): boolean => {
+  if (!accept) return true;
+  if (typeof accept === 'string') return dragged.matches(accept);
+  return accept(dragged);
+};
+
+/**
+ * Defines an element as a drop zone.
+ *
+ * Drop zones respond to draggable elements being moved over them
+ * by firing callbacks and applying CSS classes. They work with
+ * the `draggable()` function from this module.
+ *
+ * @param el - The drop zone element
+ * @param options - Configuration options
+ * @returns A handle with a `destroy()` method
+ *
+ * @example
+ * ```ts
+ * import { droppable } from '@bquery/bquery/dnd';
+ *
+ * const handle = droppable(document.querySelector('#dropzone'), {
+ *   accept: '.draggable-item',
+ *   overClass: 'drop-active',
+ *   onDrop: ({ dragged }) => {
+ *     console.log('Dropped:', dragged);
+ *   },
+ * });
+ *
+ * // Later:
+ * handle.destroy();
+ * ```
+ */
+export const droppable = (el: HTMLElement, options: DroppableOptions = {}): DroppableHandle => {
+  const {
+    overClass = 'bq-drop-over',
+    accept,
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+  } = options;
+
+  if (!hasDroppableEnvironment()) {
+    return {
+      destroy: () => {},
+    };
+  }
+
+  let isOver = false;
+  let currentDragged: HTMLElement | null = null;
+
+  const createEventData = (dragged: HTMLElement, event: PointerEvent): DropEventData => ({
+    zone: el,
+    dragged,
+    event,
+  });
+
+  const isPointerInside = (event: PointerEvent): boolean => {
+    const rect = el.getBoundingClientRect();
+    return (
+      event.clientX >= rect.left &&
+      event.clientX <= rect.right &&
+      event.clientY >= rect.top &&
+      event.clientY <= rect.bottom
+    );
+  };
+
+  const resolveDraggedElement = (): HTMLElement | null => {
+    return getActiveDrag()?.element ?? currentDragged;
+  };
+
+  const clearOverState = (event: PointerEvent, dragged = currentDragged): void => {
+    if (!isOver) return;
+    isOver = false;
+    el.classList.remove(overClass);
+    if (dragged) {
+      onDragLeave?.(createEventData(dragged, event));
+    }
+    currentDragged = null;
+  };
+
+  const handlePointerMove = (e: PointerEvent): void => {
+    const dragged = getActiveDrag()?.element ?? null;
+    const isInside = isPointerInside(e);
+    const acceptsDragged = dragged !== null && dragged !== el && isAccepted(dragged, accept);
+
+    if (!acceptsDragged || !isInside) {
+      clearOverState(e, dragged ?? currentDragged);
+      return;
+    }
+
+    if (!isOver) {
+      isOver = true;
+      currentDragged = dragged;
+      el.classList.add(overClass);
+      onDragEnter?.(createEventData(dragged, e));
+    } else {
+      onDragOver?.(createEventData(dragged, e));
+    }
+  };
+
+  const handlePointerUp = (e: PointerEvent): void => {
+    const dragged = resolveDraggedElement();
+    const isInside = isPointerInside(e);
+    const acceptsDragged = dragged !== null && dragged !== el && isAccepted(dragged, accept);
+
+    if (isInside && acceptsDragged && dragged) {
+      onDrop?.(createEventData(dragged, e));
+    }
+
+    if (isOver) {
+      isOver = false;
+      el.classList.remove(overClass);
+    }
+    currentDragged = null;
+  };
+
+  const listener: DroppableListener = { handlePointerMove, handlePointerUp };
+  registerDroppableListener(listener);
+
+  return {
+    destroy: () => {
+      unregisterDroppableListener(listener);
+      el.classList.remove(overClass);
+      currentDragged = null;
+    },
+  };
+};

package/src/dnd/index.ts

@@ -1,62 +1,62 @@
-/**
- * bQuery Drag & Drop module.
- *
- * Provides pointer-event-based drag-and-drop, drop zones, and sortable
- * lists with built-in touch support, axis locking, bounds constraints,
- * and animated reordering.
- *
- * @module bquery/dnd
- *
- * @example
- * ```ts
- * import { draggable, droppable, sortable } from '@bquery/bquery/dnd';
- *
- * // Make an element draggable
- * const drag = draggable(document.querySelector('#box'), {
- *   axis: 'both',
- *   bounds: 'parent',
- *   ghost: true,
- *   onDragEnd: ({ position }) => console.log(position),
- * });
- *
- * // Define a drop zone
- * const drop = droppable(document.querySelector('#zone'), {
- *   accept: '.draggable',
- *   onDrop: ({ dragged }) => console.log('Dropped!', dragged),
- * });
- *
- * // Make a list sortable
- * const sort = sortable(document.querySelector('#list'), {
- *   items: 'li',
- *   axis: 'y',
- *   onSortEnd: ({ oldIndex, newIndex }) => {
- *     console.log(`Moved from ${oldIndex} to ${newIndex}`);
- *   },
- * });
- *
- * // Cleanup when done
- * drag.destroy();
- * drop.destroy();
- * sort.destroy();
- * ```
- */
-
-export { draggable } from './draggable';
-export { droppable } from './droppable';
-export { sortable } from './sortable';
-
-export type {
-  BoundsRect,
-  DragAxis,
-  DragBounds,
-  DragEventData,
-  DragPosition,
-  DraggableHandle,
-  DraggableOptions,
-  DropEventData,
-  DroppableHandle,
-  DroppableOptions,
-  SortEventData,
-  SortableHandle,
-  SortableOptions,
-} from './types';
+/**
+ * bQuery Drag & Drop module.
+ *
+ * Provides pointer-event-based drag-and-drop, drop zones, and sortable
+ * lists with built-in touch support, axis locking, bounds constraints,
+ * and animated reordering.
+ *
+ * @module bquery/dnd
+ *
+ * @example
+ * ```ts
+ * import { draggable, droppable, sortable } from '@bquery/bquery/dnd';
+ *
+ * // Make an element draggable
+ * const drag = draggable(document.querySelector('#box'), {
+ *   axis: 'both',
+ *   bounds: 'parent',
+ *   ghost: true,
+ *   onDragEnd: ({ position }) => console.log(position),
+ * });
+ *
+ * // Define a drop zone
+ * const drop = droppable(document.querySelector('#zone'), {
+ *   accept: '.draggable',
+ *   onDrop: ({ dragged }) => console.log('Dropped!', dragged),
+ * });
+ *
+ * // Make a list sortable
+ * const sort = sortable(document.querySelector('#list'), {
+ *   items: 'li',
+ *   axis: 'y',
+ *   onSortEnd: ({ oldIndex, newIndex }) => {
+ *     console.log(`Moved from ${oldIndex} to ${newIndex}`);
+ *   },
+ * });
+ *
+ * // Cleanup when done
+ * drag.destroy();
+ * drop.destroy();
+ * sort.destroy();
+ * ```
+ */
+
+export { draggable } from './draggable';
+export { droppable } from './droppable';
+export { sortable } from './sortable';
+
+export type {
+  BoundsRect,
+  DragAxis,
+  DragBounds,
+  DragEventData,
+  DragPosition,
+  DraggableHandle,
+  DraggableOptions,
+  DropEventData,
+  DroppableHandle,
+  DroppableOptions,
+  SortEventData,
+  SortableHandle,
+  SortableOptions,
+} from './types';