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

package/src/contentTree/LayerTree.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     tree: any;
-    opened: import("vue").WritableComputedRef<any[]>;
+    open: import("vue").Ref<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {
         type: ObjectConstructor;

package/src/contentTree/contentTreeCollection.d.ts

@@ -62,6 +62,7 @@ declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
     private _suspendListeners;
     /**
      * @private
+     * @param {Array<string>} exclude
      */
     private _clearSubTrees;
     /**

package/src/contentTree/contentTreeCollection.js

@@ -53,6 +53,24 @@ class ContentTreeCollection extends IndexedCollection {
      */
     this._weightListeners = new Map();
 
+    const uiConfigChanged = () => {
+      this.subTreeViewItems.value.forEach((subTree) => {
+        if (
+          !this._app.uiConfig.config.hideContentTree &&
+          !this._subTreeListeners.has(subTree.name)
+        ) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.set(
+            subTree.name,
+            this._createSubtreeActionButton(subTree),
+          );
+        } else if (this._app.uiConfig.config.hideContentTree) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.delete(subTree.name);
+        }
+      });
+    };
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -78,6 +96,8 @@ class ContentTreeCollection extends IndexedCollection {
         }
       }),
       this.moved.addEventListener(() => recreateTree(true)),
+      app.uiConfig.added.addEventListener(uiConfigChanged),
+      app.uiConfig.removed.addEventListener(uiConfigChanged),
     ];
     /**
      * This is the default content tree.
@@ -113,11 +133,19 @@ class ContentTreeCollection extends IndexedCollection {
 
   /**
    * @private
+   * @param {Array<string>} exclude
    */
-  _clearSubTrees() {
-    this._subTreeViewItems.value.clear();
-    [...this._subTreeListeners.values()].forEach((cb) => {
-      cb();
+  _clearSubTrees(exclude = []) {
+    this._subTreeViewItems.value.forEach((tree, key) => {
+      if (!exclude.includes(key)) {
+        this._subTreeViewItems.value.delete(key);
+      }
+    });
+    this._subTreeListeners.forEach((cb, key) => {
+      if (!exclude.includes(key)) {
+        cb();
+        this._subTreeListeners.delete(key);
+      }
     });
   }
 
@@ -159,7 +187,6 @@ class ContentTreeCollection extends IndexedCollection {
       vcsAppSymbol,
       ButtonLocation.CONTENT,
     );
-    this._subTreeViewItems.value.set(id, subTreeViewItem);
     return () => {
       app.windowManager.remove(id);
       app.navbarManager.remove(id);
@@ -228,14 +255,21 @@ class ContentTreeCollection extends IndexedCollection {
       defaultSubTreeViewItem,
       ...topLevelItems.filter((i) => i[subTreeSymbol]),
     ];
-
+    this._clearSubTrees(
+      subTrees.map((tree) => {
+        return tree.name;
+      }),
+    );
     subTrees.forEach((subTree) => {
       if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
-        this._subTreeListeners.get(subTree.name)?.();
-        this._subTreeListeners.set(
-          subTree.name,
-          this._createSubtreeActionButton(subTree),
-        );
+        this._subTreeViewItems.value.set(subTree.name, subTree);
+        if (!this._app.uiConfig.config.hideContentTree) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.set(
+            subTree.name,
+            this._createSubtreeActionButton(subTree),
+          );
+        }
       } else {
         const buttonComponent = this._app.navbarManager.get(subTree.name);
         if (buttonComponent.weight !== subTree[subTreeItemWeight]) {

package/src/featureInfo/BalloonComponent.vue

@@ -1,9 +1,11 @@
 <template>
   <v-card class="mx-auto elevation-0" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
-      <v-list-item class="px-2 align-center">
+      <v-list-item class="px-1">
         <template #prepend>
-          <v-icon color="primary" size="16" class="mr-2"> $vcsInfo </v-icon>
+          <div class="pl-1 pr-2">
+            <v-icon color="primary" size="16"> $vcsInfo </v-icon>
+          </div>
         </template>
         <v-list-item-title>
           <h3 class="font-weight-bold">
@@ -13,12 +15,14 @@
         <v-list-item-subtitle v-if="balloonSubtitle">
           {{ $st(balloonSubtitle) }}
         </v-list-item-subtitle>
-        <VcsButton
-          @click.stop="close"
-          icon="mdi-close-thick"
-          tooltip="components.close"
-          class="d-flex"
-        />
+        <template #append>
+          <VcsButton
+            @click.stop="close"
+            icon="mdi-close-thick"
+            tooltip="components.close"
+            class="px-1"
+          />
+        </template>
       </v-list-item>
     </slot>
 
@@ -194,8 +198,6 @@
 </script>
 
 <style lang="scss">
-  @import '../styles/shades.scss';
-
   .balloon {
     z-index: 0 !important;
   }
@@ -213,11 +215,8 @@
     width: 0;
     filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
   }
-  .theme--light .balloon:after {
-    border-color: map-get($shades, 'white') transparent;
-  }
-  .theme--dark .balloon:after {
-    border-color: map-get($shades, 'black') transparent;
+  .balloon:after {
+    border-color: rgb(var(--v-theme-surface-light)) transparent;
   }
   .balloon .v-list-item .v-list-item__title,
   .balloon .v-list-item .v-list-item__subtitle {

package/src/featureInfo/MarkdownBalloonComponent.vue

@@ -1,10 +1,11 @@
 <template>
   <BalloonComponent v-bind="{ ...$attrs }">
-    <div class="pa-2" v-html="html" />
+    <VcsMarkdown :content="content" />
   </BalloonComponent>
 </template>
 <script>
   import BalloonComponent from './BalloonComponent.vue';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 
   /**
    * @description A balloon showing markdown content
@@ -12,12 +13,13 @@
   export default {
     name: 'MarkdownBalloonComponent',
     props: {
-      html: {
+      content: {
         type: String,
         required: true,
       },
     },
     components: {
+      VcsMarkdown,
       BalloonComponent,
     },
   };

package/src/featureInfo/MarkdownBalloonComponent.vue.d.ts

@@ -1,10 +1,10 @@
 declare const _default: import("vue").DefineComponent<{
-    html: {
+    content: {
         type: StringConstructor;
         required: true;
     };
 }, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    html: {
+    content: {
         type: StringConstructor;
         required: true;
     };

package/src/featureInfo/abstractFeatureInfoView.d.ts

@@ -164,6 +164,12 @@ declare class AbstractFeatureInfoView extends VcsObject {
      * @type {import("vue").Component<FeatureInfoProps, unknown, unknown>|undefined}
      */
     get component(): import("vue").Component<FeatureInfoProps, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined;
+    /**
+     * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+     * @returns {Object}
+     * @protected
+     */
+    protected _getAttributesFromFeature(feature: undefined | import("ol").Feature | import("@vcmap-cesium/engine").Cesium3DTileFeature | import("@vcmap-cesium/engine").Cesium3DTilePointFeature): Object;
     /**
      * This method returns all relevant attributes for this view.
      * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.

package/src/featureInfo/abstractFeatureInfoView.js

@@ -1,7 +1,7 @@
 import { VcsObject } from '@vcmap/core';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import { defaultTagOptions } from '../components/tables/VcsTable.vue';
-import { replaceAttributes } from '../application/markdownHelper.js';
+import { renderTemplate } from '../components/form-output/markdownHelper.js';
 
 /**
  * @typedef {Object} FeatureInfoProps
@@ -251,11 +251,9 @@ function getWindowState(app, state, attributes) {
   let headerTitle = state?.headerTitle;
   if (headerTitle) {
     if (Array.isArray(headerTitle)) {
-      headerTitle = headerTitle.map((item) =>
-        replaceAttributes(item, attributes),
-      );
+      headerTitle = headerTitle.map((item) => renderTemplate(item, attributes));
     } else {
-      headerTitle = replaceAttributes(headerTitle, attributes);
+      headerTitle = renderTemplate(headerTitle, attributes);
     }
   }
   return {
@@ -343,6 +341,16 @@ class AbstractFeatureInfoView extends VcsObject {
     return this._component;
   }
 
+  /**
+   * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+   * @returns {Object}
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _getAttributesFromFeature(feature) {
+    return feature?.getProperty('attributes') || {};
+  }
+
   /**
    * This method returns all relevant attributes for this view.
    * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.
@@ -352,7 +360,7 @@ class AbstractFeatureInfoView extends VcsObject {
    * @returns {Object}
    */
   getAttributes(feature) {
-    let attributes = feature.getProperty('attributes') || {};
+    let attributes = this._getAttributesFromFeature(feature);
     if (this.attributeKeys.length > 0) {
       attributes = applyAttributeFilter(attributes, this.attributeKeys);
     }
@@ -375,7 +383,7 @@ class AbstractFeatureInfoView extends VcsObject {
    */
   getTags(feature) {
     if (this.tags) {
-      const attributes = feature.getProperty('attributes') || {};
+      const attributes = this._getAttributesFromFeature(feature);
       const tags = Object.keys(this.tags)
         .filter(
           (key) =>

package/src/featureInfo/featureInfo.d.ts

@@ -10,11 +10,6 @@ export function getHighlightStyle(feature: FeatureType, layer: import("@vcmap/co
  * @returns {FeatureInfoSession}
  */
 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>>}
  */
@@ -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<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');
+
 /**
  * @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' },
-      ],
     };
   }