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

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

@@ -4,6 +4,243 @@ 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
+         */
+        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;
+            } | 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;
+            } | 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;
+            } | undefined;
+        } | 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

@@ -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/VcsNavbar.vue

@@ -14,6 +14,7 @@
               <VcsActionButtonList
                 :actions="mapActions"
                 :overflow-count="3"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -28,6 +29,7 @@
               <VcsActionButtonList
                 :actions="contentActions"
                 :overflow-count="xs ? 3 : 4"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -38,6 +40,7 @@
               />
               <VcsActionButtonList
                 :actions="toolActions"
+                :force-overflow="false"
                 v-if="mdAndUp"
                 button="VcsToolButton"
               />
@@ -62,6 +65,7 @@
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="projectActions"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -186,7 +190,7 @@
         );
 
       const logo = computed(() => {
-        return app.uiConfig.config.value.logo ?? VcsDefaultLogo;
+        return app.uiConfig.config.logo ?? VcsDefaultLogo;
       });
 
       const { searchAction, destroy: destroySearchAction } =

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>

package/src/application/VcsSplashScreen.vue

@@ -9,36 +9,31 @@
     persistent
   >
     <v-card>
-      <div class="px-2 pt-2 pb-1">
-        <v-card-text>
-          <VcsMarked :content="splashScreenText"></VcsMarked>
+      <v-card-text>
+        <VcsMarkdown :content="$st(options.content)" />
+        <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
+          <template #label>
+            <VcsMarkdown
+              :content="$st(options.checkBoxText)"
+              class="marked-checkbox-content"
+            />
+          </template>
+        </VcsCheckbox>
+      </v-card-text>
 
-          <v-row class="mt-2" v-if="options.acceptInput" no-gutters>
-            <v-col class="align-center d-flex">
-              <VcsCheckbox v-model="checkBox"> </VcsCheckbox>
-
-              <VcsLabel>
-                <div
-                  v-html="splashScreenCheckboxText"
-                  class="marked-checkbox-content"
-                ></div>
-              </VcsLabel>
-            </v-col>
-          </v-row>
-        </v-card-text>
-
-        <v-card-actions>
+      <v-card-actions>
+        <v-row no-gutters>
           <v-col class="text-right">
             <VcsFormButton
               color="primary"
               variant="filled"
               @click="exitScreen"
-              :disabled="!checkBox"
+              :disabled="options.acceptInput && !checkBox"
               >{{ $t(options.buttonTitle) }}</VcsFormButton
             >
           </v-col>
-        </v-card-actions>
-      </div>
+        </v-row>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
@@ -52,18 +47,15 @@
     VRow,
     VCol,
   } from 'vuetify/components';
-  import { computed, getCurrentInstance, ref } from 'vue';
-  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import { computed, ref } from 'vue';
   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 VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
   import { useProxiedAtomicModel } from '../components/modelHelper.js';
 
   export default {
     name: 'VcsSplashScreen',
     components: {
-      VcsLabel,
       VDialog,
       VCard,
       VCardText,
@@ -72,7 +64,7 @@
       VcsCheckbox,
       VRow,
       VCol,
-      VcsMarked,
+      VcsMarkdown,
     },
     props: {
       modelValue: {
@@ -87,19 +79,10 @@
     setup(props, { emit }) {
       const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
 
-      const vm = getCurrentInstance().proxy;
-      const splashScreenText = computed(() => {
-        return vm.$st(props.options.content);
-      });
-
-      const splashScreenCheckboxText = computed(() => {
-        const translatedContent = vm.$st(props.options.checkBoxText);
-        return parseAndSanitizeMarkdown(translatedContent);
-      });
-
-      const checkBox = ref(!props.options.acceptInput);
+      const checkBox = ref(false);
       const exitScreen = () => {
         localValue.value = false;
+        checkBox.value = false;
       };
 
       const position = computed(() => ({
@@ -112,8 +95,6 @@
       return {
         localValue,
         exitScreen,
-        splashScreenText,
-        splashScreenCheckboxText,
         checkBox,
         position,
       };

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

@@ -10,8 +10,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     localValue: import("vue").Ref<any>;
     exitScreen: () => void;
-    splashScreenText: import("vue").ComputedRef<any>;
-    splashScreenCheckboxText: import("vue").ComputedRef<string>;
     checkBox: import("vue").Ref<boolean>;
     position: import("vue").ComputedRef<{
         width: any;

package/src/application/VcsTextPage.vue

@@ -1,65 +1,34 @@
 <template>
-  <v-sheet>
-    <v-container>
-      <VcsMarkdown :content="markedHtml"></VcsMarkdown>
-    </v-container>
-  </v-sheet>
+  <v-container>
+    <VcsMarkdown :content="$st(content)"></VcsMarkdown>
+  </v-container>
 </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 {
-    &:hover {
-      color: var(--v-primary-base);
-    }
-    &:before {
-      content: '\00a9';
-    }
+  :deep(a) {
+    color: var(--v-text-color);
   }
 </style>
 
 <script>
-  import { computed, getCurrentInstance } from 'vue';
-  import { VContainer, VSheet } from 'vuetify/components';
+  import { VContainer } from 'vuetify/components';
   import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 
   /**
-   * @description Is a component to render and sanitize a String
-   * @vue-prop {string} content - The markdown content to be rendered. Is translatable and will be sanitized.
+   * @description Container wrapper around VcsMarkdown
+   * @vue-prop {string} content - The markdown content to be rendered.
    */
   export default {
     name: 'VcsTextPage',
-    components: {
-      VSheet,
-      VContainer,
-      VcsMarkdown,
-    },
     props: {
       content: {
         type: String,
-        default: () => '',
+        required: true,
       },
     },
-    setup(props) {
-      const vm = getCurrentInstance().proxy;
-      const markedHtml = computed(() => {
-        return vm.$st(props.content);
-      });
-
-      return {
-        markedHtml,
-      };
+    components: {
+      VContainer,
+      VcsMarkdown,
     },
   };
 </script>