dockview-vue 5.2.0 → 6.0.0

package/README.md

@@ -16,7 +16,7 @@
 
 ##
 
-![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreen.gif?raw=true)
+![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreenv2.png?raw=true)
 
 Please see the website: https://dockview.dev
 
@@ -28,6 +28,8 @@ Please see the website: https://dockview.dev
 -   Tab and Group docking / Drag n' Drop
 -   Popout Windows
 -   Floating Groups
+-   Edge Groups
+-   Tab Groups
 -   Extensive API
 -   Supports Shadow DOMs
 -   High test coverage

package/dist/dockview-vue.cjs.js

@@ -1,10 +1,7 @@
 "use strict";
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const dockviewCore = require("dockview-core");
 const vue = require("vue");
@@ -157,6 +154,9 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
       }),
       props.api.onDidActiveChange(() => {
         this.updateProps();
+      }),
+      props.api.onDidLocationChange((event) => {
+        this.updateLocation(event.location);
       })
     );
     (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
@@ -179,13 +179,75 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
       activePanel: this.group.model.activePanel,
       isGroupActive: this.group.api.isActive,
       group: this.group,
-      headerPosition: this.group.model.headerPosition
+      headerPosition: this.group.model.headerPosition,
+      location: this.group.api.location
     };
   }
   updateProps() {
     var _a;
     (_a = this._renderDisposable) == null ? void 0 : _a.update({ params: this.buildEnrichedProps() });
   }
+  updateLocation(location) {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.update({ params: { location } });
+  }
+}
+class VueContextMenuItemRenderer extends AbstractVueRenderer {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "_renderDisposable");
+  }
+  init(props) {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
+    this._renderDisposable = mountVueComponent(
+      this.component,
+      this.parent,
+      { params: props },
+      this.element
+    );
+  }
+  dispose() {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
+  }
+}
+class VueTabGroupChipRenderer extends AbstractVueRenderer {
+  constructor(component, parent) {
+    super(component, parent);
+    __publicField(this, "_renderDisposable");
+    this.element.style.height = "";
+    this.element.style.width = "";
+    this.element.style.display = "inline-flex";
+  }
+  get element() {
+    return this._element;
+  }
+  init(params) {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
+    this._renderDisposable = mountVueComponent(
+      this.component,
+      this.parent,
+      {
+        params: {
+          tabGroup: params.tabGroup,
+          api: params.api
+        }
+      },
+      this.element
+    );
+  }
+  update(params) {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.update({
+      params: { tabGroup: params.tabGroup }
+    });
+  }
+  dispose() {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
+  }
 }
 class VuePart {
   constructor(element, vueComponent, parent, props) {
@@ -236,12 +298,17 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     theme: {},
     disableTabsOverflowList: { type: Boolean },
     scrollbars: {},
-    tabAnimation: {},
+    getTabContextMenuItems: { type: Function },
+    getTabGroupChipContextMenuItems: { type: Function },
+    createTabGroupChipComponent: { type: Function },
+    tabGroupColors: {},
+    tabGroupAccent: {},
     watermarkComponent: {},
     defaultTabComponent: {},
     rightHeaderActionsComponent: {},
     leftHeaderActionsComponent: {},
-    prefixHeaderActionsComponent: {}
+    prefixHeaderActionsComponent: {},
+    tabGroupChipComponent: {}
   },
   emits: ["ready"],
   setup(__props, { emit: __emit }) {
@@ -266,11 +333,108 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         }
       );
     });
+    const inst = vue.getCurrentInstance();
+    vue.watch(
+      () => props.tabGroupChipComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createTabGroupChipComponent: newValue ? () => {
+              const component = findComponent(inst, newValue);
+              return new VueTabGroupChipRenderer(component, inst);
+            } : void 0
+          });
+        }
+      }
+    );
+    vue.watch(
+      () => props.defaultTabComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            defaultTabComponent: newValue,
+            createTabComponent(options) {
+              let component = findComponent(inst, options.name);
+              if (!component && newValue) {
+                component = findComponent(inst, newValue);
+              }
+              if (component) {
+                return new VueRenderer(component, inst);
+              }
+              return void 0;
+            }
+          });
+        }
+      }
+    );
+    vue.watch(
+      () => props.watermarkComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createWatermarkComponent: newValue ? () => {
+              const component = findComponent(inst, newValue);
+              return new VueWatermarkRenderer(component, inst);
+            } : void 0
+          });
+        }
+      }
+    );
+    vue.watch(
+      () => props.rightHeaderActionsComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createRightHeaderActionComponent: newValue ? (group) => {
+              const component = findComponent(inst, newValue);
+              return new VueHeaderActionsRenderer(
+                component,
+                inst,
+                group
+              );
+            } : void 0
+          });
+        }
+      }
+    );
+    vue.watch(
+      () => props.leftHeaderActionsComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createLeftHeaderActionComponent: newValue ? (group) => {
+              const component = findComponent(inst, newValue);
+              return new VueHeaderActionsRenderer(
+                component,
+                inst,
+                group
+              );
+            } : void 0
+          });
+        }
+      }
+    );
+    vue.watch(
+      () => props.prefixHeaderActionsComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createPrefixHeaderActionComponent: newValue ? (group) => {
+              const component = findComponent(inst, newValue);
+              return new VueHeaderActionsRenderer(
+                component,
+                inst,
+                group
+              );
+            } : void 0
+          });
+        }
+      }
+    );
     vue.onMounted(() => {
       if (!el.value) {
         throw new Error("dockview-vue: element is not mounted");
       }
-      const inst = vue.getCurrentInstance();
       if (!inst) {
         throw new Error("dockview-vue: getCurrentInstance() returned null");
       }
@@ -316,10 +480,28 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             props.rightHeaderActionsComponent
           );
           return new VueHeaderActionsRenderer(component, inst, group);
-        } : void 0
+        } : void 0,
+        createContextMenuItemComponent: (options) => {
+          if (!options.component) {
+            return void 0;
+          }
+          const component = findComponent(inst, options.component);
+          return new VueContextMenuItemRenderer(component, inst);
+        }
       };
+      const coreOptions = extractCoreOptions(props);
+      if (props.defaultTabComponent) {
+        frameworkOptions.defaultTabComponent = props.defaultTabComponent;
+      }
+      if (props.tabGroupChipComponent) {
+        const chipComponentName = props.tabGroupChipComponent;
+        coreOptions.createTabGroupChipComponent = () => {
+          const component = findComponent(inst, chipComponentName);
+          return new VueTabGroupChipRenderer(component, inst);
+        };
+      }
       const api = dockviewCore.createDockview(el.value, {
-        ...extractCoreOptions(props),
+        ...coreOptions,
         ...frameworkOptions
       });
       const { clientWidth, clientHeight } = el.value;
@@ -617,16 +799,17 @@ exports.DockviewVue = _sfc_main$3;
 exports.GridviewVue = _sfc_main$1;
 exports.PaneviewVue = _sfc_main;
 exports.SplitviewVue = _sfc_main$2;
+exports.VueContextMenuItemRenderer = VueContextMenuItemRenderer;
 exports.VueHeaderActionsRenderer = VueHeaderActionsRenderer;
 exports.VuePart = VuePart;
 exports.VueRenderer = VueRenderer;
+exports.VueTabGroupChipRenderer = VueTabGroupChipRenderer;
 exports.VueWatermarkRenderer = VueWatermarkRenderer;
 exports.findComponent = findComponent;
 exports.mountVueComponent = mountVueComponent;
 Object.keys(dockviewCore).forEach((k) => {
-  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
-    Object.defineProperty(exports, k, {
-      enumerable: true,
-      get: () => dockviewCore[k]
-    });
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => dockviewCore[k]
+  });
 });

package/dist/dockview-vue.es.js

@@ -1,12 +1,9 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { DockviewMutableDisposable, DockviewCompositeDisposable, PROPERTY_KEYS_DOCKVIEW, createDockview, SplitviewPanel, SplitviewApi, PROPERTY_KEYS_SPLITVIEW, createSplitview, GridviewPanel, GridviewApi, PROPERTY_KEYS_GRIDVIEW, createGridview, PROPERTY_KEYS_PANEVIEW, createPaneview } from "dockview-core";
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { DockviewMutableDisposable, DockviewCompositeDisposable, PROPERTY_KEYS_DOCKVIEW, createDockview, SplitviewPanel, SplitviewApi, createSplitview, PROPERTY_KEYS_SPLITVIEW, GridviewPanel, GridviewApi, createGridview, PROPERTY_KEYS_GRIDVIEW, createPaneview, PROPERTY_KEYS_PANEVIEW } from "dockview-core";
 export * from "dockview-core";
-import { createVNode, render, cloneVNode, defineComponent, ref, watch, onMounted, getCurrentInstance, markRaw, onBeforeUnmount, openBlock, createElementBlock } from "vue";
+import { createVNode, render, cloneVNode, defineComponent, ref, watch, getCurrentInstance, onMounted, markRaw, onBeforeUnmount, openBlock, createElementBlock } from "vue";
 function findComponent(parent, name) {
   var _a, _b;
   let instance = parent;
@@ -156,6 +153,9 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
       }),
       props.api.onDidActiveChange(() => {
         this.updateProps();
+      }),
+      props.api.onDidLocationChange((event) => {
+        this.updateLocation(event.location);
       })
     );
     (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
@@ -178,13 +178,75 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
       activePanel: this.group.model.activePanel,
       isGroupActive: this.group.api.isActive,
       group: this.group,
-      headerPosition: this.group.model.headerPosition
+      headerPosition: this.group.model.headerPosition,
+      location: this.group.api.location
     };
   }
   updateProps() {
     var _a;
     (_a = this._renderDisposable) == null ? void 0 : _a.update({ params: this.buildEnrichedProps() });
   }
+  updateLocation(location) {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.update({ params: { location } });
+  }
+}
+class VueContextMenuItemRenderer extends AbstractVueRenderer {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "_renderDisposable");
+  }
+  init(props) {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
+    this._renderDisposable = mountVueComponent(
+      this.component,
+      this.parent,
+      { params: props },
+      this.element
+    );
+  }
+  dispose() {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
+  }
+}
+class VueTabGroupChipRenderer extends AbstractVueRenderer {
+  constructor(component, parent) {
+    super(component, parent);
+    __publicField(this, "_renderDisposable");
+    this.element.style.height = "";
+    this.element.style.width = "";
+    this.element.style.display = "inline-flex";
+  }
+  get element() {
+    return this._element;
+  }
+  init(params) {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
+    this._renderDisposable = mountVueComponent(
+      this.component,
+      this.parent,
+      {
+        params: {
+          tabGroup: params.tabGroup,
+          api: params.api
+        }
+      },
+      this.element
+    );
+  }
+  update(params) {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.update({
+      params: { tabGroup: params.tabGroup }
+    });
+  }
+  dispose() {
+    var _a;
+    (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
+  }
 }
 class VuePart {
   constructor(element, vueComponent, parent, props) {
@@ -235,12 +297,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     theme: {},
     disableTabsOverflowList: { type: Boolean },
     scrollbars: {},
-    tabAnimation: {},
+    getTabContextMenuItems: { type: Function },
+    getTabGroupChipContextMenuItems: { type: Function },
+    createTabGroupChipComponent: { type: Function },
+    tabGroupColors: {},
+    tabGroupAccent: {},
     watermarkComponent: {},
     defaultTabComponent: {},
     rightHeaderActionsComponent: {},
     leftHeaderActionsComponent: {},
-    prefixHeaderActionsComponent: {}
+    prefixHeaderActionsComponent: {},
+    tabGroupChipComponent: {}
   },
   emits: ["ready"],
   setup(__props, { emit: __emit }) {
@@ -265,11 +332,108 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         }
       );
     });
+    const inst = getCurrentInstance();
+    watch(
+      () => props.tabGroupChipComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createTabGroupChipComponent: newValue ? () => {
+              const component = findComponent(inst, newValue);
+              return new VueTabGroupChipRenderer(component, inst);
+            } : void 0
+          });
+        }
+      }
+    );
+    watch(
+      () => props.defaultTabComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            defaultTabComponent: newValue,
+            createTabComponent(options) {
+              let component = findComponent(inst, options.name);
+              if (!component && newValue) {
+                component = findComponent(inst, newValue);
+              }
+              if (component) {
+                return new VueRenderer(component, inst);
+              }
+              return void 0;
+            }
+          });
+        }
+      }
+    );
+    watch(
+      () => props.watermarkComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createWatermarkComponent: newValue ? () => {
+              const component = findComponent(inst, newValue);
+              return new VueWatermarkRenderer(component, inst);
+            } : void 0
+          });
+        }
+      }
+    );
+    watch(
+      () => props.rightHeaderActionsComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createRightHeaderActionComponent: newValue ? (group) => {
+              const component = findComponent(inst, newValue);
+              return new VueHeaderActionsRenderer(
+                component,
+                inst,
+                group
+              );
+            } : void 0
+          });
+        }
+      }
+    );
+    watch(
+      () => props.leftHeaderActionsComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createLeftHeaderActionComponent: newValue ? (group) => {
+              const component = findComponent(inst, newValue);
+              return new VueHeaderActionsRenderer(
+                component,
+                inst,
+                group
+              );
+            } : void 0
+          });
+        }
+      }
+    );
+    watch(
+      () => props.prefixHeaderActionsComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createPrefixHeaderActionComponent: newValue ? (group) => {
+              const component = findComponent(inst, newValue);
+              return new VueHeaderActionsRenderer(
+                component,
+                inst,
+                group
+              );
+            } : void 0
+          });
+        }
+      }
+    );
     onMounted(() => {
       if (!el.value) {
         throw new Error("dockview-vue: element is not mounted");
       }
-      const inst = getCurrentInstance();
       if (!inst) {
         throw new Error("dockview-vue: getCurrentInstance() returned null");
       }
@@ -315,10 +479,28 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             props.rightHeaderActionsComponent
           );
           return new VueHeaderActionsRenderer(component, inst, group);
-        } : void 0
+        } : void 0,
+        createContextMenuItemComponent: (options) => {
+          if (!options.component) {
+            return void 0;
+          }
+          const component = findComponent(inst, options.component);
+          return new VueContextMenuItemRenderer(component, inst);
+        }
       };
+      const coreOptions = extractCoreOptions(props);
+      if (props.defaultTabComponent) {
+        frameworkOptions.defaultTabComponent = props.defaultTabComponent;
+      }
+      if (props.tabGroupChipComponent) {
+        const chipComponentName = props.tabGroupChipComponent;
+        coreOptions.createTabGroupChipComponent = () => {
+          const component = findComponent(inst, chipComponentName);
+          return new VueTabGroupChipRenderer(component, inst);
+        };
+      }
       const api = createDockview(el.value, {
-        ...extractCoreOptions(props),
+        ...coreOptions,
         ...frameworkOptions
       });
       const { clientWidth, clientHeight } = el.value;
@@ -617,9 +799,11 @@ export {
   _sfc_main$1 as GridviewVue,
   _sfc_main as PaneviewVue,
   _sfc_main$2 as SplitviewVue,
+  VueContextMenuItemRenderer,
   VueHeaderActionsRenderer,
   VuePart,
   VueRenderer,
+  VueTabGroupChipRenderer,
   VueWatermarkRenderer,
   findComponent,
   mountVueComponent