dockview-vue - npm Package Compare versions

Comparing version 0.0.0-experimental-07d67b2-20240511 to 0.0.0-experimental-8015860-20241009

dist/dockview-vue.cjs.js

@@ -43,8 +43,5 @@ "use strict";
 }
-class VueRenderer {
+class AbstractVueRenderer {
   constructor(component, parent) {
     __publicField(this, "_element");
-    __publicField(this, "_renderDisposable");
-    __publicField(this, "_api");
-    __publicField(this, "_containerApi");
     this.component = component;
@@ -60,2 +57,10 @@ this.parent = parent;
   }
+}
+class VueRenderer extends AbstractVueRenderer {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "_renderDisposable");
+    __publicField(this, "_api");
+    __publicField(this, "_containerApi");
+  }
   init(parameters) {
@@ -97,12 +102,6 @@ var _a;
 }
-class VueWatermarkRenderer {
-  constructor(component, parent) {
-    __publicField(this, "_element");
+class VueWatermarkRenderer extends AbstractVueRenderer {
+  constructor() {
+    super(...arguments);
     __publicField(this, "_renderDisposable");
-    this.component = component;
-    this.parent = parent;
-    this._element = document.createElement("div");
-    this.element.className = "dv-vue-part";
-    this.element.style.height = "100%";
-    this.element.style.width = "100%";
   }
@@ -126,4 +125,2 @@ get element() {
   }
-  updateParentGroup(group, visible) {
-  }
   update(event) {
@@ -136,12 +133,6 @@ }
 }
-class VueHeaderActionsRenderer {
+class VueHeaderActionsRenderer extends AbstractVueRenderer {
   constructor(component, parent, group) {
-    __publicField(this, "_element");
+    super(component, parent);
     __publicField(this, "_renderDisposable");
-    this.component = component;
-    this.parent = parent;
-    this._element = document.createElement("div");
-    this.element.className = "dv-vue-header-action-part";
-    this._element.style.width = "100%";
-    this._element.style.height = "100%";
   }
@@ -180,2 +171,4 @@ get element() {
     disableDnd: { type: Boolean },
+    className: {},
+    gap: {},
     watermarkComponent: {},
@@ -215,18 +208,21 @@ defaultTabComponent: {},
       if (!el.value) {
-        throw new Error("element is not mounted");
+        throw new Error("dockview-vue: element is not mounted");
       }
+      const inst = vue.getCurrentInstance();
+      if (!inst) {
+        throw new Error("dockview-vue: getCurrentInstance() returned null");
+      }
       const frameworkOptions = {
-        parentElement: el.value,
         createComponent(options) {
           const component = findComponent(
-            vue.getCurrentInstance(),
+            inst,
             options.name
           );
-          return new VueRenderer(component, vue.getCurrentInstance());
+          return new VueRenderer(component, inst);
         },
         createTabComponent(options) {
-          let component = findComponent(vue.getCurrentInstance(), options.name);
+          let component = findComponent(inst, options.name);
           if (!component && props.defaultTabComponent) {
             component = findComponent(
-              vue.getCurrentInstance(),
+              inst,
               props.defaultTabComponent
@@ -236,3 +232,3 @@ );
           if (component) {
-            return new VueRenderer(component, vue.getCurrentInstance());
+            return new VueRenderer(component, inst);
           }
@@ -243,3 +239,3 @@ return void 0;
           const component = findComponent(
-            vue.getCurrentInstance(),
+            inst,
             props.watermarkComponent
@@ -249,3 +245,3 @@ );
             component,
-            vue.getCurrentInstance()
+            inst
           );
@@ -255,3 +251,3 @@ } : void 0,
           const component = findComponent(
-            vue.getCurrentInstance(),
+            inst,
             props.leftHeaderActionsComponent
@@ -261,3 +257,3 @@ );
             component,
-            vue.getCurrentInstance(),
+            inst,
             group
@@ -268,3 +264,3 @@ );
           const component = findComponent(
-            vue.getCurrentInstance(),
+            inst,
             props.prefixHeaderActionsComponent
@@ -274,3 +270,3 @@ );
             component,
-            vue.getCurrentInstance(),
+            inst,
             group
@@ -281,3 +277,3 @@ );
           const component = findComponent(
-            vue.getCurrentInstance(),
+            inst,
             props.rightHeaderActionsComponent
@@ -287,3 +283,3 @@ );
             component,
-            vue.getCurrentInstance(),
+            inst,
             group
@@ -293,3 +289,3 @@ );
       };
-      const dockview = new dockviewCore.DockviewComponent({
+      const api = dockviewCore.createDockview(el.value, {
         ...extractCoreOptions(props),
@@ -299,5 +295,5 @@ ...frameworkOptions
       const { clientWidth, clientHeight } = el.value;
-      dockview.layout(clientWidth, clientHeight);
-      instance.value = vue.markRaw(dockview);
-      emit("ready", { api: new dockviewCore.DockviewApi(dockview) });
+      api.layout(clientWidth, clientHeight);
+      instance.value = vue.markRaw(api);
+      emit("ready", { api });
     });
@@ -304,0 +300,0 @@ vue.onBeforeUnmount(() => {

dist/dockview-vue.es.js

@@ -7,3 +7,3 @@ var __defProp = Object.defineProperty;
 };
-import { PROPERTY_KEYS, DockviewComponent, DockviewApi } from "dockview-core";
+import { PROPERTY_KEYS, createDockview } from "dockview-core";
 export * from "dockview-core";
@@ -43,8 +43,5 @@ import { createVNode, render, cloneVNode, defineComponent, ref, watch, onMounted, getCurrentInstance, markRaw, onBeforeUnmount, openBlock, createElementBlock } from "vue";
 }
-class VueRenderer {
+class AbstractVueRenderer {
   constructor(component, parent) {
     __publicField(this, "_element");
-    __publicField(this, "_renderDisposable");
-    __publicField(this, "_api");
-    __publicField(this, "_containerApi");
     this.component = component;
@@ -60,2 +57,10 @@ this.parent = parent;
   }
+}
+class VueRenderer extends AbstractVueRenderer {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "_renderDisposable");
+    __publicField(this, "_api");
+    __publicField(this, "_containerApi");
+  }
   init(parameters) {
@@ -97,12 +102,6 @@ var _a;
 }
-class VueWatermarkRenderer {
-  constructor(component, parent) {
-    __publicField(this, "_element");
+class VueWatermarkRenderer extends AbstractVueRenderer {
+  constructor() {
+    super(...arguments);
     __publicField(this, "_renderDisposable");
-    this.component = component;
-    this.parent = parent;
-    this._element = document.createElement("div");
-    this.element.className = "dv-vue-part";
-    this.element.style.height = "100%";
-    this.element.style.width = "100%";
   }
@@ -126,4 +125,2 @@ get element() {
   }
-  updateParentGroup(group, visible) {
-  }
   update(event) {
@@ -136,12 +133,6 @@ }
 }
-class VueHeaderActionsRenderer {
+class VueHeaderActionsRenderer extends AbstractVueRenderer {
   constructor(component, parent, group) {
-    __publicField(this, "_element");
+    super(component, parent);
     __publicField(this, "_renderDisposable");
-    this.component = component;
-    this.parent = parent;
-    this._element = document.createElement("div");
-    this.element.className = "dv-vue-header-action-part";
-    this._element.style.width = "100%";
-    this._element.style.height = "100%";
   }
@@ -180,2 +171,4 @@ get element() {
     disableDnd: { type: Boolean },
+    className: {},
+    gap: {},
     watermarkComponent: {},
@@ -215,18 +208,21 @@ defaultTabComponent: {},
       if (!el.value) {
-        throw new Error("element is not mounted");
+        throw new Error("dockview-vue: element is not mounted");
       }
+      const inst = getCurrentInstance();
+      if (!inst) {
+        throw new Error("dockview-vue: getCurrentInstance() returned null");
+      }
       const frameworkOptions = {
-        parentElement: el.value,
         createComponent(options) {
           const component = findComponent(
-            getCurrentInstance(),
+            inst,
             options.name
           );
-          return new VueRenderer(component, getCurrentInstance());
+          return new VueRenderer(component, inst);
         },
         createTabComponent(options) {
-          let component = findComponent(getCurrentInstance(), options.name);
+          let component = findComponent(inst, options.name);
           if (!component && props.defaultTabComponent) {
             component = findComponent(
-              getCurrentInstance(),
+              inst,
               props.defaultTabComponent
@@ -236,3 +232,3 @@ );
           if (component) {
-            return new VueRenderer(component, getCurrentInstance());
+            return new VueRenderer(component, inst);
           }
@@ -243,3 +239,3 @@ return void 0;
           const component = findComponent(
-            getCurrentInstance(),
+            inst,
             props.watermarkComponent
@@ -249,3 +245,3 @@ );
             component,
-            getCurrentInstance()
+            inst
           );
@@ -255,3 +251,3 @@ } : void 0,
           const component = findComponent(
-            getCurrentInstance(),
+            inst,
             props.leftHeaderActionsComponent
@@ -261,3 +257,3 @@ );
             component,
-            getCurrentInstance(),
+            inst,
             group
@@ -268,3 +264,3 @@ );
           const component = findComponent(
-            getCurrentInstance(),
+            inst,
             props.prefixHeaderActionsComponent
@@ -274,3 +270,3 @@ );
             component,
-            getCurrentInstance(),
+            inst,
             group
@@ -281,3 +277,3 @@ );
           const component = findComponent(
-            getCurrentInstance(),
+            inst,
             props.rightHeaderActionsComponent
@@ -287,3 +283,3 @@ );
             component,
-            getCurrentInstance(),
+            inst,
             group
@@ -293,3 +289,3 @@ );
       };
-      const dockview = new DockviewComponent({
+      const api = createDockview(el.value, {
         ...extractCoreOptions(props),
@@ -299,5 +295,5 @@ ...frameworkOptions
       const { clientWidth, clientHeight } = el.value;
-      dockview.layout(clientWidth, clientHeight);
-      instance.value = markRaw(dockview);
-      emit("ready", { api: new DockviewApi(dockview) });
+      api.layout(clientWidth, clientHeight);
+      instance.value = markRaw(api);
+      emit("ready", { api });
     });
@@ -304,0 +300,0 @@ onBeforeUnmount(() => {

dist/dockview-vue.umd.js

@@ -43,8 +43,5 @@ (function(global, factory) {
   }
-  class VueRenderer {
+  class AbstractVueRenderer {
     constructor(component, parent) {
       __publicField(this, "_element");
-      __publicField(this, "_renderDisposable");
-      __publicField(this, "_api");
-      __publicField(this, "_containerApi");
       this.component = component;
@@ -60,2 +57,10 @@ this.parent = parent;
     }
+  }
+  class VueRenderer extends AbstractVueRenderer {
+    constructor() {
+      super(...arguments);
+      __publicField(this, "_renderDisposable");
+      __publicField(this, "_api");
+      __publicField(this, "_containerApi");
+    }
     init(parameters) {
@@ -97,12 +102,6 @@ var _a;
   }
-  class VueWatermarkRenderer {
-    constructor(component, parent) {
-      __publicField(this, "_element");
+  class VueWatermarkRenderer extends AbstractVueRenderer {
+    constructor() {
+      super(...arguments);
       __publicField(this, "_renderDisposable");
-      this.component = component;
-      this.parent = parent;
-      this._element = document.createElement("div");
-      this.element.className = "dv-vue-part";
-      this.element.style.height = "100%";
-      this.element.style.width = "100%";
     }
@@ -126,4 +125,2 @@ get element() {
     }
-    updateParentGroup(group, visible) {
-    }
     update(event) {
@@ -136,12 +133,6 @@ }
   }
-  class VueHeaderActionsRenderer {
+  class VueHeaderActionsRenderer extends AbstractVueRenderer {
     constructor(component, parent, group) {
-      __publicField(this, "_element");
+      super(component, parent);
       __publicField(this, "_renderDisposable");
-      this.component = component;
-      this.parent = parent;
-      this._element = document.createElement("div");
-      this.element.className = "dv-vue-header-action-part";
-      this._element.style.width = "100%";
-      this._element.style.height = "100%";
     }
@@ -180,2 +171,4 @@ get element() {
       disableDnd: { type: Boolean },
+      className: {},
+      gap: {},
       watermarkComponent: {},
@@ -215,18 +208,21 @@ defaultTabComponent: {},
         if (!el.value) {
-          throw new Error("element is not mounted");
+          throw new Error("dockview-vue: element is not mounted");
         }
+        const inst = vue.getCurrentInstance();
+        if (!inst) {
+          throw new Error("dockview-vue: getCurrentInstance() returned null");
+        }
         const frameworkOptions = {
-          parentElement: el.value,
           createComponent(options) {
             const component = findComponent(
-              vue.getCurrentInstance(),
+              inst,
               options.name
             );
-            return new VueRenderer(component, vue.getCurrentInstance());
+            return new VueRenderer(component, inst);
           },
           createTabComponent(options) {
-            let component = findComponent(vue.getCurrentInstance(), options.name);
+            let component = findComponent(inst, options.name);
             if (!component && props.defaultTabComponent) {
               component = findComponent(
-                vue.getCurrentInstance(),
+                inst,
                 props.defaultTabComponent
@@ -236,3 +232,3 @@ );
             if (component) {
-              return new VueRenderer(component, vue.getCurrentInstance());
+              return new VueRenderer(component, inst);
             }
@@ -243,3 +239,3 @@ return void 0;
             const component = findComponent(
-              vue.getCurrentInstance(),
+              inst,
               props.watermarkComponent
@@ -249,3 +245,3 @@ );
               component,
-              vue.getCurrentInstance()
+              inst
             );
@@ -255,3 +251,3 @@ } : void 0,
             const component = findComponent(
-              vue.getCurrentInstance(),
+              inst,
               props.leftHeaderActionsComponent
@@ -261,3 +257,3 @@ );
               component,
-              vue.getCurrentInstance(),
+              inst,
               group
@@ -268,3 +264,3 @@ );
             const component = findComponent(
-              vue.getCurrentInstance(),
+              inst,
               props.prefixHeaderActionsComponent
@@ -274,3 +270,3 @@ );
               component,
-              vue.getCurrentInstance(),
+              inst,
               group
@@ -281,3 +277,3 @@ );
             const component = findComponent(
-              vue.getCurrentInstance(),
+              inst,
               props.rightHeaderActionsComponent
@@ -287,3 +283,3 @@ );
               component,
-              vue.getCurrentInstance(),
+              inst,
               group
@@ -293,3 +289,3 @@ );
         };
-        const dockview = new dockviewCore.DockviewComponent({
+        const api = dockviewCore.createDockview(el.value, {
           ...extractCoreOptions(props),
@@ -299,5 +295,5 @@ ...frameworkOptions
         const { clientWidth, clientHeight } = el.value;
-        dockview.layout(clientWidth, clientHeight);
-        instance.value = vue.markRaw(dockview);
-        emit("ready", { api: new dockviewCore.DockviewApi(dockview) });
+        api.layout(clientWidth, clientHeight);
+        instance.value = vue.markRaw(api);
+        emit("ready", { api });
       });
@@ -304,0 +300,0 @@ vue.onBeforeUnmount(() => {

dist/types/dockview/dockview.vue.d.ts

@@ -1,14 +0,6 @@
-import { type DockviewOptions, type DockviewReadyEvent } from 'dockview-core';
-interface VueProps {
-    watermarkComponent?: string;
-    defaultTabComponent?: string;
-    rightHeaderActionsComponent?: string;
-    leftHeaderActionsComponent?: string;
-    prefixHeaderActionsComponent?: string;
-}
-export type IDockviewVueProps = DockviewOptions & VueProps;
+import type { IDockviewVueProps } from './types';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<IDockviewVueProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    ready: (event: DockviewReadyEvent) => void;
+    ready: (event: import("dockview-core").DockviewReadyEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<IDockviewVueProps>>> & {
-    onReady?: (event: DockviewReadyEvent) => any;
+    onReady?: (event: import("dockview-core").DockviewReadyEvent) => any;
 }, {}, {}>;
@@ -15,0 +7,0 @@ export default _default;

dist/types/index.d.ts

@@ -5,1 +5,2 @@ export * from 'dockview-core';
 export * from './dockview/dockview.vue';
+export * from './dockview/types';

dist/types/utils.d.ts

@@ -7,8 +7,2 @@ import type { DockviewGroupPanel, GroupPanelPartInitParameters, IContentRenderer, IGroupHeaderProps, IHeaderActionsRenderer, ITabRenderer, IWatermarkRenderer, PanelUpdateEvent, Parameters, WatermarkRendererInitParameters } from 'dockview-core';
 /**
- * TODO List
- *
- * 1. handle vue context-ish stuff (appContext? provides?)
- *
- *
- *
  * @see https://vuejs.org/api/render-function.html#clonevnode
@@ -21,11 +15,13 @@ * @see https://vuejs.org/api/render-function.html#mergeprops
 };
-export declare class VueRenderer implements ITabRenderer, IContentRenderer {
-    private readonly component;
-    private readonly parent;
-    private _element;
+declare abstract class AbstractVueRenderer {
+    protected readonly component: VueComponent;
+    protected readonly parent: ComponentInternalInstance;
+    protected readonly _element: HTMLElement;
+    get element(): HTMLElement;
+    constructor(component: VueComponent, parent: ComponentInternalInstance);
+}
+export declare class VueRenderer extends AbstractVueRenderer implements ITabRenderer, IContentRenderer {
     private _renderDisposable;
     private _api;
     private _containerApi;
-    get element(): HTMLElement;
-    constructor(component: VueComponent, parent: ComponentInternalInstance);
     init(parameters: GroupPanelPartInitParameters): void;
@@ -35,18 +31,10 @@ update(event: PanelUpdateEvent<Parameters>): void;
 }
-export declare class VueWatermarkRenderer implements IWatermarkRenderer {
-    private readonly component;
-    private readonly parent;
-    private _element;
+export declare class VueWatermarkRenderer extends AbstractVueRenderer implements IWatermarkRenderer {
     private _renderDisposable;
     get element(): HTMLElement;
-    constructor(component: VueComponent, parent: ComponentInternalInstance);
     init(parameters: WatermarkRendererInitParameters): void;
-    updateParentGroup(group: DockviewGroupPanel, visible: boolean): void;
     update(event: PanelUpdateEvent<Parameters>): void;
     dispose(): void;
 }
-export declare class VueHeaderActionsRenderer implements IHeaderActionsRenderer {
-    private readonly component;
-    private readonly parent;
-    private _element;
+export declare class VueHeaderActionsRenderer extends AbstractVueRenderer implements IHeaderActionsRenderer {
     private _renderDisposable;
@@ -58,1 +46,2 @@ get element(): HTMLElement;
 }
+export {};

package.json

 {
     "name": "dockview-vue",
-    "version": "0.0.0-experimental-07d67b2-20240511",
+    "version": "0.0.0-experimental-8015860-20241009",
     "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
@@ -46,3 +46,4 @@ "keywords": [
         "build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types",
-        "build": "npm run build:js && npm run build:types",
+        "build:css": "node scripts/copy-css.js",
+        "build": "npm run build:js && npm run build:types && npm run build:css",
         "clean": "rimraf dist/ .build/ .rollup.cache/",
@@ -55,4 +56,4 @@ "prepublishOnly": "npm run rebuild && npm run test",
     "dependencies": {
-        "dockview-core": "0.0.0-experimental-07d67b2-20240511"
+        "dockview-core": "0.0.0-experimental-8015860-20241009"
     }
 }

README.md

 <div align="center">
 <h1>dockview</h1>
 
-<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript</p>
+<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue and Vanilla TypeScript</p>
 
@@ -19,2 +19,4 @@ </div>
 
+![](packages/docs/static/img/splashscreen.gif)
+
 Please see the website: https://dockview.dev
@@ -38,21 +40,1 @@
 Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
-
-## Quick start
-
-Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview).
-
-```
-npm install --save dockview
-```
-
-Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme.
-
-```css
-@import '~dockview/dist/styles/dockview.css';
-```
-
-You should also attach a dockview theme to an element containing your components. For example:
-
-```html
-<body classname="dockview-theme-dark"></body>
-```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61068

increased by70.92%

Number of package files

10

increased by25%

Lines of code

1828

increased by83.53%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

39

decreased by-31.58%

Dependency changes

• + Addeddockview-core@0.0.0-experimental-8015860-20241009(transitive)

• - Removeddockview-core@0.0.0-experimental-07d67b2-20240511(transitive)

• Updateddockview-core@0.0.0-experimental-8015860-20241009