gridstack 12.0.0 → 12.1.1

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 12.0.0
+ * GridStack 12.1.1
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2024  Alain Dumesny
@@ -178,41 +178,19 @@ class GridStack {
         if (opts.alwaysShowResizeHandle !== undefined) {
             opts._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
         }
-        let bk = opts.columnOpts?.breakpoints;
-        // LEGACY: oneColumnMode stuff changed in v10.x - check if user explicitly set something to convert over
-        const oldOpts = opts;
-        if (oldOpts.oneColumnModeDomSort) {
-            delete oldOpts.oneColumnModeDomSort;
-            console.log('warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.');
-        }
-        if (oldOpts.oneColumnSize || oldOpts.disableOneColumnMode === false) {
-            const oneSize = oldOpts.oneColumnSize || 768;
-            delete oldOpts.oneColumnSize;
-            delete oldOpts.disableOneColumnMode;
-            opts.columnOpts = opts.columnOpts || {};
-            bk = opts.columnOpts.breakpoints = opts.columnOpts.breakpoints || [];
-            let oneColumn = bk.find(b => b.c === 1);
-            if (!oneColumn) {
-                oneColumn = { c: 1, w: oneSize };
-                bk.push(oneColumn, { c: 12, w: oneSize + 1 });
-            }
-            else
-                oneColumn.w = oneSize;
-        }
-        //...end LEGACY
         // cleanup responsive opts (must have columnWidth | breakpoints) then sort breakpoints by size (so we can match during resize)
         const resp = opts.columnOpts;
         if (resp) {
-            if (!resp.columnWidth && !resp.breakpoints?.length) {
+            const bk = resp.breakpoints;
+            if (!resp.columnWidth && !bk?.length) {
                 delete opts.columnOpts;
-                bk = undefined;
             }
             else {
                 resp.columnMax = resp.columnMax || 12;
+                if (bk?.length > 1)
+                    bk.sort((a, b) => (b.w || 0) - (a.w || 0));
             }
         }
-        if (bk?.length > 1)
-            bk.sort((a, b) => (b.w || 0) - (a.w || 0));
         // elements DOM attributes override any passed options (like CSS style) - merge the two together
         const defaults = {
             ...Utils.cloneDeep(gridDefaults),
@@ -947,7 +925,7 @@ class GridStack {
     }
     /** returns the current number of rows, which will be at least `minRow` if set */
     getRow() {
-        return Math.max(this.engine.getRow(), this.opts.minRow);
+        return Math.max(this.engine.getRow(), this.opts.minRow || 0);
     }
     /**
      * Checks if specified area is empty.
@@ -1127,6 +1105,7 @@ class GridStack {
         else {
             this.el.classList.remove('grid-stack-animate');
         }
+        this.opts.animate = doAnimate;
         return this;
     }
     /** @internal */
@@ -1161,23 +1140,33 @@ class GridStack {
      */
     updateOptions(o) {
         const opts = this.opts;
-        if (o.acceptWidgets !== undefined)
+        if (o === opts)
+            return this; // nothing to do
+        if (o.acceptWidgets !== undefined) {
+            opts.acceptWidgets = o.acceptWidgets;
             this._setupAcceptWidget();
+        }
         if (o.animate !== undefined)
-            this.setAnimation();
-        if (o.cellHeight) {
+            this.setAnimation(o.animate);
+        if (o.cellHeight)
             this.cellHeight(o.cellHeight);
-            delete o.cellHeight;
-        }
-        if (o.class && o.class !== opts.class) {
+        if (o.class !== undefined && o.class !== opts.class) {
             if (opts.class)
                 this.el.classList.remove(opts.class);
-            this.el.classList.add(o.class);
+            if (o.class)
+                this.el.classList.add(o.class);
         }
-        if (typeof (o.column) === 'number' && !o.columnOpts) {
+        // responsive column take over actual count (keep what we have now)
+        if (o.columnOpts) {
+            this.opts.columnOpts = o.columnOpts;
+            this.checkDynamicColumn();
+        }
+        else if (o.columnOpts === null && this.opts.columnOpts) {
+            delete this.opts.columnOpts;
+            this._updateResizeEvent();
+        }
+        else if (typeof (o.column) === 'number')
             this.column(o.column);
-            delete o.column;
-        } // responsive column take over actual count
         if (o.margin !== undefined)
             this.margin(o.margin);
         if (o.staticGrid !== undefined)
@@ -1189,16 +1178,18 @@ class GridStack {
         if (o.float !== undefined)
             this.float(o.float);
         if (o.row !== undefined) {
-            opts.minRow = opts.maxRow = o.row;
+            opts.minRow = opts.maxRow = opts.row = o.row;
         }
-        if (o.children?.length) {
-            this.load(o.children);
-            delete o.children;
+        else {
+            if (o.minRow !== undefined)
+                opts.minRow = o.minRow;
+            if (o.maxRow !== undefined)
+                opts.maxRow = o.maxRow;
         }
+        if (o.children?.length)
+            this.load(o.children);
         // TBD if we have a real need for these (more complex code)
         // alwaysShowResizeHandle, draggable, handle, handleClass, itemClass, layout, placeholderClass, placeholderText, resizable, removable, row,...
-        // rest are just copied over...
-        this.opts = { ...this.opts, ...o };
         return this;
     }
     /**
@@ -1322,7 +1313,7 @@ class GridStack {
             // sub-grid - use their actual row count * their cell height, BUT append any content outside of the grid (eg: above text)
             wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);
             const subRec = n.subGrid.el.getBoundingClientRect();
-            const parentRec = n.subGrid.el.parentElement.getBoundingClientRect();
+            const parentRec = el.getBoundingClientRect();
             wantedH += subRec.top - parentRec.top;
         }
         else if (n.subGridOpts?.children?.length) {
@@ -1477,7 +1468,12 @@ class GridStack {
     /** @internal */
     _triggerEvent(type, data) {
         const event = data ? new CustomEvent(type, { bubbles: false, detail: data }) : new Event(type);
-        this.el.dispatchEvent(event);
+        // check if we're nested, and if so call the outermost grid to trigger the event
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        let grid = this;
+        while (grid.parentGridNode)
+            grid = grid.parentGridNode.grid;
+        grid.el.dispatchEvent(event);
         return this;
     }
     /** @internal */
@@ -1691,7 +1687,9 @@ class GridStack {
                 if (Utils.shouldSizeToContent(n))
                     this.resizeToContentCBCheck(n.el);
             });
+            this._ignoreLayoutsNodeChange = true; // loop through each node will set/reset around each move, so set it here again
             this.batchUpdate(false);
+            this._ignoreLayoutsNodeChange = false;
         }
         // call this regardless of shouldSizeToContent because widget might need to stretch to take available space after a resize
         if (this._gsEventHandler['resizecontent'])
@@ -2253,9 +2251,7 @@ class GridStack {
             /** called when item starts moving/resizing */
             const onStartMoving = (event, ui) => {
                 // trigger any 'dragstart' / 'resizestart' manually
-                if (this._gsEventHandler[event.type]) {
-                    this._gsEventHandler[event.type](event, event.target);
-                }
+                this.triggerEvent(event, event.target);
                 cellWidth = this.cellWidth();
                 cellHeight = this.getCellHeight(true); // force pixels for calculations
                 this._onStartMoving(el, event, ui, node, cellWidth, cellHeight);
@@ -2298,9 +2294,7 @@ class GridStack {
                         // move to new placeholder location
                         this._writePosAttr(target, node);
                     }
-                    if (this._gsEventHandler[event.type]) {
-                        this._gsEventHandler[event.type](event, target);
-                    }
+                    this.triggerEvent(event, target);
                 }
                 // @ts-ignore
                 this._extraDragRow = 0; // @ts-ignore
@@ -2465,9 +2459,17 @@ class GridStack {
             if (!node._sidebarOrig) {
                 this._writePosAttr(target, node);
             }
-            if (this._gsEventHandler[event.type]) {
-                this._gsEventHandler[event.type](event, target);
-            }
+            this.triggerEvent(event, target);
+        }
+    }
+    /** call given event callback on our main top-most grid (if we're nested) */
+    triggerEvent(event, target) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        let grid = this;
+        while (grid.parentGridNode)
+            grid = grid.parentGridNode.grid;
+        if (grid._gsEventHandler[event.type]) {
+            grid._gsEventHandler[event.type](event, target);
         }
     }
     /** @internal called when item leaving our area by either cursor dropout event
@@ -2523,6 +2525,6 @@ GridStack.resizeToContentParent = '.grid-stack-item-content';
 GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
-GridStack.GDRev = '12.0.0';
+GridStack.GDRev = '12.1.1';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map