dockview-vue 1.15.2 → 1.16.0

package/dist/dockview-vue.cjs.js

@@ -165,6 +165,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     rootOverlayModel: {},
     locked: { type: Boolean },
     disableDnd: { type: Boolean },
+    className: {},
     gap: {},
     watermarkComponent: {},
     defaultTabComponent: {},
@@ -207,7 +208,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         throw new Error("dockview-vue: getCurrentInstance() returned null");
       }
       const frameworkOptions = {
-        parentElement: el.value,
         createComponent(options) {
           const component = findComponent(
             inst,
@@ -272,14 +272,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           );
         } : void 0
       };
-      const dockview = new dockviewCore.DockviewComponent({
+      const api = dockviewCore.createDockview(el.value, {
         ...extractCoreOptions(props),
         ...frameworkOptions
       });
       const { clientWidth, clientHeight } = el.value;
-      dockview.layout(clientWidth, clientHeight);
-      instance.value = vue.markRaw(dockview);
-      emit("ready", { api: new dockviewCore.DockviewApi(dockview) });
+      api.layout(clientWidth, clientHeight);
+      instance.value = vue.markRaw(api);
+      emit("ready", { api });
     });
     vue.onBeforeUnmount(() => {
       if (instance.value) {

package/dist/dockview-vue.es.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { PROPERTY_KEYS, DockviewComponent, DockviewApi } from "dockview-core";
+import { PROPERTY_KEYS, createDockview } from "dockview-core";
 export * from "dockview-core";
 import { createVNode, render, cloneVNode, defineComponent, ref, watch, onMounted, getCurrentInstance, markRaw, onBeforeUnmount, openBlock, createElementBlock } from "vue";
 function findComponent(parent, name) {
@@ -164,6 +164,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     rootOverlayModel: {},
     locked: { type: Boolean },
     disableDnd: { type: Boolean },
+    className: {},
     gap: {},
     watermarkComponent: {},
     defaultTabComponent: {},
@@ -206,7 +207,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         throw new Error("dockview-vue: getCurrentInstance() returned null");
       }
       const frameworkOptions = {
-        parentElement: el.value,
         createComponent(options) {
           const component = findComponent(
             inst,
@@ -271,14 +271,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           );
         } : void 0
       };
-      const dockview = new DockviewComponent({
+      const api = createDockview(el.value, {
         ...extractCoreOptions(props),
         ...frameworkOptions
       });
       const { clientWidth, clientHeight } = el.value;
-      dockview.layout(clientWidth, clientHeight);
-      instance.value = markRaw(dockview);
-      emit("ready", { api: new DockviewApi(dockview) });
+      api.layout(clientWidth, clientHeight);
+      instance.value = markRaw(api);
+      emit("ready", { api });
     });
     onBeforeUnmount(() => {
       if (instance.value) {

package/dist/dockview-vue.umd.js

@@ -165,6 +165,7 @@ var __publicField = (obj, key, value) => {
       rootOverlayModel: {},
       locked: { type: Boolean },
       disableDnd: { type: Boolean },
+      className: {},
       gap: {},
       watermarkComponent: {},
       defaultTabComponent: {},
@@ -207,7 +208,6 @@ var __publicField = (obj, key, value) => {
           throw new Error("dockview-vue: getCurrentInstance() returned null");
         }
         const frameworkOptions = {
-          parentElement: el.value,
           createComponent(options) {
             const component = findComponent(
               inst,
@@ -272,14 +272,14 @@ var __publicField = (obj, key, value) => {
             );
           } : void 0
         };
-        const dockview = new dockviewCore.DockviewComponent({
+        const api = dockviewCore.createDockview(el.value, {
           ...extractCoreOptions(props),
           ...frameworkOptions
         });
         const { clientWidth, clientHeight } = el.value;
-        dockview.layout(clientWidth, clientHeight);
-        instance.value = vue.markRaw(dockview);
-        emit("ready", { api: new dockviewCore.DockviewApi(dockview) });
+        api.layout(clientWidth, clientHeight);
+        instance.value = vue.markRaw(api);
+        emit("ready", { api });
       });
       vue.onBeforeUnmount(() => {
         if (instance.value) {

package/dist/styles/dockview.css

@@ -1,16 +1,3 @@
-.dv-render-overlay {
-  position: absolute;
-  z-index: 1;
-  height: 100%;
-}
-.dv-render-overlay.dv-render-overlay-float {
-  z-index: 999;
-}
-
-.dv-debug .dv-render-overlay {
-  outline: 1px solid red;
-  outline-offset: -1;
-}
 .dockview-svg {
   display: inline-block;
   fill: currentcolor;
@@ -257,7 +244,7 @@
 .dockview-theme-replit .groupview.inactive-group {
   border: 1px solid transparent;
 }
-.dockview-theme-replit .vertical > .sash-container > .sash::after {
+.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::after {
   content: "";
   height: 4px;
   width: 40px;
@@ -268,10 +255,10 @@
   background-color: var(--dv-separator-handle-background-color);
   position: absolute;
 }
-.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {
+.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled):hover::after {
   background-color: var(--dv-separator-handle-hover-background-color);
 }
-.dockview-theme-replit .horizontal > .sash-container > .sash::after {
+.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled)::after {
   content: "";
   height: 40px;
   width: 4px;
@@ -282,7 +269,7 @@
   background-color: var(--dv-separator-handle-background-color);
   position: absolute;
 }
-.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {
+.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled):hover::after {
   background-color: var(--dv-separator-handle-hover-background-color);
 }
 .drop-target {
@@ -319,6 +306,74 @@
 .drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {
   border-right: 1px solid var(--dv-drag-over-border-color);
 }
+.dv-dockview {
+  position: relative;
+  background-color: var(--dv-group-view-background-color);
+}
+.dv-dockview .dv-watermark-container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+}
+.dv-dockview .dv-overlay-render-container {
+  position: relative;
+}
+
+.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
+  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
+  color: var(--dv-activegroup-visiblepanel-tab-color);
+}
+.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
+  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
+  color: var(--dv-activegroup-hiddenpanel-tab-color);
+}
+.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
+  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
+  color: var(--dv-inactivegroup-visiblepanel-tab-color);
+}
+.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
+  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
+  color: var(--dv-inactivegroup-hiddenpanel-tab-color);
+}
+
+/**
+ * when a tab is dragged we lose the above stylings because they are conditional on parent elements
+ * therefore we also set some stylings for the dragging event
+ **/
+.tab.dv-tab-dragging {
+  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
+  color: var(--dv-activegroup-visiblepanel-tab-color);
+}
+.groupview {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--dv-group-view-background-color);
+  overflow: hidden;
+}
+.groupview:focus {
+  outline: none;
+}
+.groupview.empty > .tabs-and-actions-container {
+  display: none;
+}
+.groupview > .content-container {
+  flex-grow: 1;
+  min-height: 0;
+  outline: none;
+}
+.dv-root-wrapper {
+  height: 100%;
+  width: 100%;
+}
+.grid-view,
+.branch-node {
+  height: 100%;
+  width: 100%;
+}
 .dv-debug .dv-resize-container .dv-resize-handle-top {
   background-color: red;
 }
@@ -344,9 +399,6 @@
   border: 1px solid var(--dv-tab-divider-color);
   box-shadow: var(--dv-floating-box-shadow);
 }
-.dv-resize-container.dv-bring-to-front {
-  z-index: 998;
-}
 .dv-resize-container.dv-resize-container-dragging {
   opacity: 0.5;
 }
@@ -422,73 +474,17 @@
   position: absolute;
   cursor: se-resize;
 }
-.dv-dockview {
-  position: relative;
-  background-color: var(--dv-group-view-background-color);
-}
-.dv-dockview .dv-watermark-container {
+.dv-render-overlay {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  height: 100%;
-  width: 100%;
   z-index: 1;
-}
-.dv-dockview .dv-overlay-render-container {
-  position: relative;
-}
-
-.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
-  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
-  color: var(--dv-activegroup-visiblepanel-tab-color);
-}
-.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
-  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
-  color: var(--dv-activegroup-hiddenpanel-tab-color);
-}
-.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
-  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
-  color: var(--dv-inactivegroup-visiblepanel-tab-color);
-}
-.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
-  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
-  color: var(--dv-inactivegroup-hiddenpanel-tab-color);
-}
-
-/**
- * when a tab is dragged we lose the above stylings because they are conditional on parent elements
- * therefore we also set some stylings for the dragging event
- **/
-.tab.dv-tab-dragging {
-  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
-  color: var(--dv-activegroup-visiblepanel-tab-color);
-}
-.groupview {
-  display: flex;
-  flex-direction: column;
   height: 100%;
-  background-color: var(--dv-group-view-background-color);
-  overflow: hidden;
 }
-.groupview:focus {
-  outline: none;
-}
-.groupview.empty > .tabs-and-actions-container {
-  display: none;
-}
-.groupview > .content-container {
-  flex-grow: 1;
-  min-height: 0;
-  outline: none;
-}
-.dv-root-wrapper {
-  height: 100%;
-  width: 100%;
+.dv-render-overlay.dv-render-overlay-float {
+  z-index: 998;
 }
-.grid-view,
-.branch-node {
-  height: 100%;
-  width: 100%;
+.dv-debug .dv-render-overlay {
+  outline: 1px solid red;
+  outline-offset: -1;
 }
 .pane-container {
   height: 100%;
@@ -744,7 +740,7 @@
   align-items: center;
   padding: 0px 8px;
   white-space: nowrap;
-  text-overflow: elipsis;
+  text-overflow: ellipsis;
 }
 .tab .dv-default-tab .dv-default-tab-content {
   padding: 0px 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-vue",
-  "version": "1.15.2",
+  "version": "1.16.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",
@@ -52,6 +52,6 @@
     "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-vue --coverage"
   },
   "dependencies": {
-    "dockview-core": "^1.15.2"
+    "dockview-core": "^1.16.0"
   }
 }