GridStackOptions casing, minWidth() fix

* fixed minWidth(), minHeight, maxHeight to set node value as well - see #1359
* correct GridStackOptions casing - see #1359
* rev 2.0.0-dev

Author: adumesny

README.md

@@ -149,7 +149,7 @@ see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example
 
 ## Requirements
 
-Gridstack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). All you need to include is `gridstack.all.js` and `gridstack.css` (layouts are done using CSS column based %).
+GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). All you need to include is `gridstack.all.js` and `gridstack.css` (layouts are done using CSS column based %).
 
 ## API Documentation
 
@@ -365,7 +365,7 @@ make sure to read v1 migration first!
 
 v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x
 
-1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have <b>all set methods return</b> `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridstackOptions` or `GridStackWidget`).
+1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have <b>all set methods return</b> `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridStackOptions` or `GridStackWidget`).
 
 ```
 `addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})`

doc/CHANGES.md

@@ -5,7 +5,8 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
-- [2.0.0-dev (2020-09-07)](#200-dev-2020-09-07)
+- [2.0.0-dev](#200-dev)
+- [2.0.0 (2020-09-07)](#200-2020-09-07)
 - [1.2.1 (2020-09-04)](#121-2020-09-04)
 - [1.2.0 (2020-08-01)](#120-2020-08-01)
 - [1.1.2 (2020-05-17)](#112-2020-05-17)
@@ -36,7 +37,12 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## 2.0.0-dev (2020-09-07)
+## 2.0.0-dev
+
+- fix `minWidth()`, `minHeight()`, `maxHeight()` to set node value as well [1359](https://github.com/gridstack/gridstack.js/issues/1359)
+- fix `GridStackOptions` spelling [1359](https://github.com/gridstack/gridstack.js/issues/1359)
+
+## 2.0.0 (2020-09-07)
 
 - re-write to native Typescript, removing all JQuery from main code and API (drag&drop plugin still using jqueryui for now)
 - add `getGridItems()` to return list of HTML grid items

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "2.0.0",
+  "version": "2.0.0-dev",
   "description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
   "main": "./dist/gridstack.js",
   "types": "./dist/gridstack.d.ts",

src/gridstack-dd.ts

@@ -1,4 +1,4 @@
-// gridstack-dd.ts 2.0.0 @preserve
+// gridstack-dd.ts 2.0.0-dev @preserve
 
 /**
  * https://gridstackjs.com/
@@ -12,7 +12,7 @@ import { GridItemHTMLElement, DDDragInOpt } from './types';
 
 /** Drag&Drop drop options */
 export type DDDropOpt = {
-  /** function or class type that this grid will accept as dropped items (see GridstackOptions.acceptWidgets) */
+  /** function or class type that this grid will accept as dropped items (see GridStackOptions.acceptWidgets) */
   accept?: (el: GridItemHTMLElement) => boolean;
 }
 

src/gridstack-engine.ts

@@ -1,4 +1,4 @@
-// gridstack-engine.ts 2.0.0 @preserve
+// gridstack-engine.ts 2.0.0-dev @preserve
 
 /**
  * https://gridstackjs.com/

src/gridstack.ts

@@ -1,4 +1,4 @@
-// gridstack.ts 2.0.0 @preserve
+// gridstack.ts 2.0.0-dev @preserve
 
 /**
  * https://gridstackjs.com/
@@ -9,7 +9,7 @@ import './gridstack-poly.js';
 
 import { GridStackEngine } from './gridstack-engine';
 import { obsoleteOpts, obsoleteOptsDel, obsoleteAttr, obsolete, Utils } from './utils';
-import { GridItemHTMLElement, GridStackWidget, GridStackNode, GridstackOptions, numberOrString } from './types';
+import { GridItemHTMLElement, GridStackWidget, GridStackNode, GridStackOptions, numberOrString } from './types';
 import { GridStackDD } from './gridstack-dd';
 
 // export all dependent file as well to make it easier for users to just import the main file
@@ -71,7 +71,7 @@ export class GridStack {
    * Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
    * let grid = document.querySelector('.grid-stack').gridstack;
    */
-  public static init(options: GridstackOptions = {}, elOrString: GridStackElement = '.grid-stack'): GridStack {
+  public static init(options: GridStackOptions = {}, elOrString: GridStackElement = '.grid-stack'): GridStack {
     let el = GridStack.getGridElement(elOrString);
     if (!el) {
       if (typeof elOrString === 'string') {
@@ -97,7 +97,7 @@ export class GridStack {
    * let grids = GridStack.initAll();
    * grids.forEach(...)
    */
-  public static initAll(options: GridstackOptions = {}, selector = '.grid-stack'): GridStack[] {
+  public static initAll(options: GridStackOptions = {}, selector = '.grid-stack'): GridStack[] {
     let grids: GridStack[] = [];
     GridStack.getGridElements(selector).forEach(el => {
       if (!el.gridstack) {
@@ -125,7 +125,7 @@ export class GridStack {
   public engine: GridStackEngine;
 
   /** grid options - public for classes to access, but use methods to modify! */
-  public opts: GridstackOptions;
+  public opts: GridStackOptions;
 
   /** current drag&drop plugin being used */
   public dd: GridStackDD;
@@ -150,7 +150,7 @@ export class GridStack {
    * @param el
    * @param opts
    */
-  public constructor(el: GridHTMLElement, opts: GridstackOptions = {}) {
+  public constructor(el: GridHTMLElement, opts: GridStackOptions = {}) {
     this.el = el; // exposed HTML element to the user
     opts = opts || {}; // handles null/undefined/0
 
@@ -172,7 +172,7 @@ export class GridStack {
     let rowAttr = Utils.toNumber(el.getAttribute('data-gs-row'));
 
     // elements attributes override any passed options (like CSS style) - merge the two together
-    let defaults: GridstackOptions = {
+    let defaults: GridStackOptions = {
       column: Utils.toNumber(el.getAttribute('data-gs-column')) || 12,
       minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('data-gs-min-row')) || 0,
       maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('data-gs-max-row')) || 0,
@@ -429,7 +429,7 @@ export class GridStack {
   }
 
   /**
-   * Update current cell height - see `GridstackOptions.cellHeight` for format.
+   * Update current cell height - see `GridStackOptions.cellHeight` for format.
    * This method rebuilds an internal CSS style sheet.
    * Note: You can expect performance issues if call this method too often.
    *
@@ -720,17 +720,7 @@ export class GridStack {
    * @param val A numeric value of the number of columns
    */
   public maxWidth(els: GridStackElement, val: number): GridStack {
-    this.getElements(els).forEach(el => {
-      let node = el.gridstackNode;
-      if (!node) { return }
-      node.maxWidth = (val || undefined);
-      if (val) {
-        el.setAttribute('data-gs-max-width', String(val));
-      } else {
-        el.removeAttribute('data-gs-max-width');
-      }
-    });
-    return this;
+    return this._updateAttr(els, val, 'data-gs-max-width', 'maxWidth');
   }
 
   /**
@@ -739,16 +729,7 @@ export class GridStack {
    * @param val A numeric value of the number of columns
    */
   public minWidth(els: GridStackElement, val: number): GridStack {
-    this.getElements(els).forEach(el => {
-      let node = el.gridstackNode;
-      if (!node) { return }
-      if (val) {
-        el.setAttribute('data-gs-min-width', String(val));
-      } else {
-        el.removeAttribute('data-gs-min-width');
-      }
-    });
-    return this;
+    return this._updateAttr(els, val, 'data-gs-min-width', 'minWidth');
   }
 
   /**
@@ -757,16 +738,7 @@ export class GridStack {
    * @param val A numeric value of the number of rows
    */
   public maxHeight(els: GridStackElement, val: number): GridStack {
-    this.getElements(els).forEach(el => {
-      let node = el.gridstackNode;
-      if (!node) { return }
-      if (val) {
-        el.setAttribute('data-gs-max-height', String(val));
-      } else {
-        el.removeAttribute('data-gs-max-height');
-      }
-    });
-    return this;
+    return this._updateAttr(els, val, 'data-gs-max-height', 'maxHeight');
   }
 
   /**
@@ -775,16 +747,7 @@ export class GridStack {
    * @param val A numeric value of the number of rows
    */
   public minHeight(els: GridStackElement, val: number): GridStack {
-    this.getElements(els).forEach(el => {
-      let node = el.gridstackNode;
-      if (!node) { return }
-      if (val) {
-        el.setAttribute('data-gs-min-height', String(val));
-      } else {
-        el.removeAttribute('data-gs-min-height');
-      }
-    });
-    return this;
+    return this._updateAttr(els, val, 'data-gs-min-height', 'minHeight');
   }
 
   /**
@@ -1020,9 +983,9 @@ export class GridStack {
   }
 
   /**
-   * Updates the margins which will set all 4 sides at once - see `GridstackOptions.margin` for format options.
+   * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options.
    * @param value new vertical margin value
-   * Note: you can instead use `marginTop | marginBottom | marginLeft | marginRight` GridstackOptions to set the sides separately.
+   * Note: you can instead use `marginTop | marginBottom | marginLeft | marginRight` GridStackOptions to set the sides separately.
    */
   public margin(value: numberOrString): GridStack {
     let data = Utils.parseHeight(value);
@@ -1797,6 +1760,21 @@ export class GridStack {
     return this;
   }
 
+  /** @internal called to update an element(s) attributes and node values */
+  private _updateAttr(els: GridStackElement, val: number, attr: string, field: string): GridStack {
+    this.getElements(els).forEach(el => {
+      if (val) {
+        el.setAttribute(attr, String(val));
+      } else {
+        el.removeAttribute(attr);
+      }
+      if (el.gridstackNode) {
+        el.gridstackNode[field] = (val || undefined);
+      }
+    });
+    return this;
+  }
+
   // legacy method renames
   /** @internal */
   private setGridWidth = obsolete(this, GridStack.prototype.column, 'setGridWidth', 'column', 'v0.5.3');

src/jq/gridstack-dd-jqueryui.ts

@@ -1,4 +1,4 @@
-// gridstack-dd-jqueryui.ts 2.0.0 @preserve
+// gridstack-dd-jqueryui.ts 2.0.0-dev @preserve
 
 /** JQuery UI Drag&Drop plugin
  * https://gridstackjs.com/

src/types.ts

@@ -1,4 +1,4 @@
-// types.ts 2.0.0 @preserve
+// types.ts 2.0.0-dev @preserve
 
 /**
  * https://gridstackjs.com/
@@ -20,7 +20,7 @@ export interface GridItemHTMLElement extends HTMLElement {
 /**
  * Defines the options for a Grid
  */
-export interface GridstackOptions {
+export interface GridStackOptions {
   /**
    * accept widgets dragged from other grids or from outside (default: `false`). Can be:
    * `true` (uses `'.grid-stack-item'` class filter) or `false`,
@@ -173,7 +173,7 @@ export interface GridstackOptions {
 
 
 /**
- * Gridstack Widget creation options
+ * GridStack Widget creation options
  */
 export interface GridStackWidget {
   /** widget position x (default?: 0) */

src/utils.ts

@@ -1,12 +1,12 @@
-// utils.ts 2.0.0 @preserve
+// utils.ts 2.0.0-dev @preserve
 
 /**
  * https://gridstackjs.com/
  * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
  * gridstack.js may be freely distributed under the MIT license.
 */
 
-import { GridStackWidget, GridStackNode, GridstackOptions, numberOrString } from './types';
+import { GridStackWidget, GridStackNode, GridStackOptions, numberOrString } from './types';
 
 /** checks for obsolete method names */
 export function obsolete(self, f, oldName: string, newName: string, rev: string) {
@@ -20,7 +20,7 @@ export function obsolete(self, f, oldName: string, newName: string, rev: string)
 }
 
 /** checks for obsolete grid options (can be used for any fields, but msg is about options) */
-export function obsoleteOpts(opts: GridstackOptions, oldName: string, newName: string, rev: string) {
+export function obsoleteOpts(opts: GridStackOptions, oldName: string, newName: string, rev: string) {
   if (opts[oldName] !== undefined) {
     opts[newName] = opts[oldName];
     console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + ' and has been replaced with `' +
@@ -29,7 +29,7 @@ export function obsoleteOpts(opts: GridstackOptions, oldName: string, newName: s
 }
 
 /** checks for obsolete grid options which are gone */
-export function obsoleteOptsDel(opts: GridstackOptions, oldName: string, rev: string, info: string) {
+export function obsoleteOptsDel(opts: GridStackOptions, oldName: string, rev: string, info: string) {
   if (opts[oldName] !== undefined) {
     console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + info);
   }