@vcmap/ui 6.0.0-rc.3 → 6.0.0-rc.6

package/src/featureInfo/featureInfo.d.ts

@@ -11,14 +11,9 @@ export function getHighlightStyle(feature: FeatureType, layer: import("@vcmap/co
  */
 export function createFeatureInfoSession(app: import("../vcsUiApp.js").default): FeatureInfoSession;
 /**
- * @typedef {Object} FeatureInfoSession
- * @property {VcsEvent<void>} stopped
- * @property {function():void} stop
- */
-/**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>}
+ * @type {ClassRegistry<typeof AbstractFeatureInfoView>}
  */
-export const featureInfoClassRegistry: ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>;
+export const featureInfoClassRegistry: ClassRegistry<typeof AbstractFeatureInfoView>;
 /**
  * Symbol added to features to overwrite the layers predefined feature info
  * @type {symbol}
@@ -43,6 +38,11 @@ export type FeatureInfoSession = {
 };
 import { ClassRegistry } from '@vcmap/core';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+/**
+ * @typedef {Object} FeatureInfoSession
+ * @property {VcsEvent<void>} stopped
+ * @property {function():void} stop
+ */
 /**
  * @class FeatureInfo
  * @description Provides registration of featureInfoClasses and stores featureInfoView instances.

package/src/featureInfo/featureInfo.js

@@ -23,6 +23,7 @@ import {
 import { Feature } from 'ol';
 import { check, maybe, oneOf } from '@vcsuite/check';
 
+import { reactive } from 'vue';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import FeatureInfoInteraction from './featureInfoInteraction.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
@@ -52,6 +53,17 @@ function getLogger() {
   return getLoggerByName('featureInfo');
 }
 
+/**
+ * @type {ClassRegistry<typeof AbstractFeatureInfoView>}
+ */
+export const featureInfoClassRegistry = new ClassRegistry();
+
+/**
+ * Symbol added to features to overwrite the layers predefined feature info
+ * @type {symbol}
+ */
+export const featureInfoViewSymbol = Symbol('featureInfoView');
+
 /**
  * @param {FeatureType} feature
  * @param {import("@vcmap/core").Layer} layer
@@ -133,7 +145,7 @@ function setupFeatureInfoTool(app) {
   /** @type {FeatureInfoSession|null} */
   let session = null;
 
-  const action = {
+  const action = reactive({
     name: 'featureInfoToggle',
     title: 'featureInfo.activateToolTitle',
     icon: '$vcsInfo',
@@ -144,46 +156,65 @@ function setupFeatureInfoTool(app) {
       } else {
         session = createFeatureInfoSession(app);
         session.stopped.addEventListener(() => {
-          this.active = false;
+          action.active = false;
           session = null;
           app.featureInfo.clear();
-          this.title = 'featureInfo.activateToolTitle';
+          action.title = 'featureInfo.activateToolTitle';
         });
         this.active = true;
-        this.title = 'featureInfo.deactivateToolTitle';
+        action.title = 'featureInfo.deactivateToolTitle';
       }
     },
-  };
+  });
 
   function addFeatureInfoButton() {
     if (app.uiConfig.getByKey('startingFeatureInfo')?.value !== false) {
       action.callback();
     }
-    app.toolboxManager.add(
-      {
-        id: 'featureInfo',
-        type: ToolboxType.SINGLE,
-        action,
-      },
-      vcsAppSymbol,
-    );
+    if (!app.toolboxManager.has('featureInfo')) {
+      app.toolboxManager.add(
+        {
+          id: 'featureInfo',
+          type: ToolboxType.SINGLE,
+          action,
+        },
+        vcsAppSymbol,
+      );
+    }
   }
 
-  if ([...app.layers].some((l) => l.properties?.featureInfo)) {
+  if (
+    [...app.layers].some((l) => l.properties?.featureInfo) ||
+    app.search.resultLayer.getFeatures().some((f) => !!f[featureInfoViewSymbol])
+  ) {
     addFeatureInfoButton();
   }
 
   const listeners = [
     app.layers.added.addEventListener((layer) => {
-      if (
-        layer?.properties?.featureInfo &&
-        !app.toolboxManager.has('featureInfo')
-      ) {
+      if (layer?.properties?.featureInfo) {
         addFeatureInfoButton();
       }
     }),
     app.layers.removed.addEventListener(() => {
       if (
+        ![...app.layers].some((l) => l.properties?.featureInfo) &&
+        !app.search.resultLayer
+          .getFeatures()
+          .some((f) => !!f[featureInfoViewSymbol]) &&
+        app.toolboxManager.has('featureInfo')
+      ) {
+        app.toolboxManager.remove('featureInfo');
+      }
+    }),
+    app.search.resultsChanged.addEventListener(() => {
+      if (
+        app.search.resultLayer
+          .getFeatures()
+          .some((f) => !!f[featureInfoViewSymbol])
+      ) {
+        addFeatureInfoButton();
+      } else if (
         ![...app.layers].some((l) => l.properties?.featureInfo) &&
         app.toolboxManager.has('featureInfo')
       ) {
@@ -207,17 +238,6 @@ function setupFeatureInfoTool(app) {
  * @property {function():void} stop
  */
 
-/**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>}
- */
-export const featureInfoClassRegistry = new ClassRegistry();
-
-/**
- * Symbol added to features to overwrite the layers predefined feature info
- * @type {symbol}
- */
-export const featureInfoViewSymbol = Symbol('featureInfoView');
-
 /**
  * @class FeatureInfo
  * @description Provides registration of featureInfoClasses and stores featureInfoView instances.
@@ -414,7 +434,7 @@ class FeatureInfo extends Collection {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ??
+            this._app.uiConfig.config.primaryColor ??
               getDefaultPrimaryColor(this._app),
           ),
         });
@@ -426,7 +446,7 @@ class FeatureInfo extends Collection {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ??
+            this._app.uiConfig.config.primaryColor ??
               getDefaultPrimaryColor(this._app),
           ),
         });

package/src/featureInfo/iframeFeatureInfoView.d.ts

@@ -9,7 +9,7 @@ export type IframeFeatureInfoViewProps = any & {
 };
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { src: string, title?: string }} IframeFeatureInfoViewOptions
- * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+ * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${gml:name}`
  * @property {string} [title] - optional title for the <iframe>
  */
 /**
@@ -34,7 +34,13 @@ declare class IframeFeatureInfoView extends AbstractFeatureInfoView {
      */
     title: string | undefined;
     /**
-     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * @param {Record<string, unknown>} attributes
+     * @protected
+     * @returns {string}
+     */
+    protected _renderTemplate(attributes: Record<string, unknown>): string;
+    /**
+     * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a URL
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
      * @param {import("@vcmap/core").Layer} layer
      * @returns {IframeFeatureInfoViewProps}

package/src/featureInfo/iframeFeatureInfoView.js

@@ -1,9 +1,10 @@
+import { renderTemplate } from '../components/form-output/markdownHelper.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import IframeComponent from './IframeComponent.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { src: string, title?: string }} IframeFeatureInfoViewOptions
- * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+ * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${gml:name}`
  * @property {string} [title] - optional title for the <iframe>
  */
 
@@ -41,7 +42,16 @@ class IframeFeatureInfoView extends AbstractFeatureInfoView {
   }
 
   /**
-   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * @param {Record<string, unknown>} attributes
+   * @protected
+   * @returns {string}
+   */
+  _renderTemplate(attributes) {
+    return renderTemplate(this.src, attributes);
+  }
+
+  /**
+   * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a URL
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
    * @returns {IframeFeatureInfoViewProps}
@@ -50,9 +60,9 @@ class IframeFeatureInfoView extends AbstractFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      src: this.src.replace(/\$\{(.*?)}/g, (match, token) => {
-        const variable = token.split('.');
-        return variable.reduce((obj, prop) => obj?.[prop], properties);
+      src: this._renderTemplate({
+        ...properties,
+        ...properties.attributes,
       }),
       title: this.title,
     };

package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts

@@ -33,7 +33,7 @@ declare class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
      */
     protected _renderTemplate(attributes: Record<string, unknown>): string;
     /**
-     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive markdown rendering
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
      * @param {import("@vcmap/core").Layer} layer
      * @returns {MarkdownBalloonFeatureInfoViewProps}

package/src/featureInfo/markdownBalloonFeatureInfoView.js

@@ -1,7 +1,7 @@
 import {
   parseAndSanitizeMarkdown,
-  replaceAttributes,
-} from '../application/markdownHelper.js';
+  renderTemplate,
+} from '../components/form-output/markdownHelper.js';
 import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
 import MarkdownBalloonComponent from './MarkdownBalloonComponent.vue';
 
@@ -47,11 +47,11 @@ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
    * @returns {string}
    */
   _renderTemplate(attributes) {
-    return replaceAttributes(this.template, attributes);
+    return renderTemplate(this.template, attributes);
   }
 
   /**
-   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive markdown rendering
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
    * @returns {MarkdownBalloonFeatureInfoViewProps}
@@ -60,7 +60,7 @@ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      html: parseAndSanitizeMarkdown(
+      content: parseAndSanitizeMarkdown(
         this._renderTemplate({ ...properties, ...properties.attributes }),
       ),
     };

package/src/featureInfo/markdownFeatureInfoView.d.ts

@@ -33,7 +33,7 @@ declare class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
      */
     protected _renderTemplate(attributes: Record<string, unknown>): string;
     /**
-     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a markdown rendering
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
      * @param {import("@vcmap/core").Layer} layer
      * @returns {MarkdownFeatureInfoViewProps}

package/src/featureInfo/markdownFeatureInfoView.js

@@ -1,9 +1,6 @@
+import { renderTemplate } from '../components/form-output/markdownHelper.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
-import {
-  parseAndSanitizeMarkdown,
-  replaceAttributes,
-} from '../application/markdownHelper.js';
-import MarkdownComponent from './MarkdownComponent.vue';
+import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions
@@ -31,7 +28,7 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
    * @param {MarkdownFeatureInfoViewOptions} options
    */
   constructor(options) {
-    super(options, MarkdownComponent);
+    super(options, VcsMarkdown);
 
     /**
      * @type {string | string[]}
@@ -47,11 +44,11 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
    * @returns {string}
    */
   _renderTemplate(attributes) {
-    return replaceAttributes(this.template, attributes);
+    return renderTemplate(this.template, attributes);
   }
 
   /**
-   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a markdown rendering
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
    * @returns {MarkdownFeatureInfoViewProps}
@@ -60,9 +57,10 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      html: parseAndSanitizeMarkdown(
-        this._renderTemplate({ ...properties, ...properties.attributes }),
-      ),
+      content: this._renderTemplate({
+        ...properties,
+        ...properties.attributes,
+      }),
     };
   }
 

package/src/featureInfo/tableFeatureInfoView.js

@@ -79,6 +79,19 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
     this.searchbarPlaceholder = options.searchbarPlaceholder;
   }
 
+  /**
+   * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+   * @returns {Object}
+   * @private
+   */
+  _getAttributesFromFeature(feature) {
+    const attributes = super._getAttributesFromFeature(feature);
+    return {
+      ...attributes,
+      featureId: feature.getId(),
+    };
+  }
+
   /**
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
@@ -92,10 +105,6 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
       itemsPerPageArray: this.itemsPerPageArray,
       showSearchbar: this.showSearchbar,
       searchbarPlaceholder: this.searchbarPlaceholder,
-      headers: [
-        { text: 'components.vcsTable.key', value: 'key', width: '128px' },
-        { text: 'components.vcsTable.value', value: 'value', width: '192px' },
-      ],
     };
   }
 

package/src/i18n/i18nCollection.d.ts

@@ -16,8 +16,8 @@ export function mergeDeep(...sources: Object[]): Object;
 /**
  * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
  * Other locales can be supported by adding corresponding mapping objects with associated locale key.
- * @typedef {Object} I18nConfigurationItem
- * @property {string} [name] - optional name for the item. If not provided checksum is used.
+ * @typedef {Record<string, string | object> & { name: string, properties?: object, de?: object, en?: object }} I18nConfigurationItem
+ * @property {string} name - the name for the item.
  * @property {Object} [properties]
  * @property {Object} [de]
  * @property {Object} [en]
@@ -33,17 +33,11 @@ export default I18nCollection;
  * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
  * Other locales can be supported by adding corresponding mapping objects with associated locale key.
  */
-export type I18nConfigurationItem = {
-    /**
-     * - optional name for the item. If not provided checksum is used.
-     */
-    name?: string | undefined;
-    properties?: Object | undefined;
-    de?: Object | undefined;
-    /**
-     * ...
-     */
-    en?: Object | undefined;
+export type I18nConfigurationItem = Record<string, string | object> & {
+    name: string;
+    properties?: object;
+    de?: object;
+    en?: object;
 };
 /**
  * @extends {IndexedCollection<I18nConfigurationItem>}
@@ -74,9 +68,9 @@ declare class I18nCollection extends IndexedCollection<I18nConfigurationItem> {
     /**
      * Returns a merged Message Object with the locale as a key and an Object with all the translated keys.
      * Includes all available plugin messages.
-     * @returns {Object}
+     * @returns {Record<string, object>}
      */
-    getMergedMessages(): Object;
+    getMergedMessages(): Record<string, object>;
 }
 import { IndexedCollection } from '@vcmap/core';
 import { VcsEvent } from '@vcmap/core';

package/src/i18n/i18nCollection.js

@@ -17,8 +17,8 @@ export function isObject(item) {
 /**
  * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
  * Other locales can be supported by adding corresponding mapping objects with associated locale key.
- * @typedef {Object} I18nConfigurationItem
- * @property {string} [name] - optional name for the item. If not provided checksum is used.
+ * @typedef {Record<string, string | object> & { name: string, properties?: object, de?: object, en?: object }} I18nConfigurationItem
+ * @property {string} name - the name for the item.
  * @property {Object} [properties]
  * @property {Object} [de]
  * @property {Object} [en]
@@ -113,7 +113,7 @@ class I18nCollection extends IndexedCollection {
   /**
    * Returns a merged Message Object with the locale as a key and an Object with all the translated keys.
    * Includes all available plugin messages.
-   * @returns {Object}
+   * @returns {Record<string, object>}
    */
   getMergedMessages() {
     const pluginMessages = [...this._pluginCollection]

package/src/legend/VcsLegend.vue

@@ -25,12 +25,12 @@
             </div>
             <div v-else-if="item.type === LegendType.Iframe">
               <iframe
-                :id="`legendIframe${idx}`"
+                :id="`${cid}-legendIframe${idx}`"
                 :src="$st(item.src)"
                 scrolling="no"
                 style="width: 100%; height: 100%"
                 frameBorder="0"
-                @load="setIframeHeight(`legendIframe${idx}`)"
+                @load="setIframeHeight(`${cid}-legendIframe${idx}`)"
               />
             </div>
             <style-legend-item v-else :item="item" />
@@ -47,6 +47,7 @@
 <script>
   import { VExpansionPanels, VList, VSheet } from 'vuetify/components';
   import { computed } from 'vue';
+  import { useComponentId } from '../components/composables.js';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './StyleLegendItem.vue';
   import VcsExpansionPanel from '../components/section/VcsExpansionPanel.vue';
@@ -93,10 +94,13 @@
         set() {},
       });
 
+      const cid = useComponentId();
+
       return {
         LegendType,
         setIframeHeight,
         panels, // TODO
+        cid,
       };
     },
   };

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

@@ -11,6 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     setIframeHeight: (id: string) => void;
     panels: import("vue").ComputedRef<number[]>;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     entries: {
         type: ArrayConstructor;

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -49,7 +49,7 @@
    * 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 {import("./collectionComponentClass.js").default<Object>} collectionComponent
-   * @param {import("../../components/lists/VcsList.vue").VcsListItem} item
+   * @param {import("../../components/lists/VcsListItemComponent.vue").VcsListItem} item
    * @param {number} targetIndex
    */
   export function moveItem(collectionComponent, item, targetIndex) {
@@ -136,6 +136,6 @@
 
 <style lang="scss" scoped>
   .inner-header {
-    height: calc(var(--v-vcs-item-height) - 8px);
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
   }
 </style>

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

@@ -3,10 +3,10 @@
  * 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 {import("./collectionComponentClass.js").default<Object>} collectionComponent
- * @param {import("../../components/lists/VcsList.vue").VcsListItem} item
+ * @param {import("../../components/lists/VcsListItemComponent.vue").VcsListItem} item
  * @param {number} targetIndex
  */
-export function moveItem(collectionComponent: import("./collectionComponentClass.js").default<Object>, item: import("../../components/lists/VcsList.vue").VcsListItem, targetIndex: number): void;
+export function moveItem(collectionComponent: import("./collectionComponentClass.js").default<Object>, item: import("../../components/lists/VcsListItemComponent.vue").VcsListItem, targetIndex: number): void;
 declare const _default: import("vue").DefineComponent<{
     showLessButton: {
         type: BooleanConstructor;

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

@@ -57,7 +57,7 @@ declare class CategoryManager extends CollectionManager implements ICategoryMana
      */
     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").Category<T>;
+        category: import("@vcmap/core").Category<T, object>;
     }>;
     /**
      * Updates the filterFunction for added moduleIds.

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

@@ -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").VcsObject> {
+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

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, shallowRef, watch } from 'vue';
+import { computed, reactive, ref, shallowRef, watch } from 'vue';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { check, oneOf } from '@vcsuite/check';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
@@ -36,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
@@ -55,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.vue").VcsListItem} listItem
+ * @param {import("../../components/lists/VcsListItemComponent.vue").VcsListItem} listItem
  * @param {string} newTitle
  */
 function titleChanged(item, listItem, newTitle) {
@@ -95,7 +95,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 {
   /**
@@ -341,7 +341,7 @@ class CollectionComponentClass {
    */
   _transformItem(item) {
     const keyProperty = this._collection.uniqueKey;
-    const listItem = {
+    const listItem = reactive({
       get name() {
         return item[keyProperty];
       },
@@ -356,7 +356,7 @@ class CollectionComponentClass {
       clickedCallbacks: [],
       destroy: undefined,
       destroyFunctions: [],
-    };
+    });
     if (this.renamable.value) {
       listItem.renamable = {
         name: this._actionTitles.renameTitle,

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

package/src/manager/collectionManager/editorCollectionComponentClass.js

@@ -3,6 +3,7 @@ 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,7 +63,7 @@ export function makeEditorCollectionComponentClass(
   app,
   collectionComponent,
   editingOptions,
-  parentId = 'category-manager',
+  parentId = categoryManagerWindowId,
 ) {
   check(collectionComponent, CollectionComponentClass);
   check(editingOptions.editor, oneOf(Object, Function));