@vcmap/ui 5.1.8 → 5.2.1

package/src/featureInfo/markdownFeatureInfoView.js

@@ -0,0 +1,95 @@
+import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+import {
+  parseAndSanitizeMarkdown,
+  replaceAttributes,
+} from '../application/markdownHelper.js';
+
+/**
+ * @description A component to render markdown html
+ * @vue-prop {string} html - the html to render
+ */
+const MarkdownComponent = {
+  name: 'MarkdownComponent',
+  props: {
+    html: {
+      type: String,
+      required: true,
+    },
+  },
+  template: '<div class="pa-2" v-html="html" />',
+};
+
+/**
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions
+ * @property {string | string[]} template - a string or an array of strings which will be concatenated using \n
+ */
+
+/**
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoProps & { html: string }} MarkdownFeatureInfoViewProps
+ */
+
+/**
+ * @class
+ * @description A simple markdown feature info view. will render feature attributes into the markdown and replace {{}}
+ * @extends {AbstractFeatureInfoView}
+ */
+class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'MarkdownFeatureInfoView';
+  }
+
+  /**
+   * @param {MarkdownFeatureInfoViewOptions} options
+   */
+  constructor(options) {
+    super(options, MarkdownComponent);
+
+    /**
+     * @type {string | string[]}
+     */
+    this.template = Array.isArray(options.template)
+      ? options.template.slice()
+      : options.template;
+  }
+
+  /**
+   * @param {Record<string, unknown>} attributes
+   * @protected
+   * @returns {string}
+   */
+  _renderTemplate(attributes) {
+    return replaceAttributes(this.template, attributes);
+  }
+
+  /**
+   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {MarkdownFeatureInfoViewProps}
+   */
+  getProperties(featureInfo, layer) {
+    const properties = super.getProperties(featureInfo, layer);
+    return {
+      ...properties,
+      html: parseAndSanitizeMarkdown(
+        this._renderTemplate({ ...properties, ...properties.attributes }),
+      ),
+    };
+  }
+
+  /**
+   * @returns {MarkdownFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.template = Array.isArray(this.template)
+      ? this.template.slice()
+      : this.template;
+    return config;
+  }
+}
+
+export default MarkdownFeatureInfoView;

package/src/i18n/de.d.ts

@@ -142,6 +142,10 @@ declare namespace messages {
             export let zoomToAnchor: string;
             export let noAnchor: string;
             export let invalidDuration: string;
+            export let zoom: string;
+            let _export: string;
+            export { _export as export };
+            export let exportPath: string;
         }
         export namespace viewpoint {
             let name_2: string;
@@ -180,7 +184,8 @@ declare namespace messages {
             export let show: string;
             export let hide: string;
             export let create: string;
-            export let zoom: string;
+            let zoom_1: string;
+            export { zoom_1 as zoom };
             export let invalid: string;
             export let editVertices: string;
             export let translate: string;
@@ -337,8 +342,8 @@ declare namespace messages {
         export let editItem: string;
         let _import_1: string;
         export { _import_1 as import };
-        let _export: string;
-        export { _export as export };
+        let _export_1: string;
+        export { _export_1 as export };
         let _delete: string;
         export { _delete as delete };
         let edit_1: string;

package/src/i18n/de.js

@@ -132,6 +132,9 @@ const messages = {
       zoomToAnchor: 'Auf Stützpunkt zoomen',
       noAnchor: 'Es sind noch keine Stützpunkte definiert.',
       invalidDuration: 'Die Gesamtflugzeit muss größer als Null sein!',
+      zoom: 'Auf Ausdehnung zoomen',
+      export: 'Flug exportieren',
+      exportPath: 'Flugpfad exportieren',
     },
     viewpoint: {
       name: 'Name (ID)',

package/src/i18n/en.d.ts

@@ -142,11 +142,16 @@ declare namespace messages {
             export let zoomToAnchor: string;
             export let noAnchor: string;
             export let invalidDuration: string;
+            export let zoom: string;
+            let _export: string;
+            export { _export as export };
+            export let exportPath: string;
         }
         export namespace viewpoint {
             let name_2: string;
             export { name_2 as name };
-            export let viewpointTitle: string;
+            let title_7: string;
+            export { title_7 as title };
             let titlePlaceholder_1: string;
             export { titlePlaceholder_1 as titlePlaceholder };
             export let groundPosition: string;
@@ -171,15 +176,16 @@ declare namespace messages {
             let outOfRange: string;
         }
         export namespace extent {
-            let title_7: string;
-            export { title_7 as title };
+            let title_8: string;
+            export { title_8 as title };
             export let projection: string;
             export let min: string;
             export let max: string;
             export let show: string;
             export let hide: string;
             export let create: string;
-            export let zoom: string;
+            let zoom_1: string;
+            export { zoom_1 as zoom };
             export let invalid: string;
             export let editVertices: string;
             export let translate: string;
@@ -239,21 +245,21 @@ declare namespace messages {
         }
     }
     export namespace settings {
-        let title_8: string;
-        export { title_8 as title };
+        let title_9: string;
+        export { title_9 as title };
         let tooltip_3: string;
         export { tooltip_3 as tooltip };
         export let languageSelector: string;
         export namespace theme {
-            let title_9: string;
-            export { title_9 as title };
+            let title_10: string;
+            export { title_10 as title };
             export let dark: string;
             export let light: string;
         }
     }
     export namespace help_1 {
-        let title_10: string;
-        export { title_10 as title };
+        let title_11: string;
+        export { title_11 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
@@ -263,8 +269,8 @@ declare namespace messages {
         let deactivateToolTitle: string;
     }
     export namespace legend {
-        let title_11: string;
-        export { title_11 as title };
+        let title_12: string;
+        export { title_12 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_2: string;
@@ -273,8 +279,8 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_12: string;
-        export { title_12 as title };
+        let title_13: string;
+        export { title_13 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
@@ -290,31 +296,31 @@ declare namespace messages {
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_13: string;
-        export { title_13 as title };
+        let title_14: string;
+        export { title_14 as title };
         export namespace attributions {
-            let title_14: string;
-            export { title_14 as title };
+            let title_15: string;
+            export { title_15 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_3: string;
             export { empty_3 as empty };
         }
         export namespace imprint {
-            let title_15: string;
-            export { title_15 as title };
+            let title_16: string;
+            export { title_16 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_16: string;
-            export { title_16 as title };
+            let title_17: string;
+            export { title_17 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_17: string;
-            export { title_17 as title };
+            let title_18: string;
+            export { title_18 as title };
             let projection_1: string;
             export { projection_1 as projection };
         }
@@ -336,8 +342,8 @@ declare namespace messages {
         export let editItem: string;
         let _import_1: string;
         export { _import_1 as import };
-        let _export: string;
-        export { _export as export };
+        let _export_1: string;
+        export { _export_1 as export };
         let _delete: string;
         export { _delete as delete };
         let edit_1: string;

package/src/i18n/en.js

@@ -132,10 +132,13 @@ const messages = {
       zoomToAnchor: 'Zoom to anchor',
       noAnchor: 'No flight anchor available yet.',
       invalidDuration: 'The total flight duration must be greater zero!',
+      zoom: 'Zoom to extent',
+      export: 'Export flight',
+      exportPath: 'Export flight path',
     },
     viewpoint: {
       name: 'Name (ID)',
-      viewpointTitle: 'Title',
+      title: 'Title',
       titlePlaceholder: 'Title of viewpoint',
       groundPosition: 'Ground position',
       cameraPosition: 'Camera position',

package/src/manager/collectionManager/CollectionComponent.vue

@@ -21,23 +21,7 @@
       </template>
     </v-expansion-panel-header>
     <v-expansion-panel-content class="pb-1">
-      <vcs-list
-        :items="items.slice(0, limit)"
-        :draggable="draggable"
-        :selectable="selectable"
-        :single-select="singleSelect"
-        v-model="selection"
-        :show-title="false"
-        @item-moved="move"
-      />
-      <v-sheet v-if="items.length > limit" class="ma-2 pl-2">
-        <VcsButton @click="openCollectionComponentList">
-          {{ $t('collectionManager.more') }}
-        </VcsButton>
-      </v-sheet>
-      <v-sheet v-else-if="items.length === 0" class="ma-2 pl-2">
-        {{ $t('collectionManager.empty') }}
-      </v-sheet>
+      <CollectionComponentContent @openList="(id) => $emit('openList', id)" />
     </v-expansion-panel-content>
   </v-expansion-panel>
 </template>
@@ -49,30 +33,31 @@
     VExpansionPanel,
     VExpansionPanelHeader,
     VExpansionPanelContent,
-    VSheet,
   } from 'vuetify/lib';
-  import VcsList, {
-    createSelectionActions,
-  } from '../../components/lists/VcsList.vue';
+  import { createSelectionActions } from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
-  import VcsButton from '../../components/buttons/VcsButton.vue';
-  import { moveItem } from './CollectionComponentList.vue';
+  import CollectionComponentContent from './CollectionComponentContent.vue';
+
+  /**
+   * @typedef {Object} FormSectionOptions
+   * @property {boolean} [expandable]
+   * @property {boolean} [startOpen]
+   * @property {boolean} [disabled]
+   */
 
   /**
    * @description
-   * Renders the first ten items of a collectionComponent in a List. Uses CollectionComponentList to render more items.
+   * Renders content of CollectionComponentClass in an expansion panel using CollectionComponentContent.vue
    * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
    */
   export default {
     name: 'CollectionComponent',
     components: {
+      CollectionComponentContent,
       VcsActionButtonList,
-      VcsButton,
-      VcsList,
       VExpansionPanel,
       VExpansionPanelHeader,
       VExpansionPanelContent,
-      VSheet,
       VIcon,
     },
     setup(_props, { emit }) {
@@ -91,13 +76,9 @@
 
       return {
         title: collectionComponent.title,
-        items: collectionComponent.items,
         selection: collectionComponent.selection,
-        draggable: collectionComponent.draggable,
         selectable: collectionComponent.selectable,
-        singleSelect: collectionComponent.singleSelect,
         overflowCount: collectionComponent.overflowCount,
-        limit: collectionComponent.limit,
         actions: computed(() => {
           if (
             collectionComponent.selectable.value &&
@@ -107,12 +88,6 @@
           }
           return actions.value;
         }),
-        move({ item, targetIndex }) {
-          moveItem(collectionComponent, item, targetIndex);
-        },
-        openCollectionComponentList() {
-          emit('openList', collectionComponent.id);
-        },
       };
     },
   };
@@ -125,16 +100,4 @@
   .v-icon {
     font-size: 16px;
   }
-  ::v-deep {
-    .v-list {
-      .v-list-item {
-        padding: 4px 8px 4px 28px;
-      }
-      .v-list-item__selected {
-        border-left: solid 4px;
-        border-left-color: var(--v-primary-base);
-        padding-left: 24px !important;
-      }
-    }
-  }
 </style>

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

@@ -1,17 +1,13 @@
 declare const _default: import("vue").DefineComponent<{}, {
     title: any;
-    items: any;
     selection: any;
-    draggable: any;
     selectable: any;
-    singleSelect: any;
     overflowCount: any;
-    limit: any;
     actions: import("vue").ComputedRef<any>;
-    move({ item, targetIndex }: {
-        item: any;
-        targetIndex: any;
-    }): void;
-    openCollectionComponentList(): void;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;
+export type FormSectionOptions = {
+    expandable?: boolean | undefined;
+    startOpen?: boolean | undefined;
+    disabled?: boolean | undefined;
+};

package/src/manager/collectionManager/CollectionComponentContent.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-container class="py-0 px-0">
+    <vcs-list
+      :items="items.slice(0, limit)"
+      :draggable="draggable"
+      :selectable="selectable"
+      :single-select="singleSelect"
+      v-model="selection"
+      :show-title="false"
+      @item-moved="move"
+    />
+    <v-sheet v-if="items.length > limit" class="ma-2 pl-2">
+      <VcsButton @click="openCollectionComponentList">
+        {{ $t('collectionManager.more') }}
+      </VcsButton>
+    </v-sheet>
+    <v-sheet v-else-if="items.length === 0" class="ma-2 pl-2">
+      {{ $t('collectionManager.empty') }}
+    </v-sheet>
+  </v-container>
+</template>
+
+<script>
+  import { computed, inject } from 'vue';
+  import { VSheet, VContainer } from 'vuetify/lib';
+  import VcsList, {
+    createSelectionActions,
+  } from '../../components/lists/VcsList.vue';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import { moveItem } from './CollectionComponentList.vue';
+
+  /**
+   * @description
+   * Renders the first ten items of a collectionComponent in a List. Uses CollectionComponentList to render more items.
+   * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   * @vue-event {string} openList
+   */
+  export default {
+    name: 'CollectionComponent',
+    components: {
+      VcsButton,
+      VcsList,
+      VSheet,
+      VContainer,
+    },
+    setup(_props, { emit }) {
+      /**
+       * @type {CollectionComponentClass}
+       */
+      const collectionComponent = inject('collectionComponent');
+
+      const selectionActions = createSelectionActions(
+        collectionComponent.items,
+        collectionComponent.selection,
+        emit,
+      );
+
+      const actions = collectionComponent.getActions();
+
+      return {
+        title: collectionComponent.title,
+        items: collectionComponent.items,
+        selection: collectionComponent.selection,
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        overflowCount: collectionComponent.overflowCount,
+        limit: collectionComponent.limit,
+        actions: computed(() => {
+          if (
+            collectionComponent.selectable.value &&
+            !collectionComponent.singleSelect.value
+          ) {
+            return [...selectionActions, ...actions.value];
+          }
+          return actions.value;
+        }),
+        move({ item, targetIndex }) {
+          moveItem(collectionComponent, item, targetIndex);
+        },
+        openCollectionComponentList() {
+          emit('openList', collectionComponent.id);
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep {
+    .v-list {
+      .v-list-item {
+        padding: 4px 8px 4px 28px;
+      }
+      .v-list-item__selected {
+        border-left: solid 4px;
+        border-left-color: var(--v-primary-base);
+        padding-left: 24px !important;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    title: any;
+    items: any;
+    selection: any;
+    draggable: any;
+    selectable: any;
+    singleSelect: any;
+    overflowCount: any;
+    limit: any;
+    actions: import("vue").ComputedRef<any>;
+    move({ item, targetIndex }: {
+        item: any;
+        targetIndex: any;
+    }): void;
+    openCollectionComponentList(): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="v-expansion-panel-header px-2 v-expansion-panel-header--active">
+    <div
+      v-if="!hideHeader"
+      class="v-expansion-panel-header px-2 v-expansion-panel-header--active"
+    >
       <div class="d-flex justify-space-between">
         <div class="d-flex align-center gap-1 pl-2">
           <span>
@@ -69,7 +72,8 @@
    * @description
    * Renders the items of a CollectionComponentClass in a List.
    * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
-   * @vue-prop {string} showLessButton - Show a `show less button` at the end of the list, which will emit a closeList event
+   * @vue-prop {boolean} showLessButton - Show a `show less button` at the end of the list, which will emit a closeList event
+   * @vue-prop {boolean} hideHeader - Whether to hide the header or not
    */
   export default {
     name: 'CollectionComponentList',
@@ -78,6 +82,10 @@
         type: Boolean,
         default: true,
       },
+      hideHeader: {
+        type: Boolean,
+        default: false,
+      },
     },
     components: {
       VcsButton,

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

@@ -12,6 +12,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    hideHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     title: any;
     items: any;
@@ -32,7 +36,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    hideHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
+    hideHeader: boolean;
     showLessButton: boolean;
 }>;
 export default _default;