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

package/plugins/@vcmap-show-case/window-tester/windowExampleContent.vue

@@ -1,14 +1,10 @@
 <template>
   <v-sheet>
-    <span>
-      content
-    </span>
+    <span> content </span>
   </v-sheet>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
 <script>
   import { VSheet } from 'vuetify/lib';
 
@@ -16,7 +12,7 @@
     name: 'WindowExampleContent',
     components: { VSheet },
     setup() {
-      return { };
+      return {};
     },
   };
 </script>

package/plugins/@vcmap-show-case/wizard-example/index.js

@@ -7,9 +7,15 @@ import WizardExample from './wizardExample.vue';
  */
 export default async () => {
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
     onVcsAppMounted(app) {
       const { action, destroy } = createToggleAction(
         {

package/plugins/@vcmap-show-case/wizard-example/wizardExample.vue

@@ -1,7 +1,5 @@
 <template>
-  <VcsWizard
-    v-model.number="step"
-  >
+  <VcsWizard v-model.number="step">
     <VcsWizardStep
       step="1"
       :complete="step > 1"
@@ -12,15 +10,10 @@
       <template #content>
         <!-- px-2 because does not contain input components -->
         <v-container class="px-2 py-0">
-          <div>
-            This is the content of the first step.
-          </div>
-          <VcsButton
-            @click="increaseStep()"
-            class="my-2"
-          >
+          <div>This is the content of the first step.</div>
+          <VcsFormButton @click="increaseStep()" class="my-2">
             Next
-          </VcsButton>
+          </VcsFormButton>
         </v-container>
       </template>
     </VcsWizardStep>
@@ -30,7 +23,7 @@
       :header-actions="actions.second"
       heading="This is the second step"
       v-model.number="step"
-      :rules="[v => !!formValid]"
+      :rules="[(v) => !!formValid]"
     >
       <template #help>
         Allowed options:
@@ -47,29 +40,25 @@
               :items="['this', 'is', 'a', 'test']"
               v-model="selection"
               placeholder="Select"
-              :rules="[v => (!!v && v !== 'this') || 'Please select a valid option.']"
+              :rules="[
+                (v) => (!!v && v !== 'this') || 'Please select a valid option.',
+              ]"
             />
-            <VcsButton
-              @click="decreaseStep()"
-            >
-              Back
-            </VcsButton>
+            <VcsFormButton @click="decreaseStep()"> Back </VcsFormButton>
           </v-form>
         </v-container>
       </template>
     </VcsWizardStep>
-    <VcsWizardStep
-      step="3"
-      v-model.number="step"
-    >
+    <VcsWizardStep step="3" v-model.number="step">
       <template #header>
         <div class="d-flex flex-grow-1 flex-row-reverse">
-          <VcsButton
+          <VcsFormButton
             :disabled="!selection || !formValid"
             @click="finish()"
+            variant="filled"
           >
             Finish
-          </VcsButton>
+          </VcsFormButton>
         </div>
       </template>
     </VcsWizardStep>
@@ -77,7 +66,12 @@
 </template>
 
 <script>
-  import { VcsWizard, VcsWizardStep, VcsButton, VcsSelect } from '@vcmap/ui';
+  import {
+    VcsWizard,
+    VcsWizardStep,
+    VcsFormButton,
+    VcsSelect,
+  } from '@vcmap/ui';
   import { VForm, VContainer } from 'vuetify/lib';
   import { ref } from 'vue';
 
@@ -87,7 +81,7 @@
     components: {
       VcsWizard,
       VcsWizardStep,
-      VcsButton,
+      VcsFormButton,
       VcsSelect,
       VForm,
       VContainer,
@@ -98,19 +92,25 @@
       const form = ref();
       const formValid = ref(false);
       const actions = {
-        second: [{
-          name: 'resetSecondStep',
-          title: 'Reset step',
-          icon: '$vcsReturn',
-          callback() {
-            selection.value = undefined;
+        second: [
+          {
+            name: 'resetSecondStep',
+            title: 'Reset step',
+            icon: '$vcsReturn',
+            callback() {
+              selection.value = undefined;
+            },
           },
-        }],
+        ],
       };
       return {
         step,
-        increaseStep() { step.value += 1; },
-        decreaseStep() { step.value -= 1; },
+        increaseStep() {
+          step.value += 1;
+        },
+        decreaseStep() {
+          step.value -= 1;
+        },
         selection,
         actions,
         formValid,
@@ -124,6 +124,4 @@
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/actions/actionHelper.js

@@ -1,7 +1,11 @@
 import { v4 as uuid } from 'uuid';
 import { check } from '@vcsuite/check';
 import {
-  Collection, Extent, MapCollection, mercatorProjection, Viewpoint,
+  Collection,
+  Extent,
+  MapCollection,
+  mercatorProjection,
+  Viewpoint,
 } from '@vcmap/core';
 import { Feature } from 'ol';
 import { reactive, ref } from 'vue';
@@ -55,7 +59,12 @@ export function createMapButtonAction(actionOptions, mapName, maps) {
  * @param {string|symbol} owner
  * @returns {{action: VcsAction, destroy: Function}}
  */
-export function createToggleAction(actionOptions, windowComponent, windowManager, owner) {
+export function createToggleAction(
+  actionOptions,
+  windowComponent,
+  windowManager,
+  owner,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
@@ -90,7 +99,11 @@ export function createToggleAction(actionOptions, windowComponent, windowManager
     }),
   ];
 
-  const destroy = () => { listeners.forEach((cb) => { cb(); }); };
+  const destroy = () => {
+    listeners.forEach((cb) => {
+      cb();
+    });
+  };
   return { action, destroy };
 }
 
@@ -140,7 +153,9 @@ export function createSearchButtonAction(app) {
   ];
   const destroy = () => {
     destroyAction();
-    listeners.forEach((cb) => { cb(); });
+    listeners.forEach((cb) => {
+      cb();
+    });
   };
 
   return { searchAction, destroy };
@@ -153,7 +168,11 @@ export function createSearchButtonAction(app) {
  * @param {WindowManager}  windowManager
  * @returns {(function(): void)|*}
  */
-export function createOverviewMapAction(overviewMap, windowComponent, windowManager) {
+export function createOverviewMapAction(
+  overviewMap,
+  windowComponent,
+  windowManager,
+) {
   const { action, destroy } = createToggleAction(
     {
       name: 'overviewMapToggle',
@@ -180,7 +199,9 @@ export function createOverviewMapAction(overviewMap, windowComponent, windowMana
 
   const destroyAction = () => {
     destroy();
-    listeners.forEach((cb) => { cb(); });
+    listeners.forEach((cb) => {
+      cb();
+    });
   };
   return { action, destroy: destroyAction };
 }
@@ -224,9 +245,13 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     callback(event) {
       if (!this.active) {
         this.active = true;
-        const { left, top, width } = event.currentTarget.getBoundingClientRect();
+        const { left, top, width } =
+          event.currentTarget.getBoundingClientRect();
         modalActivator = event.currentTarget;
-        const position = { ...getWindowPositionOptions(left + width, top, app.maps.target), ...windowPositionOptions };
+        const position = {
+          ...getWindowPositionOptions(left + width, top, app.maps.target),
+          ...windowPositionOptions,
+        };
         const state = { ...modalComponent?.state, hideHeader: true };
         app.windowManager.add({ position, ...component, id, state }, owner);
         document.addEventListener('mousedown', handleMouseDown);
@@ -247,7 +272,11 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     }),
   ];
 
-  const destroy = () => { listeners.forEach((cb) => { cb(); }); };
+  const destroy = () => {
+    listeners.forEach((cb) => {
+      cb();
+    });
+  };
   return { action, destroy };
 }
 
@@ -283,7 +312,12 @@ export function createLinkAction(actionOptions, url) {
  * @param {import("@vcmap/core").MapCollection} mapCollection
  * @returns {VcsAction}
  */
-export function createGoToViewpointAction(actionOptions, viewpoint, viewpointCollection, mapCollection) {
+export function createGoToViewpointAction(
+  actionOptions,
+  viewpoint,
+  viewpointCollection,
+  mapCollection,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
@@ -332,7 +366,11 @@ export function getViewpointFromFeature(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) {
+export function createZoomToFeatureAction(
+  actionOptions,
+  feature,
+  mapCollection,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],

package/src/actions/styleSelector.vue

@@ -6,7 +6,9 @@
         :key="index"
         @click.stop="select(item.value)"
       >
-        <v-list-item-title :class="{ 'primary--text': item.value === currentStyleName }">
+        <v-list-item-title
+          :class="{ 'primary--text': item.value === currentStyleName }"
+        >
           {{ item.text }}
         </v-list-item-title>
       </v-list-item>
@@ -31,7 +33,13 @@
 <script>
   import { computed, inject, onUnmounted, ref } from 'vue';
   import {
-    VChip, VList, VListItem, VListItemContent, VListItemIcon, VListItemTitle, VSheet,
+    VChip,
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemIcon,
+    VListItemTitle,
+    VSheet,
   } from 'vuetify/lib';
 
   export default {
@@ -55,11 +63,11 @@
         required: true,
       },
     },
-    setup({ layerName, availableStyles }, { attrs }) {
+    setup(props, { attrs }) {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       /** @type {import("@vcmap/core").FeatureLayer} */
-      const layer = app.layers.getByKey(layerName);
+      const layer = app.layers.getByKey(props.layerName);
       const currentStyleName = ref(layer.style.name);
       const currentStyleLegend = ref([]);
       const defaultStyle = layer.defaultStyle.name;
@@ -72,7 +80,8 @@
       }
       setStyle(layer.style);
       // TODO error handling if layer is missing or not a feature layer
-      const styleChangedListener = layer.styleChanged.addEventListener(setStyle);
+      const styleChangedListener =
+        layer.styleChanged.addEventListener(setStyle);
       onUnmounted(() => {
         styleChangedListener();
       });
@@ -80,14 +89,15 @@
       const items = computed(() => {
         return [
           { text: 'Default', value: defaultStyle },
-          ...availableStyles.map(s => ({ text: s, value: s })),
+          ...props.availableStyles.map((s) => ({ text: s, value: s })),
         ];
       });
 
       function select(styleName) {
-        const style = styleName === defaultStyle ?
-          layer.defaultStyle :
-          app.styles.getByKey(styleName);
+        const style =
+          styleName === defaultStyle
+            ? layer.defaultStyle
+            : app.styles.getByKey(styleName);
         layer.setStyle(style);
         app.windowManager.remove(attrs['window-state'].id);
       }
@@ -102,5 +112,4 @@
   };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

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,
       };