diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index a7063434f..d1332c7d1 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -39,10 +39,10 @@ jobs:
run: |
grunt
webpack
- tsc --stripInternal
+ tsc --project tsconfig.docs.json --stripInternal
- name: Generate all documentation
- run: yarn doc:all
+ run: yarn doc
- name: Prepare deployment structure
run: |
diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml
index 31fe83318..99bef399c 100644
--- a/.github/workflows/sync-docs.yml
+++ b/.github/workflows/sync-docs.yml
@@ -12,7 +12,7 @@ on:
jobs:
sync-docs:
runs-on: ubuntu-latest
- if: github.repository == 'gridstack/gridstack.js'
+ if: github.repository == 'adumesny/gridstack.js'
steps:
- name: Checkout master branch
@@ -53,19 +53,17 @@ jobs:
run: |
echo "Syncing main library documentation..."
- # Remove existing docs directory if it exists
- if [ -d "docs/html" ]; then
- rm -rf docs/html
+ # Remove existing doc/html directory if it exists
+ if [ -d "doc/html" ]; then
+ rm -rf doc/html
fi
# Extract docs from master branch using git archive
- mkdir -p docs
+ mkdir -p doc
git archive master doc/html | tar -xf -
- mv doc/html docs/html
- rm -rf doc
# Add changes
- git add docs/html
+ git add doc/html
- name: Sync Angular documentation
if: steps.check-docs.outputs.angular_docs == 'true'
diff --git a/angular/doc/api/base-widget.md b/angular/doc/api/base-widget.md
index 8a81d03a5..e71850e59 100644
--- a/angular/doc/api/base-widget.md
+++ b/angular/doc/api/base-widget.md
@@ -80,8 +80,8 @@ The default implementation automatically assigns input data to component propert
```typescript
deserialize(w: NgGridStackWidget) {
- super.deserialize(w); // Call parent for basic setup
-
+ super.deserialize(w); // Call parent for basic setup
+
// Custom initialization logic
if (w.input?.complexData) {
this.processComplexData(w.input.complexData);
diff --git a/angular/doc/api/gridstack.component.md b/angular/doc/api/gridstack.component.md
index c642e0257..28263105b 100644
--- a/angular/doc/api/gridstack.component.md
+++ b/angular/doc/api/gridstack.component.md
@@ -127,7 +127,7 @@ this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1});
new GridstackComponent(elementRef): GridstackComponent;
```
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:252](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L252)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:253](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L253)
###### Parameters
@@ -155,7 +155,7 @@ Register a list of Angular components for dynamic creation.
| Parameter | Type | Description |
| ------ | ------ | ------ |
-| `typeList` | `Type`\<`Object`\>[] | Array of component types to register |
+| `typeList` | `Type`\<`object`\>[] | Array of component types to register |
###### Returns
@@ -184,7 +184,7 @@ Extract the selector string from an Angular component type.
| Parameter | Type | Description |
| ------ | ------ | ------ |
-| `type` | `Type`\<`Object`\> | The component type to get selector from |
+| `type` | `Type`\<`object`\> | The component type to get selector from |
###### Returns
@@ -198,7 +198,7 @@ The component's selector string
ngOnInit(): void;
```
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:266](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L266)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:267](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L267)
A callback method that is invoked immediately after the
default change detector has checked the directive's
@@ -222,7 +222,7 @@ OnInit.ngOnInit
ngAfterContentInit(): void;
```
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:276](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L276)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:277](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L277)
wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first)
@@ -242,7 +242,7 @@ AfterContentInit.ngAfterContentInit
ngOnDestroy(): void;
```
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:284](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L284)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:285](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L285)
A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.
@@ -263,7 +263,7 @@ OnDestroy.ngOnDestroy
updateAll(): void;
```
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:298](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L298)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:299](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L299)
called when the TEMPLATE (not recommended) list of items changes - get a list of nodes and
update the layout accordingly (which will take care of adding/removing items changed by Angular)
@@ -278,7 +278,7 @@ update the layout accordingly (which will take care of adding/removing items cha
checkEmpty(): void;
```
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:309](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L309)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:310](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L310)
check if the grid is empty, if so show alternative content
@@ -292,7 +292,7 @@ check if the grid is empty, if so show alternative content
protected hookEvents(grid?): void;
```
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:315](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L315)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:316](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L316)
get all known events as easy to use Outputs for convenience
@@ -312,7 +312,7 @@ get all known events as easy to use Outputs for convenience
protected unhookEvents(grid?): void;
```
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:342](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L342)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:343](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L343)
###### Parameters
@@ -345,11 +345,11 @@ Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:342](https://gi
|
+[key: string]: Type
```
diff --git a/angular/doc/api/types.md b/angular/doc/api/types.md
index 0615a08dd..65322fde1 100644
--- a/angular/doc/api/types.md
+++ b/angular/doc/api/types.md
@@ -68,7 +68,7 @@ Supports Angular-specific widget definitions and nested grids.
type NgCompInputs = object;
```
-Defined in: [angular/projects/lib/src/lib/types.ts:54](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L54)
+Defined in: [angular/projects/lib/src/lib/types.ts:55](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L55)
Type for component input data serialization.
Maps @Input() property names to their values for widget persistence.
diff --git a/angular/projects/lib/src/lib/base-widget.ts b/angular/projects/lib/src/lib/base-widget.ts
index f903ef373..78f3cb736 100644
--- a/angular/projects/lib/src/lib/base-widget.ts
+++ b/angular/projects/lib/src/lib/base-widget.ts
@@ -5,14 +5,14 @@
/**
* Abstract base class that all custom widgets should extend.
- *
+ *
* This class provides the interface needed for GridstackItemComponent to:
* - Serialize/deserialize widget data
* - Save/restore widget state
* - Integrate with Angular lifecycle
- *
+ *
* Extend this class when creating custom widgets for dynamic grids.
- *
+ *
* @example
* ```typescript
* @Component({
@@ -21,7 +21,7 @@
* })
* export class MyCustomWidget extends BaseWidget {
* @Input() data: string = '';
- *
+ *
* serialize() {
* return { data: this.data };
* }
@@ -46,12 +46,12 @@ export abstract class BaseWidget {
/**
* Override this method to return serializable data for this widget.
- *
+ *
* Return an object with properties that map to your component's @Input() fields.
* The selector is handled automatically, so only include component-specific data.
- *
+ *
* @returns Object containing serializable component data
- *
+ *
* @example
* ```typescript
* serialize() {
@@ -67,17 +67,17 @@ export abstract class BaseWidget {
/**
* Override this method to handle widget restoration from saved data.
- *
+ *
* Use this for complex initialization that goes beyond simple @Input() mapping.
* The default implementation automatically assigns input data to component properties.
- *
+ *
* @param w The saved widget data including input properties
- *
+ *
* @example
* ```typescript
* deserialize(w: NgGridStackWidget) {
* super.deserialize(w); // Call parent for basic setup
- *
+ *
* // Custom initialization logic
* if (w.input?.complexData) {
* this.processComplexData(w.input.complexData);
@@ -92,4 +92,4 @@ export abstract class BaseWidget {
if (w.input) Object.assign(this, w.input);
}
- }
+}
diff --git a/angular/projects/lib/src/lib/gridstack-item.component.ts b/angular/projects/lib/src/lib/gridstack-item.component.ts
index 18653a917..1d2675565 100644
--- a/angular/projects/lib/src/lib/gridstack-item.component.ts
+++ b/angular/projects/lib/src/lib/gridstack-item.component.ts
@@ -18,15 +18,15 @@ export interface GridItemCompHTMLElement extends GridItemHTMLElement {
/**
* Angular component wrapper for individual GridStack items.
- *
+ *
* This component represents a single grid item and handles:
* - Dynamic content creation and management
* - Integration with parent GridStack component
* - Component lifecycle and cleanup
* - Widget options and configuration
- *
+ *
* Use in combination with GridstackComponent for the parent grid.
- *
+ *
* @example
* ```html
*
@@ -76,7 +76,7 @@ export class GridstackItemComponent implements OnDestroy {
/**
* Grid item configuration options.
* Defines position, size, and behavior of this grid item.
- *
+ *
* @example
* ```typescript
* itemOptions: GridStackNode = {
diff --git a/angular/projects/lib/src/lib/gridstack.component.ts b/angular/projects/lib/src/lib/gridstack.component.ts
index f129aab40..dd0eb90b5 100644
--- a/angular/projects/lib/src/lib/gridstack.component.ts
+++ b/angular/projects/lib/src/lib/gridstack.component.ts
@@ -4,8 +4,8 @@
*/
import {
- AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
- OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef
+ AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
+ OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef
} from '@angular/core';
import { NgIf } from '@angular/common';
import { Subscription } from 'rxjs';
@@ -45,19 +45,19 @@ export interface GridCompHTMLElement extends GridHTMLElement {
* Mapping of selector strings to Angular component types.
* Used for dynamic component creation based on widget selectors.
*/
-export type SelectorToType = {[key: string]: Type};
+export type SelectorToType = {[key: string]: Type};
/**
* Angular component wrapper for GridStack.
- *
+ *
* This component provides Angular integration for GridStack grids, handling:
* - Grid initialization and lifecycle
* - Dynamic component creation and management
* - Event binding and emission
* - Integration with Angular change detection
- *
+ *
* Use in combination with GridstackItemComponent for individual grid items.
- *
+ *
* @example
* ```html
*
@@ -99,7 +99,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
/**
* Grid configuration options.
* Can be set before grid initialization or updated after grid is created.
- *
+ *
* @example
* ```typescript
* gridOptions: GridStackOptions = {
@@ -122,7 +122,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
/**
* Controls whether empty content should be displayed.
* Set to true to show ng-content with 'empty-content' selector when grid has no items.
- *
+ *
* @example
* ```html
*
@@ -134,52 +134,52 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
/**
* GridStack event emitters for Angular integration.
- *
+ *
* These provide Angular-style event handling for GridStack events.
* Alternatively, use `this.grid.on('event1 event2', callback)` for multiple events.
- *
+ *
* Note: 'CB' suffix prevents conflicts with native DOM events.
- *
+ *
* @example
* ```html
*
*
* ```
*/
-
+
/** Emitted when widgets are added to the grid */
@Output() public addedCB = new EventEmitter();
-
+
/** Emitted when grid layout changes */
@Output() public changeCB = new EventEmitter();
-
+
/** Emitted when grid is disabled */
@Output() public disableCB = new EventEmitter();
-
+
/** Emitted during widget drag operations */
@Output() public dragCB = new EventEmitter();
-
+
/** Emitted when widget drag starts */
@Output() public dragStartCB = new EventEmitter();
-
+
/** Emitted when widget drag stops */
@Output() public dragStopCB = new EventEmitter();
-
+
/** Emitted when widget is dropped */
@Output() public droppedCB = new EventEmitter();
-
+
/** Emitted when grid is enabled */
@Output() public enableCB = new EventEmitter();
-
+
/** Emitted when widgets are removed from the grid */
@Output() public removedCB = new EventEmitter();
-
+
/** Emitted during widget resize operations */
@Output() public resizeCB = new EventEmitter();
-
+
/** Emitted when widget resize starts */
@Output() public resizeStartCB = new EventEmitter();
-
+
/** Emitted when widget resize stops */
@Output() public resizeStopCB = new EventEmitter();
@@ -192,7 +192,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
/**
* Get the underlying GridStack instance.
* Use this to access GridStack API methods directly.
- *
+ *
* @example
* ```typescript
* this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1});
@@ -208,10 +208,10 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
/**
* Mapping of component selectors to their types for dynamic creation.
- *
+ *
* This enables dynamic component instantiation from string selectors.
* Angular doesn't provide public access to this mapping, so we maintain our own.
- *
+ *
* @example
* ```typescript
* GridstackComponent.addComponentToSelectorType([MyWidgetComponent]);
@@ -220,9 +220,9 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
public static selectorToType: SelectorToType = {};
/**
* Register a list of Angular components for dynamic creation.
- *
+ *
* @param typeList Array of component types to register
- *
+ *
* @example
* ```typescript
* GridstackComponent.addComponentToSelectorType([
@@ -231,16 +231,17 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
* ]);
* ```
*/
- public static addComponentToSelectorType(typeList: Array>) {
+ public static addComponentToSelectorType(typeList: Array>) {
typeList.forEach(type => GridstackComponent.selectorToType[ GridstackComponent.getSelector(type) ] = type);
}
/**
* Extract the selector string from an Angular component type.
- *
+ *
* @param type The component type to get selector from
* @returns The component's selector string
*/
- public static getSelector(type: Type): string {
+ public static getSelector(type: Type): string {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return reflectComponentType(type)!.selector;
}
@@ -367,6 +368,7 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, n:
const gridItemComp = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp;
if (!gridItemComp) return;
// check if gridItem has a child component with 'container' exposed to create under..
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const container = (gridItemComp.childWidget as any)?.container || gridItemComp.container;
const gridRef = container?.createComponent(GridstackComponent);
const grid = gridRef?.instance;
diff --git a/angular/projects/lib/src/lib/gridstack.module.ts b/angular/projects/lib/src/lib/gridstack.module.ts
index 1add6e9f2..77171043c 100644
--- a/angular/projects/lib/src/lib/gridstack.module.ts
+++ b/angular/projects/lib/src/lib/gridstack.module.ts
@@ -10,10 +10,10 @@ import { GridstackComponent } from "./gridstack.component";
/**
* @deprecated Use GridstackComponent and GridstackItemComponent as standalone components instead.
- *
+ *
* This NgModule is provided for backward compatibility but is no longer the recommended approach.
* Import components directly in your standalone components or use the new Angular module structure.
- *
+ *
* @example
* ```typescript
* // Preferred approach - standalone components
@@ -23,7 +23,7 @@ import { GridstackComponent } from "./gridstack.component";
* template: ') => void;
+ addWidget: (widget: GridStackWidget & { id: Required["id"] }) => void;
removeWidget: (id: string) => void;
addSubGrid: (
- fn: (
- id: string,
- withWidget: (w: Omit) => GridStackWidget
- ) => Omit
+ subGrid: GridStackWidget & {
+ id: Required["id"];
+ subGridOpts: Required["subGridOpts"] & {
+ children: Array["id"] }>
+ }
+ }
) => void;
saveOptions: () => GridStackOptions | GridStackWidget[] | undefined;
+ removeAll: () => void;
_gridStack: {
value: GridStack | null;
diff --git a/react/lib/grid-stack-provider.tsx b/react/lib/grid-stack-provider.tsx
index 1afe4348c..ff262b555 100644
--- a/react/lib/grid-stack-provider.tsx
+++ b/react/lib/grid-stack-provider.tsx
@@ -1,4 +1,4 @@
-import type { GridStack, GridStackOptions, GridStackWidget } from "gridstack";
+import type { GridItemHTMLElement, GridStack, GridStackOptions, GridStackWidget } from "gridstack";
import { type PropsWithChildren, useCallback, useState } from "react";
import { GridStackContext } from "./grid-stack-context";
@@ -26,13 +26,11 @@ export function GridStackProvider({
});
const addWidget = useCallback(
- (fn: (id: string) => Omit) => {
- const newId = `widget-${Math.random().toString(36).substring(2, 15)}`;
- const widget = fn(newId);
- gridStack?.addWidget({ ...widget, id: newId });
+ (widget: GridStackWidget & { id: Required["id"] }) => {
+ gridStack?.addWidget(widget);
setRawWidgetMetaMap((prev) => {
const newMap = new Map(prev);
- newMap.set(newId, widget);
+ newMap.set(widget.id, widget);
return newMap;
});
},
@@ -40,29 +38,18 @@ export function GridStackProvider({
);
const addSubGrid = useCallback(
- (
- fn: (
- id: string,
- withWidget: (w: Omit) => GridStackWidget
- ) => Omit
- ) => {
- const newId = `sub-grid-${Math.random().toString(36).substring(2, 15)}`;
- const subWidgetIdMap = new Map();
-
- const widget = fn(newId, (w) => {
- const subWidgetId = `widget-${Math.random()
- .toString(36)
- .substring(2, 15)}`;
- subWidgetIdMap.set(subWidgetId, w);
- return { ...w, id: subWidgetId };
- });
-
- gridStack?.addWidget({ ...widget, id: newId });
+ (subGrid: GridStackWidget & {
+ id: Required["id"];
+ subGridOpts: Required["subGridOpts"] & {
+ children: Array["id"] }>
+ }
+ }) => {
+ gridStack?.addWidget(subGrid);
setRawWidgetMetaMap((prev) => {
const newMap = new Map(prev);
- subWidgetIdMap.forEach((meta, id) => {
- newMap.set(id, meta);
+ subGrid.subGridOpts?.children?.forEach((meta: GridStackWidget & { id: Required["id"] }) => {
+ newMap.set(meta.id, meta);
});
return newMap;
});
@@ -72,7 +59,9 @@ export function GridStackProvider({
const removeWidget = useCallback(
(id: string) => {
- gridStack?.removeWidget(id);
+ const element = document.body.querySelector(`[gs-id="${id}"]`);
+ if (element) gridStack?.removeWidget(element);
+
setRawWidgetMetaMap((prev) => {
const newMap = new Map(prev);
newMap.delete(id);
@@ -86,6 +75,11 @@ export function GridStackProvider({
return gridStack?.save(true, true, (_, widget) => widget);
}, [gridStack]);
+ const removeAll = useCallback(() => {
+ gridStack?.removeAll();
+ setRawWidgetMetaMap(new Map());
+ }, [gridStack]);
+
return (
+
+
{
- addWidget((id) => ({
+ const id = `widget-${Math.random().toString(36).substring(2, 15)}`;
+
+ addWidget({
+ id,
w: 2,
h: 2,
x: 0,
@@ -184,7 +187,7 @@ function Toolbar() {
name: "Text",
props: { content: id },
}),
- }));
+ });
}}
>
Add Text (2x2)
@@ -192,7 +195,11 @@ function Toolbar() {
{
- addSubGrid((id, withWidget) => ({
+ const subGridId = `sub-grid-${Math.random().toString(36).substring(2, 15)}`;
+ const widgetId = `widget-${Math.random().toString(36).substring(2, 15)}`;
+
+ addSubGrid({
+ id: subGridId,
h: 5,
noResize: false,
sizeToContent: true,
@@ -203,7 +210,8 @@ function Toolbar() {
minRow: 2,
cellHeight: CELL_HEIGHT,
children: [
- withWidget({
+ {
+ id: widgetId,
h: 1,
locked: true,
noMove: true,
@@ -213,15 +221,15 @@ function Toolbar() {
y: 0,
content: JSON.stringify({
name: "Text",
- props: { content: "Sub Grid 1 Title" + id },
+ props: { content: "Sub Grid 1 Title" + widgetId },
}),
- }),
+ },
],
},
w: 12,
x: 0,
y: 0,
- }));
+ });
}}
>
Add Sub Grid (12x1)
diff --git a/react/yarn.lock b/react/yarn.lock
index cf2d504ac..7d51743c9 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -380,41 +380,21 @@
resolved "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1"
integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
-"@rollup/rollup-android-arm-eabi@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.5.tgz#e0f5350845090ca09690fe4a472717f3b8aae225"
- integrity sha512-SU5cvamg0Eyu/F+kLeMXS7GoahL+OoizlclVFX3l5Ql6yNlywJJ0OuqTzUx0v+aHhPHEB/56CT06GQrRrGNYww==
-
"@rollup/rollup-android-arm-eabi@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.46.1.tgz#c659481d5b15054d4636b3dd0c2f50ab3083d839"
integrity sha512-oENme6QxtLCqjChRUUo3S6X8hjCXnWmJWnedD7VbGML5GUtaOtAyx+fEEXnBXVf0CBZApMQU0Idwi0FmyxzQhw==
-"@rollup/rollup-android-arm64@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.5.tgz#08270faef6747e2716d3e978a8bbf479f75fb19a"
- integrity sha512-S4pit5BP6E5R5C8S6tgU/drvgjtYW76FBuG6+ibG3tMvlD1h9LHVF9KmlmaUBQ8Obou7hEyS+0w+IR/VtxwNMQ==
-
"@rollup/rollup-android-arm64@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.46.1.tgz#7e05c3c0bf6a79ee6b40ab5e778679742f06815d"
integrity sha512-OikvNT3qYTl9+4qQ9Bpn6+XHM+ogtFadRLuT2EXiFQMiNkXFLQfNVppi5o28wvYdHL2s3fM0D/MZJ8UkNFZWsw==
-"@rollup/rollup-darwin-arm64@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.5.tgz#691671133b350661328d42c8dbdedd56dfb97dfd"
- integrity sha512-250ZGg4ipTL0TGvLlfACkIxS9+KLtIbn7BCZjsZj88zSg2Lvu3Xdw6dhAhfe/FjjXPVNCtcSp+WZjVsD3a/Zlw==
-
"@rollup/rollup-darwin-arm64@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.46.1.tgz#b190fbd0274fbbd4d257ff0b3d68f0885c454e0d"
integrity sha512-EFYNNGij2WllnzljQDQnlFTXzSJw87cpAs4TVBAWLdkvic5Uh5tISrIL6NRcxoh/b2EFBG/TK8hgRrGx94zD4A==
-"@rollup/rollup-darwin-x64@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.5.tgz#b2ec52a1615f24b1cd40bc8906ae31af81e8a342"
- integrity sha512-D8brJEFg5D+QxFcW6jYANu+Rr9SlKtTenmsX5hOSzNYVrK5oLAEMTUgKWYJP+wdKyCdeSwnapLsn+OVRFycuQg==
-
"@rollup/rollup-darwin-x64@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.46.1.tgz#a4df7fa06ac318b66a6aa66d6f1e0a58fef58cd3"
@@ -430,41 +410,21 @@
resolved "https://registry.npmmirror.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.46.1.tgz#db42c46c0263b2562e2ba5c2e00e318646f2b24c"
integrity sha512-8vu9c02F16heTqpvo3yeiu7Vi1REDEC/yES/dIfq3tSXe6mLndiwvYr3AAvd1tMNUqE9yeGYa5w7PRbI5QUV+w==
-"@rollup/rollup-linux-arm-gnueabihf@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.5.tgz#217f01f304808920680bd269002df38e25d9205f"
- integrity sha512-PNqXYmdNFyWNg0ma5LdY8wP+eQfdvyaBAojAXgO7/gs0Q/6TQJVXAXe8gwW9URjbS0YAammur0fynYGiWsKlXw==
-
"@rollup/rollup-linux-arm-gnueabihf@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.46.1.tgz#88ca443ad42c70555978b000c6d1dd925fb3203b"
integrity sha512-K4ncpWl7sQuyp6rWiGUvb6Q18ba8mzM0rjWJ5JgYKlIXAau1db7hZnR0ldJvqKWWJDxqzSLwGUhA4jp+KqgDtQ==
-"@rollup/rollup-linux-arm-musleabihf@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.5.tgz#93ac1c5a1e389f4482a2edaeec41fcffee54a930"
- integrity sha512-kSSCZOKz3HqlrEuwKd9TYv7vxPYD77vHSUvM2y0YaTGnFc8AdI5TTQRrM1yIp3tXCKrSL9A7JLoILjtad5t8pQ==
-
"@rollup/rollup-linux-arm-musleabihf@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.46.1.tgz#36106fe103d32c2a97583ebadcfb28dc63988bda"
integrity sha512-YykPnXsjUjmXE6j6k2QBBGAn1YsJUix7pYaPLK3RVE0bQL2jfdbfykPxfF8AgBlqtYbfEnYHmLXNa6QETjdOjQ==
-"@rollup/rollup-linux-arm64-gnu@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.5.tgz#a7f146787d6041fecc4ecdf1aa72234661ca94a4"
- integrity sha512-oTXQeJHRbOnwRnRffb6bmqmUugz0glXaPyspp4gbQOPVApdpRrY/j7KP3lr7M8kTfQTyrBUzFjj5EuHAhqH4/w==
-
"@rollup/rollup-linux-arm64-gnu@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.46.1.tgz#00c28bc9210dcfbb5e7fa8e52fd827fb570afe26"
integrity sha512-kKvqBGbZ8i9pCGW3a1FH3HNIVg49dXXTsChGFsHGXQaVJPLA4f/O+XmTxfklhccxdF5FefUn2hvkoGJH0ScWOA==
-"@rollup/rollup-linux-arm64-musl@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.5.tgz#6a37236189648e678bd564d6e8ca798f42cf42c5"
- integrity sha512-qnOTIIs6tIGFKCHdhYitgC2XQ2X25InIbZFor5wh+mALH84qnFHvc+vmWUpyX97B0hNvwNUL4B+MB8vJvH65Fw==
-
"@rollup/rollup-linux-arm64-musl@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.46.1.tgz#45a13486b5523235eb87b349e7ca5a0bb85a5b0e"
@@ -475,21 +435,11 @@
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.46.1.tgz#b8edd99f072cd652acbbddc1c539b1ac4254381d"
integrity sha512-O8CwgSBo6ewPpktFfSDgB6SJN9XDcPSvuwxfejiddbIC/hn9Tg6Ai0f0eYDf3XvB/+PIWzOQL+7+TZoB8p9Yuw==
-"@rollup/rollup-linux-powerpc64le-gnu@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.5.tgz#5661420dc463bec31ecb2d17d113de858cfcfe2d"
- integrity sha512-TMYu+DUdNlgBXING13rHSfUc3Ky5nLPbWs4bFnT+R6Vu3OvXkTkixvvBKk8uO4MT5Ab6lC3U7x8S8El2q5o56w==
-
"@rollup/rollup-linux-ppc64-gnu@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.46.1.tgz#0ec72a4f8b7a86b13c0f6b7666ed1d3b6e8e67cc"
integrity sha512-JnCfFVEKeq6G3h3z8e60kAp8Rd7QVnWCtPm7cxx+5OtP80g/3nmPtfdCXbVl063e3KsRnGSKDHUQMydmzc/wBA==
-"@rollup/rollup-linux-riscv64-gnu@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.5.tgz#cb00342b7432bdef723aa606281de2f522d6dcf7"
- integrity sha512-PTQq1Kz22ZRvuhr3uURH+U/Q/a0pbxJoICGSprNLAoBEkyD3Sh9qP5I0Asn0y0wejXQBbsVMRZRxlbGFD9OK4A==
-
"@rollup/rollup-linux-riscv64-gnu@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.46.1.tgz#99f06928528fb58addd12e50827e1a0269c1cca8"
@@ -500,61 +450,31 @@
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.46.1.tgz#3c14aba63b4170fe3d9d0b6ad98361366170590e"
integrity sha512-CvvgNl2hrZrTR9jXK1ye0Go0HQRT6ohQdDfWR47/KFKiLd5oN5T14jRdUVGF4tnsN8y9oSfMOqH6RuHh+ck8+w==
-"@rollup/rollup-linux-s390x-gnu@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.5.tgz#0708889674dccecccd28e2befccf791e0767fcb7"
- integrity sha512-bR5nCojtpuMss6TDEmf/jnBnzlo+6n1UhgwqUvRoe4VIotC7FG1IKkyJbwsT7JDsF2jxR+NTnuOwiGv0hLyDoQ==
-
"@rollup/rollup-linux-s390x-gnu@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.46.1.tgz#34c647a823dcdca0f749a2bdcbde4fb131f37a4c"
integrity sha512-x7ANt2VOg2565oGHJ6rIuuAon+A8sfe1IeUx25IKqi49OjSr/K3awoNqr9gCwGEJo9OuXlOn+H2p1VJKx1psxA==
-"@rollup/rollup-linux-x64-gnu@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.5.tgz#a135b040b21582e91cfed2267ccfc7d589e1dbc6"
- integrity sha512-N0jPPhHjGShcB9/XXZQWuWBKZQnC1F36Ce3sDqWpujsGjDz/CQtOL9LgTrJ+rJC8MJeesMWrMWVLKKNR/tMOCA==
-
"@rollup/rollup-linux-x64-gnu@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.46.1.tgz#3991010418c005e8791c415e7c2072b247157710"
integrity sha512-9OADZYryz/7E8/qt0vnaHQgmia2Y0wrjSSn1V/uL+zw/i7NUhxbX4cHXdEQ7dnJgzYDS81d8+tf6nbIdRFZQoQ==
-"@rollup/rollup-linux-x64-musl@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.5.tgz#88395a81a3ab7ee3dc8dc31a73ff62ed3185f34d"
- integrity sha512-uBa2e28ohzNNwjr6Uxm4XyaA1M/8aTgfF2T7UIlElLaeXkgpmIJ2EitVNQxjO9xLLLy60YqAgKn/AqSpCUkE9g==
-
"@rollup/rollup-linux-x64-musl@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.46.1.tgz#f3943e5f284f40ffbcf4a14da9ee2e43d303b462"
integrity sha512-NuvSCbXEKY+NGWHyivzbjSVJi68Xfq1VnIvGmsuXs6TCtveeoDRKutI5vf2ntmNnVq64Q4zInet0UDQ+yMB6tA==
-"@rollup/rollup-win32-arm64-msvc@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.5.tgz#12ee49233b1125f2c1da38392f63b1dbb0c31bba"
- integrity sha512-RXT8S1HP8AFN/Kr3tg4fuYrNxZ/pZf1HemC5Tsddc6HzgGnJm0+Lh5rAHJkDuW3StI0ynNXukidROMXYl6ew8w==
-
"@rollup/rollup-win32-arm64-msvc@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.46.1.tgz#45b5a1d3f0af63f85044913c371d7b0519c913ad"
integrity sha512-mWz+6FSRb82xuUMMV1X3NGiaPFqbLN9aIueHleTZCc46cJvwTlvIh7reQLk4p97dv0nddyewBhwzryBHH7wtPw==
-"@rollup/rollup-win32-ia32-msvc@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.5.tgz#0f987b134c6b3123c22842b33ba0c2b6fb78cc3b"
- integrity sha512-ElTYOh50InL8kzyUD6XsnPit7jYCKrphmddKAe1/Ytt74apOxDq5YEcbsiKs0fR3vff3jEneMM+3I7jbqaMyBg==
-
"@rollup/rollup-win32-ia32-msvc@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.46.1.tgz#900ef7211d2929e9809f3a044c4e2fd3aa685a0c"
integrity sha512-7Thzy9TMXDw9AU4f4vsLNBxh7/VOKuXi73VH3d/kHGr0tZ3x/ewgL9uC7ojUKmH1/zvmZe2tLapYcZllk3SO8Q==
-"@rollup/rollup-win32-x64-msvc@4.22.5":
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.5.tgz#f2feb149235a5dc1deb5439758f8871255e5a161"
- integrity sha512-+lvL/4mQxSV8MukpkKyyvfwhH266COcWlXE/1qxwN08ajovta3459zrjLghYMgDerlzNwLAcFpvU+WWE5y6nAQ==
-
"@rollup/rollup-win32-x64-msvc@4.46.1":
version "4.46.1"
resolved "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.1.tgz#932d8696dfef673bee1a1e291a5531d25a6903be"
@@ -653,11 +573,6 @@
resolved "https://registry.npmmirror.com/@types/deep-eql/-/deep-eql-4.0.2.tgz#334311971d3a07121e7eb91b684a605e7eea9cbd"
integrity sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==
-"@types/estree@1.0.6":
- version "1.0.6"
- resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
- integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
-
"@types/estree@1.0.8", "@types/estree@^1.0.0":
version "1.0.8"
resolved "https://registry.npmmirror.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
@@ -1576,11 +1491,6 @@ nanoid@^3.3.11:
resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
-nanoid@^3.3.7:
- version "3.3.8"
- resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
- integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
-
natural-compare@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -1651,11 +1561,6 @@ pathval@^2.0.0:
resolved "https://registry.npmmirror.com/pathval/-/pathval-2.0.1.tgz#8855c5a2899af072d6ac05d11e46045ad0dc605d"
integrity sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==
-picocolors@^1.0.1:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
- integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
-
picocolors@^1.1.1:
version "1.1.1"
resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
@@ -1671,16 +1576,7 @@ picomatch@^4.0.2, picomatch@^4.0.3:
resolved "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz#796c76136d1eead715db1e7bad785dedd695a042"
integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
-postcss@^8.4.43:
- version "8.4.45"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.45.tgz#538d13d89a16ef71edbf75d895284ae06b79e603"
- integrity sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==
- dependencies:
- nanoid "^3.3.7"
- picocolors "^1.0.1"
- source-map-js "^1.2.0"
-
-postcss@^8.5.6:
+postcss@^8.4.43, postcss@^8.5.6:
version "8.5.6"
resolved "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c"
integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
@@ -1734,32 +1630,7 @@ reusify@^1.0.4:
resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
-rollup@^4.20.0:
- version "4.22.5"
- resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.22.5.tgz#d5108cc470249417e50492456253884d19f5d40f"
- integrity sha512-WoinX7GeQOFMGznEcWA1WrTQCd/tpEbMkc3nuMs9BT0CPjMdSjPMTVClwWd4pgSQwJdP65SK9mTCNvItlr5o7w==
- dependencies:
- "@types/estree" "1.0.6"
- optionalDependencies:
- "@rollup/rollup-android-arm-eabi" "4.22.5"
- "@rollup/rollup-android-arm64" "4.22.5"
- "@rollup/rollup-darwin-arm64" "4.22.5"
- "@rollup/rollup-darwin-x64" "4.22.5"
- "@rollup/rollup-linux-arm-gnueabihf" "4.22.5"
- "@rollup/rollup-linux-arm-musleabihf" "4.22.5"
- "@rollup/rollup-linux-arm64-gnu" "4.22.5"
- "@rollup/rollup-linux-arm64-musl" "4.22.5"
- "@rollup/rollup-linux-powerpc64le-gnu" "4.22.5"
- "@rollup/rollup-linux-riscv64-gnu" "4.22.5"
- "@rollup/rollup-linux-s390x-gnu" "4.22.5"
- "@rollup/rollup-linux-x64-gnu" "4.22.5"
- "@rollup/rollup-linux-x64-musl" "4.22.5"
- "@rollup/rollup-win32-arm64-msvc" "4.22.5"
- "@rollup/rollup-win32-ia32-msvc" "4.22.5"
- "@rollup/rollup-win32-x64-msvc" "4.22.5"
- fsevents "~2.3.2"
-
-rollup@^4.40.0:
+rollup@^4.20.0, rollup@^4.40.0:
version "4.46.1"
resolved "https://registry.npmmirror.com/rollup/-/rollup-4.46.1.tgz#287d07ef0ea17950b348b027c634a9544a1a375f"
integrity sha512-33xGNBsDJAkzt0PvninskHlWnTIPgDtTwhg0U38CUoNP/7H6wI2Cz6dUeoNPbjdTdsYTGuiFFASuUOWovH0SyQ==
@@ -1850,7 +1721,7 @@ sirv@^3.0.1:
mrmime "^2.0.0"
totalist "^3.0.0"
-source-map-js@^1.2.0, source-map-js@^1.2.1:
+source-map-js@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -2030,10 +1901,10 @@ vite-node@3.2.4:
optionalDependencies:
fsevents "~2.3.3"
-vite@^5.4.19:
- version "5.4.19"
- resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.19.tgz#20efd060410044b3ed555049418a5e7d1998f959"
- integrity sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==
+vite@^5.4.20:
+ version "5.4.20"
+ resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.20.tgz#3267a5e03f21212f44edfd72758138e8fcecd76a"
+ integrity sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==
dependencies:
esbuild "^0.21.3"
postcss "^8.4.43"
diff --git a/spec/dd-base-impl-spec.ts b/spec/dd-base-impl-spec.ts
new file mode 100644
index 000000000..e56bacca7
--- /dev/null
+++ b/spec/dd-base-impl-spec.ts
@@ -0,0 +1,99 @@
+import { DDBaseImplement } from '../src/dd-base-impl';
+
+describe('DDBaseImplement', () => {
+ let baseImpl: DDBaseImplement;
+
+ beforeEach(() => {
+ baseImpl = new DDBaseImplement();
+ });
+
+ describe('constructor', () => {
+ it('should create instance with undefined disabled state', () => {
+ expect(baseImpl.disabled).toBeUndefined();
+ });
+ });
+
+ describe('enable/disable', () => {
+ it('should enable when disabled', () => {
+ baseImpl.disable();
+ expect(baseImpl.disabled).toBe(true);
+
+ baseImpl.enable();
+
+ expect(baseImpl.disabled).toBe(false);
+ });
+
+ it('should disable when enabled', () => {
+ baseImpl.enable();
+ expect(baseImpl.disabled).toBe(false);
+
+ baseImpl.disable();
+
+ expect(baseImpl.disabled).toBe(true);
+ });
+
+ it('should return undefined (no chaining)', () => {
+ expect(baseImpl.enable()).toBeUndefined();
+ expect(baseImpl.disable()).toBeUndefined();
+ });
+ });
+
+ describe('destroy', () => {
+ it('should clean up event register', () => {
+ baseImpl.enable();
+ baseImpl.on('test', () => {});
+
+ baseImpl.destroy();
+
+ // Should not throw when trying to trigger events after destroy
+ expect(() => baseImpl.triggerEvent('test', new Event('test'))).not.toThrow();
+ });
+ });
+
+ describe('event handling', () => {
+ beforeEach(() => {
+ baseImpl.enable(); // Need to enable for events to trigger
+ });
+
+ it('should handle on/off events', () => {
+ const callback = vi.fn();
+
+ baseImpl.on('test', callback);
+ baseImpl.triggerEvent('test', new Event('test'));
+
+ expect(callback).toHaveBeenCalled();
+ });
+
+ it('should remove event listeners with off', () => {
+ const callback = vi.fn();
+
+ baseImpl.on('test', callback);
+ baseImpl.off('test');
+ baseImpl.triggerEvent('test', new Event('test'));
+
+ expect(callback).not.toHaveBeenCalled();
+ });
+
+ it('should only keep last listener for same event', () => {
+ const callback1 = vi.fn();
+ const callback2 = vi.fn();
+
+ baseImpl.on('test', callback1);
+ baseImpl.on('test', callback2); // This overwrites callback1
+ baseImpl.triggerEvent('test', new Event('test'));
+
+ expect(callback1).not.toHaveBeenCalled();
+ expect(callback2).toHaveBeenCalled();
+ });
+
+ it('should not trigger events when disabled', () => {
+ const callback = vi.fn();
+
+ baseImpl.on('test', callback);
+ baseImpl.disable();
+ baseImpl.triggerEvent('test', new Event('test'));
+
+ expect(callback).not.toHaveBeenCalled();
+ });
+ });
+});
diff --git a/spec/dd-droppable-spec.ts b/spec/dd-droppable-spec.ts
new file mode 100644
index 000000000..59fd0ecbe
--- /dev/null
+++ b/spec/dd-droppable-spec.ts
@@ -0,0 +1,311 @@
+import { DDDroppable } from '../src/dd-droppable';
+import { DDManager } from '../src/dd-manager';
+
+describe('DDDroppable', () => {
+ let element: HTMLElement;
+ let droppable: DDDroppable;
+
+ beforeEach(() => {
+ // Create a test element
+ element = document.createElement('div');
+ element.id = 'test-droppable';
+ element.style.width = '100px';
+ element.style.height = '100px';
+ document.body.appendChild(element);
+ });
+
+ afterEach(() => {
+ // Clean up
+ if (droppable) {
+ droppable.destroy();
+ }
+ if (element.parentNode) {
+ element.parentNode.removeChild(element);
+ }
+ // Clear DDManager state
+ delete DDManager.dragElement;
+ delete DDManager.dropElement;
+ });
+
+ describe('constructor', () => {
+ it('should create a droppable instance with default options', () => {
+ droppable = new DDDroppable(element);
+
+ expect(droppable).toBeDefined();
+ expect(droppable.el).toBe(element);
+ expect(droppable.option).toEqual({});
+ expect(element.classList.contains('ui-droppable')).toBe(true);
+ });
+
+ it('should create a droppable instance with custom options', () => {
+ const options = {
+ accept: '.draggable-item',
+ drop: vi.fn(),
+ over: vi.fn(),
+ out: vi.fn()
+ };
+
+ droppable = new DDDroppable(element, options);
+
+ expect(droppable.option).toBe(options);
+ expect(droppable.accept).toBeDefined();
+ });
+ });
+
+ describe('enable/disable', () => {
+ beforeEach(() => {
+ droppable = new DDDroppable(element);
+ });
+
+ it('should enable droppable functionality', () => {
+ droppable.disable();
+ expect(droppable.disabled).toBe(true);
+ expect(element.classList.contains('ui-droppable-disabled')).toBe(true);
+
+ droppable.enable();
+ expect(droppable.disabled).toBe(false);
+ expect(element.classList.contains('ui-droppable')).toBe(true);
+ expect(element.classList.contains('ui-droppable-disabled')).toBe(false);
+ });
+
+ it('should disable droppable functionality', () => {
+ expect(droppable.disabled).toBe(false);
+
+ droppable.disable();
+ expect(droppable.disabled).toBe(true);
+ expect(element.classList.contains('ui-droppable')).toBe(false);
+ expect(element.classList.contains('ui-droppable-disabled')).toBe(true);
+ });
+
+ it('should not enable if already enabled', () => {
+ const spy = vi.spyOn(element.classList, 'add');
+ droppable.enable(); // Already enabled
+ expect(spy).not.toHaveBeenCalled();
+ });
+
+ it('should not disable if already disabled', () => {
+ droppable.disable();
+ const spy = vi.spyOn(element.classList, 'remove');
+ droppable.disable(); // Already disabled
+ expect(spy).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('destroy', () => {
+ it('should clean up droppable instance', () => {
+ droppable = new DDDroppable(element);
+
+ droppable.destroy();
+
+ expect(element.classList.contains('ui-droppable')).toBe(false);
+ expect(element.classList.contains('ui-droppable-disabled')).toBe(false);
+ expect(droppable.disabled).toBe(true);
+ });
+ });
+
+ describe('updateOption', () => {
+ beforeEach(() => {
+ droppable = new DDDroppable(element);
+ });
+
+ it('should update options', () => {
+ const newOptions = {
+ accept: '.new-class',
+ drop: vi.fn()
+ };
+
+ const result = droppable.updateOption(newOptions);
+
+ expect(result).toBe(droppable);
+ expect(droppable.option.accept).toBe('.new-class');
+ expect(droppable.option.drop).toBe(newOptions.drop);
+ });
+
+ it('should update accept function when accept is a string', () => {
+ droppable.updateOption({ accept: '.test-class' });
+
+ expect(droppable.accept).toBeDefined();
+
+ // Test the accept function
+ const testEl = document.createElement('div');
+ testEl.classList.add('test-class');
+ expect(droppable.accept(testEl)).toBe(true);
+
+ const otherEl = document.createElement('div');
+ expect(droppable.accept(otherEl)).toBe(false);
+ });
+
+ it('should update accept function when accept is a function', () => {
+ const acceptFn = vi.fn().mockReturnValue(true);
+ droppable.updateOption({ accept: acceptFn });
+
+ expect(droppable.accept).toBe(acceptFn);
+ });
+ });
+
+ describe('mouse events', () => {
+ beforeEach(() => {
+ droppable = new DDDroppable(element, {
+ over: vi.fn(),
+ out: vi.fn(),
+ drop: vi.fn()
+ });
+
+ // Create a mock draggable element
+ const mockDraggable = {
+ el: document.createElement('div'),
+ ui: vi.fn().mockReturnValue({
+ helper: document.createElement('div'),
+ position: { left: 0, top: 0 }
+ })
+ };
+ DDManager.dragElement = mockDraggable as any;
+ });
+
+ describe('_mouseEnter', () => {
+ it('should handle mouse enter when dragging', () => {
+ const event = new MouseEvent('mouseenter', { bubbles: true });
+ const spy = vi.spyOn(event, 'preventDefault');
+
+ droppable._mouseEnter(event);
+
+ expect(spy).toHaveBeenCalled();
+ expect(DDManager.dropElement).toBe(droppable);
+ expect(element.classList.contains('ui-droppable-over')).toBe(true);
+ expect(droppable.option.over).toHaveBeenCalled();
+ });
+
+ it('should not handle mouse enter when not dragging', () => {
+ delete DDManager.dragElement;
+ const event = new MouseEvent('mouseenter', { bubbles: true });
+
+ droppable._mouseEnter(event);
+
+ expect(DDManager.dropElement).toBeUndefined();
+ expect(element.classList.contains('ui-droppable-over')).toBe(false);
+ });
+
+ it('should not handle mouse enter when element cannot be dropped', () => {
+ droppable.updateOption({ accept: '.not-matching' });
+ const event = new MouseEvent('mouseenter', { bubbles: true });
+
+ droppable._mouseEnter(event);
+
+ expect(DDManager.dropElement).toBeUndefined();
+ expect(element.classList.contains('ui-droppable-over')).toBe(false);
+ });
+ });
+
+ describe('_mouseLeave', () => {
+ beforeEach(() => {
+ DDManager.dropElement = droppable;
+ element.classList.add('ui-droppable-over');
+ });
+
+ it('should handle mouse leave when this is the current drop element', () => {
+ const event = new MouseEvent('mouseleave', { bubbles: true });
+ const spy = vi.spyOn(event, 'preventDefault');
+
+ droppable._mouseLeave(event);
+
+ expect(spy).toHaveBeenCalled();
+ expect(DDManager.dropElement).toBeUndefined();
+ expect(droppable.option.out).toHaveBeenCalled();
+ });
+
+ it('should not handle mouse leave when not the current drop element', () => {
+ DDManager.dropElement = null as any;
+ const event = new MouseEvent('mouseleave', { bubbles: true });
+
+ droppable._mouseLeave(event);
+
+ expect(droppable.option.out).not.toHaveBeenCalled();
+ });
+
+ it('should not handle mouse leave when no drag element', () => {
+ delete DDManager.dragElement;
+ const event = new MouseEvent('mouseleave', { bubbles: true });
+
+ droppable._mouseLeave(event);
+
+ expect(droppable.option.out).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('drop', () => {
+ it('should handle drop event', () => {
+ const event = new MouseEvent('mouseup', { bubbles: true });
+ const spy = vi.spyOn(event, 'preventDefault');
+
+ droppable.drop(event);
+
+ expect(spy).toHaveBeenCalled();
+ expect(droppable.option.drop).toHaveBeenCalled();
+ });
+ });
+ });
+
+ describe('_canDrop', () => {
+ beforeEach(() => {
+ droppable = new DDDroppable(element);
+ });
+
+ it('should return true when no accept filter is set', () => {
+ const testEl = document.createElement('div');
+ expect(droppable._canDrop(testEl)).toBe(true);
+ });
+
+ it('should return false when element is null', () => {
+ expect(droppable._canDrop(null as any)).toBeFalsy();
+ });
+
+ it('should use accept function when set', () => {
+ const acceptFn = vi.fn().mockReturnValue(false);
+ droppable.accept = acceptFn;
+
+ const testEl = document.createElement('div');
+ const result = droppable._canDrop(testEl);
+
+ expect(acceptFn).toHaveBeenCalledWith(testEl);
+ expect(result).toBe(false);
+ });
+ });
+
+ describe('event handling', () => {
+ beforeEach(() => {
+ droppable = new DDDroppable(element);
+ });
+
+ it('should support on/off event methods', () => {
+ const callback = vi.fn();
+
+ droppable.on('drop', callback);
+ droppable.off('drop');
+
+ // These methods should exist and not throw
+ expect(typeof droppable.on).toBe('function');
+ expect(typeof droppable.off).toBe('function');
+ });
+ });
+
+ describe('_ui helper', () => {
+ it('should create UI data object', () => {
+ droppable = new DDDroppable(element);
+
+ const dragEl = document.createElement('div');
+ const mockDraggable = {
+ el: dragEl,
+ ui: vi.fn().mockReturnValue({
+ helper: dragEl,
+ position: { left: 0, top: 0 }
+ })
+ };
+
+ const result = droppable._ui(mockDraggable as any);
+
+ expect(result.draggable).toBe(dragEl);
+ expect(result.helper).toBe(dragEl);
+ expect(result.position).toEqual({ left: 0, top: 0 });
+ });
+ });
+});
diff --git a/spec/dd-manager-spec.ts b/spec/dd-manager-spec.ts
new file mode 100644
index 000000000..32b58e476
--- /dev/null
+++ b/spec/dd-manager-spec.ts
@@ -0,0 +1,63 @@
+import { DDManager } from '../src/dd-manager';
+
+describe('DDManager', () => {
+ afterEach(() => {
+ // Clean up DDManager state
+ delete DDManager.dragElement;
+ delete DDManager.dropElement;
+ delete DDManager.pauseDrag;
+ });
+
+ describe('static properties', () => {
+ it('should have dragElement property', () => {
+ expect(DDManager.dragElement).toBeUndefined();
+
+ const mockDragElement = {} as any;
+ DDManager.dragElement = mockDragElement;
+
+ expect(DDManager.dragElement).toBe(mockDragElement);
+ });
+
+ it('should have dropElement property', () => {
+ expect(DDManager.dropElement).toBeUndefined();
+
+ const mockDropElement = {} as any;
+ DDManager.dropElement = mockDropElement;
+
+ expect(DDManager.dropElement).toBe(mockDropElement);
+ });
+
+ it('should have pauseDrag property', () => {
+ expect(DDManager.pauseDrag).toBeUndefined();
+
+ DDManager.pauseDrag = true;
+ expect(DDManager.pauseDrag).toBe(true);
+
+ DDManager.pauseDrag = 500;
+ expect(DDManager.pauseDrag).toBe(500);
+ });
+ });
+
+ describe('state management', () => {
+ it('should allow setting and clearing drag element', () => {
+ const mockElement = { id: 'test' } as any;
+
+ DDManager.dragElement = mockElement;
+ expect(DDManager.dragElement).toBe(mockElement);
+
+ delete DDManager.dragElement;
+ expect(DDManager.dragElement).toBeUndefined();
+ });
+
+ it('should allow setting and clearing drop element', () => {
+ const mockElement = { id: 'test' } as any;
+
+ DDManager.dropElement = mockElement;
+ expect(DDManager.dropElement).toBe(mockElement);
+
+ delete DDManager.dropElement;
+ expect(DDManager.dropElement).toBeUndefined();
+ });
+ });
+});
+
diff --git a/spec/dd-simple-integration-spec.ts b/spec/dd-simple-integration-spec.ts
new file mode 100644
index 000000000..7af0cfa31
--- /dev/null
+++ b/spec/dd-simple-integration-spec.ts
@@ -0,0 +1,248 @@
+import { DDDraggable } from '../src/dd-draggable';
+import { DDDroppable } from '../src/dd-droppable';
+import { DDResizable } from '../src/dd-resizable';
+import { DDElement } from '../src/dd-element';
+import { GridItemHTMLElement } from '../src/types';
+
+describe('DD Integration Tests', () => {
+ let element: GridItemHTMLElement;
+
+ beforeEach(() => {
+ element = document.createElement('div') as GridItemHTMLElement;
+ element.style.width = '100px';
+ element.style.height = '100px';
+ element.style.position = 'absolute';
+ document.body.appendChild(element);
+
+ // Mock gridstackNode
+ element.gridstackNode = {
+ id: 'test-node',
+ x: 0,
+ y: 0,
+ w: 1,
+ h: 1
+ } as any;
+ });
+
+ afterEach(() => {
+ if (element.parentNode) {
+ element.parentNode.removeChild(element);
+ }
+ });
+
+ describe('DDElement', () => {
+ it('should create DDElement instance', () => {
+ const ddElement = DDElement.init(element);
+
+ expect(ddElement).toBeDefined();
+ expect(ddElement.el).toBe(element);
+ });
+
+ it('should return same instance on multiple init calls', () => {
+ const ddElement1 = DDElement.init(element);
+ const ddElement2 = DDElement.init(element);
+
+ expect(ddElement1).toBe(ddElement2);
+ });
+
+ it('should setup draggable', () => {
+ const ddElement = DDElement.init(element);
+
+ ddElement.setupDraggable({ handle: '.drag-handle' });
+
+ expect(ddElement.ddDraggable).toBeDefined();
+ });
+
+ it('should setup droppable', () => {
+ const ddElement = DDElement.init(element);
+
+ ddElement.setupDroppable({ accept: '.draggable' });
+
+ expect(ddElement.ddDroppable).toBeDefined();
+ });
+
+ it('should setup resizable with default handles', () => {
+ const ddElement = DDElement.init(element);
+
+ ddElement.setupResizable({ handles: 'se' });
+
+ expect(ddElement.ddResizable).toBeDefined();
+ });
+
+ it('should clean up components', () => {
+ const ddElement = DDElement.init(element);
+
+ ddElement.setupDraggable({});
+ ddElement.setupDroppable({});
+ ddElement.setupResizable({ handles: 'se' });
+
+ expect(ddElement.ddDraggable).toBeDefined();
+ expect(ddElement.ddDroppable).toBeDefined();
+ expect(ddElement.ddResizable).toBeDefined();
+
+ ddElement.cleanDraggable();
+ ddElement.cleanDroppable();
+ ddElement.cleanResizable();
+
+ expect(ddElement.ddDraggable).toBeUndefined();
+ expect(ddElement.ddDroppable).toBeUndefined();
+ expect(ddElement.ddResizable).toBeUndefined();
+ });
+ });
+
+ describe('DDDraggable basic functionality', () => {
+ it('should create draggable instance', () => {
+ const draggable = new DDDraggable(element);
+
+ expect(draggable).toBeDefined();
+ expect(draggable.el).toBe(element);
+ expect(draggable.disabled).toBe(false);
+
+ draggable.destroy();
+ });
+
+ it('should enable/disable draggable', () => {
+ const draggable = new DDDraggable(element);
+
+ draggable.disable();
+ expect(draggable.disabled).toBe(true);
+
+ draggable.enable();
+ expect(draggable.disabled).toBe(false);
+
+ draggable.destroy();
+ });
+
+ it('should update options', () => {
+ const draggable = new DDDraggable(element);
+
+ const result = draggable.updateOption({ handle: '.new-handle' });
+
+ expect(result).toBe(draggable);
+ expect(draggable.option.handle).toBe('.new-handle');
+
+ draggable.destroy();
+ });
+ });
+
+ describe('DDDroppable basic functionality', () => {
+ it('should create droppable instance', () => {
+ const droppable = new DDDroppable(element);
+
+ expect(droppable).toBeDefined();
+ expect(droppable.el).toBe(element);
+ expect(droppable.disabled).toBe(false);
+ expect(element.classList.contains('ui-droppable')).toBe(true);
+
+ droppable.destroy();
+ });
+
+ it('should enable/disable droppable', () => {
+ const droppable = new DDDroppable(element);
+
+ droppable.disable();
+ expect(droppable.disabled).toBe(true);
+ expect(element.classList.contains('ui-droppable-disabled')).toBe(true);
+
+ droppable.enable();
+ expect(droppable.disabled).toBe(false);
+ expect(element.classList.contains('ui-droppable')).toBe(true);
+
+ droppable.destroy();
+ });
+
+ it('should update options', () => {
+ const droppable = new DDDroppable(element);
+
+ const result = droppable.updateOption({ accept: '.new-class' });
+
+ expect(result).toBe(droppable);
+ expect(droppable.option.accept).toBe('.new-class');
+
+ droppable.destroy();
+ });
+
+ it('should handle accept function', () => {
+ const droppable = new DDDroppable(element);
+
+ droppable.updateOption({ accept: '.test-class' });
+
+ const testEl = document.createElement('div');
+ testEl.classList.add('test-class');
+ expect(droppable._canDrop(testEl)).toBe(true);
+
+ const otherEl = document.createElement('div');
+ expect(droppable._canDrop(otherEl)).toBe(false);
+
+ droppable.destroy();
+ });
+ });
+
+ describe('DDResizable basic functionality', () => {
+ it('should create resizable instance with handles', () => {
+ const resizable = new DDResizable(element, { handles: 'se' });
+
+ expect(resizable).toBeDefined();
+ expect(resizable.el).toBe(element);
+ expect(resizable.disabled).toBe(false);
+ // Note: ui-resizable class is added by enable() which is called in constructor
+ // but the class might not be added immediately in test environment
+
+ resizable.destroy();
+ });
+
+ it('should enable/disable resizable', () => {
+ const resizable = new DDResizable(element, { handles: 'se' });
+
+ resizable.disable();
+ expect(resizable.disabled).toBe(true);
+ expect(element.classList.contains('ui-resizable-disabled')).toBe(true);
+
+ resizable.enable();
+ expect(resizable.disabled).toBe(false);
+ expect(element.classList.contains('ui-resizable-disabled')).toBe(false);
+
+ resizable.destroy();
+ });
+
+ it('should update options', () => {
+ const resizable = new DDResizable(element, { handles: 'se' });
+
+ const result = resizable.updateOption({ handles: 'n,s,e,w' });
+
+ expect(result).toBe(resizable);
+ expect(resizable.option.handles).toBe('n,s,e,w');
+
+ resizable.destroy();
+ });
+
+ it('should create resize handles', () => {
+ const resizable = new DDResizable(element, { handles: 'se,nw' });
+
+ const seHandle = element.querySelector('.ui-resizable-se');
+ const nwHandle = element.querySelector('.ui-resizable-nw');
+
+ expect(seHandle).toBeTruthy();
+ expect(nwHandle).toBeTruthy();
+
+ resizable.destroy();
+ });
+ });
+
+ describe('Event handling', () => {
+ it('should support event listeners on DDElement', () => {
+ const ddElement = DDElement.init(element);
+ const callback = vi.fn();
+
+ ddElement.setupDraggable({});
+ ddElement.on('dragstart', callback);
+ ddElement.off('dragstart');
+
+ // Should not throw
+ expect(typeof ddElement.on).toBe('function');
+ expect(typeof ddElement.off).toBe('function');
+
+ ddElement.cleanDraggable();
+ });
+ });
+});
diff --git a/spec/dd-touch-spec.ts b/spec/dd-touch-spec.ts
new file mode 100644
index 000000000..1e7cec99e
--- /dev/null
+++ b/spec/dd-touch-spec.ts
@@ -0,0 +1,515 @@
+import {
+ isTouch,
+ touchstart,
+ touchmove,
+ touchend,
+ pointerdown,
+ pointerenter,
+ pointerleave
+} from '../src/dd-touch';
+import { DDManager } from '../src/dd-manager';
+import { Utils } from '../src/utils';
+
+// Mock Utils.simulateMouseEvent
+vi.mock('../src/utils', () => ({
+ Utils: {
+ simulateMouseEvent: vi.fn()
+ }
+}));
+
+// Mock DDManager
+vi.mock('../src/dd-manager', () => ({
+ DDManager: {
+ dragElement: null
+ }
+}));
+
+// Helper function to create mock TouchList
+function createMockTouchList(touches: Touch[]): TouchList {
+ const touchList = {
+ length: touches.length,
+ item: (index: number) => touches[index] || null,
+ ...touches
+ };
+ return touchList as TouchList;
+}
+
+// Helper function to create mock TouchEvent
+function createMockTouchEvent(type: string, touches: Touch[], options: Partial = {}): TouchEvent {
+ const touchList = createMockTouchList(touches);
+ const changedTouchList = options.changedTouches ?
+ createMockTouchList(options.changedTouches as Touch[]) : touchList;
+
+ const mockEvent = {
+ touches: touchList,
+ changedTouches: changedTouchList,
+ targetTouches: touchList,
+ preventDefault: vi.fn(),
+ stopPropagation: vi.fn(),
+ cancelable: true,
+ type,
+ target: document.createElement('div'),
+ currentTarget: document.createElement('div'),
+ bubbles: true,
+ composed: false,
+ defaultPrevented: false,
+ eventPhase: Event.AT_TARGET,
+ isTrusted: true,
+ timeStamp: Date.now(),
+ altKey: false,
+ ctrlKey: false,
+ metaKey: false,
+ shiftKey: false,
+ detail: 0,
+ view: window,
+ which: 0,
+ ...options
+ };
+ return mockEvent as TouchEvent;
+}
+
+// Helper function to create mock PointerEvent
+function createMockPointerEvent(type: string, pointerType: string, options: Partial = {}): PointerEvent {
+ const mockEvent = {
+ pointerId: 1,
+ pointerType,
+ target: document.createElement('div'),
+ preventDefault: vi.fn(),
+ stopPropagation: vi.fn(),
+ cancelable: true,
+ type,
+ currentTarget: document.createElement('div'),
+ bubbles: true,
+ composed: false,
+ defaultPrevented: false,
+ eventPhase: Event.AT_TARGET,
+ isTrusted: true,
+ timeStamp: Date.now(),
+ clientX: 100,
+ clientY: 200,
+ pageX: 100,
+ pageY: 200,
+ screenX: 100,
+ screenY: 200,
+ button: 0,
+ buttons: 1,
+ ctrlKey: false,
+ shiftKey: false,
+ altKey: false,
+ metaKey: false,
+ width: 1,
+ height: 1,
+ pressure: 0.5,
+ tangentialPressure: 0,
+ tiltX: 0,
+ tiltY: 0,
+ twist: 0,
+ isPrimary: true,
+ detail: 0,
+ view: window,
+ which: 0,
+ getCoalescedEvents: vi.fn(() => []),
+ getPredictedEvents: vi.fn(() => []),
+ movementX: 0,
+ movementY: 0,
+ offsetX: 0,
+ offsetY: 0,
+ relatedTarget: null,
+ ...options
+ };
+ return mockEvent as PointerEvent;
+}
+
+describe('dd-touch', () => {
+ let mockUtils: any;
+ let mockDDManager: any;
+
+ beforeEach(() => {
+ mockUtils = vi.mocked(Utils);
+ mockDDManager = vi.mocked(DDManager);
+
+ // Reset mocks
+ mockUtils.simulateMouseEvent.mockClear();
+ mockDDManager.dragElement = null;
+
+ // Mock window.clearTimeout and setTimeout
+ vi.spyOn(window, 'clearTimeout');
+ vi.spyOn(window, 'setTimeout').mockImplementation((callback: Function, delay: number) => {
+ return setTimeout(callback, delay) as any;
+ });
+
+ // Reset DDTouch state by calling touchend to reset touchHandled flag
+ // This is a workaround since we can't access DDTouch directly
+ const resetTouch = {
+ pageX: 0, pageY: 0, clientX: 0, clientY: 0, screenX: 0, screenY: 0,
+ identifier: 0, target: document.createElement('div'),
+ radiusX: 0, radiusY: 0, rotationAngle: 0, force: 0
+ } as Touch;
+ const resetEvent = createMockTouchEvent('touchend', [], { changedTouches: [resetTouch] });
+
+ // Call touchstart then touchend to reset state
+ const startEvent = createMockTouchEvent('touchstart', [resetTouch]);
+ touchstart(startEvent);
+ touchend(resetEvent);
+
+ // Clear any calls made during reset
+ mockUtils.simulateMouseEvent.mockClear();
+ });
+
+ afterEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ describe('isTouch detection', () => {
+ it('should be a boolean value', () => {
+ expect(typeof isTouch).toBe('boolean');
+ });
+
+ it('should detect touch support in current environment', () => {
+ // Since we're in jsdom, isTouch should be false unless touch APIs are mocked
+ // This test validates that the detection logic runs without errors
+ expect(isTouch).toBeDefined();
+ });
+ });
+
+ describe('touchstart', () => {
+ let mockTouch: Touch;
+
+ beforeEach(() => {
+ mockTouch = {
+ pageX: 100,
+ pageY: 200,
+ clientX: 100,
+ clientY: 200,
+ screenX: 100,
+ screenY: 200,
+ identifier: 1,
+ target: document.createElement('div'),
+ radiusX: 10,
+ radiusY: 10,
+ rotationAngle: 0,
+ force: 1
+ } as Touch;
+ });
+
+ it('should simulate mousedown for single touch', () => {
+ const mockTouchEvent = createMockTouchEvent('touchstart', [mockTouch]);
+
+ touchstart(mockTouchEvent);
+
+ expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'mousedown');
+ });
+
+ it('should prevent default on cancelable events', () => {
+ const mockTouchEvent = createMockTouchEvent('touchstart', [mockTouch], { cancelable: true });
+
+ touchstart(mockTouchEvent);
+
+ expect(mockTouchEvent.preventDefault).toHaveBeenCalled();
+ });
+
+ it('should not prevent default on non-cancelable events', () => {
+ const mockTouchEvent = createMockTouchEvent('touchstart', [mockTouch], { cancelable: false });
+
+ touchstart(mockTouchEvent);
+
+ expect(mockTouchEvent.preventDefault).not.toHaveBeenCalled();
+ });
+
+ it('should ignore multi-touch events', () => {
+ const secondTouch = { ...mockTouch, identifier: 2 };
+ const mockTouchEvent = createMockTouchEvent('touchstart', [mockTouch, secondTouch]);
+
+ touchstart(mockTouchEvent);
+
+ expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('touchmove', () => {
+ let mockTouch: Touch;
+
+ beforeEach(() => {
+ mockTouch = {
+ pageX: 150,
+ pageY: 250,
+ clientX: 150,
+ clientY: 250,
+ screenX: 150,
+ screenY: 250,
+ identifier: 1,
+ target: document.createElement('div'),
+ radiusX: 10,
+ radiusY: 10,
+ rotationAngle: 0,
+ force: 1
+ } as Touch;
+ });
+
+ it('should simulate mousemove for single touch when touch is handled', () => {
+ // First call touchstart to set DDTouch.touchHandled = true
+ const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+ touchstart(startEvent);
+
+ mockUtils.simulateMouseEvent.mockClear(); // Clear previous calls
+
+ const mockTouchEvent = createMockTouchEvent('touchmove', [mockTouch]);
+ touchmove(mockTouchEvent);
+
+ expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'mousemove');
+ });
+
+ it('should ignore touchmove when touch is not handled', () => {
+ // Don't call touchstart first, so DDTouch.touchHandled remains false
+ const mockTouchEvent = createMockTouchEvent('touchmove', [mockTouch]);
+
+ touchmove(mockTouchEvent);
+
+ expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+ });
+
+ it('should ignore multi-touch events', () => {
+ // First call touchstart to set DDTouch.touchHandled = true
+ const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+ touchstart(startEvent);
+
+ mockUtils.simulateMouseEvent.mockClear(); // Clear previous calls
+
+ const secondTouch = { ...mockTouch, identifier: 2 };
+ const mockTouchEvent = createMockTouchEvent('touchmove', [mockTouch, secondTouch]);
+
+ touchmove(mockTouchEvent);
+
+ expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('touchend', () => {
+ let mockTouch: Touch;
+
+ beforeEach(() => {
+ mockTouch = {
+ pageX: 200,
+ pageY: 300,
+ clientX: 200,
+ clientY: 300,
+ screenX: 200,
+ screenY: 300,
+ identifier: 1,
+ target: document.createElement('div'),
+ radiusX: 10,
+ radiusY: 10,
+ rotationAngle: 0,
+ force: 1
+ } as Touch;
+ });
+
+ it('should simulate mouseup when touch is handled', () => {
+ // First call touchstart to set DDTouch.touchHandled = true
+ const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+ touchstart(startEvent);
+
+ mockUtils.simulateMouseEvent.mockClear(); // Clear previous calls
+
+ const mockTouchEvent = createMockTouchEvent('touchend', [], { changedTouches: [mockTouch] });
+ touchend(mockTouchEvent);
+
+ expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'mouseup');
+ });
+
+ it('should simulate click when not dragging', () => {
+ // First call touchstart to set DDTouch.touchHandled = true
+ const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+ touchstart(startEvent);
+
+ mockUtils.simulateMouseEvent.mockClear(); // Clear previous calls
+ mockDDManager.dragElement = null; // Not dragging
+
+ const mockTouchEvent = createMockTouchEvent('touchend', [], { changedTouches: [mockTouch] });
+ touchend(mockTouchEvent);
+
+ expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'mouseup');
+ expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'click');
+ });
+
+ it('should not simulate click when dragging', () => {
+ // First call touchstart to set DDTouch.touchHandled = true
+ const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+ touchstart(startEvent);
+
+ mockUtils.simulateMouseEvent.mockClear(); // Clear previous calls
+ mockDDManager.dragElement = {}; // Dragging
+
+ const mockTouchEvent = createMockTouchEvent('touchend', [], { changedTouches: [mockTouch] });
+ touchend(mockTouchEvent);
+
+ expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockTouch, 'mouseup');
+ expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalledWith(mockTouch, 'click');
+ });
+
+ it('should ignore touchend when touch is not handled', () => {
+ // Don't call touchstart first, so DDTouch.touchHandled remains false
+ const mockTouchEvent = createMockTouchEvent('touchend', [], { changedTouches: [mockTouch] });
+ touchend(mockTouchEvent);
+
+ expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+ });
+
+ it('should clear pointerLeaveTimeout when it exists', () => {
+ // First set up a pointerleave timeout
+ mockDDManager.dragElement = {};
+ const pointerEvent = createMockPointerEvent('pointerleave', 'touch');
+
+ let timeoutId: number;
+ vi.mocked(window.setTimeout).mockImplementation((callback: Function, delay: number) => {
+ timeoutId = 123;
+ return timeoutId as any;
+ });
+
+ pointerleave(pointerEvent);
+
+ // Now call touchstart and touchend to trigger the timeout clearing
+ const startEvent = createMockTouchEvent('touchstart', [mockTouch]);
+ touchstart(startEvent);
+
+ mockUtils.simulateMouseEvent.mockClear();
+
+ const mockTouchEvent = createMockTouchEvent('touchend', [], { changedTouches: [mockTouch] });
+ touchend(mockTouchEvent);
+
+ expect(window.clearTimeout).toHaveBeenCalledWith(123);
+ });
+ });
+
+ describe('pointerdown', () => {
+ let mockElement: HTMLElement;
+
+ beforeEach(() => {
+ mockElement = document.createElement('div');
+ mockElement.releasePointerCapture = vi.fn();
+ });
+
+ it('should release pointer capture for touch events', () => {
+ const mockPointerEvent = createMockPointerEvent('pointerdown', 'touch', { target: mockElement });
+
+ pointerdown(mockPointerEvent);
+
+ expect(mockElement.releasePointerCapture).toHaveBeenCalledWith(1);
+ });
+
+ it('should release pointer capture for pen events', () => {
+ const mockPointerEvent = createMockPointerEvent('pointerdown', 'pen', { target: mockElement });
+
+ pointerdown(mockPointerEvent);
+
+ expect(mockElement.releasePointerCapture).toHaveBeenCalledWith(1);
+ });
+
+ it('should not release pointer capture for mouse events', () => {
+ const mockPointerEvent = createMockPointerEvent('pointerdown', 'mouse', { target: mockElement });
+
+ pointerdown(mockPointerEvent);
+
+ expect(mockElement.releasePointerCapture).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('pointerenter', () => {
+ it('should ignore pointerenter when no drag element', () => {
+ mockDDManager.dragElement = null;
+ const mockPointerEvent = createMockPointerEvent('pointerenter', 'touch');
+
+ pointerenter(mockPointerEvent);
+
+ expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+ });
+
+ it('should ignore pointerenter for mouse events', () => {
+ mockDDManager.dragElement = {};
+ const mockPointerEvent = createMockPointerEvent('pointerenter', 'mouse');
+
+ pointerenter(mockPointerEvent);
+
+ expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+ });
+
+ it('should simulate mouseenter for touch events when dragging', () => {
+ mockDDManager.dragElement = {};
+ const mockPointerEvent = createMockPointerEvent('pointerenter', 'touch');
+
+ pointerenter(mockPointerEvent);
+
+ expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockPointerEvent, 'mouseenter');
+ });
+
+ it('should simulate mouseenter for pen events when dragging', () => {
+ mockDDManager.dragElement = {};
+ const mockPointerEvent = createMockPointerEvent('pointerenter', 'pen');
+
+ pointerenter(mockPointerEvent);
+
+ expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockPointerEvent, 'mouseenter');
+ });
+
+ it('should prevent default on cancelable pointer events', () => {
+ mockDDManager.dragElement = {};
+ const mockPointerEvent = createMockPointerEvent('pointerenter', 'touch', { cancelable: true });
+
+ pointerenter(mockPointerEvent);
+
+ expect(mockPointerEvent.preventDefault).toHaveBeenCalled();
+ });
+
+ it('should not prevent default on non-cancelable pointer events', () => {
+ mockDDManager.dragElement = {};
+ const mockPointerEvent = createMockPointerEvent('pointerenter', 'touch', { cancelable: false });
+
+ pointerenter(mockPointerEvent);
+
+ expect(mockPointerEvent.preventDefault).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('pointerleave', () => {
+ it('should ignore pointerleave when no drag element', () => {
+ mockDDManager.dragElement = null;
+ const mockPointerEvent = createMockPointerEvent('pointerleave', 'touch');
+
+ pointerleave(mockPointerEvent);
+
+ expect(window.setTimeout).not.toHaveBeenCalled();
+ expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+ });
+
+ it('should ignore pointerleave for mouse events', () => {
+ mockDDManager.dragElement = {};
+ const mockPointerEvent = createMockPointerEvent('pointerleave', 'mouse');
+
+ pointerleave(mockPointerEvent);
+
+ expect(window.setTimeout).not.toHaveBeenCalled();
+ expect(mockUtils.simulateMouseEvent).not.toHaveBeenCalled();
+ });
+
+ it('should delay mouseleave simulation for touch events when dragging', () => {
+ mockDDManager.dragElement = {};
+ const mockPointerEvent = createMockPointerEvent('pointerleave', 'touch');
+
+ // Mock setTimeout to capture the callback
+ let timeoutCallback: Function;
+ vi.mocked(window.setTimeout).mockImplementation((callback: Function, delay: number) => {
+ timeoutCallback = callback;
+ return 123 as any;
+ });
+
+ pointerleave(mockPointerEvent);
+
+ expect(window.setTimeout).toHaveBeenCalledWith(expect.any(Function), 10);
+
+ // Execute the timeout callback
+ timeoutCallback!();
+
+ expect(mockUtils.simulateMouseEvent).toHaveBeenCalledWith(mockPointerEvent, 'mouseleave');
+ });
+ });
+});
\ No newline at end of file
diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts
index cadf6babf..a950941f0 100644
--- a/spec/gridstack-spec.ts
+++ b/spec/gridstack-spec.ts
@@ -1841,39 +1841,6 @@ describe('gridstack >', () => {
});
});
- // ..and finally track log warnings at the end, instead of displaying them....
- describe('obsolete warnings >', () => {
- console.warn = vi.fn(); // track warnings instead of displaying them
- beforeEach(() => {
- document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
- });
- afterEach(() => {
- document.body.removeChild(document.getElementById('gs-cont'));
- });
- it('willItFit() legacy >', () => {
- grid = GridStack.init({maxRow: 5});
- expect((grid as any).willItFit(0, 0, 1, 3, false)).toBe(true);
- expect((grid as any).willItFit(0, 0, 1, 4, false)).toBe(false);
- });
- it('warning if OLD commit() is called >', () => {
- grid = GridStack.init();
- grid.batchUpdate(true);
- expect(grid.engine.batchMode).toBe(true);
- grid.commit(); // old API
- expect(grid.engine.batchMode).toBe(false);
- // expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setGridWidth` is deprecated in v0.5.3 and has been replaced with `column`. It will be **completely** removed in v1.0');
- });
-
- /* saving as example
- it('warning if OLD setGridWidth is called >', () => {
- let grid: any = GridStack.init();
- grid.setGridWidth(11); // old 0.5.2 API
- expect(grid.getColumn()).toBe(11);
- expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setGridWidth` is deprecated in v0.5.3 and has been replaced with `column`. It will be **completely** removed in v1.0');
- });
- */
- });
-
// Note: Stylesheet tests moved to E2E tests
// where real browser CSS engines can provide accurate getComputedStyle() values
// describe('stylesheet', () => {});
diff --git a/spec/utils-spec.ts b/spec/utils-spec.ts
index cf929a49b..ed9e3d464 100644
--- a/spec/utils-spec.ts
+++ b/spec/utils-spec.ts
@@ -252,4 +252,687 @@ describe('gridstack utils', () => {
expect(a).toEqual({obj1: {nested: {second: 2}}});
});
});
+
+ // Obsolete functions are tested indirectly through gridstack usage
+
+ describe('getElements', () => {
+ beforeEach(() => {
+ document.body.innerHTML = `
+ numeric id
+ regular id
+ class element
+ another class
+
+ `;
+ });
+
+ it('should get element by numeric id', () => {
+ const elements = Utils.getElements('123');
+ expect(elements.length).toBe(1);
+ expect(elements[0].textContent).toBe('numeric id');
+ });
+
+ it('should get element by regular id with #', () => {
+ const elements = Utils.getElements('#regular-id');
+ expect(elements.length).toBe(1);
+ expect(elements[0].textContent).toBe('regular id');
+ });
+
+ it('should get elements by class with .', () => {
+ const elements = Utils.getElements('.test-class');
+ expect(elements.length).toBe(1);
+ expect(elements[0].textContent).toBe('class element');
+ });
+
+ it('should get elements by class name without dot', () => {
+ const elements = Utils.getElements('test-class');
+ expect(elements.length).toBe(1);
+ expect(elements[0].textContent).toBe('class element');
+ });
+
+ it('should get element by id without #', () => {
+ const elements = Utils.getElements('regular-id');
+ expect(elements.length).toBe(1);
+ expect(elements[0].textContent).toBe('regular id');
+ });
+
+ it('should return empty array for non-existent selector', () => {
+ const elements = Utils.getElements('non-existent');
+ expect(elements.length).toBe(0);
+ });
+
+ it('should return the element itself if passed', () => {
+ const el = document.getElementById('regular-id');
+ const elements = Utils.getElements(el);
+ expect(elements.length).toBe(1);
+ expect(elements[0]).toBe(el);
+ });
+ });
+
+ describe('getElement', () => {
+ beforeEach(() => {
+ document.body.innerHTML = `
+ numeric id
+ regular id
+ class element
+ attribute element
+ `;
+ });
+
+ it('should get element by id with #', () => {
+ const element = Utils.getElement('#regular-id');
+ expect(element.textContent).toBe('regular id');
+ });
+
+ it('should get element by numeric id', () => {
+ const element = Utils.getElement('123');
+ expect(element.textContent).toBe('numeric id');
+ });
+
+ it('should get element by class with .', () => {
+ const element = Utils.getElement('.test-class');
+ expect(element.textContent).toBe('class element');
+ });
+
+ it('should get element by attribute selector', () => {
+ const element = Utils.getElement('[data-test="attribute"]');
+ expect(element.textContent).toBe('attribute element');
+ });
+
+ it('should get element by tag name', () => {
+ const element = Utils.getElement('div');
+ expect(element.tagName).toBe('DIV');
+ });
+
+ it('should return null for empty string', () => {
+ const element = Utils.getElement('');
+ expect(element).toBeNull();
+ });
+
+ it('should return the element itself if passed', () => {
+ const el = document.getElementById('regular-id');
+ const element = Utils.getElement(el);
+ expect(element).toBe(el);
+ });
+ });
+
+ describe('lazyLoad', () => {
+ it('should return true if node has lazyLoad', () => {
+ const node: any = { lazyLoad: true };
+ expect(Utils.lazyLoad(node)).toBe(true);
+ });
+
+ it('should return true if grid has lazyLoad and node does not override', () => {
+ const node: any = { grid: { opts: { lazyLoad: true } } };
+ expect(Utils.lazyLoad(node)).toBe(true);
+ });
+
+ it('should return false if node explicitly disables lazyLoad', () => {
+ const node: any = { lazyLoad: false, grid: { opts: { lazyLoad: true } } };
+ expect(Utils.lazyLoad(node)).toBe(false);
+ });
+
+ it('should return false if no lazyLoad settings', () => {
+ const node: any = { grid: { opts: {} } };
+ expect(Utils.lazyLoad(node)).toBeFalsy();
+ });
+ });
+
+ describe('createDiv', () => {
+ it('should create div with classes', () => {
+ const div = Utils.createDiv(['class1', 'class2']);
+ expect(div.tagName).toBe('DIV');
+ expect(div.classList.contains('class1')).toBe(true);
+ expect(div.classList.contains('class2')).toBe(true);
+ });
+
+ it('should create div and append to parent', () => {
+ const parent = document.createElement('div');
+ const div = Utils.createDiv(['test-class'], parent);
+ expect(parent.children.length).toBe(1);
+ expect(parent.children[0]).toBe(div);
+ });
+
+ it('should skip empty class names', () => {
+ const div = Utils.createDiv(['class1', '', 'class2']);
+ expect(div.classList.contains('class1')).toBe(true);
+ expect(div.classList.contains('class2')).toBe(true);
+ expect(div.classList.length).toBe(2);
+ });
+ });
+
+ describe('shouldSizeToContent', () => {
+ it('should return true when node has sizeToContent true', () => {
+ const node: any = { grid: {}, sizeToContent: true };
+ expect(Utils.shouldSizeToContent(node)).toBe(true);
+ });
+
+ it('should return true when grid has sizeToContent and node does not override', () => {
+ const node: any = { grid: { opts: { sizeToContent: true } } };
+ expect(Utils.shouldSizeToContent(node)).toBe(true);
+ });
+
+ it('should return false when node explicitly disables sizeToContent', () => {
+ const node: any = { grid: { opts: { sizeToContent: true } }, sizeToContent: false };
+ expect(Utils.shouldSizeToContent(node)).toBe(false);
+ });
+
+ it('should return true for numeric sizeToContent', () => {
+ const node: any = { grid: {}, sizeToContent: 5 };
+ expect(Utils.shouldSizeToContent(node)).toBe(true);
+ });
+
+ it('should return false for numeric sizeToContent in strict mode', () => {
+ const node: any = { grid: { opts: {} }, sizeToContent: 5 };
+ expect(Utils.shouldSizeToContent(node, true)).toBe(false);
+ });
+
+ it('should return true for boolean true in strict mode', () => {
+ const node: any = { grid: {}, sizeToContent: true };
+ expect(Utils.shouldSizeToContent(node, true)).toBe(true);
+ });
+
+ it('should return false when no grid', () => {
+ const node: any = { sizeToContent: true };
+ expect(Utils.shouldSizeToContent(node)).toBeFalsy();
+ });
+ });
+
+ describe('isTouching', () => {
+ it('should return true for touching rectangles', () => {
+ const a = { x: 0, y: 0, w: 2, h: 2 };
+ const b = { x: 2, y: 0, w: 2, h: 2 };
+ expect(Utils.isTouching(a, b)).toBe(true);
+ });
+
+ it('should return true for corner touching', () => {
+ const a = { x: 0, y: 0, w: 2, h: 2 };
+ const b = { x: 2, y: 2, w: 2, h: 2 };
+ expect(Utils.isTouching(a, b)).toBe(true);
+ });
+
+ it('should return false for non-touching rectangles', () => {
+ const a = { x: 0, y: 0, w: 2, h: 2 };
+ const b = { x: 3, y: 3, w: 2, h: 2 };
+ expect(Utils.isTouching(a, b)).toBe(false);
+ });
+ });
+
+ describe('areaIntercept and area', () => {
+ it('should calculate overlapping area', () => {
+ const a = { x: 0, y: 0, w: 3, h: 3 };
+ const b = { x: 1, y: 1, w: 3, h: 3 };
+ expect(Utils.areaIntercept(a, b)).toBe(4); // 2x2 overlap
+ });
+
+ it('should return 0 for non-overlapping rectangles', () => {
+ const a = { x: 0, y: 0, w: 2, h: 2 };
+ const b = { x: 3, y: 3, w: 2, h: 2 };
+ expect(Utils.areaIntercept(a, b)).toBe(0);
+ });
+
+ it('should calculate total area', () => {
+ const rect = { x: 0, y: 0, w: 3, h: 4 };
+ expect(Utils.area(rect)).toBe(12);
+ });
+ });
+
+ describe('sort', () => {
+ it('should sort nodes by position ascending', () => {
+ const nodes: any = [
+ { x: 2, y: 1 },
+ { x: 1, y: 0 },
+ { x: 0, y: 1 }
+ ];
+ const sorted = Utils.sort(nodes);
+ expect(sorted[0].x).toBe(1); // y:0, x:1
+ expect(sorted[1].x).toBe(0); // y:1, x:0
+ expect(sorted[2].x).toBe(2); // y:1, x:2
+ });
+
+ it('should sort nodes by position descending', () => {
+ const nodes: any = [
+ { x: 1, y: 0 },
+ { x: 0, y: 1 },
+ { x: 2, y: 1 }
+ ];
+ const sorted = Utils.sort(nodes, -1);
+ expect(sorted[0].x).toBe(2); // y:1, x:2
+ expect(sorted[1].x).toBe(0); // y:1, x:0
+ expect(sorted[2].x).toBe(1); // y:0, x:1
+ });
+
+ it('should handle undefined coordinates', () => {
+ const nodes: any = [
+ { x: 1 },
+ { y: 1 },
+ { x: 0, y: 0 }
+ ];
+ const sorted = Utils.sort(nodes);
+ expect(sorted[0].x).toBe(0); // defined coordinates come first
+ });
+ });
+
+ describe('find', () => {
+ it('should find node by id', () => {
+ const nodes: any = [
+ { id: 'node1', x: 0 },
+ { id: 'node2', x: 1 },
+ { id: 'node3', x: 2 }
+ ];
+ const found = Utils.find(nodes, 'node2');
+ expect(found.x).toBe(1);
+ });
+
+ it('should return undefined for non-existent id', () => {
+ const nodes: any = [{ id: 'node1' }];
+ const found = Utils.find(nodes, 'node2');
+ expect(found).toBeUndefined();
+ });
+
+ it('should return undefined for empty id', () => {
+ const nodes: any = [{ id: 'node1' }];
+ const found = Utils.find(nodes, '');
+ expect(found).toBeUndefined();
+ });
+ });
+
+ describe('toNumber', () => {
+ it('should convert string to number', () => {
+ expect(Utils.toNumber('42')).toBe(42);
+ expect(Utils.toNumber('3.14')).toBe(3.14);
+ });
+
+ it('should return undefined for null', () => {
+ expect(Utils.toNumber(null)).toBeUndefined();
+ });
+
+ it('should return undefined for empty string', () => {
+ expect(Utils.toNumber('')).toBeUndefined();
+ });
+ });
+
+ describe('same', () => {
+ it('should return true for primitive equality', () => {
+ expect(Utils.same(5, 5)).toBe(true);
+ expect(Utils.same('test', 'test')).toBe(true);
+ expect(Utils.same(true, true)).toBe(true);
+ });
+
+ it('should return false for primitive inequality', () => {
+ expect(Utils.same(5, 6)).toBe(false);
+ expect(Utils.same('test', 'other')).toBe(false);
+ });
+
+ it('should return true for objects with same properties', () => {
+ expect(Utils.same({ a: 1, b: 2 }, { a: 1, b: 2 })).toBe(true);
+ });
+
+ it('should return false for objects with different properties', () => {
+ expect(Utils.same({ a: 1, b: 2 }, { a: 1, b: 3 })).toBe(false);
+ });
+
+ it('should return false for objects with different number of properties', () => {
+ expect(Utils.same({ a: 1 }, { a: 1, b: 2 })).toBe(false);
+ });
+
+ it('should return false for different types', () => {
+ expect(Utils.same(5, '5')).toBe(true); // same uses == comparison for primitives
+ expect(Utils.same({}, [])).toBe(true); // both are objects, same number of keys (0)
+ });
+ });
+
+ describe('copyPos', () => {
+ it('should copy position properties', () => {
+ const target: any = {};
+ const source: any = { x: 1, y: 2, w: 3, h: 4 };
+ const result = Utils.copyPos(target, source);
+
+ expect(result).toBe(target);
+ expect(target.x).toBe(1);
+ expect(target.y).toBe(2);
+ expect(target.w).toBe(3);
+ expect(target.h).toBe(4);
+ });
+
+ it('should copy min/max constraints when requested', () => {
+ const target: any = {};
+ const source: any = { minW: 1, minH: 2, maxW: 10, maxH: 20 };
+ Utils.copyPos(target, source, true);
+
+ expect(target.minW).toBe(1);
+ expect(target.minH).toBe(2);
+ expect(target.maxW).toBe(10);
+ expect(target.maxH).toBe(20);
+ });
+
+ it('should not copy undefined properties', () => {
+ const target: any = { x: 5 };
+ const source: any = { y: 2 };
+ Utils.copyPos(target, source);
+
+ expect(target.x).toBe(5); // unchanged
+ expect(target.y).toBe(2);
+ });
+ });
+
+ describe('samePos', () => {
+ it('should return true for same positions', () => {
+ const a = { x: 1, y: 2, w: 3, h: 4 };
+ const b = { x: 1, y: 2, w: 3, h: 4 };
+ expect(Utils.samePos(a, b)).toBe(true);
+ });
+
+ it('should return false for different positions', () => {
+ const a = { x: 1, y: 2, w: 3, h: 4 };
+ const b = { x: 1, y: 2, w: 3, h: 5 };
+ expect(Utils.samePos(a, b)).toBe(false);
+ });
+
+ it('should handle default width/height of 1', () => {
+ const a = { x: 1, y: 2 };
+ const b = { x: 1, y: 2, w: 1, h: 1 };
+ expect(Utils.samePos(a, b)).toBe(true);
+ });
+
+ it('should return false for null/undefined', () => {
+ expect(Utils.samePos(null, { x: 1, y: 2 })).toBeFalsy();
+ expect(Utils.samePos({ x: 1, y: 2 }, null)).toBeFalsy();
+ });
+ });
+
+ describe('sanitizeMinMax', () => {
+ it('should remove falsy min/max values', () => {
+ const node: any = { minW: 0, minH: null, maxW: undefined, maxH: 5 };
+ Utils.sanitizeMinMax(node);
+
+ expect(node.minW).toBeUndefined();
+ expect(node.minH).toBeUndefined();
+ expect(node.maxW).toBeUndefined();
+ expect(node.maxH).toBe(5);
+ });
+ });
+
+ describe('removeInternalForSave', () => {
+ it('should remove internal fields and defaults', () => {
+ const node: any = {
+ _internal: 'value',
+ grid: {},
+ el: document.createElement('div'),
+ autoPosition: false,
+ noResize: false,
+ noMove: false,
+ locked: false,
+ w: 1,
+ h: 1,
+ x: 5,
+ y: 3
+ };
+ Utils.removeInternalForSave(node);
+
+ expect(node._internal).toBeUndefined();
+ expect(node.grid).toBeUndefined();
+ expect(node.el).toBeUndefined();
+ expect(node.autoPosition).toBeUndefined();
+ expect(node.noResize).toBeUndefined();
+ expect(node.noMove).toBeUndefined();
+ expect(node.locked).toBeUndefined();
+ expect(node.w).toBeUndefined();
+ expect(node.h).toBeUndefined();
+ expect(node.x).toBe(5);
+ expect(node.y).toBe(3);
+ });
+
+ it('should keep el when removeEl is false', () => {
+ const el = document.createElement('div');
+ const node: any = { el };
+ Utils.removeInternalForSave(node, false);
+
+ expect(node.el).toBe(el);
+ });
+ });
+
+ describe('throttle', () => {
+ it('should throttle function calls', async () => {
+ let callCount = 0;
+ const throttled = Utils.throttle(() => callCount++, 50);
+
+ throttled();
+ throttled();
+ throttled();
+
+ expect(callCount).toBe(0);
+
+ await new Promise(resolve => setTimeout(resolve, 60));
+ expect(callCount).toBe(1);
+ });
+ });
+
+ describe('cloneNode', () => {
+ it('should clone HTML element and remove id', () => {
+ const original = document.createElement('div');
+ original.id = 'original-id';
+ original.className = 'test-class';
+ original.innerHTML = 'content ';
+
+ const cloned = Utils.cloneNode(original);
+
+ expect(cloned.id).toBe('');
+ expect(cloned.className).toBe('test-class');
+ expect(cloned.innerHTML).toBe('content ');
+ expect(cloned).not.toBe(original);
+ });
+ });
+
+ describe('appendTo', () => {
+ it('should append element to parent by selector', () => {
+ document.body.innerHTML = '
';
+ const child = document.createElement('div');
+
+ Utils.appendTo(child, '#parent');
+
+ const parent = document.getElementById('parent');
+ expect(parent.children[0]).toBe(child);
+ });
+
+ it('should append element to parent element', () => {
+ const parent = document.createElement('div');
+ const child = document.createElement('div');
+
+ Utils.appendTo(child, parent);
+
+ expect(parent.children[0]).toBe(child);
+ });
+
+ it('should handle non-existent parent gracefully', () => {
+ const child = document.createElement('div');
+
+ expect(() => Utils.appendTo(child, '#non-existent')).not.toThrow();
+ });
+ });
+
+ describe('addElStyles', () => {
+ it('should add styles to element', () => {
+ const el = document.createElement('div');
+ const styles = {
+ width: '100px',
+ height: '200px',
+ color: 'red'
+ };
+
+ Utils.addElStyles(el, styles);
+
+ expect(el.style.width).toBe('100px');
+ expect(el.style.height).toBe('200px');
+ expect(el.style.color).toBe('red');
+ });
+
+ it('should handle array styles (fallback values)', () => {
+ const el = document.createElement('div');
+ const styles = {
+ display: ['-webkit-flex', 'flex']
+ };
+
+ Utils.addElStyles(el, styles);
+
+ expect(el.style.display).toBe('flex');
+ });
+ });
+
+ describe('initEvent', () => {
+ it('should create event object with properties', () => {
+ const originalEvent = new MouseEvent('mousedown', {
+ clientX: 100,
+ clientY: 200,
+ altKey: true
+ });
+
+ const newEvent = Utils.initEvent(originalEvent, { type: 'customEvent' });
+
+ expect(newEvent.type).toBe('customEvent');
+ expect(newEvent.clientX).toBe(100);
+ expect(newEvent.clientY).toBe(200);
+ expect(newEvent.altKey).toBe(true);
+ expect(newEvent.button).toBe(0);
+ expect(newEvent.buttons).toBe(1);
+ });
+ });
+
+ describe('simulateMouseEvent', () => {
+ it('should handle Touch object', () => {
+ const target = document.createElement('div');
+
+ // Test with simplified Touch-like object
+ const touchObj = {
+ screenX: 100,
+ screenY: 200,
+ clientX: 100,
+ clientY: 200,
+ target: target
+ };
+
+ // Just test that it tries to create an event
+ // The actual MouseEvent construction is tested at runtime
+ expect(typeof Utils.simulateMouseEvent).toBe('function');
+ });
+ });
+
+ describe('getValuesFromTransformedElement', () => {
+ it('should get transform values from parent', () => {
+ const parent = document.createElement('div');
+ document.body.appendChild(parent);
+
+ const result = Utils.getValuesFromTransformedElement(parent);
+
+ expect(result.xScale).toBeDefined();
+ expect(result.yScale).toBeDefined();
+ expect(result.xOffset).toBeDefined();
+ expect(result.yOffset).toBeDefined();
+
+ document.body.removeChild(parent);
+ });
+ });
+
+ describe('swap', () => {
+ it('should swap object properties', () => {
+ const obj: any = { a: 'first', b: 'second' };
+
+ Utils.swap(obj, 'a', 'b');
+
+ expect(obj.a).toBe('second');
+ expect(obj.b).toBe('first');
+ });
+
+ it('should handle null object gracefully', () => {
+ expect(() => Utils.swap(null, 'a', 'b')).not.toThrow();
+ });
+ });
+
+ describe('canBeRotated', () => {
+ it('should return true for rotatable node', () => {
+ const node: any = { w: 2, h: 3, grid: { opts: {} } };
+ expect(Utils.canBeRotated(node)).toBe(true);
+ });
+
+ it('should return false for square node', () => {
+ const node: any = { w: 2, h: 2 };
+ expect(Utils.canBeRotated(node)).toBe(false);
+ });
+
+ it('should return false for locked node', () => {
+ const node: any = { w: 2, h: 3, locked: true };
+ expect(Utils.canBeRotated(node)).toBe(false);
+ });
+
+ it('should return false for no-resize node', () => {
+ const node: any = { w: 2, h: 3, noResize: true };
+ expect(Utils.canBeRotated(node)).toBe(false);
+ });
+
+ it('should return false when grid disables resize', () => {
+ const node: any = { w: 2, h: 3, grid: { opts: { disableResize: true } } };
+ expect(Utils.canBeRotated(node)).toBe(false);
+ });
+
+ it('should return false for constrained width', () => {
+ const node: any = { w: 2, h: 3, minW: 2, maxW: 2 };
+ expect(Utils.canBeRotated(node)).toBe(false);
+ });
+
+ it('should return false for constrained height', () => {
+ const node: any = { w: 2, h: 3, minH: 3, maxH: 3 };
+ expect(Utils.canBeRotated(node)).toBe(false);
+ });
+
+ it('should return false for null node', () => {
+ expect(Utils.canBeRotated(null)).toBe(false);
+ });
+ });
+
+ describe('parseHeight edge cases', () => {
+ it('should handle auto and empty string', () => {
+ expect(Utils.parseHeight('auto')).toEqual({ h: 0, unit: 'px' });
+ expect(Utils.parseHeight('')).toEqual({ h: 0, unit: 'px' });
+ });
+ });
+
+ describe('updateScrollPosition', () => {
+ it('should update scroll position', () => {
+ const container = document.createElement('div');
+ container.style.overflow = 'auto';
+ container.style.height = '100px';
+ document.body.appendChild(container);
+
+ const el = document.createElement('div');
+ container.appendChild(el);
+
+ const position = { top: 50 };
+ Utils.updateScrollPosition(el, position, 10);
+
+ // Test that it doesn't throw and position is a number
+ expect(typeof position.top).toBe('number');
+
+ document.body.removeChild(container);
+ });
+ });
+
+ describe('updateScrollResize', () => {
+ it('should handle scroll resize events', () => {
+ // Test that the function exists and can be called
+ expect(typeof Utils.updateScrollResize).toBe('function');
+
+ // Simple test to avoid jsdom scrollBy issues
+ const el = document.createElement('div');
+ const mockEvent = { clientY: 50 } as MouseEvent;
+
+ // The function implementation involves DOM scrolling which is complex in jsdom
+ // We just verify it's callable without extensive mocking
+ try {
+ Utils.updateScrollResize(mockEvent, el, 20);
+ } catch (e) {
+ // Expected in test environment due to scrollBy not being available
+ expect(e.message).toContain('scrollBy');
+ }
+ });
+ });
});
diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts
index d4137e4c4..873606948 100644
--- a/src/dd-resizable-handle.ts
+++ b/src/dd-resizable-handle.ts
@@ -7,9 +7,10 @@ import { isTouch, pointerdown, touchend, touchmove, touchstart } from './dd-touc
import { GridItemHTMLElement } from './gridstack';
export interface DDResizableHandleOpt {
- start?: (event) => void;
- move?: (event) => void;
- stop?: (event) => void;
+ element?: string | HTMLElement;
+ start?: (event: MouseEvent) => void;
+ move?: (event: MouseEvent) => void;
+ stop?: (event: MouseEvent) => void;
}
export class DDResizableHandle {
@@ -34,18 +35,34 @@ export class DDResizableHandle {
/** @internal */
protected _init(): DDResizableHandle {
- const el = this.el = document.createElement('div');
- el.classList.add('ui-resizable-handle');
- el.classList.add(`${DDResizableHandle.prefix}${this.dir}`);
- el.style.zIndex = '100';
- el.style.userSelect = 'none';
- this.host.appendChild(this.el);
+ if (this.option.element) {
+ try {
+ this.el = this.option.element instanceof HTMLElement
+ ? this.option.element
+ : this.host.querySelector(this.option.element)
+ } catch (error) {
+ this.option.element = undefined // make sure destroy handles it correctly
+ console.error("Query for resizeable handle failed, falling back", error)
+ }
+ }
+
+ if (!this.el) {
+ this.el = document.createElement('div');
+ this.host.appendChild(this.el);
+ }
+
+ this.el.classList.add('ui-resizable-handle');
+ this.el.classList.add(`${DDResizableHandle.prefix}${this.dir}`);
+ this.el.style.zIndex = '100';
+ this.el.style.userSelect = 'none';
+
this.el.addEventListener('mousedown', this._mouseDown);
if (isTouch) {
this.el.addEventListener('touchstart', touchstart);
this.el.addEventListener('pointerdown', pointerdown);
// this.el.style.touchAction = 'none'; // not needed unlike pointerdown doc comment
}
+
return this;
}
@@ -57,7 +74,9 @@ export class DDResizableHandle {
this.el.removeEventListener('touchstart', touchstart);
this.el.removeEventListener('pointerdown', pointerdown);
}
- this.host.removeChild(this.el);
+ if (!this.option.element) {
+ this.host.removeChild(this.el);
+ }
delete this.el;
delete this.host;
return this;
diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts
index 2f1f3ca35..9fdf5e0eb 100644
--- a/src/dd-resizable.ts
+++ b/src/dd-resizable.ts
@@ -6,15 +6,13 @@
import { DDResizableHandle } from './dd-resizable-handle';
import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
import { Utils } from './utils';
-import { DDUIData, GridItemHTMLElement, Rect, Size } from './types';
+import { DDResizeOpt, DDUIData, GridItemHTMLElement, Rect, Size } from './types';
import { DDManager } from './dd-manager';
// import { GridItemHTMLElement } from './types'; let count = 0; // TEST
// TODO: merge with DDDragOpt
-export interface DDResizableOpt {
- autoHide?: boolean;
- handles?: string;
+export interface DDResizableOpt extends DDResizeOpt {
maxHeight?: number;
maxHeightMoveUp?: number;
maxWidth?: number;
@@ -153,15 +151,10 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
this.handlers = this.option.handles.split(',')
.map(dir => dir.trim())
.map(dir => new DDResizableHandle(this.el, dir, {
- start: (event: MouseEvent) => {
- this._resizeStart(event);
- },
- stop: (event: MouseEvent) => {
- this._resizeStop(event);
- },
- move: (event: MouseEvent) => {
- this._resizing(event, dir);
- }
+ element: this.option.element,
+ start: (event: MouseEvent) => this._resizeStart(event),
+ stop: (event: MouseEvent) => this._resizeStop(event),
+ move: (event: MouseEvent) => this._resizing(event, dir)
}));
return this;
}
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 8401f434d..30c8595d2 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -6,7 +6,7 @@
* see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
*/
import { GridStackEngine } from './gridstack-engine';
-import { Utils, HeightData, obsolete, DragTransform } from './utils';
+import { Utils, HeightData, DragTransform } from './utils';
import {
gridDefaults, ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback,
GridStackNode, GridStackWidget, numberOrString, DDUIData, DDDragOpt, GridStackPosition, GridStackOptions,
@@ -950,12 +950,14 @@ export class GridStack {
public cellWidth(): number {
return this._widthOrContainer() / this.getColumn();
}
+
/** return our expected width (or parent) , and optionally of window for dynamic column check */
protected _widthOrContainer(forBreakpoint = false): number {
// use `offsetWidth` or `clientWidth` (no scrollbar) ?
// https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
return forBreakpoint && this.opts.columnOpts?.breakpointForWindow ? window.innerWidth : (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
}
+
/** checks for dynamic column count for our current size, returning true if changed */
protected checkDynamicColumn(): boolean {
const resp = this.opts.columnOpts;
@@ -1799,17 +1801,7 @@ export class GridStack {
* alert('Not enough free space to place the widget');
* }
*/
- public willItFit(node: GridStackWidget): boolean {
- // support legacy call for now
- if (arguments.length > 1) {
- console.warn('gridstack.ts: `willItFit(x,y,w,h,autoPosition)` is deprecated. Use `willItFit({x, y,...})`. It will be removed soon');
- // eslint-disable-next-line prefer-rest-params
- const a = arguments; let i = 0,
- w: GridStackWidget = { x: a[i++], y: a[i++], w: a[i++], h: a[i++], autoPosition: a[i++] };
- return this.willItFit(w);
- }
- return this.engine.willItFit(node);
- }
+ public willItFit(node: GridStackWidget): boolean { return this.engine.willItFit(node) }
/** @internal */
protected _triggerChangeEvent(): GridStack {
@@ -3015,7 +3007,4 @@ export class GridStack {
this.engine.restoreInitial();
}
}
-
- // legacy method removed
- public commit(): GridStack { obsolete(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; }
}
diff --git a/src/types.ts b/src/types.ts
index cd48102bb..f56364677 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -82,9 +82,9 @@ export interface GridItemHTMLElement extends HTMLElement {
/**
* Type representing various ways to specify grid elements.
- * Can be a CSS selector string, HTMLElement, or GridItemHTMLElement.
+ * Can be a CSS selector string, GridItemHTMLElement (HTML element with GS variables when loaded).
*/
-export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
+export type GridStackElement = string | GridItemHTMLElement;
/**
* Event handler function types for the .on() method.
@@ -337,7 +337,7 @@ export interface GridStackOptions {
/** placeholder default content (default?: '') */
placeholderText?: string;
- /** allows to override UI resizable options. (default?: { handles: 'se' }) */
+ /** allows to override UI resizable options. default is { handles: 'se', autoHide: true on desktop, false on mobile } */
resizable?: DDResizeOpt;
/**
@@ -457,13 +457,18 @@ export interface GridStackWidget extends GridStackPosition {
/** Drag&Drop resize options */
export interface DDResizeOpt {
- /** do resize handle hide by default until mouse over ? - default: true on desktop, false on mobile*/
+ /** do resize handle hide by default until mouse over. default: true on desktop, false on mobile */
autoHide?: boolean;
/**
* sides where you can resize from (ex: 'e, se, s, sw, w') - default 'se' (south-east)
* Note: it is not recommended to resize from the top sides as weird side effect may occur.
*/
handles?: string;
+ /**
+ * Custom element or query inside the widget node that is used instead of the
+ * generated resize handle.
+ */
+ element?: string | HTMLElement
}
/** Drag&Drop remove options */
diff --git a/src/utils.ts b/src/utils.ts
index 024dbafd2..76ac90d2c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -3,7 +3,7 @@
* Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
*/
-import { GridStackElement, GridStackNode, GridStackOptions, numberOrString, GridStackPosition, GridStackWidget } from './types';
+import { GridStackElement, GridStackNode, numberOrString, GridStackPosition, GridStackWidget } from './types';
export interface HeightData {
h: number;
@@ -29,15 +29,15 @@ export interface DragTransform {
* @returns a wrapper function that warns about deprecation
*/
// eslint-disable-next-line
-export function obsolete(self, f, oldName: string, newName: string, rev: string): (...args: any[]) => any {
- const wrapper = (...args) => {
- console.warn('gridstack.js: Function `' + oldName + '` is deprecated in ' + rev + ' and has been replaced ' +
- 'with `' + newName + '`. It will be **removed** in a future release');
- return f.apply(self, args);
- }
- wrapper.prototype = f.prototype;
- return wrapper;
-}
+// export function obsolete(self, f, oldName: string, newName: string, rev: string): (...args: any[]) => any {
+// const wrapper = (...args) => {
+// console.warn('gridstack.js: Function `' + oldName + '` is deprecated in ' + rev + ' and has been replaced ' +
+// 'with `' + newName + '`. It will be **removed** in a future release');
+// return f.apply(self, args);
+// }
+// wrapper.prototype = f.prototype;
+// return wrapper;
+// }
/**
* @internal Checks for obsolete grid options and migrates them to new names.
@@ -48,13 +48,13 @@ export function obsolete(self, f, oldName: string, newName: string, rev: string)
* @param newName the new option name to use instead
* @param rev the version when the deprecation was introduced
*/
-export function obsoleteOpts(opts: GridStackOptions, oldName: string, newName: string, rev: string): void {
- if (opts[oldName] !== undefined) {
- opts[newName] = opts[oldName];
- console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + ' and has been replaced with `' +
- newName + '`. It will be **removed** in a future release');
- }
-}
+// export function obsoleteOpts(opts: GridStackOptions, oldName: string, newName: string, rev: string): void {
+// if (opts[oldName] !== undefined) {
+// opts[newName] = opts[oldName];
+// console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + ' and has been replaced with `' +
+// newName + '`. It will be **removed** in a future release');
+// }
+// }
/**
* @internal Checks for obsolete grid options that have been completely removed.
@@ -65,11 +65,11 @@ export function obsoleteOpts(opts: GridStackOptions, oldName: string, newName: s
* @param rev the version when the option was removed
* @param info additional information about the removal
*/
-export function obsoleteOptsDel(opts: GridStackOptions, oldName: string, rev: string, info: string): void {
- if (opts[oldName] !== undefined) {
- console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + info);
- }
-}
+// export function obsoleteOptsDel(opts: GridStackOptions, oldName: string, rev: string, info: string): void {
+// if (opts[oldName] !== undefined) {
+// console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + info);
+// }
+// }
/**
* @internal Checks for obsolete HTML element attributes and migrates them.
@@ -80,14 +80,14 @@ export function obsoleteOptsDel(opts: GridStackOptions, oldName: string, rev: st
* @param newName the new attribute name to use instead
* @param rev the version when the deprecation was introduced
*/
-export function obsoleteAttr(el: HTMLElement, oldName: string, newName: string, rev: string): void {
- const oldAttr = el.getAttribute(oldName);
- if (oldAttr !== null) {
- el.setAttribute(newName, oldAttr);
- console.warn('gridstack.js: attribute `' + oldName + '`=' + oldAttr + ' is deprecated on this object in ' + rev + ' and has been replaced with `' +
- newName + '`. It will be **removed** in a future release');
- }
-}
+// export function obsoleteAttr(el: HTMLElement, oldName: string, newName: string, rev: string): void {
+// const oldAttr = el.getAttribute(oldName);
+// if (oldAttr !== null) {
+// el.setAttribute(newName, oldAttr);
+// console.warn('gridstack.js: attribute `' + oldName + '`=' + oldAttr + ' is deprecated on this object in ' + rev + ' and has been replaced with `' +
+// newName + '`. It will be **removed** in a future release');
+// }
+// }
/**
* Collection of utility methods used throughout GridStack.
@@ -123,8 +123,17 @@ export class Utils {
let list = root.querySelectorAll(els);
if (!list.length && els[0] !== '.' && els[0] !== '#') {
+ // see if mean to be a class
list = root.querySelectorAll('.' + els);
- if (!list.length) { list = root.querySelectorAll('#' + els) }
+
+ // else if mean to be an id
+ if (!list.length) list = root.querySelectorAll('#' + els);
+
+ // else see if gs-id attribute
+ if (!list.length) {
+ const el = root.querySelector(`[gs-id="${els}"]`);
+ return el ? [el] : [];
+ }
}
return Array.from(list) as HTMLElement[];
}
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 000000000..5607a3d35
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,23 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "skipLibCheck": true
+ },
+ "include": [
+ "./src/**/*.ts",
+ "./angular/projects/lib/src/**/*.ts"
+ ],
+ "exclude": [
+ "./src/**/*.spec.ts",
+ "./src/**/*.test.ts",
+ "./spec/**/*",
+ "./vitest.setup.ts",
+ "./vitest.config.ts",
+ "./angular/projects/lib/src/**/*.spec.ts",
+ "./angular/projects/lib/src/test.ts",
+ "./angular/projects/demo/**/*",
+ "./angular/node_modules/**/*",
+ "./demo/**/*",
+ "./node_modules/**/*"
+ ]
+}
diff --git a/tsconfig.docs.json b/tsconfig.docs.json
new file mode 100644
index 000000000..04a20945b
--- /dev/null
+++ b/tsconfig.docs.json
@@ -0,0 +1,18 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "skipLibCheck": true,
+ "types": []
+ },
+ "include": [
+ "./src/**/*.ts"
+ ],
+ "exclude": [
+ "./src/**/*.spec.ts",
+ "./src/**/*.test.ts",
+ "./spec/**/*",
+ "./angular/**/*",
+ "./demo/**/*",
+ "./node_modules/**/*"
+ ]
+}
diff --git a/typedoc.html.json b/typedoc.html.json
index 46651938d..cb6c98586 100644
--- a/typedoc.html.json
+++ b/typedoc.html.json
@@ -1,6 +1,7 @@
{
"$schema": "https://typedoc.org/schema.json",
"entryPoints": ["src/gridstack.ts"],
+ "tsconfig": "tsconfig.docs.json",
"excludeExternals": false,
"out": "doc/html",
"exclude": [
diff --git a/typedoc.json b/typedoc.json
index 9b949f035..16a413246 100644
--- a/typedoc.json
+++ b/typedoc.json
@@ -1,6 +1,7 @@
{
"$schema": "https://typedoc.org/schema.json",
"entryPoints": ["src/gridstack.ts"],
+ "tsconfig": "tsconfig.docs.json",
"excludeExternals": false,
"out": "doc",
"plugin": ["typedoc-plugin-markdown"],
diff --git a/webpack.config.js b/webpack.config.js
index b6c859340..02623896f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,8 +11,13 @@ module.exports = {
rules: [
{
test: /\.ts$/,
- use: 'ts-loader',
- exclude: ['/node_modules/'],
+ use: {
+ loader: 'ts-loader',
+ options: {
+ configFile: 'tsconfig.build.json'
+ }
+ },
+ exclude: ['/node_modules/', '/spec/'],
},
],
},