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

package/src/application/VcsAttributionsFooter.vue

@@ -0,0 +1,87 @@
+<template>
+  <span class="attribution-wrap">
+    <span v-for="attribution in mergedAttributions" class="attribution-span" :key="attribution.provider">
+      <a
+        :href="attribution.url"
+        target="_blank"
+        class="text--secondary"
+      >{{ $t(attribution.provider) }} <span>{{ attribution.years }}</span></a>
+    </span>
+    <VcsButton
+      class="d-flex text--secondary"
+      small
+      :key="attributionAction.name"
+      :tooltip="attributionAction.title"
+      :icon="attributionAction.icon"
+      :active="attributionAction.active"
+      @click.stop="attributionAction.callback($event)"
+    />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .attribution-wrap{
+    white-space: nowrap;
+    margin-right: 40px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .vcs-button-wrap{
+      position: absolute;
+      right: 4px;
+      bottom: 3px;
+    }
+  }
+  a:before {
+    content: '\00a9\00a0';
+  }
+  .attribution-span {
+    font-size: smaller;
+    &:before {
+      content: '\00a0\007c\00a0';
+    }
+    &:first-child::before{
+      content: '';
+    }
+    span{
+      font-size: inherit;
+    }
+  }
+
+</style>
+
+<script >
+
+  import { computed } from 'vue';
+  import { mergeAttributions } from './attributionsHelper.js';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+
+  /**
+   * Lists attributions of maps, layers and oblique collections within the footer
+   * @vue-prop {import("vue").Ref<Array<AttributionEntry>} entries - array with one entry per active VcsObject
+   * @vue-prop {VcsAction} attributionAction - action to open attribution window
+   * @vue-computed {Array<{provider: string, years: string, url: URL}>} mergedAttributions - array with one entry per provider
+   */
+  export default {
+    name: 'VcsAttributionsFooter',
+    components: {
+      VcsButton,
+    },
+    props: {
+      entries: {
+        type: Array,
+        required: true,
+      },
+      attributionAction: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const mergedAttributions = computed(() => mergeAttributions(props.entries));
+      return {
+        mergedAttributions,
+      };
+    },
+  };
+</script>

package/src/application/{Navbar.vue → VcsNavbar.vue}

@@ -86,6 +86,17 @@
                   :show-icon="true"
                 />
               </v-menu>
+              <VcsButton
+                class="d-flex"
+                v-if="searchAction"
+                large
+                :key="searchAction.name"
+                :tooltip="searchAction.title"
+                :icon="searchAction.icon"
+                :active="searchAction.active"
+                @click.stop="searchAction.callback($event)"
+                v-bind="{...$attrs}"
+              />
               <v-menu
                 offset-y
                 v-if="menuActions.length > 0"
@@ -124,15 +135,30 @@
 </style>
 
 <script>
-  import { inject, ref, computed } from 'vue';
+  import { inject, ref, computed, onUnmounted } from 'vue';
+  import {
+    VCol, VContainer, VDivider, VMenu, VRow, VToolbar, VToolbarItems,
+  } from 'vuetify/lib';
   import { ButtonLocation, getActionsByLocation } from '../manager/navbarManager.js';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
   import VcsActionList from '../components/lists/VcsActionList.vue';
   import VcsButton from '../components/buttons/VcsButton.vue';
+  import { createSearchButtonAction } from '../actions/actionHelper.js';
 
   export default {
     name: 'VcsNavbar',
-    components: { VcsActionButtonList, VcsActionList, VcsButton },
+    components: {
+      VcsActionButtonList,
+      VcsActionList,
+      VcsButton,
+      VToolbar,
+      VContainer,
+      VRow,
+      VCol,
+      VToolbarItems,
+      VDivider,
+      VMenu,
+    },
     setup() {
       const app = inject('vcsApp');
 
@@ -142,12 +168,19 @@
         () => getActionsByLocation(buttonComponents.value, location, [...app.plugins].map(p => p.name)),
       );
 
+      const { searchAction, destroy: destroySearchAction } = createSearchButtonAction(app);
+
+      onUnmounted(() => {
+        destroySearchAction();
+      });
+
       return {
         mapActions: getActions(ButtonLocation.MAP),
         contentActions: getActions(ButtonLocation.CONTENT),
         toolActions: getActions(ButtonLocation.TOOL),
         projectActions: getActions(ButtonLocation.PROJECT),
         shareActions: getActions(ButtonLocation.SHARE),
+        searchAction,
         menuActions: getActions(ButtonLocation.MENU),
         config: app.uiConfig.config,
       };

package/src/application/VcsSettings.vue

@@ -34,6 +34,7 @@
   import {
     ref, inject, onUnmounted, getCurrentInstance, computed,
   } from 'vue';
+  import { VCol, VContainer, VRow } from 'vuetify/lib';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 
@@ -42,6 +43,9 @@
     components: {
       VcsSelect,
       VcsLabel,
+      VContainer,
+      VRow,
+      VCol,
     },
     setup() {
       const app = inject('vcsApp');

package/src/application/attributionsHelper.js

@@ -0,0 +1,150 @@
+import { ref } from 'vue';
+import { ObliqueMap } from '@vcmap/core';
+
+/**
+ * @typedef {Object} Attribution.Options
+ * @property {string} provider - name of the data provider
+ * @property {number} [year] - year of dataset
+ * @property {URL} url - link to data provider
+ */
+
+/**
+ * @typedef {Object} AttributionEntry
+ * @property {string} key - name of the VcsObject the attribution applies to
+ * @property {string} title - title of the VcsObject the attribution applies to
+ * @property {Attribution.Options|Array<Attribution.Options>} attributions - attributions of a map, layer or oblique collection
+ */
+
+/**
+ * merges attribution entries of same providers
+ * @param {Array<AttributionEntry>} entries
+ * @returns {Array<{provider: string, years: string, url: URL}>}
+ */
+export function mergeAttributions(entries) {
+  const providers = {};
+  entries.forEach(({ attributions }) => {
+    attributions.forEach(({ provider, year, url }) => {
+      const providerObject = providers[provider];
+      if (providerObject) {
+        if (year) {
+          const index = providerObject.years.indexOf(year);
+          if (url && index === -1) {
+            if (providerObject.years.every(y => Number(y) < Number(year))) {
+              providerObject.url = url;
+            }
+            if (year) {
+              const set = new Set([...providerObject.years, Number(year)]);
+              providerObject.years = [...set].sort((a, b) => a - b);
+            }
+          }
+        }
+      } else {
+        providers[provider] = {
+          years: year ? [Number(year)] : [],
+          url,
+        };
+      }
+    });
+  });
+  return Object.keys(providers).map(provider => ({
+    provider,
+    years: providers[provider].years.join(', '),
+    url: providers[provider].url,
+  }));
+}
+
+/**
+ * Gets attributions of all active maps, layers and oblique collections and returns an array of entries.
+ * Each entry is defined by a key derived from the object's className and name, and it's associated attributions.
+ * Listens to state changes of maps, layers and oblique collections and synchronizes the entries array correspondingly.
+ * Returns a destroy function to clear listeners.
+ * @param {import("ui").VcsUiApp} app
+ * @returns {{entries: import("vue").Ref<Array<AttributionEntry>>, destroy: function():void}}
+ */
+export function getAttributions(app) {
+  /**
+   * @type {import("vue").Ref<Array<AttributionEntry>>}
+   */
+  const entries = ref([]);
+  /**
+   * @type {function():void}
+   */
+  let obliqueListener = () => {};
+
+  /**
+   * Adds an entry for an object using a combination of the object's className and name as key.
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   */
+  function addAttributions(object) {
+    const { attributions } = object.properties;
+    if (!attributions) { return; }
+    const key = `${object.className}_${object.name}`;
+    const idx = entries.value.findIndex(e => e.key === key);
+    if (idx < 0) {
+      entries.value.push({
+        key,
+        title: object.properties?.title ?? `${object.className}: ${object.name}`,
+        attributions: Array.isArray(attributions) ? attributions : [attributions],
+      });
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   */
+  function removeAttributions(object) {
+    const idx = entries.value.findIndex(e => e.key === `${object.className}_${object.name}`);
+    if (idx >= 0) {
+      entries.value.splice(idx, 1);
+    }
+  }
+
+  /**
+   * adds or removes a AttributionEntry on layer state changes
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   */
+  function syncAttributions(object) {
+    if (object?.properties?.attributions === undefined) { return; }
+    if (object.active || object.loaded) {
+      addAttributions(object);
+    } else {
+      removeAttributions(object);
+    }
+  }
+
+  /**
+   *
+   * @param {import("@vcmap/core").VcsMap} map
+   */
+  function initAttributions(map) {
+    if (!map) { return; }
+    obliqueListener();
+    entries.value.splice(0);
+    syncAttributions(map);
+    [...map.layerCollection].forEach((layer) => {
+      if (layer.isSupported(map)) {
+        syncAttributions(layer);
+      }
+    });
+    if (map instanceof ObliqueMap) {
+      syncAttributions(map.collection);
+      obliqueListener = map.collectionChanged.addEventListener(syncAttributions);
+    }
+  }
+
+  const listeners = [
+    app.maps.mapActivated.addEventListener(initAttributions),
+    app.layers.stateChanged.addEventListener(syncAttributions),
+    app.layers.removed.addEventListener(removeAttributions),
+    app.maps.removed.addEventListener(removeAttributions),
+  ];
+
+  initAttributions(app.maps.activeMap);
+
+  const destroy = () => {
+    listeners.forEach(cb => cb());
+    obliqueListener();
+  };
+
+  return { entries, destroy };
+}

package/src/application/vcsAppWrapper.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+  import { VApp } from 'vuetify/lib';
   import VcsApp from './VcsApp.vue';
 
   /**
@@ -21,7 +22,10 @@
         required: true,
       },
     },
-    components: { VcsApp },
+    components: {
+      VcsApp,
+      VApp,
+    },
   };
 </script>
 

package/src/components/buttons/VcsActionButtonList.vue

@@ -38,6 +38,7 @@
 </style>
 <script>
 
+  import { VIcon, VMenu, VSpacer } from 'vuetify/lib';
   import VcsButton from './VcsButton.vue';
   import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
 
@@ -54,7 +55,13 @@
    */
   export default {
     name: 'VcsActionButtonList',
-    components: { VcsActionList, VcsButton },
+    components: {
+      VcsActionList,
+      VcsButton,
+      VMenu,
+      VIcon,
+      VSpacer,
+    },
     props: {
       actions: {
         type: Array,

package/src/components/buttons/VcsButton.vue

@@ -94,6 +94,7 @@
 </style>
 
 <script>
+  import { VBtn, VIcon } from 'vuetify/lib';
   import VcsBadge from '../notification/VcsBadge.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
@@ -118,7 +119,12 @@
    */
   export default {
     name: 'VcsButton',
-    components: { VcsTooltip, VcsBadge },
+    components: {
+      VcsTooltip,
+      VcsBadge,
+      VBtn,
+      VIcon,
+    },
     inheritAttrs: false,
     props: {
       active: {

package/src/components/form-inputs-controls/VcsCheckbox.vue

@@ -47,6 +47,7 @@
 }
 </style>
 <script>
+  import { VCheckbox } from 'vuetify/lib';
   import VcsLabel from './VcsLabel.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import validate from '../notification/validation.js';
@@ -58,11 +59,15 @@
    * - if dense is set false, height is 32 px
    * Provides VcsTooltip to show error messages
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
-   * @vue-prop {string} label Label to be displayed, will be translated.
+   * @vue-prop {string} label - Label to be displayed, will be translated.
    */
   export default {
     name: 'VcsCheckbox',
-    components: { VcsTooltip, VcsLabel },
+    components: {
+      VcsTooltip,
+      VcsLabel,
+      VCheckbox,
+    },
     props: {
       tooltipPosition: {
         type: String,

package/src/components/form-inputs-controls/VcsColorPicker.vue

@@ -31,6 +31,7 @@
   } from 'vue';
   import { Subject } from 'rxjs';
   import { debounceTime, takeUntil } from 'rxjs/operators';
+  import { VColorPicker } from 'vuetify/lib';
 
   /**
    * @description
@@ -38,6 +39,9 @@
    */
   export default {
     name: 'VcsColorPicker',
+    components: {
+      VColorPicker,
+    },
     props: {
       width: {
         type: Number,

package/src/components/form-inputs-controls/VcsFormSection.vue

@@ -5,12 +5,23 @@
         <div class="form-section-header d-flex justify-space-between align-center">
           <strong class="caption">{{ $t(title) }}</strong>
           <VcsActionButtonList
-            :actions="titleActions"
+            :actions="actions"
             small
           />
         </div>
       </article>
     </slot>
+    <v-alert
+      :value="showHelp"
+      dense
+      text
+      color="secondary"
+      class="ma-0"
+    >
+      <slot name="help">
+        <span>{{ $t(helpText) }}</span>
+      </slot>
+    </v-alert>
     <article class="section-content">
       <slot />
     </article>
@@ -19,6 +30,8 @@
 
 
 <script>
+  import { computed, ref } from 'vue';
+  import { VAlert } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
 
   /**
@@ -26,12 +39,18 @@
    * Stylized form section with action buttons
    * @vue-data {slot} [#title] - slot to override form section header
    * @vue-data {slot} [#default] - slot with the section content
+   * @vue-data {slot} [#help] - Slot to specify html based help. Gets precedence over helpText prop.
    * @vue-prop {string} title - Title to be displayed, will be translated.
    * @vue-prop {Array<VcsAction>}    titleActions - Icons to be displayed on the right side
+   * @vue-prop {string} [helpText] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over helpText prop.
+   * @vue-computed {Array<VcsAction>} actions - Returns title actions extended by a help action, if help prop is passed or help slot is used.
    */
   export default {
     name: 'VcsFormSection',
-    components: { VcsActionButtonList },
+    components: {
+      VcsActionButtonList,
+      VAlert,
+    },
     props: {
       title: {
         type: String,
@@ -41,6 +60,33 @@
         type: Array,
         default: () => ([]),
       },
+      helpText: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup(props, { slots }) {
+      const showHelp = ref(false);
+      const helpAction = {
+        name: 'help',
+        title: 'components.vcsFormSection.help',
+        icon: 'mdi-help-circle',
+        callback: () => { showHelp.value = !showHelp.value; },
+      };
+      /**
+       * @type {ComputedRef<VcsAction>}
+       */
+      const actions = computed(() => {
+        if (props.helpText || (slots.help && slots.help().length > 0)) {
+          return [helpAction, ...props.titleActions];
+        }
+        return props.titleActions;
+      });
+
+      return {
+        showHelp,
+        actions,
+      };
     },
   };
 </script>

package/src/components/form-inputs-controls/VcsRadio.vue

@@ -70,6 +70,7 @@
 }
 </style>
 <script>
+  import { VRadio, VRadioGroup } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import VcsLabel from './VcsLabel.vue';
   import validate from '../notification/validation.js';
@@ -94,7 +95,12 @@
    */
   export default {
     name: 'VcsRadio',
-    components: { VcsTooltip, VcsLabel },
+    components: {
+      VcsTooltip,
+      VcsLabel,
+      VRadioGroup,
+      VRadio,
+    },
     props: {
       tooltipPosition: {
         type: String,

package/src/components/form-inputs-controls/VcsSelect.vue

@@ -49,6 +49,7 @@
 </style>
 <script>
 
+  import { VSelect } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import validate from '../notification/validation.js';
 
@@ -64,7 +65,10 @@
    */
   export default {
     name: 'VcsSelect',
-    components: { VcsTooltip },
+    components: {
+      VcsTooltip,
+      VSelect,
+    },
     props: {
       tooltipPosition: {
         type: String,

package/src/components/form-inputs-controls/VcsTextArea.vue

@@ -51,6 +51,7 @@
 </style>
 
 <script>
+  import { VTextarea } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
@@ -73,6 +74,7 @@
     name: 'VcsTextArea',
     components: {
       VcsTooltip,
+      VTextarea,
     },
     props: {
       tooltipPosition: {

package/src/components/form-inputs-controls/VcsTextField.vue

@@ -51,10 +51,11 @@
 </style>
 
 <script>
+  import { VTextField } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
-   * @description extends API of {@link https://vuetifyjs.com/en/api/v-text-field/|vuetify v-text-field}.
+   * @description extends API of {@link https://vuetifyjs.com/en/api/v-text-field v-text-field}.
    * Provides two height options depending on "dense" property:
    * - if dense is set true (default), height is 24 px
    * - if dense is set false, height is 32 px
@@ -72,6 +73,7 @@
     name: 'VcsTextField',
     components: {
       VcsTooltip,
+      VTextField,
     },
     props: {
       tooltipPosition: {
@@ -101,7 +103,7 @@
         return this.joinedErrorBucket.length > 0 && (this.firstInput || !this.neverBlurred);
       },
       isOutlined() {
-        return (this.hover || this.focus || this.isError) && !(this.$attrs.disabled || this.$attrs.disabled === '');
+        return (this.$attrs.outlined || this.hover || this.focus || this.isError) && !(this.$attrs.disabled || this.$attrs.disabled === '');
       },
       joinedErrorBucket() {
         if (!this.isMounted) {
@@ -124,6 +126,8 @@
     },
     mounted() {
       this.isMounted = true;
+      // fix for autofocus
+      this.focus = this.$attrs.autofocus != null;
     },
   };
 </script>

package/src/components/lists/VcsActionList.vue

@@ -40,6 +40,9 @@
 </style>
 <script>
   import { is } from '@vcsuite/check';
+  import {
+    VIcon, VList, VListItem, VListItemContent, VListItemIcon, VListItemTitle,
+  } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
@@ -91,7 +94,15 @@
    */
   export default {
     name: 'VcsActionList',
-    components: { VcsTooltip },
+    components: {
+      VcsTooltip,
+      VList,
+      VListItem,
+      VListItemIcon,
+      VIcon,
+      VListItemTitle,
+      VListItemContent,
+    },
     props: {
       actions: {
         type: Array,

package/src/components/lists/VcsTreeview.vue

@@ -56,6 +56,7 @@
 
 <script>
   import { getCurrentInstance, ref } from 'vue';
+  import { VTreeview } from 'vuetify/lib';
   import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
 
@@ -68,7 +69,11 @@
    */
   export default {
     name: 'VcsTreeview',
-    components: { VcsTreeviewSearchbar, VcsTreeviewLeaf },
+    components: {
+      VcsTreeviewSearchbar,
+      VcsTreeviewLeaf,
+      VTreeview,
+    },
     props: {
       showSearchbar: {
         type: Boolean,

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -46,6 +46,7 @@
     ref,
   } from 'vue';
 
+  import { VIcon } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
 
 
@@ -62,7 +63,10 @@
    * @vue-computed {boolean} leaf - Whether the item is a leaf item or not
    */
   export default {
-    components: { VcsActionButtonList },
+    components: {
+      VcsActionButtonList,
+      VIcon,
+    },
     props: {
       item: {
         type: Object,