@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/src/manager/buttonManager.d.ts

@@ -58,9 +58,9 @@ declare class ButtonManager implements IButtonManager {
     removed: import("@vcmap/core").VcsEvent<ButtonComponent>;
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    componentIds: Array<string>;
+    componentIds: import("vue").UnwrapRef<string[]>;
     /**
      * @type {Map<string, ButtonComponent>}
      * @private

package/src/manager/buttonManager.js

@@ -51,9 +51,9 @@ class ButtonManager {
     this.removed = new VcsEvent();
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    this.componentIds = [];
+    this.componentIds = reactive([]);
     /**
      * @type {Map<string, ButtonComponent>}
      * @private
@@ -112,7 +112,9 @@ class ButtonManager {
       );
     }
     const id = buttonComponentOptions.id || uuidv4();
-    const action = getActionFromOptions(buttonComponentOptions.action);
+    const action = reactive(
+      getActionFromOptions(buttonComponentOptions.action),
+    );
 
     /**
      * @type {ButtonComponent}
@@ -125,7 +127,7 @@ class ButtonManager {
         return owner;
       },
       get action() {
-        return reactive(action);
+        return action;
       },
       get weight() {
         return buttonComponentOptions.weight || 0;

package/src/manager/collectionManager/CollectionComponent.vue

@@ -1,28 +1,26 @@
 <template>
   <v-expansion-panel>
-    <v-expansion-panel-header hide-actions class="px-2">
-      <template #default="{ open }">
-        <div class="d-flex justify-space-between">
-          <div class="d-flex align-center gap-1">
-            <v-icon :class="{ rotate: !open }"> mdi-chevron-down </v-icon>
-            <span>
-              {{ $t(title) }}
-            </span>
-            <span v-if="selectable && selection.length > 0">
-              {{ `(${selection.length})` }}
-            </span>
-          </div>
-          <VcsActionButtonList
-            v-if="actions?.length > 0"
-            :actions="actions"
-            :overflow-count="overflowCount"
-          />
+    <v-expansion-panel-title hide-actions class="px-2">
+      <div class="d-flex justify-space-between">
+        <div class="d-flex align-center gc-1">
+          <v-icon :class="{ rotate: !open }"> mdi-chevron-down </v-icon>
+          <span>
+            {{ $st(title) }}
+          </span>
+          <span v-if="selectable && selection.length > 0">
+            {{ `(${selection.length})` }}
+          </span>
         </div>
-      </template>
-    </v-expansion-panel-header>
-    <v-expansion-panel-content class="pb-1">
+        <VcsActionButtonList
+          v-if="actions?.length > 0"
+          :actions="actions"
+          :overflow-count="overflowCount"
+        />
+      </div>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text class="pb-1">
       <CollectionComponentContent @openList="(id) => $emit('openList', id)" />
-    </v-expansion-panel-content>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
@@ -31,9 +29,9 @@
   import {
     VIcon,
     VExpansionPanel,
-    VExpansionPanelHeader,
-    VExpansionPanelContent,
-  } from 'vuetify/lib';
+    VExpansionPanelTitle,
+    VExpansionPanelText,
+  } from 'vuetify/components';
   import { createSelectionActions } from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import CollectionComponentContent from './CollectionComponentContent.vue';
@@ -56,10 +54,16 @@
       CollectionComponentContent,
       VcsActionButtonList,
       VExpansionPanel,
-      VExpansionPanelHeader,
-      VExpansionPanelContent,
+      VExpansionPanelTitle,
+      VExpansionPanelText,
       VIcon,
     },
+    props: {
+      open: {
+        type: Boolean,
+        default: false,
+      },
+    },
     setup(_props, { emit }) {
       /**
        * @type {CollectionComponentClass}

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

@@ -1,10 +1,22 @@
-declare const _default: import("vue").DefineComponent<{}, {
+declare const _default: import("vue").DefineComponent<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
     title: any;
     selection: any;
     selectable: any;
     overflowCount: any;
     actions: 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<{}>>, {}>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    open: boolean;
+}, {}>;
 export default _default;
 export type FormSectionOptions = {
     expandable?: boolean | undefined;

package/src/manager/collectionManager/CollectionComponentContent.vue

@@ -22,7 +22,7 @@
 
 <script>
   import { computed, inject } from 'vue';
-  import { VSheet, VContainer } from 'vuetify/lib';
+  import { VSheet, VContainer } from 'vuetify/components';
   import VcsList, {
     createSelectionActions,
   } from '../../components/lists/VcsList.vue';
@@ -87,16 +87,14 @@
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep {
-    .v-list {
-      .v-list-item {
-        padding: 4px 8px 4px 28px;
-      }
-      .v-list-item__selected {
-        border-left: solid 4px;
-        border-left-color: var(--v-primary-base);
-        padding-left: 24px !important;
-      }
+  :deep(.v-list) {
+    .v-list-item {
+      padding: 4px 8px 4px 28px;
+    }
+    .v-list-item__selected {
+      border-left: solid 4px;
+      border-left-color: var(--v-primary-base);
+      padding-left: 24px !important;
     }
   }
 </style>

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

@@ -13,5 +13,5 @@ declare const _default: import("vue").DefineComponent<{}, {
         targetIndex: any;
     }): void;
     openCollectionComponentList(): 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/CollectionComponentList.vue

@@ -5,9 +5,9 @@
       class="v-expansion-panel-header px-2 v-expansion-panel-header--active"
     >
       <div class="d-flex justify-space-between">
-        <div class="d-flex align-center gap-1 pl-2">
+        <div class="d-flex align-center gc-1 pl-2">
           <span>
-            {{ $t(title) }}
+            {{ $st(title) }}
           </span>
           <span v-if="selectable && selection.length > 0">
             {{ `(${selection.length})` }}
@@ -40,7 +40,7 @@
 <script>
   import { computed, inject } from 'vue';
   import { IndexedCollection } from '@vcmap/core';
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import VcsList, {
     createSelectionActions,
   } from '../../components/lists/VcsList.vue';

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

@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
         targetIndex: 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<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     showLessButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -43,5 +43,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     hideHeader: boolean;
     showLessButton: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/manager/collectionManager/CollectionComponentProvider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full">
+  <div class="w-100">
     <slot>
       <collection-component />
     </slot>

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

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

package/src/manager/collectionManager/CollectionComponentStandalone.vue

@@ -57,7 +57,7 @@
           collectionComponent.selectable &&
           collectionComponent.selection.length > 0
         ) {
-          return `${vm.$t(collectionComponent.title.value)} (${
+          return `${vm.$st(collectionComponent.title.value)} (${
             collectionComponent.selection.value.length
           })`;
         }

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

@@ -5,5 +5,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     componentListView: import("vue").Ref<boolean>;
     openList(): 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/CollectionManager.vue

@@ -1,18 +1,21 @@
 <template>
   <v-container class="pa-0">
     <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>;
     }>;
     /**
      * 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;
@@ -53,7 +53,7 @@ export type CollectionComponentListItem = import("../../components/lists/VcsList
  * @class
  * @template {Object|import("@vcmap/core").VcsObject} T
  */
-declare class CollectionComponentClass<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default> {
+declare class CollectionComponentClass<T extends 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,7 +1,7 @@
 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, ref, shallowRef, watch } from 'vue';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { check } from '@vcsuite/check';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
@@ -168,9 +168,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

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

@@ -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,4 +1,5 @@
 import { VcsEvent, Collection } from '@vcmap/core';
+import { reactive } from 'vue';
 import { check, checkMaybe } 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

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/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/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

@@ -86,7 +86,10 @@
    */
   export default {
     name: 'VcsPanelManager',
-    components: { VcsMainMap, PanelComponent },
+    components: {
+      VcsMainMap,
+      PanelComponent,
+    },
     setup() {
       const app = inject('vcsApp');
       /** @type {PanelManager} */
@@ -185,9 +188,8 @@
         }
       };
 
-      const componentIdRef = ref(componentIds);
       watch(
-        () => [...componentIdRef.value],
+        () => [...componentIds],
         () => {
           updatePanelSizes(
             panelManager,
@@ -200,13 +202,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/panelManager.d.ts

@@ -1,7 +1,7 @@
 /**
  * @typedef {Object} PanelComponentOptions
  * @property {string} [id] - Optional id, which will be set as HTML container ID. If not provided an uuid will be generated.
- * @property {import("vue").Component} [component] Optional component to be rendered in the panel.
+ * @property {import("vue").Component<unknown, unknown, unknown>} [component] Optional component to be rendered in the panel.
  * @property {Partial<PanelState>} [state]
  * @property {Partial<VerticalPanelPositionOptions|HorizontalPanelPositionOptions>} [position] Will be merged with default position for panel
  * @property {Object} [props]
@@ -19,7 +19,7 @@
 /**
  * @typedef {Object} PanelComponent
  * @property {string} id
- * @property {import("vue").Component} component
+ * @property {import("vue").Component<unknown, unknown, unknown>} component
  * @property {Partial<PanelState>} state
  * @property {Object} props
  * @property {Object} provides
@@ -118,7 +118,7 @@ export type PanelComponentOptions = {
     /**
      * Optional component to be rendered in the panel.
      */
-    component?: import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
+    component?: import("vue").Component<unknown, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined;
     state?: Partial<PanelState> | undefined;
     /**
      * Will be merged with default position for panel
@@ -156,7 +156,7 @@ export type PanelState = {
 };
 export type PanelComponent = {
     id: string;
-    component: import("vue").Component;
+    component: import("vue").Component<unknown, unknown, unknown>;
     state: Partial<PanelState>;
     props: Object;
     provides: Object;
@@ -251,9 +251,9 @@ declare class PanelManager implements IPanelManager {
     removed: import("@vcmap/core").VcsEvent<PanelComponent>;
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    componentIds: Array<string>;
+    componentIds: import("vue").UnwrapRef<string[]>;
     /**
      * @type {Map<PanelLocation, string>}
      * @private