@vcmap/ui 5.3.3 → 6.0.0-rc.2

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<"compact" | "comfortable">;
+    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;

package/src/application/VcsSettings.vue

@@ -43,13 +43,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 +56,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 +91,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 +142,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 +161,7 @@
       });
 
       return {
+        themeMode,
         language,
         languages,
         displaySettings,

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;

package/src/application/VcsSplashScreen.vue

@@ -11,16 +11,11 @@
     <v-card>
       <div class="px-2 pt-2 pb-1">
         <v-card-text>
-          <div v-html="splashScreenText"></div>
+          <VcsMarked :content="splashScreenText"></VcsMarked>
 
           <v-row class="mt-2" v-if="options.acceptInput" no-gutters>
             <v-col class="align-center d-flex">
-              <VcsCheckbox
-                id="checkbox_splashScreen"
-                style="margin-bottom: 16px"
-                v-model="checkBox"
-              >
-              </VcsCheckbox>
+              <VcsCheckbox v-model="checkBox"> </VcsCheckbox>
 
               <VcsLabel>
                 <div
@@ -56,12 +51,14 @@
     VCardActions,
     VRow,
     VCol,
-  } from 'vuetify/lib';
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  } from 'vuetify/components';
+  import { computed, getCurrentInstance, ref } from 'vue';
   import { parseAndSanitizeMarkdown } from './markdownHelper.js';
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';
   import VcsCheckbox from '../components/form-inputs-controls/VcsCheckbox.vue';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
+  import VcsMarked from '../components/form-output/VcsMarkdown.vue';
+  import { useProxiedAtomicModel } from '../components/modelHelper.js';
 
   export default {
     name: 'VcsSplashScreen',
@@ -75,9 +72,10 @@
       VcsCheckbox,
       VRow,
       VCol,
+      VcsMarked,
     },
     props: {
-      value: {
+      modelValue: {
         type: Boolean,
         default: false,
       },
@@ -87,28 +85,21 @@
       },
     },
     setup(props, { emit }) {
-      const localValue = ref(props.value);
-      watch(
-        () => props.value,
-        (newValue) => {
-          localValue.value = newValue;
-        },
-      );
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
+
       const vm = getCurrentInstance().proxy;
       const splashScreenText = computed(() => {
-        const translatedContent = vm.$t(props.options.content);
-        return parseAndSanitizeMarkdown(translatedContent);
+        return vm.$st(props.options.content);
       });
 
       const splashScreenCheckboxText = computed(() => {
-        const translatedContent = vm.$t(props.options.checkBoxText);
+        const translatedContent = vm.$st(props.options.checkBoxText);
         return parseAndSanitizeMarkdown(translatedContent);
       });
 
       const checkBox = ref(!props.options.acceptInput);
       const exitScreen = () => {
         localValue.value = false;
-        emit('input', localValue.value);
       };
 
       const position = computed(() => ({
@@ -131,7 +122,12 @@
 </script>
 
 <style scoped lang="scss">
-  .marked-checkbox-content ::v-deep p {
-    margin-bottom: 0;
+  .marked-checkbox-content {
+    :deep(p) {
+      margin-bottom: 0;
+    }
+  }
+  .v-input {
+    margin-left: -5px !important;
   }
 </style>

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

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -8,9 +8,9 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
-    localValue: any;
+    localValue: import("vue").Ref<any>;
     exitScreen: () => void;
-    splashScreenText: import("vue").ComputedRef<string>;
+    splashScreenText: import("vue").ComputedRef<any>;
     splashScreenCheckboxText: import("vue").ComputedRef<string>;
     checkBox: import("vue").Ref<boolean>;
     position: import("vue").ComputedRef<{
@@ -19,8 +19,8 @@ declare const _default: import("vue").DefineComponent<{
         maxWidth: any;
         maxHeight: any;
     }>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -29,6 +29,6 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }>>, {
-    value: boolean;
-}>;
+    modelValue: boolean;
+}, {}>;
 export default _default;