feat: vue3

packages/dockview-react/gulpfile.js

@@ -1,6 +0,0 @@
-const gulp = require('gulp');
-const buildfile = require('../../scripts/build');
-
-buildfile.init();
-
-gulp.task('run', gulp.series(['sass']));

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

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