@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/legend/VcsLegend.vue

@@ -1,37 +1,36 @@
 <template>
   <v-sheet class="overflow-y-auto">
     <v-expansion-panels
-      accordion
+      variant="accordion"
       multiple
       v-if="entries.length > 0"
-      v-model="panels"
       class="rounded-0"
     >
       <v-expansion-panel
         v-for="(entry, i) in entries"
         :key="i"
         class="px-2"
-        @change="entry.open = !entry.open"
+        @group:selected="entry.open = !entry.open"
       >
-        <v-expansion-panel-header hide-actions>
+        <v-expansion-panel-title hide-actions>
           <template #default="{ open }">
             <div class="d-flex justify-space-between">
               <div class="d-flex align-center">
                 <v-icon class="mr-1" :class="{ rotate: !open }">
                   mdi-chevron-down
                 </v-icon>
-                {{ $t(entry.title) }}
+                {{ $st(entry.title) }}
               </div>
               <VcsActionButtonList :actions="entry.actions" />
             </div>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content class="pl-6 pb-2">
-          <v-list dense>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text class="pl-6 pb-2">
+          <v-list density="compact">
             <div v-for="(item, idx) in entry.legend" :key="idx">
               <div v-if="item.type === LegendType.Image">
                 <img
-                  :src="$t(item.src)"
+                  :src="$st(item.src)"
                   :alt="item.src"
                   class="legend-image"
                   :title="item.tooltip"
@@ -40,7 +39,7 @@
               <div v-else-if="item.type === LegendType.Iframe">
                 <iframe
                   :id="`legendIframe${idx}`"
-                  :src="$t(item.src)"
+                  :src="$st(item.src)"
                   scrolling="no"
                   style="width: 100%; height: 100%"
                   frameBorder="0"
@@ -50,7 +49,7 @@
               <style-legend-item v-else :item="item" />
             </div>
           </v-list>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <v-sheet v-else class="ma-2">
@@ -63,12 +62,12 @@
   import {
     VExpansionPanels,
     VExpansionPanel,
-    VExpansionPanelHeader,
-    VExpansionPanelContent,
+    VExpansionPanelText,
+    VExpansionPanelTitle,
     VIcon,
     VList,
     VSheet,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import { computed } from 'vue';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './StyleLegendItem.vue';
@@ -76,7 +75,7 @@
 
   /**
    * @description A component rendering configured legend information for active layers.
-   * @vue-prop {import("vue").Ref<Array<LegendEntry>>} entries - legend entries to be displayed
+   * @vue-prop {import("vue").UnwrapRef<Array<LegendEntry>>} entries - legend entries to be displayed
    * @vue-computed {import("vue").ComputedRef<number[]>} panels - derives indices from entries array to define all panels as open
    */
   export default {
@@ -86,16 +85,16 @@
       StyleLegendItem,
       VExpansionPanels,
       VExpansionPanel,
-      VExpansionPanelHeader,
-      VExpansionPanelContent,
+      VExpansionPanelText,
+      VExpansionPanelTitle,
       VIcon,
       VList,
       VSheet,
     },
     props: {
       entries: {
-        type: Object,
-        required: true,
+        type: Array,
+        default: () => [],
       },
     },
     setup(props) {
@@ -123,7 +122,7 @@
       return {
         LegendType,
         setIframeHeight,
-        panels,
+        panels, // TODO
       };
     },
   };

package/src/legend/VcsLegend.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue").DefineComponent<{
     entries: {
-        type: ObjectConstructor;
-        required: true;
+        type: ArrayConstructor;
+        default: () => never[];
     };
 }, {
     LegendType: {
@@ -11,10 +11,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     setIframeHeight: (id: string) => void;
     panels: import("vue").ComputedRef<number[]>;
-}, {}, {}, {}, 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<{
     entries: {
-        type: ObjectConstructor;
-        required: true;
+        type: ArrayConstructor;
+        default: () => never[];
     };
-}>>, {}>;
+}>>, {
+    entries: unknown[];
+}, {}>;
 export default _default;

package/src/legend/legendHelper.d.ts

@@ -74,10 +74,10 @@ export function createLayerLegendEntry(key: string, title: string, legend: Array
 /**
  *
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: function():void }}
+ * @returns {{entries: import("vue").UnwrapRef<Array<LegendEntry>>, destroy: function():void }}
  */
 export function getLegendEntries(app: import("../vcsUiApp.js").default): {
-    entries: import("vue").Ref<Array<LegendEntry>>;
+    entries: import("vue").UnwrapRef<Array<LegendEntry>>;
     destroy: () => void;
 };
 /**

package/src/legend/legendHelper.js

@@ -1,5 +1,5 @@
 import { getShapeFromOptions } from '@vcmap/core';
-import { shallowRef } from 'vue';
+import { reactive } from 'vue';
 
 /**
  * @enum {string}
@@ -136,13 +136,13 @@ export function createLayerLegendEntry(key, title, legend) {
 /**
  *
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: function():void }}
+ * @returns {{entries: import("vue").UnwrapRef<Array<LegendEntry>>, destroy: function():void }}
  */
 export function getLegendEntries(app) {
   /**
-   * @type {import("vue").Ref<Array<LegendEntry>>}>}
+   * @type {import("vue").UnwrapRef<Array<LegendEntry>>}>}
    */
-  const entries = shallowRef([]);
+  const entries = reactive([]);
   /**
    * @type {Object<string,function():void>}
    */
@@ -153,8 +153,10 @@ export function getLegendEntries(app) {
    */
   function removeEntryForLayer(layer) {
     const layerName = layer.name;
-    // reassign to trigger update
-    entries.value = entries.value.filter(({ key }) => key !== layerName);
+    const entryIndex = entries.findIndex(({ key }) => key === layerName);
+    if (entryIndex >= 0) {
+      entries.splice(entryIndex, 1);
+    }
     if (styleChangedListener[layerName]) {
       styleChangedListener[layerName]();
       delete styleChangedListener[layerName];
@@ -175,8 +177,7 @@ export function getLegendEntries(app) {
         layer.style?.properties?.legend ?? layer.properties?.legend;
       if (legend) {
         const legendEntry = createLayerLegendEntry(key, title, legend);
-        // use spread since push won't trigger updates. Put new entries at the start
-        entries.value = [legendEntry, ...entries.value];
+        entries.unshift(legendEntry);
       }
       if (layer.styleChanged) {
         styleChangedListener[layer.name] = layer.styleChanged.addEventListener(

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';
@@ -82,11 +82,7 @@ export function createSupportedMapMappingFunction(
   return (item, _c, listItem) => {
     const mapNames =
       typeof supportedMaps === 'function' ? supportedMaps(item) : supportedMaps;
-    if (mapCollection.activeMap) {
-      listItem.disabled = !mapNames.includes(mapCollection.activeMap.className);
-    } else {
-      listItem.disabled = true;
-    }
+    listItem.disabled = !mapNames.includes(mapCollection.activeMap.className);
     listItem.destroyFunctions.push(
       mapCollection.mapActivated.addEventListener((map) => {
         listItem.disabled = !mapNames.includes(map.className);
@@ -172,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