dockview-angular 0.0.0-beta-0 → 4.7.1

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,7 +1,7 @@
 {
   "name": "dockview-angular",
-  "version": "0.0.0-beta-0",
-  "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
+  "version": "4.7.1",
+  "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",
     "split-view",
@@ -20,8 +20,8 @@
     "drag-and-drop",
     "drag",
     "drop",
-    "react",
-    "react-component"
+    "angular",
+    "angular-component"
   ],
   "homepage": "https://github.com/mathuo/dockview",
   "bugs": {
@@ -41,19 +41,28 @@
     "README.md"
   ],
   "scripts": {
-    "build": "npm run build:package && npm run build:bundles",
-    "build:bundles": "rollup -c",
+    "build:bundle": "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",
+    "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 test",
+    "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",
-    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage"
+    "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": "^1.10.1"
+    "dockview-core": "^4.7.1"
+  },
+  "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();
-    }
-}