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

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);
 

package/src/application/attributionsHelper.js

@@ -29,7 +29,7 @@ export function mergeAttributions(entries) {
         if (year) {
           const index = providerObject.years.indexOf(year);
           if (url && index === -1) {
-            if (providerObject.years.every(y => Number(y) < Number(year))) {
+            if (providerObject.years.every((y) => Number(y) < Number(year))) {
               providerObject.url = url;
             }
             if (year) {
@@ -46,7 +46,7 @@ export function mergeAttributions(entries) {
       }
     });
   });
-  return Object.keys(providers).map(provider => ({
+  return Object.keys(providers).map((provider) => ({
     provider,
     years: providers[provider].years.join(', '),
     url: providers[provider].url,
@@ -77,14 +77,19 @@ export function getAttributions(app) {
    */
   function addAttributions(object) {
     const { attributions } = object.properties;
-    if (!attributions) { return; }
+    if (!attributions) {
+      return;
+    }
     const key = `${object.className}_${object.name}`;
-    const idx = entries.value.findIndex(e => e.key === key);
+    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],
+        title:
+          object.properties?.title ?? `${object.className}: ${object.name}`,
+        attributions: Array.isArray(attributions)
+          ? attributions
+          : [attributions],
       });
     }
   }
@@ -93,7 +98,9 @@ export function getAttributions(app) {
    * @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}`);
+    const idx = entries.value.findIndex(
+      (e) => e.key === `${object.className}_${object.name}`,
+    );
     if (idx >= 0) {
       entries.value.splice(idx, 1);
     }
@@ -104,7 +111,9 @@ export function getAttributions(app) {
    * @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?.properties?.attributions === undefined) {
+      return;
+    }
     if (object.active || object.loaded) {
       addAttributions(object);
     } else {
@@ -117,7 +126,9 @@ export function getAttributions(app) {
    * @param {import("@vcmap/core").VcsMap} map
    */
   function initAttributions(map) {
-    if (!map) { return; }
+    if (!map) {
+      return;
+    }
     obliqueListener();
     entries.value.splice(0);
     syncAttributions(map);
@@ -128,7 +139,8 @@ export function getAttributions(app) {
     });
     if (map instanceof ObliqueMap) {
       syncAttributions(map.collection);
-      obliqueListener = map.collectionChanged.addEventListener(syncAttributions);
+      obliqueListener =
+        map.collectionChanged.addEventListener(syncAttributions);
     }
   }
 
@@ -142,7 +154,7 @@ export function getAttributions(app) {
   initAttributions(app.maps.activeMap);
 
   const destroy = () => {
-    listeners.forEach(cb => cb());
+    listeners.forEach((cb) => cb());
     obliqueListener();
   };
 

package/src/application/vcsAppWrapper.vue

@@ -29,6 +29,4 @@
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/components/buttons/VcsActionButtonList.vue

@@ -7,9 +7,10 @@
       :tooltip="button.title"
       :icon="button.icon"
       :active="button.active"
+      :disabled="button.disabled"
       @click.stop="button.callback($event)"
-      v-bind="{...$attrs}"
-      v-on="{...$listeners}"
+      v-bind="{ ...$attrs }"
+      v-on="{ ...$listeners }"
     />
     <v-menu
       v-if="overflowButtons.length > 0"
@@ -19,26 +20,24 @@
       offset-x
     >
       <template #activator="{ on, attrs }">
-        <VcsButton
-          v-bind="{...$attrs, ...attrs}"
-          v-on="on"
-          class="d-flex"
-        >
-          <v-icon v-text="overflowIcon" />
+        <VcsButton v-bind="{ ...$attrs, ...attrs }" v-on="on" class="d-flex">
+          <v-icon>{{ overflowIcon }}</v-icon>
         </VcsButton>
       </template>
       <VcsActionList :actions="overflowButtons" />
     </v-menu>
-    <v-spacer v-else-if="blockOverflow" class="flex-grow-0 d-inline-block px-2" />
+    <v-spacer
+      v-else-if="blockOverflow"
+      class="flex-grow-0 d-inline-block px-2"
+    />
   </div>
 </template>
 <style lang="scss">
-.action-btn-wrap{
-  gap: 8px;
-}
+  .action-btn-wrap {
+    gap: 8px;
+  }
 </style>
 <script>
-
   import { VIcon, VMenu, VSpacer } from 'vuetify/lib';
   import VcsButton from './VcsButton.vue';
   import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
@@ -83,17 +82,21 @@
       },
     },
     computed: {
-      right() { return this.$attrs.right !== undefined && this.$attrs.right !== false; },
+      right() {
+        return this.$attrs.right !== undefined && this.$attrs.right !== false;
+      },
       buttons() {
-        const buttons = this.actions.filter(i => i.icon).slice(0, this.overflowCount);
+        const buttons = this.actions
+          .filter((i) => i.icon)
+          .slice(0, this.overflowCount);
         if (this.right) {
           return buttons.reverse();
         }
         return buttons;
       },
       overflowButtons() {
-        const buttonsNames = this.buttons.map(i => i.name);
-        return this.actions.filter(i => !buttonsNames.includes(i.name));
+        const buttonsNames = this.buttons.map((i) => i.name);
+        return this.actions.filter((i) => !buttonsNames.includes(i.name));
       },
       classes() {
         const classes = ['d-flex', 'align-center', 'action-btn-wrap'];

package/src/components/buttons/VcsButton.vue

@@ -1,11 +1,9 @@
 <template>
-  <div
-    class="vcs-button-wrap"
-  >
+  <div class="vcs-button-wrap">
     <VcsTooltip
       :tooltip="tooltip"
       :tooltip-position="tooltipPosition"
-      v-bind="{...tooltipProps}"
+      v-bind="{ ...tooltipProps }"
     >
       <template #activator="{ on, attrs }">
         <v-btn
@@ -15,43 +13,40 @@
           :class="classes"
           :ripple="!isSmall ? { class: 'primary--text text--darken-4' } : false"
           elevation="0"
-          v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners, ...on}"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
         >
-          <v-icon v-if="icon" v-text="icon" :class="{ 'mr-2': hasDefaultSlot }" />
+          <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+            {{ icon }}
+          </v-icon>
           <slot />
         </v-btn>
       </template>
     </VcsTooltip>
-    <VcsBadge
-      v-if="hasUpdate"
-      :color="'warning'"
-      class="position-absolute"
-    />
+    <VcsBadge v-if="hasUpdate" :color="'warning'" class="position-absolute" />
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .vcs-button-wrap{
+  .vcs-button-wrap {
     position: relative;
     display: inline-block;
   }
-  .badge{
+  .badge {
     top: -3px;
     right: -3px;
   }
-  .v-btn{
-    &--outlined{
+  .v-btn {
+    &--outlined {
       border: thin solid currentColor;
     }
-    &.vcs-button{
-
+    &.vcs-button {
       &--standard {
         min-width: 48px;
         height: 32px;
         font-size: 12px;
         border: 1px solid transparent;
-        &:hover{
+        &:hover {
           color: var(--v-base-lighten5) !important;
           border-color: var(--v-primary-base);
           background-color: var(--v-primary-base);
@@ -61,14 +56,14 @@
       &--small {
         height: 16px;
         min-width: auto;
-        &:hover{
+        &:hover {
           color: var(--v-primary-base);
         }
-        &::before{
+        &::before {
           display: none; /*prevents unwanted mouseover effect*/
         }
         ::v-deep {
-          .v-icon{
+          .v-icon {
             font-size: 16px;
           }
 
@@ -185,7 +180,8 @@
           'font-weight-bold': this.isStandard,
           'text-capitalize': this.isStandard,
           'vcs-button--large': this.isLarge,
-          'vcs-button--active-background': this.active && this.background && !this.$attrs.disabled,
+          'vcs-button--active-background':
+            this.active && this.background && !this.$attrs.disabled,
         };
       },
       hasDefaultSlot() {