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

package/src/application/VcsApp.vue

@@ -1,9 +1,20 @@
 <template>
   <v-container class="fill-height pa-0" absolute fluid>
     <VcsNavbar />
-    <v-container class="vcs-main pa-0" :class="{ 'vcs-main-xs': $vuetify.breakpoint.xs }" fluid absolute>
+    <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">
+        <img
+          v-if="mobileLogo"
+          :src="mobileLogo"
+          alt="Logo"
+          draggable="false"
+          class="mobile-logo"
+        />
         <div v-else class="company-logo-mobile mobile-logo" />
       </template>
       <VcsButton
@@ -23,43 +34,45 @@
       <NotifierComponent />
     </v-container>
     <v-footer absolute v-if="$vuetify.breakpoint.smAndUp" min-height="22px">
-      <VcsAttributionsFooter :entries="attributionEntries" :attribution-action="attributionAction" />
+      <VcsAttributionsFooter
+        :entries="attributionEntries"
+        :attribution-action="attributionAction"
+      />
     </v-footer>
   </v-container>
 </template>
 
 <style scoped lang="scss">
-::v-deep .v-application--wrap {
-  min-height: fit-content;
-}
-.vcs-main {
-  position: absolute;
-  top: 48px;
-  left: 0;
-  right: 0;
-  bottom: 22px;
-}
-
-.vcs-main-xs {
-  top: 0;
-  bottom: 56px;
-}
-
-.mobile-logo {
-  max-height: 40px;
-  max-width: 70px;
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 1;
-}
-
-.mobile-attribution-btn{
-  position: fixed;
-  right: 2px;
-  bottom: 56px;
-}
+  ::v-deep .v-application--wrap {
+    min-height: fit-content;
+  }
+  .vcs-main {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    right: 0;
+    bottom: 22px;
+  }
 
+  .vcs-main-xs {
+    top: 0;
+    bottom: 56px;
+  }
+
+  .mobile-logo {
+    max-height: 40px;
+    max-width: 70px;
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    z-index: 1;
+  }
+
+  .mobile-attribution-btn {
+    position: fixed;
+    right: 2px;
+    bottom: 56px;
+  }
 </style>
 
 <script>
@@ -69,7 +82,8 @@
     getCurrentInstance,
     onMounted,
     onUnmounted,
-    provide, watch,
+    provide,
+    watch,
   } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
   import { VContainer, VFooter } from 'vuetify/lib';
@@ -80,7 +94,10 @@
   import { vcsAppSymbol } from '../pluginHelper.js';
   import VcsMap from './VcsMap.vue';
   import VcsNavbar from './VcsNavbar.vue';
-  import { createMapButtonAction, createToggleAction } from '../actions/actionHelper.js';
+  import {
+    createMapButtonAction,
+    createToggleAction,
+  } from '../actions/actionHelper.js';
   import MapNavigation from '../navigation/mapNavigation.vue';
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
@@ -112,7 +129,10 @@
         try {
           plugin.onVcsAppMounted(app);
         } catch (e) {
-          getLogger('VcsUiApp').error(`Error in plugin ${plugin.name} onVcsAppMounted hook`, e);
+          getLogger('VcsUiApp').error(
+            `Error in plugin ${plugin.name} onVcsAppMounted hook`,
+            e,
+          );
         }
       }
     }
@@ -175,7 +195,7 @@
     return () => {
       mapAddedListener();
       mapRemovedListener();
-      Object.values(mapButtonActionDestroy).forEach(cb => cb());
+      Object.values(mapButtonActionDestroy).forEach((cb) => cb());
     };
   }
 
@@ -229,9 +249,12 @@
      * Adds a button, if legend definitions are available or removes legend otherwise.
      */
     const handleLegend = () => {
-      const layersWithLegend = [...app.layers]
-        .filter(layer => layer.style?.properties?.legend ?? layer.properties?.legend);
-      const stylesWithLegend = [...app.styles].filter(style => style?.properties?.legend);
+      const layersWithLegend = [...app.layers].filter(
+        (layer) => layer.style?.properties?.legend ?? layer.properties?.legend,
+      );
+      const stylesWithLegend = [...app.styles].filter(
+        (style) => style?.properties?.legend,
+      );
       if (layersWithLegend < 1 && stylesWithLegend < 1) {
         app.navbarManager.remove('legend');
         app.windowManager.remove('legend');
@@ -256,7 +279,7 @@
     return () => {
       destroy();
       legendDestroy();
-      listeners.forEach(cb => cb());
+      listeners.forEach((cb) => cb());
     };
   }
 
@@ -266,21 +289,22 @@
    * @returns {function():void}
    */
   export function setupSettingsWindow(app) {
-    const { action: settingsAction, destroy: settingsDestroy } = createToggleAction(
-      {
-        name: 'settings.title',
-        icon: 'mdi-cog',
-        title: 'settings.tooltip',
-      },
-      {
-        id: 'settingsId',
-        component: VcsSettings,
-        state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
-        slot: WindowSlot.DYNAMIC_RIGHT,
-      },
-      app.windowManager,
-      vcsAppSymbol,
-    );
+    const { action: settingsAction, destroy: settingsDestroy } =
+      createToggleAction(
+        {
+          name: 'settings.title',
+          icon: 'mdi-cog',
+          title: 'settings.tooltip',
+        },
+        {
+          id: 'settingsId',
+          component: VcsSettings,
+          state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        app.windowManager,
+        vcsAppSymbol,
+      );
     app.navbarManager.add(
       {
         id: 'settingsToggle',
@@ -335,8 +359,10 @@
         app.navbarManager.remove(id);
       }
     };
-    const addedListener = app.categoryManager.added.addEventListener(setupCategories);
-    const removedListener = app.categoryManager.removed.addEventListener(setupCategories);
+    const addedListener =
+      app.categoryManager.added.addEventListener(setupCategories);
+    const removedListener =
+      app.categoryManager.removed.addEventListener(setupCategories);
     setupCategories();
 
     return () => {
@@ -378,7 +404,9 @@
     );
 
     return () => {
-      listeners.forEach((cb) => { cb(); });
+      listeners.forEach((cb) => {
+        cb();
+      });
       listeners.splice(0);
       stopWatching();
     };
@@ -393,25 +421,26 @@
   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',
+    const { action: attributionAction, destroy: attributionDestroy } =
+      createToggleAction(
+        {
+          name: 'attributionToggle',
+          icon: 'mdi-chevron-double-right',
+          title: 'footer.attributions.tooltip',
         },
-        slot: WindowSlot.DYNAMIC_RIGHT,
-        props: { entries },
-      },
-      app.windowManager,
-      vcsAppSymbol,
-    );
+        {
+          id: 'attribution',
+          component: VcsAttributions,
+          state: {
+            headerTitle: 'footer.attributions.title',
+            headerIcon: 'mdi-copyright',
+          },
+          slot: WindowSlot.DYNAMIC_RIGHT,
+          props: { entries },
+        },
+        app.windowManager,
+        vcsAppSymbol,
+      );
 
     return {
       attributionEntries: entries,
@@ -458,8 +487,12 @@
       const legendDestroy = setupLegendWindow(app);
       const settingsDestroy = setupSettingsWindow(app);
       const destroyComponentsWindow = setupCategoryManagerWindow(app);
-      const destroyThemingListener = setupUiConfigTheming(app, getCurrentInstance().proxy.$vuetify);
-      const { attributionEntries, attributionAction, destroyAttributions } = setupAttributions(app);
+      const destroyThemingListener = setupUiConfigTheming(
+        app,
+        getCurrentInstance().proxy.$vuetify,
+      );
+      const { attributionEntries, attributionAction, destroyAttributions } =
+        setupAttributions(app);
 
       let pluginMountedListener;
       onMounted(() => {
@@ -482,7 +515,11 @@
 
       return {
         mapId,
-        mobileLogo: computed(() => app.uiConfig.config.value.mobileLogo ?? app.uiConfig.config.value.logo),
+        mobileLogo: computed(
+          () =>
+            app.uiConfig.config.value.mobileLogo ??
+            app.uiConfig.config.value.logo,
+        ),
         attributionEntries,
         attributionAction,
       };

package/src/application/VcsAttributions.vue

@@ -1,6 +1,10 @@
 <template>
   <v-list class="px-1">
-    <v-list-item v-for="({key, title, attributions}) in entries" :key="key" class="px-1">
+    <v-list-item
+      v-for="{ key, title, attributions } in entries"
+      :key="key"
+      class="px-1"
+    >
       <v-list-item-content>
         <v-list-item-title>{{ $t(title) }}</v-list-item-title>
         <v-list-item-subtitle
@@ -8,10 +12,7 @@
           :key="attribution.provider"
           :title="`${$t(attribution.provider)} ${attribution.year}`"
         >
-          <a
-            :href="attribution.url"
-            target="_blank"
-          >
+          <a :href="attribution.url" target="_blank">
             {{ $t(attribution.provider) }} {{ attribution.year }}
           </a>
         </v-list-item-subtitle>
@@ -21,16 +22,14 @@
 </template>
 
 <style lang="scss" scoped>
-
   ::v-deep {
     a:before {
-      content: '\00a9\00a0'
+      content: '\00a9\00a0';
     }
   }
-
 </style>
 
-<script >
+<script>
   import {
     VList,
     VListItem,

package/src/application/VcsAttributionsFooter.vue

@@ -1,10 +1,13 @@
 <template>
   <span class="d-inline-block text-truncate mr-10 attribution-wrap">
-    <span v-for="attribution in mergedAttributions" class="attribution-span" :key="attribution.provider">
-      <a
-        :href="attribution.url"
-        target="_blank"
-      >{{ $t(attribution.provider) }} <span>{{ attribution.years }}</span></a>
+    <span
+      v-for="attribution in mergedAttributions"
+      class="attribution-span"
+      :key="attribution.provider"
+    >
+      <a :href="attribution.url" target="_blank"
+        >{{ $t(attribution.provider) }} <span>{{ attribution.years }}</span>
+      </a>
     </span>
     <VcsButton
       class="d-flex"
@@ -13,13 +16,13 @@
       :tooltip="attributionAction.title"
       :icon="attributionAction.icon"
       :active="attributionAction.active"
+      :disabled="attributionAction.disabled"
       @click.stop="attributionAction.callback($event)"
     />
   </span>
 </template>
 
 <style lang="scss" scoped>
-
   .attribution-wrap .vcs-button-wrap {
     position: absolute;
     right: 4px;
@@ -41,11 +44,9 @@
       font-size: inherit;
     }
   }
-
 </style>
 
 <script>
-
   import { computed } from 'vue';
   import { mergeAttributions } from './attributionsHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
@@ -72,7 +73,9 @@
       },
     },
     setup(props) {
-      const mergedAttributions = computed(() => mergeAttributions(props.entries));
+      const mergedAttributions = computed(() =>
+        mergeAttributions(props.entries),
+      );
       return {
         mergedAttributions,
       };

package/src/application/VcsMap.vue

@@ -1,9 +1,15 @@
 <template>
-  <div :id="mapId" @click.right.stop="(e) => { e.preventDefault(); }" />
+  <div
+    :id="mapId"
+    @click.right.stop="
+      (e) => {
+        e.preventDefault();
+      }
+    "
+  />
 </template>
 
 <style lang="scss" scoped>
-
   ::v-deep {
     .mapElement {
       position: absolute;
@@ -30,11 +36,9 @@
       touch-action: none;
     }
   }
-
 </style>
 
-<script >
-
+<script>
   export default {
     name: 'VcsMap',
     props: {

package/src/application/VcsNavbar.vue

@@ -8,17 +8,20 @@
     width="100%"
   >
     <v-container fluid class="pa-0">
-      <v-row no-gutters>
+      <v-row no-gutters class="align-center">
         <v-col>
           <v-toolbar-items>
-            <div class="d-flex align-center">
+            <div class="d-flex">
               <VcsActionButtonList
                 :actions="mapActions"
                 :overflow-count="3"
                 large
               />
               <v-divider
-                v-if="mapActions.length > 0 && (contentActions.length > 0 || toolActions.length > 0)"
+                v-if="
+                  mapActions.length > 0 &&
+                  (contentActions.length > 0 || toolActions.length > 0)
+                "
                 class="mx-2"
                 vertical
                 inset
@@ -42,10 +45,16 @@
             </div>
           </v-toolbar-items>
         </v-col>
-        <v-col class="align-center d-flex justify-center">
-          <div class="d-flex">
+        <v-col class="d-flex justify-center">
+          <div class="d-flex align-center">
             <template v-if="!$vuetify.breakpoint.xs">
-              <img v-if="config.logo" class="logo" :src="config.logo" draggable="false" alt="Logo">
+              <img
+                v-if="config.logo"
+                class="logo"
+                :src="config.logo"
+                draggable="false"
+                alt="Logo"
+              />
               <div v-else class="company-logo logo" />
             </template>
             <div v-if="!$vuetify.breakpoint.sm && config.appTitle" class="ml-4">
@@ -55,21 +64,15 @@
         </v-col>
         <v-col class="align-content-end d-flex justify-end">
           <v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
-            <div class="d-flex align-center">
-              <VcsActionButtonList
-                :actions="projectActions"
-                large
-              />
+            <div class="d-flex">
+              <VcsActionButtonList :actions="projectActions" large />
               <v-divider
                 v-if="projectActions.length > 0 && menuActions.length > 0"
                 vertical
                 inset
                 class="mx-2"
               />
-              <v-menu
-                offset-y
-                v-if="shareActions.length > 0"
-              >
+              <v-menu offset-y v-if="shareActions.length > 0">
                 <template #activator="{ on, attrs }">
                   <VcsButton
                     v-bind="attrs"
@@ -94,12 +97,9 @@
                 :icon="searchAction.icon"
                 :active="searchAction.active"
                 @click.stop="searchAction.callback($event)"
-                v-bind="{...$attrs}"
+                v-bind="{ ...$attrs }"
               />
-              <v-menu
-                offset-y
-                v-if="menuActions.length > 0"
-              >
+              <v-menu offset-y v-if="menuActions.length > 0">
                 <template #activator="{ on, attrs }">
                   <VcsButton
                     v-bind="attrs"
@@ -124,7 +124,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .v-toolbar__items > div{
+  .v-toolbar__items > div {
     gap: 8px;
   }
   .logo {
@@ -136,9 +136,18 @@
 <script>
   import { inject, ref, computed, onUnmounted } from 'vue';
   import {
-    VCol, VContainer, VDivider, VMenu, VRow, VToolbar, VToolbarItems,
+    VCol,
+    VContainer,
+    VDivider,
+    VMenu,
+    VRow,
+    VToolbar,
+    VToolbarItems,
   } from 'vuetify/lib';
-  import { ButtonLocation, getActionsByLocation } from '../manager/navbarManager.js';
+  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';
@@ -162,12 +171,20 @@
       const app = inject('vcsApp');
 
       const navbarButtonIds = ref(app.navbarManager.componentIds);
-      const buttonComponents = computed(() => navbarButtonIds.value.map(id => app.navbarManager.get(id)));
-      const getActions = location => computed(
-        () => getActionsByLocation(buttonComponents.value, location, [...app.plugins].map(p => p.name)),
+      const buttonComponents = computed(() =>
+        navbarButtonIds.value.map((id) => app.navbarManager.get(id)),
       );
+      const getActions = (location) =>
+        computed(() =>
+          getActionsByLocation(
+            buttonComponents.value,
+            location,
+            [...app.plugins].map((p) => p.name),
+          ),
+        );
 
-      const { searchAction, destroy: destroySearchAction } = createSearchButtonAction(app);
+      const { searchAction, destroy: destroySearchAction } =
+        createSearchButtonAction(app);
 
       onUnmounted(() => {
         destroySearchAction();

package/src/application/VcsSettings.vue

@@ -1,9 +1,6 @@
 <template>
   <v-container class="px-1 py-0">
-    <v-row
-      no-gutters
-      align="center"
-    >
+    <v-row no-gutters>
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">
           {{ $t('settings.languageSelector') }}
@@ -17,10 +14,7 @@
         />
       </v-col>
     </v-row>
-    <v-row
-      no-gutters
-      align="center"
-    >
+    <v-row no-gutters>
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">
           {{ $t('settings.theme.title') }}
@@ -42,9 +36,7 @@
 </template>
 
 <script>
-  import {
-    ref, inject, onUnmounted, getCurrentInstance, computed,
-  } from 'vue';
+  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';
@@ -84,7 +76,8 @@
         localLanguage.value = app.locale;
       };
       setLocale();
-      const localeChangedListener = app.localeChanged.addEventListener(setLocale);
+      const localeChangedListener =
+        app.localeChanged.addEventListener(setLocale);
       const addedListener = app.i18n.added.addEventListener(setupI18n);
       const removedListener = app.i18n.removed.addEventListener(setupI18n);