dockview-vue 5.1.0 → 6.0.0

package/dist/dockview-vue.umd.js

@@ -3,10 +3,7 @@
 })(this, function(exports2, dockviewCore, vue) {
   "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);
 
   function findComponent(parent, name) {
     var _a, _b;
@@ -157,6 +154,9 @@ var __publicField = (obj, key, value) => {
         }),
         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 @@ var __publicField = (obj, key, value) => {
         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,11 +298,17 @@ var __publicField = (obj, key, value) => {
       theme: {},
       disableTabsOverflowList: { type: Boolean },
       scrollbars: {},
+      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 +333,108 @@ var __publicField = (obj, key, value) => {
           }
         );
       });
+      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");
         }
@@ -315,10 +480,28 @@ var __publicField = (obj, key, value) => {
               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;
@@ -616,18 +799,19 @@ var __publicField = (obj, key, value) => {
   exports2.GridviewVue = _sfc_main$1;
   exports2.PaneviewVue = _sfc_main;
   exports2.SplitviewVue = _sfc_main$2;
+  exports2.VueContextMenuItemRenderer = VueContextMenuItemRenderer;
   exports2.VueHeaderActionsRenderer = VueHeaderActionsRenderer;
   exports2.VuePart = VuePart;
   exports2.VueRenderer = VueRenderer;
+  exports2.VueTabGroupChipRenderer = VueTabGroupChipRenderer;
   exports2.VueWatermarkRenderer = VueWatermarkRenderer;
   exports2.findComponent = findComponent;
   exports2.mountVueComponent = mountVueComponent;
   Object.keys(dockviewCore).forEach((k) => {
-    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k))
-      Object.defineProperty(exports2, k, {
-        enumerable: true,
-        get: () => dockviewCore[k]
-      });
+    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k)) Object.defineProperty(exports2, k, {
+      enumerable: true,
+      get: () => dockviewCore[k]
+    });
   });
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });