feat: vue3 prep

packages/dockview-vue/src/dockview/dockview.vue

@@ -300,6 +300,8 @@ onMounted(() => {
      */
     instance.value = markRaw(dockview);
 
+    console.log(getCurrentInstance())
+
 
     emit('ready', { api: new DockviewApi(dockview) });
 });

packages/dockview-vue/src/utils.ts

@@ -2,9 +2,12 @@ import type {
     DockviewGroupPanel,
     GroupPanelPartInitParameters,
     IContentRenderer,
+    IDockviewPanelHeaderProps,
+    IDockviewPanelProps,
     IGroupHeaderProps,
     IHeaderActionsRenderer,
     ITabRenderer,
+    IWatermarkPanelProps,
     IWatermarkRenderer,
     PanelUpdateEvent,
     Parameters,
@@ -15,7 +18,6 @@ import {
     type ComponentOptionsBase,
     render,
     cloneVNode,
-    mergeProps,
     type DefineComponent,
     type ComponentInternalInstance,
 } from 'vue';
@@ -33,6 +35,26 @@ export type ComponentInterface = ComponentOptionsBase<
 
 export type VueComponent<T = any> = DefineComponent<T>;
 
+export function findComponent(parent: ComponentInternalInstance, name: string) {
+    let instance = parent as any;
+    let component = null;
+
+    while (!component && instance.parent) {
+        component = instance.components?.[name];
+        instance = instance.parent;
+    }
+
+    if (!component) {
+        component = parent.appContext.components?.[name];
+    }
+
+    if (!component) {
+        throw new Error(`Failed to find Vue Component ${name}`);
+    }
+
+    return component;
+}
+
 /**
  * TODO List
  *
@@ -90,7 +112,7 @@ export class VueContentRenderer implements IContentRenderer {
     }
 
     init(parameters: GroupPanelPartInitParameters): void {
-        const props = {
+        const props: IDockviewPanelProps = {
             params: parameters.params,
             api: parameters.api,
             containerApi: parameters.containerApi,
@@ -100,7 +122,7 @@ export class VueContentRenderer implements IContentRenderer {
         this._renderDisposable = mountVueComponent(
             this.component,
             this.parent,
-            props,
+            { params: props },
             this.element
         );
     }
@@ -141,7 +163,7 @@ export class VueTabRenderer implements ITabRenderer {
     }
 
     init(parameters: GroupPanelPartInitParameters): void {
-        const props = {
+        const props: IDockviewPanelHeaderProps = {
             params: parameters.params,
             api: parameters.api,
             containerApi: parameters.containerApi,
@@ -151,7 +173,7 @@ export class VueTabRenderer implements ITabRenderer {
         this._renderDisposable = mountVueComponent(
             this.component,
             this.parent,
-            props,
+            { params: props },
             this.element
         );
     }
@@ -188,7 +210,7 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
     }
 
     init(parameters: WatermarkRendererInitParameters): void {
-        const props = {
+        const props: IWatermarkPanelProps = {
             group: parameters.group,
             containerApi: parameters.containerApi,
         };
@@ -197,7 +219,7 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
         this._renderDisposable = mountVueComponent(
             this.component,
             this.parent,
-            props,
+            { params: props },
             this.element
         );
     }
@@ -238,13 +260,12 @@ export class VueHeaderActionsRenderer implements IHeaderActionsRenderer {
         this._element.style.height = '100%';
     }
 
-    init(params: IGroupHeaderProps): void {
+    init(props: IGroupHeaderProps): void {
-        console.log(params);
         this._renderDisposable?.dispose();
         this._renderDisposable = mountVueComponent(
             this.component,
             this.parent,
-            { ...params },
+            { params: props },
             this.element
         );
     }

packages/dockview/src/dockview/dockview.tsx

@@ -70,7 +70,9 @@ export interface IDockviewReactProps extends DockviewOptions {
 function extractCoreOptions(props: IDockviewReactProps): DockviewOptions {
     const coreOptions = (PROPERTY_KEYS as (keyof DockviewOptions)[]).reduce(
         (obj, key) => {
-            obj[key] = props[key] as any;
+            if (key in props) {
+                obj[key] = props[key] as any;
+            }
             return obj;
         },
         {} as Partial<DockviewComponentOptions>
@@ -137,7 +139,7 @@ export const DockviewReact = React.forwardRef(
                     const key = propKey as keyof DockviewOptions;
                     const propValue = props[key];
 
-                    if (propValue !== prevProps.current[key]) {
+                    if (key in props && propValue !== prevProps.current[key]) {
                         changes[key] = propValue as any;
                     }
                 });

packages/docs/blog/2024-04-19-dockview-1.13.0.md

@@ -14,6 +14,8 @@ Please reference docs @ [dockview.dev](https://dockview.dev).
 
 ## 🛠 Miscs
 
+-   Bug: width and height set incorrectly on floating groups when resized [#580](https://github.com/mathuo/dockview/issues/580)
+
 -   Create framework packages in preperation for multiple framework support [#541](https://github.com/mathuo/dockview/pull/541)
     These are still in active development and will be offically support soon.
 

packages/docs/docs/core/locked.mdx

@@ -12,4 +12,6 @@ This section describes how to lock the dock to prevent movement.
 You may want to combine this with `disableDnd={true}` to provide a locked grid with no dnd funtionality. See [Disable Dnd](/docs/core/dnd/disable) for more.
 :::
 
+Locking the component prevent the resizing of components using the drag handles between panels.
+
 <CodeRunner id='dockview/locked'/>

packages/docs/docs/overview/getStarted/installation.mdx

@@ -22,3 +22,12 @@ npm install dockview
 ```
 </FrameworkSpecific>
 
+
+<FrameworkSpecific framework='Vue'>
+Firstly, install the `dockview-vue` library:
+
+```sh
+npm install dockview-vue
+```
+</FrameworkSpecific>
+

packages/docs/scripts/buildTemplates.mjs

@@ -6,9 +6,15 @@ import { fileURLToPath } from 'url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+const { version } = JSON.parse(
+    fs.readFileSync(
+        path.join(__dirname, '..', '..', 'dockview', 'package.json')
+    )
+);
+
 const REACT_VERSION = '18.2.0';
 const VUE_VERSION = '3.4.21';
-const DOCKVIEW_VERSION = '1.11.0';
+const DOCKVIEW_VERSION = version;
 const USE_LOCAL_CDN = argv.slice(2).includes('--local');
 
 const local = 'http://localhost:1111';
@@ -107,7 +113,7 @@ for (const component of COMPONENTS) {
                 path.join(output, component, folder, framework, 'src')
             );
             const template = createIndexHTML({
-                title: 'React App',
+                title: `Dockview | ${folder} ${framework}`,
                 app:
                     framework === 'react'
                         ? './src/index.tsx'

packages/docs/scripts/template.html

@@ -1,120 +1,95 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <title>{{title}}</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/img/dockview_logo.ico" data-rh="true" />
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+        />
+        <style media="only screen">
+            html,
+            body,
+            #app {
+                height: 100%;
+                width: 100%;
+                margin: 0;
+                box-sizing: border-box;
+                -webkit-overflow-scrolling: touch;
+                font-family: ui-sans-serif, system-ui, -apple-system,
+                    BlinkMacSystemFont, Segoe UI, Roboto;
+            }
 
-<head>
+            html {
-  <title>{{title}}</title>
+                position: absolute;
-  <meta charset="UTF-8" />
+                top: 0;
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+                left: 0;
-  <link rel="icon" href="/img/dockview_logo.ico" data-rh="true">
+                padding: 0;
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+                overflow: auto;
-  <style media="only screen">
+            }
-    html,
-    body,
-    #app {
-      height: 100%;
-      width: 100%;
-      margin: 0;
-      box-sizing: border-box;
-      -webkit-overflow-scrolling: touch;
-      font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;
-    }
 
-    html {
+            body {
-      position: absolute;
+                padding: 16px;
-      top: 0;
+                overflow: auto;
-      left: 0;
+            }
-      padding: 0;
+        </style>
-      overflow: auto;
+        <script type="systemjs-importmap">
-    }
+            {
+              "imports": {
+                {{importPaths}}
+              }
+            }
+        </script>
+        <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.0/dist/system.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/systemjs-babel@0.3.2/dist/systemjs-babel.js"></script>
+        <script>
+            async function importCSSStyleSheet(uri) {
+                const link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = uri;
+                document.head.appendChild(link);
+            }
 
-    body {
+            System.onload = function (err, id, deps, isErrSource) {
-      padding: 16px;
+                console.log(id);
-      overflow: auto;
+                if (id.endsWith('.css') && !err) {
-    }
+                    importCSSStyleSheet(id);
-  </style>
+                }
-  <script type="systemjs-importmap">
+            };
-      {
+        </script>
-        "imports": {
+    </head>
-          {{importPaths}}
-        }
-      }
-    </script>
-  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.0/dist/system.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/systemjs-babel@0.3.2/dist/systemjs-babel.js"></script>
-  <script>
-    async function importCSSStyleSheet(uri) {
 
-      const link = document.createElement('link');
+    <body>
-      link.rel = 'stylesheet';
+        <div id="app">
-      link.href = uri;
+            <script type="systemjs-module" src="import:{{app}}"></script>
-      document.head.appendChild(link);
+        </div>
-      console.log('add link')
+        <object
-
+            id="loading-spinner"
-      // const styles = (await import(uri)).default;
+            style="
-
+                position: absolute;
-      // const el = document.createElement('style');
+                top: 50%;
-      // el.type = 'text/css';
+                left: 50%;
-
+                transform: translate(-50%, -50%) scale(0.75);
-      // el.innerHTML = Array.from(styles.cssRules)
+            "
-      //     .map((x) => x.cssText)
+            type="image/svg+xml"
-      //     .join(' ');
+            data="https://dockview.dev/img/dockview_logo.svg"
-
+            aria-label="loading"
-      // document.head.appendChild(el);
+        ></object>
-    }
+        <script id="loading-script">
-
+            (function () {
-    // System.resolve = function (id, parentUrl) {
+                const cleanupLoading = () => {
-    //   console.log(id, parentUrl);
+                    if (document.querySelector('.dv-dockview')) {
-    //   return id;
+                        document.querySelector('#loading-spinner').remove();
-    //   return ''
+                        document.querySelector('#loading-script').remove();
-    // }
+                    } else {
-
+                        requestAnimationFrame(() => cleanupLoading());
-    System.onload = function (err, id, deps, isErrSource) {
+                    }
-      console.log(id);
+                };
-      if (id.endsWith('.css') && !err) {
-          importCSSStyleSheet(id);
-
-        // const module = System.get(id);
-        // console.log(module);
-        // const styles = module?.default;
-        // if (styles) {
-        //   // importCSSStyleSheet(styles);
-        //   document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];
-        // }
-      }
-    };
-  </script>
-
-</head>
-
-<body>
-  <div id="app">
-    <script type="systemjs-module" src="import:{{app}}"></script>
-  </div>
-  <object id="loading-spinner" style="
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%) scale(0.75);
-      " type="image/svg+xml" data="https://dockview.dev/img/dockview_logo.svg" aria-label="loading"></object>
-  <script id="loading-script">
-    (function () {
-      const cleanupLoading = () => {
-        if (
-          document.querySelector(
-            '.dv-dockview'
-          )
-        ) {
-          document.querySelector('#loading-spinner').remove();
-          document.querySelector('#loading-script').remove();
-        } else {
-          requestAnimationFrame(() => cleanupLoading());
-        }
-      };
-
-      cleanupLoading();
-    })();
-  </script>
-
-</body>
 
+                cleanupLoading();
+            })();
+        </script>
+    </body>
 </html>

packages/docs/src/components/frameworkSpecific.tsx

@@ -4,9 +4,10 @@ import * as React from 'react';
 import { IS_PROD } from '../flags';
 
 const frameworks = [
-    { value: 'JavaScript', label: 'JavaScript' },
+    // { value: 'JavaScript', label: 'JavaScript' },
     { value: 'React', label: 'React' },
-    { value: 'Angular', label: 'Angular' },
+    { value: 'Vue', label: 'Vue' },
+    // { value: 'Angular', label: 'Angular' },
 ];
 
 const activeFrameworkGlobal = new DockviewEmitter<string>({ replay: true });
@@ -36,7 +37,7 @@ export function useActiveFramework(): [string, (value: string) => void] {
         activeFrameworkGlobal.fire(value);
     }, []);
 
-    return [IS_PROD ? frameworks[1].value : value, setter];
+    return [IS_PROD ? frameworks[0].value : value, setter];
 }
 
 const FrameworkSelector1 = () => {

packages/docs/src/components/ui/codeRunner.tsx

@@ -22,6 +22,13 @@ export const _CodeRunner = (props: {
             />
             <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                 <CodeSandbox url={sandboxUrl} />
+                <a
+                    target="#blank"
+                    href={path}
+                    className="material-symbols-outlined"
+                >
+                    open_in_new
+                </a>
             </div>
         </div>
     );

packages/docs/src/flags.ts

@@ -1 +1 @@
-export const IS_PROD = true;
+export const IS_PROD = false;

packages/docs/templates/dockview/basic/vue/src/index.ts

@@ -6,22 +6,14 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
     setup(props) {
         return {
-            title: props.api.title,
+            title: props.params.api.title,
         };
     },
     template: `

packages/docs/templates/dockview/custom-header/vue/src/index.ts

@@ -10,16 +10,8 @@ import {
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -43,9 +35,9 @@ const Panel = defineComponent({
             console.log('interval');
 
             const interval = setInterval(() => {
-                this.api.updateParameters({ myValue: Date.now() });
+                this.params.api.updateParameters({ myValue: Date.now() });
             }, 1000);
-            this.api.updateParameters({ myValue: Date.now() });
+            this.parmas.api.updateParameters({ myValue: Date.now() });
 
             return () => {
                 clearInterval(interval);
@@ -53,10 +45,10 @@ const Panel = defineComponent({
         },
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
-            this.title = this.api.title;
+            this.title = this.params.api.title;
         });
-        this.title = this.api.title;
+        this.title = this.params.api.title;
 
         return () => {
             disposable.dispose();
@@ -78,28 +70,14 @@ interface CustomParams {
 const Tab = defineComponent({
     name: 'Tab',
     props: {
-        api: {
-            type: Object as PropType<
-                IDockviewPanelHeaderProps<CustomParams>['api']
-            >,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<
-                IDockviewPanelHeaderProps<CustomParams>['containerApi']
-            >,
-            required: true,
-        },
         params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewPanelHeaderProps<CustomParams>>,
-                IDockviewPanelHeaderProps<CustomParams>['params']
-            >,
             required: true,
         },
     },
     data() {
         return {
-            myValue: this.params.myValue,
+            myValue: this.params.params.myValue,
             title: '',
         };
     },
@@ -118,9 +96,9 @@ const Tab = defineComponent({
             }
 
             const interval = setInterval(() => {
-                this.api.updateParameters({ myValue: Date.now() });
+                this.params.api.updateParameters({ myValue: Date.now() });
             }, 1000);
-            this.api.updateParameters({ myValue: Date.now() });
+            this.params.api.updateParameters({ myValue: Date.now() });
 
             return () => {
                 clearInterval(interval);

packages/docs/templates/dockview/floating-groups/vue/src/index.ts

@@ -48,18 +48,8 @@ const MaterialIcon = defineComponent({
 const LeftAction = defineComponent({
     name: 'LeftAction',
     props: {
-        containerApi: {
+        params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewHeaderActionsProps>,
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
             required: true,
         },
     },
@@ -68,7 +58,7 @@ const LeftAction = defineComponent({
     },
     methods: {
         onClick() {
-            this.containerApi.addPanel({
+            this.params.containerApi.addPanel({
                 id: (++panelCount).toString(),
                 title: `Tab ${panelCount}`,
                 component: 'default',
@@ -84,18 +74,8 @@ const LeftAction = defineComponent({
 const RightAction = defineComponent({
     name: 'RightAction',
     props: {
-        containerApi: {
+        params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewHeaderActionsProps>,
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
             required: true,
         },
     },
@@ -104,23 +84,25 @@ const RightAction = defineComponent({
     },
     data() {
         return {
-            floating: this.api.location.type === 'floating',
+            floating: this.params.api.location.type === 'floating',
         };
     },
     methods: {
         onClick() {
             if (this.floating) {
-                const group = this.containerApi.addGroup();
+                const group = this.params.containerApi.addGroup();
                 this.group.api.moveTo({ group });
             } else {
-                this.containerApi.addFloatingGroup(this.group);
+                this.containerApi.addFloatingGroup(this.params.group);
             }
         },
     },
     mounted() {
-        const disposable = this.group.api.onDidLocationChange((event) => {
+        const disposable = this.params.group.api.onDidLocationChange(
-            this.floating = event.location.type === 'floating';
+            (event) => {
-        });
+                this.floating = event.location.type === 'floating';
+            }
+        );
 
         return () => {
             disposable.dispose();
@@ -136,16 +118,8 @@ const RightAction = defineComponent({
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -155,10 +129,10 @@ const Panel = defineComponent({
         };
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
-            this.title = this.api.title;
+            this.title = this.params.api.title;
         });
-        this.title = this.api.title;
+        this.title = this.params.api.title;
 
         return () => {
             disposable.dispose();

packages/docs/templates/dockview/group-actions/vue/src/index.ts

@@ -2,7 +2,6 @@ import 'dockview-core/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
 import { DockviewVue } from 'dockview-vue';
 import {
-    DockviewGroupPanelApi,
     DockviewReadyEvent,
     IDockviewHeaderActionsProps,
     IDockviewPanelProps,
@@ -12,18 +11,8 @@ import './app.css';
 const LeftAction = defineComponent({
     name: 'LeftAction',
     props: {
-        containerApi: {
+        params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewHeaderActionsProps>,
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
             required: true,
         },
     },
@@ -33,11 +22,11 @@ const LeftAction = defineComponent({
         };
     },
     mounted() {
-        const disposable = this.api.onDidActivePanelChange((event) => {
+        const disposable = this.params.api.onDidActivePanelChange((event) => {
             this.activePanel = event.panel.id;
         });
 
-        this.activePanel = this.group.activePanel.id;
+        this.activePanel = this.params.group.activePanel.id;
 
         return () => {
             disposable.dispose();
@@ -54,18 +43,8 @@ const LeftAction = defineComponent({
 const RightAction = defineComponent({
     name: 'RightAction',
     props: {
-        containerApi: {
+        params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewHeaderActionsProps>,
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
             required: true,
         },
     },
@@ -75,7 +54,7 @@ const RightAction = defineComponent({
         };
     },
     mounted() {
-        const disposable = this.api.onDidActiveChange((event) => {
+        const disposable = this.params.api.onDidActiveChange((event) => {
             this.isGroupActive = event.isActive;
         });
 
@@ -99,14 +78,8 @@ const RightAction = defineComponent({
 const PrefixAction = defineComponent({
     name: 'PrefixAction',
     props: {
-        containerApi: {
+        params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewHeaderActionsProps>,
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
             required: true,
         },
     },
@@ -116,16 +89,8 @@ const PrefixAction = defineComponent({
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -136,10 +101,10 @@ const Panel = defineComponent({
     },
 
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
-            this.title = this.api.title;
+            this.title = this.params.api.title;
         });
-        this.title = this.api.title;
+        this.title = this.params.api.title;
 
         return () => {
             disposable.dispose();

packages/docs/templates/dockview/layout/vue/src/index.ts

@@ -65,18 +65,8 @@ const MaterialIcon = defineComponent({
 const LeftAction = defineComponent({
     name: 'LeftAction',
     props: {
-        containerApi: {
+        params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewHeaderActionsProps>,
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
             required: true,
         },
     },
@@ -85,7 +75,7 @@ const LeftAction = defineComponent({
     },
     methods: {
         onClick() {
-            this.containerApi.addPanel({
+            this.params.containerApi.addPanel({
                 id: (++panelCount).toString(),
                 title: `Tab ${panelCount}`,
                 component: 'default',
@@ -101,16 +91,8 @@ const LeftAction = defineComponent({
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -120,7 +102,7 @@ const Panel = defineComponent({
         };
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
         this.title = this.api.title;

packages/docs/templates/dockview/locked/vue/src/index.ts

@@ -1,25 +1,13 @@
 import 'dockview-core/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
 import { DockviewVue } from 'dockview-vue';
-import {
+import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
-    DockviewApi,
-    DockviewReadyEvent,
-    IDockviewPanelProps,
-} from 'dockview-core';
 
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -30,7 +18,7 @@ const Panel = defineComponent({
     },
 
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
         this.title = this.api.title;

packages/docs/templates/dockview/maximize-group/vue/src/index.ts

@@ -47,14 +47,8 @@ const MaterialIcon = defineComponent({
 const LeftAction = defineComponent({
     name: 'LeftAction',
     props: {
-        containerApi: {
+        params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewHeaderActionsProps>,
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
             required: true,
         },
     },
@@ -63,11 +57,11 @@ const LeftAction = defineComponent({
     },
     methods: {
         onClick() {
-            this.containerApi.addPanel({
+            this.parmas.containerApi.addPanel({
                 id: (++panelCount).toString(),
                 title: `Tab ${panelCount}`,
                 component: 'default',
-                position: { referenceGroup: this.group },
+                position: { referenceGroup: this.params.group },
             });
         },
     },
@@ -80,18 +74,8 @@ const LeftAction = defineComponent({
 const RightAction = defineComponent({
     name: 'RightAction',
     props: {
-        containerApi: {
+        params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewHeaderActionsProps>,
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
             required: true,
         },
     },
@@ -101,9 +85,11 @@ const RightAction = defineComponent({
         };
     },
     mounted() {
-        const disposable = this.containerApi.onDidMaximizedGroupChange(() => {
+        const disposable = this.params.containerApi.onDidMaximizedGroupChange(
-            this.maximized = this.api.isMaximized();
+            () => {
-        });
+                this.maximized = this.api.isMaximized();
+            }
+        );
 
         this.maximized = this.api.isMaximized();
 
@@ -133,16 +119,8 @@ const RightAction = defineComponent({
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -153,7 +131,7 @@ const Panel = defineComponent({
     },
 
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
         this.title = this.api.title;

packages/docs/templates/dockview/nested/vue/src/index.ts

@@ -6,16 +6,8 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -25,7 +17,7 @@ const Panel = defineComponent({
         };
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
         this.title = this.api.title;

packages/docs/templates/dockview/popout-group/vue/src/index.ts

@@ -48,18 +48,8 @@ const MaterialIcon = defineComponent({
 const LeftAction = defineComponent({
     name: 'LeftAction',
     props: {
-        containerApi: {
+        params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewHeaderActionsProps>,
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
             required: true,
         },
     },
@@ -68,7 +58,7 @@ const LeftAction = defineComponent({
     },
     methods: {
         onClick() {
-            this.containerApi.addPanel({
+            this.params.containerApi.addPanel({
                 id: (++panelCount).toString(),
                 title: `Tab ${panelCount}`,
                 component: 'default',
@@ -84,18 +74,8 @@ const LeftAction = defineComponent({
 const RightAction = defineComponent({
     name: 'RightAction',
     props: {
-        containerApi: {
+        params: {
-            type: Object as PropType<
+            type: Object as PropType<IDockviewHeaderActionsProps>,
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
             required: true,
         },
     },
@@ -104,25 +84,27 @@ const RightAction = defineComponent({
     },
     data() {
         return {
-            isPopout: this.api.location.type === 'popout',
+            isPopout: this.params.api.location.type === 'popout',
         };
     },
     methods: {
         onClick() {
             if (this.isPopout) {
-                const group = this.containerApi.addGroup();
+                const group = this.params.containerApi.addGroup();
                 this.group.api.moveTo({ group });
             } else {
-                this.containerApi.addPopoutGroup(this.group, {
+                this.params.containerApi.addPopoutGroup(this.params.group, {
                     popoutUrl: '/popout/index.html',
                 });
             }
         },
     },
     mounted() {
-        const disposable = this.group.api.onDidLocationChange((event) => {
+        const disposable = this.params.group.api.onDidLocationChange(
-            this.isPopout = event.location.type === 'popout';
+            (event) => {
-        });
+                this.isPopout = event.location.type === 'popout';
+            }
+        );
 
         return () => {
             disposable.dispose();
@@ -138,16 +120,8 @@ const RightAction = defineComponent({
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -157,7 +131,7 @@ const Panel = defineComponent({
         };
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
         this.title = this.api.title;

packages/docs/templates/dockview/render-mode/vue/src/index.ts

@@ -6,16 +6,8 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -27,18 +19,18 @@ const Panel = defineComponent({
     },
     methods: {
         onToggleRenderMode() {
-            this.api.setRenderer(
+            this.params.api.setRenderer(
-                this.api.renderer === 'onlyWhenVisible'
+                this.params.api.renderer === 'onlyWhenVisible'
                     ? 'always'
                     : 'onlyWhenVisible'
             );
         },
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
-        const disposable2 = this.api.onDidRendererChange((event) => {
+        const disposable2 = this.params.api.onDidRendererChange((event) => {
             this.renderer = event.renderer;
         });
 

packages/docs/templates/dockview/resize-container/vue/src/index.ts

@@ -6,16 +6,8 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -25,7 +17,7 @@ const Panel = defineComponent({
         };
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
         this.title = this.api.title;

packages/docs/templates/dockview/resize/vue/src/index.ts

@@ -7,16 +7,8 @@ import './resize.css';
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -29,20 +21,20 @@ const Panel = defineComponent({
     },
     methods: {
         onResizeGroupWidth() {
-            this.api.group.api.setSize({ width: this.width });
+            this.params.api.group.api.setSize({ width: this.width });
         },
         onResizePanelWidth() {
-            this.api.setSize({ width: this.width });
+            this.params.api.setSize({ width: this.width });
         },
         onResizeGroupHeight() {
-            this.api.group.api.setSize({ height: this.height });
+            this.params.api.group.api.setSize({ height: this.height });
         },
         onResizePanelHeight() {
-            this.api.setSize({ height: this.height });
+            this.params.api.setSize({ height: this.height });
         },
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
         this.title = this.api.title;

packages/docs/templates/dockview/tabview/vue/src/index.ts

@@ -10,16 +10,8 @@ import {
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -29,7 +21,7 @@ const Panel = defineComponent({
         };
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
         this.title = this.api.title;

packages/docs/templates/dockview/update-parameters/vue/src/index.ts

@@ -10,16 +10,8 @@ import {
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -51,9 +43,9 @@ const Panel = defineComponent({
             }
 
             const interval = setInterval(() => {
-                this.api.updateParameters({ myValue: Date.now() });
+                this.params.api.updateParameters({ myValue: Date.now() });
             }, 1000);
-            this.api.updateParameters({ myValue: Date.now() });
+            this.params.api.updateParameters({ myValue: Date.now() });
 
             return () => {
                 clearInterval(interval);
@@ -71,16 +63,8 @@ const Panel = defineComponent({
 const Tab = defineComponent({
     name: 'Tab',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelHeaderProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelHeaderProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelHeaderProps['params']>,
+            type: Object as PropType<IDockviewPanelHeaderProps>,
             required: true,
         },
     },
@@ -91,11 +75,11 @@ const Tab = defineComponent({
         };
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
 
-        const disposable2 = this.api.onDidParametersChange(() => {
+        const disposable2 = this.params.api.onDidParametersChange(() => {
             this.value = this.params.myValue;
         });
 

packages/docs/templates/dockview/update-title/vue/src/index.ts

@@ -1,24 +1,13 @@
 import 'dockview-core/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
 import { DockviewVue } from 'dockview-vue';
-import {
+import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
-    DockviewReadyEvent,
-    IDockviewPanelProps,
-} from 'dockview-core';
 
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -30,7 +19,7 @@ const Panel = defineComponent({
     },
     methods: {
         onChangeTitle() {
-            this.api.setTitle(this.value);
+            this.params.api.setTitle(this.value);
         },
         updateTitle(title: string) {
             this.title = title;

packages/docs/templates/dockview/watermark/vue/src/index.ts

@@ -12,16 +12,8 @@ import {
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
         params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
@@ -37,27 +29,23 @@ const Panel = defineComponent({
 const WatermarkPanel = defineComponent({
     name: 'Panel',
     props: {
-        group: {
+        params: {
-            type: Object as PropType<IWatermarkPanelProps['group']>,
+            type: Object as PropType<IWatermarkPanelProps>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IWatermarkPanelProps['containerApi']>,
             required: true,
         },
     },
     setup(props) {
-        return { isGroup: props.containerApi.groups.length > 0 };
+        return { isGroup: props.params.containerApi.groups.length > 0 };
     },
     methods: {
         onAddNewPanel() {
-            this.containerApi.addPanel({
+            this.params.containerApi.addPanel({
                 id: Date.now().toString(),
                 component: 'default',
             });
         },
         onCloseGroup() {
-            this.group?.api.close();
+            this.params.group?.api.close();
         },
     },
     template: `
@@ -88,10 +76,11 @@ const App = defineComponent({
                 default: Panel,
             },
             watermarkComponent: WatermarkPanel,
+            api: null as DockviewApi | null,
         };
     },
     methods: {
-        onClick(event: MouseEvent) {
+        onClick() {
             if (!this.api) {
                 return;
             }
@@ -99,6 +88,7 @@ const App = defineComponent({
             this.api.addGroup();
         },
         onReady(event: DockviewReadyEvent) {
+            this.api = event.api;
             event.api.fromJSON({
                 grid: {
                     orientation: Orientation.HORIZONTAL,