gridstack 9.5.1 → 10.0.1

package/doc/README.md

@@ -6,6 +6,8 @@ gridstack.js API
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
 - [Grid Options](#grid-options)
+  - [Responsive](#responsive)
+    - [Breakpoint](#breakpoint)
   - [DDDragOpt](#dddragopt)
   - [DDDragInOpt extends DDDragOpt](#dddraginopt-extends-dddragopt)
 - [Grid attributes](#grid-attributes)
@@ -51,7 +53,7 @@ gridstack.js API
   - [`isAreaEmpty(x, y, width, height)`](#isareaemptyx-y-width-height)
   - [`load(layout: GridStackWidget[], boolean | ((w: GridStackWidget, add: boolean) => void)  = true)`](#loadlayout-gridstackwidget-boolean--w-gridstackwidget-add-boolean--void---true)
   - [`makeWidget(el)`](#makewidgetel)
-  - [`makeSubgrid(el)`](#makesubgridel)
+  - [`makeSubGrid(el)`](#makesubgridel)
   - [`margin(value: numberOrString)`](#marginvalue-numberorstring)
   - [`movable(el, val)`](#movableel-val)
   - [`removeWidget(el, removeDOM = true, triggerEvent = true)`](#removewidgetel-removedom--true-triggerevent--true)
@@ -93,9 +95,9 @@ gridstack.js API
    * A value of 0 will make it instant at a cost of re-creating the CSS file at ever window resize event!
 - `children`?: GridStackWidget[] - list of children item to create when calling load() or addGrid()
 - `column` - Integer > 0 (default 12) which can change on the fly with `column(N)` API, or `'auto'` for nested grids to size themselves to the parent grid container (to make sub-items are the same size). See [column](http://gridstackjs.com/demo/column.html) and [nested](http://gridstackjs.com/demo/nested.html)
+- `columnOpts`?:Responsive - describes the responsive nature of the column grid. see `Responsive` interface.
 - `class`?: string - additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance
 - `disableDrag` - disallows dragging of widgets (default: `false`).
-- `disableOneColumnMode` - Prevents the grid container from being displayed in "one column mode", even when the container's width is smaller than the value of oneColumnSize (default value of oneColumnSize is 768px). By default, this option is set to "false".
 - `disableResize` - disallows resizing of widgets (default: `false`).
 - `draggable` - allows to override draggable options - see `DDDragOpt`. (default: `{handle: '.grid-stack-item-content', appendTo: 'body', scroll: true}`)
 - `dragOut` to let user drag nested grid items out of a parent or not (default false) See [example](http://gridstackjs.com/demo/nested.html)
@@ -115,9 +117,7 @@ gridstack.js API
 - `maxRow` - maximum rows amount. Default is `0` which means no max.
 - `minRow` - minimum rows amount which is handy to prevent grid from collapsing when empty. Default is `0`. You can also do this with `min-height` CSS attribute on the grid div in pixels, which will round to the closest row.
 - `nonce` - If you are using a nonce-based Content Security Policy, pass your nonce here and
-GridStack will add it to the <style> elements it creates.
-- `oneColumnSize` - When the width of the grid is equal to or less than the value set in oneColumnSize, the grid will be displayed in one-column mode. By default, the value of this option is set to "768".
-- `oneColumnModeDomSort` - set to `true` if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: `false`)
+GridStack will add it to the `<style>` elements it creates.
 - `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
 - `placeholderText` - placeholder default content (default: `''`)
 - `resizable` - allows to override resizable options. (default: `{handles: 'se'}`). `handles` can be any combo of `n,ne,e,se,s,sw,w,nw` or `all`.
@@ -128,6 +128,19 @@ GridStack will add it to the <style> elements it creates.
 - `staticGrid` - removes drag|drop|resize (default `false`). If `true` widgets are not movable/resizable by the user, but code can still move and oneColumnMode will still work. You can use the smaller gridstack-static.js lib. A CSS class `grid-stack-static` is also added to the container.
 - `styleInHead` - if `true` will add style element to `<head>` otherwise will add it to element's parent node (default `false`).
 
+### Responsive
+v10.x supports a much richer responsive behavior, you can have breakpoints of width:column, or auto column sizing,  where no code is longer needed.
+- `columnWidth`?: number - wanted width to maintain (+-50%) to dynamically pick a column count
+- `columnMax`?: number - maximum number of columns allowed (default: 12). Note: make sure to have correct CSS to support this.
+- `layout`?: ColumnOptions - global re-layout mode when changing columns
+- `breakpointForWindow`?: boolean - specify if breakpoints are for window size or grid size (default:false = grid)
+- `breakpoints`?: Breakpoint[] - explicit width:column breakpoints instead of automatic 'columnWidth'. Note: make sure to have correct CSS to support this.
+
+#### Breakpoint
+- `w`?: number - width
+- `c`: number - column
+- `layout`?: ColumnOptions - re-layout mode if different from global one
+
 ### DDDragOpt
 - `handle`?: string - class selector of items that can be dragged. default to '.grid-stack-item-content'
 - `appendTo`?: string - default to 'body' (TODO: is this even used anymore ?)
@@ -136,7 +149,7 @@ GridStack will add it to the <style> elements it creates.
 - `cancel`?: string - prevents dragging from starting on specified elements, listed as comma separated selectors (eg: '.no-drag'). default built in is 'input,textarea,button,select,option'
 
 ### DDDragInOpt extends DDDragOpt
-- `helper`?: 'clone' | ((event: Event) => HTMLElement) - helper function when dropping (ex: 'clone' or your own method) 
+- `helper`?: 'clone' | ((event: Event) => HTMLElement) - helper function when dropping (ex: 'clone' or your own method)
 
 ## Grid attributes
 
@@ -321,7 +334,7 @@ let grids = GridStack.initAll();
 grids.forEach(...)
 ```
 
-### `addGrid(parent: HTMLElement, opt: GridStackOptions = {}): GridStack ` 
+### `addGrid(parent: HTMLElement, opt: GridStackOptions = {}): GridStack `
 
 * call to create a grid with the given options, including loading any children from JSON structure. This will call `GridStack.init()`, then `grid.load()` on any passed children (recursively). Great alternative to calling `init()` if you want entire grid to come from JSON serialized data, including options.
 * @param parent HTML element parent to the grid
@@ -372,7 +385,7 @@ re-layout grid items to reclaim any empty space. Options are:
 - `'compact'` might re-order items to fill any empty space
 
 - `doSort` - `false` to let you do your own sorting ahead in case you need to control a different order. (default to sort)
- 
+
 
 ### `cellHeight(val: number, update = true)`
 
@@ -509,7 +522,7 @@ let grid = GridStack.init();
 grid.el.appendChild('<div id="gsi-1" gs-x="0" gs-y="0" gs-w="3" gs-h="2" gs-auto-position="true"></div>')
 grid.makeWidget('#gsi-1');
 ```
-### `makeSubgrid(el)`
+### `makeSubGrid(el)`
 Used to add a subgrid into an existing grid.
 ```js
 const grid = Gridstack.init()
@@ -520,7 +533,7 @@ grid.el.appendChild(`
           </div>
       </div>
 </div>`)
-grid.addSubGrid(grid.el.getElementById('nested-grid'))
+grid.makeSubGrid(grid.el.getElementById('nested-grid'))
 ```
 Make sure that the subgrid is inside of a grid item. It is important to remember that subgrids are themselves grid items capable of containing other grid items.
 ### `margin(value: numberOrString)`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "9.5.1",
+  "version": "10.0.1",
   "license": "MIT",
   "author": "Alain Dumesny <alaind831+github@gmail.com> (https://github.com/adumesny)",
   "contributors": [
@@ -83,7 +83,7 @@
     "karma-chrome-launcher": "^3.1.1",
     "karma-cli": "^2.0.0",
     "karma-jasmine": "^5.1.0",
-    "karma-typescript": "5.5.3",
+    "karma-typescript": "5.5.4",
     "protractor": "^7.0.0",
     "sass": "^1.62.0",
     "serve-static": "^1.15.0",