dockview-vue 6.5.0 → 6.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,10 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const dockviewCore = require("dockview-core");
4
4
  const vue = require("vue");
5
- function findComponent(parent, name) {
5
+ function findComponent(parent, name, components) {
6
+ if (components && components[name]) {
7
+ return components[name];
8
+ }
6
9
  let instance = parent;
7
10
  let component = null;
8
11
  while (!component && instance) {
@@ -17,6 +20,15 @@ function findComponent(parent, name) {
17
20
  }
18
21
  return component;
19
22
  }
23
+ function resolveComponent(value, parent, components) {
24
+ if (value === void 0) {
25
+ return void 0;
26
+ }
27
+ if (typeof value !== "string") {
28
+ return value;
29
+ }
30
+ return findComponent(parent, value, components) ?? void 0;
31
+ }
20
32
  function mountVueComponent(component, parent, props, element) {
21
33
  let vNode = vue.createVNode(component, Object.freeze(props));
22
34
  vNode.appContext = parent.appContext;
@@ -280,6 +292,7 @@ class VuePart {
280
292
  this._renderDisposable?.dispose();
281
293
  }
282
294
  }
295
+ const DEFAULT_VUE_TAB = "props.defaultTabComponent";
283
296
  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
284
297
  __name: "dockview",
285
298
  props: {
@@ -309,6 +322,8 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
309
322
  createGroupDragGhostComponent: { type: Function },
310
323
  tabGroupColors: {},
311
324
  tabGroupAccent: {},
325
+ components: {},
326
+ tabComponents: {},
312
327
  watermarkComponent: {},
313
328
  defaultTabComponent: {},
314
329
  rightHeaderActionsComponent: {},
@@ -348,7 +363,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
348
363
  if (instance.value) {
349
364
  instance.value.updateOptions({
350
365
  createTabGroupChipComponent: newValue ? () => {
351
- const component = findComponent(inst, newValue);
366
+ const component = resolveComponent(newValue, inst);
352
367
  return new VueTabGroupChipRenderer(component, inst);
353
368
  } : void 0
354
369
  });
@@ -361,7 +376,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
361
376
  if (instance.value) {
362
377
  instance.value.updateOptions({
363
378
  createGroupDragGhostComponent: newValue ? () => {
364
- const component = findComponent(inst, newValue);
379
+ const component = resolveComponent(newValue, inst);
365
380
  return new VueGroupDragGhostRenderer(
366
381
  component,
367
382
  inst
@@ -375,12 +390,17 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
375
390
  () => props.defaultTabComponent,
376
391
  (newValue) => {
377
392
  if (instance.value) {
393
+ const coreDefault = typeof newValue === "string" ? newValue : newValue ? DEFAULT_VUE_TAB : void 0;
378
394
  instance.value.updateOptions({
379
- defaultTabComponent: newValue,
395
+ defaultTabComponent: coreDefault,
380
396
  createTabComponent(options) {
381
- let component = findComponent(inst, options.name);
397
+ let component = options.name === DEFAULT_VUE_TAB ? null : findComponent(
398
+ inst,
399
+ options.name,
400
+ props.tabComponents
401
+ );
382
402
  if (!component && newValue) {
383
- component = findComponent(inst, newValue);
403
+ component = resolveComponent(newValue, inst) ?? null;
384
404
  }
385
405
  if (component) {
386
406
  return new VueRenderer(component, inst);
@@ -397,7 +417,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
397
417
  if (instance.value) {
398
418
  instance.value.updateOptions({
399
419
  createWatermarkComponent: newValue ? () => {
400
- const component = findComponent(inst, newValue);
420
+ const component = resolveComponent(newValue, inst);
401
421
  return new VueWatermarkRenderer(component, inst);
402
422
  } : void 0
403
423
  });
@@ -410,7 +430,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
410
430
  if (instance.value) {
411
431
  instance.value.updateOptions({
412
432
  createRightHeaderActionComponent: newValue ? (group) => {
413
- const component = findComponent(inst, newValue);
433
+ const component = resolveComponent(newValue, inst);
414
434
  return new VueHeaderActionsRenderer(
415
435
  component,
416
436
  inst,
@@ -427,7 +447,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
427
447
  if (instance.value) {
428
448
  instance.value.updateOptions({
429
449
  createLeftHeaderActionComponent: newValue ? (group) => {
430
- const component = findComponent(inst, newValue);
450
+ const component = resolveComponent(newValue, inst);
431
451
  return new VueHeaderActionsRenderer(
432
452
  component,
433
453
  inst,
@@ -444,7 +464,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
444
464
  if (instance.value) {
445
465
  instance.value.updateOptions({
446
466
  createPrefixHeaderActionComponent: newValue ? (group) => {
447
- const component = findComponent(inst, newValue);
467
+ const component = resolveComponent(newValue, inst);
448
468
  return new VueHeaderActionsRenderer(
449
469
  component,
450
470
  inst,
@@ -464,13 +484,17 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
464
484
  }
465
485
  const frameworkOptions = {
466
486
  createComponent(options) {
467
- const component = findComponent(inst, options.name);
487
+ const component = findComponent(
488
+ inst,
489
+ options.name,
490
+ props.components
491
+ );
468
492
  return new VueRenderer(component, inst);
469
493
  },
470
494
  createTabComponent(options) {
471
- let component = findComponent(inst, options.name);
495
+ let component = options.name === DEFAULT_VUE_TAB ? null : findComponent(inst, options.name, props.tabComponents);
472
496
  if (!component && props.defaultTabComponent) {
473
- component = findComponent(inst, props.defaultTabComponent);
497
+ component = resolveComponent(props.defaultTabComponent, inst) ?? null;
474
498
  }
475
499
  if (component) {
476
500
  return new VueRenderer(component, inst);
@@ -478,30 +502,30 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
478
502
  return void 0;
479
503
  },
480
504
  createWatermarkComponent: props.watermarkComponent ? () => {
481
- const component = findComponent(
482
- inst,
483
- props.watermarkComponent
505
+ const component = resolveComponent(
506
+ props.watermarkComponent,
507
+ inst
484
508
  );
485
509
  return new VueWatermarkRenderer(component, inst);
486
510
  } : void 0,
487
511
  createLeftHeaderActionComponent: props.leftHeaderActionsComponent ? (group) => {
488
- const component = findComponent(
489
- inst,
490
- props.leftHeaderActionsComponent
512
+ const component = resolveComponent(
513
+ props.leftHeaderActionsComponent,
514
+ inst
491
515
  );
492
516
  return new VueHeaderActionsRenderer(component, inst, group);
493
517
  } : void 0,
494
518
  createPrefixHeaderActionComponent: props.prefixHeaderActionsComponent ? (group) => {
495
- const component = findComponent(
496
- inst,
497
- props.prefixHeaderActionsComponent
519
+ const component = resolveComponent(
520
+ props.prefixHeaderActionsComponent,
521
+ inst
498
522
  );
499
523
  return new VueHeaderActionsRenderer(component, inst, group);
500
524
  } : void 0,
501
525
  createRightHeaderActionComponent: props.rightHeaderActionsComponent ? (group) => {
502
- const component = findComponent(
503
- inst,
504
- props.rightHeaderActionsComponent
526
+ const component = resolveComponent(
527
+ props.rightHeaderActionsComponent,
528
+ inst
505
529
  );
506
530
  return new VueHeaderActionsRenderer(component, inst, group);
507
531
  } : void 0,
@@ -509,25 +533,31 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
509
533
  if (!options.component) {
510
534
  return void 0;
511
535
  }
512
- const component = findComponent(inst, options.component);
536
+ const component = findComponent(
537
+ inst,
538
+ options.component,
539
+ props.components
540
+ );
513
541
  return new VueContextMenuItemRenderer(component, inst);
514
542
  }
515
543
  };
516
544
  const coreOptions = extractCoreOptions(props);
517
- if (props.defaultTabComponent) {
545
+ if (typeof props.defaultTabComponent === "string") {
518
546
  frameworkOptions.defaultTabComponent = props.defaultTabComponent;
547
+ } else if (props.defaultTabComponent) {
548
+ frameworkOptions.defaultTabComponent = DEFAULT_VUE_TAB;
519
549
  }
520
550
  if (props.tabGroupChipComponent) {
521
- const chipComponentName = props.tabGroupChipComponent;
551
+ const chipValue = props.tabGroupChipComponent;
522
552
  coreOptions.createTabGroupChipComponent = () => {
523
- const component = findComponent(inst, chipComponentName);
553
+ const component = resolveComponent(chipValue, inst);
524
554
  return new VueTabGroupChipRenderer(component, inst);
525
555
  };
526
556
  }
527
557
  if (props.groupDragGhostComponent) {
528
- const ghostComponentName = props.groupDragGhostComponent;
558
+ const ghostValue = props.groupDragGhostComponent;
529
559
  coreOptions.createGroupDragGhostComponent = () => {
530
- const component = findComponent(inst, ghostComponentName);
560
+ const component = resolveComponent(ghostValue, inst);
531
561
  return new VueGroupDragGhostRenderer(component, inst);
532
562
  };
533
563
  }
@@ -587,7 +617,11 @@ function useViewComponent(config, props, emit) {
587
617
  }
588
618
  instance.value.updateOptions({
589
619
  createComponent: (options) => {
590
- const component = findComponent(inst, options.name);
620
+ const component = findComponent(
621
+ inst,
622
+ options.name,
623
+ props.components
624
+ );
591
625
  return config.createView(
592
626
  options.id,
593
627
  options.name,
@@ -611,7 +645,11 @@ function useViewComponent(config, props, emit) {
611
645
  }
612
646
  const frameworkOptions = {
613
647
  createComponent(options) {
614
- const component = findComponent(inst, options.name);
648
+ const component = findComponent(
649
+ inst,
650
+ options.name,
651
+ props.components
652
+ );
615
653
  return config.createView(
616
654
  options.id,
617
655
  options.name,
@@ -857,6 +895,7 @@ exports.VueTabGroupChipRenderer = VueTabGroupChipRenderer;
857
895
  exports.VueWatermarkRenderer = VueWatermarkRenderer;
858
896
  exports.findComponent = findComponent;
859
897
  exports.mountVueComponent = mountVueComponent;
898
+ exports.resolveComponent = resolveComponent;
860
899
  Object.keys(dockviewCore).forEach((k) => {
861
900
  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
862
901
  enumerable: true,
@@ -1,7 +1,10 @@
1
1
  import { DockviewMutableDisposable, DockviewCompositeDisposable, PROPERTY_KEYS_DOCKVIEW, createDockview, SplitviewPanel, SplitviewApi, createSplitview, PROPERTY_KEYS_SPLITVIEW, GridviewPanel, GridviewApi, createGridview, PROPERTY_KEYS_GRIDVIEW, createPaneview, PROPERTY_KEYS_PANEVIEW } from "dockview-core";
2
2
  export * from "dockview-core";
3
3
  import { createVNode, render, cloneVNode, defineComponent, ref, watch, getCurrentInstance, onMounted, markRaw, onBeforeUnmount, openBlock, createElementBlock } from "vue";
4
- function findComponent(parent, name) {
4
+ function findComponent(parent, name, components) {
5
+ if (components && components[name]) {
6
+ return components[name];
7
+ }
5
8
  let instance = parent;
6
9
  let component = null;
7
10
  while (!component && instance) {
@@ -16,6 +19,15 @@ function findComponent(parent, name) {
16
19
  }
17
20
  return component;
18
21
  }
22
+ function resolveComponent(value, parent, components) {
23
+ if (value === void 0) {
24
+ return void 0;
25
+ }
26
+ if (typeof value !== "string") {
27
+ return value;
28
+ }
29
+ return findComponent(parent, value, components) ?? void 0;
30
+ }
19
31
  function mountVueComponent(component, parent, props, element) {
20
32
  let vNode = createVNode(component, Object.freeze(props));
21
33
  vNode.appContext = parent.appContext;
@@ -279,6 +291,7 @@ class VuePart {
279
291
  this._renderDisposable?.dispose();
280
292
  }
281
293
  }
294
+ const DEFAULT_VUE_TAB = "props.defaultTabComponent";
282
295
  const _sfc_main$3 = /* @__PURE__ */ defineComponent({
283
296
  __name: "dockview",
284
297
  props: {
@@ -308,6 +321,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
308
321
  createGroupDragGhostComponent: { type: Function },
309
322
  tabGroupColors: {},
310
323
  tabGroupAccent: {},
324
+ components: {},
325
+ tabComponents: {},
311
326
  watermarkComponent: {},
312
327
  defaultTabComponent: {},
313
328
  rightHeaderActionsComponent: {},
@@ -347,7 +362,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
347
362
  if (instance.value) {
348
363
  instance.value.updateOptions({
349
364
  createTabGroupChipComponent: newValue ? () => {
350
- const component = findComponent(inst, newValue);
365
+ const component = resolveComponent(newValue, inst);
351
366
  return new VueTabGroupChipRenderer(component, inst);
352
367
  } : void 0
353
368
  });
@@ -360,7 +375,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
360
375
  if (instance.value) {
361
376
  instance.value.updateOptions({
362
377
  createGroupDragGhostComponent: newValue ? () => {
363
- const component = findComponent(inst, newValue);
378
+ const component = resolveComponent(newValue, inst);
364
379
  return new VueGroupDragGhostRenderer(
365
380
  component,
366
381
  inst
@@ -374,12 +389,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
374
389
  () => props.defaultTabComponent,
375
390
  (newValue) => {
376
391
  if (instance.value) {
392
+ const coreDefault = typeof newValue === "string" ? newValue : newValue ? DEFAULT_VUE_TAB : void 0;
377
393
  instance.value.updateOptions({
378
- defaultTabComponent: newValue,
394
+ defaultTabComponent: coreDefault,
379
395
  createTabComponent(options) {
380
- let component = findComponent(inst, options.name);
396
+ let component = options.name === DEFAULT_VUE_TAB ? null : findComponent(
397
+ inst,
398
+ options.name,
399
+ props.tabComponents
400
+ );
381
401
  if (!component && newValue) {
382
- component = findComponent(inst, newValue);
402
+ component = resolveComponent(newValue, inst) ?? null;
383
403
  }
384
404
  if (component) {
385
405
  return new VueRenderer(component, inst);
@@ -396,7 +416,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
396
416
  if (instance.value) {
397
417
  instance.value.updateOptions({
398
418
  createWatermarkComponent: newValue ? () => {
399
- const component = findComponent(inst, newValue);
419
+ const component = resolveComponent(newValue, inst);
400
420
  return new VueWatermarkRenderer(component, inst);
401
421
  } : void 0
402
422
  });
@@ -409,7 +429,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
409
429
  if (instance.value) {
410
430
  instance.value.updateOptions({
411
431
  createRightHeaderActionComponent: newValue ? (group) => {
412
- const component = findComponent(inst, newValue);
432
+ const component = resolveComponent(newValue, inst);
413
433
  return new VueHeaderActionsRenderer(
414
434
  component,
415
435
  inst,
@@ -426,7 +446,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
426
446
  if (instance.value) {
427
447
  instance.value.updateOptions({
428
448
  createLeftHeaderActionComponent: newValue ? (group) => {
429
- const component = findComponent(inst, newValue);
449
+ const component = resolveComponent(newValue, inst);
430
450
  return new VueHeaderActionsRenderer(
431
451
  component,
432
452
  inst,
@@ -443,7 +463,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
443
463
  if (instance.value) {
444
464
  instance.value.updateOptions({
445
465
  createPrefixHeaderActionComponent: newValue ? (group) => {
446
- const component = findComponent(inst, newValue);
466
+ const component = resolveComponent(newValue, inst);
447
467
  return new VueHeaderActionsRenderer(
448
468
  component,
449
469
  inst,
@@ -463,13 +483,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
463
483
  }
464
484
  const frameworkOptions = {
465
485
  createComponent(options) {
466
- const component = findComponent(inst, options.name);
486
+ const component = findComponent(
487
+ inst,
488
+ options.name,
489
+ props.components
490
+ );
467
491
  return new VueRenderer(component, inst);
468
492
  },
469
493
  createTabComponent(options) {
470
- let component = findComponent(inst, options.name);
494
+ let component = options.name === DEFAULT_VUE_TAB ? null : findComponent(inst, options.name, props.tabComponents);
471
495
  if (!component && props.defaultTabComponent) {
472
- component = findComponent(inst, props.defaultTabComponent);
496
+ component = resolveComponent(props.defaultTabComponent, inst) ?? null;
473
497
  }
474
498
  if (component) {
475
499
  return new VueRenderer(component, inst);
@@ -477,30 +501,30 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
477
501
  return void 0;
478
502
  },
479
503
  createWatermarkComponent: props.watermarkComponent ? () => {
480
- const component = findComponent(
481
- inst,
482
- props.watermarkComponent
504
+ const component = resolveComponent(
505
+ props.watermarkComponent,
506
+ inst
483
507
  );
484
508
  return new VueWatermarkRenderer(component, inst);
485
509
  } : void 0,
486
510
  createLeftHeaderActionComponent: props.leftHeaderActionsComponent ? (group) => {
487
- const component = findComponent(
488
- inst,
489
- props.leftHeaderActionsComponent
511
+ const component = resolveComponent(
512
+ props.leftHeaderActionsComponent,
513
+ inst
490
514
  );
491
515
  return new VueHeaderActionsRenderer(component, inst, group);
492
516
  } : void 0,
493
517
  createPrefixHeaderActionComponent: props.prefixHeaderActionsComponent ? (group) => {
494
- const component = findComponent(
495
- inst,
496
- props.prefixHeaderActionsComponent
518
+ const component = resolveComponent(
519
+ props.prefixHeaderActionsComponent,
520
+ inst
497
521
  );
498
522
  return new VueHeaderActionsRenderer(component, inst, group);
499
523
  } : void 0,
500
524
  createRightHeaderActionComponent: props.rightHeaderActionsComponent ? (group) => {
501
- const component = findComponent(
502
- inst,
503
- props.rightHeaderActionsComponent
525
+ const component = resolveComponent(
526
+ props.rightHeaderActionsComponent,
527
+ inst
504
528
  );
505
529
  return new VueHeaderActionsRenderer(component, inst, group);
506
530
  } : void 0,
@@ -508,25 +532,31 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
508
532
  if (!options.component) {
509
533
  return void 0;
510
534
  }
511
- const component = findComponent(inst, options.component);
535
+ const component = findComponent(
536
+ inst,
537
+ options.component,
538
+ props.components
539
+ );
512
540
  return new VueContextMenuItemRenderer(component, inst);
513
541
  }
514
542
  };
515
543
  const coreOptions = extractCoreOptions(props);
516
- if (props.defaultTabComponent) {
544
+ if (typeof props.defaultTabComponent === "string") {
517
545
  frameworkOptions.defaultTabComponent = props.defaultTabComponent;
546
+ } else if (props.defaultTabComponent) {
547
+ frameworkOptions.defaultTabComponent = DEFAULT_VUE_TAB;
518
548
  }
519
549
  if (props.tabGroupChipComponent) {
520
- const chipComponentName = props.tabGroupChipComponent;
550
+ const chipValue = props.tabGroupChipComponent;
521
551
  coreOptions.createTabGroupChipComponent = () => {
522
- const component = findComponent(inst, chipComponentName);
552
+ const component = resolveComponent(chipValue, inst);
523
553
  return new VueTabGroupChipRenderer(component, inst);
524
554
  };
525
555
  }
526
556
  if (props.groupDragGhostComponent) {
527
- const ghostComponentName = props.groupDragGhostComponent;
557
+ const ghostValue = props.groupDragGhostComponent;
528
558
  coreOptions.createGroupDragGhostComponent = () => {
529
- const component = findComponent(inst, ghostComponentName);
559
+ const component = resolveComponent(ghostValue, inst);
530
560
  return new VueGroupDragGhostRenderer(component, inst);
531
561
  };
532
562
  }
@@ -586,7 +616,11 @@ function useViewComponent(config, props, emit) {
586
616
  }
587
617
  instance.value.updateOptions({
588
618
  createComponent: (options) => {
589
- const component = findComponent(inst, options.name);
619
+ const component = findComponent(
620
+ inst,
621
+ options.name,
622
+ props.components
623
+ );
590
624
  return config.createView(
591
625
  options.id,
592
626
  options.name,
@@ -610,7 +644,11 @@ function useViewComponent(config, props, emit) {
610
644
  }
611
645
  const frameworkOptions = {
612
646
  createComponent(options) {
613
- const component = findComponent(inst, options.name);
647
+ const component = findComponent(
648
+ inst,
649
+ options.name,
650
+ props.components
651
+ );
614
652
  return config.createView(
615
653
  options.id,
616
654
  options.name,
@@ -856,5 +894,6 @@ export {
856
894
  VueTabGroupChipRenderer,
857
895
  VueWatermarkRenderer,
858
896
  findComponent,
859
- mountVueComponent
897
+ mountVueComponent,
898
+ resolveComponent
860
899
  };
@@ -2,7 +2,10 @@
2
2
  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("dockview-core"), require("vue")) : typeof define === "function" && define.amd ? define(["exports", "dockview-core", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["dockview-vue"] = {}, global.DockviewCore, global.Vue));
3
3
  })(this, (function(exports2, dockviewCore, vue) {
4
4
  "use strict";
5
- function findComponent(parent, name) {
5
+ function findComponent(parent, name, components) {
6
+ if (components && components[name]) {
7
+ return components[name];
8
+ }
6
9
  let instance = parent;
7
10
  let component = null;
8
11
  while (!component && instance) {
@@ -17,6 +20,15 @@
17
20
  }
18
21
  return component;
19
22
  }
23
+ function resolveComponent(value, parent, components) {
24
+ if (value === void 0) {
25
+ return void 0;
26
+ }
27
+ if (typeof value !== "string") {
28
+ return value;
29
+ }
30
+ return findComponent(parent, value, components) ?? void 0;
31
+ }
20
32
  function mountVueComponent(component, parent, props, element) {
21
33
  let vNode = vue.createVNode(component, Object.freeze(props));
22
34
  vNode.appContext = parent.appContext;
@@ -280,6 +292,7 @@
280
292
  this._renderDisposable?.dispose();
281
293
  }
282
294
  }
295
+ const DEFAULT_VUE_TAB = "props.defaultTabComponent";
283
296
  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
284
297
  __name: "dockview",
285
298
  props: {
@@ -309,6 +322,8 @@
309
322
  createGroupDragGhostComponent: { type: Function },
310
323
  tabGroupColors: {},
311
324
  tabGroupAccent: {},
325
+ components: {},
326
+ tabComponents: {},
312
327
  watermarkComponent: {},
313
328
  defaultTabComponent: {},
314
329
  rightHeaderActionsComponent: {},
@@ -348,7 +363,7 @@
348
363
  if (instance.value) {
349
364
  instance.value.updateOptions({
350
365
  createTabGroupChipComponent: newValue ? () => {
351
- const component = findComponent(inst, newValue);
366
+ const component = resolveComponent(newValue, inst);
352
367
  return new VueTabGroupChipRenderer(component, inst);
353
368
  } : void 0
354
369
  });
@@ -361,7 +376,7 @@
361
376
  if (instance.value) {
362
377
  instance.value.updateOptions({
363
378
  createGroupDragGhostComponent: newValue ? () => {
364
- const component = findComponent(inst, newValue);
379
+ const component = resolveComponent(newValue, inst);
365
380
  return new VueGroupDragGhostRenderer(
366
381
  component,
367
382
  inst
@@ -375,12 +390,17 @@
375
390
  () => props.defaultTabComponent,
376
391
  (newValue) => {
377
392
  if (instance.value) {
393
+ const coreDefault = typeof newValue === "string" ? newValue : newValue ? DEFAULT_VUE_TAB : void 0;
378
394
  instance.value.updateOptions({
379
- defaultTabComponent: newValue,
395
+ defaultTabComponent: coreDefault,
380
396
  createTabComponent(options) {
381
- let component = findComponent(inst, options.name);
397
+ let component = options.name === DEFAULT_VUE_TAB ? null : findComponent(
398
+ inst,
399
+ options.name,
400
+ props.tabComponents
401
+ );
382
402
  if (!component && newValue) {
383
- component = findComponent(inst, newValue);
403
+ component = resolveComponent(newValue, inst) ?? null;
384
404
  }
385
405
  if (component) {
386
406
  return new VueRenderer(component, inst);
@@ -397,7 +417,7 @@
397
417
  if (instance.value) {
398
418
  instance.value.updateOptions({
399
419
  createWatermarkComponent: newValue ? () => {
400
- const component = findComponent(inst, newValue);
420
+ const component = resolveComponent(newValue, inst);
401
421
  return new VueWatermarkRenderer(component, inst);
402
422
  } : void 0
403
423
  });
@@ -410,7 +430,7 @@
410
430
  if (instance.value) {
411
431
  instance.value.updateOptions({
412
432
  createRightHeaderActionComponent: newValue ? (group) => {
413
- const component = findComponent(inst, newValue);
433
+ const component = resolveComponent(newValue, inst);
414
434
  return new VueHeaderActionsRenderer(
415
435
  component,
416
436
  inst,
@@ -427,7 +447,7 @@
427
447
  if (instance.value) {
428
448
  instance.value.updateOptions({
429
449
  createLeftHeaderActionComponent: newValue ? (group) => {
430
- const component = findComponent(inst, newValue);
450
+ const component = resolveComponent(newValue, inst);
431
451
  return new VueHeaderActionsRenderer(
432
452
  component,
433
453
  inst,
@@ -444,7 +464,7 @@
444
464
  if (instance.value) {
445
465
  instance.value.updateOptions({
446
466
  createPrefixHeaderActionComponent: newValue ? (group) => {
447
- const component = findComponent(inst, newValue);
467
+ const component = resolveComponent(newValue, inst);
448
468
  return new VueHeaderActionsRenderer(
449
469
  component,
450
470
  inst,
@@ -464,13 +484,17 @@
464
484
  }
465
485
  const frameworkOptions = {
466
486
  createComponent(options) {
467
- const component = findComponent(inst, options.name);
487
+ const component = findComponent(
488
+ inst,
489
+ options.name,
490
+ props.components
491
+ );
468
492
  return new VueRenderer(component, inst);
469
493
  },
470
494
  createTabComponent(options) {
471
- let component = findComponent(inst, options.name);
495
+ let component = options.name === DEFAULT_VUE_TAB ? null : findComponent(inst, options.name, props.tabComponents);
472
496
  if (!component && props.defaultTabComponent) {
473
- component = findComponent(inst, props.defaultTabComponent);
497
+ component = resolveComponent(props.defaultTabComponent, inst) ?? null;
474
498
  }
475
499
  if (component) {
476
500
  return new VueRenderer(component, inst);
@@ -478,30 +502,30 @@
478
502
  return void 0;
479
503
  },
480
504
  createWatermarkComponent: props.watermarkComponent ? () => {
481
- const component = findComponent(
482
- inst,
483
- props.watermarkComponent
505
+ const component = resolveComponent(
506
+ props.watermarkComponent,
507
+ inst
484
508
  );
485
509
  return new VueWatermarkRenderer(component, inst);
486
510
  } : void 0,
487
511
  createLeftHeaderActionComponent: props.leftHeaderActionsComponent ? (group) => {
488
- const component = findComponent(
489
- inst,
490
- props.leftHeaderActionsComponent
512
+ const component = resolveComponent(
513
+ props.leftHeaderActionsComponent,
514
+ inst
491
515
  );
492
516
  return new VueHeaderActionsRenderer(component, inst, group);
493
517
  } : void 0,
494
518
  createPrefixHeaderActionComponent: props.prefixHeaderActionsComponent ? (group) => {
495
- const component = findComponent(
496
- inst,
497
- props.prefixHeaderActionsComponent
519
+ const component = resolveComponent(
520
+ props.prefixHeaderActionsComponent,
521
+ inst
498
522
  );
499
523
  return new VueHeaderActionsRenderer(component, inst, group);
500
524
  } : void 0,
501
525
  createRightHeaderActionComponent: props.rightHeaderActionsComponent ? (group) => {
502
- const component = findComponent(
503
- inst,
504
- props.rightHeaderActionsComponent
526
+ const component = resolveComponent(
527
+ props.rightHeaderActionsComponent,
528
+ inst
505
529
  );
506
530
  return new VueHeaderActionsRenderer(component, inst, group);
507
531
  } : void 0,
@@ -509,25 +533,31 @@
509
533
  if (!options.component) {
510
534
  return void 0;
511
535
  }
512
- const component = findComponent(inst, options.component);
536
+ const component = findComponent(
537
+ inst,
538
+ options.component,
539
+ props.components
540
+ );
513
541
  return new VueContextMenuItemRenderer(component, inst);
514
542
  }
515
543
  };
516
544
  const coreOptions = extractCoreOptions(props);
517
- if (props.defaultTabComponent) {
545
+ if (typeof props.defaultTabComponent === "string") {
518
546
  frameworkOptions.defaultTabComponent = props.defaultTabComponent;
547
+ } else if (props.defaultTabComponent) {
548
+ frameworkOptions.defaultTabComponent = DEFAULT_VUE_TAB;
519
549
  }
520
550
  if (props.tabGroupChipComponent) {
521
- const chipComponentName = props.tabGroupChipComponent;
551
+ const chipValue = props.tabGroupChipComponent;
522
552
  coreOptions.createTabGroupChipComponent = () => {
523
- const component = findComponent(inst, chipComponentName);
553
+ const component = resolveComponent(chipValue, inst);
524
554
  return new VueTabGroupChipRenderer(component, inst);
525
555
  };
526
556
  }
527
557
  if (props.groupDragGhostComponent) {
528
- const ghostComponentName = props.groupDragGhostComponent;
558
+ const ghostValue = props.groupDragGhostComponent;
529
559
  coreOptions.createGroupDragGhostComponent = () => {
530
- const component = findComponent(inst, ghostComponentName);
560
+ const component = resolveComponent(ghostValue, inst);
531
561
  return new VueGroupDragGhostRenderer(component, inst);
532
562
  };
533
563
  }
@@ -587,7 +617,11 @@
587
617
  }
588
618
  instance.value.updateOptions({
589
619
  createComponent: (options) => {
590
- const component = findComponent(inst, options.name);
620
+ const component = findComponent(
621
+ inst,
622
+ options.name,
623
+ props.components
624
+ );
591
625
  return config.createView(
592
626
  options.id,
593
627
  options.name,
@@ -611,7 +645,11 @@
611
645
  }
612
646
  const frameworkOptions = {
613
647
  createComponent(options) {
614
- const component = findComponent(inst, options.name);
648
+ const component = findComponent(
649
+ inst,
650
+ options.name,
651
+ props.components
652
+ );
615
653
  return config.createView(
616
654
  options.id,
617
655
  options.name,
@@ -857,6 +895,7 @@
857
895
  exports2.VueWatermarkRenderer = VueWatermarkRenderer;
858
896
  exports2.findComponent = findComponent;
859
897
  exports2.mountVueComponent = mountVueComponent;
898
+ exports2.resolveComponent = resolveComponent;
860
899
  Object.keys(dockviewCore).forEach((k) => {
861
900
  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k)) Object.defineProperty(exports2, k, {
862
901
  enumerable: true,
@@ -1,12 +1,15 @@
1
1
  import { type DockviewDidDropEvent, type DockviewOptions, type DockviewReadyEvent, type DockviewWillDropEvent } from 'dockview-core';
2
+ import type { VueComponent } from '../utils';
2
3
  export interface VueProps {
3
- watermarkComponent?: string;
4
- defaultTabComponent?: string;
5
- rightHeaderActionsComponent?: string;
6
- leftHeaderActionsComponent?: string;
7
- prefixHeaderActionsComponent?: string;
8
- tabGroupChipComponent?: string;
9
- groupDragGhostComponent?: string;
4
+ components?: Record<string, VueComponent>;
5
+ tabComponents?: Record<string, VueComponent>;
6
+ watermarkComponent?: string | VueComponent;
7
+ defaultTabComponent?: string | VueComponent;
8
+ rightHeaderActionsComponent?: string | VueComponent;
9
+ leftHeaderActionsComponent?: string | VueComponent;
10
+ prefixHeaderActionsComponent?: string | VueComponent;
11
+ tabGroupChipComponent?: string | VueComponent;
12
+ groupDragGhostComponent?: string | VueComponent;
10
13
  }
11
14
  export type VueEvents = {
12
15
  ready: [event: DockviewReadyEvent];
@@ -1,4 +1,5 @@
1
1
  import type { GridviewApi, GridviewOptions, GridviewPanelApi } from 'dockview-core';
2
+ import type { VueComponent } from '../utils';
2
3
  export interface GridviewReadyEvent {
3
4
  api: GridviewApi;
4
5
  }
@@ -8,7 +9,7 @@ export interface IGridviewVuePanelProps<T extends Record<string, any> = any> {
8
9
  containerApi: GridviewApi;
9
10
  }
10
11
  export interface IGridviewVueProps extends GridviewOptions {
11
- components: Record<string, string>;
12
+ components?: Record<string, VueComponent>;
12
13
  }
13
14
  export type GridviewVueEvents = {
14
15
  ready: [event: GridviewReadyEvent];
@@ -5,6 +5,6 @@ declare const __VLS_export: import("vue").DefineComponent<IPaneviewVueProps, {},
5
5
  }, string, import("vue").PublicProps, Readonly<IPaneviewVueProps> & Readonly<{
6
6
  onReady?: (event: import("./types").PaneviewReadyEvent) => any;
7
7
  onDidDrop?: (event: import("dockview-core").PaneviewDropEvent) => any;
8
- }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
8
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
9
9
  declare const _default: typeof __VLS_export;
10
10
  export default _default;
@@ -1,4 +1,5 @@
1
1
  import type { PaneviewApi, PaneviewDropEvent, PaneviewOptions, PaneviewPanelApi } from 'dockview-core';
2
+ import type { VueComponent } from '../utils';
2
3
  export interface PaneviewReadyEvent {
3
4
  api: PaneviewApi;
4
5
  }
@@ -9,7 +10,7 @@ export interface IPaneviewVuePanelProps<T extends Record<string, any> = any> {
9
10
  title: string;
10
11
  }
11
12
  export interface IPaneviewVueProps extends PaneviewOptions {
12
- components: Record<string, string>;
13
+ components?: Record<string, VueComponent>;
13
14
  }
14
15
  export type PaneviewVueEvents = {
15
16
  ready: [event: PaneviewReadyEvent];
@@ -3,6 +3,6 @@ declare const __VLS_export: import("vue").DefineComponent<ISplitviewVueProps, {}
3
3
  ready: (event: import("./types").SplitviewReadyEvent) => any;
4
4
  }, string, import("vue").PublicProps, Readonly<ISplitviewVueProps> & Readonly<{
5
5
  onReady?: (event: import("./types").SplitviewReadyEvent) => any;
6
- }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
6
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
7
7
  declare const _default: typeof __VLS_export;
8
8
  export default _default;
@@ -1,4 +1,5 @@
1
1
  import type { SplitviewApi, SplitviewOptions, SplitviewPanelApi } from 'dockview-core';
2
+ import type { VueComponent } from '../utils';
2
3
  export interface SplitviewReadyEvent {
3
4
  api: SplitviewApi;
4
5
  }
@@ -8,7 +9,7 @@ export interface ISplitviewVuePanelProps<T extends Record<string, any> = any> {
8
9
  containerApi: SplitviewApi;
9
10
  }
10
11
  export interface ISplitviewVueProps extends SplitviewOptions {
11
- components: Record<string, string>;
12
+ components?: Record<string, VueComponent>;
12
13
  }
13
14
  export type SplitviewVueEvents = {
14
15
  ready: [event: SplitviewReadyEvent];
@@ -2,7 +2,8 @@ import type { DockviewApi, DockviewGroupPanel, IContentRenderer, IDockviewGroupP
2
2
  import { type ComponentOptionsBase, type DefineComponent, type ComponentInternalInstance } from 'vue';
3
3
  export type ComponentInterface = ComponentOptionsBase<any, any, any, any, any, any, any, any>;
4
4
  export type VueComponent<T = any> = DefineComponent<T>;
5
- export declare function findComponent(parent: ComponentInternalInstance, name: string): VueComponent | null;
5
+ export declare function findComponent(parent: ComponentInternalInstance, name: string, components?: Record<string, VueComponent | undefined>): VueComponent | null;
6
+ export declare function resolveComponent(value: string | VueComponent | undefined, parent: ComponentInternalInstance, components?: Record<string, VueComponent | undefined>): VueComponent | undefined;
6
7
  /**
7
8
  * @see https://vuejs.org/api/render-function.html#clonevnode
8
9
  * @see https://vuejs.org/api/render-function.html#mergeprops
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dockview-vue",
3
- "version": "6.5.0",
3
+ "version": "6.6.0",
4
4
  "description": "Vue 3 docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels",
5
5
  "keywords": [
6
6
  "splitview",
@@ -69,7 +69,7 @@
69
69
  "format:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx,vue}'"
70
70
  },
71
71
  "dependencies": {
72
- "dockview-core": "^6.5.0"
72
+ "dockview-core": "^6.6.0"
73
73
  },
74
74
  "peerDependencies": {
75
75
  "vue": "^3.4.0"