@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.23

package/src/components/tables/VcsTable.vue

@@ -1,117 +1,37 @@
 <template>
-  <v-card>
-    <VcsTreeviewSearchbar
-      v-if="showSearchbar"
-      :placeholder="$t(searchbarPlaceholder)"
-      v-model="search"
-    />
-    <v-data-table
-      dense
-      item-key="key"
-      :headers="translatedHeaders"
-      :items="items"
-      :items-per-page.sync="itemsPerPageRef"
-      :page.sync="page"
-      :search="search"
-      :custom-filter="handleFilter"
-      hide-default-footer
-      class="vcs-table rounded-0"
-    >
-      <!-- eslint-disable-next-line -->
-      <template #item.key="{ item }">
-        <td
-          :title="$t(item.key)"
-          class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-          :style="{'max-width': headers[0].width }"
-        >
-          {{ $t(item.key) }}
-        </td>
-      </template>
-      <!-- eslint-disable-next-line -->
-      <template #item.value="{ item }">
-        <td
-          :title="$t(item.value)"
-          class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-          :style="{'max-width': headers[1].width }"
-        >
-          <span :class="{ 'single-line': !/\s/.test(item.value), 'multi-line': /\s/.test(item.value), }">
-            {{ $t(item.value) }}
-          </span>
-        </td>
-      </template>
-      <template #footer v-if="items.length > itemsPerPageRef">
-        <v-divider />
-        <v-container class="pa-2 vcs-pagination-bar">
-          <v-row
-            dense
-            no-gutters
-            justify="center"
-          >
-            <v-menu offset-y dense>
-              <template #activator="{ on, attrs }">
-                <VcsButton
-                  small
-                  color="primary"
-                  v-bind="attrs"
-                  v-on="on"
-                >
-                  {{ itemsPerPageRef }}
-                  <v-icon>mdi-chevron-down</v-icon>
-                </VcsButton>
-              </template>
-              <v-list>
-                <v-list-item
-                  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="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="ml-1"
-            />
-            <VcsButton
-              small
-              icon="mdi-chevron-right"
-              @click="nextPage"
-              tooltip="components.vcsTable.nextPage"
-              :disabled="page > numberOfPages - 1"
-              class="ml-1"
-            />
-          </v-row>
-        </v-container>
-      </template>
-    </v-data-table>
-  </v-card>
+  <VcsDataTable
+    :items="items"
+    :headers="headers"
+    item-key="key"
+    v-bind="$attrs"
+  >
+    <!-- eslint-disable-next-line -->
+    <template #item.key="{ item }">
+      <td
+        :title="$t(item.key)"
+        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
+        :style="{'max-width': headers[0].width }"
+      >
+        {{ $t(item.key) }}
+      </td>
+    </template>
+    <!-- eslint-disable-next-line -->
+    <template #item.value="{ item }">
+      <td
+        :title="$t(item.value)"
+        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
+        :style="{'max-width': headers[1].width }"
+      >
+        <span :class="{ 'single-line': !/\s/.test(item.value), 'multi-line': /\s/.test(item.value), }">
+          {{ $t(item.value) }}
+        </span>
+      </td>
+    </template>
+  </VcsDataTable>
 </template>
 <script>
-  import { getCurrentInstance, ref, computed } from 'vue';
-  import {
-    VCard,
-    VDivider,
-    VContainer,
-    VDataTable,
-    VList,
-    VListItem,
-    VListItemTitle,
-    VMenu,
-    VIcon,
-    VRow,
-  } from 'vuetify/lib';
-  import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
-  import VcsButton from '../buttons/VcsButton.vue';
+  import { computed } from 'vue';
+  import VcsDataTable from './VcsDataTable.vue';
 
   /**
    * @typedef {Object} TableItem
@@ -140,34 +60,16 @@
   }
 
   /**
-   * @description A table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-data-table/#props v-data-table }
+   * @description A table view for feature attributes using VcsDataTable
    * @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<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,
-      VCard,
-      VDataTable,
-      VContainer,
-      VDivider,
-      VRow,
-      VMenu,
-      VIcon,
-      VList,
-      VListItem,
-      VListItemTitle,
+      VcsDataTable,
     },
     props: {
       featureId: {
@@ -185,29 +87,8 @@
           { text: 'components.vcsTable.value', value: 'value', width: '160px' },
         ],
       },
-      itemsPerPage: {
-        type: Number,
-        default: 10,
-      },
-      itemsPerPageArray: {
-        type: Array,
-        default: () => [5, 10, 15],
-      },
-      showSearchbar: {
-        type: Boolean,
-        default: true,
-      },
-      searchbarPlaceholder: {
-        type: String,
-        default: 'components.vcsTable.searchbarPlaceholder',
-      },
     },
     setup(props) {
-      const vm = getCurrentInstance().proxy;
-      /**
-       * @type {Ref<UnwrapRef<string>>}
-       */
-      const search = ref('');
       /**
        * @type {ComputedRef<Array<TableItem>>}
        */
@@ -218,89 +99,14 @@
         });
       });
 
-      /**
-       * @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);
-          return hd;
-        });
-      });
-
-      /**
-       * @type {Ref<UnwrapRef<number>>}
-       */
-      const itemsPerPageRef = ref(props.itemsPerPage);
-      const numberOfPages = computed(() => {
-        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 < numberOfItems.value ? last : numberOfItems.value;
-      });
-
       return {
-        search,
-        page,
         items,
-        filteredItems,
-        itemsPerPageRef,
-        itemsFrom,
-        itemsTo,
-        numberOfPages,
-        numberOfItems,
-        nextPage() {
-          if (page.value + 1 <= numberOfPages.value) {
-            page.value += 1;
-          }
-        },
-        formerPage() {
-          if (page.value - 1 >= 1) {
-            page.value -= 1;
-          }
-        },
-        updateItemsPerPage(number) {
-          itemsPerPageRef.value = number;
-        },
-        handleFilter,
-        translatedHeaders,
       };
     },
   };
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/shades.scss';
 
 .single-line {
   display: block;
@@ -322,61 +128,10 @@
 }
 
 ::v-deep {
-  .vcs-table {
-    tbody tr {
-      &:hover {
-        background-color: transparent !important;
-      }
-      &:nth-child(odd) {
-        background-color: var(--v-base-lighten4) !important;
-      }
-    }
-    td {
-      font-size: 14px !important;
-      &.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;
-      }
-    }
-    &.theme--light {
-      thead tr th {
-        color: map-get($shades, 'black') !important;
-      }
-    }
-    &.theme--dark {
-      thead tr th {
-        color: map-get($shades, 'white') !important;
-      }
-    }
-  }
   .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;
-    padding: 0 4px;
-    border-radius: 4px;
-    &:hover {
-      border: 1px solid var(--v-primary-base);
-    }
-  }
 }
 </style>

package/src/contentTree/contentTreeCollection.js

@@ -306,7 +306,7 @@ export function createContentTreeCollection(app) {
 
   const overrideCollection = makeOverrideCollection(
     collection,
-    () => app.dynamicContextId,
+    () => app.dynamicModuleId,
     null,
     config => getObjectFromClassRegistry(app.contentTreeClassRegistry, config, app),
     ContentTreeItem,

package/src/contentTree/layerContentTreeItem.js

@@ -122,6 +122,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
         },
         {
           component,
+          position: {
+            width: 200,
+          },
           props: reactive({
             availableStyles: availableStyles.slice(),
             layerName: this._layerName,

package/src/downloadHelper.js

@@ -0,0 +1,49 @@
+import { hasSameOrigin } from '@vcmap/core';
+
+/**
+ * Download a blob
+ * @param {string} uri
+ * @param {string} fileName
+ * @api
+ * @export
+ */
+export function downloadURI(uri, fileName) {
+  const link = document.createElement('a');
+  link.download = fileName;
+  link.href = uri;
+  if (!hasSameOrigin(uri)) {
+    link.target = '_blank';
+  }
+  link.click();
+  link.remove();
+}
+
+/**
+ * Download a blob
+ * @param {Blob} blob
+ * @param {string} fileName
+ */
+export function downloadBlob(blob, fileName) {
+  downloadURI(URL.createObjectURL(blob), fileName);
+}
+
+/**
+ * Download a text as UTF-8
+ * @param {string} text
+ * @param {string} fileName
+ */
+export function downloadText(text, fileName) {
+  downloadURI(`data:text/plain;charset=utf-8,${encodeURIComponent(text)}`, fileName);
+}
+
+/**
+ * Download a canvas as an image
+ * @param {HTMLCanvasElement} canvas
+ * @param {string} fileName
+ * @param {string=} mimeType
+ */
+export function downloadCanvas(canvas, fileName, mimeType) {
+  canvas.toBlob((blob) => {
+    downloadBlob(blob, fileName);
+  }, mimeType);
+}

package/src/featureInfo/BalloonComponent.vue

@@ -1,21 +1,21 @@
 <template>
   <v-card
-    class="mx-auto elevation-0 rounded-0"
+    class="mx-auto elevation-0"
     max-width="400"
     v-if="position"
   >
     <slot name="balloon-header" :attrs="{...$props, ...$attrs}">
-      <v-list-item class="px-2 pr-1 align-start">
+      <v-list-item class="px-2 align-center">
         <v-list-item-avatar
           tile
-          size="20"
-          class="mr-2 align-self-start"
+          size="16"
+          class="mr-2"
         >
           <v-icon color="primary">
             $vcsInfo
           </v-icon>
         </v-list-item-avatar>
-        <v-list-item-content class="py-2 pr-1 align-self-start">
+        <v-list-item-content class="pr-1">
           <v-list-item-title>
             <h3 class="font-weight-bold">
               {{ $t(balloonTitle) }}
@@ -30,7 +30,7 @@
           small
           icon="mdi-close-thick"
           tooltip="components.close"
-          class="mt-1 mr-1"
+          class="d-flex"
         />
       </v-list-item>
     </slot>
@@ -164,12 +164,13 @@
   .balloon:after {
     content: "";
     position: absolute;
-    bottom: -20px;
+    bottom: -12px;
     left: 40px;
-    border-width: 20px 20px 0;
+    border-width: 12px 10px 0;
     border-style: solid;
     display: block;
     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;

package/src/featureInfo/abstractFeatureInfoView.js

@@ -217,7 +217,7 @@ class AbstractFeatureInfoView extends VcsObject {
   }
 
   /**
-   * window options, configured in a context, used only internally by AbstractFeatureInfoView or subclass
+   * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
    * @type {WindowComponentOptions|Object}
    * @readonly
    */

package/src/featureInfo/featureInfo.js

@@ -211,7 +211,7 @@ class FeatureInfo {
      */
     this._collection = makeOverrideCollection(
       new Collection(),
-      () => this._app.dynamicContextId,
+      () => this._app.dynamicModuleId,
       null,
       config => getObjectFromClassRegistry(this._featureInfoClassRegistry, config),
       AbstractFeatureInfoView,
@@ -277,12 +277,12 @@ class FeatureInfo {
           this.clear();
         }
       }),
-      this._app.contextAdded.addEventListener(() => {
+      this._app.moduleAdded.addEventListener(() => {
         this.clear();
         this._destroyFeatureInfoTool();
         this._destroyFeatureInfoTool = setupFeatureInfoTool(this._app);
       }),
-      this._app.contextRemoved.addEventListener(() => this.clear()),
+      this._app.moduleRemoved.addEventListener(() => this.clear()),
     ];
     /**
      * A vector layer to render provided features on

package/src/i18n/de.js

@@ -55,11 +55,15 @@ const messages = {
     vcsTable: {
       key: 'Name',
       value: 'Wert',
+    },
+    vcsDataTable: {
       searchbarPlaceholder: 'Name, Wert, ...',
       itemsPerPage: 'pro Seite',
       ofItems: 'von',
       nextPage: 'Nächste Seite',
       formerPage: 'Vorherige Seite',
+      noDataPlaceholder: 'Keine Daten verfügbar',
+      noResultsPlaceholder: 'Keine übereinstimmenden Einträge gefunden',
     },
   },
   settings: {
@@ -89,6 +93,7 @@ const messages = {
     select: 'Suchergebnis selektieren',
     placeholder: 'Suche nach Straße, Adresse, Ort, POI',
     zoomToFeatureAction: 'Auf Ergebnis zoomen',
+    zoomToAll: 'Zu allen Ergebnissen zoomen',
   },
   toolbox: {
     flight: 'Flug',
@@ -107,6 +112,9 @@ const messages = {
     information: 'Information',
     success: 'Erfolg',
   },
+  datePicker: {
+    today: 'Heute',
+  },
 };
 
 export default messages;

package/src/i18n/en.js

@@ -55,11 +55,15 @@ const messages = {
     vcsTable: {
       key: 'Name',
       value: 'Value',
+    },
+    vcsDataTable: {
       searchbarPlaceholder: 'Name, Value, ...',
       itemsPerPage: 'per page',
       ofItems: 'of',
       nextPage: 'Next page',
       formerPage: 'Former page',
+      noDataPlaceholder: 'No data available',
+      noResultsPlaceholder: 'No matching records found',
     },
   },
   settings: {
@@ -89,6 +93,7 @@ const messages = {
     select: 'Select result item',
     placeholder: 'Search for Street, Address, Landmark, POI',
     zoomToFeatureAction: 'Zoom to result',
+    zoomToAll: 'Zoom to all',
   },
   toolbox: {
     flight: 'flight',
@@ -107,6 +112,9 @@ const messages = {
     information: 'Information',
     success: 'Success',
   },
+  datePicker: {
+    today: 'Today',
+  },
 };
 
 export default messages;