From 5d6055c4d21d317a0478dca1d605be8a810f3aed Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Wed, 1 May 2024 20:22:57 +0100
Subject: [PATCH] feat: vue3

---
 packages/dockview-react/gulpfile.js           |  6 -----
 packages/dockview-react/src/index.scss        |  0
 .../dockview-vue/src/dockview/dockview.vue    | 24 -------------------
 .../dockview/basic/typescript/src/index.ts    |  8 +++++--
 4 files changed, 6 insertions(+), 32 deletions(-)
 delete mode 100644 packages/dockview-react/gulpfile.js
 delete mode 100644 packages/dockview-react/src/index.scss

diff --git a/packages/dockview-react/gulpfile.js b/packages/dockview-react/gulpfile.js
deleted file mode 100644
index 4b62c983d..000000000
--- a/packages/dockview-react/gulpfile.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const gulp = require('gulp');
-const buildfile = require('../../scripts/build');
-
-buildfile.init();
-
-gulp.task('run', gulp.series(['sass']));
diff --git a/packages/dockview-react/src/index.scss b/packages/dockview-react/src/index.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/dockview-vue/src/dockview/dockview.vue b/packages/dockview-vue/src/dockview/dockview.vue
index 38a05ec75..d934e4a46 100644
--- a/packages/dockview-vue/src/dockview/dockview.vue
+++ b/packages/dockview-vue/src/dockview/dockview.vue
@@ -2,13 +2,6 @@
 import {
     DockviewApi,
     DockviewComponent,
-    type IContentRenderer,
-    type ITabRenderer,
-    type IWatermarkRenderer,
-    type IDockviewPanelProps,
-    type IDockviewPanelHeaderProps,
-    type IGroupPanelBaseProps,
-    type IWatermarkPanelProps,
     type DockviewOptions,
     PROPERTY_KEYS,
     type DockviewFrameworkOptions,
@@ -22,7 +15,6 @@ import {
     watch,
     onBeforeUnmount,
     markRaw,
-    toRaw,
     getCurrentInstance,
 } from 'vue';
 import {
@@ -41,18 +33,6 @@ interface VueProps {
     prefixHeaderActionsComponent?: string;
 }
 
-const VUE_PROPERTIES = (() => {
-    const _value: Record<keyof VueProps, undefined> = {
-        watermarkComponent: undefined,
-        defaultTabComponent: undefined,
-        rightHeaderActionsComponent: undefined,
-        leftHeaderActionsComponent: undefined,
-        prefixHeaderActionsComponent: undefined,
-    };
-
-    return Object.keys(_value) as (keyof VueProps)[];
-})();
-
 type VueEvents = {
     ready: [event: DockviewReadyEvent];
 };
@@ -73,10 +53,6 @@ function extractCoreOptions(props: IDockviewVueProps): DockviewOptions {
 
 const emit = defineEmits<VueEvents>();
 
-/**
- * Anything here that is a Vue.js component should not be reactive
- * i.e. markRaw(toRaw(...))
- */
 const props = defineProps<IDockviewVueProps>();
 
 const el = ref<HTMLElement | null>(null);
diff --git a/packages/docs/templates/dockview/basic/typescript/src/index.ts b/packages/docs/templates/dockview/basic/typescript/src/index.ts
index fdd92a2bc..11820784b 100644
--- a/packages/docs/templates/dockview/basic/typescript/src/index.ts
+++ b/packages/docs/templates/dockview/basic/typescript/src/index.ts
@@ -15,7 +15,6 @@ class Panel implements IContentRenderer {
 
     constructor() {
         this._element = document.createElement('div');
-
         this._element.style.color = 'white';
     }
 
@@ -28,7 +27,12 @@ document.getElementById('app').className = 'dockview-theme-abyss';
 
 const dockview = new DockviewComponent({
     parentElement: document.getElementById('app'),
-    components: { default: Panel },
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'default':
+                return new Panel();
+        }
+    },
 });
 
 const api = new DockviewApi(dockview);