gridstack 7.3.0 → 8.0.1

package/doc/CHANGES.md

@@ -5,6 +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/)*
 
+- [8.0.1 (2023-04-29)](#801-2023-04-29)
+- [8.0.0 (2023-04-29)](#800-2023-04-29)
 - [7.3.0 (2023-04-01)](#730-2023-04-01)
 - [7.2.3 (2023-02-02)](#723-2023-02-02)
 - [7.2.2 (2023-01-16)](#722-2023-01-16)
@@ -82,6 +84,24 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 8.0.1 (2023-04-29)
+* feat: [#2275](https://github.com/gridstack/gridstack.js/issues/2275) `setupDragIn()` now can take an array or elements (in addition to selector string) and optional parent root (for shadow DOM support)
+* fix: [#2234](https://github.com/gridstack/gridstack.js/issues/2234) `Utils.getElements('1')` (called by removeWidget() and others) now checks for digit 'selector' (becomes an id).
+* fix: [#2213](https://github.com/gridstack/gridstack.js/issues/2213) `destroy()` now removes event handlers too
+* feat: [#2292](https://github.com/gridstack/gridstack.js/issues/2292) ne nw resize handle
+* break: (meant to be in v8) removed `GridStackOptions.dragInOptions` since `setupDragIn()`has it replaced since 4.0
+
+## 8.0.0 (2023-04-29)
+* package is now ES2020 (TS exported files), webpack all.js still umd (better than commonjs for browsers), still have es5/ files unchanged (for now)
+* optimize [#2243](https://github.com/gridstack/gridstack.js/issues/2243) removed `gs-min|max_w|h` attribute generated in CSS or written out as they are never used for rendering, only for initial load. This reduce our column/row CSS in half!
+* optimize: removed `gs-w='1'` and `gs-h='1'` dom attribute writing since we already have min-width/min-height set, no need to set more attributes.
+* optimize: remove `'ui-draggable'` and `'ui-resizable'` since wasn't used in CSS and we have the `-disabled` version when off (so we can use `not(xyz-disabled)`).
+* add: `GridStack.saveCB` global callback for each item during save so app can insert any custom data before serializing it. `save()` can now be passed optional callback
+* move: `GridStack.addRemoveCB` is now global instead of grid option. `load()` can still be passed different optional callback
+* fix: addGrid() to handle passing an existing initialized grid already
+* break: `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts`. We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (subclass) rather than try to merge the two at runtime since very different types...
+* tons of improvements for Angular wrapper.
+
 ## 7.3.0 (2023-04-01)
 * feat [#2229](https://github.com/gridstack/gridstack.js/pull/2229) support nonce for CSP. Thank you [@jedwards1211](https://github.com/jedwards1211)
 * feat: support nested grids with Angular component demo. Thank you R. Blanken for supporting this.

package/doc/README.md

@@ -28,7 +28,7 @@ gridstack.js API
   - [`init(options: GridStackOptions = {}, elOrString: GridStackElement = '.grid-stack'): GridStack`](#initoptions-gridstackoptions---elorstring-gridstackelement--grid-stack-gridstack)
   - [`initAll(options: GridStackOptions = {}, selector = '.grid-stack'): GridStack[]`](#initalloptions-gridstackoptions---selector--grid-stack-gridstack)
   - [`addGrid(parent: HTMLElement, opt: GridStackOptions = {}): GridStack `](#addgridparent-htmlelement-opt-gridstackoptions---gridstack-)
-  - [`setupDragIn(dragIn?: string, dragInOptions?: DDDragInOpt)`](#setupdragindragin-string-draginoptions-dddraginopt)
+  - [`setupDragIn(dragIn?: string | HTMLElement[], dragInOptions?: DDDragInOpt, root = document)`](#setupdragindragin-string--htmlelement-draginoptions-dddraginopt-root--document)
   - [`GridStack.registerEngine(engineClass: typeof GridStackEngine)`](#gridstackregisterengineengineclass-typeof-gridstackengine)
 - [API](#api)
   - [`addWidget(el?: GridStackWidget | GridStackElement, options?: GridStackWidget)`](#addwidgetel-gridstackwidget--gridstackelement-options-gridstackwidget)
@@ -51,6 +51,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)
   - [`margin(value: numberOrString)`](#marginvalue-numberorstring)
   - [`movable(el, val)`](#movableel-val)
   - [`removeWidget(el, removeDOM = true, triggerEvent = true)`](#removewidgetel-removedom--true-triggerevent--true)
@@ -93,15 +94,8 @@ gridstack.js API
 - `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)
 - `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` - disables the oneColumnMode when the grid width is less than minW (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`).
-- `dragIn` - specify the class of items that can be dragged into grids
-  * example: `dragIn: '.newWidget'`.
-  * **Note**: if you have multiple grids, it's best to call `GridStack.setupDragIn()` with same params as it only need to be done once.
-- `dragInOptions` - options for items that can be dragged into grids - see `DDDragInOpt`
-  * example `dragInOptions: { appendTo: 'body', helper: 'clone', handle: '.grid-stack-item-content' }`
-  * **Note**: if you have multiple grids, it's best to call `GridStack.setupDragIn()` with same params as it only need to be done once.
-  * **Note2**: instead of 'clone' you can also pass your own function (get passed the event).
 - `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)
 - `engineClass` - the type of engine to create (so you can subclass) default to GridStackEngine
@@ -120,7 +114,7 @@ gridstack.js API
 - `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` - minimal width. If grid width is less than or equal to, grid will be shown in one-column mode (default: `768`)
+- `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`)
 - `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
 - `placeholderText` - placeholder default content (default: `''`)
@@ -329,15 +323,15 @@ grids.forEach(...)
 * @param opt grids options used to initialize the grid, and list of children
 * see [nested.html](https://github.com/gridstack/gridstack.js/tree/master/demo/nested.html) demo
 
-### `setupDragIn(dragIn?: string, dragInOptions?: DDDragInOpt)`
+### `setupDragIn(dragIn?: string | HTMLElement[], dragInOptions?: DDDragInOpt, root = document)`
 
 * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
 Called during `GridStack.init()` as options, but can also be called directly (last param are cached) in case the toolbar is dynamically create and needs to change later.
-* @param dragIn string selector (ex: `'.sidebar .grid-stack-item'`)
+* @param dragIn string selector (ex: `'.sidebar .grid-stack-item'`) or list of dom elements
 * @param dragInOptions options - see `DDDragInOpt`. (default: `{handle: '.grid-stack-item-content', appendTo: 'body'}`
+* @param root - default to document (for shadow dom support)
 but you will probably also want `helper: 'clone'` or your own callback function).
 
-
 ### `GridStack.registerEngine(engineClass: typeof GridStackEngine)`
 
 * call to specify global custom engine subclass - see instead `GridStackOptions.engineClass` if you only need to replace just one instance.
@@ -501,7 +495,20 @@ 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)`
+Used to add a subgrid into an existing grid.
+```js
+const 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 class="grid-stack" id="nested-grid">
+          <div id="gsi-2" gs-x="0" gs-y="0" gs-w="3" gs-h="2" gs-auto-position="true">
+          </div>
+      </div>
+</div>`)
+grid.addSubGrid(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)`
 
 gap between grid item and content (default?: 10). This will set all 4 sides and support the CSS formats below

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "7.3.0",
+  "version": "8.0.1",
   "license": "MIT",
   "author": "Alain Dumesny <alaind831+github@gmail.com> (https://github.com/adumesny)",
   "contributors": [
@@ -25,9 +25,10 @@
     }
   ],
   "scripts": {
-    "build": "yarn --no-progress && rm -rf dist/* && grunt && yarn build:es6 && yarn build:es5 && yarn doc",
+    "build": "yarn --no-progress && rm -rf dist/* && grunt && yarn build:es6 && yarn build:ng && yarn build:es5 && yarn doc",
     "build:es6": "webpack && tsc --stripInternal",
     "build:es5": "webpack --config es5/webpack.config.js && tsc --stripInternal --project es5/tsconfig.json",
+    "build:ng": "tsc --stripInternal --project ./demo/angular/tsconfig.lib.json",
     "w": "webpack",
     "t": "rm -rf dist/* && grunt && tsc --stripInternal",
     "doc": "doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
@@ -58,37 +59,37 @@
   "homepage": "http://gridstackjs.com/",
   "dependencies": {},
   "devDependencies": {
-    "@types/jasmine": "^3.5.9",
-    "@typescript-eslint/eslint-plugin": "^4.6.0",
-    "@typescript-eslint/parser": "^4.6.0",
+    "@types/jasmine": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
     "connect": "^3.7.0",
-    "core-js": "^3.6.4",
-    "coveralls": "^3.0.9",
-    "doctoc": "^1.4.0",
-    "eslint": "^7.14",
-    "grunt": "^1.0.4",
+    "core-js": "^3.30.1",
+    "coveralls": "^3.1.1",
+    "doctoc": "^2.2.1",
+    "eslint": "^8.38.0",
+    "grunt": "^1.6.1",
     "grunt-cli": "^1.3.2",
     "grunt-contrib-connect": "^3.0.0",
     "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-cssmin": "^3.0.0",
-    "grunt-contrib-uglify": "^5.0.0",
+    "grunt-contrib-cssmin": "^4.0.0",
+    "grunt-contrib-uglify": "^5.2.2",
     "grunt-contrib-watch": "^1.1.0",
-    "grunt-eslint": "^23.0.0",
+    "grunt-eslint": "^24.0.1",
     "grunt-protractor-runner": "^5.0.0",
     "grunt-protractor-webdriver": "^0.2.5",
     "grunt-sass": "3.1.0",
-    "jasmine-core": "^3.5.0",
-    "karma": "^6",
-    "karma-chrome-launcher": "^3.1.0",
+    "jasmine-core": "^4.6.0",
+    "karma": "^6.4.1",
+    "karma-chrome-launcher": "^3.1.1",
     "karma-cli": "^2.0.0",
-    "karma-jasmine": "^4.0.1",
-    "karma-typescript": "4.1.1",
+    "karma-jasmine": "^5.1.0",
+    "karma-typescript": "5.5.3",
     "protractor": "^7.0.0",
-    "sass": "^1.42.1",
-    "serve-static": "^1.14.1",
-    "ts-loader": "^8.0.7",
-    "typescript": "^3.7",
-    "webpack": "^5.3.2",
-    "webpack-cli": "^4.6.0"
+    "sass": "^1.62.0",
+    "serve-static": "^1.15.0",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.4",
+    "webpack": "^5.79.0",
+    "webpack-cli": "^5.0.1"
   }
 }