dockview-vue 6.2.2 → 6.4.0

package/README.md

@@ -26,6 +26,7 @@ Please see the website: https://dockview.dev
 -   Support for split-views, grid-views and 'dockable' views
 -   Themeable and customizable
 -   Tab and Group docking / Drag n' Drop
+-   Touch & mobile support
 -   Popout Windows
 -   Floating Groups
 -   Edge Groups

package/dist/dockview-vue.cjs.js

@@ -225,6 +225,32 @@ class VueTabGroupChipRenderer extends AbstractVueRenderer {
     this._renderDisposable?.dispose();
   }
 }
+class VueGroupDragGhostRenderer extends AbstractVueRenderer {
+  _renderDisposable;
+  constructor(component, parent) {
+    super(component, parent);
+    this.element.style.height = "";
+    this.element.style.width = "";
+    this.element.style.display = "inline-flex";
+  }
+  init(params) {
+    this._renderDisposable?.dispose();
+    this._renderDisposable = mountVueComponent(
+      this.component,
+      this.parent,
+      {
+        params: {
+          group: params.group,
+          api: params.api
+        }
+      },
+      this.element
+    );
+  }
+  dispose() {
+    this._renderDisposable?.dispose();
+  }
+}
 class VuePart {
   constructor(element, vueComponent, parent, props) {
     this.element = element;
@@ -263,12 +289,14 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     disableFloatingGroups: { type: Boolean },
     floatingGroupBounds: {},
     popoutUrl: {},
+    nonce: { type: [String, Function] },
     defaultRenderer: {},
     defaultHeaderPosition: {},
     debug: { type: Boolean },
     dndEdges: { type: [Boolean, Object] },
     rootOverlayModel: {},
     disableDnd: { type: Boolean },
+    dndStrategy: {},
     locked: { type: Boolean },
     className: {},
     noPanelsOverlay: {},
@@ -278,6 +306,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     getTabContextMenuItems: { type: Function },
     getTabGroupChipContextMenuItems: { type: Function },
     createTabGroupChipComponent: { type: Function },
+    createGroupDragGhostComponent: { type: Function },
     tabGroupColors: {},
     tabGroupAccent: {},
     watermarkComponent: {},
@@ -285,7 +314,8 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     rightHeaderActionsComponent: {},
     leftHeaderActionsComponent: {},
     prefixHeaderActionsComponent: {},
-    tabGroupChipComponent: {}
+    tabGroupChipComponent: {},
+    groupDragGhostComponent: {}
   },
   emits: ["ready", "didDrop", "willDrop"],
   setup(__props, { emit: __emit }) {
@@ -325,6 +355,22 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         }
       }
     );
+    vue.watch(
+      () => props.groupDragGhostComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createGroupDragGhostComponent: newValue ? () => {
+              const component = findComponent(inst, newValue);
+              return new VueGroupDragGhostRenderer(
+                component,
+                inst
+              );
+            } : void 0
+          });
+        }
+      }
+    );
     vue.watch(
       () => props.defaultTabComponent,
       (newValue) => {
@@ -478,6 +524,13 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           return new VueTabGroupChipRenderer(component, inst);
         };
       }
+      if (props.groupDragGhostComponent) {
+        const ghostComponentName = props.groupDragGhostComponent;
+        coreOptions.createGroupDragGhostComponent = () => {
+          const component = findComponent(inst, ghostComponentName);
+          return new VueGroupDragGhostRenderer(component, inst);
+        };
+      }
       const api = dockviewCore.createDockview(el.value, {
         ...coreOptions,
         ...frameworkOptions
@@ -796,6 +849,7 @@ exports.GridviewVue = _sfc_main$1;
 exports.PaneviewVue = _sfc_main;
 exports.SplitviewVue = _sfc_main$2;
 exports.VueContextMenuItemRenderer = VueContextMenuItemRenderer;
+exports.VueGroupDragGhostRenderer = VueGroupDragGhostRenderer;
 exports.VueHeaderActionsRenderer = VueHeaderActionsRenderer;
 exports.VuePart = VuePart;
 exports.VueRenderer = VueRenderer;

package/dist/dockview-vue.es.js

@@ -224,6 +224,32 @@ class VueTabGroupChipRenderer extends AbstractVueRenderer {
     this._renderDisposable?.dispose();
   }
 }
+class VueGroupDragGhostRenderer extends AbstractVueRenderer {
+  _renderDisposable;
+  constructor(component, parent) {
+    super(component, parent);
+    this.element.style.height = "";
+    this.element.style.width = "";
+    this.element.style.display = "inline-flex";
+  }
+  init(params) {
+    this._renderDisposable?.dispose();
+    this._renderDisposable = mountVueComponent(
+      this.component,
+      this.parent,
+      {
+        params: {
+          group: params.group,
+          api: params.api
+        }
+      },
+      this.element
+    );
+  }
+  dispose() {
+    this._renderDisposable?.dispose();
+  }
+}
 class VuePart {
   constructor(element, vueComponent, parent, props) {
     this.element = element;
@@ -262,12 +288,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     disableFloatingGroups: { type: Boolean },
     floatingGroupBounds: {},
     popoutUrl: {},
+    nonce: { type: [String, Function] },
     defaultRenderer: {},
     defaultHeaderPosition: {},
     debug: { type: Boolean },
     dndEdges: { type: [Boolean, Object] },
     rootOverlayModel: {},
     disableDnd: { type: Boolean },
+    dndStrategy: {},
     locked: { type: Boolean },
     className: {},
     noPanelsOverlay: {},
@@ -277,6 +305,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     getTabContextMenuItems: { type: Function },
     getTabGroupChipContextMenuItems: { type: Function },
     createTabGroupChipComponent: { type: Function },
+    createGroupDragGhostComponent: { type: Function },
     tabGroupColors: {},
     tabGroupAccent: {},
     watermarkComponent: {},
@@ -284,7 +313,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     rightHeaderActionsComponent: {},
     leftHeaderActionsComponent: {},
     prefixHeaderActionsComponent: {},
-    tabGroupChipComponent: {}
+    tabGroupChipComponent: {},
+    groupDragGhostComponent: {}
   },
   emits: ["ready", "didDrop", "willDrop"],
   setup(__props, { emit: __emit }) {
@@ -324,6 +354,22 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         }
       }
     );
+    watch(
+      () => props.groupDragGhostComponent,
+      (newValue) => {
+        if (instance.value) {
+          instance.value.updateOptions({
+            createGroupDragGhostComponent: newValue ? () => {
+              const component = findComponent(inst, newValue);
+              return new VueGroupDragGhostRenderer(
+                component,
+                inst
+              );
+            } : void 0
+          });
+        }
+      }
+    );
     watch(
       () => props.defaultTabComponent,
       (newValue) => {
@@ -477,6 +523,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           return new VueTabGroupChipRenderer(component, inst);
         };
       }
+      if (props.groupDragGhostComponent) {
+        const ghostComponentName = props.groupDragGhostComponent;
+        coreOptions.createGroupDragGhostComponent = () => {
+          const component = findComponent(inst, ghostComponentName);
+          return new VueGroupDragGhostRenderer(component, inst);
+        };
+      }
       const api = createDockview(el.value, {
         ...coreOptions,
         ...frameworkOptions
@@ -796,6 +849,7 @@ export {
   _sfc_main as PaneviewVue,
   _sfc_main$2 as SplitviewVue,
   VueContextMenuItemRenderer,
+  VueGroupDragGhostRenderer,
   VueHeaderActionsRenderer,
   VuePart,
   VueRenderer,

package/dist/dockview-vue.umd.js

@@ -225,6 +225,32 @@
       this._renderDisposable?.dispose();
     }
   }
+  class VueGroupDragGhostRenderer extends AbstractVueRenderer {
+    _renderDisposable;
+    constructor(component, parent) {
+      super(component, parent);
+      this.element.style.height = "";
+      this.element.style.width = "";
+      this.element.style.display = "inline-flex";
+    }
+    init(params) {
+      this._renderDisposable?.dispose();
+      this._renderDisposable = mountVueComponent(
+        this.component,
+        this.parent,
+        {
+          params: {
+            group: params.group,
+            api: params.api
+          }
+        },
+        this.element
+      );
+    }
+    dispose() {
+      this._renderDisposable?.dispose();
+    }
+  }
   class VuePart {
     constructor(element, vueComponent, parent, props) {
       this.element = element;
@@ -263,12 +289,14 @@
       disableFloatingGroups: { type: Boolean },
       floatingGroupBounds: {},
       popoutUrl: {},
+      nonce: { type: [String, Function] },
       defaultRenderer: {},
       defaultHeaderPosition: {},
       debug: { type: Boolean },
       dndEdges: { type: [Boolean, Object] },
       rootOverlayModel: {},
       disableDnd: { type: Boolean },
+      dndStrategy: {},
       locked: { type: Boolean },
       className: {},
       noPanelsOverlay: {},
@@ -278,6 +306,7 @@
       getTabContextMenuItems: { type: Function },
       getTabGroupChipContextMenuItems: { type: Function },
       createTabGroupChipComponent: { type: Function },
+      createGroupDragGhostComponent: { type: Function },
       tabGroupColors: {},
       tabGroupAccent: {},
       watermarkComponent: {},
@@ -285,7 +314,8 @@
       rightHeaderActionsComponent: {},
       leftHeaderActionsComponent: {},
       prefixHeaderActionsComponent: {},
-      tabGroupChipComponent: {}
+      tabGroupChipComponent: {},
+      groupDragGhostComponent: {}
     },
     emits: ["ready", "didDrop", "willDrop"],
     setup(__props, { emit: __emit }) {
@@ -325,6 +355,22 @@
           }
         }
       );
+      vue.watch(
+        () => props.groupDragGhostComponent,
+        (newValue) => {
+          if (instance.value) {
+            instance.value.updateOptions({
+              createGroupDragGhostComponent: newValue ? () => {
+                const component = findComponent(inst, newValue);
+                return new VueGroupDragGhostRenderer(
+                  component,
+                  inst
+                );
+              } : void 0
+            });
+          }
+        }
+      );
       vue.watch(
         () => props.defaultTabComponent,
         (newValue) => {
@@ -478,6 +524,13 @@
             return new VueTabGroupChipRenderer(component, inst);
           };
         }
+        if (props.groupDragGhostComponent) {
+          const ghostComponentName = props.groupDragGhostComponent;
+          coreOptions.createGroupDragGhostComponent = () => {
+            const component = findComponent(inst, ghostComponentName);
+            return new VueGroupDragGhostRenderer(component, inst);
+          };
+        }
         const api = dockviewCore.createDockview(el.value, {
           ...coreOptions,
           ...frameworkOptions
@@ -796,6 +849,7 @@
   exports2.PaneviewVue = _sfc_main;
   exports2.SplitviewVue = _sfc_main$2;
   exports2.VueContextMenuItemRenderer = VueContextMenuItemRenderer;
+  exports2.VueGroupDragGhostRenderer = VueGroupDragGhostRenderer;
   exports2.VueHeaderActionsRenderer = VueHeaderActionsRenderer;
   exports2.VuePart = VuePart;
   exports2.VueRenderer = VueRenderer;

package/dist/styles/dockview.css

@@ -2344,6 +2344,16 @@
   /* Enhanced GPU acceleration during drag */
   will-change: transform, opacity;
 }
+.dv-resize-container .dv-resize-handle-top,
+.dv-resize-container .dv-resize-handle-bottom,
+.dv-resize-container .dv-resize-handle-left,
+.dv-resize-container .dv-resize-handle-right,
+.dv-resize-container .dv-resize-handle-topleft,
+.dv-resize-container .dv-resize-handle-topright,
+.dv-resize-container .dv-resize-handle-bottomleft,
+.dv-resize-container .dv-resize-handle-bottomright {
+  touch-action: none;
+}
 .dv-resize-container .dv-resize-handle-top {
   height: 4px;
   width: calc(100% - 8px);
@@ -2416,6 +2426,55 @@
   position: absolute;
   cursor: se-resize;
 }
+@media (pointer: coarse) {
+  .dv-resize-container .dv-resize-handle-top,
+  .dv-resize-container .dv-resize-handle-bottom {
+    height: 16px;
+    width: calc(100% - 48px);
+    left: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-top {
+    top: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-bottom {
+    bottom: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-left,
+  .dv-resize-container .dv-resize-handle-right {
+    width: 16px;
+    height: calc(100% - 48px);
+    top: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-left {
+    left: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-right {
+    right: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-topleft,
+  .dv-resize-container .dv-resize-handle-topright,
+  .dv-resize-container .dv-resize-handle-bottomleft,
+  .dv-resize-container .dv-resize-handle-bottomright {
+    height: 24px;
+    width: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-topleft {
+    top: -12px;
+    left: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-topright {
+    top: -12px;
+    right: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-bottomleft {
+    bottom: -12px;
+    left: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-bottomright {
+    bottom: -12px;
+    right: -12px;
+  }
+}
 .dv-render-overlay {
   --dv-overlay-z-index: var(--dv-overlay-z-index, 999);
   position: absolute;
@@ -2633,6 +2692,25 @@
   transition-duration: var(--dv-active-sash-transition-duration, 0.1s);
   transition-delay: var(--dv-active-sash-transition-delay, 0.5s);
 }
+@media (pointer: coarse) {
+  .dv-split-view-container .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    content: "";
+    position: absolute;
+    background: transparent;
+  }
+  .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    top: 0;
+    bottom: 0;
+    left: -10px;
+    right: -10px;
+  }
+  .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    left: 0;
+    right: 0;
+    top: -10px;
+    bottom: -10px;
+  }
+}
 .dv-split-view-container .dv-view-container {
   position: relative;
   height: 100%;
@@ -2704,6 +2782,11 @@
 .dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {
   visibility: visible;
 }
+@media (hover: none) {
+  .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
+    visibility: visible;
+  }
+}
 .dv-tab .dv-default-tab {
   position: relative;
   height: 100%;
@@ -2728,6 +2811,11 @@
   border-radius: 2px;
   background-color: var(--dv-icon-hover-background-color);
 }
+@media (pointer: coarse) {
+  .dv-tab .dv-default-tab .dv-default-tab-action {
+    padding: 8px;
+  }
+}
 .dv-tabs-overflow-dropdown-default {
   height: 100%;
   color: var(--dv-activegroup-hiddenpanel-tab-color);
@@ -2748,6 +2836,7 @@
   border-radius: 2px;
   background-color: var(--dv-icon-hover-background-color);
 }
+@charset "UTF-8";
 .dv-tabs-container {
   display: flex;
   position: relative;
@@ -2757,12 +2846,29 @@
   /* GPU optimizations for smooth scrolling */
   will-change: scroll-position;
   transform: translate3d(0, 0, 0);
+  /**
+   * Stop scroll-chaining at the tab strip so that wheel / trackpad
+   * overscroll past the strip's edges doesn't trigger the browser's
+   * swipe-to-go-back-or-forward gesture (and doesn't scroll the page
+   * either). `contain` keeps the native bounce visuals; `none` would
+   * also disable them.
+   */
+  overscroll-behavior: contain;
+  /**
+   * Empty space between tabs (and the scrollbar lane) keeps pan-x so a
+   * flick on those areas produces native momentum scroll. The tab and
+   * chip elements themselves opt out (`touch-action: none`) so the
+   * pointer drag source owns the gesture from pointerdown — a flick on
+   * a tab or chip always becomes a drag, regardless of direction.
+   */
+  touch-action: pan-x;
 }
 .dv-tabs-container.dv-tabs-container-vertical {
   width: 100%;
   height: fit-content;
   max-height: 100%;
   writing-mode: vertical-rl;
+  touch-action: pan-y;
 }
 .dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before, .dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {
   content: " ";
@@ -2802,7 +2908,10 @@
 }
 
 .dv-tab {
-  -webkit-user-drag: element;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   outline: none;
   padding: 0.25rem 0.5rem;
   cursor: pointer;
@@ -2810,6 +2919,7 @@
   box-sizing: border-box;
   font-size: var(--dv-tab-font-size);
   margin: var(--dv-tab-margin);
+  touch-action: none;
 }
 .dv-tab.dv-tab--shifting {
   will-change: transform, margin-left, margin-right, margin-top, margin-bottom;
@@ -2860,6 +2970,7 @@
   white-space: nowrap;
   box-sizing: border-box;
   line-height: 1;
+  touch-action: none;
   background-color: var(--dv-tab-group-color);
   color: white;
 }
@@ -3037,6 +3148,11 @@
 .dv-tabs-and-actions-container .dv-void-container {
   display: flex;
   flex-grow: 1;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  touch-action: none;
 }
 .dv-tabs-and-actions-container .dv-void-container.dv-draggable {
   cursor: grab;

package/dist/types/dockview/types.d.ts

@@ -6,6 +6,7 @@ export interface VueProps {
     leftHeaderActionsComponent?: string;
     prefixHeaderActionsComponent?: string;
     tabGroupChipComponent?: string;
+    groupDragGhostComponent?: string;
 }
 export type VueEvents = {
     ready: [event: DockviewReadyEvent];

package/dist/types/utils.d.ts

@@ -1,4 +1,4 @@
-import type { DockviewApi, DockviewGroupPanel, IContentRenderer, IGroupHeaderProps, IHeaderActionsRenderer, ITabGroupChipRenderer, ITabGroup, ITabRenderer, IWatermarkRenderer, IContextMenuItemRenderer, IContextMenuItemComponentProps, PanelUpdateEvent, Parameters, TabPartInitParameters, WatermarkRendererInitParameters } from 'dockview-core';
+import type { DockviewApi, DockviewGroupPanel, IContentRenderer, IDockviewGroupPanel, IGroupDragGhostRenderer, IGroupHeaderProps, IHeaderActionsRenderer, ITabGroupChipRenderer, ITabGroup, ITabRenderer, IWatermarkRenderer, IContextMenuItemRenderer, IContextMenuItemComponentProps, PanelUpdateEvent, Parameters, TabPartInitParameters, WatermarkRendererInitParameters } from 'dockview-core';
 import { type ComponentOptionsBase, type DefineComponent, type ComponentInternalInstance } from 'vue';
 export type ComponentInterface = ComponentOptionsBase<any, any, any, any, any, any, any, any>;
 export type VueComponent<T = any> = DefineComponent<T>;
@@ -64,6 +64,15 @@ export declare class VueTabGroupChipRenderer extends AbstractVueRenderer impleme
     }): void;
     dispose(): void;
 }
+export declare class VueGroupDragGhostRenderer extends AbstractVueRenderer implements IGroupDragGhostRenderer {
+    private _renderDisposable;
+    constructor(component: VueComponent, parent: ComponentInternalInstance);
+    init(params: {
+        group: IDockviewGroupPanel;
+        api: DockviewApi;
+    }): void;
+    dispose(): void;
+}
 export declare class VuePart<T extends Record<string, any> = any> {
     private readonly element;
     private readonly vueComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockview-vue",
-    "version": "6.2.2",
+    "version": "6.4.0",
     "description": "Vue 3 docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels",
     "keywords": [
         "splitview",
@@ -20,6 +20,8 @@
         "drag-and-drop",
         "drag",
         "drop",
+        "touch",
+        "mobile",
         "typescript",
         "zero-dependency",
         "ide-layout",
@@ -67,7 +69,7 @@
         "format:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx,vue}'"
     },
     "dependencies": {
-        "dockview-core": "^6.2.2"
+        "dockview-core": "^6.4.0"
     },
     "peerDependencies": {
         "vue": "^3.4.0"