@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.11

package/src/featureInfo/iframeFeatureInfoView.js

@@ -0,0 +1,95 @@
+import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+
+/**
+ * @description An iframe component
+ * @vue-prop {string} src - Specifies the address of the document to embed in the <iframe>
+ * @vue-prop {string} [title] - optional title for the <iframe>
+ */
+const IframeComponent = {
+  name: 'IframeComponent',
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: undefined,
+    },
+  },
+  template: '<iframe :src="src" :title="title" />',
+};
+
+/**
+ * @typedef {FeatureInfoViewOptions} 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} [title] - optional title for the <iframe>
+ */
+
+/**
+ * @typedef {FeatureInfoProps} IframeFeatureInfoViewProps
+ * @property {string} src
+ * @property {string|undefined} title
+ */
+
+/**
+ * @class
+ * @description An iframe view.
+ * @extends {AbstractFeatureInfoView}
+ */
+class IframeFeatureInfoView extends AbstractFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() { return 'IframeFeatureInfoView'; }
+
+  /**
+   * @param {IframeFeatureInfoViewOptions} options
+   */
+  constructor(options) {
+    super(options, IframeComponent);
+
+    /**
+     * @type {string}
+     */
+    this.src = options.src;
+    /**
+     * @type {string|undefined}
+     */
+    this.title = options.title || undefined;
+  }
+
+  /**
+   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {IframeFeatureInfoViewProps}
+   */
+  getProperties(featureInfo, layer) {
+    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);
+      }),
+      title: this.title,
+    };
+  }
+
+  /**
+   * @returns {IframeFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this.src) {
+      config.src = this.src;
+    }
+    if (this.title) {
+      config.title = this.title;
+    }
+    return config;
+  }
+}
+
+export default IframeFeatureInfoView;

package/src/featureInfo/tableFeatureInfoView.js

@@ -0,0 +1,106 @@
+import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+import VcsTable from '../components/tables/VcsTable.vue';
+
+/**
+ * @typedef {FeatureInfoViewOptions} TableFeatureInfoViewOptions
+ * @property {number} [itemsPerPage=10] - default has to be one of itemsPerPageArray
+ * @property {number[]} [itemsPerPageArray=[5, 10, 15]]
+ * @property {boolean} [showSearchbar]
+ * @property {string} [searchbarPlaceholder]
+ */
+
+/**
+ * @typedef {FeatureInfoProps} TableFeatureInfoViewProps
+ * @property {number} [itemsPerPage=10]
+ * @property {number[]} [itemsPerPageArray=[5, 10, 15]]
+ * @property {boolean} [showGroupBtn]
+ * @property {boolean} [showSearchbar]
+ * @property {string} [searchbarPlaceholder]
+ */
+
+/**
+ * @class
+ * @description A table view for feature attributes
+ * @extends {AbstractFeatureInfoView}
+ */
+class TableFeatureInfoView extends AbstractFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() { return 'TableFeatureInfoView'; }
+
+  /** @returns {TableFeatureInfoViewOptions} */
+  static getDefaultOptions() {
+    return {
+      itemsPerPageArray: [5, 10, 15],
+      itemsPerPage: 10,
+      showSearchbar: true,
+    };
+  }
+
+  /**
+   * @param {TableFeatureInfoViewOptions} options
+   */
+  constructor(options) {
+    super(options, VcsTable);
+    const defaultOptions = TableFeatureInfoView.getDefaultOptions();
+    /**
+     * @type {number[]}
+     */
+    this.itemsPerPageArray = options.itemsPerPageArray || defaultOptions.itemsPerPageArray;
+
+    const itemsPerPage = options.itemsPerPage || defaultOptions.itemsPerPage;
+    /**
+     * @type {number}
+     */
+    this.itemsPerPage = this.itemsPerPageArray.includes(itemsPerPage) ? itemsPerPage : this.itemsPerPageArray[0];
+    /**
+     * @type {boolean}
+     */
+    this.showSearchbar = options.showSearchbar || defaultOptions.showSearchbar;
+    /**
+     * @type {string}
+     */
+    this.searchbarPlaceholder = options.searchbarPlaceholder;
+  }
+
+  /**
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {TableFeatureInfoViewProps}
+   */
+  getProperties(featureInfo, layer) {
+    const properties = super.getProperties(featureInfo, layer);
+    return {
+      ...properties,
+      itemsPerPage: this.itemsPerPage,
+      itemsPerPageArray: this.itemsPerPageArray,
+      showSearchbar: this.showSearchbar,
+      searchbarPlaceholder: this.searchbarPlaceholder,
+    };
+  }
+
+  /**
+   * @returns {TableFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    const defaultOptions = TableFeatureInfoView.getDefaultOptions();
+    if (this.itemsPerPageArray.length !== defaultOptions.itemsPerPageArray.length ||
+      this.itemsPerPageArray.some((e, idx) => e !== defaultOptions.itemsPerPageArray[idx])) {
+      config.itemsPerPageArray = this.itemsPerPageArray;
+    }
+    if (this.itemsPerPage !== defaultOptions.itemsPerPage) {
+      config.itemsPerPage = this.itemsPerPage;
+    }
+    if (this.showSearchbar !== defaultOptions.showSearchbar) {
+      config.showSearchbar = this.showSearchbar;
+    }
+    if (this.searchbarPlaceholder) {
+      config.searchbarPlaceholder = this.searchbarPlaceholder;
+    }
+    return config;
+  }
+}
+
+export default TableFeatureInfoView;

package/src/i18n/de.js

@@ -41,12 +41,28 @@ const messages = {
     pitchTooltip: 'Kamera pitch: {0}°',
     overviewMapTooltip: 'Übersichtskarte',
   },
+  components: {
+    title: 'Komponenten',
+    tooltip: 'Komponenten',
+    vcsTable: {
+      key: 'Name',
+      value: 'Wert',
+      searchbarPlaceholder: 'Name, Wert, ...',
+      itemsPerPage: 'pro Seite',
+      nextPage: 'Nächste Seite',
+      formerPage: 'Vorherige Seite',
+    },
+  },
   settings: {
     title: 'Einstellungen',
     tooltip: 'Einstellungen',
     languageTitle: 'Spracheinstellungen',
     languageSelector: 'Sprache',
   },
+  featureInfo: {
+    activateToolTitle: 'Informationstool aktivieren',
+    deactivateToolTitle: 'Informationstool deaktivieren',
+  },
   footer: {
     title: 'Fußzeile',
   },

package/src/i18n/en.js

@@ -41,12 +41,28 @@ const messages = {
     pitchTooltip: 'Camera pitch: {0}°',
     overviewMapTooltip: 'Overview Map',
   },
+  components: {
+    title: 'Components',
+    tooltip: 'Components',
+    vcsTable: {
+      key: 'Name',
+      value: 'Value',
+      searchbarPlaceholder: 'Name, Value, ...',
+      itemsPerPage: 'per page',
+      nextPage: 'Next page',
+      formerPage: 'Former page',
+    },
+  },
   settings: {
     title: 'Settings',
     tooltip: 'Settings',
     languageTitle: 'Language settings',
     languageSelector: 'Language',
   },
+  featureInfo: {
+    activateToolTitle: 'Activate Infotool',
+    deactivateToolTitle: 'Deactivate Infotool',
+  },
   footer: {
     title: 'Footer',
   },

package/src/i18n/i18nCollection.js

@@ -109,15 +109,32 @@ class I18nCollection extends IndexedCollection {
   }
 
   /**
+   * This method adds plugin messages to the collection. It is no necessary to call this function
+   * from within a plugin. Use the i18n property on your plugin.
    * @param {string} plugin Name of the plugin
    * @param {string} contextId
    * @param {Object} messages
    */
   addPluginMessages(plugin, contextId, messages) {
     messages[i18nPluginSymbol] = plugin;
+    messages[contextIdSymbol] = contextId;
     this.add(messages);
   }
 
+  /**
+   * This method removes plugin messages from the collection. It is no necessary to call this function
+   * from within a plugin. Once your plugin is removed, the VcsUiApp will call this for you.
+   * @param {string} pluginName
+   * @param {string} contextId
+   */
+  removePluginMessages(pluginName, contextId) {
+    [...this]
+      .filter(item => item[i18nPluginSymbol] === pluginName && item[contextIdSymbol] === contextId)
+      .forEach((item) => {
+        this.remove(item);
+      });
+  }
+
   /**
    * returns a merged Message Object with the locale as a key and an Object with all the translated keys
    * @returns {Object}

package/src/manager/buttonManager.js

@@ -1,5 +1,4 @@
-/* eslint-disable import/prefer-default-export */
-import { reactive } from '@vue/composition-api';
+import { reactive } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { check, checkMaybe } from '@vcsuite/check';
@@ -23,7 +22,7 @@ import { vcsAppSymbol } from '../pluginHelper.js';
  * @description Manages a set of Map Buttons
  * @implements VcsComponentManager<ButtonComponent,ButtonComponentOptions>
  */
-export class ButtonManager {
+class ButtonManager {
   constructor() {
     /**
      * @type {import("@vcmap/core").VcsEvent<ButtonComponent>}
@@ -37,8 +36,7 @@ export class ButtonManager {
      * reactive ordered array of ids,
      * @type {Array<string>}
      */
-    this.componentIds = reactive([]);
-
+    this.componentIds = [];
     /**
      * @type {Map<string, ButtonComponent>}
      * @private
@@ -154,3 +152,5 @@ export class ButtonManager {
     this._buttonComponents.clear();
   }
 }
+
+export default ButtonManager;

package/src/manager/categoryManager/ComponentsManager.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <VcsTreeview
+      v-if="tree && tree.length"
+      :items="tree"
+      :has-searchbar="true"
+    />
+  </div>
+</template>
+
+<script>
+  import { inject } from 'vue';
+  import VcsTreeview from '../../components/lists/VcsTreeview.vue';
+
+  /**
+   * @description
+   * uses a VcsTreeview and shows 'a components Window' based on the "categoryManager"
+   * Uses the provided 'vcsApp'
+   */
+  export default {
+    name: 'VcsComponentsManager',
+    components: { VcsTreeview },
+    setup() {
+      const app = inject('vcsApp');
+      return {
+        tree: app.categoryManager.items,
+      };
+    },
+  };
+</script>