diff --git a/Gruntfile.js b/Gruntfile.js index dd85dca31..479901507 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -42,6 +42,9 @@ module.exports = function(grunt) { 'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'], 'dist/src/gridstack.scss': ['src/gridstack.scss'], 'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'], + 'dist/angular/README.md': ['demo/angular/src/app/README.md'], + 'dist/angular/gridstack.component.ts': ['demo/angular/src/app/gridstack.component.ts'], + 'dist/angular/gridstack-item.component.ts': ['demo/angular/src/app/gridstack-item.component.ts'], } } }, diff --git a/demo/angular/src/app/README.md b/demo/angular/src/app/README.md index 43d91a763..0ced02c43 100644 --- a/demo/angular/src/app/README.md +++ b/demo/angular/src/app/README.md @@ -16,9 +16,9 @@ public gridOptions: GridStackOptions = { float: true, } public items: GridStackWidget[] = [ - {x:0, y:0, minW:2}, - {x:1, y:1}, - {x:2, y:2}, + {x:0, y:0, minW:2, id:'1'}, + {x:1, y:1, id:'2'}, + {x:2, y:2, id:'3'}, ]; // called whenever items change size/position/etc.. @@ -28,7 +28,7 @@ public onChange(data: nodesCB) { // ngFor unique node id to have correct match between our items used and GS public identify(index: number, w: GridStackWidget) { - return w.id; + return w.id; // or use index if no id is set and you only modify at the end... } ``` HTML @@ -50,3 +50,8 @@ to build the demo, go to demo/angular and run `yarn` + `yarn start` and Navigate - This wrapper needs v7.1.2+ to run as it needs the latest changes - This wrapper handles well ngFor loops, but if you're using a trackBy function (as I would recommend) and no element id change after an update, you must manually call the `Gridstack.update()` method directly. - The original client list of items is not updated to match **content** changes made by gridstack (TBD later), but adding new item or removing (as shown in demo) will update those new items. Client could use change/added/removed events to sync that list if they wish to do so now. + - Code isn't compiled into a side lib to use right now - you need to copy those files for now. Let me know (slack) if you are using it... + + thank you! + Would appreciate getting help doing the same for React and Vue (2 other popular frameworks) + - Alain diff --git a/demo/angular/src/app/app.component.html b/demo/angular/src/app/app.component.html index 8d3b18587..cefca4f08 100644 --- a/demo/angular/src/app/app.component.html +++ b/demo/angular/src/app/app.component.html @@ -16,7 +16,7 @@

COMPONENT: Most complete example that uses Component wrapper for grid and gridItem

- + diff --git a/demo/angular/src/app/app.component.ts b/demo/angular/src/app/app.component.ts index 872417ca3..798e4cc5e 100644 --- a/demo/angular/src/app/app.component.ts +++ b/demo/angular/src/app/app.component.ts @@ -45,26 +45,25 @@ export class AppComponent { /** * CRUD TEST operations */ - public add(comp: GridstackComponent) { - // new array isn't required as Angular seem to detect changes to content + public add(gridComp: GridstackComponent) { + // new array isn't required as Angular detects changes to content with trackBy:identify() // this.items = [...this.items, { x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++) }]; - this.items.push({ x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++)}); + this.items.push({x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++)}); } - public delete(comp: GridstackComponent) { + public delete(gridComp: GridstackComponent) { this.items.pop(); } - public change(comp: GridstackComponent) { - // this will not update the DOM nor trigger gridstackItems.changes for GS to auto-update, so call GS update() instead + public modify(gridComp: GridstackComponent) { + // this will not update the DOM nor trigger gridstackItems.changes for GS to auto-update, so set new option of the gridItem instead // this.items[0].w = 3; - // comp.updateAll(); - const n = comp.grid?.engine.nodes[0]; - if (n?.el) comp.grid?.update(n.el, {w:3}); + const gridItem = gridComp.gridstackItems?.get(0); + if (gridItem) gridItem.options = {w:3}; } /** test updating existing and creating new one */ - public newLayout(comp: GridstackComponent) { + public newLayout(gridComp: GridstackComponent) { this.items = [ {x:0, y:1, id:'1', minW:1, w:1}, // new size/constrain {x:1, y:1, id:'2'}, @@ -75,6 +74,6 @@ export class AppComponent { // ngFor unique node id to have correct match between our items used and GS public identify(index: number, w: GridStackWidget) { - return w.id; + return w.id; // or use index if no id is set and you only modify at the end... } } diff --git a/demo/angular/src/app/gridstack-item.component.ts b/demo/angular/src/app/gridstack-item.component.ts index ba5fb99b2..990efc78a 100644 --- a/demo/angular/src/app/gridstack-item.component.ts +++ b/demo/angular/src/app/gridstack-item.component.ts @@ -1,6 +1,14 @@ +/** + * gridstack-item.component.ts 7.1.2 + * Copyright (c) 2022 Alain Dumesny - see GridStack root license + */ + import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core'; import { GridItemHTMLElement, GridStackNode } from 'gridstack'; +/** + * HTML Component Wrapper for gridstack items, in combination with GridstackComponent for parent grid + */ @Component({ selector: 'gridstack-item', template: ` @@ -14,13 +22,15 @@ import { GridItemHTMLElement, GridStackNode } from 'gridstack'; }) export class GridstackItemComponent { - /** list of options for creating this item */ + /** list of options for creating/updating this item */ @Input() public set options(val: GridStackNode) { - val.el = this.element; // connect this element to options so we can convert to widget later if (this.element.gridstackNode?.grid) { + // already built, do an update... this.element.gridstackNode.grid.update(this.element, val); } else { - this._options = val; // store initial values (before we're built) + // store our custom element in options so we can update it and not re-create a generic div! + val.el = this.element; + this._options = val; } } /** return the latest grid options (from GS once built, otherwise initial values) */ diff --git a/demo/angular/src/app/gridstack.component.ts b/demo/angular/src/app/gridstack.component.ts index aaae703f1..de864e65d 100644 --- a/demo/angular/src/app/gridstack.component.ts +++ b/demo/angular/src/app/gridstack.component.ts @@ -1,3 +1,8 @@ +/** + * gridstack.component.ts 7.1.2 + * Copyright (c) 2022 Alain Dumesny - see GridStack root license + */ + import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, QueryList } from '@angular/core'; import { Subject } from 'rxjs'; diff --git a/demo/angular/src/app/ngFor.ts b/demo/angular/src/app/ngFor.ts index c1d0f13d2..2eeff838c 100644 --- a/demo/angular/src/app/ngFor.ts +++ b/demo/angular/src/app/ngFor.ts @@ -14,7 +14,7 @@ let ids = 1;

ngFor: Example using Angular ngFor to loop through items and create DOM items. This track changes made to the array of items, waits for DOM rendering, then update GS

- +
el.id === `${0}`); this.grid.update(updateEl!, { w: 2 }); } diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 32babf2d2..36e373f06 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -5,7 +5,7 @@ Change log **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)* -- [7.1.1-dev (TBD)](#711-dev-tbd) +- [7.1.2 (2022-12-29)](#712-2022-12-29) - [7.1.1 (2022-11-13)](#711-2022-11-13) - [7.1.0 (2022-10-23)](#710-2022-10-23) - [7.0.1 (2022-10-14)](#701-2022-10-14) @@ -77,7 +77,7 @@ Change log -## 7.1.1-dev (TBD) +## 7.1.2 (2022-12-29) * fix [#939](https://github.com/gridstack/gridstack.js/issues/2039) 'prototype' undefined error for dd-gridstack.js * add [#939](https://github.com/gridstack/gridstack.js/issues/2105) disable/enable are methods now recursive by default * add better `GridStackEventHandlerCallback` spelled out types diff --git a/package.json b/package.json index 5ae39ffab..262652967 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gridstack", - "version": "7.1.1-dev", + "version": "7.1.2", "description": "TypeScript/JS lib for dashboard layout and creation, responsive, mobile support, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)", "main": "./dist/gridstack.js", "types": "./dist/gridstack.d.ts", diff --git a/src/dd-base-impl.ts b/src/dd-base-impl.ts index 03bfd5c45..063074c36 100644 --- a/src/dd-base-impl.ts +++ b/src/dd-base-impl.ts @@ -1,5 +1,5 @@ /** - * dd-base-impl.ts 7.1.1-dev + * dd-base-impl.ts 7.1.2 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts index 3db309b15..8cb1477ba 100644 --- a/src/dd-draggable.ts +++ b/src/dd-draggable.ts @@ -1,5 +1,5 @@ /** - * dd-draggable.ts 7.1.1-dev + * dd-draggable.ts 7.1.2 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-droppable.ts b/src/dd-droppable.ts index fa73a98a6..3c4731689 100644 --- a/src/dd-droppable.ts +++ b/src/dd-droppable.ts @@ -1,5 +1,5 @@ /** - * dd-droppable.ts 7.1.1-dev + * dd-droppable.ts 7.1.2 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-element.ts b/src/dd-element.ts index 9640cfae8..52a5d5e1f 100644 --- a/src/dd-element.ts +++ b/src/dd-element.ts @@ -1,5 +1,5 @@ /** - * dd-elements.ts 7.1.1-dev + * dd-elements.ts 7.1.2 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-gridstack.ts b/src/dd-gridstack.ts index c02a4c39d..0b810802c 100644 --- a/src/dd-gridstack.ts +++ b/src/dd-gridstack.ts @@ -1,5 +1,5 @@ /** - * dd-gridstack.ts 7.1.1-dev + * dd-gridstack.ts 7.1.2 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-manager.ts b/src/dd-manager.ts index a9a8fff9e..b0dcf59f0 100644 --- a/src/dd-manager.ts +++ b/src/dd-manager.ts @@ -1,5 +1,5 @@ /** - * dd-manager.ts 7.1.1-dev + * dd-manager.ts 7.1.2 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts index 70f6c46a2..41e2388f7 100644 --- a/src/dd-resizable-handle.ts +++ b/src/dd-resizable-handle.ts @@ -1,5 +1,5 @@ /** - * dd-resizable-handle.ts 7.1.1-dev + * dd-resizable-handle.ts 7.1.2 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts index 0e0994ffe..fd9e3efaa 100644 --- a/src/dd-resizable.ts +++ b/src/dd-resizable.ts @@ -1,5 +1,5 @@ /** - * dd-resizable.ts 7.1.1-dev + * dd-resizable.ts 7.1.2 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-touch.ts b/src/dd-touch.ts index 171870867..d43cf99fd 100644 --- a/src/dd-touch.ts +++ b/src/dd-touch.ts @@ -1,5 +1,5 @@ /** - * touch.ts 7.1.1-dev + * touch.ts 7.1.2 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts index 22834bb86..8938d6c8e 100644 --- a/src/gridstack-engine.ts +++ b/src/gridstack-engine.ts @@ -1,5 +1,5 @@ /** - * gridstack-engine.ts 7.1.1-dev + * gridstack-engine.ts 7.1.2 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/gridstack-poly.js b/src/gridstack-poly.js index 0b4dea9a5..52b26740f 100644 --- a/src/gridstack-poly.js +++ b/src/gridstack-poly.js @@ -1,5 +1,5 @@ /** - * gridstack-poly.ts 7.1.1-dev used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4) + * gridstack-poly.ts 7.1.2 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4) * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/gridstack.scss b/src/gridstack.scss index f36248dbd..3222c06b9 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -1,5 +1,5 @@ /** - * gridstack SASS styles 7.1.1-dev + * gridstack SASS styles 7.1.2 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/gridstack.ts b/src/gridstack.ts index f53c6da23..2b00dc06d 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -1,5 +1,5 @@ /*! - * GridStack 7.1.1-dev + * GridStack 7.1.2 * https://gridstackjs.com/ * * Copyright (c) 2021-2022 Alain Dumesny @@ -1614,7 +1614,7 @@ export class GridStack { return this; } - static GDRev = '7.1.1-dev'; + static GDRev = '7.1.2'; /* =========================================================================================== * drag&drop methods that used to be stubbed out and implemented in dd-gridstack.ts diff --git a/src/types.ts b/src/types.ts index 98dab1127..7274f09a5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,5 @@ /** - * types.ts 7.1.1-dev + * types.ts 7.1.2 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/utils.ts b/src/utils.ts index 286bc1fda..b24af5693 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,5 +1,5 @@ /** - * utils.ts 7.1.1-dev + * utils.ts 7.1.2 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */