@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/application/VcsNavbar.vue

@@ -1,11 +1,11 @@
 <template>
   <v-toolbar
     absolute
-    dense
+    :density="density"
     elevation="0"
-    :height="$vuetify.breakpoint.xs ? '56px' : '48px'"
-    :bottom="$vuetify.breakpoint.xs ? 'bottom' : undefined"
-    width="100%"
+    class="px-4 vcs-navbar"
+    :height="toolbarHeight"
+    :style="xs ? { bottom: 0 } : { top: 0 }"
   >
     <v-container fluid class="pa-0">
       <v-row no-gutters class="align-center">
@@ -15,6 +15,7 @@
               <VcsActionButtonList
                 :actions="mapActions"
                 :overflow-count="3"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -28,18 +29,20 @@
               />
               <VcsActionButtonList
                 :actions="contentActions"
-                :overflow-count="$vuetify.breakpoint.xs ? 3 : 4"
+                :overflow-count="xs ? 3 : 4"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
                 v-if="contentActions.length > 0 && toolActions.length > 0"
-                class="mx-2 base lighten-2"
+                class="mx-2"
                 vertical
                 inset
               />
               <VcsActionButtonList
                 :actions="toolActions"
-                v-if="$vuetify.breakpoint.mdAndUp"
+                :force-overflow="false"
+                v-if="mdAndUp"
                 button="VcsToolButton"
               />
             </div>
@@ -47,22 +50,23 @@
         </v-col>
         <v-col class="d-flex justify-center">
           <div class="d-flex align-center">
-            <template v-if="!$vuetify.breakpoint.xs">
+            <template v-if="!xs">
               <img class="logo" :src="logo" draggable="false" alt="Logo" />
             </template>
             <div
-              v-if="$vuetify.breakpoint.mdAndUp && config.appTitle"
+              v-if="mdAndUp && config.appTitle"
               class="ml-4 text-h6 font-weight-bold"
             >
-              {{ $t(config.appTitle) }}
+              {{ $st(config.appTitle) }}
             </div>
           </div>
         </v-col>
         <v-col class="align-content-end d-flex justify-end">
-          <v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
+          <v-toolbar-items v-if="mdAndUp">
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="projectActions"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -71,47 +75,46 @@
                 inset
                 class="mx-2"
               />
-
-              <v-menu offset-y v-if="shareActions.length > 0">
-                <template #activator="{ on, attrs }">
-                  <VcsToolButton
-                    v-bind="attrs"
-                    v-on="on"
-                    tooltip="navbar.share.tooltip"
-                    icon="$vcsShare"
+              <div class="d-flex gc-2">
+                <v-menu v-if="shareActions.length > 0">
+                  <template #activator="{ props }">
+                    <VcsToolButton
+                      v-bind="props"
+                      tooltip="navbar.share.tooltip"
+                      icon="$vcsShare"
+                    />
+                  </template>
+                  <VcsActionList
+                    :actions="shareActions"
+                    tooltip-position="left"
+                    :show-icon="true"
                   />
-                </template>
-                <VcsActionList
-                  :actions="shareActions"
-                  tooltip-position="left"
-                  :show-icon="true"
+                </v-menu>
+                <VcsToolButton
+                  class="d-flex"
+                  v-if="searchAction"
+                  :key="searchAction.name"
+                  :tooltip="searchAction.title"
+                  :icon="searchAction.icon"
+                  :active="searchAction.active"
+                  @click.stop="searchAction.callback($event)"
+                  v-bind="{ ...$attrs }"
                 />
-              </v-menu>
-              <VcsToolButton
-                class="d-flex"
-                v-if="searchAction"
-                :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">
-                <template #activator="{ on, attrs }">
-                  <VcsToolButton
-                    v-bind="attrs"
-                    v-on="on"
-                    tooltip="navbar.menu.tooltip"
-                    icon="$vcsMenu"
+                <v-menu v-if="menuActions.length > 0">
+                  <template #activator="{ props }">
+                    <VcsToolButton
+                      v-bind="props"
+                      tooltip="navbar.menu.tooltip"
+                      icon="$vcsMenu"
+                    />
+                  </template>
+                  <VcsActionList
+                    :actions="menuActions"
+                    tooltip-position="left"
+                    :show-icon="true"
                   />
-                </template>
-                <VcsActionList
-                  :actions="menuActions"
-                  tooltip-position="left"
-                  :show-icon="true"
-                />
-              </v-menu>
+                </v-menu>
+              </div>
             </div>
           </v-toolbar-items>
         </v-col>
@@ -121,11 +124,8 @@
 </template>
 
 <style lang="scss" scoped>
-  .v-toolbar__items > div {
-    gap: 8px;
-  }
   .logo {
-    max-height: 36px;
+    max-height: calc(var(--v-vcs-font-size) * 3 - 3px);
     margin: 0 auto;
   }
   .v-toolbar.v-toolbar--bottom {
@@ -135,7 +135,8 @@
 </style>
 
 <script>
-  import { inject, ref, computed, onUnmounted } from 'vue';
+  import { inject, computed, onUnmounted } from 'vue';
+  import { useDisplay } from 'vuetify';
   import {
     VCol,
     VContainer,
@@ -144,7 +145,7 @@
     VRow,
     VToolbar,
     VToolbarItems,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import {
     ButtonLocation,
     getActionsByLocation,
@@ -154,6 +155,7 @@
   import VcsToolButton from '../components/buttons/VcsToolButton.vue';
   import { createSearchButtonAction } from '../actions/actionHelper.js';
   import VcsDefaultLogo from '../logo.svg';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description The menu bar of a VcsMap application.
@@ -177,9 +179,8 @@
     setup() {
       const app = inject('vcsApp');
 
-      const navbarButtonIds = ref(app.navbarManager.componentIds);
       const buttonComponents = computed(() =>
-        navbarButtonIds.value.map((id) => app.navbarManager.get(id)),
+        app.navbarManager.componentIds.map((id) => app.navbarManager.get(id)),
       );
       const getActions = (location) =>
         computed(() =>
@@ -191,7 +192,7 @@
         );
 
       const logo = computed(() => {
-        return app.uiConfig.config.value.logo ?? VcsDefaultLogo;
+        return app.uiConfig.config.logo ?? VcsDefaultLogo;
       });
 
       const { searchAction, destroy: destroySearchAction } =
@@ -201,6 +202,17 @@
         destroySearchAction();
       });
 
+      const { xs, mdAndUp } = useDisplay();
+
+      const density = computed(() => {
+        return xs.value ? 'comfortable' : 'compact';
+      });
+
+      const fontSize = useFontSize();
+      const toolbarHeight = computed(() => {
+        return fontSize.value * 3 + 8 + 16;
+      });
+
       return {
         mapActions: getActions(ButtonLocation.MAP),
         contentActions: getActions(ButtonLocation.CONTENT),
@@ -211,6 +223,10 @@
         menuActions: getActions(ButtonLocation.MENU),
         config: app.uiConfig.config,
         logo,
+        xs,
+        density,
+        mdAndUp,
+        toolbarHeight,
       };
     },
   };

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

@@ -1,9 +1,9 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    mapActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
-    contentActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
-    toolActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
-    projectActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
-    shareActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
+    mapActions: import("vue").ComputedRef<import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[]>;
+    contentActions: import("vue").ComputedRef<import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[]>;
+    toolActions: import("vue").ComputedRef<import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[]>;
+    projectActions: import("vue").ComputedRef<import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[]>;
+    shareActions: import("vue").ComputedRef<import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[]>;
     searchAction: import("vue").Ref<{
         /**
          * - reactive and translatable name rendered in overflow
@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         /**
          * - callback function is triggered when the button is clicked
          */
-        callback: import("../actions/actionHelper.js").ActionCallback;
+        callback: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionCallback;
         /**
          * - optional state of button. If active, button is rendered in primary color
          */
@@ -38,8 +38,12 @@ declare const _default: import("vue").DefineComponent<{}, {
          */
         disabled?: boolean | undefined;
     } | null>;
-    menuActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
+    menuActions: import("vue").ComputedRef<import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[]>;
     config: any;
     logo: import("vue").ComputedRef<any>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    xs: import("vue").Ref<boolean>;
+    density: import("vue").ComputedRef<"compact" | "comfortable">;
+    mdAndUp: import("vue").Ref<boolean>;
+    toolbarHeight: import("vue").ComputedRef<number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsPositionDisplay.vue

@@ -1,13 +1,13 @@
 <template>
   <span
-    class="d-flex gap-1 px-1"
-    :class="{ 'vcs-position-display': positionDisplayAction.active }"
+    class="d-flex gc-2 px-1 h-100 align-center vcs-position-display"
+    :class="{ active: positionDisplayAction.active }"
   >
     <VcsButton
       :tooltip="positionDisplayAction.title"
       :icon="positionDisplayAction.icon"
       @click.stop="positionDisplayAction.callback($event)"
-      :custom-classes="customClasses"
+      :class="{ 'bg-primary': positionDisplayAction.active }"
     >
     </VcsButton>
     <template
@@ -15,92 +15,71 @@
     >
       <VcsFormattedNumber
         prefix="x:"
-        :value="transformedPosition[0]"
+        :model-value="transformedPosition[0]"
         :fraction-digits="fractionDigits"
+        class="pa-0"
       />
       <VcsFormattedNumber
         no-padding
         prefix="y:"
-        :value="transformedPosition[1]"
+        :model-value="transformedPosition[1]"
         :fraction-digits="fractionDigits"
+        class="pa-0"
       />
       <VcsFormattedNumber
         v-if="transformedPosition[2]"
         prefix="z:"
-        :value="transformedPosition[2]"
+        :model-value="transformedPosition[2]"
+        class="pa-0"
       />
     </template>
-    <v-menu
-      :nudge-top="46"
-      :nudge-left="80"
-      v-if="positionDisplayAction.active"
-    >
-      <template #activator="{ on, attrs }">
+    <v-menu v-if="positionDisplayAction.active">
+      <template #activator="{ props }">
         <VcsButton
-          v-bind="attrs"
-          v-on="on"
+          v-bind="props"
           tooltip="footer.positionDisplay.projection"
           icon="mdi-chevron-down"
-          :custom-classes="customClasses"
+          class="bg-primary"
         />
       </template>
-      <v-list dense>
-        <v-list-item-group v-model="selectedEPSG" color="primary" mandatory>
-          <v-list-item v-for="(item, i) in items" :key="i" :value="item.value">
-            <v-list-item-content>
-              <v-list-item-title>{{ $t(item.text) }}</v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list-item-group>
+      <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>
       </v-list>
     </v-menu>
   </span>
 </template>
 
 <style lang="scss" scoped>
-  @import '../styles/shades.scss';
-
-  .vcs-position-display {
-    height: 22px;
-    background-color: var(--v-primary-base);
+  .active {
+    background-color: rgb(var(--v-theme-primary));
     span {
-      color: map-get($shades, 'white');
-    }
-
-    ::v-deep {
-      .vcs-formatted-number,
-      .vcs-formatted-number span {
-        font-size: unset;
-        line-height: unset;
-      }
-      .vcs-formatted-number-dense {
-        line-height: unset;
-      }
+      color: rgb(var(--v-theme-on-primary));
     }
   }
 </style>
 <script>
-  import { computed, inject, onUnmounted, reactive, ref } from 'vue';
+  import {
+    computed,
+    inject,
+    onUnmounted,
+    reactive,
+    ref,
+    shallowRef,
+  } from 'vue';
   import {
     getDefaultProjection,
     mercatorProjection,
     wgs84Projection,
   } from '@vcmap/core';
-  import {
-    VMenu,
-    VList,
-    VListItemGroup,
-    VListItem,
-    VListItemContent,
-    VListItemTitle,
-  } from 'vuetify/lib';
+  import { VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import VcsFormattedNumber from '../components/form-output/VcsFormattedNumber.vue';
   import PositionDisplayInteraction from './positionDisplayInteraction.js';
 
   /**
    * @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
    */
@@ -111,9 +90,7 @@
       VcsButton,
       VMenu,
       VList,
-      VListItemGroup,
       VListItem,
-      VListItemContent,
       VListItemTitle,
     },
     setup() {
@@ -121,7 +98,7 @@
       const move =
         app.uiConfig.getByKey('positionDisplayEventType')?.value === 'move';
 
-      const position = ref([]);
+      const position = shallowRef([]);
 
       const interaction = new PositionDisplayInteraction({ position, move });
       app.maps.eventHandler.addPersistentInteraction(interaction);
@@ -132,7 +109,7 @@
         [defaultProjection.epsg]: defaultProjection,
         [wgs84Projection.epsg]: wgs84Projection,
       };
-      const selectedEPSG = ref(defaultProjection.epsg);
+      const selectedEPSG = ref([]);
 
       function getProjectionItems() {
         return Object.keys(projections).map((epsg) => {
@@ -165,7 +142,7 @@
         app.moduleAdded.addEventListener(() => {
           const newDefaultProjection = getDefaultProjection();
           projections[newDefaultProjection.epsg] = newDefaultProjection;
-          selectedEPSG.value = newDefaultProjection.epsg;
+          selectedEPSG.value.splice(0, Infinity, newDefaultProjection.epsg);
           items.value = getProjectionItems();
           setMove();
         }),
@@ -187,14 +164,10 @@
         },
       });
 
-      const customClasses = computed(() => {
-        return positionDisplayAction.active ? ['primary'] : [];
-      });
-
       const transformedPosition = computed(() => {
         if (position.value.length > 0) {
           return mercatorProjection.transformTo(
-            projections[selectedEPSG.value],
+            projections[selectedEPSG.value[0]],
             position.value,
           );
         }
@@ -202,7 +175,7 @@
       });
 
       const fractionDigits = computed(() => {
-        return selectedEPSG.value === wgs84Projection.epsg ? 6 : 2;
+        return selectedEPSG.value[0] === wgs84Projection.epsg ? 6 : 2;
       });
 
       return {
@@ -211,7 +184,6 @@
         fractionDigits,
         selectedEPSG,
         items,
-        customClasses,
       };
     },
   };

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

@@ -6,13 +6,12 @@ declare const _default: import("vue").DefineComponent<{}, {
         active: boolean;
         callback: () => void;
     };
-    transformedPosition: import("vue").ComputedRef<import("ol/coordinate.js").Coordinate>;
+    transformedPosition: import("vue").ComputedRef<import("ol/coordinate.js", { with: { "resolution-mode": "import" } }).Coordinate>;
     fractionDigits: import("vue").ComputedRef<2 | 6>;
-    selectedEPSG: import("vue").Ref<string>;
+    selectedEPSG: import("vue").Ref<never[]>;
     items: import("vue").Ref<{
         text: any;
         value: string;
     }[]>;
-    customClasses: import("vue").ComputedRef<string[]>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="px-1 py-0">
+  <v-container class="px-1 py-0 vcs-settings">
     <v-row no-gutters>
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">
@@ -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>
@@ -43,13 +41,12 @@
       </v-col>
       <v-col>
         <VcsRadio
-          dense
           :items="[
             { label: 'settings.theme.light', value: false },
             { label: 'settings.theme.dark', value: true },
           ]"
-          v-model="$vuetify.theme.dark"
-          row
+          v-model="themeMode"
+          inline
         />
       </v-col>
     </v-row>
@@ -57,9 +54,10 @@
 </template>
 
 <script>
-  import { ref, inject, onUnmounted, getCurrentInstance, computed } from 'vue';
-  import { VCol, VContainer, VRow } from 'vuetify/lib';
   import { CesiumMap, DisplayQualityLevel } from '@vcmap/core';
+  import { ref, inject, onUnmounted, computed } from 'vue';
+  import { useTheme } from 'vuetify';
+  import { VCol, VContainer, VRow } from 'vuetify/components';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
   import VcsRadio from '../components/form-inputs-controls/VcsRadio.vue';
@@ -91,9 +89,10 @@
           app.locale = value;
         },
       });
-      const vm = getCurrentInstance().proxy;
       const setupI18n = () => {
-        languages.value = [...vm.$i18n.availableLocales];
+        languages.value = [...app.vueI18n.availableLocales].filter((lang) => {
+          return Object.keys(app.vueI18n.getLocaleMessage(lang)).length > 0;
+        });
         if (!languages.value.includes(localLanguage.value)) {
           localLanguage.value = languages.value[0];
         }
@@ -141,6 +140,16 @@
         app.maps.mapActivated.addEventListener(updateIs3D);
       updateIs3D();
 
+      const theme = useTheme();
+      const themeMode = computed({
+        get() {
+          return theme.global.current.value.dark;
+        },
+        set(value) {
+          theme.global.name.value = value ? 'dark' : 'light';
+        },
+      });
+
       onUnmounted(() => {
         localeChangedListener();
         addedListener();
@@ -150,6 +159,7 @@
       });
 
       return {
+        themeMode,
         language,
         languages,
         displaySettings,
@@ -158,8 +168,3 @@
     },
   };
 </script>
-<style scoped>
-  .quality-slider-padding {
-    padding-bottom: 20px !important;
-  }
-</style>

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

@@ -1,7 +1,8 @@
 declare const _default: import("vue").DefineComponent<{}, {
+    themeMode: import("vue").WritableComputedRef<boolean>;
     language: import("vue").WritableComputedRef<string>;
     languages: import("vue").Ref<never[]>;
     displaySettings: import("vue").WritableComputedRef<any>;
     is3D: import("vue").Ref<boolean>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;