grid option minWidth -> OneColumnSize

* renamed to be much lclearer, added support for old field value (JS only) to not break binary compatibility
* fix #1937

Author: adumesny

README.md

@@ -409,7 +409,7 @@ v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and
 
 2. event signatures are generic and not jquery-ui dependent anymore. `gsresizestop` has been removed as `resizestop|dragstop` are now called **after** the DOM attributes have been updated.
 
-3. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `minWidth` or `disableOneColumnMode`.
+3. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `oneColumnSize` or `disableOneColumnMode`.
 
 **Note:** 2.x no longer support legacy IE11 and older due to using more compact ES6 output and typecsript native code. You will need to stay at 1.x
 

doc/CHANGES.md

@@ -70,6 +70,7 @@ Change log
 
 ## 5.0.0-dev (TBD)
 * add `GridStack.registerEngine()` to let user use their own custom layout engine subclass. Thank you [Thomas] for sponsoring it.
+* grid option `minWidth` is now `oneColumnSize` to make it clearer, but old field will still work (JS only) for a while
 
 ## 5.0.0 (2022-01-10)
 * add [#992](https://github.com/gridstack/gridstack.js/issues/992) support dragging into and out of nested grids from parents! Thank you [@arclogos132](https://github.com/arclogos132) for sponsoring it.

spec/gridstack-spec.ts

@@ -527,11 +527,11 @@ describe('gridstack', function() {
       expect(grid.getColumn()).toBe(1);
     });
     it('should go to 1 column with large minW', function() {
-      let grid = GridStack.init({minWidth: 1000});
+      let grid = GridStack.init({oneColumnSize: 1000});
       expect(grid.getColumn()).toBe(1);
     });
     it('should stay at 12 with minW', function() {
-      let grid = GridStack.init({minWidth: 300});
+      let grid = GridStack.init({oneColumnSize: 300});
       expect(grid.getColumn()).toBe(12);
     });
     it('should stay at 12 column', function() {

src/gridstack.ts

@@ -56,7 +56,7 @@ const GridDefaults: GridStackOptions = {
   cellHeightThrottle: 100,
   margin: 10,
   auto: true,
-  minWidth: 768,
+  oneColumnSize: 768,
   float: false,
   staticGrid: false,
   animate: true,
@@ -261,6 +261,12 @@ export class GridStack {
     if (opts.column === 'auto') {
       delete opts.column;
     }
+    // 'minWidth' legacy support in 5.1
+    let anyOpts = opts as any;
+    if (anyOpts.minWidth !== undefined) {
+      opts.oneColumnSize = opts.oneColumnSize || anyOpts.minWidth;
+      delete anyOpts.minWidth;
+    }
 
     // elements attributes override any passed options (like CSS style) - merge the two together
     let defaults: GridStackOptions = {...Utils.cloneDeep(GridDefaults),
@@ -292,7 +298,7 @@ export class GridStack {
     this.initMargin(); // part of settings defaults...
 
     // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
-    if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.minWidth) {
+    if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.oneColumnSize) {
       this._prevColumn = this.getColumn();
       this.opts.column = 1;
     }
@@ -1388,7 +1394,7 @@ export class GridStack {
       }
     } else {
       // else check for 1 column in/out behavior
-      let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.minWidth;
+      let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize;
       if ((this.opts.column === 1) !== oneColumn) {
         changedColumn = true;
         if (this.opts.animate) { this.setAnimation(false); } // 1 <-> 12 is too radical, turn off animation

src/types.ts

@@ -85,7 +85,7 @@ export interface GridStackOptions {
   /** disallows dragging of widgets (default?: false) */
   disableDrag?: boolean;
 
-  /** disables the onColumnMode when the grid width is less than minWidth (default?: false) */
+  /** disables the onColumnMode when the grid width is less than oneColumnSize (default?: false) */
   disableOneColumnMode?: boolean;
 
   /** disallows resizing of widgets (default?: false). */
@@ -150,8 +150,8 @@ export interface GridStackOptions {
    */
   minRow?: number;
 
-  /** minimal width. If grid width is less, grid will be shown in one column mode (default?: 768) */
-  minWidth?: number;
+  /** minimal width before grid will be shown in one column mode (default?: 768) */
+  oneColumnSize?: number;
 
   /**
    * set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column

src/utils.ts

@@ -220,16 +220,17 @@ export class Utils {
   }
 
   /** copies over b size & position (GridStackPosition), and possibly min/max as well */
-  static copyPos(a: GridStackWidget, b: GridStackWidget, minMax = false): GridStackWidget {
+  static copyPos(a: GridStackWidget, b: GridStackWidget, doMinMax = false): GridStackWidget {
     a.x = b.x;
     a.y = b.y;
     a.w = b.w;
     a.h = b.h;
-    if (!minMax) return a;
-    if (b.minW) a.minW = b.minW;
-    if (b.minH) a.minH = b.minH;
-    if (b.maxW) a.maxW = b.maxW;
-    if (b.maxH) a.maxH = b.maxH;
+    if (doMinMax) {
+      if (b.minW) a.minW = b.minW;
+      if (b.minH) a.minH = b.minH;
+      if (b.maxW) a.maxW = b.maxW;
+      if (b.maxH) a.maxH = b.maxH;
+    }
     return a;
   }