@vcmap/ui 6.1.0-rc.6 → 6.1.0-rc.7

package/src/featureInfo/markdownFeatureInfoView.js

@@ -1,6 +1,5 @@
-import { renderTemplate } from '@vcmap/core';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
-import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
+import VcsTemplateMarkdown from '../components/form-output/VcsTemplateMarkdown.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions
@@ -8,7 +7,7 @@ import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
  */
 
 /**
- * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoProps & { html: string }} MarkdownFeatureInfoViewProps
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoProps & { template: string }} MarkdownFeatureInfoViewProps
  */
 
 /**
@@ -28,7 +27,7 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
    * @param {MarkdownFeatureInfoViewOptions} options
    */
   constructor(options) {
-    super(options, VcsMarkdown);
+    super(options, VcsTemplateMarkdown);
 
     /**
      * @type {string | string[]}
@@ -38,15 +37,6 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
       : options.template;
   }
 
-  /**
-   * @param {Record<string, unknown>} attributes
-   * @protected
-   * @returns {string}
-   */
-  _renderTemplate(attributes) {
-    return renderTemplate(this.template, attributes);
-  }
-
   /**
    * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a markdown rendering
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
@@ -57,10 +47,11 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      content: this._renderTemplate({
+      template: this.template,
+      context: {
         ...properties,
         ...properties.attributes,
-      }),
+      },
     };
   }
 

package/src/i18n/de.d.ts

@@ -123,33 +123,37 @@ declare namespace messages {
             export { tooltip_1 as tooltip };
         }
     }
-    export namespace content {
+    export namespace mobileMenu {
         let title: string;
-        let empty: string;
-        namespace search {
+    }
+    export namespace content {
+        let title_1: string;
+        export { title_1 as title };
+        export let empty: string;
+        export namespace search {
             let placeholder: string;
         }
-        namespace helpAction {
-            let title_1: string;
-            export { title_1 as title };
-        }
-        namespace infoAction {
+        export namespace helpAction {
             let title_2: string;
             export { title_2 as title };
         }
-        namespace viewpointAction {
+        export namespace infoAction {
             let title_3: string;
             export { title_3 as title };
         }
-        namespace styleAction {
+        export namespace viewpointAction {
             let title_4: string;
             export { title_4 as title };
         }
-        namespace layerExtentAction {
-            export let name: string;
+        export namespace styleAction {
             let title_5: string;
             export { title_5 as title };
         }
+        export namespace layerExtentAction {
+            export let name: string;
+            let title_6: string;
+            export { title_6 as title };
+        }
     }
     export namespace navigation {
         let rotateButton: string;
@@ -174,13 +178,13 @@ declare namespace messages {
         }
         namespace obliqueFallback {
             export let message: string;
-            let title_6: string;
-            export { title_6 as title };
+            let title_7: string;
+            export { title_7 as title };
         }
     }
     export namespace categoryManager {
-        let title_7: string;
-        export { title_7 as title };
+        let title_8: string;
+        export { title_8 as title };
         let tooltip_2: string;
         export { tooltip_2 as tooltip };
     }
@@ -257,8 +261,8 @@ declare namespace messages {
             export let general: string;
             let name_1: string;
             export { name_1 as name };
-            let title_8: string;
-            export { title_8 as title };
+            let title_9: string;
+            export { title_9 as title };
             export let titlePlaceholder: string;
             export let interpolation: string;
             export let duration: string;
@@ -292,8 +296,8 @@ declare namespace messages {
         export namespace viewpoint {
             let name_4: string;
             export { name_4 as name };
-            let title_9: string;
-            export { title_9 as title };
+            let title_10: string;
+            export { title_10 as title };
             let titlePlaceholder_1: string;
             export { titlePlaceholder_1 as titlePlaceholder };
             export let groundPosition: string;
@@ -318,8 +322,8 @@ declare namespace messages {
             let outOfRange: string;
         }
         export namespace extent {
-            let title_10: string;
-            export { title_10 as title };
+            let title_11: string;
+            export { title_11 as title };
             export let projection: string;
             export let min: string;
             export let max: string;
@@ -334,8 +338,8 @@ declare namespace messages {
             export let toggle: string;
         }
         export namespace projection_1 {
-            let title_11: string;
-            export { title_11 as title };
+            let title_12: string;
+            export { title_12 as title };
             export let epsg: string;
             export let proj4: string;
             export let proj4Tooltip: string;
@@ -363,8 +367,8 @@ declare namespace messages {
             export let modifyInfo: string;
             export let styleHeader: string;
             export namespace snapping {
-                let title_12: string;
-                export { title_12 as title };
+                let title_13: string;
+                export { title_13 as title };
                 let help_1: string;
                 export { help_1 as help };
                 export let orthogonalTooltip: string;
@@ -432,14 +436,14 @@ declare namespace messages {
         }
     }
     export namespace settings {
-        let title_13: string;
-        export { title_13 as title };
+        let title_14: string;
+        export { title_14 as title };
         let tooltip_3: string;
         export { tooltip_3 as tooltip };
         export let languageSelector: string;
         export namespace displayQuality {
-            let title_14: string;
-            export { title_14 as title };
+            let title_15: string;
+            export { title_15 as title };
             export namespace level {
                 let low: string;
                 let medium: string;
@@ -447,15 +451,15 @@ declare namespace messages {
             }
         }
         export namespace theme {
-            let title_15: string;
-            export { title_15 as title };
+            let title_16: string;
+            export { title_16 as title };
             export let dark: string;
             export let light: string;
         }
     }
     export namespace help_3 {
-        let title_16: string;
-        export { title_16 as title };
+        let title_17: string;
+        export { title_17 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
@@ -472,8 +476,8 @@ declare namespace messages {
         }
     }
     export namespace legend {
-        let title_17: string;
-        export { title_17 as title };
+        let title_18: string;
+        export { title_18 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_3: string;
@@ -482,8 +486,8 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_18: string;
-        export { title_18 as title };
+        let title_19: string;
+        export { title_19 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
@@ -491,41 +495,42 @@ declare namespace messages {
         export { placeholder_1 as placeholder };
         export let zoomToFeatureAction: string;
         export let zoomToAll: string;
+        export let zoomToAllMobile: string;
     }
     export { search_1 as search };
     export namespace toolbox {
-        let title_19: string;
-        export { title_19 as title };
+        let title_20: string;
+        export { title_20 as title };
         let flight_1: string;
         export { flight_1 as flight };
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_20: string;
-        export { title_20 as title };
+        let title_21: string;
+        export { title_21 as title };
         export namespace attributions {
-            let title_21: string;
-            export { title_21 as title };
+            let title_22: string;
+            export { title_22 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_4: string;
             export { empty_4 as empty };
         }
         export namespace imprint {
-            let title_22: string;
-            export { title_22 as title };
+            let title_23: string;
+            export { title_23 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_23: string;
-            export { title_23 as title };
+            let title_24: string;
+            export { title_24 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_24: string;
-            export { title_24 as title };
+            let title_25: string;
+            export { title_25 as title };
             let projection_2: string;
             export { projection_2 as projection };
         }
@@ -537,6 +542,9 @@ declare namespace messages {
             let west: string;
             let nadir: string;
         }
+        export namespace mobile {
+            let rotationWarning: string;
+        }
     }
     export namespace notification {
         let error: string;

package/src/i18n/de.js

@@ -22,6 +22,7 @@ const messages = {
       tooltip: 'Aktuellen Kartenausschnitt teilen',
     },
   },
+  mobileMenu: { title: 'Menü' },
   content: {
     title: 'Inhalte',
     empty: 'Aktuell sind keine Einträge verfügbar.',
@@ -347,6 +348,7 @@ const messages = {
     placeholder: 'Suche nach Adresse oder Ort/Sehenswürdigkeit',
     zoomToFeatureAction: 'Auf Ergebnis zoomen',
     zoomToAll: 'Auf alle Ergebnisse zoomen',
+    zoomToAllMobile: 'Auf alle zoomen',
   },
   toolbox: {
     title: 'Werkzeugkasten',
@@ -380,6 +382,9 @@ const messages = {
       west: 'West',
       nadir: 'Nadir',
     },
+    mobile: {
+      rotationWarning: 'Rotieren um alle Feature zu benutzen',
+    },
   },
   notification: {
     error: 'Fehler',

package/src/i18n/en.d.ts

@@ -123,33 +123,37 @@ declare namespace messages {
             export { tooltip_1 as tooltip };
         }
     }
-    export namespace content {
+    export namespace mobileMenu {
         let title: string;
-        let empty: string;
-        namespace search {
+    }
+    export namespace content {
+        let title_1: string;
+        export { title_1 as title };
+        export let empty: string;
+        export namespace search {
             let placeholder: string;
         }
-        namespace helpAction {
-            let title_1: string;
-            export { title_1 as title };
-        }
-        namespace infoAction {
+        export namespace helpAction {
             let title_2: string;
             export { title_2 as title };
         }
-        namespace viewpointAction {
+        export namespace infoAction {
             let title_3: string;
             export { title_3 as title };
         }
-        namespace styleAction {
+        export namespace viewpointAction {
             let title_4: string;
             export { title_4 as title };
         }
-        namespace layerExtentAction {
-            export let name: string;
+        export namespace styleAction {
             let title_5: string;
             export { title_5 as title };
         }
+        export namespace layerExtentAction {
+            export let name: string;
+            let title_6: string;
+            export { title_6 as title };
+        }
     }
     export namespace navigation {
         let rotateButton: string;
@@ -174,13 +178,13 @@ declare namespace messages {
         }
         namespace obliqueFallback {
             export let message: string;
-            let title_6: string;
-            export { title_6 as title };
+            let title_7: string;
+            export { title_7 as title };
         }
     }
     export namespace categoryManager {
-        let title_7: string;
-        export { title_7 as title };
+        let title_8: string;
+        export { title_8 as title };
         let tooltip_2: string;
         export { tooltip_2 as tooltip };
     }
@@ -257,8 +261,8 @@ declare namespace messages {
             export let general: string;
             let name_1: string;
             export { name_1 as name };
-            let title_8: string;
-            export { title_8 as title };
+            let title_9: string;
+            export { title_9 as title };
             export let titlePlaceholder: string;
             export let interpolation: string;
             export let duration: string;
@@ -292,8 +296,8 @@ declare namespace messages {
         export namespace viewpoint {
             let name_4: string;
             export { name_4 as name };
-            let title_9: string;
-            export { title_9 as title };
+            let title_10: string;
+            export { title_10 as title };
             let titlePlaceholder_1: string;
             export { titlePlaceholder_1 as titlePlaceholder };
             export let groundPosition: string;
@@ -318,8 +322,8 @@ declare namespace messages {
             let outOfRange: string;
         }
         export namespace extent {
-            let title_10: string;
-            export { title_10 as title };
+            let title_11: string;
+            export { title_11 as title };
             export let projection: string;
             export let min: string;
             export let max: string;
@@ -334,8 +338,8 @@ declare namespace messages {
             export let toggle: string;
         }
         export namespace projection_1 {
-            let title_11: string;
-            export { title_11 as title };
+            let title_12: string;
+            export { title_12 as title };
             export let epsg: string;
             export let proj4: string;
             export let proj4Tooltip: string;
@@ -363,8 +367,8 @@ declare namespace messages {
             export let modifyInfo: string;
             export let styleHeader: string;
             export namespace snapping {
-                let title_12: string;
-                export { title_12 as title };
+                let title_13: string;
+                export { title_13 as title };
                 let help_1: string;
                 export { help_1 as help };
                 export let orthogonalTooltip: string;
@@ -432,14 +436,14 @@ declare namespace messages {
         }
     }
     export namespace settings {
-        let title_13: string;
-        export { title_13 as title };
+        let title_14: string;
+        export { title_14 as title };
         let tooltip_3: string;
         export { tooltip_3 as tooltip };
         export let languageSelector: string;
         export namespace displayQuality {
-            let title_14: string;
-            export { title_14 as title };
+            let title_15: string;
+            export { title_15 as title };
             export namespace level {
                 let low: string;
                 let medium: string;
@@ -447,15 +451,15 @@ declare namespace messages {
             }
         }
         export namespace theme {
-            let title_15: string;
-            export { title_15 as title };
+            let title_16: string;
+            export { title_16 as title };
             export let dark: string;
             export let light: string;
         }
     }
     export namespace help_3 {
-        let title_16: string;
-        export { title_16 as title };
+        let title_17: string;
+        export { title_17 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
@@ -472,8 +476,8 @@ declare namespace messages {
         }
     }
     export namespace legend {
-        let title_17: string;
-        export { title_17 as title };
+        let title_18: string;
+        export { title_18 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_3: string;
@@ -482,50 +486,51 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_18: string;
-        export { title_18 as title };
+        let title_19: string;
+        export { title_19 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
         let placeholder_1: string;
         export { placeholder_1 as placeholder };
         export let zoomToFeatureAction: string;
+        export let zoomToAllMobile: string;
         export let zoomToAll: string;
     }
     export { search_1 as search };
     export namespace toolbox {
-        let title_19: string;
-        export { title_19 as title };
+        let title_20: string;
+        export { title_20 as title };
         let flight_1: string;
         export { flight_1 as flight };
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_20: string;
-        export { title_20 as title };
+        let title_21: string;
+        export { title_21 as title };
         export namespace attributions {
-            let title_21: string;
-            export { title_21 as title };
+            let title_22: string;
+            export { title_22 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_4: string;
             export { empty_4 as empty };
         }
         export namespace imprint {
-            let title_22: string;
-            export { title_22 as title };
+            let title_23: string;
+            export { title_23 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_23: string;
-            export { title_23 as title };
+            let title_24: string;
+            export { title_24 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_24: string;
-            export { title_24 as title };
+            let title_25: string;
+            export { title_25 as title };
             let projection_2: string;
             export { projection_2 as projection };
         }
@@ -537,6 +542,9 @@ declare namespace messages {
             let west: string;
             let nadir: string;
         }
+        export namespace mobile {
+            let rotationWarning: string;
+        }
     }
     export namespace notification {
         let error: string;

package/src/i18n/en.js

@@ -22,6 +22,7 @@ const messages = {
       tooltip: 'Share current view of the map',
     },
   },
+  mobileMenu: { title: 'Menu' },
   content: {
     title: 'Content',
     empty: 'Currently there are no entries available.',
@@ -346,6 +347,7 @@ const messages = {
     select: 'Select result item',
     placeholder: 'Search for address or landmark/point of interest',
     zoomToFeatureAction: 'Zoom to result',
+    zoomToAllMobile: 'Zoom to all',
     zoomToAll: 'Zoom to all',
   },
   toolbox: {
@@ -380,6 +382,9 @@ const messages = {
       west: 'west',
       nadir: 'nadir',
     },
+    mobile: {
+      rotationWarning: 'Rotate to use all features',
+    },
   },
   notification: {
     error: 'Error',

package/src/legend/VcsLegend.vue

@@ -12,10 +12,16 @@
         :key="i"
         :value="entry.key"
         :heading="entry.title"
-        :header-actions="entry.actions"
       >
-        <v-list class="pl-6 pb-2">
+        <v-list class="pl-6 pb-2 pr-2">
           <div v-for="(item, idx) in entry.legend" :key="idx">
+            <VcsButton
+              v-if="item.popoutBtn && item.src"
+              class="popout-button ma-1"
+              icon="mdi-open-in-new"
+              tooltip="legend.openInNew"
+              @click="openInNew(item.src)"
+            />
             <div v-if="item.type === LegendType.Image">
               <img
                 :src="$st(item.src)"
@@ -51,6 +57,7 @@
   import { useComponentId } from '../components/composables.js';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './StyleLegendItem.vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
   import VcsExpansionPanel from '../components/section/VcsExpansionPanel.vue';
 
   /**
@@ -61,6 +68,7 @@
   export default {
     name: 'VcsLegend',
     components: {
+      VcsButton,
       VcsExpansionPanel,
       StyleLegendItem,
       VExpansionPanels,
@@ -113,6 +121,9 @@
         setIframeHeight,
         panels,
         cid,
+        openInNew(src) {
+          window.open(src, '_blank');
+        },
       };
     },
   };
@@ -122,5 +133,13 @@
   .legend-image {
     max-width: 100%;
     height: auto;
+    position: relative;
+  }
+  .popout-button {
+    position: absolute;
+    // Matches the pr-2 padding of the LegendItem
+    right: 8px;
+    background-color: rgb(var(--v-theme-base-lighten-2));
+    z-index: 1;
   }
 </style>

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

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