dockview-vue 5.0.0 → 5.2.0

package/dist/dockview-vue.cjs.js

@@ -136,6 +136,7 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
     super(component, parent);
     __publicField(this, "_renderDisposable");
     __publicField(this, "_mutableDisposable", new dockviewCore.DockviewMutableDisposable());
+    __publicField(this, "_baseProps");
     this.group = group;
   }
   get element() {
@@ -143,33 +144,26 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
   }
   init(props) {
     var _a;
+    this._baseProps = props;
     this._mutableDisposable.value = new dockviewCore.DockviewCompositeDisposable(
       this.group.model.onDidAddPanel(() => {
-        this.updatePanels();
+        this.updateProps();
       }),
       this.group.model.onDidRemovePanel(() => {
-        this.updatePanels();
+        this.updateProps();
       }),
       this.group.model.onDidActivePanelChange(() => {
-        this.updateActivePanel();
+        this.updateProps();
       }),
       props.api.onDidActiveChange(() => {
-        this.updateGroupActive();
+        this.updateProps();
       })
     );
-    const enrichedProps = {
-      ...props,
-      panels: this.group.model.panels,
-      activePanel: this.group.model.activePanel,
-      isGroupActive: this.group.api.isActive,
-      group: this.group,
-      headerPosition: this.group.model.headerPosition
-    };
     (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
     this._renderDisposable = mountVueComponent(
       this.component,
       this.parent,
-      { params: enrichedProps },
+      { params: this.buildEnrichedProps() },
       this.element
     );
   }
@@ -178,23 +172,19 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
     this._mutableDisposable.dispose();
     (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
   }
-  updatePanels() {
-    var _a;
-    (_a = this._renderDisposable) == null ? void 0 : _a.update({
-      params: { panels: this.group.model.panels }
-    });
-  }
-  updateActivePanel() {
-    var _a;
-    (_a = this._renderDisposable) == null ? void 0 : _a.update({
-      params: { activePanel: this.group.model.activePanel }
-    });
+  buildEnrichedProps() {
+    return {
+      ...this._baseProps,
+      panels: this.group.model.panels,
+      activePanel: this.group.model.activePanel,
+      isGroupActive: this.group.api.isActive,
+      group: this.group,
+      headerPosition: this.group.model.headerPosition
+    };
   }
-  updateGroupActive() {
+  updateProps() {
     var _a;
-    (_a = this._renderDisposable) == null ? void 0 : _a.update({
-      params: { isGroupActive: this.group.api.isActive }
-    });
+    (_a = this._renderDisposable) == null ? void 0 : _a.update({ params: this.buildEnrichedProps() });
   }
 }
 class VuePart {
@@ -246,6 +236,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     theme: {},
     disableTabsOverflowList: { type: Boolean },
     scrollbars: {},
+    tabAnimation: {},
     watermarkComponent: {},
     defaultTabComponent: {},
     rightHeaderActionsComponent: {},

package/dist/dockview-vue.es.js

@@ -135,6 +135,7 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
     super(component, parent);
     __publicField(this, "_renderDisposable");
     __publicField(this, "_mutableDisposable", new DockviewMutableDisposable());
+    __publicField(this, "_baseProps");
     this.group = group;
   }
   get element() {
@@ -142,33 +143,26 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
   }
   init(props) {
     var _a;
+    this._baseProps = props;
     this._mutableDisposable.value = new DockviewCompositeDisposable(
       this.group.model.onDidAddPanel(() => {
-        this.updatePanels();
+        this.updateProps();
       }),
       this.group.model.onDidRemovePanel(() => {
-        this.updatePanels();
+        this.updateProps();
       }),
       this.group.model.onDidActivePanelChange(() => {
-        this.updateActivePanel();
+        this.updateProps();
       }),
       props.api.onDidActiveChange(() => {
-        this.updateGroupActive();
+        this.updateProps();
       })
     );
-    const enrichedProps = {
-      ...props,
-      panels: this.group.model.panels,
-      activePanel: this.group.model.activePanel,
-      isGroupActive: this.group.api.isActive,
-      group: this.group,
-      headerPosition: this.group.model.headerPosition
-    };
     (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
     this._renderDisposable = mountVueComponent(
       this.component,
       this.parent,
-      { params: enrichedProps },
+      { params: this.buildEnrichedProps() },
       this.element
     );
   }
@@ -177,23 +171,19 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
     this._mutableDisposable.dispose();
     (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
   }
-  updatePanels() {
-    var _a;
-    (_a = this._renderDisposable) == null ? void 0 : _a.update({
-      params: { panels: this.group.model.panels }
-    });
-  }
-  updateActivePanel() {
-    var _a;
-    (_a = this._renderDisposable) == null ? void 0 : _a.update({
-      params: { activePanel: this.group.model.activePanel }
-    });
+  buildEnrichedProps() {
+    return {
+      ...this._baseProps,
+      panels: this.group.model.panels,
+      activePanel: this.group.model.activePanel,
+      isGroupActive: this.group.api.isActive,
+      group: this.group,
+      headerPosition: this.group.model.headerPosition
+    };
   }
-  updateGroupActive() {
+  updateProps() {
     var _a;
-    (_a = this._renderDisposable) == null ? void 0 : _a.update({
-      params: { isGroupActive: this.group.api.isActive }
-    });
+    (_a = this._renderDisposable) == null ? void 0 : _a.update({ params: this.buildEnrichedProps() });
   }
 }
 class VuePart {
@@ -245,6 +235,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     theme: {},
     disableTabsOverflowList: { type: Boolean },
     scrollbars: {},
+    tabAnimation: {},
     watermarkComponent: {},
     defaultTabComponent: {},
     rightHeaderActionsComponent: {},

package/dist/dockview-vue.umd.js

@@ -136,6 +136,7 @@ var __publicField = (obj, key, value) => {
       super(component, parent);
       __publicField(this, "_renderDisposable");
       __publicField(this, "_mutableDisposable", new dockviewCore.DockviewMutableDisposable());
+      __publicField(this, "_baseProps");
       this.group = group;
     }
     get element() {
@@ -143,33 +144,26 @@ var __publicField = (obj, key, value) => {
     }
     init(props) {
       var _a;
+      this._baseProps = props;
       this._mutableDisposable.value = new dockviewCore.DockviewCompositeDisposable(
         this.group.model.onDidAddPanel(() => {
-          this.updatePanels();
+          this.updateProps();
         }),
         this.group.model.onDidRemovePanel(() => {
-          this.updatePanels();
+          this.updateProps();
         }),
         this.group.model.onDidActivePanelChange(() => {
-          this.updateActivePanel();
+          this.updateProps();
         }),
         props.api.onDidActiveChange(() => {
-          this.updateGroupActive();
+          this.updateProps();
         })
       );
-      const enrichedProps = {
-        ...props,
-        panels: this.group.model.panels,
-        activePanel: this.group.model.activePanel,
-        isGroupActive: this.group.api.isActive,
-        group: this.group,
-        headerPosition: this.group.model.headerPosition
-      };
       (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
       this._renderDisposable = mountVueComponent(
         this.component,
         this.parent,
-        { params: enrichedProps },
+        { params: this.buildEnrichedProps() },
         this.element
       );
     }
@@ -178,23 +172,19 @@ var __publicField = (obj, key, value) => {
       this._mutableDisposable.dispose();
       (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
     }
-    updatePanels() {
-      var _a;
-      (_a = this._renderDisposable) == null ? void 0 : _a.update({
-        params: { panels: this.group.model.panels }
-      });
-    }
-    updateActivePanel() {
-      var _a;
-      (_a = this._renderDisposable) == null ? void 0 : _a.update({
-        params: { activePanel: this.group.model.activePanel }
-      });
+    buildEnrichedProps() {
+      return {
+        ...this._baseProps,
+        panels: this.group.model.panels,
+        activePanel: this.group.model.activePanel,
+        isGroupActive: this.group.api.isActive,
+        group: this.group,
+        headerPosition: this.group.model.headerPosition
+      };
     }
-    updateGroupActive() {
+    updateProps() {
       var _a;
-      (_a = this._renderDisposable) == null ? void 0 : _a.update({
-        params: { isGroupActive: this.group.api.isActive }
-      });
+      (_a = this._renderDisposable) == null ? void 0 : _a.update({ params: this.buildEnrichedProps() });
     }
   }
   class VuePart {
@@ -246,6 +236,7 @@ var __publicField = (obj, key, value) => {
       theme: {},
       disableTabsOverflowList: { type: Boolean },
       scrollbars: {},
+      tabAnimation: {},
       watermarkComponent: {},
       defaultTabComponent: {},
       rightHeaderActionsComponent: {},

package/dist/styles/dockview.css

@@ -611,7 +611,7 @@
   transform: translate3d(0, 0, 0);
   backface-visibility: hidden;
   contain: layout paint;
-  transition: opacity var(--dv-transition-duration) ease-in, transform var(--dv-transition-duration) ease-out;
+  transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out;
 }
 .dv-drop-target {
   position: relative;
@@ -1145,6 +1145,10 @@
 .dv-tabs-overflow-dropdown-default > svg {
   transform: rotate(90deg);
 }
+.dv-tabs-overflow-dropdown-default:hover {
+  border-radius: 2px;
+  background-color: var(--dv-icon-hover-background-color);
+}
 .dv-tabs-container {
   display: flex;
   height: 100%;
@@ -1203,7 +1207,26 @@
   font-size: var(--dv-tab-font-size);
   margin: var(--dv-tab-margin);
 }
+.dv-tab.dv-tab--shifting {
+  will-change: margin-left;
+  transition: transform var(--dv-transition-duration, 200ms) ease-out, margin-left var(--dv-transition-duration, 200ms) ease-out;
+}
+.dv-tab.dv-tab--dragging {
+  width: 0 !important;
+  min-width: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;
+}
 
+@media (prefers-reduced-motion: reduce) {
+  .dv-tab {
+    transition: none !important;
+  }
+}
 .dv-tabs-container-vertical .dv-tab {
   padding: 0.5rem 0.25rem;
 }
@@ -1211,6 +1234,7 @@
 .dv-tabs-overflow-container {
   flex-direction: column;
   height: unset;
+  font-size: var(--dv-tabs-and-actions-container-font-size);
   max-height: min(50vh, 400px);
   overflow-y: auto;
   border: 1px solid var(--dv-tab-divider-color);

package/dist/types/utils.d.ts

@@ -37,13 +37,13 @@ export declare class VueHeaderActionsRenderer extends AbstractVueRenderer implem
     private readonly group;
     private _renderDisposable;
     private readonly _mutableDisposable;
+    private _baseProps;
     get element(): HTMLElement;
     constructor(component: VueComponent, parent: ComponentInternalInstance, group: DockviewGroupPanel);
     init(props: IGroupHeaderProps): void;
     dispose(): void;
-    private updatePanels;
-    private updateActivePanel;
-    private updateGroupActive;
+    private buildEnrichedProps;
+    private updateProps;
 }
 export declare class VuePart<T extends Record<string, any> = any> {
     private readonly element;

package/package.json

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