@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/manager/collectionManager/CollectionManager.vue

@@ -1,18 +1,21 @@
 <template>
-  <v-container class="pa-0">
+  <v-container class="pa-0 collection-manager">
     <v-expansion-panels
-      accordion
+      variant="accordion"
       multiple
       v-if="!componentView && componentIds.length > 0"
       v-model="panels"
       class="rounded-0"
     >
       <collection-component-provider
-        v-for="componentId in componentIds"
+        v-for="(componentId, index) in componentIds"
         :component-id="componentId"
         :key="componentId"
       >
-        <collection-component @openList="openList" />
+        <collection-component
+          @openList="openList"
+          :open="panels.includes(index)"
+        />
       </collection-component-provider>
     </v-expansion-panels>
     <collection-component-provider
@@ -26,7 +29,7 @@
 
 <script>
   import { computed, inject, ref } from 'vue';
-  import { VExpansionPanels, VContainer } from 'vuetify/lib';
+  import { VExpansionPanels, VContainer } from 'vuetify/components';
   import CollectionComponentProvider from './CollectionComponentProvider.vue';
   import CollectionComponentList from './CollectionComponentList.vue';
   import CollectionComponent from './CollectionComponent.vue';
@@ -49,7 +52,7 @@
        * @type {import("./collectionManager.js").CollectionManager}
        */
       const collectionManager = inject('collectionManager');
-      const componentIds = ref(collectionManager.componentIds);
+      const { componentIds } = collectionManager;
       /**
        * @type {import("vue").Ref<string|null>}
        */
@@ -59,13 +62,12 @@
        */
       const panels = computed({
         get() {
-          return [...Array(componentIds.value.length).keys()].filter(
-            (p, idx) =>
-              !!collectionManager.get(componentIds.value[idx]).open.value,
+          return [...Array(componentIds.length).keys()].filter(
+            (p, idx) => !!collectionManager.get(componentIds[idx]).open.value,
           );
         },
         set(value) {
-          componentIds.value.forEach((id, idx) => {
+          componentIds.forEach((id, idx) => {
             collectionManager.get(id).open.value = value.includes(idx);
           });
         },

package/src/manager/collectionManager/CollectionManager.vue.d.ts

@@ -4,5 +4,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     componentView: import("vue").Ref<string | null>;
     openList(id: any): void;
     closeList(): void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/manager/collectionManager/categoryManager.d.ts

@@ -55,9 +55,9 @@ declare class CategoryManager extends CollectionManager implements ICategoryMana
      * @returns {Promise<{ collectionComponent: import("./collectionComponentClass.js").default<T>, category: import("@vcmap/core").Category<T> }>}
      * @template {Object|import("@vcmap/core").VcsObject} T
      */
-    requestCategory<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default>(options: import("@vcmap/core").CategoryOptions<T>, owner: string | symbol, collectionComponentOptions?: import("./collectionComponentClass.js").CollectionComponentUiOptions): Promise<{
+    requestCategory<T extends Object | import("@vcmap/core").VcsObject>(options: import("@vcmap/core").CategoryOptions<T>, owner: string | symbol, collectionComponentOptions?: import("./collectionComponentClass.js").CollectionComponentUiOptions): Promise<{
         collectionComponent: import("./collectionComponentClass.js").default<T>;
-        category: import("@vcmap/core/dist/src/category/category.js").default<T>;
+        category: import("@vcmap/core").Category<T, object>;
     }>;
     /**
      * Updates the filterFunction for added moduleIds.

package/src/manager/collectionManager/collectionComponentClass.d.ts

@@ -4,7 +4,7 @@
  * @template {Object|import("@vcmap/core").VcsObject} T
  * @returns {import("./collectionManager.js").MappingFunction<T>}
  */
-export function createSupportedMapMappingFunction<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default>(supportedMaps: string[] | ((arg0: T) => string[]), mapCollection: import("@vcmap/core").MapCollection): import("./collectionManager.js").MappingFunction<T>;
+export function createSupportedMapMappingFunction<T extends Object | import("@vcmap/core").VcsObject>(supportedMaps: string[] | ((arg0: T) => string[]), mapCollection: import("@vcmap/core").MapCollection): import("./collectionManager.js").MappingFunction<T>;
 export default CollectionComponentClass;
 export type CollectionComponentUiOptions = {
     id?: string | undefined;
@@ -38,7 +38,7 @@ export type CollectionComponentUiOptions = {
 export type CollectionComponentClassOptions<T extends Object> = CollectionComponentUiOptions & {
     collection: import("@vcmap/core").Collection<T>;
 };
-export type CollectionComponentListItem = import("../../components/lists/VcsList.vue").VcsListItem & {
+export type CollectionComponentListItem = import("../../components/lists/VcsListItemComponent.vue").VcsListItem & {
     actions: Array<import("../../actions/actionHelper.js").VcsAction & {
         weight?: number;
     }>;
@@ -51,9 +51,9 @@ export type CollectionComponentListItem = import("../../components/lists/VcsList
  * Listens to all collection events and synchronizes changes to the items array.
  * The Collection Items will be transformed and filtered with the given itemMappings and itemFilter functions
  * @class
- * @template {Object|import("@vcmap/core").VcsObject} T
+ * @template {Object|import("@vcmap/core").VcsObject} [T=Object|import("@vcmap/core").VcsObject]
  */
-declare class CollectionComponentClass<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default> {
+declare class CollectionComponentClass<T extends Object | import("@vcmap/core").VcsObject = Object | import("@vcmap/core").VcsObject> {
     /**
      * @param {CollectionComponentClassOptions<T>} options
      * @param {string|import("../../pluginHelper.js").vcsAppSymbol} owner
@@ -114,9 +114,9 @@ declare class CollectionComponentClass<T extends Object | import("@vcmap/core/di
      */
     private _owner;
     /**
-     * @type {import("vue").Ref<Array<import("./collectionManager.js").OwnedAction>>}
+     * @type {import("vue").ShallowRef<Array<import("./collectionManager.js").OwnedAction>>}
      */
-    _actions: import("vue").Ref<Array<import("./collectionManager.js").OwnedAction>>;
+    _actions: import("vue").ShallowRef<Array<import("./collectionManager.js").OwnedAction>>;
     /**
      * @type {Array<import("./collectionManager.js").ItemMapping<T>>}
      * @private
@@ -157,7 +157,7 @@ declare class CollectionComponentClass<T extends Object | import("@vcmap/core/di
     /**
      * @type {import("@vcmap/core").Collection<T>}
      */
-    get collection(): import("@vcmap/core/dist/src/util/collection.js").default<T>;
+    get collection(): import("@vcmap/core").Collection<T>;
     /**
      * @type {import("vue").Ref<Array<CollectionComponentListItem>>}
      */
@@ -166,7 +166,7 @@ declare class CollectionComponentClass<T extends Object | import("@vcmap/core/di
      * @param {boolean} value
      * @deprecated
      */
-    set draggable(arg: import("vue").Ref<boolean>);
+    set draggable(value: import("vue").Ref<boolean>);
     /**
      * @type {import("vue").Ref<boolean>}
      */

package/src/manager/collectionManager/collectionComponentClass.js

@@ -1,15 +1,14 @@
 import { IndexedCollection, isOverrideCollection } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 import { v4 as uuidv4 } from 'uuid';
-import { computed, ref, watch } from 'vue';
+import { computed, reactive, ref, shallowRef, watch } from 'vue';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
 import { sortByWeight } from '../buttonManager.js';
 import {
   createListItemBulkAction,
   createListItemDeleteAction,
-  createListItemRenameAction,
 } from '../../actions/listActions.js';
 import { sortByOwner } from '../navbarManager.js';
 
@@ -37,7 +36,7 @@ import { sortByOwner } from '../navbarManager.js';
  */
 
 /**
- * @typedef {import("../../components/lists/VcsList.vue").VcsListItem & {
+ * @typedef {import("../../components/lists/VcsListItemComponent.vue").VcsListItem & {
  *   actions: Array<import("../../actions/actionHelper.js").VcsAction & { weight?: number }>,
  *   clickedCallbacks: Array<function(PointerEvent):void>,
  *   destroy: function():void|undefined
@@ -56,7 +55,7 @@ function destroyListItem(listItem) {
 /**
  * Renames the title of an item for VcsObject based items.
  * @param {import("@vcmap/core").VcsObject} item
- * @param {import("../../components/lists/VcsList").VcsListItem} listItem
+ * @param {import("../../components/lists/VcsListItemComponent.vue").VcsListItem} listItem
  * @param {string} newTitle
  */
 function titleChanged(item, listItem, newTitle) {
@@ -77,7 +76,7 @@ export function createSupportedMapMappingFunction(
   supportedMaps,
   mapCollection,
 ) {
-  check(supportedMaps, [[String], Function]);
+  check(supportedMaps, oneOf([String], Function));
 
   return (item, _c, listItem) => {
     const mapNames =
@@ -100,7 +99,7 @@ export function createSupportedMapMappingFunction(
  * Listens to all collection events and synchronizes changes to the items array.
  * The Collection Items will be transformed and filtered with the given itemMappings and itemFilter functions
  * @class
- * @template {Object|import("@vcmap/core").VcsObject} T
+ * @template {Object|import("@vcmap/core").VcsObject} [T=Object|import("@vcmap/core").VcsObject]
  */
 class CollectionComponentClass {
   /**
@@ -172,9 +171,9 @@ class CollectionComponentClass {
     this._owner = owner;
 
     /**
-     * @type {import("vue").Ref<Array<import("./collectionManager.js").OwnedAction>>}
+     * @type {import("vue").ShallowRef<Array<import("./collectionManager.js").OwnedAction>>}
      */
-    this._actions = ref([]);
+    this._actions = shallowRef([]);
     /**
      * @type {Array<import("./collectionManager.js").ItemMapping<T>>}
      * @private
@@ -346,7 +345,7 @@ class CollectionComponentClass {
    */
   _transformItem(item) {
     const keyProperty = this._collection.uniqueKey;
-    const listItem = {
+    const listItem = reactive({
       get name() {
         return item[keyProperty];
       },
@@ -361,13 +360,11 @@ class CollectionComponentClass {
       clickedCallbacks: [],
       destroy: undefined,
       destroyFunctions: [],
-    };
+    });
     if (this.renamable.value) {
-      listItem.actions.push(
-        createListItemRenameAction(listItem, {
-          name: this._actionTitles.renameTitle,
-        }),
-      );
+      listItem.renamable = {
+        name: this._actionTitles.renameTitle,
+      };
       listItem.titleChanged = (newTitle) =>
         titleChanged(item, listItem, newTitle);
     }

package/src/manager/collectionManager/collectionManager.d.ts

@@ -18,7 +18,7 @@ export type OwnedAction = {
     weight?: number | undefined;
     owner: string | symbol;
 };
-export type ICollectionManager = import("../../vcsUiApp.js").VcsComponentManager<CollectionComponentClass<any>, import("./collectionComponentClass.js").CollectionComponentClassOptions<Object>>;
+export type ICollectionManager = import("../../vcsUiApp.js").VcsComponentManager<CollectionComponentClass, import("./collectionComponentClass.js").CollectionComponentClassOptions<Object>>;
 /**
  * @typedef {function(T, import("./collectionComponentClass.js").default<T>, import("./collectionComponentClass.js").CollectionComponentListItem): void} MappingFunction
  * @template {Object} T
@@ -67,9 +67,10 @@ declare class CollectionManager implements ICollectionManager {
      */
     removed: VcsEvent<CollectionComponentClass<Object>>;
     /**
-     * @type {Array<string>}
+     * reactive ordered array of ids,
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    componentIds: Array<string>;
+    componentIds: import("vue").UnwrapRef<string[]>;
     /**
      * @type {Map<string, CollectionComponentClass<Object>>}
      * @private
@@ -111,7 +112,7 @@ declare class CollectionManager implements ICollectionManager {
      * @returns {CollectionComponentClass<T>[]}
      * @template {Object|import("@vcmap/core").VcsObject} T
      */
-    getCollection<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default>(collection: Collection<T>): CollectionComponentClass<T>[];
+    getCollection<T extends Object | import("@vcmap/core").VcsObject>(collection: Collection<T>): CollectionComponentClass<T>[];
     /**
      * adds a collectionComponent
      * @param {import("./collectionComponentClass.js").CollectionComponentClassOptions<T>} collectionComponentOptions
@@ -119,7 +120,7 @@ declare class CollectionManager implements ICollectionManager {
      * @returns {CollectionComponentClass<T>}
      * @template {Object|import("@vcmap/core").VcsObject} T
      */
-    add<T_1 extends Object | import("@vcmap/core/dist/src/vcsObject.js").default>(collectionComponentOptions: import("./collectionComponentClass.js").CollectionComponentClassOptions<T_1>, owner: string | symbol): CollectionComponentClass<T_1>;
+    add<T_1 extends Object | import("@vcmap/core").VcsObject>(collectionComponentOptions: import("./collectionComponentClass.js").CollectionComponentClassOptions<T_1>, owner: string | symbol): CollectionComponentClass<T_1>;
     /**
      * removes a CollectionComponentClass, Component will not be rendered anymore and will be destroyed. Add CollectionComponentClass again
      * to show the component again

package/src/manager/collectionManager/collectionManager.js

@@ -1,5 +1,6 @@
 import { VcsEvent, Collection } from '@vcmap/core';
-import { check, checkMaybe } from '@vcsuite/check';
+import { reactive } from 'vue';
+import { check, maybe, oneOf } from '@vcsuite/check';
 import { validateActions } from '../../components/lists/VcsActionList.vue';
 import CollectionComponentClass from './collectionComponentClass.js';
 
@@ -58,9 +59,10 @@ class CollectionManager {
      */
     this.removed = new VcsEvent();
     /**
-     * @type {Array<string>}
+     * reactive ordered array of ids,
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    this.componentIds = [];
+    this.componentIds = reactive([]);
     /**
      * @type {Map<string, CollectionComponentClass<Object>>}
      * @private
@@ -131,7 +133,7 @@ class CollectionManager {
    */
   add(collectionComponentOptions, owner) {
     check(collectionComponentOptions, { collection: Collection });
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     if (
       collectionComponentOptions.id &&
@@ -218,9 +220,9 @@ class CollectionManager {
     owner,
     collectionComponentIds = [],
   ) {
-    checkMaybe(predicate, Function);
+    check(predicate, maybe(Function));
     check(mappingFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
     check(collectionComponentIds, [String]);
 
     /** @type {ItemMapping} */
@@ -258,7 +260,7 @@ class CollectionManager {
    */
   removeMappingFunction(mappingFunction, owner) {
     check(mappingFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     [...this._collectionComponents.values()].forEach((collectionComponent) => {
       collectionComponent.removeItemMapping({ mappingFunction, owner });
@@ -277,7 +279,7 @@ class CollectionManager {
    */
   addFilterFunction(filterFunction, owner, collectionComponentIds = []) {
     check(filterFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
     check(collectionComponentIds, [String]);
 
     /** @type {ItemFilter} */
@@ -314,7 +316,7 @@ class CollectionManager {
    */
   removeFilterFunction(filterFunction, owner) {
     check(filterFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     [...this._collectionComponents.values()].forEach((collectionComponent) => {
       collectionComponent.removeItemFilter({ filterFunction, owner });
@@ -332,7 +334,7 @@ class CollectionManager {
    * @param {Array<string>} [collectionComponentIds] list of collectionComponents this mappingFunction should be used on. If empty, actions are applied to all managed collectionComponents.
    */
   addActions(actions, owner, collectionComponentIds = []) {
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
     check(collectionComponentIds, [String]);
 
     if (!validateActions(actions)) {
@@ -365,7 +367,7 @@ class CollectionManager {
    * @param {string | symbol} owner
    */
   removeActions(actions, owner) {
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     const idx = this._itemActions.findIndex((a) => a.actions === actions);
     if (idx > -1) {
@@ -384,7 +386,7 @@ class CollectionManager {
    * @param {string | symbol} owner
    */
   removeOwner(owner) {
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     [...this._collectionComponents.values()].forEach((collectionComponent) => {
       if (collectionComponent.owner === owner) {

package/src/manager/collectionManager/editorCollectionComponentClass.d.ts

@@ -9,7 +9,7 @@
  * @template {Object|import("@vcmap/core").VcsObject} T
  * @returns {EditorCollectionComponentClass<T>}
  */
-export function makeEditorCollectionComponentClass<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default>(app: import("../../vcsUiApp.js").default, collectionComponent: CollectionComponentClass<T>, editingOptions: EditingOptions<T>, parentId?: string | undefined): EditorCollectionComponentClass<T>;
+export function makeEditorCollectionComponentClass<T extends Object | import("@vcmap/core").VcsObject>(app: import("../../vcsUiApp.js").default, collectionComponent: CollectionComponentClass<T>, editingOptions: EditingOptions<T>, parentId?: string | undefined): EditorCollectionComponentClass<T>;
 /**
  * @typedef {Omit<import("../window/windowManager.js").WindowComponentOptions,"id"|"parentId"|"slot">} EditorWindowComponentOptions
  */

package/src/manager/collectionManager/editorCollectionComponentClass.js

@@ -1,8 +1,9 @@
 import { nextTick, reactive, watch } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 import { WindowSlot } from '../window/windowManager.js';
 import CollectionComponentClass from './collectionComponentClass.js';
 import { createListEditAction } from '../../actions/listActions.js';
+import { categoryManagerWindowId } from '../../application/VcsApp.vue';
 
 /**
  * @typedef {Omit<import("../window/windowManager.js").WindowComponentOptions,"id"|"parentId"|"slot">} EditorWindowComponentOptions
@@ -62,12 +63,12 @@ export function makeEditorCollectionComponentClass(
   app,
   collectionComponent,
   editingOptions,
-  parentId = 'category-manager',
+  parentId = categoryManagerWindowId,
 ) {
   check(collectionComponent, CollectionComponentClass);
-  check(editingOptions.editor, [Object, Function]);
-  checkMaybe(editingOptions.multiEditor, Object);
-  checkMaybe(editingOptions.predicate, Function);
+  check(editingOptions.editor, oneOf(Object, Function));
+  check(editingOptions.multiEditor, maybe(Object));
+  check(editingOptions.predicate, maybe(Function));
 
   const editorCollectionComponent =
     /** @type {EditorCollectionComponentClass} */ collectionComponent;
@@ -217,9 +218,11 @@ export function makeEditorCollectionComponentClass(
   );
 
   const itemRemovedListener =
-    editorCollectionComponent.collection.removed.addEventListener(
-      closeEditorWindow,
-    );
+    editorCollectionComponent.collection.removed.addEventListener((item) => {
+      if (predicate(item)) {
+        closeEditorWindow(item);
+      }
+    });
 
   editorCollectionComponent.addItemMapping({
     predicate,

package/src/manager/contextMenu/ContextMenuComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click.stop="close">
+  <div @click.stop="close" class="context-menu-component">
     <VcsActionList :actions="actions" :show-icon="true" />
   </div>
 </template>

package/src/manager/contextMenu/ContextMenuComponent.vue.d.ts

@@ -9,10 +9,10 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     close: () => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     actions: {
         type: ArrayConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/manager/contextMenu/contextMenuManager.js

@@ -1,6 +1,6 @@
 import { CesiumMap, BaseOLMap, VcsEvent } from '@vcmap/core';
 import { unByKey } from 'ol/Observable.js';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import ContextMenuInteraction from './contextMenuInteraction.js';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
@@ -176,7 +176,7 @@ class ContextMenuManager {
    */
   addEventHandler(handler, owner) {
     check(handler, Function);
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     this._ensureInteraction();
     this._eventHandlers.push({ owner, handler });

package/src/manager/navbarManager.js

@@ -1,4 +1,4 @@
-import { check } from '@vcsuite/check';
+import { check, ofEnum } from '@vcsuite/check';
 import ButtonManager, { sortByWeight } from './buttonManager.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 
@@ -89,7 +89,7 @@ class NavbarManager extends ButtonManager {
    * @returns {import("./buttonManager.js").ButtonComponent}
    */
   add(buttonComponentOptions, owner, location) {
-    check(location, Object.values(ButtonLocation));
+    check(location, ofEnum(ButtonLocation));
     const buttonComponent = super.add(buttonComponentOptions, owner);
     buttonComponent[locationSymbol] = location;
     return buttonComponent;

package/src/manager/panel/PanelComponent.vue

@@ -18,20 +18,13 @@
 </template>
 
 <style scoped lang="scss">
-  @import '../../styles/shades.scss';
-
   .panel-component {
     padding: 0 4px;
   }
-  .panel-component.theme--dark::after {
-    content: '';
-    position: absolute;
-    background: map-get($shades, 'black');
-  }
-  .panel-component.theme--light::after {
+  .panel-component::after {
     content: '';
     position: absolute;
-    background: map-get($shades, 'white');
+    background: rgb(var(--v-theme-surface-light));
   }
 
   .panel-component-left::after {

package/src/manager/panel/PanelComponent.vue.d.ts

@@ -10,10 +10,10 @@ declare const _default: import("vue").DefineComponent<{
     isBottom: import("vue").ComputedRef<boolean>;
     startResize(e: any): void;
     stopResize(): void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     panelState: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/manager/panel/PanelManagerComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vcs-panel-frame"
+    class="vcs-panel-frame panel-manager-component"
     @mouseup="setResizing(undefined)"
     @mouseleave="setResizing(undefined)"
     ref="panelFrameRef"
@@ -85,8 +85,11 @@
    * @description PanelManager rendering all Panels
    */
   export default {
-    name: 'VcsPanelManager',
-    components: { VcsMainMap, PanelComponent },
+    name: 'VcsPanelManagerComponent',
+    components: {
+      VcsMainMap,
+      PanelComponent,
+    },
     setup() {
       const app = inject('vcsApp');
       /** @type {PanelManager} */
@@ -140,17 +143,21 @@
               ((panelFrameRef.value.offsetTop + e.y) /
                 panelFrameRef.value.parentElement.offsetHeight) *
               100;
-            setPanelPosition(panel, { height: `${Math.round(100 - height)}%` });
+            setPanelPosition(panelManager, panel, {
+              height: `${Math.round(100 - height)}%`,
+            });
           } else {
             const width =
               ((panelFrameRef.value.offsetLeft + e.x) /
                 panelFrameRef.value.parentElement.offsetWidth) *
               100;
             if (panel[panelLocationSymbol] === PanelLocation.LEFT) {
-              setPanelPosition(panel, { width: `${width}%` });
+              setPanelPosition(panelManager, panel, { width: `${width}%` });
               resizeKey = 'left';
             } else if (panel[panelLocationSymbol] === PanelLocation.RIGHT) {
-              setPanelPosition(panel, { width: `${Math.round(100 - width)}%` });
+              setPanelPosition(panelManager, panel, {
+                width: `${Math.round(100 - width)}%`,
+              });
               resizeKey = 'right';
             }
           }
@@ -185,9 +192,8 @@
         }
       };
 
-      const componentIdRef = ref(componentIds);
       watch(
-        () => [...componentIdRef.value],
+        () => [...componentIds],
         () => {
           updatePanelSizes(
             panelManager,
@@ -200,13 +206,13 @@
       const addMobileClass = computed(() => {
         return (
           getCurrentInstance().proxy.$vuetify.breakpoint.xs &&
-          componentIdRef.value.length > 0
+          componentIds.length > 0
         );
       });
 
       return {
         mainPanel,
-        componentIds: componentIdRef,
+        componentIds,
         getComponent: (id) => panelManager.get(id).component,
         getPosition,
         getStyles,

package/src/manager/panel/PanelManagerComponent.vue.d.ts

@@ -3,7 +3,7 @@
  */
 export function createMainPanel(): Partial<import("./panelManager.js").PanelComponent>;
 declare const _default: import("vue").DefineComponent<{}, {
-    mainPanel: Partial<import("./panelManager.js").PanelComponent>;
+    mainPanel: Partial<import("./panelManager.js", { with: { "resolution-mode": "import" } }).PanelComponent>;
     componentIds: PanelManager;
     getComponent: (id: any) => any;
     getPosition: (panelComponent: import("vue").DefineComponent<{
@@ -18,12 +18,12 @@ declare const _default: import("vue").DefineComponent<{}, {
         isBottom: import("vue").ComputedRef<boolean>;
         startResize(e: any): void;
         stopResize(): void;
-    }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         panelState: {
             type: ObjectConstructor;
             required: true;
         };
-    }>>, {}>) => PanelPosition | null;
+    }>>, {}, {}>) => PanelPosition | null;
     getStyles: (id: string) => import("vue").ComputedRef<Object>;
     getState: (id: string) => PanelState;
     getProps: (id: string) => Object;
@@ -32,5 +32,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     resizingFunction: () => void;
     close: (id: any) => void;
     addMobileClass: import("vue").ComputedRef<any>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/manager/panel/panelHelper.js

@@ -239,7 +239,7 @@ export function updatePanelSizes(
       },
       targetSize,
     );
-    setPanelPosition(leftPanel, updatedLeft);
+    setPanelPosition(panelManager, leftPanel, updatedLeft);
   }
   if (panelManager.hasLocation(PanelLocation.RIGHT) && resizeKey !== 'left') {
     const updatedRight = handleSidePanel(
@@ -252,7 +252,7 @@ export function updatePanelSizes(
       },
       targetSize,
     );
-    setPanelPosition(rightPanel, updatedRight);
+    setPanelPosition(panelManager, rightPanel, updatedRight);
   }
 
   const main = percentageFromPanelOptions(
@@ -267,6 +267,6 @@ export function updatePanelSizes(
     return acc;
   }, {});
   if (Object.keys(toUpdate).length > 0) {
-    setPanelPosition(mainPanel, toUpdate);
+    setPanelPosition(panelManager, mainPanel, toUpdate);
   }
 }