dockview-vue 6.2.1 → 6.3.0

package/dist/dockview-vue.cjs.js

@@ -225,6 +225,32 @@ class VueTabGroupChipRenderer extends AbstractVueRenderer {
     this._renderDisposable?.dispose();
   }
 }
+class VueGroupDragGhostRenderer extends AbstractVueRenderer {
+  _renderDisposable;
+  constructor(component, parent) {
+    super(component, parent);
+    this.element.style.height = "";
+    this.element.style.width = "";
+    this.element.style.display = "inline-flex";
+  }
+  init(params) {
+    this._renderDisposable?.dispose();
+    this._renderDisposable = mountVueComponent(
+      this.component,
+      this.parent,
+      {
+        params: {
+          group: params.group,
+          api: params.api
+        }
+      },
+      this.element
+    );
+  }
+  dispose() {
+    this._renderDisposable?.dispose();
+  }
+}
 class VuePart {
   constructor(element, vueComponent, parent, props) {
     this.element = element;
@@ -263,6 +289,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     disableFloatingGroups: { type: Boolean },
     floatingGroupBounds: {},
     popoutUrl: {},
+    nonce: { type: [String, Function] },
     defaultRenderer: {},
     defaultHeaderPosition: {},
     debug: { type: Boolean },
@@ -278,6 +305,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     getTabContextMenuItems: { type: Function },
     getTabGroupChipContextMenuItems: { type: Function },
     createTabGroupChipComponent: { type: Function },
+    createGroupDragGhostComponent: { type: Function },
     tabGroupColors: {},
     tabGroupAccent: {},
     watermarkComponent: {},
@@ -285,7 +313,8 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     rightHeaderActionsComponent: {},
     leftHeaderActionsComponent: {},
     prefixHeaderActionsComponent: {},
-    tabGroupChipComponent: {}
+    tabGroupChipComponent: {},
+    groupDragGhostComponent: {}
   },
   emits: ["ready", "didDrop", "willDrop"],
   setup(__props, { emit: __emit }) {
@@ -325,6 +354,22 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         }
       }
     );
+    vue.watch(
+      () => props.groupDragGhostComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createGroupDragGhostComponent: newValue ? () => {
+              const component = findComponent(inst, newValue);
+              return new VueGroupDragGhostRenderer(
+                component,
+                inst
+              );
+            } : void 0
+          });
+        }
+      }
+    );
     vue.watch(
       () => props.defaultTabComponent,
       (newValue) => {
@@ -478,6 +523,13 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           return new VueTabGroupChipRenderer(component, inst);
         };
       }
+      if (props.groupDragGhostComponent) {
+        const ghostComponentName = props.groupDragGhostComponent;
+        coreOptions.createGroupDragGhostComponent = () => {
+          const component = findComponent(inst, ghostComponentName);
+          return new VueGroupDragGhostRenderer(component, inst);
+        };
+      }
       const api = dockviewCore.createDockview(el.value, {
         ...coreOptions,
         ...frameworkOptions
@@ -796,6 +848,7 @@ exports.GridviewVue = _sfc_main$1;
 exports.PaneviewVue = _sfc_main;
 exports.SplitviewVue = _sfc_main$2;
 exports.VueContextMenuItemRenderer = VueContextMenuItemRenderer;
+exports.VueGroupDragGhostRenderer = VueGroupDragGhostRenderer;
 exports.VueHeaderActionsRenderer = VueHeaderActionsRenderer;
 exports.VuePart = VuePart;
 exports.VueRenderer = VueRenderer;

package/dist/dockview-vue.es.js

@@ -224,6 +224,32 @@ class VueTabGroupChipRenderer extends AbstractVueRenderer {
     this._renderDisposable?.dispose();
   }
 }
+class VueGroupDragGhostRenderer extends AbstractVueRenderer {
+  _renderDisposable;
+  constructor(component, parent) {
+    super(component, parent);
+    this.element.style.height = "";
+    this.element.style.width = "";
+    this.element.style.display = "inline-flex";
+  }
+  init(params) {
+    this._renderDisposable?.dispose();
+    this._renderDisposable = mountVueComponent(
+      this.component,
+      this.parent,
+      {
+        params: {
+          group: params.group,
+          api: params.api
+        }
+      },
+      this.element
+    );
+  }
+  dispose() {
+    this._renderDisposable?.dispose();
+  }
+}
 class VuePart {
   constructor(element, vueComponent, parent, props) {
     this.element = element;
@@ -262,6 +288,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     disableFloatingGroups: { type: Boolean },
     floatingGroupBounds: {},
     popoutUrl: {},
+    nonce: { type: [String, Function] },
     defaultRenderer: {},
     defaultHeaderPosition: {},
     debug: { type: Boolean },
@@ -277,6 +304,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     getTabContextMenuItems: { type: Function },
     getTabGroupChipContextMenuItems: { type: Function },
     createTabGroupChipComponent: { type: Function },
+    createGroupDragGhostComponent: { type: Function },
     tabGroupColors: {},
     tabGroupAccent: {},
     watermarkComponent: {},
@@ -284,7 +312,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     rightHeaderActionsComponent: {},
     leftHeaderActionsComponent: {},
     prefixHeaderActionsComponent: {},
-    tabGroupChipComponent: {}
+    tabGroupChipComponent: {},
+    groupDragGhostComponent: {}
   },
   emits: ["ready", "didDrop", "willDrop"],
   setup(__props, { emit: __emit }) {
@@ -324,6 +353,22 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         }
       }
     );
+    watch(
+      () => props.groupDragGhostComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createGroupDragGhostComponent: newValue ? () => {
+              const component = findComponent(inst, newValue);
+              return new VueGroupDragGhostRenderer(
+                component,
+                inst
+              );
+            } : void 0
+          });
+        }
+      }
+    );
     watch(
       () => props.defaultTabComponent,
       (newValue) => {
@@ -477,6 +522,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           return new VueTabGroupChipRenderer(component, inst);
         };
       }
+      if (props.groupDragGhostComponent) {
+        const ghostComponentName = props.groupDragGhostComponent;
+        coreOptions.createGroupDragGhostComponent = () => {
+          const component = findComponent(inst, ghostComponentName);
+          return new VueGroupDragGhostRenderer(component, inst);
+        };
+      }
       const api = createDockview(el.value, {
         ...coreOptions,
         ...frameworkOptions
@@ -796,6 +848,7 @@ export {
   _sfc_main as PaneviewVue,
   _sfc_main$2 as SplitviewVue,
   VueContextMenuItemRenderer,
+  VueGroupDragGhostRenderer,
   VueHeaderActionsRenderer,
   VuePart,
   VueRenderer,

package/dist/dockview-vue.umd.js

@@ -225,6 +225,32 @@
       this._renderDisposable?.dispose();
     }
   }
+  class VueGroupDragGhostRenderer extends AbstractVueRenderer {
+    _renderDisposable;
+    constructor(component, parent) {
+      super(component, parent);
+      this.element.style.height = "";
+      this.element.style.width = "";
+      this.element.style.display = "inline-flex";
+    }
+    init(params) {
+      this._renderDisposable?.dispose();
+      this._renderDisposable = mountVueComponent(
+        this.component,
+        this.parent,
+        {
+          params: {
+            group: params.group,
+            api: params.api
+          }
+        },
+        this.element
+      );
+    }
+    dispose() {
+      this._renderDisposable?.dispose();
+    }
+  }
   class VuePart {
     constructor(element, vueComponent, parent, props) {
       this.element = element;
@@ -263,6 +289,7 @@
       disableFloatingGroups: { type: Boolean },
       floatingGroupBounds: {},
       popoutUrl: {},
+      nonce: { type: [String, Function] },
       defaultRenderer: {},
       defaultHeaderPosition: {},
       debug: { type: Boolean },
@@ -278,6 +305,7 @@
       getTabContextMenuItems: { type: Function },
       getTabGroupChipContextMenuItems: { type: Function },
       createTabGroupChipComponent: { type: Function },
+      createGroupDragGhostComponent: { type: Function },
       tabGroupColors: {},
       tabGroupAccent: {},
       watermarkComponent: {},
@@ -285,7 +313,8 @@
       rightHeaderActionsComponent: {},
       leftHeaderActionsComponent: {},
       prefixHeaderActionsComponent: {},
-      tabGroupChipComponent: {}
+      tabGroupChipComponent: {},
+      groupDragGhostComponent: {}
     },
     emits: ["ready", "didDrop", "willDrop"],
     setup(__props, { emit: __emit }) {
@@ -325,6 +354,22 @@
           }
         }
       );
+      vue.watch(
+        () => props.groupDragGhostComponent,
+        (newValue) => {
+          if (instance.value) {
+            instance.value.updateOptions({
+              createGroupDragGhostComponent: newValue ? () => {
+                const component = findComponent(inst, newValue);
+                return new VueGroupDragGhostRenderer(
+                  component,
+                  inst
+                );
+              } : void 0
+            });
+          }
+        }
+      );
       vue.watch(
         () => props.defaultTabComponent,
         (newValue) => {
@@ -478,6 +523,13 @@
             return new VueTabGroupChipRenderer(component, inst);
           };
         }
+        if (props.groupDragGhostComponent) {
+          const ghostComponentName = props.groupDragGhostComponent;
+          coreOptions.createGroupDragGhostComponent = () => {
+            const component = findComponent(inst, ghostComponentName);
+            return new VueGroupDragGhostRenderer(component, inst);
+          };
+        }
         const api = dockviewCore.createDockview(el.value, {
           ...coreOptions,
           ...frameworkOptions
@@ -796,6 +848,7 @@
   exports2.PaneviewVue = _sfc_main;
   exports2.SplitviewVue = _sfc_main$2;
   exports2.VueContextMenuItemRenderer = VueContextMenuItemRenderer;
+  exports2.VueGroupDragGhostRenderer = VueGroupDragGhostRenderer;
   exports2.VueHeaderActionsRenderer = VueHeaderActionsRenderer;
   exports2.VuePart = VuePart;
   exports2.VueRenderer = VueRenderer;

package/dist/types/dockview/types.d.ts

@@ -6,6 +6,7 @@ export interface VueProps {
     leftHeaderActionsComponent?: string;
     prefixHeaderActionsComponent?: string;
     tabGroupChipComponent?: string;
+    groupDragGhostComponent?: string;
 }
 export type VueEvents = {
     ready: [event: DockviewReadyEvent];

package/dist/types/utils.d.ts

@@ -1,4 +1,4 @@
-import type { DockviewApi, DockviewGroupPanel, IContentRenderer, IGroupHeaderProps, IHeaderActionsRenderer, ITabGroupChipRenderer, ITabGroup, ITabRenderer, IWatermarkRenderer, IContextMenuItemRenderer, IContextMenuItemComponentProps, PanelUpdateEvent, Parameters, TabPartInitParameters, WatermarkRendererInitParameters } from 'dockview-core';
+import type { DockviewApi, DockviewGroupPanel, IContentRenderer, IDockviewGroupPanel, IGroupDragGhostRenderer, IGroupHeaderProps, IHeaderActionsRenderer, ITabGroupChipRenderer, ITabGroup, ITabRenderer, IWatermarkRenderer, IContextMenuItemRenderer, IContextMenuItemComponentProps, PanelUpdateEvent, Parameters, TabPartInitParameters, WatermarkRendererInitParameters } from 'dockview-core';
 import { type ComponentOptionsBase, type DefineComponent, type ComponentInternalInstance } from 'vue';
 export type ComponentInterface = ComponentOptionsBase<any, any, any, any, any, any, any, any>;
 export type VueComponent<T = any> = DefineComponent<T>;
@@ -64,6 +64,15 @@ export declare class VueTabGroupChipRenderer extends AbstractVueRenderer impleme
     }): void;
     dispose(): void;
 }
+export declare class VueGroupDragGhostRenderer extends AbstractVueRenderer implements IGroupDragGhostRenderer {
+    private _renderDisposable;
+    constructor(component: VueComponent, parent: ComponentInternalInstance);
+    init(params: {
+        group: IDockviewGroupPanel;
+        api: DockviewApi;
+    }): void;
+    dispose(): void;
+}
 export declare class VuePart<T extends Record<string, any> = any> {
     private readonly element;
     private readonly vueComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockview-vue",
-    "version": "6.2.1",
+    "version": "6.3.0",
     "description": "Vue 3 docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels",
     "keywords": [
         "splitview",
@@ -67,7 +67,7 @@
         "format:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx,vue}'"
     },
     "dependencies": {
-        "dockview-core": "^6.2.1"
+        "dockview-core": "^6.3.0"
     },
     "peerDependencies": {
         "vue": "^3.4.0"