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

package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue

@@ -65,9 +65,33 @@
 </template>
 <script>
   import { inject } from 'vue';
+  import {
+    VCard,
+    VCardText,
+    VChip,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemAction,
+    VAvatar,
+    VIcon,
+    VDivider,
+  } from 'vuetify/lib';
 
   export default {
     name: 'ThemeChanger',
+    components: [
+      VCard,
+      VCardText,
+      VChip,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemAction,
+      VAvatar,
+      VIcon,
+      VDivider,
+    ],
     setup() {
       const app = inject('vcsApp');
       const plugin = app.plugins.getByKey('@vcmap/theme-changer');

package/plugins/buttonExamples/ButtonExamples.vue

@@ -172,10 +172,37 @@
 <script>
   import { VcsButton, VcsActionButtonList } from '@vcmap/ui';
   import { ref } from 'vue';
+  import {
+    VCard,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemAction,
+    VSwitch,
+    VDivider,
+    VRow,
+    VCol,
+    VCardTitle,
+    VCardActions,
+  } from 'vuetify/lib';
 
   export default {
     name: 'ButtonExamples',
-    components: { VcsButton, VcsActionButtonList },
+    components: {
+      VcsButton,
+      VcsActionButtonList,
+      VCard,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemAction,
+      VSwitch,
+      VDivider,
+      VRow,
+      VCol,
+      VCardTitle,
+      VCardActions,
+    },
     setup() {
       const active = ref(false);
       const disabled = ref(false);

package/plugins/categoryTest/Categories.vue

@@ -60,6 +60,15 @@
   import { inject, ref, onUnmounted } from 'vue';
   import { VcsButton } from '@vcmap/ui';
   import { GeoJSONLayer } from '@vcmap/core';
+  import {
+    VDialog,
+    VCard,
+    VForm,
+    VSelect,
+    VTextField,
+    VBtn,
+    VTextarea,
+  } from 'vuetify/lib';
   import Category from './Category.vue';
 
   export default {
@@ -67,6 +76,13 @@
     components: {
       Category,
       VcsButton,
+      VDialog,
+      VCard,
+      VForm,
+      VSelect,
+      VTextField,
+      VBtn,
+      VTextarea,
     },
     setup() {
       const app = inject('vcsApp');

package/plugins/categoryTest/Category.vue

@@ -7,7 +7,7 @@
       <span class="float-right">
         <vcs-button icon="$vcsPlus" @click="dialog = true" />
         <vcs-button icon="mdi-download" @click="download" />
-        <a :href="downloadLink" target="_blank" ref="link" download="category.json"/>
+        <a :href="downloadLink" target="_blank" ref="link" download="category.json" />
       </span>
     </span>
 
@@ -26,7 +26,9 @@
           class="mb-1"
         >
           <v-list-item-content>
-            <v-list-item-title class="subtitle-1" >{{ item.name }}</v-list-item-title>
+            <v-list-item-title class="subtitle-1">
+              {{ item.name }}
+            </v-list-item-title>
             <v-list-item-subtitle>{{ item.type }}</v-list-item-subtitle>
           </v-list-item-content>
         </v-list-item>
@@ -40,7 +42,9 @@
           @submit.prevent="addItem"
         >
           <v-textarea v-model="jsonString" />
-          <v-btn type="submit">Add</v-btn>
+          <v-btn type="submit">
+            Add
+          </v-btn>
         </v-form>
       </v-card>
     </v-dialog>
@@ -51,10 +55,32 @@
   import { inject, nextTick, ref } from 'vue';
   import { VcsButton } from '@vcmap/ui';
   import { getObjectFromClassRegistry } from '@vcmap/core';
+  import {
+    VVirtualScroll,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemSubtitle,
+    VDialog,
+    VCard,
+    VForm,
+    VTextarea,
+  } from 'vuetify/lib';
 
   export default {
     name: 'CategoryComponent',
-    components: { VcsButton },
+    components: {
+      VcsButton,
+      VVirtualScroll,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+      VDialog,
+      VCard,
+      VForm,
+      VTextarea,
+    },
     props: {
       categoryName: {
         type: String,

package/plugins/example/mySuperComponent.vue

@@ -107,11 +107,22 @@
 </template>
 <script>
 
-  import Vue from 'vue';
+  import {
+    VSheet,
+    VContainer,
+    VRow,
+    VCol,
+    VTextField,
+  } from 'vuetify/lib';
 
   export default {
     name: 'MySuperComponent',
     components: {
+      VSheet,
+      VContainer,
+      VRow,
+      VCol,
+      VTextField,
     },
     data() {
       return {

package/plugins/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "@vcmap/hello-world": "^1.0.0"
+    "@vcmap/hello-world": "^1.0.0",
+    "@vcmap/print": "^1.0.1"
   }
 }

package/plugins/simple-graph/SimpleGraphComponent.vue

@@ -14,19 +14,13 @@
 </template>
 <script>
 
-/**
- * @description A simple table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-sparkline/#props|vuetify v-sparkline }
- * @vue-prop {Object} attributes - the feature's attributes
- * @vue-prop {string[]} [labels] - optional array of strings labeling all data points
- * @vue-prop {string} [graph='trend'] - Choose between a trendline or bars
- * @vue-prop {string} [color='primary'] - optional color of the sparkline of the graph
- * @vue-prop {string[]} [gradient] - optional array of colors to use as a linear-gradient
- * @vue-prop {boolean} [fill=false] - if true, filled area below sparkline
- * @vue-prop {boolean|number|string} [smooth=true] - optional number of px to use as a corner radius. true defaults to 8, false is 0
- * @vue-computed {number[]} values - numeric values for the graph derived from the attributeKeys
- */
+  import { VSparkline } from 'vuetify/lib';
+
   export default {
     name: 'SimpleGraphComponent',
+    components: [
+      VSparkline,
+    ],
     props: {
       attributes: {
         type: Object,

package/plugins/test/allIconsComponent.vue

@@ -16,9 +16,25 @@
 
 <script>
   import { Icons } from '@vcmap/ui';
+  import {
+    VSheet,
+    VList,
+    VListItem,
+    VListItemIcon,
+    VIcon,
+    VListItemTitle,
+  } from 'vuetify/lib';
 
   export default {
     name: 'AllIconsComponent',
+    components: [
+      VSheet,
+      VList,
+      VListItem,
+      VListItemIcon,
+      VIcon,
+      VListItemTitle,
+    ],
     computed: {
       icons() {
         return Object.keys(Icons).map(n => `$${n}`);

package/plugins/test/editor.vue

@@ -21,6 +21,7 @@
   import { ref, inject } from 'vue';
   import { VcsButton } from '@vcmap/ui';
   import { Context } from '@vcmap/core';
+  import { VProgressCircular, VTextarea } from 'vuetify/lib';
 
   const contextId = 'foo';
 
@@ -28,6 +29,8 @@
     name: 'Editor',
     components: {
       VcsButton,
+      VTextarea,
+      VProgressCircular,
     },
     setup() {
       /** @type {VcsUiApp} */

package/plugins/test/emptyComponent.vue

@@ -7,7 +7,10 @@
 
 <script>
 
+  import { VSheet } from 'vuetify/lib';
+
   export default {
     name: 'EmptyComponent',
+    components: [VSheet],
   };
 </script>

package/plugins/test/vcsContent.vue

@@ -14,8 +14,11 @@
 
 </style>
 <script>
+  import { VSheet } from 'vuetify/lib';
+
   export default {
     name: 'VcsContent',
+    components: [VSheet],
     setup() {
       return { };
     },

package/src/actions/actionHelper.js

@@ -1,8 +1,11 @@
 import { v4 as uuid } from 'uuid';
 import { check } from '@vcsuite/check';
-import { Collection, MapCollection, Viewpoint } from '@vcmap/core';
+import { Collection, Extent, MapCollection, mercatorProjection, Viewpoint } from '@vcmap/core';
+import { Feature } from 'ol';
+import { reactive, ref } from 'vue';
 import { vcsAppSymbol } from '../pluginHelper.js';
-import { getWindowPositionOptions } from '../manager/window/windowManager.js';
+import { getWindowPositionOptions, WindowSlot } from '../manager/window/windowManager.js';
+import SearchComponent from '../search/searchComponent.vue';
 
 /**
  * @typedef {Object} ActionOptions
@@ -88,6 +91,60 @@ export function createToggleAction(actionOptions, windowComponent, windowManager
   return { action, destroy };
 }
 
+/**
+ * Creates a toggle button for the search tool, which is only available, if at least one search implementation is registered.
+ * @param {VcsUiApp} app
+ * @returns {{ searchAction: import("vue").Ref<import("vue").UnwrapRef<VcsAction>|null>, destroy: function():void }}
+ */
+export function createSearchButtonAction(app) {
+  let destroyAction = () => {};
+  const searchAction = ref(null);
+  const determineAction = () => {
+    if (app.windowManager.has('searchId')) {
+      app.windowManager.remove('searchId');
+    }
+    if (app.search.size > 0 && searchAction.value === null) {
+      const action = createToggleAction(
+        {
+          name: 'search.title',
+          icon: '$vcsSearch',
+          title: 'search.tooltip',
+        },
+        {
+          id: 'searchId',
+          component: SearchComponent,
+          state: { hideHeader: true },
+          slot: WindowSlot.DETACHED,
+          position: {
+            right: 0,
+            top: 0,
+            width: 440,
+          },
+        },
+        app.windowManager,
+        vcsAppSymbol,
+      );
+      destroyAction = action.destroy;
+      searchAction.value = reactive(action.action);
+    } else if (searchAction.value !== null) {
+      destroyAction();
+      destroyAction = () => {};
+      searchAction.value = null;
+    }
+  };
+  determineAction();
+  const listeners = [
+    app.search.added.addEventListener(determineAction),
+    app.search.removed.addEventListener(determineAction),
+  ];
+  const destroy = () => {
+    destroyAction();
+    listeners.forEach((cb) => { cb(); });
+  };
+
+  return { searchAction, destroy };
+}
+
 /**
  * Creates an action which will toggle the overview map (opening & closing the window and activating/ deactivating the overview map).
  * @param {OverviewMap} overviewMap
@@ -260,3 +317,47 @@ export function createGoToViewpointAction(actionOptions, viewpoint, viewpointCol
     },
   };
 }
+
+/**
+ * calculates and returns a viewpoint using feature's extent
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @returns {Viewpoint|null}
+ */
+export function getViewpointFromFeature(feature) {
+  const extent = new Extent({
+    coordinates: feature.getGeometry()?.getExtent?.(),
+    projection: mercatorProjection,
+  });
+
+  if (!extent || !extent.isValid()) {
+    return null;
+  }
+  return Viewpoint.createViewpointFromExtent(extent);
+}
+
+/**
+ * Creates an action, which when clicked, zooms to the provided feature
+ * @param {ActionOptions} actionOptions
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @param {import("@vcmap/core").MapCollection} mapCollection
+ * @returns {VcsAction|null} returns null if the feature does not have a geometry with a valid extent
+ */
+export function createZoomToFeatureAction(actionOptions, feature, mapCollection) {
+  check(actionOptions, {
+    name: String,
+    icon: [undefined, String],
+    title: [undefined, String],
+  });
+  check(feature, Feature);
+  check(mapCollection, MapCollection);
+
+  const viewpoint = getViewpointFromFeature(feature);
+
+  return {
+    title: 'search.zoomToFeatureAction',
+    ...actionOptions,
+    async callback() {
+      await mapCollection.activeMap.gotoViewpoint(viewpoint);
+    },
+  };
+}

package/src/actions/styleSelector.vue

@@ -20,12 +20,21 @@
 
 <script>
   import { computed, inject, onUnmounted, ref } from 'vue';
+  import {
+    VChip, VList, VListItem, VListItemContent, VListItemIcon, VSheet,
+  } from 'vuetify/lib';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 
   export default {
     name: 'StyleSelector',
     components: {
       VcsSelect,
+      VSheet,
+      VList,
+      VListItem,
+      VListItemIcon,
+      VChip,
+      VListItemContent,
     },
     props: {
       availableStyles: {

package/src/application/VcsApp.vue

@@ -1,18 +1,28 @@
 <template>
   <v-container class="fill-height pa-0" absolute fluid>
-    <Navbar />
+    <VcsNavbar />
     <v-container class="vcs-main pa-0" :class="{ 'vcs-main-xs': $vuetify.breakpoint.xs }" fluid absolute>
       <template v-if="$vuetify.breakpoint.xs">
         <img v-if="mobileLogo" :src="mobileLogo" alt="Logo" draggable="false" class="mobile-logo">
         <div v-else class="company-logo-mobile mobile-logo" />
       </template>
+      <VcsButton
+        v-if="!$vuetify.breakpoint.smAndUp && $vuetify.breakpoint.mobile"
+        :key="attributionAction.name"
+        :tooltip="attributionAction.title"
+        :icon="attributionAction.icon"
+        :active="attributionAction.active"
+        @click.stop="attributionAction.callback($event)"
+        small
+        class="z-index-1 mobile-attribution-btn"
+      />
       <VcsMap :map-id="mapId" />
       <MapNavigation />
       <ToolboxManagerComponent />
       <WindowManagerComponent />
     </v-container>
-    <v-footer absolute v-if="!$vuetify.breakpoint.xs">
-      {{ $t('footer.title') }}
+    <v-footer absolute v-if="$vuetify.breakpoint.smAndUp" min-height="22px">
+      <VcsAttributionsFooter :entries="attributionEntries" :attribution-action="attributionAction" />
     </v-footer>
   </v-container>
 </template>
@@ -26,7 +36,7 @@
   top: 48px;
   left: 0;
   right: 0;
-  bottom: 33px;
+  bottom: 22px;
 }
 
 .vcs-main-xs {
@@ -43,6 +53,12 @@
   z-index: 1;
 }
 
+.mobile-attribution-btn{
+  position: fixed;
+  right: 2px;
+  bottom: 56px;
+}
+
 </style>
 
 <script>
@@ -56,12 +72,13 @@
     watch,
   } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
+  import { VContainer, VFooter } from 'vuetify/lib';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
   import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
   import { ButtonLocation } from '../manager/navbarManager.js';
   import { vcsAppSymbol } from '../pluginHelper.js';
   import VcsMap from './VcsMap.vue';
-  import Navbar from './Navbar.vue';
+  import VcsNavbar from './VcsNavbar.vue';
   import { createMapButtonAction, createToggleAction } from '../actions/actionHelper.js';
   import MapNavigation from '../navigation/mapNavigation.vue';
   import VcsSettings from './VcsSettings.vue';
@@ -70,6 +87,10 @@
   import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
   import VcsLegend from '../legend/vcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
+  import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+  import VcsAttributions from './VcsAttributions.vue';
+  import { getAttributions } from './attributionsHelper.js';
 
   /**
    * You should call this function in the component providing the vcsUiApp to your
@@ -178,10 +199,10 @@
 
     /**
      * adds or removes the legend button, depending on the number of entries
-     * @param {import("vue").Reactive<{string,LegendEntry}>} newEntries
+     * @param {Array<LegendEntry>} newEntries
      */
     const handleLegendButton = (newEntries) => {
-      if (Object.keys(newEntries).length > 0) {
+      if (newEntries.length > 0) {
         if (!app.navbarManager.has('legend')) {
           app.navbarManager.add(
             {
@@ -197,7 +218,7 @@
         app.windowManager.remove('legend');
       }
     };
-    handleLegendButton(entries);
+    handleLegendButton(entries.value);
 
     const stopWatching = watch(
       entries,
@@ -329,6 +350,45 @@
     };
   }
 
+  /**
+   * This helper gets attributions of all active maps, layers and oblique collections and returns an array of entries.
+   * It also returns a attributionAction to toggle the attributions window and a destroy function.
+   * @param {VcsUiApp} app
+   * @returns {{attributionEntries: import("vue").Ref<Array<AttributionEntry>>, attributionAction: VcsAction, destroyAttributions: function():void}}
+   */
+  export function setupAttributions(app) {
+    const { entries, destroy } = getAttributions(app);
+
+    const { action: attributionAction, destroy: attributionDestroy } = createToggleAction(
+      {
+        name: 'attributionToggle',
+        icon: 'mdi-chevron-double-right',
+        title: 'footer.attributions.tooltip',
+      },
+      {
+        id: 'attribution',
+        component: VcsAttributions,
+        state: {
+          headerTitle: 'footer.attributions.title',
+          headerIcon: 'mdi-copyright',
+        },
+        slot: WindowSlot.DYNAMIC_RIGHT,
+        props: { entries },
+      },
+      app.windowManager,
+      vcsAppSymbol,
+    );
+
+    return {
+      attributionEntries: entries,
+      attributionAction,
+      destroyAttributions: () => {
+        destroy();
+        attributionDestroy();
+      },
+    };
+  }
+
   /**
    * The base component to setup the entire application. To embed the VcsApp, use this component.
    * @vue-prop {string} appId - the id of the app to inject. this will setup listeners on the app to call vcsAppMounted on plugins
@@ -336,11 +396,15 @@
    */
   export default {
     components: {
+      VcsButton,
+      VcsAttributionsFooter,
       MapNavigation,
-      Navbar,
+      VcsNavbar,
       VcsMap,
       WindowManagerComponent,
       ToolboxManagerComponent,
+      VContainer,
+      VFooter,
     },
     props: {
       appId: {
@@ -360,6 +424,7 @@
       const settingsDestroy = setupSettingsWindow(app);
       const destroyComponentsWindow = setupComponentsWindow(app);
       const destroyThemingListener = setupUiConfigTheming(app, getCurrentInstance().proxy.$vuetify);
+      const { attributionEntries, attributionAction, destroyAttributions } = setupAttributions(app);
 
       let pluginMountedListener;
       onMounted(() => {
@@ -376,11 +441,14 @@
         settingsDestroy();
         destroyComponentsWindow();
         destroyThemingListener();
+        destroyAttributions();
       });
 
       return {
         mapId,
         mobileLogo: computed(() => app.uiConfig.config.value.mobileLogo ?? app.uiConfig.config.value.logo),
+        attributionEntries,
+        attributionAction,
       };
     },
   };

package/src/application/VcsAttributions.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-list>
+    <v-list-item v-for="({key, title, attributions}) in entries" :key="key">
+      <v-list-item-content>
+        <v-list-item-title>{{ $t(title) }}</v-list-item-title>
+        <v-list-item-subtitle
+          v-for="attribution in attributions"
+          :key="attribution.provider"
+          :title="`${$t(attribution.provider)} ${attribution.year}`"
+        >
+          <a
+            :href="attribution.url"
+            target="_blank"
+            class="text--secondary"
+          >
+            {{ $t(attribution.provider) }} {{ attribution.year }}
+          </a>
+        </v-list-item-subtitle>
+      </v-list-item-content>
+    </v-list-item>
+  </v-list>
+</template>
+
+<style lang="scss" scoped>
+
+  ::v-deep {
+    a:before {
+      content: '\00a9\00a0'
+    }
+  }
+
+</style>
+
+<script >
+  import {
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemSubtitle,
+  } from 'vuetify/lib';
+
+  /**
+   * Lists attributions of maps, layers and oblique collections
+   * @vue-prop {import("vue").Ref<Array<AttributionEntry>} entries - array with one entry per active VcsObject
+   */
+  export default {
+    name: 'VcsAttributions',
+    components: {
+      VList,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+    },
+    props: {
+      entries: {
+        type: Object,
+        default: () => {},
+      },
+    },
+  };
+</script>