Merge pull request #617 from mathuo/562-dockview-framework-wrappers-vuejs-angular-javascript-etc-3

chore: vue3 docs

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={{

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();

packages/docs/templates/dockview/basic/vue/package.json

@@ -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"
-  ]
-}

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 {
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',

packages/docs/templates/dockview/basic/vue/tsconfig.json

@@ -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
-    }
-}

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',

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;
 

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({

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;
 

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 {
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',

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

@@ -1,11 +1,12 @@
-import 'dockview-core/dist/styles/dockview.css';
+import 'dockview-vue/dist/styles/dockview.css';
-import { Prop, PropType, createApp, defineComponent } from 'vue';
+import { PropType, createApp, defineComponent } from 'vue';
-import { DockviewVue } from 'dockview-vue';
+
 import {
+    DockviewVue,
     DockviewReadyEvent,
     IDockviewHeaderActionsProps,
     IDockviewPanelProps,
-} from 'dockview-core';
+} from 'dockview-vue';
 
 let panelCount = 0;
 

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 {
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',

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;
 

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 {
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',

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 {
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',

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 {
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 import './resize.css';
 
 const Panel = defineComponent({

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 { DockviewVue, DockviewReadyEvent } from 'dockview-vue';
-import { DockviewReadyEvent } from 'dockview-core';
 
 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.';

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',

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',

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 {
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+    DockviewVue,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-vue';
 
 const Panel = defineComponent({
     name: 'Panel',

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',