dockview-angular 0.0.0-beta-0 → 0.0.0-experimental-e3d91d1-20251227

package/dist/esm/lib/utils/lifecycle-utils.js

@@ -0,0 +1,68 @@
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+export class AngularDisposable {
+    constructor() {
+        this._isDisposed = false;
+        this.disposeCallbacks = [];
+    }
+    get isDisposed() {
+        return this._isDisposed;
+    }
+    addDisposeCallback(callback) {
+        if (this._isDisposed) {
+            callback();
+            return;
+        }
+        this.disposeCallbacks.push(callback);
+    }
+    dispose() {
+        if (this._isDisposed) {
+            return;
+        }
+        this._isDisposed = true;
+        this.disposeCallbacks.forEach(callback => {
+            try {
+                callback();
+            }
+            catch (error) {
+                console.error('Error in dispose callback:', error);
+            }
+        });
+        this.disposeCallbacks = [];
+    }
+}
+export class AngularLifecycleManager {
+    constructor() {
+        this.destroySubject = new Subject();
+        this.disposables = [];
+    }
+    get destroy$() {
+        return this.destroySubject.asObservable();
+    }
+    addDisposable(disposable) {
+        this.disposables.push(disposable);
+    }
+    takeUntilDestroy() {
+        return takeUntil(this.destroySubject);
+    }
+    destroy() {
+        this.destroySubject.next();
+        this.destroySubject.complete();
+        this.disposables.forEach(disposable => {
+            try {
+                disposable.dispose();
+            }
+            catch (error) {
+                console.error('Error disposing resource:', error);
+            }
+        });
+        this.disposables = [];
+    }
+}
+export function createAngularDisposable(disposeCallback) {
+    const disposable = new AngularDisposable();
+    if (disposeCallback) {
+        disposable.addDisposeCallback(disposeCallback);
+    }
+    return disposable;
+}

package/dist/esm/public-api.d.ts

@@ -0,0 +1,13 @@
+export * from 'dockview-core';
+export * from './lib/dockview-angular.module';
+export * from './lib/dockview/dockview-angular.component';
+export * from './lib/gridview/gridview-angular.component';
+export * from './lib/paneview/paneview-angular.component';
+export * from './lib/splitview/splitview-angular.component';
+export { DockviewAngularOptions, DockviewAngularEvents, IDockviewAngularPanelProps, IDockviewAngularPanelHeaderProps, IDockviewAngularWatermarkProps, IDockviewAngularHeaderActionsProps, DockviewAngularComponentOptions } from './lib/dockview/types';
+export { GridviewAngularOptions, GridviewAngularEvents, GridviewAngularReadyEvent } from './lib/gridview/types';
+export { PaneviewAngularOptions, PaneviewAngularEvents, PaneviewAngularReadyEvent } from './lib/paneview/types';
+export { SplitviewAngularOptions, SplitviewAngularEvents, SplitviewAngularReadyEvent } from './lib/splitview/types';
+export * from './lib/utils/angular-renderer';
+export * from './lib/utils/component-factory';
+export * from './lib/utils/lifecycle-utils';

package/dist/esm/public-api.js

@@ -0,0 +1,16 @@
+/*
+ * Public API Surface of dockview-angular
+ */
+// Re-export everything from dockview-core
+export * from 'dockview-core';
+// Angular module
+export * from './lib/dockview-angular.module';
+// Components
+export * from './lib/dockview/dockview-angular.component';
+export * from './lib/gridview/gridview-angular.component';
+export * from './lib/paneview/paneview-angular.component';
+export * from './lib/splitview/splitview-angular.component';
+// Utilities
+export * from './lib/utils/angular-renderer';
+export * from './lib/utils/component-factory';
+export * from './lib/utils/lifecycle-utils';

package/package.json

@@ -1,59 +1,68 @@
 {
-  "name": "dockview-angular",
-  "version": "0.0.0-beta-0",
-  "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
-  "keywords": [
-    "splitview",
-    "split-view",
-    "gridview",
-    "grid-view",
-    "dockview",
-    "dock-view",
-    "grid",
-    "tabs",
-    "layout",
-    "layout manager",
-    "dock layout",
-    "dock",
-    "docking",
-    "splitter",
-    "drag-and-drop",
-    "drag",
-    "drop",
-    "react",
-    "react-component"
-  ],
-  "homepage": "https://github.com/mathuo/dockview",
-  "bugs": {
-    "url": "https://github.com/mathuo/dockview/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mathuo/dockview.git"
-  },
-  "license": "MIT",
-  "author": "https://github.com/mathuo",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/cjs/index.d.ts",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "scripts": {
-    "build": "npm run build:package && npm run build:bundles",
-    "build:bundles": "rollup -c",
-    "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics",
-    "build:css": "gulp sass",
-    "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics",
-    "build:package": "npm run build:cjs && npm run build:esm && npm run build:css",
-    "clean": "rimraf dist/ .build/ .rollup.cache/",
-    "prepublishOnly": "npm run rebuild && npm run test",
-    "rebuild": "npm run clean && npm run build",
-    "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview",
-    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage"
-  },
-  "dependencies": {
-    "dockview-core": "^1.10.1"
-  }
-}
+    "name": "dockview-angular",
+    "version": "0.0.0-experimental-e3d91d1-20251227",
+    "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
+    "keywords": [
+        "splitview",
+        "split-view",
+        "gridview",
+        "grid-view",
+        "dockview",
+        "dock-view",
+        "grid",
+        "tabs",
+        "layout",
+        "layout manager",
+        "dock layout",
+        "dock",
+        "docking",
+        "splitter",
+        "drag-and-drop",
+        "drag",
+        "drop",
+        "angular",
+        "angular-component"
+    ],
+    "homepage": "https://github.com/mathuo/dockview",
+    "bugs": {
+        "url": "https://github.com/mathuo/dockview/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/mathuo/dockview.git"
+    },
+    "license": "MIT",
+    "author": "https://github.com/mathuo",
+    "main": "./dist/cjs/index.js",
+    "module": "./dist/esm/index.js",
+    "types": "./dist/cjs/index.d.ts",
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "build:bundle": "rollup -c",
+        "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics",
+        "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics",
+        "build:css": "node scripts/copy-css.js",
+        "build": "npm run build:cjs && npm run build:esm && npm run build:css",
+        "clean": "rimraf dist/ .build/ .rollup.cache/",
+        "prepublishOnly": "npm run rebuild && npm run build:bundle && npm run test",
+        "rebuild": "npm run clean && npm run build",
+        "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-angular",
+        "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-angular --coverage"
+    },
+    "dependencies": {
+        "dockview-core": "0.0.0-experimental-e3d91d1-20251227"
+    },
+    "peerDependencies": {
+        "@angular/common": ">=14.0.0",
+        "@angular/core": ">=14.0.0",
+        "rxjs": ">=7.0.0"
+    },
+    "devDependencies": {
+        "jest-preset-angular": "^14.6.1",
+        "ng-packagr": "^17.0.0",
+        "zone.js": "^0.15.1"
+    }
+}

package/dist/cjs/utils.d.ts

@@ -1,49 +0,0 @@
-import type { DockviewGroupPanel, GroupPanelPartInitParameters, IContentRenderer, ITabRenderer, IWatermarkRenderer, PanelUpdateEvent, Parameters, WatermarkRendererInitParameters } from 'dockview-core';
-import { type ComponentOptionsBase } from 'vue';
-export type ComponentInterface = ComponentOptionsBase<any, any, any, any, any, any, any, any>;
-/**
- * TODO List
- *
- * 1. handle vue context-ish stuff (appContext? provides?)
- *
- *
- *
- * @see https://vuejs.org/api/render-function.html#clonevnode
- * @see https://vuejs.org/api/render-function.html#mergeprops
- */
-export declare function mountVueComponent(component: ComponentInterface, props: any, element: HTMLElement): {
-    update: (newProps: any) => void;
-    dispose: () => void;
-};
-export declare class VueContentRenderer implements IContentRenderer {
-    private readonly component;
-    private _element;
-    private _renderDisposable;
-    get element(): HTMLElement;
-    constructor(component: ComponentInterface);
-    init(parameters: GroupPanelPartInitParameters): void;
-    update(event: PanelUpdateEvent<Parameters>): void;
-    focus(): void;
-    dispose(): void;
-}
-export declare class VueTabRenderer implements ITabRenderer {
-    private readonly component;
-    private _element;
-    private _renderDisposable;
-    get element(): HTMLElement;
-    constructor(component: ComponentInterface);
-    init(parameters: GroupPanelPartInitParameters): void;
-    update(event: PanelUpdateEvent<Parameters>): void;
-    dispose(): void;
-}
-export declare class VueWatermarkRenderer implements IWatermarkRenderer {
-    private readonly component;
-    private _element;
-    private _renderDisposable;
-    get element(): HTMLElement;
-    constructor(component: ComponentInterface);
-    init(parameters: WatermarkRendererInitParameters): void;
-    updateParentGroup(group: DockviewGroupPanel, visible: boolean): void;
-    update(event: PanelUpdateEvent<Parameters>): void;
-    dispose(): void;
-}

package/dist/cjs/utils.js

@@ -1,141 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VueWatermarkRenderer = exports.VueTabRenderer = exports.VueContentRenderer = exports.mountVueComponent = void 0;
-var vue_1 = require("vue");
-/**
- * TODO List
- *
- * 1. handle vue context-ish stuff (appContext? provides?)
- *
- *
- *
- * @see https://vuejs.org/api/render-function.html#clonevnode
- * @see https://vuejs.org/api/render-function.html#mergeprops
- */
-function mountVueComponent(component, props, element) {
-    var vNode = (0, vue_1.createVNode)(component, props);
-    (0, vue_1.render)(vNode, element);
-    return {
-        update: function (newProps) {
-            vNode = (0, vue_1.cloneVNode)(vNode, (0, vue_1.mergeProps)(props, newProps));
-            (0, vue_1.render)(vNode, element);
-        },
-        dispose: function () {
-            (0, vue_1.render)(null, element);
-        }
-    };
-}
-exports.mountVueComponent = mountVueComponent;
-var VueContentRenderer = /** @class */ (function () {
-    function VueContentRenderer(component) {
-        this.component = component;
-        this._element = document.createElement('div');
-        this.element.className = 'dv-vue-part';
-    }
-    Object.defineProperty(VueContentRenderer.prototype, "element", {
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    VueContentRenderer.prototype.init = function (parameters) {
-        var _a;
-        var props = {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi
-        };
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-        this._renderDisposable = mountVueComponent(this.component, props, this.element);
-    };
-    VueContentRenderer.prototype.update = function (event) {
-        var _a;
-        var params = event.params;
-        // TODO: handle prop updates somehow?
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.update(params);
-    };
-    VueContentRenderer.prototype.focus = function () {
-        //  TODO: make optional on interface
-    };
-    VueContentRenderer.prototype.dispose = function () {
-        var _a;
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    };
-    return VueContentRenderer;
-}());
-exports.VueContentRenderer = VueContentRenderer;
-var VueTabRenderer = /** @class */ (function () {
-    function VueTabRenderer(component) {
-        this.component = component;
-        this._element = document.createElement('div');
-        this.element.className = 'dv-vue-part';
-    }
-    Object.defineProperty(VueTabRenderer.prototype, "element", {
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    VueTabRenderer.prototype.init = function (parameters) {
-        var _a;
-        var props = {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi
-        };
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-        this._renderDisposable = mountVueComponent(this.component, props, this.element);
-    };
-    VueTabRenderer.prototype.update = function (event) {
-        var _a;
-        var params = event.params;
-        // TODO: handle prop updates somehow?
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.update(params);
-    };
-    VueTabRenderer.prototype.dispose = function () {
-        var _a;
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    };
-    return VueTabRenderer;
-}());
-exports.VueTabRenderer = VueTabRenderer;
-var VueWatermarkRenderer = /** @class */ (function () {
-    function VueWatermarkRenderer(component) {
-        this.component = component;
-        this._element = document.createElement('div');
-        this.element.className = 'dv-vue-part';
-    }
-    Object.defineProperty(VueWatermarkRenderer.prototype, "element", {
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    VueWatermarkRenderer.prototype.init = function (parameters) {
-        var _a;
-        var props = {
-            group: parameters.group,
-            containerApi: parameters.containerApi
-        };
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-        this._renderDisposable = mountVueComponent(this.component, props, this.element);
-    };
-    VueWatermarkRenderer.prototype.updateParentGroup = function (group, visible) {
-        // TODO: make optional on interface
-    };
-    VueWatermarkRenderer.prototype.update = function (event) {
-        var _a;
-        var params = event.params;
-        // TODO: handle prop updates somehow?
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.update(params);
-    };
-    VueWatermarkRenderer.prototype.dispose = function () {
-        var _a;
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    };
-    return VueWatermarkRenderer;
-}());
-exports.VueWatermarkRenderer = VueWatermarkRenderer;

package/dist/esm/utils.d.ts

@@ -1,49 +0,0 @@
-import type { DockviewGroupPanel, GroupPanelPartInitParameters, IContentRenderer, ITabRenderer, IWatermarkRenderer, PanelUpdateEvent, Parameters, WatermarkRendererInitParameters } from 'dockview-core';
-import { type ComponentOptionsBase } from 'vue';
-export type ComponentInterface = ComponentOptionsBase<any, any, any, any, any, any, any, any>;
-/**
- * TODO List
- *
- * 1. handle vue context-ish stuff (appContext? provides?)
- *
- *
- *
- * @see https://vuejs.org/api/render-function.html#clonevnode
- * @see https://vuejs.org/api/render-function.html#mergeprops
- */
-export declare function mountVueComponent(component: ComponentInterface, props: any, element: HTMLElement): {
-    update: (newProps: any) => void;
-    dispose: () => void;
-};
-export declare class VueContentRenderer implements IContentRenderer {
-    private readonly component;
-    private _element;
-    private _renderDisposable;
-    get element(): HTMLElement;
-    constructor(component: ComponentInterface);
-    init(parameters: GroupPanelPartInitParameters): void;
-    update(event: PanelUpdateEvent<Parameters>): void;
-    focus(): void;
-    dispose(): void;
-}
-export declare class VueTabRenderer implements ITabRenderer {
-    private readonly component;
-    private _element;
-    private _renderDisposable;
-    get element(): HTMLElement;
-    constructor(component: ComponentInterface);
-    init(parameters: GroupPanelPartInitParameters): void;
-    update(event: PanelUpdateEvent<Parameters>): void;
-    dispose(): void;
-}
-export declare class VueWatermarkRenderer implements IWatermarkRenderer {
-    private readonly component;
-    private _element;
-    private _renderDisposable;
-    get element(): HTMLElement;
-    constructor(component: ComponentInterface);
-    init(parameters: WatermarkRendererInitParameters): void;
-    updateParentGroup(group: DockviewGroupPanel, visible: boolean): void;
-    update(event: PanelUpdateEvent<Parameters>): void;
-    dispose(): void;
-}

package/dist/esm/utils.js

@@ -1,119 +0,0 @@
-import { createVNode, render, cloneVNode, mergeProps } from 'vue';
-/**
- * TODO List
- *
- * 1. handle vue context-ish stuff (appContext? provides?)
- *
- *
- *
- * @see https://vuejs.org/api/render-function.html#clonevnode
- * @see https://vuejs.org/api/render-function.html#mergeprops
- */
-export function mountVueComponent(component, props, element) {
-    let vNode = createVNode(component, props);
-    render(vNode, element);
-    return {
-        update: (newProps) => {
-            vNode = cloneVNode(vNode, mergeProps(props, newProps));
-            render(vNode, element);
-        },
-        dispose: () => {
-            render(null, element);
-        }
-    };
-}
-export class VueContentRenderer {
-    get element() {
-        return this._element;
-    }
-    constructor(component) {
-        this.component = component;
-        this._element = document.createElement('div');
-        this.element.className = 'dv-vue-part';
-    }
-    init(parameters) {
-        var _a;
-        const props = {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi
-        };
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-        this._renderDisposable = mountVueComponent(this.component, props, this.element);
-    }
-    update(event) {
-        var _a;
-        const params = event.params;
-        // TODO: handle prop updates somehow?
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.update(params);
-    }
-    focus() {
-        //  TODO: make optional on interface
-    }
-    dispose() {
-        var _a;
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
-export class VueTabRenderer {
-    get element() {
-        return this._element;
-    }
-    constructor(component) {
-        this.component = component;
-        this._element = document.createElement('div');
-        this.element.className = 'dv-vue-part';
-    }
-    init(parameters) {
-        var _a;
-        const props = {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi
-        };
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-        this._renderDisposable = mountVueComponent(this.component, props, this.element);
-    }
-    update(event) {
-        var _a;
-        const params = event.params;
-        // TODO: handle prop updates somehow?
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.update(params);
-    }
-    dispose() {
-        var _a;
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
-export class VueWatermarkRenderer {
-    get element() {
-        return this._element;
-    }
-    constructor(component) {
-        this.component = component;
-        this._element = document.createElement('div');
-        this.element.className = 'dv-vue-part';
-    }
-    init(parameters) {
-        var _a;
-        const props = {
-            group: parameters.group,
-            containerApi: parameters.containerApi
-        };
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-        this._renderDisposable = mountVueComponent(this.component, props, this.element);
-    }
-    updateParentGroup(group, visible) {
-        // TODO: make optional on interface
-    }
-    update(event) {
-        var _a;
-        const params = event.params;
-        // TODO: handle prop updates somehow?
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.update(params);
-    }
-    dispose() {
-        var _a;
-        (_a = this._renderDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}