@vcmap/ui 5.0.0-rc.14 → 5.0.0-rc.15

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -108,6 +108,7 @@
 
   import { Subject } from 'rxjs';
   import { debounceTime } from 'rxjs/operators';
+  import { VIcon, VTextField } from 'vuetify/lib';
 
 
   /**
@@ -117,6 +118,10 @@
    */
   export default {
     name: 'VcsTreeviewSearchbar',
+    components: {
+      VIcon,
+      VTextField,
+    },
     props: {
       placeholder: {
         type: String,

package/src/components/notification/VcsTooltip.vue

@@ -110,15 +110,17 @@
 </style>
 <script>
 
-/**
- * @enum {string} TooltipPositions
- * @property {string} bottom
- * @property {string} left
- * @property {string} top
- * @property {string} right
- * @readonly
- * @module VcsTooltip
- */
+  import { VTooltip } from 'vuetify/lib';
+
+  /**
+   * @enum {string} TooltipPositions
+   * @property {string} bottom
+   * @property {string} left
+   * @property {string} top
+   * @property {string} right
+   * @readonly
+   * @module VcsTooltip
+   */
   const TooltipPositions = {
     bottom: 'arrow-top',
     top: 'arrow-bottom',
@@ -134,6 +136,9 @@
    */
   export default {
     name: 'VcsTooltip',
+    components: {
+      VTooltip,
+    },
     props: {
       tooltip: {
         type: String,

package/src/components/tables/VcsTable.vue

@@ -19,19 +19,19 @@
     >
       <!-- eslint-disable-next-line -->
       <template #item.key="{ item }">
-        <td class="vcs-table">
+        <td class="vcs-table px-2 overflow-max-width" :title="$t(item.key)">
           {{ $t(item.key) }}
         </td>
       </template>
       <!-- eslint-disable-next-line -->
       <template #item.value="{ item }">
-        <td class="vcs-table">
+        <td class="vcs-table px-2 overflow-max-width" :title="$t(item.value)">
           {{ $t(item.value) }}
         </td>
       </template>
       <template #footer>
         <v-divider />
-        <v-container class="pa-2" v-if="items.length > itemsPerPageRef">
+        <v-container class="pa-2 vcs-pagination-bar accent" v-if="items.length > itemsPerPageRef">
           <v-row
             dense
             no-gutters
@@ -55,20 +55,23 @@
                   v-for="(number, index) in itemsPerPageArray"
                   :key="index"
                   @click="updateItemsPerPage(number)"
+                  style="min-height: auto; height: 24px; text-align: right;"
                 >
                   <v-list-item-title>{{ number }}</v-list-item-title>
                 </v-list-item>
               </v-list>
             </v-menu>
-            <span class="grey--text mx-2">{{ $t('components.vcsTable.itemsPerPage') }}</span>
-            <span class="grey--text mx-2">{{ itemsFrom }} - {{ itemsTo }} of {{ items.length }}</span>
+            <span class="mx-2">{{ $t('components.vcsTable.itemsPerPage') }}</span>
+            <span class="mx-2">
+              {{ itemsFrom }} - {{ itemsTo }} {{ $t('components.vcsTable.ofItems') }} {{ numberOfItems }}
+            </span>
             <VcsButton
               small
               icon="mdi-chevron-left"
               @click="formerPage"
               tooltip="components.vcsTable.formerPage"
               :disabled="page < 2"
-              class="mx-2"
+              class="ml-1"
             />
             <VcsButton
               small
@@ -76,7 +79,7 @@
               @click="nextPage"
               tooltip="components.vcsTable.nextPage"
               :disabled="page > numberOfPages - 1"
-              class="mx-1"
+              class="ml-1"
             />
           </v-row>
         </v-container>
@@ -86,6 +89,9 @@
 </template>
 <script>
   import { getCurrentInstance, ref, computed } from 'vue';
+  import {
+    VContainer, VDataTable, VList, VListItem, VListItemTitle, VMenu, VRow,
+  } from 'vuetify/lib';
   import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
   import VcsButton from '../buttons/VcsButton.vue';
 
@@ -116,17 +122,32 @@
   }
 
   /**
-   * @description A table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-data-table/#props|vuetify v-data-table }
+   * @description A table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-data-table/#props v-data-table }
    * @vue-prop {string} featureId - feature's id
    * @vue-prop {Object} attributes - feature's attributes
    * @vue-prop {Array<{text: string, value: string}>} [headers] - optional array defining column names
    * @vue-prop {boolean} [showSearchbar=true] - whether to show searchbar
    * @vue-prop {string} [searchbarPlaceholder='Search'] - placeholder for searchbar
-   * @vue-computed {Array<{key:string,value:string}>} items - from attributes derived table items
+   * @vue-computed {Array<TableItem>} items - from attributes derived table items
+   * @vue-computed {Array<TableItem>} filteredItems - array of items with search filter applied on. If search string is empty, same as items array.
+   * @vue-computed {number} numberOfItems - number of filtered items (depending on search).
+   * @vue-computed {number} numberOfPages - number of pages depending on number of items, search and itemsPerPage.
+   * @vue-computed {number} itemsFrom - index of first item shown on current page.
+   * @vue-computed {number} itemsTo - index of last item shown on current page.
    */
   export default {
     name: 'VcsTable',
-    components: { VcsButton, VcsTreeviewSearchbar },
+    components: {
+      VcsButton,
+      VcsTreeviewSearchbar,
+      VDataTable,
+      VContainer,
+      VRow,
+      VMenu,
+      VList,
+      VListItem,
+      VListItemTitle,
+    },
     props: {
       featureId: {
         type: String,
@@ -162,7 +183,13 @@
     },
     setup(props) {
       const vm = getCurrentInstance().proxy;
-
+      /**
+       * @type {Ref<UnwrapRef<string>>}
+       */
+      const search = ref('');
+      /**
+       * @type {ComputedRef<Array<TableItem>>}
+       */
       const items = computed(() => {
         return attributesToItems({
           featureId: props.featureId,
@@ -170,6 +197,33 @@
         });
       });
 
+      /**
+       * @param {any} value
+       * @param {string|undefined} filter
+       * @param {TableItem} item
+       * @returns {boolean}
+       */
+      const handleFilter = (value, filter, item) => {
+        if (filter) {
+          const q = filter.toLocaleLowerCase();
+          return [item.key, item.value].some((i) => {
+            const content = i.toString();
+            const translated = vm.$t(content);
+            return translated.toLowerCase().includes(q) || content.toLowerCase().includes(q);
+          });
+        }
+        return true;
+      };
+
+      /**
+       * @type {ComputedRef<TableItem[]>}
+       */
+      const filteredItems = computed(() => items.value.filter(item => handleFilter(item.value, search.value, item)));
+      const numberOfItems = computed(() => filteredItems.value.length);
+
+      /**
+       * @type {ComputedRef<Array<{text: string, value: string}>>}
+       */
       const translatedHeaders = computed(() => {
         return props.headers.map((hd) => {
           hd.text = vm.$t(hd.text);
@@ -177,42 +231,33 @@
         });
       });
 
+      /**
+       * @type {Ref<UnwrapRef<number>>}
+       */
       const itemsPerPageRef = ref(props.itemsPerPage);
       const numberOfPages = computed(() => {
-        return Math.ceil(items.value.length / itemsPerPageRef.value);
+        return Math.ceil(numberOfItems.value / itemsPerPageRef.value);
       });
-
+      /**
+       * @type {Ref<UnwrapRef<number>>}
+       */
       const page = ref(1);
       const itemsFrom = computed(() => ((page.value - 1) * itemsPerPageRef.value) + 1);
       const itemsTo = computed(() => {
         const last = page.value * itemsPerPageRef.value;
-        return last < items.value.length ? last : items.value.length;
+        return last < numberOfItems.value ? last : numberOfItems.value;
       });
 
-      /**
-       * @param {any} value
-       * @param {string} search
-       * @param {TableItem} item
-       * @returns {boolean}
-       */
-      // eslint-disable-next-line default-param-last
-      const handleFilter = (value, search = '', item) => {
-        const q = search.toLocaleLowerCase();
-        return [item.key, item.value].some((i) => {
-          const content = i.toString();
-          const translated = vm.$t(content);
-          return translated.toLowerCase().includes(q) || content.toLowerCase().includes(q);
-        });
-      };
-
       return {
-        search: ref(''),
+        search,
         page,
         items,
+        filteredItems,
         itemsPerPageRef,
         itemsFrom,
         itemsTo,
         numberOfPages,
+        numberOfItems,
         nextPage() {
           if (page.value + 1 <= numberOfPages.value) {
             page.value += 1;
@@ -233,13 +278,47 @@
   };
 </script>
 
-<style lang="scss"  scoped>
-.vcs-table {
-  td {
-    max-width: 160px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+<style lang="scss" scoped>
+::v-deep{
+  .vcs-table {
+    td {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      &.overflow-max-width{
+        max-width: 160px;
+      }
+      &.v-data-table__mobile-row{
+        justify-content: left;
+        height: 27px;
+        min-height: auto;
+      }
+    }
+    th.sortable{
+      padding: 0 8px;
+      span{
+        vertical-align: middle;
+        padding: 0 4px 0 0;
+      }
+    }
+  }
+  .v-data-table__mobile-row__cell{
+    td.vcs-table.overflow-max-width{
+      max-width: 260px;
+    }
+  }
+  .v-btn.vcs-button--small{
+    height: 100% !important;
+    display: block;
+  }
+}
+.vcs-pagination-bar{
+  .vcs-button-wrap{
+    height: 25px;
+    border: 1px solid lightgrey;
+    padding: 0 4px;
+    background-color: var(--v-basic-base);
+    border-radius: 4px;
   }
 }
 </style>

package/src/featureInfo/AddressBalloonComponent.vue

@@ -31,6 +31,14 @@
 </template>
 <script>
 
+  import {
+    VIcon,
+    VListItem,
+    VListItemAvatar,
+    VListItemContent,
+    VListItemSubtitle,
+    VListItemTitle,
+  } from 'vuetify/lib';
   import BalloonComponent from './BalloonComponent.vue';
 
   /**
@@ -38,7 +46,15 @@
    */
   export default {
     name: 'AddressBalloonComponent',
-    components: { BalloonComponent },
+    components: {
+      BalloonComponent,
+      VListItem,
+      VListItemAvatar,
+      VIcon,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+    },
   };
 </script>
 

package/src/featureInfo/BalloonComponent.vue

@@ -1,40 +1,42 @@
 <template>
   <v-card
-    class="mx-auto"
+    class="mx-auto mb-1 elevation-0"
     max-width="400"
     v-if="position"
   >
     <slot name="balloon-header" :attrs="{...$props, ...$attrs}">
-      <v-list-item two-line>
+      <v-list-item class="px-2 pr-1 align-start">
         <v-list-item-avatar
           tile
-          size="40"
+          size="20"
+          class="mr-2 align-self-start"
         >
           <v-icon color="primary">
             $vcsInfo
           </v-icon>
         </v-list-item-avatar>
-        <v-list-item-content>
-          <v-list-item-title class="text-h5">
-            {{ title }}
+        <v-list-item-content class="py-2 pr-1 align-self-start">
+          <v-list-item-title class="text-h6">
+            {{ $t(title) }}
           </v-list-item-title>
-          <v-list-item-subtitle>{{ subtitle }}</v-list-item-subtitle>
+          <v-list-item-subtitle v-if="subtitle">
+            {{ $t(subtitle) }}
+          </v-list-item-subtitle>
         </v-list-item-content>
         <VcsButton
           @click.stop="close"
           small
           icon="mdi-close-thick"
-          class="mb-8"
         />
       </v-list-item>
     </slot>
 
     <v-divider />
 
-    <v-card class="overflow-y-auto" max-height="250">
+    <v-card class="overflow-y-auto py-2 elevation-0" max-height="250">
       <slot :attrs="{...$props, ...$attrs}">
         <v-list v-for="(value, name, index) in attributes" :key="`attribute-${index}`">
-          <v-list-item>
+          <v-list-item class="px-2">
             <v-list-item-content>
               <v-list-item-title>
                 {{ name }}
@@ -50,6 +52,15 @@
 <script>
 
   import { inject, onMounted, onUnmounted, watch } from 'vue';
+  import {
+    VCard, VDivider,
+    VIcon,
+    VList,
+    VListItem,
+    VListItemAvatar,
+    VListItemContent, VListItemSubtitle,
+    VListItemTitle,
+  } from 'vuetify/lib';
   import { setupBalloonPositionListener } from './balloonHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
 
@@ -66,7 +77,18 @@
    */
   export default {
     name: 'BalloonComponent',
-    components: { VcsButton },
+    components: {
+      VcsButton,
+      VCard,
+      VList,
+      VListItem,
+      VListItemAvatar,
+      VIcon,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+      VDivider,
+    },
     props: {
       featureId: {
         type: String,
@@ -125,16 +147,28 @@
   };
 </script>
 
-<style>
-.balloon:before {
-  content: "";
-  position: absolute;
-  bottom: -20px;
-  left: 40px;
-  border-width: 20px 20px 0;
-  border-style: solid;
-  border-color: white transparent;
-  display: block;
-  width: 0;
-}
+<style lang="scss">
+  .balloon hr:first-child {
+    display: none;
+  }
+  .balloon:after {
+    content: "";
+    position: absolute;
+    bottom: -20px;
+    left: 40px;
+    border-width: 20px 20px 0;
+    border-style: solid;
+    display: block;
+    width: 0;
+  }
+  .v-sheet.theme--light.balloon:after{
+    border-color: #FFFFFF transparent;
+  }
+  .v-sheet.theme--dark.balloon:after{
+    border-color: #1E1E1E transparent;
+  }
+  .balloon .v-list-item .v-list-item__title,
+  .balloon .v-list-item .v-list-item__subtitle {
+    line-height: 18px;
+  }
 </style>

package/src/featureInfo/balloonFeatureInfoView.js

@@ -105,10 +105,10 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     return {
       ...properties,
       position: featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
-      title: this.title ?
+      title: this.title != null ?
         extractNestedKey(this.title, properties.attributes, this.title) :
         properties.layerProperties.title,
-      subtitle: this.subtitle ?
+      subtitle: this.subtitle != null ?
         extractNestedKey(this.subtitle, properties.attributes, this.subtitle) :
         properties.featureId,
     };

package/src/featureInfo/featureInfo.js

@@ -59,7 +59,7 @@ function getLogger() {
  * @param {string} defaultFillColor
  * @returns {import("ol/style/Style").default|import("@vcmap/core").VectorStyleItem}
  */
-function getHighlightStyle(feature, layer, defaultFillColor) {
+export function getHighlightStyle(feature, layer, defaultFillColor) {
   if (layer && layer.highlightStyle) {
     return layer.highlightStyle;
   }
@@ -175,6 +175,12 @@ function setupFeatureInfoTool(app) {
  */
 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 in its collection.
@@ -355,7 +361,9 @@ class FeatureInfo {
     checkMaybe(windowPosition, [Number]);
     checkMaybe(featureInfoView, AbstractFeatureInfoView);
 
-    const usedFeatureInfoView = featureInfoView ?? this._getFeatureInfoViewForFeature(feature);
+    const usedFeatureInfoView = feature[featureInfoViewSymbol] ??
+      featureInfoView ??
+      this._getFeatureInfoViewForFeature(feature);
     const layer = this._app.layers.getByKey(feature[vcsLayerName]);
 
     if (usedFeatureInfoView && layer) {

package/src/i18n/de.js

@@ -44,11 +44,15 @@ const messages = {
   components: {
     title: 'Komponenten',
     tooltip: 'Komponenten',
+    vcsFormSection: {
+      help: 'Hilfe anzeigen.',
+    },
     vcsTable: {
       key: 'Name',
       value: 'Wert',
       searchbarPlaceholder: 'Name, Wert, ...',
       itemsPerPage: 'pro Seite',
+      ofItems: 'von',
       nextPage: 'Nächste Seite',
       formerPage: 'Vorherige Seite',
     },
@@ -69,12 +73,23 @@ const messages = {
     openInNew: 'In neuem Browser Tab öffnen',
     defaultLabelText: 'Text',
   },
+  search: {
+    title: 'Suche',
+    tooltip: 'Suche',
+    select: 'Suchergebnis selektieren',
+    placeholder: 'Suche nach Straße, Adresse, Ort, POI',
+    zoomToFeatureAction: 'Auf Ergebnis zoomen',
+  },
   toolbox: {
     flight: 'Flug',
     miscellaneous: 'Verschiedenes',
   },
   footer: {
     title: 'Fußzeile',
+    attributions: {
+      title: 'Attribution',
+      tooltip: 'Öffne Attribution Fenster',
+    },
   },
 };
 

package/src/i18n/en.js

@@ -44,11 +44,15 @@ const messages = {
   components: {
     title: 'Components',
     tooltip: 'Components',
+    vcsFormSection: {
+      help: 'Show help.',
+    },
     vcsTable: {
       key: 'Name',
       value: 'Value',
       searchbarPlaceholder: 'Name, Value, ...',
       itemsPerPage: 'per page',
+      ofItems: 'of',
       nextPage: 'Next page',
       formerPage: 'Former page',
     },
@@ -69,12 +73,23 @@ const messages = {
     openInNew: 'Open in new tab',
     defaultLabelText: 'Text',
   },
+  search: {
+    title: 'Search',
+    tooltip: 'Search',
+    select: 'Select result item',
+    placeholder: 'Search for Street, Address, Landmark, POI',
+    zoomToFeatureAction: 'Zoom to result',
+  },
   toolbox: {
     flight: 'flight',
     miscellaneous: 'miscellaneous',
   },
   footer: {
     title: 'Footer',
+    attributions: {
+      title: 'Attributions',
+      tooltip: 'Open Attributions Window',
+    },
   },
 };
 

package/src/legend/legendHelper.js

@@ -1,5 +1,5 @@
 import { getShapeFromOptions } from '@vcmap/core';
-import Vue, { reactive } from 'vue';
+import { ref } from 'vue';
 
 /**
  * @enum {string}
@@ -104,6 +104,7 @@ export function getImageSrcFromShape(image) {
 
 /**
  * @typedef {Object} LegendEntry
+ * @property {string} key
  * @property {string} title - layer or entry name
  * @property {Array<LegendItem>} legend - legend properties
  * @property {Array<VcsAction>} actions - popout actions
@@ -111,11 +112,12 @@ export function getImageSrcFromShape(image) {
 
 /**
  * creates a LegendEntry with title, options and optionally popout action to the entries array
+ * @param {string} key - layerName
  * @param {string} title
  * @param {Array<LegendItem>} legend
  * @returns {LegendEntry}
  */
-export function createLayerLegendEntry(title, legend) {
+export function createLayerLegendEntry(key, title, legend) {
   const actions = [];
   legend.forEach((item) => {
     // XXX only one popout button allowed. Rethink if use case for multiple popout buttons comes up.
@@ -128,19 +130,19 @@ export function createLayerLegendEntry(title, legend) {
       });
     }
   });
-  return { title, legend, actions };
+  return { key, title, legend, actions };
 }
 
 /**
  *
  * @param {VcsUiApp} app
- * @returns {{entries: import("vue").Reactive<{string,LegendEntry}>, destroy: (function():void)}}
+ * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: (function():void)}}
  */
 export function getLegendEntries(app) {
   /**
-   * @type {import("vue").Reactive<{string,LegendEntry}>}
+   * @type {import("vue").Ref<Array<LegendEntry>>}>}
    */
-  const entries = reactive({});
+  const entries = ref([]);
   /**
    * @type {Object<string,function():void>}
    */
@@ -150,11 +152,14 @@ export function getLegendEntries(app) {
    * @param {import("@vcmap/core").Layer} layer
    */
   function removeEntryForLayer(layer) {
-    const key = layer.name;
-    Vue.delete(entries, key); // XXX Vue.delete can be removed on Vue3
-    if (styleChangedListener[key]) {
-      styleChangedListener[key]();
-      delete styleChangedListener[key];
+    const layerName = layer.name;
+    const index = entries.value.findIndex(({ key }) => { return key === layerName; });
+    if (index >= 0) {
+      entries.value.splice(index, 1);
+    }
+    if (styleChangedListener[layerName]) {
+      styleChangedListener[layerName]();
+      delete styleChangedListener[layerName];
     }
   }
 
@@ -170,7 +175,8 @@ export function getLegendEntries(app) {
       const title = layer.properties.title || layer.name;
       const legend = layer.style?.properties?.legend ?? layer.properties?.legend;
       if (legend) {
-        Vue.set(entries, key, createLayerLegendEntry(title, legend)); // XXX Vue.set can be removed on Vue3
+        const legendEntry = createLayerLegendEntry(key, title, legend);
+        entries.value.push(legendEntry);
       }
       if (layer.styleChanged) {
         styleChangedListener[layer.name] = layer.styleChanged.addEventListener(() => syncLayerLegendEntries(layer));