@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/featureInfo/BalloonComponent.vue

@@ -1,26 +1,32 @@
 <template>
-  <v-card class="mx-auto elevation-0" v-if="position">
+  <v-card class="mx-auto elevation-0 balloon-component" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
-      <v-list-item class="px-2 align-center">
-        <v-list-item-avatar tile size="16" class="mr-2">
-          <v-icon color="primary"> $vcsInfo </v-icon>
-        </v-list-item-avatar>
-        <v-list-item-content class="pr-1">
+      <v-list-item class="px-1">
+        <template #prepend="prependScope">
+          <slot name="prepend" v-bind="prependScope">
+            <div class="pl-1 pr-2">
+              <v-icon color="primary" :size="iconSize"> $vcsInfo </v-icon>
+            </div>
+          </slot>
+        </template>
+        <slot name="balloon-title" :attrs="{ ...$props, ...$attrs }">
           <v-list-item-title>
             <h3 class="font-weight-bold">
-              {{ $t(balloonTitle) }}
+              {{ $st(balloonTitle) }}
             </h3>
           </v-list-item-title>
           <v-list-item-subtitle v-if="balloonSubtitle">
-            {{ $t(balloonSubtitle) }}
+            {{ $st(balloonSubtitle) }}
           </v-list-item-subtitle>
-        </v-list-item-content>
-        <VcsButton
-          @click.stop="close"
-          icon="mdi-close-thick"
-          tooltip="components.close"
-          class="d-flex"
-        />
+        </slot>
+        <template #append>
+          <VcsButton
+            @click.stop="close"
+            icon="mdi-close-thick"
+            tooltip="components.close"
+            class="px-1"
+          />
+        </template>
       </v-list-item>
     </slot>
 
@@ -38,17 +44,15 @@
           color="transparent"
         >
           <v-list-item class="px-2">
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ $t(key) }}
-              </v-list-item-title>
-              <v-list-item-subtitle
-                :tag="getTag(tags, key)"
-                v-bind="getTagOptions(tags, key)"
-              >
-                {{ typeof value === 'string' ? $t(value) : value }}
-              </v-list-item-subtitle>
-            </v-list-item-content>
+            <v-list-item-title>
+              {{ $st(key) }}
+            </v-list-item-title>
+            <v-list-item-subtitle
+              :tag="getTag(tags, key)"
+              v-bind="getTagOptions(tags, key)"
+            >
+              {{ typeof value === 'string' ? $st(value) : value }}
+            </v-list-item-subtitle>
           </v-list-item>
         </v-list>
       </slot>
@@ -63,11 +67,9 @@
     VIcon,
     VList,
     VListItem,
-    VListItemAvatar,
-    VListItemContent,
     VListItemSubtitle,
     VListItemTitle,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import {
     getTargetSize,
     posToNumber,
@@ -75,6 +77,7 @@
   import { setupBalloonPositionListener } from './balloonHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import { getTag, getTagOptions } from '../components/tables/VcsTable.vue';
+  import { useIconSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description A balloon viewing feature attributes. Size dynamic dependent on number of attributes.
@@ -86,7 +89,9 @@
    * @vue-prop {Object} tags - optional object containing keys rendered as tags
    * @vue-prop {Array<import("ol/coordinate").Coordinate>} position - clicked position balloon is rendered at
    * @vue-data {slot} [#balloon-header] - slot to override balloon header, $props and $attrs are passed to `attrs`
+   * @vue-data {slot} [#balloon-title] - slot to override balloon title and subtitle, $props and $attrs are passed to `attrs`. Is overwritten by balloon-header slot.
    * @vue-data {slot} [#default] - slot to override balloon content, $props and $attrs are passed to `attrs`
+   * @vue-data {slot} [#prepend] - slot to override balloon header icon
    */
   export default {
     name: 'BalloonComponent',
@@ -95,9 +100,7 @@
       VCard,
       VList,
       VListItem,
-      VListItemAvatar,
       VIcon,
-      VListItemContent,
       VListItemTitle,
       VListItemSubtitle,
       VDivider,
@@ -190,8 +193,9 @@
         app.windowManager.remove(attrs['window-state'].id);
         destroyListener();
       };
-
+      const iconSize = useIconSize();
       return {
+        iconSize,
         close,
         getTag,
         getTagOptions,
@@ -202,8 +206,6 @@
 </script>
 
 <style lang="scss">
-  @import '../styles/shades.scss';
-
   .balloon {
     z-index: 0 !important;
   }
@@ -221,11 +223,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/BalloonComponent.vue.d.ts

@@ -24,11 +24,12 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
 }, {
+    iconSize: import("vue").ComputedRef<number>;
     close: () => void;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;
     maxHeight: import("vue").Ref<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<{
     featureId: {
         type: StringConstructor;
         required: true;
@@ -56,7 +57,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     position: unknown[];
     tags: Record<string, any>;
-}>;
+}, {}>;
 export default _default;
 import { getTag } from '../components/tables/VcsTable.vue';
 import { getTagOptions } from '../components/tables/VcsTable.vue';

package/src/featureInfo/IframeComponent.vue

@@ -1,5 +1,10 @@
 <template>
-  <iframe :src="src" :title="title" :style="{ height, width }" />
+  <iframe
+    :src="src"
+    :title="title"
+    :style="{ height, width }"
+    class="iframe-component"
+  />
 </template>
 <script>
   import { inject } from 'vue';

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

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     height: any;
     width: 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<{
     src: {
         type: StringConstructor;
         required: true;
@@ -21,5 +21,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     title: string;
-}>;
+}, {}>;
 export default _default;

package/src/featureInfo/MarkdownBalloonComponent.vue

@@ -1,10 +1,11 @@
 <template>
-  <BalloonComponent v-bind="{ ...$attrs }">
-    <div class="pa-2" v-html="html" />
+  <BalloonComponent v-bind="{ ...$attrs }" class="markdown-balloon-component">
+    <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,12 +1,12 @@
 declare const _default: import("vue").DefineComponent<{
-    html: {
+    content: {
         type: StringConstructor;
         required: true;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    html: {
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    content: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/featureInfo/abstractFeatureInfoView.d.ts

@@ -75,6 +75,15 @@ export function applyAttributeFilter(attributes: {
 export function applyOlcsAttributeFilter(attributes: {
     [x: string]: unknown;
 }, keys?: Array<string>): Object;
+/**
+ * Filters all __ attributes (from vc-converter tilesets) not provided as keys
+ * @param {Object<string, unknown>} attributes
+ * @param {Array<string>} keys
+ * @returns {Object}
+ */
+export function applyDoubleUnderscoreFilter(attributes: {
+    [x: string]: unknown;
+}, keys?: Array<string>): Object;
 /**
  * Filters attributes having an empty object as value
  * @param {Object<string, unknown>} attributes
@@ -103,7 +112,7 @@ export type FeatureInfoViewOptions = import("@vcmap/core").VcsObjectOptions & {
     keyMapping?: Record<string, string>;
     valueMapping?: Record<string, string | Record<string, string>>;
     tags?: Record<string, HTMLTagOptions>;
-    window?: import("../manager/window/windowManager.js").WindowComponentOptions;
+    window?: Pick<import("../manager/window/windowManager.js").WindowComponentOptions, 'state' | 'slot' | 'position'>;
 };
 /**
  * Abstract class to be extended by FeatureInfoView classes
@@ -117,9 +126,9 @@ declare class AbstractFeatureInfoView extends VcsObject {
     static getDefaultOptions(): FeatureInfoViewOptions;
     /**
      * @param {FeatureInfoViewOptions} options
-     * @param {import("vue").Component} component
+     * @param {import("vue").Component<FeatureInfoProps, unknown, unknown>} component
      */
-    constructor(options: FeatureInfoViewOptions, component: import("vue").Component);
+    constructor(options: FeatureInfoViewOptions, component: import("vue").Component<FeatureInfoProps, unknown, unknown>);
     /**
      * @type {string[]}
      */
@@ -145,7 +154,7 @@ declare class AbstractFeatureInfoView extends VcsObject {
         [x: string]: HTMLTagOptions;
     };
     /**
-     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>|Object}
      * @private
      */
     private _window;
@@ -156,14 +165,20 @@ declare class AbstractFeatureInfoView extends VcsObject {
     private _component;
     /**
      * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
-     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions<FeatureInfoProps>,'state'|'slot'|'position'>|Object}
      */
-    get window(): Object | import("../manager/window/windowManager.js").WindowComponentOptions;
+    get window(): Object | Pick<import("../manager/window/windowManager.js").WindowComponentOptions<FeatureInfoProps>, "slot" | "state" | "position">;
     /**
      * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
-     * @type {import("vue").Component|undefined}
+     * @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
      */
-    get component(): import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
+    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
@@ -24,13 +24,13 @@ import { replaceAttributes } from '../application/markdownHelper.js';
  *   keyMapping?: Record<string,string>,
  *   valueMapping?: Record<string, string|Record<string,string>>,
  *   tags?: Record<string, HTMLTagOptions>,
- *   window?: import("../manager/window/windowManager.js").WindowComponentOptions
+ *   window?: Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>
  * }} FeatureInfoViewOptions
  * @property {Array<string>} [attributeKeys] - list of keys to filter attributes of selected feature
  * @property {Object<string,string>} [keyMapping] - object providing text replacements or i18n strings for attribute keys
  * @property {Object<string, string|Object<string,string>>} [valueMapping] - object providing text replacements or i18n strings for attribute values
  * @property {Object<string,HTMLTagOptions>} [tags] - object with keys rendered as special html element. Value contains html options
- * @property {import("../manager/window/windowManager.js").WindowComponentOptions} [window] - state, slot, position can be set. Other options are predefined. headerTitle of window state can be a template string, e.g. "{{myAttribute}}" or ["{{layerName}}", " - ", "{{myAttribute}}"]
+ * @property {Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>} [window] - state, slot, position can be set. Other options are predefined. headerTitle of window state can be a template string, e.g. "{{myAttribute}}" or ["{{layerName}}", " - ", "{{myAttribute}}"]
  */
 
 /**
@@ -221,6 +221,21 @@ export function applyOlcsAttributeFilter(attributes, keys = []) {
     }, {});
 }
 
+/**
+ * Filters all __ attributes (from vc-converter tilesets) not provided as keys
+ * @param {Object<string, unknown>} attributes
+ * @param {Array<string>} keys
+ * @returns {Object}
+ */
+export function applyDoubleUnderscoreFilter(attributes, keys = []) {
+  return Object.keys(attributes)
+    .filter((key) => keys.includes(key) || !/^__/.test(key))
+    .reduce((obj, key) => {
+      obj[key] = attributes[key];
+      return obj;
+    }, {});
+}
+
 /**
  * Filters attributes having an empty object as value
  * @param {Object<string, unknown>} attributes
@@ -251,11 +266,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 {
@@ -294,7 +307,7 @@ class AbstractFeatureInfoView extends VcsObject {
 
   /**
    * @param {FeatureInfoViewOptions} options
-   * @param {import("vue").Component} component
+   * @param {import("vue").Component<FeatureInfoProps, unknown, unknown>} component
    */
   constructor(options, component) {
     super(options);
@@ -316,7 +329,7 @@ class AbstractFeatureInfoView extends VcsObject {
      */
     this.tags = options.tags || defaultOptions.tags;
     /**
-     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>|Object}
      * @private
      */
     this._window = options.window || defaultOptions.window;
@@ -329,7 +342,7 @@ class AbstractFeatureInfoView extends VcsObject {
 
   /**
    * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
-   * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+   * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions<FeatureInfoProps>,'state'|'slot'|'position'>|Object}
    */
   get window() {
     return this._window;
@@ -337,12 +350,22 @@ class AbstractFeatureInfoView extends VcsObject {
 
   /**
    * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
-   * @type {import("vue").Component|undefined}
+   * @type {import("vue").Component<FeatureInfoProps, unknown, unknown>|undefined}
    */
   get component() {
     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?.getAttributes() || {};
+  }
+
   /**
    * 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 +375,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);
     }
@@ -363,6 +386,7 @@ class AbstractFeatureInfoView extends VcsObject {
       applyKeyMapping(attributes, this.keyMapping);
     }
     attributes = applyOlcsAttributeFilter(attributes, this.attributeKeys);
+    attributes = applyDoubleUnderscoreFilter(attributes, this.attributeKeys);
     return applyEmptyAttributesFilter(attributes);
   }
 
@@ -375,7 +399,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) =>
@@ -422,15 +446,16 @@ class AbstractFeatureInfoView extends VcsObject {
    * @returns {import("../manager/window/windowManager.js").WindowComponentOptions}
    */
   getWindowComponentOptions(app, featureInfo, layer) {
+    const props = this.getProperties(featureInfo, layer);
     return {
       state: getWindowState(app, this.window.state, {
-        ...this.getAttributes(featureInfo.feature),
+        ...props.attributes,
         layerName: layer.properties?.title || layer.name,
       }),
       slot: this.window.slot ?? WindowSlot.DYNAMIC_RIGHT,
       component: this.component,
       position: this.window.position,
-      props: this.getProperties(featureInfo, layer),
+      props,
     };
   }
 

package/src/featureInfo/balloonFeatureInfoView.d.ts

@@ -24,9 +24,9 @@ export type BalloonFeatureInfoViewProps = import("./abstractFeatureInfoView.js")
 declare class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     /**
      * @param {BalloonFeatureInfoViewOptions} options
-     * @param {import("vue").Component} [component=BalloonComponent]
+     * @param {import("vue").Component<BalloonFeatureInfoViewProps, unknown, unknown>} [component=BalloonComponent]
      */
-    constructor(options: BalloonFeatureInfoViewOptions, component?: import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined);
+    constructor(options: BalloonFeatureInfoViewOptions, component?: import("vue").Component<BalloonFeatureInfoViewProps, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined);
     /**
      * @type {string}
      */

package/src/featureInfo/balloonFeatureInfoView.js

@@ -81,7 +81,7 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
 
   /**
    * @param {BalloonFeatureInfoViewOptions} options
-   * @param {import("vue").Component} [component=BalloonComponent]
+   * @param {import("vue").Component<BalloonFeatureInfoViewProps, unknown, unknown>} [component=BalloonComponent]
    */
   constructor(options, component) {
     super(options, component || BalloonComponent);

package/src/featureInfo/balloonHelper.js

@@ -28,7 +28,7 @@ export const balloonOffset = { x: 55, y: 25 };
  * @returns {undefined|import("@vcmap-cesium/engine").Cartesian2}
  */
 function getBalloonPositionCesium(scene, cartesian) {
-  return SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
+  return SceneTransforms.worldToWindowCoordinates(scene, cartesian);
 }
 
 /**

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.