@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

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

@@ -4,6 +4,254 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
+    config: {
+        readonly [x: string]: any;
+        /**
+         * - the company logo to display. this will override any and all css overrides.
+         */
+        readonly logo?: string | undefined;
+        /**
+         * - an alternative logo to display in mobile view
+         */
+        readonly mobileLogo?: string | undefined;
+        /**
+         * - an optional title to display next to the company logo
+         */
+        readonly appTitle?: string | undefined;
+        /**
+         * - an optional primary color to use in all themes, can be overwritten by `vuetifyTheme`
+         */
+        readonly primaryColor?: string | undefined;
+        /**
+         * - an optional flag whether to activate feature info on startup (default active)
+         */
+        readonly startingFeatureInfo?: boolean | undefined;
+        /**
+         * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
+         */
+        readonly positionDisplayEventType?: string | undefined;
+        /**
+         * - an optional URL to a help landing page
+         */
+        readonly helpBaseUrl?: string | undefined;
+        /**
+         * - an option imprint, will show a link in the footer. Default title is 'footer.imprint.title'.
+         */
+        readonly imprint?: {
+            readonly title?: string | undefined;
+            readonly url?: string | {
+                readonly hash: string;
+                readonly host: string;
+                readonly hostname: string;
+                readonly href: string;
+                readonly toString: () => string;
+                readonly origin: string;
+                readonly password: string;
+                readonly pathname: string;
+                readonly port: string;
+                readonly protocol: string;
+                readonly search: string;
+                readonly searchParams: ReadonlyMap<string, string | null>;
+                readonly username: string;
+                readonly toJSON: () => string;
+            } | undefined;
+            readonly content?: string | undefined;
+        } | undefined;
+        /**
+         * - an option dataProtection, will show a link in the footer. Default title is 'footer.dataProtection.title'.
+         */
+        readonly dataProtection?: {
+            readonly title?: string | undefined;
+            readonly url?: string | {
+                readonly hash: string;
+                readonly host: string;
+                readonly hostname: string;
+                readonly href: string;
+                readonly toString: () => string;
+                readonly origin: string;
+                readonly password: string;
+                readonly pathname: string;
+                readonly port: string;
+                readonly protocol: string;
+                readonly search: string;
+                readonly searchParams: ReadonlyMap<string, string | null>;
+                readonly username: string;
+                readonly toJSON: () => string;
+            } | undefined;
+            readonly content?: string | undefined;
+        } | undefined;
+        /**
+         * - an option splashScreen, will show a splash Screen on Map Load.
+         */
+        readonly splashScreen?: {
+            readonly title?: string | undefined;
+            readonly icon?: string | undefined;
+            readonly content?: string | undefined;
+            readonly name?: string | undefined;
+            readonly checkBoxText?: string | undefined;
+            readonly buttonTitle?: string | undefined;
+            readonly menuEntry?: boolean | undefined;
+            readonly acceptInput?: boolean | undefined;
+            readonly position?: {
+                readonly width?: string | undefined;
+                readonly height?: string | undefined;
+                readonly maxHeight?: string | undefined;
+                readonly maxWidth?: string | undefined;
+            } | undefined;
+        } | undefined;
+        /**
+         * - an option customScreen, will show a Custom Menu Point that opens a window with custom content.
+         */
+        readonly customScreen?: {
+            readonly title?: string | undefined;
+            readonly icon?: string | undefined;
+            readonly content?: string | undefined;
+            readonly name?: string | undefined;
+            readonly windowPosition?: {
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly left?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly top?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly right?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly bottom?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly width?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly height?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly maxHeight?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly maxWidth?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly minHeight?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly minWidth?: string | number | undefined;
+            } | undefined;
+        } | undefined;
+        /**
+         * - the favicon to set
+         */
+        readonly favicon?: string | undefined;
+        /**
+         * - the title to display in the tab of the browser
+         */
+        readonly headerTitle?: string | undefined;
+        /**
+         * - an optional flag whether to show the Locator in the map.
+         */
+        readonly showLocator?: boolean | undefined;
+        /**
+         * - can be used to hide the default Header of the map
+         */
+        readonly hideHeader?: boolean | undefined;
+        /**
+         * - can be used to hide the integrated Search bar
+         */
+        readonly hideSearch?: boolean | undefined;
+        /**
+         * - can be used to hide the default Map Buttons
+         */
+        readonly hideMapButtons?: boolean | undefined;
+        /**
+         * - can be used to hide the toolbox
+         */
+        readonly hideToolbox?: boolean | undefined;
+        /**
+         * - can be used to hide the navigation
+         */
+        readonly hideMapNavigation?: boolean | undefined;
+        /**
+         * - can be used to hide the footer
+         */
+        readonly hideFooter?: boolean | undefined;
+        /**
+         * - can be used to hide the myWorkspace button
+         */
+        readonly hideMyWorkspace?: boolean | undefined;
+        /**
+         * - can be used to hide the contentTree
+         */
+        readonly hideContentTree?: boolean | undefined;
+        /**
+         * - can be used to hide the legend
+         */
+        readonly hideLegend?: boolean | undefined;
+        /**
+         * - can be used to hide the settings Window
+         */
+        readonly hideSettings?: boolean | undefined;
+        /**
+         * - can be used to activate the overviewMap on startup
+         */
+        readonly overviewMapActiveOnStartup?: boolean | undefined;
+        /**
+         * - the display quality settings
+         */
+        readonly displayQuality?: {
+            readonly startingQualityLevel?: import("@vcmap/core", { with: { "resolution-mode": "import" } }).DisplayQualityLevel | undefined;
+            readonly startingMobileQualityLevel?: import("@vcmap/core", { with: { "resolution-mode": "import" } }).DisplayQualityLevel | undefined;
+            readonly low?: {
+                readonly sse?: number | undefined;
+                readonly fxaa?: boolean | undefined;
+                readonly fogEnabled?: boolean | undefined;
+                readonly fogDensity?: number | undefined;
+                readonly fogScreenSpaceErrorFactor?: number | undefined;
+                readonly resolutionScale?: number | undefined;
+                readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
+            } | undefined;
+            readonly medium?: {
+                readonly sse?: number | undefined;
+                readonly fxaa?: boolean | undefined;
+                readonly fogEnabled?: boolean | undefined;
+                readonly fogDensity?: number | undefined;
+                readonly fogScreenSpaceErrorFactor?: number | undefined;
+                readonly resolutionScale?: number | undefined;
+                readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
+            } | undefined;
+            readonly high?: {
+                readonly sse?: number | undefined;
+                readonly fxaa?: boolean | undefined;
+                readonly fogEnabled?: boolean | undefined;
+                readonly fogDensity?: number | undefined;
+                readonly fogScreenSpaceErrorFactor?: number | undefined;
+                readonly resolutionScale?: number | undefined;
+                readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
+            } | undefined;
+        } | undefined;
+        /**
+         * - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
+         */
+        readonly vuetifyTheme?: any;
+        /**
+         * - open the legend window, if new layer has a config
+         */
+        readonly openLegendOnAdd?: boolean | undefined;
+    };
     xs: import("vue").Ref<boolean>;
     mobileLogo: import("vue").ComputedRef<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/src/application/VcsMainMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vcs-main-map">
     <VcsMap :map-id="mapId" />
     <MapNavigation v-if="showMapNavigation" />
   </div>
@@ -8,27 +8,27 @@
 <style lang="scss" scoped></style>
 
 <script>
-  import { inject, onMounted, onUnmounted, ref } from 'vue';
+  import { inject, onMounted, onUnmounted, ref, computed } from 'vue';
   import { v4 as uuid } from 'uuid';
   import MapNavigation from '../navigation/MapNavigation.vue';
   import VcsMap from './VcsMap.vue';
 
   export function setupMapNavigation(app) {
-    const showMapNavigation = ref(app.maps.size < 1);
+    const mapSize = ref(app.maps.size);
 
     const listeners = [
       app.maps.added.addEventListener(() => {
-        showMapNavigation.value = true;
+        mapSize.value = app.maps.size;
       }),
       app.maps.removed.addEventListener(() => {
-        if (app.maps.size < 1) {
-          showMapNavigation.value = false;
-        }
+        mapSize.value = app.maps.size;
       }),
     ];
 
     return {
-      showMapNavigation,
+      showMapNavigation: computed(() => {
+        return mapSize.value > 0 && !app.uiConfig.config.hideMapNavigation;
+      }),
       destroy: () => {
         listeners.forEach((cb) => cb());
       },

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

@@ -1,9 +1,9 @@
 export function setupMapNavigation(app: any): {
-    showMapNavigation: import("vue").Ref<boolean>;
+    showMapNavigation: import("vue").ComputedRef<boolean>;
     destroy: () => void;
 };
 declare const _default: import("vue").DefineComponent<{}, {
     mapId: string;
-    showMapNavigation: import("vue").Ref<boolean>;
+    showMapNavigation: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsMap.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    class="vcs-map"
     :id="mapId"
     @click.right.stop="
       (e) => {

package/src/application/VcsNavbar.vue

@@ -3,7 +3,8 @@
     absolute
     :density="density"
     elevation="0"
-    class="px-4"
+    class="px-4 vcs-navbar"
+    :height="toolbarHeight"
     :style="xs ? { bottom: 0 } : { top: 0 }"
   >
     <v-container fluid class="pa-0">
@@ -14,6 +15,7 @@
               <VcsActionButtonList
                 :actions="mapActions"
                 :overflow-count="3"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -28,6 +30,7 @@
               <VcsActionButtonList
                 :actions="contentActions"
                 :overflow-count="xs ? 3 : 4"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -38,6 +41,7 @@
               />
               <VcsActionButtonList
                 :actions="toolActions"
+                :force-overflow="false"
                 v-if="mdAndUp"
                 button="VcsToolButton"
               />
@@ -62,6 +66,7 @@
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="projectActions"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -120,7 +125,7 @@
 
 <style lang="scss" scoped>
   .logo {
-    max-height: 36px;
+    max-height: calc(var(--v-vcs-font-size) * 3 - 3px);
     margin: 0 auto;
   }
   .v-toolbar.v-toolbar--bottom {
@@ -150,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.
@@ -186,7 +192,7 @@
         );
 
       const logo = computed(() => {
-        return app.uiConfig.config.value.logo ?? VcsDefaultLogo;
+        return app.uiConfig.config.logo ?? VcsDefaultLogo;
       });
 
       const { searchAction, destroy: destroySearchAction } =
@@ -202,6 +208,11 @@
         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),
@@ -215,6 +226,7 @@
         xs,
         density,
         mdAndUp,
+        toolbarHeight,
       };
     },
   };

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

@@ -42,7 +42,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     config: any;
     logo: import("vue").ComputedRef<any>;
     xs: import("vue").Ref<boolean>;
-    density: import("vue").ComputedRef<"comfortable" | "compact">;
+    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 gc-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
@@ -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;
+  .active {
     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

@@ -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>
@@ -170,8 +168,3 @@
     },
   };
 </script>
-<style scoped>
-  .quality-slider-padding {
-    padding-bottom: 20px !important;
-  }
-</style>