@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/src/application/VcsContainer.vue

@@ -1,11 +1,12 @@
 <template>
   <v-container
     class="vcs-container pa-0"
-    :class="{ 'vcs-container-xs': $vuetify.breakpoint.xs }"
+    :class="{ 'vcs-container-xs': xs }"
     fluid
     absolute
+    style="background: #1b5e20"
   >
-    <template v-if="$vuetify.breakpoint.xs">
+    <template v-if="xs">
       <img
         v-if="mobileLogo"
         :src="mobileLogo"
@@ -14,7 +15,7 @@
         class="mobile-logo"
       />
     </template>
-    <VcsButton
+    <!--VcsButton
       v-if="!$vuetify.breakpoint.smAndUp && $vuetify.breakpoint.mobile"
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
@@ -22,7 +23,7 @@
       :active="attributionAction.active"
       @click.stop="attributionAction.callback($event)"
       class="z-index-1 mobile-attribution-btn"
-    />
+    /-->
     <PanelManagerComponent />
     <ToolboxManagerComponent />
     <WindowManagerComponent />
@@ -58,15 +59,18 @@
     right: 2px;
     bottom: 36px;
   }
+  .z-index-1 {
+    z-index: 1;
+  }
 </style>
 
 <script>
   import { computed, inject } from 'vue';
-  import { VContainer } from 'vuetify/lib';
+  import { useDisplay } from 'vuetify';
+  import { VContainer } from 'vuetify/components';
   import PanelManagerComponent from '../manager/panel/PanelManagerComponent.vue';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
   import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
-  import VcsButton from '../components/buttons/VcsButton.vue';
   import NotifierComponent from '../notifier/NotifierComponent.vue';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
 
@@ -76,7 +80,6 @@
    */
   export default {
     components: {
-      VcsButton,
       PanelManagerComponent,
       WindowManagerComponent,
       ToolboxManagerComponent,
@@ -92,7 +95,10 @@
     setup() {
       const app = inject('vcsApp');
 
+      const { xs } = useDisplay();
+
       return {
+        xs,
         mobileLogo: computed(
           () =>
             app.uiConfig.config.value.mobileLogo ??

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

@@ -4,11 +4,12 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
+    xs: import("vue").Ref<boolean>;
     mobileLogo: 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<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attributionAction: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/application/VcsCustomScreen.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-  import { VCard, VCardText } from 'vuetify/lib';
+  import { VCard, VCardText } from 'vuetify/components';
 
   import { computed, getCurrentInstance } from 'vue';
   import { parseAndSanitizeMarkdown } from './markdownHelper.js';

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

@@ -6,10 +6,10 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     dialog: boolean;
     customScreenText: 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<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     content: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/application/VcsMainMap.vue

@@ -41,7 +41,10 @@
    */
   export default {
     name: 'VcsMainMap',
-    components: { MapNavigation, VcsMap },
+    components: {
+      MapNavigation,
+      VcsMap,
+    },
     setup() {
       const app = inject('vcsApp');
       const id = uuid();

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

@@ -5,5 +5,5 @@ export function setupMapNavigation(app: any): {
 declare const _default: import("vue").DefineComponent<{}, {
     mapId: string;
     showMapNavigation: 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;

package/src/application/VcsMap.vue

@@ -10,31 +10,29 @@
 </template>
 
 <style lang="scss" scoped>
-  ::v-deep {
-    .mapElement {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      overflow: hidden; /* Fix for iFrame content */
-    }
+  :deep(.mapElement) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden; /* Fix for iFrame content */
+  }
 
-    .overviewMapElement {
-      position: absolute;
-      top: 3px;
-      bottom: 3px;
-      left: 3px;
-      right: 3px;
-      overflow: hidden; /* Fix for iFrame content */
-    }
+  :deep(.overviewMapElement) {
+    position: absolute;
+    top: 3px;
+    bottom: 3px;
+    left: 3px;
+    right: 3px;
+    overflow: hidden; /* Fix for iFrame content */
+  }
 
-    .cesium-widget,
-    .cesium-widget canvas {
-      width: 100%;
-      height: 100%;
-      touch-action: none;
-    }
+  :deep(.cesium-widget),
+  :deep(.cesium-widget canvas) {
+    width: 100%;
+    height: 100%;
+    touch-action: none;
   }
 </style>
 

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

@@ -3,10 +3,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     mapId: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/application/VcsNavbar.vue

@@ -1,11 +1,10 @@
 <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"
+    :style="xs ? { bottom: 0 } : { top: 0 }"
   >
     <v-container fluid class="pa-0">
       <v-row no-gutters class="align-center">
@@ -28,18 +27,18 @@
               />
               <VcsActionButtonList
                 :actions="contentActions"
-                :overflow-count="$vuetify.breakpoint.xs ? 3 : 4"
+                :overflow-count="xs ? 3 : 4"
                 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"
+                v-if="mdAndUp"
                 button="VcsToolButton"
               />
             </div>
@@ -47,19 +46,19 @@
         </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"
@@ -71,47 +70,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,9 +119,6 @@
 </template>
 
 <style lang="scss" scoped>
-  .v-toolbar__items > div {
-    gap: 8px;
-  }
   .logo {
     max-height: 36px;
     margin: 0 auto;
@@ -135,7 +130,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 +140,7 @@
     VRow,
     VToolbar,
     VToolbarItems,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import {
     ButtonLocation,
     getActionsByLocation,
@@ -177,9 +173,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(() =>
@@ -201,6 +196,12 @@
         destroySearchAction();
       });
 
+      const { xs, mdAndUp } = useDisplay();
+
+      const density = computed(() => {
+        return xs.value ? 'comfortable' : 'compact';
+      });
+
       return {
         mapActions: getActions(ButtonLocation.MAP),
         contentActions: getActions(ButtonLocation.CONTENT),
@@ -211,6 +212,9 @@
         menuActions: getActions(ButtonLocation.MENU),
         config: app.uiConfig.config,
         logo,
+        xs,
+        density,
+        mdAndUp,
       };
     },
   };

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,11 @@ 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<"comfortable" | "compact">;
+    mdAndUp: import("vue").Ref<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsPositionDisplay.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="d-flex gap-1 px-1"
+    class="d-flex gc-1 px-1"
     :class="{ 'vcs-position-display': positionDisplayAction.active }"
   >
     <VcsButton
@@ -15,43 +15,34 @@
     >
       <VcsFormattedNumber
         prefix="x:"
-        :value="transformedPosition[0]"
+        :model-value="transformedPosition[0]"
         :fraction-digits="fractionDigits"
       />
       <VcsFormattedNumber
         no-padding
         prefix="y:"
-        :value="transformedPosition[1]"
+        :model-value="transformedPosition[1]"
         :fraction-digits="fractionDigits"
       />
       <VcsFormattedNumber
         v-if="transformedPosition[2]"
         prefix="z:"
-        :value="transformedPosition[2]"
+        :model-value="transformedPosition[2]"
       />
     </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"
         />
       </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 density="compact" 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>
@@ -62,38 +53,36 @@
 
   .vcs-position-display {
     height: 22px;
-    background-color: var(--v-primary-base);
+    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;
-      }
+    :deep(.vcs-formatted-number),
+    :deep(.vcs-formatted-number span) {
+      font-size: unset;
+      line-height: unset;
+    }
+    :deep(.vcs-formatted-number-dense) {
+      line-height: unset;
     }
   }
 </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';
@@ -111,9 +100,7 @@
       VcsButton,
       VMenu,
       VList,
-      VListItemGroup,
       VListItem,
-      VListItemContent,
       VListItemTitle,
     },
     setup() {
@@ -121,7 +108,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 +119,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 +152,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();
         }),
@@ -194,7 +181,7 @@
       const transformedPosition = computed(() => {
         if (position.value.length > 0) {
           return mercatorProjection.transformTo(
-            projections[selectedEPSG.value],
+            projections[selectedEPSG.value[0]],
             position.value,
           );
         }
@@ -202,7 +189,7 @@
       });
 
       const fractionDigits = computed(() => {
-        return selectedEPSG.value === wgs84Projection.epsg ? 6 : 2;
+        return selectedEPSG.value[0] === wgs84Projection.epsg ? 6 : 2;
       });
 
       return {

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

@@ -6,13 +6,13 @@ 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;