From bc278f2beb5ad85592bdc270fc274a8a6f17c01d Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 28 May 2024 22:28:31 +0100
Subject: [PATCH] chore: vue3 docs

---
 .../react/dockview/demo-dockview/src/app.tsx  | 24 ++++++++++++++
 .../docs/src/components/ui/codeRunner.tsx     |  2 +-
 .../templates/dockview/basic/vue/package.json | 32 -------------------
 .../templates/dockview/basic/vue/src/index.ts |  9 ++++--
 .../dockview/basic/vue/tsconfig.json          | 18 -----------
 .../dockview/custom-header/vue/src/index.ts   |  6 ++--
 .../dockview/floating-groups/vue/src/index.ts |  6 ++--
 .../dockview/group-actions/vue/src/index.ts   |  6 ++--
 .../dockview/layout/vue/src/index.ts          |  6 ++--
 .../dockview/locked/vue/src/index.ts          |  9 ++++--
 .../dockview/maximize-group/vue/src/index.ts  |  9 +++---
 .../dockview/nested/vue/src/index.ts          |  9 ++++--
 .../dockview/popout-group/vue/src/index.ts    |  6 ++--
 .../dockview/render-mode/vue/src/index.ts     |  9 ++++--
 .../resize-container/vue/src/index.ts         |  9 ++++--
 .../dockview/resize/vue/src/index.ts          |  9 ++++--
 .../dockview/scrollbars/vue/src/index.ts      |  5 ++-
 .../dockview/tabview/vue/src/index.ts         |  6 ++--
 .../update-parameters/vue/src/index.ts        |  6 ++--
 .../dockview/update-title/vue/src/index.ts    |  9 ++++--
 .../dockview/watermark/vue/src/index.ts       |  6 ++--
 21 files changed, 98 insertions(+), 103 deletions(-)
 delete mode 100644 packages/docs/templates/dockview/basic/vue/package.json
 delete mode 100644 packages/docs/templates/dockview/basic/vue/tsconfig.json

diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
index 7631749e1..d77773b24 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
@@ -26,6 +26,7 @@ const components = {
                     overflow: 'auto',
                     color: 'white',
                     position: 'relative',
+                    border: 'var(--demo-border)',
                 }}
             >
                 {/* <Table data={metadata} /> */}
@@ -180,6 +181,19 @@ const DockviewDemo = (props: { theme?: string }) => {
 
     const [watermark, setWatermark] = React.useState<boolean>(false);
 
+    const [gapCheck, setGapCheck] = React.useState<boolean>(false);
+
+    const css = React.useMemo(() => {
+        if (!gapCheck) {
+            return {};
+        }
+
+        return {
+            '--dv-group-gap-size': '0.5rem',
+            '--demo-border': '5px dashed purple',
+        } as React.CSSProperties;
+    }, [gapCheck]);
+
     return (
         <div
             style={{
@@ -190,6 +204,7 @@ const DockviewDemo = (props: { theme?: string }) => {
                 padding: '8px',
                 backgroundColor: 'rgba(0,0,50,0.25)',
                 borderRadius: '8px',
+                ...css,
             }}
         >
             <div>
@@ -212,6 +227,15 @@ const DockviewDemo = (props: { theme?: string }) => {
                         activeGroup={activeGroup}
                     />
                 )}
+                {/* <div>
+                    <button
+                        onClick={() => {
+                            setGapCheck(!gapCheck);
+                        }}
+                    >
+                        {gapCheck ? 'Disable Gap Check' : 'Enable Gap Check'}
+                    </button>
+                </div> */}
             </div>
             <div
                 style={{
diff --git a/packages/docs/src/components/ui/codeRunner.tsx b/packages/docs/src/components/ui/codeRunner.tsx
index 620392706..785a89ceb 100644
--- a/packages/docs/src/components/ui/codeRunner.tsx
+++ b/packages/docs/src/components/ui/codeRunner.tsx
@@ -3,7 +3,7 @@ import { useActiveFramework } from '../frameworkSpecific';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 
 const BASE_SANDBOX_URL =
-    'https://codesandbox.io/s/github/mathuo/dockview/tree/master/packages/docs';
+    'https://codesandbox.io/s/github/mathuo/dockview/tree/gh-pages';
 
 export const _CodeRunner = (props: { id: string; height: number }) => {
     const [framework] = useActiveFramework();
diff --git a/packages/docs/templates/dockview/basic/vue/package.json b/packages/docs/templates/dockview/basic/vue/package.json
deleted file mode 100644
index 6936b9103..000000000
--- a/packages/docs/templates/dockview/basic/vue/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "dockview.resize",
-  "description": "",
-  "keywords": [
-    "dockview"
-  ],
-  "version": "1.0.0",
-  "main": "src/index.tsx",
-  "dependencies": {
-    "dockview": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "typescript": "^4.9.5",
-    "react-scripts": "*"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
-}
diff --git a/packages/docs/templates/dockview/basic/vue/src/index.ts b/packages/docs/templates/dockview/basic/vue/src/index.ts
index d0d895d03..472011956 100644
--- a/packages/docs/templates/dockview/basic/vue/src/index.ts
+++ b/packages/docs/templates/dockview/basic/vue/src/index.ts
@@ -1,7 +1,10 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+import {
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',
diff --git a/packages/docs/templates/dockview/basic/vue/tsconfig.json b/packages/docs/templates/dockview/basic/vue/tsconfig.json
deleted file mode 100644
index cdc4fb5f5..000000000
--- a/packages/docs/templates/dockview/basic/vue/tsconfig.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-    "compilerOptions": {
-        "outDir": "build/dist",
-        "module": "esnext",
-        "target": "es5",
-        "lib": ["es6", "dom"],
-        "sourceMap": true,
-        "allowJs": true,
-        "jsx": "react-jsx",
-        "moduleResolution": "node",
-        "rootDir": "src",
-        "forceConsistentCasingInFileNames": true,
-        "noImplicitReturns": true,
-        "noImplicitThis": true,
-        "noImplicitAny": true,
-        "strictNullChecks": true
-    }
-}
diff --git a/packages/docs/templates/dockview/custom-header/vue/src/index.ts b/packages/docs/templates/dockview/custom-header/vue/src/index.ts
index c36144f5b..e4cd7007f 100644
--- a/packages/docs/templates/dockview/custom-header/vue/src/index.ts
+++ b/packages/docs/templates/dockview/custom-header/vue/src/index.ts
@@ -1,11 +1,11 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
 import {
+    DockviewVue,
     DockviewReadyEvent,
     IDockviewPanelHeaderProps,
     IDockviewPanelProps,
-} from 'dockview-core';
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',
diff --git a/packages/docs/templates/dockview/floating-groups/vue/src/index.ts b/packages/docs/templates/dockview/floating-groups/vue/src/index.ts
index e3cfbc0bf..bb436aa14 100644
--- a/packages/docs/templates/dockview/floating-groups/vue/src/index.ts
+++ b/packages/docs/templates/dockview/floating-groups/vue/src/index.ts
@@ -1,12 +1,12 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
 import {
+    DockviewVue,
     DockviewApi,
     DockviewReadyEvent,
     IDockviewHeaderActionsProps,
     IDockviewPanelProps,
-} from 'dockview-core';
+} from 'dockview-vue';
 
 let panelCount = 0;
 
diff --git a/packages/docs/templates/dockview/group-actions/vue/src/index.ts b/packages/docs/templates/dockview/group-actions/vue/src/index.ts
index 77d1ae8f6..1a4b730de 100644
--- a/packages/docs/templates/dockview/group-actions/vue/src/index.ts
+++ b/packages/docs/templates/dockview/group-actions/vue/src/index.ts
@@ -1,11 +1,11 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
 import {
+    DockviewVue,
     DockviewReadyEvent,
     IDockviewHeaderActionsProps,
     IDockviewPanelProps,
-} from 'dockview-core';
+} from 'dockview-vue';
 import './app.css';
 
 const LeftAction = defineComponent({
diff --git a/packages/docs/templates/dockview/layout/vue/src/index.ts b/packages/docs/templates/dockview/layout/vue/src/index.ts
index 2631b0399..c2c40f005 100644
--- a/packages/docs/templates/dockview/layout/vue/src/index.ts
+++ b/packages/docs/templates/dockview/layout/vue/src/index.ts
@@ -1,12 +1,12 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
 import {
+    DockviewVue,
     DockviewApi,
     DockviewReadyEvent,
     IDockviewHeaderActionsProps,
     IDockviewPanelProps,
-} from 'dockview-core';
+} from 'dockview-vue';
 
 let panelCount = 0;
 
diff --git a/packages/docs/templates/dockview/locked/vue/src/index.ts b/packages/docs/templates/dockview/locked/vue/src/index.ts
index 45d89386d..45864f4b1 100644
--- a/packages/docs/templates/dockview/locked/vue/src/index.ts
+++ b/packages/docs/templates/dockview/locked/vue/src/index.ts
@@ -1,7 +1,10 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+import {
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',
diff --git a/packages/docs/templates/dockview/maximize-group/vue/src/index.ts b/packages/docs/templates/dockview/maximize-group/vue/src/index.ts
index 8e6c90044..0df65e220 100644
--- a/packages/docs/templates/dockview/maximize-group/vue/src/index.ts
+++ b/packages/docs/templates/dockview/maximize-group/vue/src/index.ts
@@ -1,11 +1,12 @@
-import 'dockview-core/dist/styles/dockview.css';
-import { Prop, PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
+import 'dockview-vue/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+
 import {
+    DockviewVue,
     DockviewReadyEvent,
     IDockviewHeaderActionsProps,
     IDockviewPanelProps,
-} from 'dockview-core';
+} from 'dockview-vue';
 
 let panelCount = 0;
 
diff --git a/packages/docs/templates/dockview/nested/vue/src/index.ts b/packages/docs/templates/dockview/nested/vue/src/index.ts
index 68c6d0842..7ce9b955e 100644
--- a/packages/docs/templates/dockview/nested/vue/src/index.ts
+++ b/packages/docs/templates/dockview/nested/vue/src/index.ts
@@ -1,7 +1,10 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+import {
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',
diff --git a/packages/docs/templates/dockview/popout-group/vue/src/index.ts b/packages/docs/templates/dockview/popout-group/vue/src/index.ts
index a0745da0c..abc79328a 100644
--- a/packages/docs/templates/dockview/popout-group/vue/src/index.ts
+++ b/packages/docs/templates/dockview/popout-group/vue/src/index.ts
@@ -1,12 +1,12 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
 import {
+    DockviewVue,
     DockviewApi,
     DockviewReadyEvent,
     IDockviewHeaderActionsProps,
     IDockviewPanelProps,
-} from 'dockview-core';
+} from 'dockview-vue';
 
 let panelCount = 0;
 
diff --git a/packages/docs/templates/dockview/render-mode/vue/src/index.ts b/packages/docs/templates/dockview/render-mode/vue/src/index.ts
index 5bac60518..7f6434a72 100644
--- a/packages/docs/templates/dockview/render-mode/vue/src/index.ts
+++ b/packages/docs/templates/dockview/render-mode/vue/src/index.ts
@@ -1,7 +1,10 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+import {
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',
diff --git a/packages/docs/templates/dockview/resize-container/vue/src/index.ts b/packages/docs/templates/dockview/resize-container/vue/src/index.ts
index 0d9ffe571..6e8a4d980 100644
--- a/packages/docs/templates/dockview/resize-container/vue/src/index.ts
+++ b/packages/docs/templates/dockview/resize-container/vue/src/index.ts
@@ -1,7 +1,10 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+import {
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',
diff --git a/packages/docs/templates/dockview/resize/vue/src/index.ts b/packages/docs/templates/dockview/resize/vue/src/index.ts
index 56d227023..3f85aa9f2 100644
--- a/packages/docs/templates/dockview/resize/vue/src/index.ts
+++ b/packages/docs/templates/dockview/resize/vue/src/index.ts
@@ -1,7 +1,10 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+import {
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 import './resize.css';
 
 const Panel = defineComponent({
diff --git a/packages/docs/templates/dockview/scrollbars/vue/src/index.ts b/packages/docs/templates/dockview/scrollbars/vue/src/index.ts
index 728baa889..7b16c5cb5 100644
--- a/packages/docs/templates/dockview/scrollbars/vue/src/index.ts
+++ b/packages/docs/templates/dockview/scrollbars/vue/src/index.ts
@@ -1,7 +1,6 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
-import { DockviewReadyEvent } from 'dockview-core';
+import { DockviewVue, DockviewReadyEvent } from 'dockview-vue';
 
 const TEXT =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
diff --git a/packages/docs/templates/dockview/tabview/vue/src/index.ts b/packages/docs/templates/dockview/tabview/vue/src/index.ts
index fb4ffc6a9..54c1278d6 100644
--- a/packages/docs/templates/dockview/tabview/vue/src/index.ts
+++ b/packages/docs/templates/dockview/tabview/vue/src/index.ts
@@ -1,11 +1,11 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
 import {
+    DockviewVue,
     DockviewApi,
     DockviewReadyEvent,
     IDockviewPanelProps,
-} from 'dockview-core';
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',
diff --git a/packages/docs/templates/dockview/update-parameters/vue/src/index.ts b/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
index ba18612c1..ab057b1c4 100644
--- a/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
+++ b/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
@@ -1,11 +1,11 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
 import {
+    DockviewVue,
     DockviewReadyEvent,
     IDockviewPanelHeaderProps,
     IDockviewPanelProps,
-} from 'dockview-core';
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',
diff --git a/packages/docs/templates/dockview/update-title/vue/src/index.ts b/packages/docs/templates/dockview/update-title/vue/src/index.ts
index 7a0d1d427..8364ecb1c 100644
--- a/packages/docs/templates/dockview/update-title/vue/src/index.ts
+++ b/packages/docs/templates/dockview/update-title/vue/src/index.ts
@@ -1,7 +1,10 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+import {
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',
diff --git a/packages/docs/templates/dockview/watermark/vue/src/index.ts b/packages/docs/templates/dockview/watermark/vue/src/index.ts
index c0478b929..c3a5569ec 100644
--- a/packages/docs/templates/dockview/watermark/vue/src/index.ts
+++ b/packages/docs/templates/dockview/watermark/vue/src/index.ts
@@ -1,13 +1,13 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
 import {
+    DockviewVue,
     DockviewApi,
     DockviewReadyEvent,
     IDockviewPanelProps,
     IWatermarkPanelProps,
     Orientation,
-} from 'dockview-core';
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',