@vcmap/ui 5.0.0-rc.8 → 5.0.0

package/src/logo.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="151" height="35.585" viewBox="0 0 151 35.585">
+  <g id="VCS_Logo_Color" transform="translate(0)">
+    <path id="Path_271" d="M245.674,76.716a3,3,0,0,1-2.116.868H213.62a3,3,0,0,0,2.116-.868l17.085-16.924,12.853,12.731A2.943,2.943,0,0,1,245.674,76.716Z" transform="translate(-180.688 -42)" fill="#00a0ba"/>
+    <path id="Path_272" d="M199.938,38.964V68.618a2.944,2.944,0,0,0,.878,2.1L170.878,41.061a2.943,2.943,0,0,1,0-4.193A3,3,0,0,1,173,36h29.938a3,3,0,0,0-2.117.868A2.943,2.943,0,0,0,199.938,38.964Z" transform="translate(-170 -36)" fill="#409d76"/>
+    <path id="Path_273" d="M231.848,53.792,214.764,70.717a3.014,3.014,0,0,1-4.233,0,2.948,2.948,0,0,1-.879-2.1V38.964a2.945,2.945,0,0,1,.879-2.1,3.014,3.014,0,0,1,4.233,0Z" transform="translate(-179.715 -36)" fill="#005434"/>
+    <path id="Path_274" d="M245.674,41.061,232.821,53.792,215.736,36.868A3,3,0,0,0,213.62,36h29.938a3.005,3.005,0,0,1,2.116.868A2.943,2.943,0,0,1,245.674,41.061Z" transform="translate(-180.688 -36)" fill="#86b110"/>
+    <path id="Path_275" d="M276.469,43.932c.18,0,.23.049.2.259l-1.849,6.874c-.442,1.7-.573,1.914-2.406,1.914-1.7,0-1.85-.2-2.325-1.914l-1.915-6.874c-.033-.211.032-.259.212-.259H270c.131,0,.147.049.214.259l1.7,6.453c.164.568.213.648.492.648.344,0,.409-.081.556-.648l1.653-6.453c.049-.211.082-.259.213-.259Z" transform="translate(-194.05 -38)" fill="#409d76"/>
+    <path id="Path_276" d="M283.025,42.691a.216.216,0,0,1,.245.243v8.48a.216.216,0,0,1-.245.243h-1.49a.216.216,0,0,1-.245-.243v-8.48a.216.216,0,0,1,.245-.243Zm.442-2.561a1.036,1.036,0,0,1-1.179,1.119,1.121,1.121,0,1,1,0-2.237A1.036,1.036,0,0,1,283.467,40.13Z" transform="translate(-197.219 -36.76)" fill="#409d76"/>
+    <path id="Path_277" d="M291.515,44c.164.049.262.114.262.292v.989c0,.179-.1.259-.278.244h-1.49c-.982,0-1.277.162-1.277.875v6.226a.216.216,0,0,1-.245.243H287a.216.216,0,0,1-.245-.243V45.9c0-1.929,1.555-2.075,2.766-2.075A10.535,10.535,0,0,1,291.515,44Z" transform="translate(-198.604 -37.973)" fill="#409d76"/>
+    <path id="Path_278" d="M295.885,40.611c.18-.049.278.049.278.227v2.27h1.62c.164,0,.262.082.262.243v1.022a.232.232,0,0,1-.262.259h-1.62v4.945c0,.713.213.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.262.262,0,0,1-.245.292,7.384,7.384,0,0,1-1.162.114c-1.277,0-2.6-.032-2.6-1.978V41.243c0-.162.082-.227.229-.259Z" transform="translate(-200.421 -37.159)" fill="#409d76"/>
+    <path id="Path_279" d="M308.785,43.932a.216.216,0,0,1,.245.243v8.269c0,.211-.082.227-.245.259a19.837,19.837,0,0,1-3.65.276c-3.028,0-3.879-.47-3.879-3.859V44.175c0-.162.115-.243.278-.243h1.474c.164,0,.23.082.23.243v4.589c0,2.4.376,2.513,1.915,2.513h1.882v-7.1a.216.216,0,0,1,.245-.243Z" transform="translate(-202.158 -38)" fill="#409d76"/>
+    <path id="Path_280" d="M316.88,49.077c-.867,0-1.261.276-1.261,1.087,0,.924.442,1.151,1.653,1.151a8.923,8.923,0,0,0,1.866-.178V49.077Zm4.239-2.593v5.642a.411.411,0,0,1-.328.47,15.409,15.409,0,0,1-3.683.357c-2.291,0-3.454-.357-3.454-2.707,0-2.059,1.1-2.578,3.11-2.578h2.374v-.844c0-.908-.541-1.3-1.851-1.3H314.6c-.2,0-.246-.049-.246-.243v-.989c0-.194.066-.227.229-.259a14.739,14.739,0,0,1,2.7-.211C320.17,43.824,321.12,44.732,321.12,46.483Z" transform="translate(-205.195 -37.973)" fill="#409d76"/>
+    <path id="Rectangle_510" d="M.325,0h1.33a.325.325,0,0,1,.325.325V12.078a.325.325,0,0,1-.325.325H.326A.326.326,0,0,1,0,12.077V.325A.325.325,0,0,1,.325,0Z" transform="translate(117.969 2.495)" fill="#409d76"/>
+    <path id="Path_281" d="M342.55,44a.262.262,0,0,1,.245.292v.989c0,.162-.082.243-.262.243h-2.57c-1.752,0-1.98.568-1.98,2.854s.229,2.87,1.98,2.87h2.57c.18,0,.262.081.262.243v.989a.263.263,0,0,1-.245.292,17.086,17.086,0,0,1-2.587.179c-3.323,0-3.977-.909-3.977-4.572s.655-4.556,3.977-4.556A16.987,16.987,0,0,1,342.55,44Z" transform="translate(-210.667 -37.973)" fill="#409d76"/>
+    <path id="Path_282" d="M348.821,42.691a.216.216,0,0,1,.245.243v8.48a.216.216,0,0,1-.245.243h-1.49a.216.216,0,0,1-.245-.243v-8.48a.216.216,0,0,1,.245-.243Zm.442-2.561a1.036,1.036,0,0,1-1.179,1.119,1.121,1.121,0,1,1,0-2.237A1.036,1.036,0,0,1,349.263,40.13Z" transform="translate(-213.338 -36.76)" fill="#409d76"/>
+    <path id="Path_283" d="M354.223,40.611c.18-.049.279.049.279.227v2.27h1.62a.228.228,0,0,1,.261.243v1.022a.232.232,0,0,1-.261.259H354.5v4.945c0,.713.212.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.262.262,0,0,1-.245.292,7.384,7.384,0,0,1-1.162.114c-1.277,0-2.6-.032-2.6-1.978V41.243c0-.162.082-.227.23-.259Z" transform="translate(-214.714 -37.159)" fill="#409d76"/>
+    <path id="Path_284" d="M367.2,43.932a.217.217,0,0,1,.246.243v8.2c-.017,2.821-.573,3.842-3.9,3.842a17.949,17.949,0,0,1-2.766-.179.236.236,0,0,1-.213-.259v-.956c0-.178.066-.243.229-.243h2.636c1.637,0,2.029-.389,2.029-1.67v-.082a12.48,12.48,0,0,1-2.1.147c-3.028,0-3.8-1.022-3.8-4.3V44.175a.216.216,0,0,1,.245-.243h1.49a.216.216,0,0,1,.245.243v4.232c0,2.318.3,2.854,2.128,2.854a13.514,13.514,0,0,0,1.785-.1V44.175a.216.216,0,0,1,.245-.243Z" transform="translate(-216.445 -38)" fill="#409d76"/>
+    <path id="Path_285" d="M275.307,63.735c.164.032.245.114.245.259v.956c0,.162-.082.243-.261.243h-3.012c-.687,0-1.08.211-1.08.713V66.1c0,.389.212.7.9.956l2.145.778a2.183,2.183,0,0,1,1.669,2.367v.211c0,1.849-1.243,2.27-3.388,2.27-1.423,0-2.652-.1-3.191-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.066-.259.262-.259h3.175c1.1,0,1.441-.129,1.441-.7v-.162c0-.389-.2-.648-.934-.924l-2.16-.81a2.324,2.324,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.941,16.941,0,0,1,275.307,63.735Z" transform="translate(-194.276 -42.949)" fill="#005434"/>
+    <path id="Path_286" d="M287.859,63.665a.216.216,0,0,1,.245.243v8.2c-.017,2.821-.573,3.842-3.9,3.842a17.956,17.956,0,0,1-2.766-.179.236.236,0,0,1-.213-.259V74.56c0-.178.066-.243.229-.243h2.636c1.637,0,2.03-.389,2.03-1.67v-.081a12.57,12.57,0,0,1-2.1.146c-3.028,0-3.8-1.022-3.8-4.3V63.908a.216.216,0,0,1,.246-.243h1.49a.216.216,0,0,1,.245.243V68.14c0,2.318.294,2.854,2.128,2.854a13.509,13.509,0,0,0,1.784-.1V63.908a.216.216,0,0,1,.246-.243Z" transform="translate(-197.007 -42.977)" fill="#005434"/>
+    <path id="Path_287" d="M299.154,63.735c.164.032.246.114.246.259v.956c0,.162-.082.243-.262.243h-3.012c-.687,0-1.08.211-1.08.713V66.1c0,.389.213.7.9.956l2.144.778a2.184,2.184,0,0,1,1.67,2.367v.211c0,1.849-1.244,2.27-3.388,2.27-1.424,0-2.652-.1-3.192-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.065-.259.261-.259h3.176c1.1,0,1.44-.129,1.44-.7v-.162c0-.389-.2-.648-.932-.924l-2.161-.81a2.325,2.325,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.947,16.947,0,0,1,299.154,63.735Z" transform="translate(-200.119 -42.949)" fill="#005434"/>
+    <path id="Path_288" d="M305.925,60.343c.18-.049.279.049.279.227v2.27h1.621a.229.229,0,0,1,.262.243V64.1a.233.233,0,0,1-.262.259H306.2v4.945c0,.713.213.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.263.263,0,0,1-.245.292,7.466,7.466,0,0,1-1.163.113c-1.277,0-2.6-.032-2.6-1.978V60.975c0-.162.082-.227.229-.259Z" transform="translate(-202.881 -42.136)" fill="#005434"/>
+    <path id="Path_289" d="M312.99,67.463h3.748c-.016-1.751-.376-2.2-1.833-2.2C313.383,65.259,313.006,65.713,312.99,67.463Zm5.746.487v.487c0,.307-.1.437-.557.437H312.99c.049,1.718.442,2.107,2.029,2.107h2.8a.216.216,0,0,1,.245.243v1.006a.246.246,0,0,1-.23.275,20.493,20.493,0,0,1-2.93.178c-3.191,0-3.912-.907-3.912-4.555,0-3.664.72-4.573,3.912-4.573C317.982,63.556,318.7,64.432,318.736,67.95Z" transform="translate(-204.544 -42.949)" fill="#005434"/>
+    <path id="Path_290" d="M335.8,67.134l-.033,5.221c0,.162-.066.243-.23.243h-1.489c-.164,0-.229-.081-.229-.243v-4.6c0-2.4-.376-2.513-1.8-2.513a10.087,10.087,0,0,0-1.636.129,6.5,6.5,0,0,1,.245,2.027l-.032,4.961c0,.179-.066.244-.213.244h-1.506a.217.217,0,0,1-.246-.244V67.426c0-2.091-.408-2.172-1.8-2.172h-1.391v7.1a.216.216,0,0,1-.246.243H323.7c-.164,0-.23-.081-.245-.243V64.07c0-.194.082-.227.245-.259a16.721,16.721,0,0,1,2.914-.259,7.382,7.382,0,0,1,2.815.486,9.167,9.167,0,0,1,2.75-.5C334.884,63.535,335.817,64.07,335.8,67.134Z" transform="translate(-207.598 -42.943)" fill="#005434"/>
+    <path id="Path_291" d="M348.214,63.735c.164.032.245.114.245.259v.956c0,.162-.082.243-.262.243h-3.012c-.688,0-1.08.211-1.08.713V66.1c0,.389.213.7.9.956l2.143.778a2.184,2.184,0,0,1,1.67,2.367v.211c0,1.849-1.244,2.27-3.388,2.27-1.424,0-2.652-.1-3.192-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.066-.259.262-.259h3.176c1.1,0,1.44-.129,1.44-.7v-.162c0-.389-.2-.648-.932-.924l-2.161-.81a2.325,2.325,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.956,16.956,0,0,1,348.214,63.735Z" transform="translate(-212.139 -42.949)" fill="#005434"/>
+  </g>
+</svg>

package/src/manager/buttonManager.js

@@ -1,63 +1,32 @@
-import { reactive } from '@vue/composition-api';
+import { reactive } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { check, checkMaybe } from '@vcsuite/check';
 import { vcsAppSymbol } from '../pluginHelper.js';
+import { ActionPattern } from '../components/lists/VcsActionList.vue';
 
 /**
- * sorts by owner and optionally plugin order
- * @param {ButtonComponent} a
- * @param {ButtonComponent} b
- * @param {string[]} [order] order of owners to sort by
+ * @param {number} weightA
+ * @param {number} weightB
  * @returns {number}
  */
-function sortByOwner(a, b, order = []) {
-  const sorted = [vcsAppSymbol, ...order];
-  return sorted.indexOf(b.owner) -
-    sorted.indexOf(a.owner);
+export function sortByWeight(weightA, weightB) {
+  return weightB - weightA;
 }
 
-/**
- * filters actions by button location and returns actions (optionally sorted)
- * @param {Array<ButtonComponent>} buttonComponents
- * @param {ButtonLocation} location Button render position
- * @param {string[]} [order] optional order to sort by (plugin names)
- * @param {function(a: ButtonComponent, b: ButtonComponent, order: string[]):number} [compareFn=sortByOwner] Per default components are sorted by owner: app first, then plugins
- * @returns {Array<VcsAction>}
- */
-export function getActionsByLocation(buttonComponents, location, order = [], compareFn = sortByOwner) {
-  return buttonComponents
-    .filter(b => b.location === location)
-    .sort((a, b) => compareFn(a, b, order))
-    .map(b => b.action);
-}
-
-/**
- * Possible render positions of buttons in navbar from left to right
- * @enum
- */
-export const ButtonLocation = {
-  MAP: 0,
-  CONTENT: 1,
-  TOOL: 2,
-  PROJECT: 3,
-  SHARE: 4,
-  MENU: 5,
-};
-
 /**
  * @typedef ButtonComponentOptions
- * @property {string} [id] Optional ID, If not provided a uuid will be generated.
- * @property {ButtonLocation} location Button render position
+ * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {VcsAction} action Action performed by button.
+ * @property {number} [weight=0] Optional weight affecting the displaying order
  */
 
 /**
  * @typedef ButtonComponent
  * @property {string} id
  * @property {string|vcsAppSymbol} owner
- * @property {ButtonLocation} location
  * @property {VcsAction} action
+ * @property {number} weight
  */
 
 /**
@@ -65,7 +34,7 @@ export const ButtonLocation = {
  * @description Manages a set of Map Buttons
  * @implements VcsComponentManager<ButtonComponent,ButtonComponentOptions>
  */
-export default class ButtonManager {
+class ButtonManager {
   constructor() {
     /**
      * @type {import("@vcmap/core").VcsEvent<ButtonComponent>}
@@ -79,8 +48,7 @@ export default class ButtonManager {
      * reactive ordered array of ids,
      * @type {Array<string>}
      */
-    this.componentIds = reactive([]);
-
+    this.componentIds = [];
     /**
      * @type {Map<string, ButtonComponent>}
      * @private
@@ -88,16 +56,12 @@ export default class ButtonManager {
     this._buttonComponents = new Map();
   }
 
-
   /**
    * @param {string} id
    * @returns {ButtonComponent}
    */
   get(id) {
-    if (this.has(id)) {
-      return this._buttonComponents.get(id);
-    }
-    return undefined;
+    return this._buttonComponents.get(id);
   }
 
   /**
@@ -114,6 +78,7 @@ export default class ButtonManager {
    * @param {string} id
    */
   remove(id) {
+    check(id, String);
     const buttonComponent = this._buttonComponents.get(id);
     if (buttonComponent) {
       const index = this.componentIds.indexOf(id);
@@ -132,18 +97,14 @@ export default class ButtonManager {
    */
   add(buttonComponentOptions, owner) {
     checkMaybe(buttonComponentOptions.id, String);
-    check(buttonComponentOptions.location, Object.values(ButtonLocation));
-    check(buttonComponentOptions.action, {
-      name: String,
-      title: [undefined, String],
-      icon: [undefined, String],
-      callback: Function,
-      active: [undefined, Boolean],
-    });
+    checkMaybe(buttonComponentOptions.weight, Number);
+    check(buttonComponentOptions.action, ActionPattern);
     check(owner, [String, vcsAppSymbol]);
 
     if (buttonComponentOptions.id && this.has(buttonComponentOptions.id)) {
-      throw new Error(`A button with id ${buttonComponentOptions.id} has already been registered.`);
+      throw new Error(
+        `A button with id ${buttonComponentOptions.id} has already been registered.`,
+      );
     }
     const id = buttonComponentOptions.id || uuidv4();
 
@@ -157,12 +118,16 @@ export default class ButtonManager {
       get owner() {
         return owner;
       },
-      get location() {
-        return buttonComponentOptions.location;
-      },
       get action() {
         return reactive(buttonComponentOptions.action);
       },
+      get weight() {
+        return buttonComponentOptions.weight || 0;
+      },
+      set weight(value) {
+        check(value, Number);
+        buttonComponentOptions.weight = value;
+      },
     };
 
     this._buttonComponents.set(id, buttonComponent);
@@ -189,7 +154,9 @@ export default class ButtonManager {
    */
   clear() {
     const componentIds = [...this.componentIds];
-    componentIds.forEach((id) => { this.remove(id); });
+    componentIds.forEach((id) => {
+      this.remove(id);
+    });
   }
 
   /**
@@ -202,3 +169,5 @@ export default class ButtonManager {
     this._buttonComponents.clear();
   }
 }
+
+export default ButtonManager;

package/src/manager/collectionManager/CollectionComponent.vue

@@ -0,0 +1,140 @@
+<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">
+            <v-icon class="mr-1" :class="{ rotate: !open }">
+              mdi-chevron-down
+            </v-icon>
+            {{ $t(title) }}
+          </div>
+          <VcsActionButtonList
+            v-if="actions?.length > 0"
+            :actions="actions"
+            :overflow-count="overflowCount"
+          />
+        </div>
+      </template>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content class="pb-1">
+      <vcs-list
+        :items="items.slice(0, limit)"
+        :draggable="draggable"
+        :selectable="selectable"
+        :single-select="singleSelect"
+        v-model="selection"
+        :show-title="false"
+        @item-moved="move"
+      />
+      <v-sheet v-if="items.length > limit" class="ma-2 pl-2">
+        <VcsButton @click="openCollectionComponentList">
+          {{ $t('collectionManager.more') }}
+        </VcsButton>
+      </v-sheet>
+      <v-sheet v-else-if="items.length === 0" class="ma-2 pl-2">
+        {{ $t('collectionManager.empty') }}
+      </v-sheet>
+    </v-expansion-panel-content>
+  </v-expansion-panel>
+</template>
+
+<script>
+  import { inject } from 'vue';
+  import {
+    VIcon,
+    VExpansionPanel,
+    VExpansionPanelHeader,
+    VExpansionPanelContent,
+    VSheet,
+  } from 'vuetify/lib';
+  import VcsList from '../../components/lists/VcsList.vue';
+  import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import { vcsAppSymbol } from '../../pluginHelper.js';
+  import { WindowSlot } from '../window/windowManager.js';
+  import CollectionComponentList, {
+    moveItem,
+  } from './CollectionComponentList.vue';
+
+  /**
+   * @description
+   * Renders the first ten items of a collectionComponent in a List. Uses CollectionComponentList to render more items.
+   * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   */
+  export default {
+    name: 'CollectionComponent',
+    components: {
+      VcsActionButtonList,
+      VcsButton,
+      VcsList,
+      VExpansionPanel,
+      VExpansionPanelHeader,
+      VExpansionPanelContent,
+      VSheet,
+      VIcon,
+    },
+    setup() {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      /**
+       * @type {CollectionComponent}
+       */
+      const collectionComponent = inject('collectionComponent');
+      const windowId = `${collectionComponent.id}-list`;
+
+      return {
+        title: collectionComponent.title,
+        items: collectionComponent.items,
+        selection: collectionComponent.selection,
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        overflowCount: collectionComponent.overflowCount,
+        limit: collectionComponent.limit,
+        actions: collectionComponent.getActions(),
+        move({ item, targetIndex }) {
+          moveItem(collectionComponent, item, targetIndex);
+        },
+        openCollectionComponentList() {
+          if (app.windowManager.has(windowId)) {
+            setTimeout(() => {
+              app.windowManager.bringWindowToTop(windowId);
+            }, 0);
+          } else {
+            app.windowManager.add(
+              {
+                id: windowId,
+                component: CollectionComponentList,
+                props: {
+                  windowId,
+                },
+                provides: {
+                  collectionComponent,
+                },
+                slot: WindowSlot.DYNAMIC_LEFT,
+              },
+              vcsAppSymbol,
+            );
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .rotate {
+    transform: rotate(-90deg);
+  }
+  .v-icon {
+    font-size: 16px;
+  }
+  ::v-deep {
+    .v-list {
+      .v-list-item {
+        padding: 4px 8px 4px 28px;
+      }
+    }
+  }
+</style>

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -0,0 +1,77 @@
+<template>
+  <vcs-list
+    :items="items"
+    :draggable="draggable"
+    :selectable="selectable"
+    :single-select="singleSelect"
+    v-model="selection"
+    :title="title"
+    @item-moved="move"
+  />
+</template>
+
+<script>
+  import { inject } from 'vue';
+  import { IndexedCollection } from '@vcmap/core';
+  import VcsList from '../../components/lists/VcsList.vue';
+
+  /**
+   * Moves an item to a new position.
+   * New position is derived from a target item in the collection.
+   * This ensures correct movement, if rendered list is only a subset of the collection.
+   * @param {CollectionComponent} collectionComponent
+   * @param {VcsListItem} item
+   * @param {number} targetIndex
+   */
+  export function moveItem(collectionComponent, item, targetIndex) {
+    const { collection } = collectionComponent;
+    if (collection instanceof IndexedCollection) {
+      const collectionItem = collection.getByKey(item.name);
+      const keyProperty = collection.uniqueKey;
+      const targetItem = collectionComponent.items.value[targetIndex];
+      const targetIndexCol = [...collection].findIndex(
+        (i) => i[keyProperty] === targetItem[keyProperty],
+      );
+      collection.moveTo(collectionItem, targetIndexCol);
+    }
+  }
+
+  /**
+   * @description
+   * Renders the items of a CollectionComponent in a List.
+   * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   * @vue-prop {string} windowId
+   */
+  export default {
+    name: 'CollectionComponentList',
+    components: {
+      VcsList,
+    },
+    props: {
+      windowId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup() {
+      /**
+       * @type {CollectionComponent}
+       */
+      const collectionComponent = inject('collectionComponent');
+
+      return {
+        title: collectionComponent.title,
+        items: collectionComponent.items,
+        selection: collectionComponent.selection,
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        move({ item, targetIndex }) {
+          moveItem(collectionComponent, item, targetIndex);
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped></style>

package/src/manager/collectionManager/CollectionComponentProvider.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="w-full">
+    <slot>
+      <collection-component />
+    </slot>
+  </div>
+</template>
+
+<script>
+  import { inject, provide } from 'vue';
+  import CollectionComponent from './CollectionComponent.vue';
+
+  /**
+   * @description Provides a CollectionComponent of a CollectionManager.
+   * The collectionManager must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   * @vue-prop {string} componentId - ID of the collectionComponent to be provided
+   * @vue-data {slot} [#default] - Slot rendering collection component.
+   */
+  export default {
+    name: 'CollectionManagerProvider',
+    components: {
+      CollectionComponent,
+    },
+    props: {
+      componentId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      /**
+       * @type {CollectionManager}
+       */
+      const collectionManager = inject('collectionManager');
+      const collectionComponent = collectionManager.get(props.componentId);
+      provide('collectionComponent', collectionComponent);
+    },
+  };
+</script>

package/src/manager/collectionManager/CollectionManager.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-container class="pa-0">
+    <v-expansion-panels
+      accordion
+      multiple
+      v-if="componentIds.length > 0"
+      v-model="panels"
+      class="rounded-0"
+    >
+      <collection-component-provider
+        v-for="componentId in componentIds"
+        :component-id="componentId"
+        :key="componentId"
+      />
+    </v-expansion-panels>
+  </v-container>
+</template>
+
+<script>
+  import { computed, inject, ref } from 'vue';
+  import { VExpansionPanels, VContainer } from 'vuetify/lib';
+  import CollectionComponentProvider from './CollectionComponentProvider.vue';
+
+  /**
+   * @description Renders the all managed CollectionComponents of a CollectionManager.
+   * The collectionManager must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   */
+  export default {
+    name: 'CollectionManager',
+    components: {
+      VExpansionPanels,
+      VContainer,
+      CollectionComponentProvider,
+    },
+    setup() {
+      const collectionManager = inject('collectionManager');
+      const componentIds = ref(collectionManager.componentIds);
+
+      /**
+       * @type {WritableComputedRef<number[]>}
+       */
+      const panels = computed({
+        get() {
+          return [...Array(componentIds.value.length).keys()].filter(
+            (p, idx) =>
+              !!collectionManager.get(componentIds.value[idx]).open.value,
+          );
+        },
+        set(value) {
+          componentIds.value.forEach((id, idx) => {
+            collectionManager.get(id).open.value = value.includes(idx);
+          });
+        },
+      });
+
+      return {
+        componentIds,
+        panels,
+      };
+    },
+  };
+</script>

package/src/manager/collectionManager/categoryManager.js

@@ -0,0 +1,83 @@
+import { moduleIdSymbol } from '@vcmap/core';
+import { vcsAppSymbol } from '../../pluginHelper.js';
+import CollectionManager from './collectionManager.js';
+
+/**
+ * Manages all requested category collections.
+ * Provides an API to add/remove collectionsComponents.
+ * @implements {VcsComponentManager<CollectionComponent, CollectionComponentOptions>}
+ * @extends CollectionManager
+ */
+class CategoryManager extends CollectionManager {
+  /**
+   * @param {import("@vcmap/ui").VcsUiApp} app
+   */
+  /**
+   * @param {import("@vcmap/ui").VcsUiApp} app
+   */
+  constructor(app) {
+    super();
+
+    /**
+     * @type {import("@vcmap/ui").VcsUiApp}
+     * @private
+     */
+    this._app = app;
+    /**
+     * @type {string}
+     * @private
+     */
+    this._dynamicModuleId = this._app.dynamicModuleId;
+
+    this._dynamicModuleIdFilter = (item) =>
+      item[moduleIdSymbol] === this._dynamicModuleId;
+
+    this.addFilterFunction(this._dynamicModuleIdFilter, vcsAppSymbol);
+
+    this._categoryListeners = [
+      this._app.dynamicModuleIdChanged.addEventListener((id) => {
+        this._dynamicModuleId = id;
+        this.reset();
+      }),
+      this._app.categories.removed.addEventListener((category) => {
+        const collectionComponents = this.getCollection(category.collection);
+        collectionComponents.forEach(({ id }) => this.remove(id));
+      }),
+    ];
+  }
+
+  /**
+   * Requests a new or existing category and adds its collection to this manager.
+   * The collectionComponent's id is always the category's name.
+   * Returns requested category and its corresponding collectionComponent.
+   * @param {import("@vcmap/core").CategoryOptions} options
+   * @param {string|symbol} owner
+   * @param {CollectionComponentUiOptions} collectionComponentOptions
+   * @return {{ collectionComponent:CollectionComponent,category:import("@vcmap/core").Category }}
+   */
+  async requestCategory(options, owner, collectionComponentOptions = {}) {
+    const category = await this._app.categories.requestCategory(options);
+    const id = category.name;
+    if (this.has(id)) {
+      const collectionComponent = this.get(id);
+      return { collectionComponent, category };
+    }
+    const collectionComponent = this.add(
+      {
+        ...collectionComponentOptions,
+        id,
+        title: collectionComponentOptions.title ?? category.title ?? id,
+        collection: category.collection,
+      },
+      owner,
+    );
+    return { collectionComponent, category };
+  }
+
+  destroy() {
+    super.destroy();
+    this._categoryListeners.forEach((cb) => cb());
+  }
+}
+
+export default CategoryManager;