gridstack 12.3.3 → 12.4.0

package/dist/dd-droppable.d.ts

@@ -1,26 +0,0 @@
-/**
- * dd-droppable.ts 12.3.2
- * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
- */
-import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
-import { DDUIData } from './types';
-export interface DDDroppableOpt {
-    accept?: string | ((el: HTMLElement) => boolean);
-    drop?: (event: DragEvent, ui: DDUIData) => void;
-    over?: (event: DragEvent, ui: DDUIData) => void;
-    out?: (event: DragEvent, ui: DDUIData) => void;
-}
-export declare class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt<DDDroppableOpt> {
-    el: HTMLElement;
-    option: DDDroppableOpt;
-    accept: (el: HTMLElement) => boolean;
-    constructor(el: HTMLElement, option?: DDDroppableOpt);
-    on(event: 'drop' | 'dropover' | 'dropout', callback: (event: DragEvent) => void): void;
-    off(event: 'drop' | 'dropover' | 'dropout'): void;
-    enable(): void;
-    disable(forDestroy?: boolean): void;
-    destroy(): void;
-    updateOption(opts: DDDroppableOpt): DDDroppable;
-    /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */
-    drop(e: MouseEvent): void;
-}

package/dist/dd-droppable.js

@@ -1,149 +0,0 @@
-/**
- * dd-droppable.ts 12.3.2
- * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
- */
-import { DDManager } from './dd-manager';
-import { DDBaseImplement } from './dd-base-impl';
-import { Utils } from './utils';
-import { isTouch, pointerenter, pointerleave } from './dd-touch';
-// let count = 0; // TEST
-export class DDDroppable extends DDBaseImplement {
-    constructor(el, option = {}) {
-        super();
-        this.el = el;
-        this.option = option;
-        // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
-        this._mouseEnter = this._mouseEnter.bind(this);
-        this._mouseLeave = this._mouseLeave.bind(this);
-        this.enable();
-        this._setupAccept();
-    }
-    on(event, callback) {
-        super.on(event, callback);
-    }
-    off(event) {
-        super.off(event);
-    }
-    enable() {
-        if (this.disabled === false)
-            return;
-        super.enable();
-        this.el.classList.add('ui-droppable');
-        this.el.classList.remove('ui-droppable-disabled');
-        this.el.addEventListener('mouseenter', this._mouseEnter);
-        this.el.addEventListener('mouseleave', this._mouseLeave);
-        if (isTouch) {
-            this.el.addEventListener('pointerenter', pointerenter);
-            this.el.addEventListener('pointerleave', pointerleave);
-        }
-    }
-    disable(forDestroy = false) {
-        if (this.disabled === true)
-            return;
-        super.disable();
-        this.el.classList.remove('ui-droppable');
-        if (!forDestroy)
-            this.el.classList.add('ui-droppable-disabled');
-        this.el.removeEventListener('mouseenter', this._mouseEnter);
-        this.el.removeEventListener('mouseleave', this._mouseLeave);
-        if (isTouch) {
-            this.el.removeEventListener('pointerenter', pointerenter);
-            this.el.removeEventListener('pointerleave', pointerleave);
-        }
-    }
-    destroy() {
-        this.disable(true);
-        this.el.classList.remove('ui-droppable');
-        this.el.classList.remove('ui-droppable-disabled');
-        super.destroy();
-    }
-    updateOption(opts) {
-        Object.keys(opts).forEach(key => this.option[key] = opts[key]);
-        this._setupAccept();
-        return this;
-    }
-    /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
-    _mouseEnter(e) {
-        // console.log(`${count++} Enter ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
-        if (!DDManager.dragElement)
-            return;
-        if (!this._canDrop(DDManager.dragElement.el))
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        // make sure when we enter this, that the last one gets a leave FIRST to correctly cleanup as we don't always do
-        if (DDManager.dropElement && DDManager.dropElement !== this) {
-            DDManager.dropElement._mouseLeave(e, true); // calledByEnter = true
-        }
-        DDManager.dropElement = this;
-        const ev = Utils.initEvent(e, { target: this.el, type: 'dropover' });
-        if (this.option.over) {
-            this.option.over(ev, this._ui(DDManager.dragElement));
-        }
-        this.triggerEvent('dropover', ev);
-        this.el.classList.add('ui-droppable-over');
-        // console.log('tracking'); // TEST
-    }
-    /** @internal called when the item is leaving our area, stop tracking if we had moving item */
-    _mouseLeave(e, calledByEnter = false) {
-        // console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
-        if (!DDManager.dragElement || DDManager.dropElement !== this)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        const ev = Utils.initEvent(e, { target: this.el, type: 'dropout' });
-        if (this.option.out) {
-            this.option.out(ev, this._ui(DDManager.dragElement));
-        }
-        this.triggerEvent('dropout', ev);
-        if (DDManager.dropElement === this) {
-            delete DDManager.dropElement;
-            // console.log('not tracking'); // TEST
-            // if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children
-            if (!calledByEnter) {
-                let parentDrop;
-                let parent = this.el.parentElement;
-                while (!parentDrop && parent) {
-                    parentDrop = parent.ddElement?.ddDroppable;
-                    parent = parent.parentElement;
-                }
-                if (parentDrop) {
-                    parentDrop._mouseEnter(e);
-                }
-            }
-        }
-    }
-    /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */
-    drop(e) {
-        e.preventDefault();
-        const ev = Utils.initEvent(e, { target: this.el, type: 'drop' });
-        if (this.option.drop) {
-            this.option.drop(ev, this._ui(DDManager.dragElement));
-        }
-        this.triggerEvent('drop', ev);
-    }
-    /** @internal true if element matches the string/method accept option */
-    _canDrop(el) {
-        return el && (!this.accept || this.accept(el));
-    }
-    /** @internal */
-    _setupAccept() {
-        if (!this.option.accept)
-            return this;
-        if (typeof this.option.accept === 'string') {
-            this.accept = (el) => el.classList.contains(this.option.accept) || el.matches(this.option.accept);
-        }
-        else {
-            this.accept = this.option.accept;
-        }
-        return this;
-    }
-    /** @internal */
-    _ui(drag) {
-        return {
-            draggable: drag.el,
-            ...drag.ui()
-        };
-    }
-}
-//# sourceMappingURL=dd-droppable.js.map

package/dist/dd-droppable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dd-droppable.js","sourceRoot":"","sources":["../src/dd-droppable.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-droppable.ts 12.3.2\n * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license\n */\n\nimport { DDDraggable } from './dd-draggable';\nimport { DDManager } from './dd-manager';\nimport { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';\nimport { Utils } from './utils';\nimport { DDElementHost } from './dd-element';\nimport { isTouch, pointerenter, pointerleave } from './dd-touch';\nimport { DDUIData } from './types';\n\nexport interface DDDroppableOpt {\n  accept?: string | ((el: HTMLElement) => boolean);\n  drop?: (event: DragEvent, ui: DDUIData) => void;\n  over?: (event: DragEvent, ui: DDUIData) => void;\n  out?: (event: DragEvent, ui: DDUIData) => void;\n}\n\n// let count = 0; // TEST\n\nexport class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt<DDDroppableOpt> {\n\n  public accept: (el: HTMLElement) => boolean;\n\n  constructor(public el: HTMLElement, public option: DDDroppableOpt = {}) {\n    super();\n    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n    this._mouseEnter = this._mouseEnter.bind(this);\n    this._mouseLeave = this._mouseLeave.bind(this);\n    this.enable();\n    this._setupAccept();\n  }\n\n  public on(event: 'drop' | 'dropover' | 'dropout', callback: (event: DragEvent) => void): void {\n    super.on(event, callback);\n  }\n\n  public off(event: 'drop' | 'dropover' | 'dropout'): void {\n    super.off(event);\n  }\n\n  public enable(): void {\n    if (this.disabled === false) return;\n    super.enable();\n    this.el.classList.add('ui-droppable');\n    this.el.classList.remove('ui-droppable-disabled');\n    this.el.addEventListener('mouseenter', this._mouseEnter);\n    this.el.addEventListener('mouseleave', this._mouseLeave);\n    if (isTouch) {\n      this.el.addEventListener('pointerenter', pointerenter);\n      this.el.addEventListener('pointerleave', pointerleave);\n    }\n  }\n\n  public disable(forDestroy = false): void {\n    if (this.disabled === true) return;\n    super.disable();\n    this.el.classList.remove('ui-droppable');\n    if (!forDestroy) this.el.classList.add('ui-droppable-disabled');\n    this.el.removeEventListener('mouseenter', this._mouseEnter);\n    this.el.removeEventListener('mouseleave', this._mouseLeave);\n    if (isTouch) {\n      this.el.removeEventListener('pointerenter', pointerenter);\n      this.el.removeEventListener('pointerleave', pointerleave);\n    }\n  }\n\n  public destroy(): void {\n    this.disable(true);\n    this.el.classList.remove('ui-droppable');\n    this.el.classList.remove('ui-droppable-disabled');\n    super.destroy();\n  }\n\n  public updateOption(opts: DDDroppableOpt): DDDroppable {\n    Object.keys(opts).forEach(key => this.option[key] = opts[key]);\n    this._setupAccept();\n    return this;\n  }\n\n  /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */\n  protected _mouseEnter(e: MouseEvent): void {\n    // console.log(`${count++} Enter ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST\n    if (!DDManager.dragElement) return;\n    if (!this._canDrop(DDManager.dragElement.el)) return;\n    e.preventDefault();\n    e.stopPropagation();\n\n    // make sure when we enter this, that the last one gets a leave FIRST to correctly cleanup as we don't always do\n    if (DDManager.dropElement && DDManager.dropElement !== this) {\n      DDManager.dropElement._mouseLeave(e as DragEvent, true); // calledByEnter = true\n    }\n    DDManager.dropElement = this;\n\n    const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dropover' });\n    if (this.option.over) {\n      this.option.over(ev, this._ui(DDManager.dragElement))\n    }\n    this.triggerEvent('dropover', ev);\n    this.el.classList.add('ui-droppable-over');\n    // console.log('tracking'); // TEST\n  }\n\n  /** @internal called when the item is leaving our area, stop tracking if we had moving item */\n  protected _mouseLeave(e: MouseEvent, calledByEnter = false): void {\n    // console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST\n    if (!DDManager.dragElement || DDManager.dropElement !== this) return;\n    e.preventDefault();\n    e.stopPropagation();\n\n    const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dropout' });\n    if (this.option.out) {\n      this.option.out(ev, this._ui(DDManager.dragElement))\n    }\n    this.triggerEvent('dropout', ev);\n\n    if (DDManager.dropElement === this) {\n      delete DDManager.dropElement;\n      // console.log('not tracking'); // TEST\n\n      // if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children\n      if (!calledByEnter) {\n        let parentDrop: DDDroppable;\n        let parent: DDElementHost = this.el.parentElement;\n        while (!parentDrop && parent) {\n          parentDrop = parent.ddElement?.ddDroppable;\n          parent = parent.parentElement;\n        }\n        if (parentDrop) {\n          parentDrop._mouseEnter(e);\n        }\n      }\n    }\n  }\n\n  /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */\n  public drop(e: MouseEvent): void {\n    e.preventDefault();\n    const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'drop' });\n    if (this.option.drop) {\n      this.option.drop(ev, this._ui(DDManager.dragElement))\n    }\n    this.triggerEvent('drop', ev);\n  }\n\n  /** @internal true if element matches the string/method accept option */\n  protected _canDrop(el: HTMLElement): boolean {\n    return el && (!this.accept || this.accept(el));\n  }\n\n  /** @internal */\n  protected _setupAccept(): DDDroppable {\n    if (!this.option.accept) return this;\n    if (typeof this.option.accept === 'string') {\n      this.accept = (el: HTMLElement) => el.classList.contains(this.option.accept as string) || el.matches(this.option.accept as string);\n    } else {\n      this.accept = this.option.accept;\n    }\n    return this;\n  }\n\n  /** @internal */\n  protected _ui(drag: DDDraggable): DDUIData {\n    return {\n      draggable: drag.el,\n      ...drag.ui()\n    };\n  }\n}\n\n"]}

package/dist/dd-element.d.ts

@@ -1,27 +0,0 @@
-/**
- * dd-elements.ts 12.3.2
- * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
- */
-import { DDResizable, DDResizableOpt } from './dd-resizable';
-import { DDDragOpt, GridItemHTMLElement } from './types';
-import { DDDraggable } from './dd-draggable';
-import { DDDroppable, DDDroppableOpt } from './dd-droppable';
-export interface DDElementHost extends GridItemHTMLElement {
-    ddElement?: DDElement;
-}
-export declare class DDElement {
-    el: DDElementHost;
-    static init(el: DDElementHost): DDElement;
-    ddDraggable?: DDDraggable;
-    ddDroppable?: DDDroppable;
-    ddResizable?: DDResizable;
-    constructor(el: DDElementHost);
-    on(eventName: string, callback: (event: MouseEvent) => void): DDElement;
-    off(eventName: string): DDElement;
-    setupDraggable(opts: DDDragOpt): DDElement;
-    cleanDraggable(): DDElement;
-    setupResizable(opts: DDResizableOpt): DDElement;
-    cleanResizable(): DDElement;
-    setupDroppable(opts: DDDroppableOpt): DDElement;
-    cleanDroppable(): DDElement;
-}

package/dist/dd-element.js

@@ -1,91 +0,0 @@
-/**
- * dd-elements.ts 12.3.2
- * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
- */
-import { DDResizable } from './dd-resizable';
-import { DDDraggable } from './dd-draggable';
-import { DDDroppable } from './dd-droppable';
-export class DDElement {
-    static init(el) {
-        if (!el.ddElement) {
-            el.ddElement = new DDElement(el);
-        }
-        return el.ddElement;
-    }
-    constructor(el) {
-        this.el = el;
-    }
-    on(eventName, callback) {
-        if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {
-            this.ddDraggable.on(eventName, callback);
-        }
-        else if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {
-            this.ddDroppable.on(eventName, callback);
-        }
-        else if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {
-            this.ddResizable.on(eventName, callback);
-        }
-        return this;
-    }
-    off(eventName) {
-        if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {
-            this.ddDraggable.off(eventName);
-        }
-        else if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {
-            this.ddDroppable.off(eventName);
-        }
-        else if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {
-            this.ddResizable.off(eventName);
-        }
-        return this;
-    }
-    setupDraggable(opts) {
-        if (!this.ddDraggable) {
-            this.ddDraggable = new DDDraggable(this.el, opts);
-        }
-        else {
-            this.ddDraggable.updateOption(opts);
-        }
-        return this;
-    }
-    cleanDraggable() {
-        if (this.ddDraggable) {
-            this.ddDraggable.destroy();
-            delete this.ddDraggable;
-        }
-        return this;
-    }
-    setupResizable(opts) {
-        if (!this.ddResizable) {
-            this.ddResizable = new DDResizable(this.el, opts);
-        }
-        else {
-            this.ddResizable.updateOption(opts);
-        }
-        return this;
-    }
-    cleanResizable() {
-        if (this.ddResizable) {
-            this.ddResizable.destroy();
-            delete this.ddResizable;
-        }
-        return this;
-    }
-    setupDroppable(opts) {
-        if (!this.ddDroppable) {
-            this.ddDroppable = new DDDroppable(this.el, opts);
-        }
-        else {
-            this.ddDroppable.updateOption(opts);
-        }
-        return this;
-    }
-    cleanDroppable() {
-        if (this.ddDroppable) {
-            this.ddDroppable.destroy();
-            delete this.ddDroppable;
-        }
-        return this;
-    }
-}
-//# sourceMappingURL=dd-element.js.map

package/dist/dd-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dd-element.js","sourceRoot":"","sources":["../src/dd-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-elements.ts 12.3.2\n * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license\n */\n\nimport { DDResizable, DDResizableOpt } from './dd-resizable';\nimport { DDDragOpt, GridItemHTMLElement } from './types';\nimport { DDDraggable } from './dd-draggable';\nimport { DDDroppable, DDDroppableOpt } from './dd-droppable';\n\nexport interface DDElementHost extends GridItemHTMLElement {\n  ddElement?: DDElement;\n}\n\nexport class DDElement {\n\n  static init(el: DDElementHost): DDElement {\n    if (!el.ddElement) { el.ddElement = new DDElement(el); }\n    return el.ddElement;\n  }\n\n  public ddDraggable?: DDDraggable;\n  public ddDroppable?: DDDroppable;\n  public ddResizable?: DDResizable;\n\n  constructor(public el: DDElementHost) {}\n\n  public on(eventName: string, callback: (event: MouseEvent) => void): DDElement {\n    if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {\n      this.ddDraggable.on(eventName as 'drag' | 'dragstart' | 'dragstop', callback);\n    } else if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {\n      this.ddDroppable.on(eventName as 'drop' | 'dropover' | 'dropout', callback);\n    } else if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {\n      this.ddResizable.on(eventName as 'resizestart' | 'resize' | 'resizestop', callback);\n    }\n    return this;\n  }\n\n  public off(eventName: string): DDElement {\n    if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {\n      this.ddDraggable.off(eventName as 'drag' | 'dragstart' | 'dragstop');\n    } else if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {\n      this.ddDroppable.off(eventName as 'drop' | 'dropover' | 'dropout');\n    } else if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {\n      this.ddResizable.off(eventName as 'resizestart' | 'resize' | 'resizestop');\n    }\n    return this;\n  }\n\n  public setupDraggable(opts: DDDragOpt): DDElement {\n    if (!this.ddDraggable) {\n      this.ddDraggable = new DDDraggable(this.el, opts);\n    } else {\n      this.ddDraggable.updateOption(opts);\n    }\n    return this;\n  }\n\n  public cleanDraggable(): DDElement {\n    if (this.ddDraggable) {\n      this.ddDraggable.destroy();\n      delete this.ddDraggable;\n    }\n    return this;\n  }\n\n  public setupResizable(opts: DDResizableOpt): DDElement {\n    if (!this.ddResizable) {\n      this.ddResizable = new DDResizable(this.el, opts);\n    } else {\n      this.ddResizable.updateOption(opts);\n    }\n    return this;\n  }\n\n  public cleanResizable(): DDElement {\n    if (this.ddResizable) {\n      this.ddResizable.destroy();\n      delete this.ddResizable;\n    }\n    return this;\n  }\n\n  public setupDroppable(opts: DDDroppableOpt): DDElement {\n    if (!this.ddDroppable) {\n      this.ddDroppable = new DDDroppable(this.el, opts);\n    } else {\n      this.ddDroppable.updateOption(opts);\n    }\n    return this;\n  }\n\n  public cleanDroppable(): DDElement {\n    if (this.ddDroppable) {\n      this.ddDroppable.destroy();\n      delete this.ddDroppable;\n    }\n    return this;\n  }\n}\n"]}

package/dist/dd-gridstack.d.ts

@@ -1,82 +0,0 @@
-/**
- * dd-gridstack.ts 12.3.2
- * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
- */
-import { GridItemHTMLElement, GridStackElement, DDDragOpt } from './types';
-import { DDElementHost } from './dd-element';
-/**
- * Drag & Drop options for drop targets.
- * Configures which elements can be dropped onto a grid.
- */
-export type DDDropOpt = {
-    /** Function to determine if an element can be dropped (see GridStackOptions.acceptWidgets) */
-    accept?: (el: GridItemHTMLElement) => boolean;
-};
-/**
- * Drag & Drop operation types used throughout the DD system.
- * Can be control commands or configuration objects.
- */
-export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
-/**
- * Keys for DD configuration options that can be set via the 'option' command.
- */
-export type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'maxHeightMoveUp' | 'maxWidthMoveLeft';
-/**
- * Values for DD configuration options (numbers or strings with units).
- */
-export type DDValue = number | string;
-/**
- * Callback function type for drag & drop events.
- *
- * @param event - The DOM event that triggered the callback
- * @param arg2 - The grid item element being dragged/dropped
- * @param helper - Optional helper element used during drag operations
- */
-export type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;
-/**
- * HTML Native Mouse and Touch Events Drag and Drop functionality.
- *
- * This class provides the main drag & drop implementation for GridStack,
- * handling resizing, dragging, and dropping of grid items using native HTML5 events.
- * It manages the interaction between different DD components and the grid system.
- */
-export declare class DDGridStack {
-    /**
-     * Enable/disable/configure resizing for grid elements.
-     *
-     * @param el - Grid item element(s) to configure
-     * @param opts - Resize options or command ('enable', 'disable', 'destroy', 'option', or config object)
-     * @param key - Option key when using 'option' command
-     * @param value - Option value when using 'option' command
-     * @returns this instance for chaining
-     *
-     * @example
-     * dd.resizable(element, 'enable');  // Enable resizing
-     * dd.resizable(element, 'option', 'minWidth', 100);  // Set minimum width
-     */
-    resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack;
-    /**
-     * Enable/disable/configure dragging for grid elements.
-     *
-     * @param el - Grid item element(s) to configure
-     * @param opts - Drag options or command ('enable', 'disable', 'destroy', 'option', or config object)
-     * @param key - Option key when using 'option' command
-     * @param value - Option value when using 'option' command
-     * @returns this instance for chaining
-     *
-     * @example
-     * dd.draggable(element, 'enable');  // Enable dragging
-     * dd.draggable(element, {handle: '.drag-handle'});  // Configure drag handle
-     */
-    draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack;
-    dragIn(el: GridStackElement, opts: DDDragOpt): DDGridStack;
-    droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): DDGridStack;
-    /** true if element is droppable */
-    isDroppable(el: DDElementHost): boolean;
-    /** true if element is draggable */
-    isDraggable(el: DDElementHost): boolean;
-    /** true if element is draggable */
-    isResizable(el: DDElementHost): boolean;
-    on(el: GridItemHTMLElement, name: string, callback: DDCallback): DDGridStack;
-    off(el: GridItemHTMLElement, name: string): DDGridStack;
-}

package/dist/dd-gridstack.js

@@ -1,165 +0,0 @@
-/**
- * dd-gridstack.ts 12.3.2
- * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
- */
-import { Utils } from './utils';
-import { DDManager } from './dd-manager';
-import { DDElement } from './dd-element';
-// let count = 0; // TEST
-/**
- * HTML Native Mouse and Touch Events Drag and Drop functionality.
- *
- * This class provides the main drag & drop implementation for GridStack,
- * handling resizing, dragging, and dropping of grid items using native HTML5 events.
- * It manages the interaction between different DD components and the grid system.
- */
-export class DDGridStack {
-    /**
-     * Enable/disable/configure resizing for grid elements.
-     *
-     * @param el - Grid item element(s) to configure
-     * @param opts - Resize options or command ('enable', 'disable', 'destroy', 'option', or config object)
-     * @param key - Option key when using 'option' command
-     * @param value - Option value when using 'option' command
-     * @returns this instance for chaining
-     *
-     * @example
-     * dd.resizable(element, 'enable');  // Enable resizing
-     * dd.resizable(element, 'option', 'minWidth', 100);  // Set minimum width
-     */
-    resizable(el, opts, key, value) {
-        this._getDDElements(el, opts).forEach(dEl => {
-            if (opts === 'disable' || opts === 'enable') {
-                dEl.ddResizable && dEl.ddResizable[opts](); // can't create DD as it requires options for setupResizable()
-            }
-            else if (opts === 'destroy') {
-                dEl.ddResizable && dEl.cleanResizable();
-            }
-            else if (opts === 'option') {
-                dEl.setupResizable({ [key]: value });
-            }
-            else {
-                const n = dEl.el.gridstackNode;
-                const grid = n.grid;
-                let handles = dEl.el.getAttribute('gs-resize-handles') || grid.opts.resizable.handles || 'e,s,se';
-                if (handles === 'all')
-                    handles = 'n,e,s,w,se,sw,ne,nw';
-                // NOTE: keep the resize handles as e,w don't have enough space (10px) to show resize corners anyway. limit during drag instead
-                // restrict vertical resize if height is done to match content anyway... odd to have it spring back
-                // if (Utils.shouldSizeToContent(n, true)) {
-                //   const doE = handles.indexOf('e') !== -1;
-                //   const doW = handles.indexOf('w') !== -1;
-                //   handles = doE ? (doW ? 'e,w' : 'e') : (doW ? 'w' : '');
-                // }
-                const autoHide = !grid.opts.alwaysShowResizeHandle;
-                dEl.setupResizable({
-                    ...grid.opts.resizable,
-                    ...{ handles, autoHide },
-                    ...{
-                        start: opts.start,
-                        stop: opts.stop,
-                        resize: opts.resize
-                    }
-                });
-            }
-        });
-        return this;
-    }
-    /**
-     * Enable/disable/configure dragging for grid elements.
-     *
-     * @param el - Grid item element(s) to configure
-     * @param opts - Drag options or command ('enable', 'disable', 'destroy', 'option', or config object)
-     * @param key - Option key when using 'option' command
-     * @param value - Option value when using 'option' command
-     * @returns this instance for chaining
-     *
-     * @example
-     * dd.draggable(element, 'enable');  // Enable dragging
-     * dd.draggable(element, {handle: '.drag-handle'});  // Configure drag handle
-     */
-    draggable(el, opts, key, value) {
-        this._getDDElements(el, opts).forEach(dEl => {
-            if (opts === 'disable' || opts === 'enable') {
-                dEl.ddDraggable && dEl.ddDraggable[opts](); // can't create DD as it requires options for setupDraggable()
-            }
-            else if (opts === 'destroy') {
-                dEl.ddDraggable && dEl.cleanDraggable();
-            }
-            else if (opts === 'option') {
-                dEl.setupDraggable({ [key]: value });
-            }
-            else {
-                const grid = dEl.el.gridstackNode.grid;
-                dEl.setupDraggable({
-                    ...grid.opts.draggable,
-                    ...{
-                        // containment: (grid.parentGridNode && grid.opts.dragOut === false) ? grid.el.parentElement : (grid.opts.draggable.containment || null),
-                        start: opts.start,
-                        stop: opts.stop,
-                        drag: opts.drag
-                    }
-                });
-            }
-        });
-        return this;
-    }
-    dragIn(el, opts) {
-        this._getDDElements(el).forEach(dEl => dEl.setupDraggable(opts));
-        return this;
-    }
-    droppable(el, opts, key, value) {
-        if (typeof opts.accept === 'function' && !opts._accept) {
-            opts._accept = opts.accept;
-            opts.accept = (el) => opts._accept(el);
-        }
-        this._getDDElements(el, opts).forEach(dEl => {
-            if (opts === 'disable' || opts === 'enable') {
-                dEl.ddDroppable && dEl.ddDroppable[opts]();
-            }
-            else if (opts === 'destroy') {
-                dEl.ddDroppable && dEl.cleanDroppable();
-            }
-            else if (opts === 'option') {
-                dEl.setupDroppable({ [key]: value });
-            }
-            else {
-                dEl.setupDroppable(opts);
-            }
-        });
-        return this;
-    }
-    /** true if element is droppable */
-    isDroppable(el) {
-        return !!(el?.ddElement?.ddDroppable && !el.ddElement.ddDroppable.disabled);
-    }
-    /** true if element is draggable */
-    isDraggable(el) {
-        return !!(el?.ddElement?.ddDraggable && !el.ddElement.ddDraggable.disabled);
-    }
-    /** true if element is draggable */
-    isResizable(el) {
-        return !!(el?.ddElement?.ddResizable && !el.ddElement.ddResizable.disabled);
-    }
-    on(el, name, callback) {
-        this._getDDElements(el).forEach(dEl => dEl.on(name, (event) => {
-            callback(event, DDManager.dragElement ? DDManager.dragElement.el : event.target, DDManager.dragElement ? DDManager.dragElement.helper : null);
-        }));
-        return this;
-    }
-    off(el, name) {
-        this._getDDElements(el).forEach(dEl => dEl.off(name));
-        return this;
-    }
-    /** @internal returns a list of DD elements, creating them on the fly by default unless option is to destroy or disable */
-    _getDDElements(els, opts) {
-        // don't force create if we're going to destroy it, unless it's a grid which is used as drop target for it's children
-        const create = els.gridstack || opts !== 'destroy' && opts !== 'disable';
-        const hosts = Utils.getElements(els);
-        if (!hosts.length)
-            return [];
-        const list = hosts.map(e => e.ddElement || (create ? DDElement.init(e) : null)).filter(d => d); // remove nulls
-        return list;
-    }
-}
-//# sourceMappingURL=dd-gridstack.js.map

package/dist/dd-gridstack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dd-gridstack.js","sourceRoot":"","sources":["../src/dd-gridstack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * dd-gridstack.ts 12.3.2\r\n * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license\r\n */\r\n\r\n/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { GridItemHTMLElement, GridStackElement, DDDragOpt } from './types';\r\nimport { Utils } from './utils';\r\nimport { DDManager } from './dd-manager';\r\nimport { DDElement, DDElementHost } from './dd-element';\r\nimport { GridHTMLElement } from './gridstack';\r\n\r\n/**\r\n * Drag & Drop options for drop targets.\r\n * Configures which elements can be dropped onto a grid.\r\n */\r\nexport type DDDropOpt = {\r\n  /** Function to determine if an element can be dropped (see GridStackOptions.acceptWidgets) */\r\n  accept?: (el: GridItemHTMLElement) => boolean;\r\n}\r\n\r\n/**\r\n * Drag & Drop operation types used throughout the DD system.\r\n * Can be control commands or configuration objects.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\r\nexport type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;\r\n\r\n/**\r\n * Keys for DD configuration options that can be set via the 'option' command.\r\n */\r\nexport type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'maxHeightMoveUp' | 'maxWidthMoveLeft';\r\n\r\n/**\r\n * Values for DD configuration options (numbers or strings with units).\r\n */\r\nexport type DDValue = number | string;\r\n\r\n/**\r\n * Callback function type for drag & drop events.\r\n * \r\n * @param event - The DOM event that triggered the callback\r\n * @param arg2 - The grid item element being dragged/dropped\r\n * @param helper - Optional helper element used during drag operations\r\n */\r\nexport type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;\r\n\r\n// let count = 0; // TEST\r\n\r\n/**\r\n * HTML Native Mouse and Touch Events Drag and Drop functionality.\r\n * \r\n * This class provides the main drag & drop implementation for GridStack,\r\n * handling resizing, dragging, and dropping of grid items using native HTML5 events.\r\n * It manages the interaction between different DD components and the grid system.\r\n */\r\nexport class DDGridStack {\r\n\r\n  /**\r\n   * Enable/disable/configure resizing for grid elements.\r\n   * \r\n   * @param el - Grid item element(s) to configure\r\n   * @param opts - Resize options or command ('enable', 'disable', 'destroy', 'option', or config object)\r\n   * @param key - Option key when using 'option' command\r\n   * @param value - Option value when using 'option' command\r\n   * @returns this instance for chaining\r\n   * \r\n   * @example\r\n   * dd.resizable(element, 'enable');  // Enable resizing\r\n   * dd.resizable(element, 'option', 'minWidth', 100);  // Set minimum width\r\n   */\r\n  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack {\r\n    this._getDDElements(el, opts).forEach(dEl => {\r\n      if (opts === 'disable' || opts === 'enable') {\r\n        dEl.ddResizable && dEl.ddResizable[opts](); // can't create DD as it requires options for setupResizable()\r\n      } else if (opts === 'destroy') {\r\n        dEl.ddResizable && dEl.cleanResizable();\r\n      } else if (opts === 'option') {\r\n        dEl.setupResizable({ [key]: value });\r\n      } else {\r\n        const n = dEl.el.gridstackNode;\r\n        const grid = n.grid;\r\n        let handles = dEl.el.getAttribute('gs-resize-handles') || grid.opts.resizable.handles || 'e,s,se';\r\n        if (handles === 'all') handles = 'n,e,s,w,se,sw,ne,nw';\r\n        // NOTE: keep the resize handles as e,w don't have enough space (10px) to show resize corners anyway. limit during drag instead\r\n        // restrict vertical resize if height is done to match content anyway... odd to have it spring back\r\n        // if (Utils.shouldSizeToContent(n, true)) {\r\n        //   const doE = handles.indexOf('e') !== -1;\r\n        //   const doW = handles.indexOf('w') !== -1;\r\n        //   handles = doE ? (doW ? 'e,w' : 'e') : (doW ? 'w' : '');\r\n        // }\r\n        const autoHide = !grid.opts.alwaysShowResizeHandle;\r\n        dEl.setupResizable({\r\n          ...grid.opts.resizable,\r\n          ...{ handles, autoHide },\r\n          ...{\r\n            start: opts.start,\r\n            stop: opts.stop,\r\n            resize: opts.resize\r\n          }\r\n        });\r\n      }\r\n    });\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Enable/disable/configure dragging for grid elements.\r\n   * \r\n   * @param el - Grid item element(s) to configure\r\n   * @param opts - Drag options or command ('enable', 'disable', 'destroy', 'option', or config object)\r\n   * @param key - Option key when using 'option' command\r\n   * @param value - Option value when using 'option' command\r\n   * @returns this instance for chaining\r\n   * \r\n   * @example\r\n   * dd.draggable(element, 'enable');  // Enable dragging\r\n   * dd.draggable(element, {handle: '.drag-handle'});  // Configure drag handle\r\n   */\r\n  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack {\r\n    this._getDDElements(el, opts).forEach(dEl => {\r\n      if (opts === 'disable' || opts === 'enable') {\r\n        dEl.ddDraggable && dEl.ddDraggable[opts](); // can't create DD as it requires options for setupDraggable()\r\n      } else if (opts === 'destroy') {\r\n        dEl.ddDraggable && dEl.cleanDraggable();\r\n      } else if (opts === 'option') {\r\n        dEl.setupDraggable({ [key]: value });\r\n      } else {\r\n        const grid = dEl.el.gridstackNode.grid;\r\n        dEl.setupDraggable({\r\n          ...grid.opts.draggable,\r\n          ...{\r\n            // containment: (grid.parentGridNode && grid.opts.dragOut === false) ? grid.el.parentElement : (grid.opts.draggable.containment || null),\r\n            start: opts.start,\r\n            stop: opts.stop,\r\n            drag: opts.drag\r\n          }\r\n        });\r\n      }\r\n    });\r\n    return this;\r\n  }\r\n\r\n  public dragIn(el: GridStackElement, opts: DDDragOpt): DDGridStack {\r\n    this._getDDElements(el).forEach(dEl => dEl.setupDraggable(opts));\r\n    return this;\r\n  }\r\n\r\n  public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): DDGridStack {\r\n    if (typeof opts.accept === 'function' && !opts._accept) {\r\n      opts._accept = opts.accept;\r\n      opts.accept = (el) => opts._accept(el);\r\n    }\r\n    this._getDDElements(el, opts).forEach(dEl => {\r\n      if (opts === 'disable' || opts === 'enable') {\r\n        dEl.ddDroppable && dEl.ddDroppable[opts]();\r\n      } else if (opts === 'destroy') {\r\n        dEl.ddDroppable && dEl.cleanDroppable();\r\n      } else if (opts === 'option') {\r\n        dEl.setupDroppable({ [key]: value });\r\n      } else {\r\n        dEl.setupDroppable(opts);\r\n      }\r\n    });\r\n    return this;\r\n  }\r\n\r\n  /** true if element is droppable */\r\n  public isDroppable(el: DDElementHost): boolean {\r\n    return !!(el?.ddElement?.ddDroppable && !el.ddElement.ddDroppable.disabled);\r\n  }\r\n\r\n  /** true if element is draggable */\r\n  public isDraggable(el: DDElementHost): boolean {\r\n    return !!(el?.ddElement?.ddDraggable && !el.ddElement.ddDraggable.disabled);\r\n  }\r\n\r\n  /** true if element is draggable */\r\n  public isResizable(el: DDElementHost): boolean {\r\n    return !!(el?.ddElement?.ddResizable && !el.ddElement.ddResizable.disabled);\r\n  }\r\n\r\n  public on(el: GridItemHTMLElement, name: string, callback: DDCallback): DDGridStack {\r\n    this._getDDElements(el).forEach(dEl =>\r\n      dEl.on(name, (event: Event) => {\r\n        callback(\r\n          event,\r\n          DDManager.dragElement ? DDManager.dragElement.el : event.target as GridItemHTMLElement,\r\n          DDManager.dragElement ? DDManager.dragElement.helper : null)\r\n      })\r\n    );\r\n    return this;\r\n  }\r\n\r\n  public off(el: GridItemHTMLElement, name: string): DDGridStack {\r\n    this._getDDElements(el).forEach(dEl => dEl.off(name));\r\n    return this;\r\n  }\r\n\r\n  /** @internal returns a list of DD elements, creating them on the fly by default unless option is to destroy or disable */\r\n  protected _getDDElements(els: GridStackElement, opts?: DDOpts): DDElement[] {\r\n    // don't force create if we're going to destroy it, unless it's a grid which is used as drop target for it's children\r\n    const create = (els as GridHTMLElement).gridstack ||  opts !== 'destroy' && opts !== 'disable';\r\n    const hosts = Utils.getElements(els) as DDElementHost[];\r\n    if (!hosts.length) return [];\r\n    const list = hosts.map(e => e.ddElement || (create ? DDElement.init(e) : null)).filter(d => d); // remove nulls\r\n    return list;\r\n  }\r\n}\r\n"]}