dockview-angular 0.0.0-beta-0

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from 'dockview-core';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from 'dockview-core';

package/dist/esm/utils.d.ts

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,119 @@
+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();
+    }
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "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"
+  }
+}