@vcmap/ui 6.0.0-rc.2 → 6.0.0-rc.3

package/src/actions/actionHelper.js

@@ -1,5 +1,5 @@
 import { v4 as uuid } from 'uuid';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf, optional } from '@vcsuite/check';
 import {
   Collection,
   Extent,
@@ -48,8 +48,8 @@ import SearchComponent from '../search/SearchComponent.vue';
  */
 export function getActionFromOptions(options) {
   check(options.name, String);
-  checkMaybe(options.title, String);
-  checkMaybe(options.icon, String);
+  check(options.title, maybe(String));
+  check(options.icon, maybe(String));
   check(options.callback, Function);
   options.active = parseBoolean(options.active, false);
   options.hasUpdate = parseBoolean(options.hasUpdate, false);
@@ -67,8 +67,8 @@ export function getActionFromOptions(options) {
 export function createMapButtonAction(actionOptions, mapName, maps) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
   });
   check(mapName, String);
   check(maps, MapCollection);
@@ -104,12 +104,12 @@ export function createToggleAction(
 ) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
-    hasUpdate: [undefined, Boolean],
+    icon: optional(String),
+    title: optional(String),
+    hasUpdate: optional(Boolean),
   });
   check(windowComponent, { id: String });
-  check(owner, [String, vcsAppSymbol]);
+  check(owner, oneOf(String, vcsAppSymbol));
 
   const action = reactive({
     ...actionOptions,
@@ -256,10 +256,10 @@ export function createOverviewMapAction(
 export function createModalAction(actionOptions, modalComponent, app, owner) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
   });
-  check(owner, [String, vcsAppSymbol]);
+  check(owner, oneOf(String, vcsAppSymbol));
 
   const id = uuid();
   const { position: windowPositionOptions, ...component } = modalComponent;
@@ -334,10 +334,10 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
 export function createLinkAction(actionOptions, url) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
   });
-  check(url, [String, Function]);
+  check(url, oneOf(String, Function));
 
   return {
     ...actionOptions,
@@ -369,10 +369,10 @@ export function createGoToViewpointAction(
 ) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
   });
-  check(viewpoint, [Viewpoint, String]);
+  check(viewpoint, oneOf(Viewpoint, String));
   check(viewpointCollection, Collection);
   check(mapCollection, MapCollection);
 
@@ -422,8 +422,8 @@ export function createZoomToFeatureAction(
 ) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
   });
   check(feature, Feature);
   check(mapCollection, MapCollection);

package/src/actions/flightActions.js

@@ -1,5 +1,5 @@
 import { reactive } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, ofEnum } from '@vcsuite/check';
 import {
   createFlightVisualization,
   exportFlightAsGeoJson,
@@ -87,7 +87,7 @@ export const PlayerDirection = {
  * @returns {{action: import("./actionHelper.js").VcsAction, destroy: () => void}}
  */
 export function createStepAction(app, instance, direction) {
-  check(direction, Object.values(PlayerDirection));
+  check(direction, ofEnum(PlayerDirection));
 
   let player;
   const action = reactive({
@@ -123,7 +123,7 @@ export function createStepAction(app, instance, direction) {
  * @returns {{ action: import("./actionHelper.js").VcsAction & { listeners:Object<string,()=>void>, destroy: () => void }}}
  */
 export function createFastAction(app, instance, direction) {
-  check(direction, Object.values(PlayerDirection));
+  check(direction, ofEnum(PlayerDirection));
 
   let player;
   const sign = direction === PlayerDirection.Forward ? 1 : -1;
@@ -421,8 +421,8 @@ export function createExportFlightAction(instance, isPathExport = false) {
  * @returns {Promise<boolean>}
  */
 export async function importFlights(app, files, moduleId, importSuccessCb) {
-  checkMaybe(moduleId, String);
-  checkMaybe(importSuccessCb, Function);
+  check(moduleId, maybe(String));
+  check(importSuccessCb, maybe(Function));
 
   const { vueI18n } = app;
   const results = await Promise.all(

package/src/actions/listActions.d.ts

@@ -1,10 +1,3 @@
-/**
- * Creates an action for renaming an item in a VcsList. Shows VcsTextfield in VcsList.
- * @param {import("../components/lists/VcsList.vue").VcsListItem} item
- * @param {Partial<import("./actionHelper.js").ActionOptions>} [actionOptions={}]
- * @returns {import("./actionHelper.js").VcsAction}
- */
-export function createListItemRenameAction(item: import("../components/lists/VcsList.vue").VcsListItem, actionOptions?: Partial<import("./actionHelper.js").ActionOptions> | undefined): import("./actionHelper.js").VcsAction;
 /**
  * Creates an action for renaming an item in a VcsList.
  * @param {import("@vcmap/core").Collection<T>} collection

package/src/actions/listActions.js

@@ -1,5 +1,5 @@
 import { reactive, watch } from 'vue';
-import { check } from '@vcsuite/check';
+import { check, oneOf, optional } from '@vcsuite/check';
 import { getLogger } from '@vcsuite/logger';
 import { parseGeoJSON } from '@vcmap/core';
 import VcsImportComponent from '../components/import/VcsImportComponent.vue';
@@ -8,22 +8,6 @@ import { WindowSlot } from '../manager/window/windowManager.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import { NotificationType } from '../notifier/notifier.js';
 
-/**
- * Creates an action for renaming an item in a VcsList. Shows VcsTextfield in VcsList.
- * @param {import("../components/lists/VcsList.vue").VcsListItem} item
- * @param {Partial<import("./actionHelper.js").ActionOptions>} [actionOptions={}]
- * @returns {import("./actionHelper.js").VcsAction}
- */
-export function createListItemRenameAction(item, actionOptions = {}) {
-  return {
-    name: 'list.renameItem',
-    ...actionOptions,
-    callback: () => {
-      item.rename = true;
-    },
-  };
-}
-
 /**
  * Creates an action for renaming an item in a VcsList.
  * @param {import("@vcmap/core").Collection<T>} collection
@@ -57,8 +41,8 @@ export function createListItemDeleteAction(
 export function createListItemBulkAction(selection, actionOptions) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
     callback: Function,
   });
 
@@ -218,7 +202,7 @@ export function createListImportAction(
   parentId,
 ) {
   check(importCallback, Function);
-  check(owner, [String, vcsAppSymbol]);
+  check(owner, oneOf(String, vcsAppSymbol));
   check(parentId, String);
 
   const { action, destroy } = createToggleAction(

package/src/actions/stateRefAction.js

@@ -1,5 +1,5 @@
 import { reactive, watch } from 'vue';
-import { check } from '@vcsuite/check';
+import { check, ofEnum } from '@vcsuite/check';
 
 /**
  * @enum {number}
@@ -28,7 +28,7 @@ const stateIconMap = {
  */
 export function createStateRefAction(name, stateRef, callback) {
   check(name, String);
-  check(stateRef?.value, Object.values(StateActionState));
+  check(stateRef?.value, ofEnum(StateActionState));
   check(callback, Function);
 
   const currentState = stateRef.value;

package/src/application/VcsApp.vue

@@ -7,7 +7,13 @@
     ></VcsSplashScreen>
     <VcsNavbar />
     <VcsContainer :attribution-action="attributionAction" />
-    <v-footer v-if="smAndUp" app absolute height="22" class="d-flex gc-1 pa-0">
+    <v-footer
+      v-if="smAndUp"
+      app
+      absolute
+      :height="footerHeight"
+      class="d-flex gc-1 pa-0"
+    >
       <VcsPositionDisplay />
       <VcsTextPageFooter
         v-if="imprint"
@@ -57,13 +63,13 @@
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
   import CollectionManager from '../manager/collectionManager/CollectionManager.vue';
-  import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+  import { defaultPrimaryColor, useFontSize } from '../vuePlugins/vuetify.js';
   import VcsLegend from '../legend/VcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
   import VcsSplashScreen from './VcsSplashScreen.vue';
-  import VcsCustomScreen from './VcsCustomScreen.vue';
+  import VcsTextPage from './VcsTextPage.vue';
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
@@ -267,7 +273,7 @@
           },
           {
             id: 'customScreenId',
-            component: VcsCustomScreen,
+            component: VcsTextPage,
             state: {
               headerIcon: customScreen.icon,
               headerTitle: customScreen.name,
@@ -322,36 +328,50 @@
   function setupSplashScreen(app, splashScreenRef) {
     function setupSplashScreenAction() {
       const { splashScreen } = app.uiConfig.config.value;
-      const splashScreenAction = {
-        name: splashScreen.name || 'components.splashScreen.name',
-        icon: splashScreen.icon || 'mdi-alert-box',
-        title: splashScreen.title,
-        callback() {
-          splashScreenRef.value = !splashScreenRef.value;
-        },
-      };
-      app.navbarManager.add(
-        {
-          id: 'splashScreenToggle',
-          action: splashScreenAction,
-        },
-        vcsAppSymbol,
-        ButtonLocation.MENU,
-      );
+      if (splashScreen) {
+        splashScreenRef.value = true;
+      }
+      if (splashScreen && splashScreen.menuEntry) {
+        const splashScreenAction = {
+          name: splashScreen.name || 'components.splashScreen.name',
+          icon: splashScreen.icon || 'mdi-alert-box',
+          title: splashScreen.title,
+          callback() {
+            splashScreenRef.value = !splashScreenRef.value;
+          },
+        };
+        app.navbarManager.add(
+          {
+            id: 'splashScreenToggle',
+            action: splashScreenAction,
+          },
+          vcsAppSymbol,
+          ButtonLocation.MENU,
+        );
+      }
     }
-
-    return watch(
-      () => app.uiConfig.config.value.splashScreen,
-      (newSplashScreen) => {
+    setupSplashScreenAction();
+    const removeAddedListener = app.uiConfig.added.addEventListener((item) => {
+      if (item.name === 'splashScreen') {
         if (app.navbarManager.has('splashScreenToggle')) {
           app.navbarManager.remove('splashScreenToggle');
         }
-        if (newSplashScreen && newSplashScreen.menuEntry) {
-          setupSplashScreenAction();
+        setupSplashScreenAction();
+      }
+    });
+    const removeRemovedListener = app.uiConfig.removed.addEventListener(
+      (item) => {
+        if (item.name === 'splashScreen') {
+          if (app.navbarManager.has('splashScreenToggle')) {
+            app.navbarManager.remove('splashScreenToggle');
+          }
         }
       },
-      { immediate: true },
     );
+    return () => {
+      removeAddedListener();
+      removeRemovedListener();
+    };
   }
   /**
    * This helper function will add a settings action button to the apps NavbarManager MENU location.
@@ -685,9 +705,14 @@
       });
 
       const { smAndUp } = useDisplay();
+      const fontSize = useFontSize();
+      const footerHeight = computed(() => {
+        return Math.ceil(fontSize.value * 1.65);
+      });
 
       return {
         smAndUp,
+        footerHeight,
         mobileLogo: computed(
           () =>
             app.uiConfig.config.value.mobileLogo ??

package/src/application/VcsApp.vue.d.ts

@@ -72,6 +72,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     smAndUp: import("vue").Ref<boolean>;
+    footerHeight: import("vue").ComputedRef<number>;
     mobileLogo: import("vue").ComputedRef<any>;
     imprint: import("vue").ComputedRef<{
         title: string;

package/src/application/VcsAttributions.vue

@@ -25,21 +25,10 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '../styles/shades.scss';
-
-  .theme--light {
-    a {
-      color: map-get($shades, 'black');
-    }
-  }
-  .theme--dark {
-    a {
-      color: map-get($shades, 'white');
-    }
-  }
   a {
+    color: var(--v-theme-surface);
     &:hover {
-      color: var(--v-primary-base);
+      color: rgb(var(--v-theme-primary));
     }
     &:before {
       content: '\00a9';

package/src/application/VcsAttributionsFooter.vue

@@ -2,11 +2,11 @@
   <span class="d-inline-block text-truncate mr-10">
     <span
       v-for="attribution in mergedAttributions"
-      class="attribution-span"
+      class="attribution"
       :key="attribution.provider"
     >
-      <a :href="attribution.url" target="_blank"
-        >{{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
+      <a :href="attribution.url" target="_blank">
+        {{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
       </a>
     </span>
     <VcsButton
@@ -21,14 +21,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .attribution-wrap .vcs-button-wrap {
-    bottom: 3px;
-  }
-
-  a:before {
-    content: '\00a9\00a0';
-  }
-  .attribution-span {
+  .attribution {
     font-size: smaller;
     &:before {
       content: '\00a0\007c\00a0';
@@ -39,6 +32,12 @@
     span {
       font-size: inherit;
     }
+    a {
+      color: var(--v-text-color);
+      &:before {
+        content: '\00a9\00a0';
+      }
+    }
   }
 </style>
 

package/src/application/VcsPositionDisplay.vue

@@ -1,13 +1,13 @@
 <template>
   <span
-    class="d-flex gc-1 px-1"
+    class="d-flex gc-2 px-1 h-100 align-center"
     :class="{ 'vcs-position-display': positionDisplayAction.active }"
   >
     <VcsButton
       :tooltip="positionDisplayAction.title"
       :icon="positionDisplayAction.icon"
       @click.stop="positionDisplayAction.callback($event)"
-      :custom-classes="customClasses"
+      :class="{ 'bg-primary': positionDisplayAction.active }"
     >
     </VcsButton>
     <template
@@ -17,17 +17,20 @@
         prefix="x:"
         :model-value="transformedPosition[0]"
         :fraction-digits="fractionDigits"
+        class="pa-0"
       />
       <VcsFormattedNumber
         no-padding
         prefix="y:"
         :model-value="transformedPosition[1]"
         :fraction-digits="fractionDigits"
+        class="pa-0"
       />
       <VcsFormattedNumber
         v-if="transformedPosition[2]"
         prefix="z:"
         :model-value="transformedPosition[2]"
+        class="pa-0"
       />
     </template>
     <v-menu v-if="positionDisplayAction.active">
@@ -36,10 +39,10 @@
           v-bind="props"
           tooltip="footer.positionDisplay.projection"
           icon="mdi-chevron-down"
-          :custom-classes="customClasses"
+          class="bg-primary"
         />
       </template>
-      <v-list selectable density="compact" v-model:selected="selectedEPSG">
+      <v-list selectable v-model:selected="selectedEPSG">
         <v-list-item v-for="(item, i) in items" :key="i" :value="item.value">
           <v-list-item-title>{{ $st(item.text) }}</v-list-item-title>
         </v-list-item>
@@ -49,22 +52,10 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '../styles/shades.scss';
-
   .vcs-position-display {
-    height: 22px;
     background-color: rgb(var(--v-theme-primary));
     span {
-      color: map-get($shades, 'white');
-    }
-
-    :deep(.vcs-formatted-number),
-    :deep(.vcs-formatted-number span) {
-      font-size: unset;
-      line-height: unset;
-    }
-    :deep(.vcs-formatted-number-dense) {
-      line-height: unset;
+      color: rgb(var(--v-theme-on-primary));
     }
   }
 </style>
@@ -89,7 +80,6 @@
 
   /**
    * @description Activates an interaction to display the mouse click or mouse move position, depending on the uiConfig property 'positionDisplayEventType'
-   * @vue-computed {string[]} customClasses - changes button color depending on state
    * @vue-computed {import("ol").Coordinate} transformedPosition - position in selected projection
    * @vue-computed {number} fractionDigits - number of digits depending on selected projection
    */
@@ -174,10 +164,6 @@
         },
       });
 
-      const customClasses = computed(() => {
-        return positionDisplayAction.active ? ['primary'] : [];
-      });
-
       const transformedPosition = computed(() => {
         if (position.value.length > 0) {
           return mercatorProjection.transformTo(
@@ -198,7 +184,6 @@
         fractionDigits,
         selectedEPSG,
         items,
-        customClasses,
       };
     },
   };

package/src/application/VcsPositionDisplay.vue.d.ts

@@ -13,6 +13,5 @@ declare const _default: import("vue").DefineComponent<{}, {
         text: any;
         value: string;
     }[]>;
-    customClasses: import("vue").ComputedRef<string[]>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsSettings.vue

@@ -19,20 +19,18 @@
         {{ $t('settings.displayQuality.title') }}
       </VcsLabel>
     </v-row>
-    <v-row v-if="is3D" no-gutters class="quality-slider-padding">
+    <v-row v-if="is3D" no-gutters>
       <VcsSlider
-        step="1"
+        :step="1"
         v-model="displaySettings"
-        type="number"
-        max="2"
-        min="0"
-        ticks="always"
-        tick-size="5"
-        :tick-labels="[
-          $t('settings.displayQuality.level.low'),
-          $t('settings.displayQuality.level.medium'),
-          $t('settings.displayQuality.level.high'),
-        ]"
+        :max="2"
+        :min="0"
+        show-ticks="always"
+        :ticks="{
+          0: $t('settings.displayQuality.level.low'),
+          1: $t('settings.displayQuality.level.medium'),
+          2: $t('settings.displayQuality.level.high'),
+        }"
       />
     </v-row>
     <v-row no-gutters>
@@ -170,8 +168,3 @@
     },
   };
 </script>
-<style scoped>
-  .quality-slider-padding {
-    padding-bottom: 20px !important;
-  }
-</style>