chore: docs

mathuo · Sep 5, 2024 · ab5a11f · ab5a11f
1 parent fc7b9fb
commit ab5a11f
Show file tree

Hide file tree

Showing 18 changed files with 953 additions and 203 deletions.
diff --git a/packages/docs/docs/advanced/events.mdx b/packages/docs/docs/advanced/events.mdx
diff --git a/packages/docs/docs/core/dnd/external.mdx b/packages/docs/docs/core/dnd/external.mdx
@@ -9,25 +9,9 @@ import { DocRef } from '@site/src/components/ui/reference/docRef';
 import LiveExample from '@site/src/components/ui/exampleFrame';
 
 <DocRef declaration="DockviewApi"
-  methods={['onDidDrop']}
+  methods={['onDidDrop', 'onUnhandledDragOverEvent']}
 />
 
-
-<FrameworkSpecific framework='React'>
-  <DocRef declaration="IDockviewReactProps" methods={['showDndOverlay']} />
-</FrameworkSpecific>
-
-<FrameworkSpecific framework='Vue'>
-  <DocRef declaration="IDockviewVueProps" methods={['showDndOverlay']} />
-</FrameworkSpecific>
-
-<FrameworkSpecific framework='JavaScript'>
-  <DocRef declaration="DockviewComponentOptions"
-  methods={['showDndOverlay']}
-  />
-</FrameworkSpecific>
-
-
 ## Intercepting Drag Events
 
 You can intercept drag events to attach your own metadata using the `onWillDragPanel` and `onWillDragGroup` api methods.

diff --git a/packages/docs/docs/core/overview.mdx b/packages/docs/docs/core/overview.mdx
@@ -8,6 +8,15 @@ This section provided a core overview.
 The component takes a collection of [Options](/docs/api/dockview/options) as inputs and
 once you have created a dock you can store a reference to the [API](/docs/api/dockview/overview) that is created.
 
+
+<FrameworkSpecific framework='JavaScript'>
+```tsx
+const element: HTMLElement
+const options: DockviewComponentOptions
+const api: DockviewApi = createDockview(element, options);
+```
+</FrameworkSpecific>
+
 <FrameworkSpecific framework='React'>
 ```tsx
 function onReady(event: DockviewReadyEvent) {

diff --git a/packages/docs/docs/core/panels/register.mdx b/packages/docs/docs/core/panels/register.mdx
@@ -20,7 +20,7 @@ You can register panels through the dock  [option](/docs/api/dockview/options) `
 
 
 <FrameworkSpecific framework='JavaScript'>
-  <DocRef declaration="DockviewComponentOptions" methods={['components']} />
+  <DocRef declaration="DockviewComponentOptions" methods={['createComponent']} />
 </FrameworkSpecific>
 
 
@@ -44,6 +44,37 @@ return <DockviewReact components={components}/>
 </FrameworkSpecific>
 
 
+<FrameworkSpecific framework='JavaScript'>
+```tsx
+class Panel implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        //
+    }
+}
+
+
+const api = createDockview(parentElement, {
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'component_1':
+                return new Panel();
+        }
+    },
+});
+```
+</FrameworkSpecific>
+
+
 <FrameworkSpecific framework='Vue'>
 ```tsx
 const App = {

diff --git a/packages/docs/docs/core/watermark.mdx b/packages/docs/docs/core/watermark.mdx
@@ -25,7 +25,7 @@ The following properties can be set to configure the behaviours of floating grou
 
 <FrameworkSpecific framework='JavaScript'>
   <DocRef declaration="DockviewComponentOptions"
-  methods={['watermarkComponent', 'watermarkFrameworkComponent', 'frameworkComponentFactory']}
+  methods={['createWatermarkComponent']}
   />
 </FrameworkSpecific>
 

diff --git a/packages/docs/docs/overview/getStarted/installation.mdx b/packages/docs/docs/overview/getStarted/installation.mdx
@@ -18,7 +18,7 @@ npm install dockview-core
 Firstly, install the `dockview` library:
 
 ```sh
-npm install dockview
+npm install dockview-react
 ```
 </FrameworkSpecific>
 

diff --git a/packages/docs/docs/overview/getStarted/theme.mdx b/packages/docs/docs/overview/getStarted/theme.mdx
@@ -19,10 +19,15 @@ Firstly, you should import `dockview.css`:
 
 <FrameworkSpecific framework='React'>
 ```css
-@import './node_modules/dockview/dist/styles/dockview.css';
+@import './node_modules/dockview-react/dist/styles/dockview.css';
 ```
 </FrameworkSpecific>
 
+<FrameworkSpecific framework='Vue'>
+```css
+@import './node_modules/dockview-vue/dist/styles/dockview.css';
+```
+</FrameworkSpecific>
 
 
 ## Provided themes

diff --git a/packages/docs/sandboxes/iframe-dockview/src/app.tsx b/packages/docs/sandboxes/iframe-dockview/src/app.tsx
@@ -1,13 +1,33 @@
-import { DockviewReact, DockviewReadyEvent } from 'dockview';
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
 import * as React from 'react';
 
 const components = {
-    iframeComponent: () => {
+    iframeComponent: (props: IDockviewPanelProps) => {
+        const [enabled, setEnabled] = React.useState<boolean>(
+            props.api.isActive
+        );
+
+        React.useEffect(() => {
+            const disposable = props.api.onDidActiveChange((event) => {
+                setEnabled(event.isActive);
+                console.log(event);
+            });
+
+            return () => {
+                disposable.dispose();
+            };
+        }, [props.api]);
+
         return (
             <iframe
                 style={{
                     width: '100%',
                     height: '100%',
+                    pointerEvents: enabled ? 'inherit' : 'none',
                 }}
                 src="https://dockview.dev"
             />

diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
@@ -15,8 +15,6 @@
     }
 }
 
-
-
 .data-table {
     table {
         font-size: 11px;
@@ -58,35 +56,41 @@
         .selected {
             background-color: #4864dc;
         }
+    }
 
-        .demo-button {
-            min-width: 50px;
-            padding: 0px 2px;
-            border-radius: 0px;
-            display: flex;
-            flex-grow: 1;
-            align-items: center;
-            outline: 1px solid #4c65d4;
+    .button-group {
+        button {
+            margin-right: 0px;
         }
+    }
 
-        .demo-icon-button {
-            outline: 1px solid #4c65d4;
-            flex-grow: 1;
-            display: flex;
-            align-items: center;
-            border-radius: 0px;
-            padding: 0px 4px;
-            border: none;
-            cursor: pointer;
+    .demo-button {
+        min-width: 50px;
+        padding: 0px 2px;
+        border-radius: 0px;
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        outline: 1px solid #4c65d4;
+    }
 
-            &:disabled {
-                color: gray;
-                cursor: help;
-            }
+    .demo-icon-button {
+        outline: 1px solid #4c65d4;
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        border-radius: 0px;
+        padding: 0px 4px;
+        border: none;
+        cursor: pointer;
+
+        &:disabled {
+            color: gray;
+            cursor: help;
+        }
 
-            span {
-                font-size: 16px;
-            }
+        span {
+            font-size: 16px;
         }
     }
 }
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
@@ -13,7 +13,7 @@ import { GridActions } from './gridActions';
 import { PanelActions } from './panelActions';
 import { GroupActions } from './groupActions';
 import { LeftControls, PrefixHeaderControls, RightControls } from './controls';
-import { Table, usePanelApiMetadata } from './debugPanel';
+import { usePanelApiMetadata } from './debugPanel';
 
 const components = {
     default: (props: IDockviewPanelProps) => {
@@ -26,6 +26,7 @@ const components = {
                     overflow: 'auto',
                     color: 'white',
                     position: 'relative',
+                    padding: 5,
                     // border: '5px dashed purple',
                 }}
             >
@@ -43,12 +44,50 @@ const components = {
                 >
                     {props.api.title}
                 </span>
+
+                <div>
+                    <span>{'Panel Rendering Mode: '}</span>
+                    <span>{metadata.renderer.value}</span>
+                    <button
+                        onClick={() => {
+                            props.api.setRenderer(
+                                props.api.renderer === 'always'
+                                    ? 'onlyWhenVisible'
+                                    : 'always'
+                            );
+                        }}
+                    >
+                        Toggle
+                    </button>
+                </div>
             </div>
         );
     },
-    iframe: () => {
+    nested: (props: IDockviewPanelProps) => {
+        return (
+            <DockviewReact
+                components={components}
+                onReady={(event: DockviewReadyEvent) => {
+                    event.api.addPanel({ id: 'panel_1', component: 'default' });
+                    event.api.addPanel({ id: 'panel_2', component: 'default' });
+                    event.api.addPanel({
+                        id: 'panel_3',
+                        component: 'default',
+                        floating: true,
+                    });
+                }}
+                className={'dockview-theme-abyss'}
+            />
+        );
+    },
+    iframe: (props: IDockviewPanelProps) => {
         return (
             <iframe
+                onMouseDown={() => {
+                    if (!props.api.isActive) {
+                        props.api.setActive();
+                    }
+                }}
                 style={{
                     width: '100%',
                     height: '100%',
@@ -210,6 +249,7 @@ const DockviewDemo = (props: { theme?: string }) => {
                 padding: '8px',
                 backgroundColor: 'rgba(0,0,50,0.25)',
                 borderRadius: '8px',
+                position: 'relative',
                 ...css,
             }}
         >