dockview-vue 6.0.3 → 6.0.6

package/dist/dockview-vue.cjs.js

@@ -310,7 +310,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     prefixHeaderActionsComponent: {},
     tabGroupChipComponent: {}
   },
-  emits: ["ready"],
+  emits: ["ready", "didDrop", "willDrop"],
   setup(__props, { emit: __emit }) {
     function extractCoreOptions(props2) {
       const coreOptions = dockviewCore.PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
@@ -323,6 +323,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const el = vue.ref(null);
     const instance = vue.ref(null);
+    const eventDisposables = [];
     dockviewCore.PROPERTY_KEYS_DOCKVIEW.forEach((coreOptionKey) => {
       vue.watch(
         () => props[coreOptionKey],
@@ -507,9 +508,15 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       const { clientWidth, clientHeight } = el.value;
       api.layout(clientWidth, clientHeight);
       instance.value = vue.markRaw(api);
+      eventDisposables.push(
+        api.onDidDrop((event) => emit("didDrop", event)),
+        api.onWillDrop((event) => emit("willDrop", event))
+      );
       emit("ready", { api });
     });
     vue.onBeforeUnmount(() => {
+      eventDisposables.forEach((d) => d.dispose());
+      eventDisposables.length = 0;
       if (instance.value) {
         instance.value.dispose();
       }
@@ -525,6 +532,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
 function useViewComponent(config, props, emit) {
   const el = vue.ref(null);
   const instance = vue.ref(null);
+  const eventDisposables = [];
   config.propertyKeys.forEach((coreOptionKey) => {
     vue.watch(
       () => props[coreOptionKey],
@@ -589,9 +597,14 @@ function useViewComponent(config, props, emit) {
     const { clientWidth, clientHeight } = el.value;
     api.layout(clientWidth, clientHeight);
     instance.value = vue.markRaw(api);
+    if (config.onApiCreated) {
+      eventDisposables.push(...config.onApiCreated(api));
+    }
     emit("ready", { api });
   });
   vue.onBeforeUnmount(() => {
+    eventDisposables.forEach((d) => d.dispose());
+    eventDisposables.length = 0;
     if (instance.value) {
       instance.value.dispose();
     }
@@ -764,7 +777,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     disableDnd: { type: Boolean },
     className: {}
   },
-  emits: ["ready"],
+  emits: ["ready", "didDrop"],
   setup(__props, { emit: __emit }) {
     function extractCoreOptions(props2) {
       const coreOptions = dockviewCore.PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
@@ -781,7 +794,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         propertyKeys: dockviewCore.PROPERTY_KEYS_PANEVIEW,
         createApi: dockviewCore.createPaneview,
         createView: (id, name, component, instance) => new VuePaneviewPanelView(id, component, instance),
-        extractCoreOptions
+        extractCoreOptions,
+        onApiCreated: (api) => [
+          api.onDidDrop((event) => emit("didDrop", event))
+        ]
       },
       props,
       emit

package/dist/dockview-vue.es.js

@@ -309,7 +309,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     prefixHeaderActionsComponent: {},
     tabGroupChipComponent: {}
   },
-  emits: ["ready"],
+  emits: ["ready", "didDrop", "willDrop"],
   setup(__props, { emit: __emit }) {
     function extractCoreOptions(props2) {
       const coreOptions = PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
@@ -322,6 +322,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const el = ref(null);
     const instance = ref(null);
+    const eventDisposables = [];
     PROPERTY_KEYS_DOCKVIEW.forEach((coreOptionKey) => {
       watch(
         () => props[coreOptionKey],
@@ -506,9 +507,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const { clientWidth, clientHeight } = el.value;
       api.layout(clientWidth, clientHeight);
       instance.value = markRaw(api);
+      eventDisposables.push(
+        api.onDidDrop((event) => emit("didDrop", event)),
+        api.onWillDrop((event) => emit("willDrop", event))
+      );
       emit("ready", { api });
     });
     onBeforeUnmount(() => {
+      eventDisposables.forEach((d) => d.dispose());
+      eventDisposables.length = 0;
       if (instance.value) {
         instance.value.dispose();
       }
@@ -524,6 +531,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 function useViewComponent(config, props, emit) {
   const el = ref(null);
   const instance = ref(null);
+  const eventDisposables = [];
   config.propertyKeys.forEach((coreOptionKey) => {
     watch(
       () => props[coreOptionKey],
@@ -588,9 +596,14 @@ function useViewComponent(config, props, emit) {
     const { clientWidth, clientHeight } = el.value;
     api.layout(clientWidth, clientHeight);
     instance.value = markRaw(api);
+    if (config.onApiCreated) {
+      eventDisposables.push(...config.onApiCreated(api));
+    }
     emit("ready", { api });
   });
   onBeforeUnmount(() => {
+    eventDisposables.forEach((d) => d.dispose());
+    eventDisposables.length = 0;
     if (instance.value) {
       instance.value.dispose();
     }
@@ -763,7 +776,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disableDnd: { type: Boolean },
     className: {}
   },
-  emits: ["ready"],
+  emits: ["ready", "didDrop"],
   setup(__props, { emit: __emit }) {
     function extractCoreOptions(props2) {
       const coreOptions = PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
@@ -780,7 +793,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         propertyKeys: PROPERTY_KEYS_PANEVIEW,
         createApi: createPaneview,
         createView: (id, name, component, instance) => new VuePaneviewPanelView(id, component, instance),
-        extractCoreOptions
+        extractCoreOptions,
+        onApiCreated: (api) => [
+          api.onDidDrop((event) => emit("didDrop", event))
+        ]
       },
       props,
       emit

package/dist/dockview-vue.umd.js

@@ -310,7 +310,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       prefixHeaderActionsComponent: {},
       tabGroupChipComponent: {}
     },
-    emits: ["ready"],
+    emits: ["ready", "didDrop", "willDrop"],
     setup(__props, { emit: __emit }) {
       function extractCoreOptions(props2) {
         const coreOptions = dockviewCore.PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
@@ -323,6 +323,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const props = __props;
       const el = vue.ref(null);
       const instance = vue.ref(null);
+      const eventDisposables = [];
       dockviewCore.PROPERTY_KEYS_DOCKVIEW.forEach((coreOptionKey) => {
         vue.watch(
           () => props[coreOptionKey],
@@ -507,9 +508,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const { clientWidth, clientHeight } = el.value;
         api.layout(clientWidth, clientHeight);
         instance.value = vue.markRaw(api);
+        eventDisposables.push(
+          api.onDidDrop((event) => emit("didDrop", event)),
+          api.onWillDrop((event) => emit("willDrop", event))
+        );
         emit("ready", { api });
       });
       vue.onBeforeUnmount(() => {
+        eventDisposables.forEach((d) => d.dispose());
+        eventDisposables.length = 0;
         if (instance.value) {
           instance.value.dispose();
         }
@@ -525,6 +532,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   function useViewComponent(config, props, emit) {
     const el = vue.ref(null);
     const instance = vue.ref(null);
+    const eventDisposables = [];
     config.propertyKeys.forEach((coreOptionKey) => {
       vue.watch(
         () => props[coreOptionKey],
@@ -589,9 +597,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const { clientWidth, clientHeight } = el.value;
       api.layout(clientWidth, clientHeight);
       instance.value = vue.markRaw(api);
+      if (config.onApiCreated) {
+        eventDisposables.push(...config.onApiCreated(api));
+      }
       emit("ready", { api });
     });
     vue.onBeforeUnmount(() => {
+      eventDisposables.forEach((d) => d.dispose());
+      eventDisposables.length = 0;
       if (instance.value) {
         instance.value.dispose();
       }
@@ -764,7 +777,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       disableDnd: { type: Boolean },
       className: {}
     },
-    emits: ["ready"],
+    emits: ["ready", "didDrop"],
     setup(__props, { emit: __emit }) {
       function extractCoreOptions(props2) {
         const coreOptions = dockviewCore.PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
@@ -781,7 +794,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           propertyKeys: dockviewCore.PROPERTY_KEYS_PANEVIEW,
           createApi: dockviewCore.createPaneview,
           createView: (id, name, component, instance) => new VuePaneviewPanelView(id, component, instance),
-          extractCoreOptions
+          extractCoreOptions,
+          onApiCreated: (api) => [
+            api.onDidDrop((event) => emit("didDrop", event))
+          ]
         },
         props,
         emit

package/dist/types/composables/useViewComponent.d.ts

@@ -1,10 +1,12 @@
 import { type ComponentInternalInstance } from 'vue';
+import type { DockviewIDisposable } from 'dockview-core';
 export interface ViewComponentConfig<TApi, TOptions, TProps, TEvents, TView, TFrameworkOptions> {
     componentName: string;
     propertyKeys: readonly (keyof TOptions)[];
     createApi: (element: HTMLElement, options: TOptions & TFrameworkOptions) => TApi;
     createView: (id: string, name: string | undefined, component: any, instance: ComponentInternalInstance) => TView;
     extractCoreOptions: (props: TProps) => TOptions;
+    onApiCreated?: (api: TApi) => DockviewIDisposable[];
 }
 export declare function useViewComponent<TApi extends {
     dispose(): void;

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

@@ -1,7 +1,11 @@
 import type { IDockviewVueProps } from './types';
 declare const _default: import("vue").DefineComponent<IDockviewVueProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     ready: (event: import("dockview-core").DockviewReadyEvent) => any;
+    didDrop: (event: import("dockview-core").DockviewDidDropEvent) => any;
+    willDrop: (event: import("dockview-core").DockviewWillDropEvent) => any;
 }, string, import("vue").PublicProps, Readonly<IDockviewVueProps> & Readonly<{
     onReady?: (event: import("dockview-core").DockviewReadyEvent) => any;
+    onDidDrop?: (event: import("dockview-core").DockviewDidDropEvent) => any;
+    onWillDrop?: (event: import("dockview-core").DockviewWillDropEvent) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { type DockviewOptions, type DockviewReadyEvent } from 'dockview-core';
+import { type DockviewDidDropEvent, type DockviewOptions, type DockviewReadyEvent, type DockviewWillDropEvent } from 'dockview-core';
 export interface VueProps {
     watermarkComponent?: string;
     defaultTabComponent?: string;
@@ -9,5 +9,7 @@ export interface VueProps {
 }
 export type VueEvents = {
     ready: [event: DockviewReadyEvent];
+    didDrop: [event: DockviewDidDropEvent];
+    willDrop: [event: DockviewWillDropEvent];
 };
 export type IDockviewVueProps = DockviewOptions & VueProps;

package/dist/types/paneview/paneview.vue.d.ts

@@ -1,7 +1,9 @@
 import type { IPaneviewVueProps } from './types';
 declare const _default: import("vue").DefineComponent<IPaneviewVueProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     ready: (event: import("./types").PaneviewReadyEvent) => any;
+    didDrop: (event: import("dockview-core").PaneviewDropEvent) => any;
 }, string, import("vue").PublicProps, Readonly<IPaneviewVueProps> & Readonly<{
     onReady?: (event: import("./types").PaneviewReadyEvent) => any;
+    onDidDrop?: (event: import("dockview-core").PaneviewDropEvent) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/types/paneview/types.d.ts

@@ -1,4 +1,4 @@
-import type { PaneviewApi, PaneviewOptions, PaneviewPanelApi } from 'dockview-core';
+import type { PaneviewApi, PaneviewDropEvent, PaneviewOptions, PaneviewPanelApi } from 'dockview-core';
 export interface PaneviewReadyEvent {
     api: PaneviewApi;
 }
@@ -13,4 +13,5 @@ export interface IPaneviewVueProps extends PaneviewOptions {
 }
 export type PaneviewVueEvents = {
     ready: [event: PaneviewReadyEvent];
+    didDrop: [event: PaneviewDropEvent];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockview-vue",
-    "version": "6.0.3",
+    "version": "6.0.6",
     "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.0.3"
+        "dockview-core": "^6.0.6"
     },
     "peerDependencies": {
         "vue": "^3.4.0"