Merge branch 'gridstack:master' into master

Author: Aysnine

ISSUE_TEMPLATE.md renamed to .github/ISSUE_TEMPLATE/bug_report.md

@@ -1,3 +1,12 @@
+---
+name: Bug report
+about: bug report
+title: ''
+labels: ''
+assignees: ''
+
+---
+
 ## Subject of the issue
 Describe your issue here.
 If unsure if lib bug, use slack channel instead: https://join.slack.com/t/gridstackjs/shared_invite/zt-2qa21lnxz-vw29RdTFet3N6~ABqT9kwA

README.md

@@ -472,20 +472,20 @@ breaking change:
 
 **Breaking change:**
 
-* if you code relies on `GridStackWidget.content` with real HTML (like a few demos) it is up to you to do this:
+* if your code relies on `GridStackWidget.content` with real HTML (like a few demos) it is up to you to do this:
 ```ts
 // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
-GridStack.renderCB = function(el, w) {
+GridStack.renderCB = function(el: HTMLElement, w: GridStackNode) {
   el.innerHTML = w.content;
 };
 ```
 * V11 add new `GridStack.renderCB` that is called for you to create the widget content (entire GridStackWidget is passed so you can use id or some other field as logic) while GS creates the 2 needed parent divs + classes, unlike `GridStack.addRemoveCB` which doesn't create anything for you. Both can be handy for Angular/React/Vue frameworks.
-* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself (`Util.createWidgetDivs()` can be used to create parent divs) then call `makeWidget(el)` instead.
+* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself (`GridStack.createWidgetDivs()` can be used to create parent divs) then call `makeWidget(el)` instead.
 
 **Potential breaking change:**
 
 * BIG overall to how sidepanel helper drag&drop is done:
-1. `clone()` helper is now passed full HTML element dragged, not an event on `grid-stack-item-content` so can clone or set attr at the top.
+1. `clone()` helper is now passed full HTML element dragged, not an event on `grid-stack-item-content` so you can clone or set attr at the top.
 2. use any class/structure you want for side panel items (see two.html)
 3. `GridStack.setupDragIn()` now support associating a `GridStackWidget` for each sidepanel that will be used to define what to create on drop!
 4. if no `GridStackWidget` is defined, the helper will now be inserted as is, and NOT original sidepanel item.

angular/README.md

@@ -8,13 +8,13 @@ this is the recommended way if you are going to have multiple grids (alow drag&d
 
 I.E. don't use Angular templating to create grid items as that is harder to sync when gridstack will also add/remove items.
 
-HTML
+MyComponent HTML
 
 ```html
 <gridstack [options]="gridOptions"></gridstack>
 ```
 
-CSS
+MyComponent CSS
 
 ```css
 @import "gridstack/dist/gridstack.min.css";
@@ -30,7 +30,7 @@ CSS
 ```
 
 
-Standalone Component Code
+Standalone MyComponent Code
 
 ```ts
 import { GridStackOptions } from 'gridstack';
@@ -47,7 +47,7 @@ export class MyComponent {
   // sample grid options + items to load...
   public gridOptions: GridStackOptions = {
     margin: 5,
-    children: [ // or call load()/addWidget() with same data
+    children: [ // or call load(children) or addWidget(children[0]) with same data
       {x:0, y:0, minW:2, content:'Item 1'},
       {x:1, y:0, content:'Item 2'},
       {x:0, y:1, content:'Item 3'},

angular/package.json

@@ -18,7 +18,7 @@
     "@angular/platform-browser": "^14",
     "@angular/platform-browser-dynamic": "^14",
     "@angular/router": "^14",
-    "gridstack": "^11.3.0",
+    "gridstack": "^11.4.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

angular/projects/lib/src/index.ts

@@ -2,7 +2,8 @@
  * Public API Surface of gridstack-angular
  */
 
+export * from './lib/types';
+export * from './lib/base-widget';
 export * from './lib/gridstack-item.component';
 export * from './lib/gridstack.component';
-export * from './lib/base-widget';
 export * from './lib/gridstack.module';

angular/projects/lib/src/lib/base-widget.ts

@@ -1,5 +1,5 @@
 /**
- * gridstack-item.component.ts 11.3.0-dev
+ * gridstack-item.component.ts 11.4.0-dev
  * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 
@@ -8,7 +8,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { NgCompInputs, NgGridStackWidget } from './gridstack.component';
+import { NgCompInputs, NgGridStackWidget } from './types';
 
  @Injectable()
  export abstract class BaseWidget {

angular/projects/lib/src/lib/gridstack-item.component.ts

@@ -1,5 +1,5 @@
 /**
- * gridstack-item.component.ts 11.3.0-dev
+ * gridstack-item.component.ts 11.4.0-dev
  * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 

angular/projects/lib/src/lib/gridstack.component.ts

@@ -1,5 +1,5 @@
 /**
- * gridstack.component.ts 11.3.0-dev
+ * gridstack.component.ts 11.4.0-dev
  * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 
@@ -9,34 +9,16 @@ import { NgIf } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
 
-import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
+import { NgGridStackNode, NgGridStackWidget } from './types';
 import { BaseWidget } from './base-widget';
+import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
 
 /** events handlers emitters signature for different events */
 export type eventCB = {event: Event};
 export type elementCB = {event: Event, el: GridItemHTMLElement};
 export type nodesCB = {event: Event, nodes: GridStackNode[]};
 export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: GridStackNode};
 
-export type NgCompInputs = {[key: string]: any};
-
-/** extends to store Ng Component selector, instead/inAddition to content */
-export interface NgGridStackWidget extends GridStackWidget {
-  /** Angular tag selector for this component to create at runtime */
-  selector?: string;
-  /** serialized data for the component input fields */
-  input?: NgCompInputs;
-  /** nested grid options */
-  subGridOpts?: NgGridStackOptions;
-}
-export interface NgGridStackNode extends GridStackNode {
-  selector?: string; // component type to create as content
-}
-export interface NgGridStackOptions extends GridStackOptions {
-  children?: NgGridStackWidget[];
-  subGridOpts?: NgGridStackOptions;
-}
-
 /** store element to Ng Class pointer back */
 export interface GridCompHTMLElement extends GridHTMLElement {
   _gridComp?: GridstackComponent;

angular/projects/lib/src/lib/gridstack.module.ts

@@ -1,22 +1,22 @@
 /**
- * gridstack.component.ts 11.3.0-dev
+ * gridstack.component.ts 11.4.0-dev
  * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 
 import { NgModule } from "@angular/core";
 
-import { GridstackComponent } from "./gridstack.component";
 import { GridstackItemComponent } from "./gridstack-item.component";
+import { GridstackComponent } from "./gridstack.component";
 
 // @deprecated use GridstackComponent and GridstackItemComponent as standalone components
 @NgModule({
   imports: [
-    GridstackComponent,
     GridstackItemComponent,
+    GridstackComponent,
   ],
   exports: [
-    GridstackComponent,
     GridstackItemComponent,
+    GridstackComponent,
   ],
 })
 export class GridstackModule {}

angular/projects/lib/src/lib/types.ts

@@ -0,0 +1,27 @@
+/**
+ * gridstack-item.component.ts 11.4.0-dev
+ * Copyright (c) 2025 Alain Dumesny - see GridStack root license
+ */
+
+import { GridStackNode, GridStackOptions, GridStackWidget } from "gridstack";
+
+/** extends to store Ng Component selector, instead/inAddition to content */
+export interface NgGridStackWidget extends GridStackWidget {
+  /** Angular tag selector for this component to create at runtime */
+  selector?: string;
+  /** serialized data for the component input fields */
+  input?: NgCompInputs;
+  /** nested grid options */
+  subGridOpts?: NgGridStackOptions;
+}
+
+export interface NgGridStackNode extends GridStackNode {
+  selector?: string; // component type to create as content
+}
+
+export interface NgGridStackOptions extends GridStackOptions {
+  children?: NgGridStackWidget[];
+  subGridOpts?: NgGridStackOptions;
+}
+
+export type NgCompInputs = {[key: string]: any};

angular/yarn.lock

@@ -3752,10 +3752,10 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4,
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
-gridstack@^11.3.0:
-  version "11.3.0"
-  resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-11.3.0.tgz#b110c66bafc64c920fc54933e2c9df4f7b2cfffe"
-  integrity sha512-Z0eRovKcZTRTs3zetJwjO6CNwrgIy845WfOeZGk8ybpeMCE8fMA8tScyKU72Y2M6uGHkjgwnjflglvPiv+RcBQ==
+gridstack@^11.4.0:
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-11.4.0.tgz#5d98a471c90a3e8c478382ac71f5a63551eb83c4"
+  integrity sha512-V1faqcHZjbXODt/cMg8a0aIN1uqqR4R5lENTls3sP8vbArvHrYAa9UPzzJWR6+RqPMLxmFG/OG2Evnmu/XOE9A==
 
 handle-thing@^2.0.0:
   version "2.0.1"
@@ -6143,9 +6143,9 @@ [email protected]:
     statuses "2.0.1"
 
 serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
-  integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
   dependencies:
     randombytes "^2.1.0"
 

demo/demo.css

@@ -53,6 +53,17 @@ h1 {
   text-align: center;
   background-color: #18bc9c;
 }
+
+.card-header {
+  margin: 0;
+  cursor: move;
+  min-height: 25px;
+  background-color: #16af91;
+}
+.card-header:hover {
+  background-color: #149b80;
+}
+
 .ui-draggable-disabled.ui-resizable-disabled > .grid-stack-item-content {
   background-color: #777;
 }

demo/index.html

@@ -47,14 +47,9 @@ <h1>Demos</h1>
   </ul>
   <h1>Angular wrapper</h1>
   <p>We now ship an <a href="https://github.com/gridstack/gridstack.js/tree/master/angular/" target="_blank">Angular Component</a>
-    to make it supper easy for that framework (Vue and React examples are above)</p>
-  <p>These are complete Angular projects with multiple options. use `yarn` and `yarn start` in <a href="https://github.com/gridstack/gridstack.js/tree/master/angular/projects/demo" target="_blank">angular demo</a> sub-project to run them</p>
-  <ol>
-    <li><a href="../angular/projects/demo/src/app/simple.ts">simple.ts</a></li>
-    <li><a href="../angular/projects/demo/src/app/ngFor.ts">ngFor.ts</a></li>
-    <li><a href="../angular/projects/demo/src/app/ngFor_cmd.ts">ngFor with command</a> (not recommended)</li>
-    <li><a href="../angular/projects/lib/src/lib/gridstack.component.ts">gridstack.component.ts</a> and <a href="../angular/projects/lib/src/lib/gridstack-item.component.ts">gridstack-item.component.ts</a> (BEST)</li>
-  </ol>
+    to make it supper easy for that framework</p>
+  <h1>React wrapper</h1>
+  <p>React original examples are shown above, but upcoming and better TS based <a href="https://github.com/gridstack/gridstack.js/tree/master/react/" target="_blank">/react</a> folder (working to make that official and ship it) should be looked at instead. </p>
   <h1>Old v5.1.1 Jquery Demos</h1>
   Note: those are no longer supported, and use an old version of the lib to compare functionality.
   <ul>

demo/lazy_load.html

@@ -8,28 +8,36 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <script src="../dist/gridstack-all.js"></script>
-
 </head>
 <body>
   <div>
-    <h1>Lazy loading demo</h1>
+    <h1>Lazy loading + renderCB demo</h1>
     <p>New V11 GridStackWidget.lazyLoad feature. open console and see widget content (or angular components) created as they become visible.</p>
     <div style="height: 300px; overflow-y: auto">
       <div class="grid-stack"></div>
     </div>
   </div>
   <script type="text/javascript">
-    // print when widgets are created
+    // print when widgets are created, verify dragging by newly added content
     GridStack.renderCB = function(el, w) {
-      el.textContent = w.content;
+      const title = document.createElement('h3');
+      title.textContent = 'Drag me by title';
+      title.className = 'card-header';
+      el.appendChild(title);
+      const div = document.createElement('div');
+      div.textContent = w.id;
+      el.appendChild(div);
       console.log('created node id ', w.id);
     };
+
     let children = [];
     for (let y = 0; y <= 5; y++) children.push({x:0, y, id:String(y), content: String(y)});
+    
     let grid = GridStack.init({
       cellHeight: 200,
       children,
       lazyLoad: true,  // delay creation until visible
+      handle: '.card-header',
     });
   </script>
 </body>

demo/sizeToContent.html

@@ -109,7 +109,7 @@ <h1>sizeToContent options demo</h1>
       grid.addWidget({content: `<div>New: ${text}</div>`});
     }
     function makeWidget() {
-      let el = GridStack.Utils.createWidgetDivs(undefined, {content: `<div>New Make: ${text}</div>`}, grid.el)
+      let el = grid.createWidgetDivs({content: `<div>New Make: ${text}</div>`}, grid.el)
       grid.makeWidget(el, {w:2});
     }
     function more() {

demo/title_drag.html

@@ -8,19 +8,6 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <script src="../dist/gridstack-all.js"></script>
-  <style type="text/css">
-    .card-header {
-      cursor: move;
-      min-height: 25px;
-    }
-    .card-header:hover {
-      background-color: rgba(0,0,0,0.1);
-    }
-    .card {
-      text-align: left;
-    }
-  </style>
-
 </head>
 <body>
   <div class="container-fluid">

demo/two.html

@@ -107,7 +107,7 @@ <h1>Two grids demo</h1>
     // clone the sidepanel item so we drag a copy, and in some case ('manual') create the final widget, else sidebarContent will be used.
     function myClone(el) {
       if (el.getAttribute('gs-id') === 'manual') {
-        return GridStack.Utils.createWidgetDivs(undefined, {w:2, content:'manual'}); // RenderCB() will be called
+        return grids[0].createWidgetDivs({w:2, content:'manual'}); // RenderCB() will be called
       }
       el = el.cloneNode(true);
       // el.setAttribute('gs-id', 'foo'); // help debug #2231

doc/CHANGES.md

@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [11.4.0 (2025-02-27)](#1140-2025-02-27)
 - [11.3.0 (2025-01-26)](#1130-2025-01-26)
 - [11.2.0 (2024-12-29)](#1120-2024-12-29)
 - [11.1.2 (2024-12-08)](#1112-2024-12-08)
@@ -120,6 +121,15 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 11.4.0 (2025-02-27)
+* fix: [#2921](https://github.com/gridstack/gridstack.js/pull/2921) replace initMouseEvent with MouseEvent constructor and added composed: true
+* fix: [#2939](https://github.com/gridstack/gridstack.js/issues/2939) custom drag handle not working with LazyLoad
+* fix: [#2955](https://github.com/gridstack/gridstack.js/issues/2955) angular circular dependency
+* fix: [#2951](https://github.com/gridstack/gridstack.js/issues/2951) shadow DOM dragging re-appending fix
+* fix: [#2964](https://github.com/gridstack/gridstack.js/pull/2964) minW larger than column fix
+* feat: [#2965](https://github.com/gridstack/gridstack.js/pull/2965) internal `_prepareDragDropByNode(n)` is now public as `prepareDragDrop(el)` so Angular, React, and others can call once the DOM content elements have been added (the outside grid item divs are always created before content)
+* break: [#2959](https://github.com/gridstack/gridstack.js/issues/2959) `Util.createWidgetDivs()` has moved to `GridStack.createWidgetDivs()` to remove circular dependencies
+
 ## 11.3.0 (2025-01-26)
 * feat: added `isIgnoreChangeCB()` if changeCB should be ignored due to column change, sizeToContent, loading, etc...
 * feat: added `responsive_none.html` demo and fixed layout:'none' to bound check the layout (no-op unless it must change)