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

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

@@ -1,3 +1,11 @@
+/**
+ * This helper checks the uiConfig and depending on the value will setup/teardown the providedSetupFunction
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {(import("../vcsUiApp.js").default) => () => void} setupFunction
+ * @param {string} configOption parameter name of a uiConfig parameter, for example `app.uiConfig.config.hideContentTree`
+ * @returns {function():void} - cleanup function
+ */
+export function setupUIConfigDependency(app: import("../vcsUiApp.js").default, setupFunction: any, configOption: string): () => void;
 /**
  * You should call this function in the component providing the vcsUiApp to your
  * application in the components mounted hook. This will call VcsAppMounted on all plugins in the app
@@ -10,6 +18,7 @@ export function setupPluginMountedListeners(app: import("../vcsUiApp.js").defaul
 /**
  * This helper function will add a map action button based on the default icons
  * to the apps NavbarManager. Furthermore, all maps on the app are synced for adding and removing.
+ * The buttons can be removed with the uiConfig hideMapButtons
  * @param {import("../vcsUiApp.js").default} app
  * @returns {function():void}
  */
@@ -65,30 +74,315 @@ export function setupAttributions(app: import("../vcsUiApp.js").default): {
     attributionAction: import("../actions/actionHelper.js").VcsAction;
     destroyAttributions: () => void;
 };
+/**
+ * @type {string}
+ */
+export const categoryManagerWindowId: string;
 declare const _default: import("vue").DefineComponent<{
     appId: {
         type: StringConstructor;
         required: true;
     };
 }, {
-    smAndUp: import("vue").Ref<boolean>;
+    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;
+    };
+    showFooter: import("vue").ComputedRef<boolean>;
+    footerHeight: import("vue").ComputedRef<number>;
     mobileLogo: import("vue").ComputedRef<any>;
     imprint: import("vue").ComputedRef<{
         title: string;
+        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;
+        content?: string | undefined;
         tooltip: string;
     } | undefined>;
     dataProtection: import("vue").ComputedRef<{
         title: string;
+        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;
+        content?: string | undefined;
         tooltip: string;
     } | undefined>;
     splashScreenRef: import("vue").Ref<boolean>;
     splashScreen: import("vue").ComputedRef<{
         title: string;
-        tooltip: string;
+        icon?: string | undefined;
+        content?: string | undefined;
+        name?: string | undefined;
+        checkBoxText?: string | undefined;
+        buttonTitle?: string | undefined;
+        menuEntry?: boolean | undefined;
+        acceptInput?: boolean | undefined;
         position: {
-            width: string;
-            height: string;
+            readonly width?: string | undefined;
+            readonly height?: string | undefined;
+            readonly maxHeight?: string | undefined;
+            readonly maxWidth?: string | undefined;
         };
+        tooltip: string;
     } | undefined>;
     attributionEntries: import("vue").Ref<import("./attributionsHelper.js", { with: { "resolution-mode": "import" } }).AttributionEntry[]>;
     attributionAction: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction;

package/src/application/VcsAttributions.vue

@@ -25,21 +25,10 @@
 </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 {
+    color: var(--v-theme-surface);
     &:hover {
-      color: var(--v-primary-base);
+      color: rgb(var(--v-theme-primary));
     }
     &:before {
       content: '\00a9';

package/src/application/VcsAttributionsFooter.vue

@@ -2,11 +2,11 @@
   <span class="d-inline-block text-truncate mr-10">
     <span
       v-for="attribution in mergedAttributions"
-      class="attribution-span"
+      class="attribution"
       :key="attribution.provider"
     >
-      <a :href="attribution.url" target="_blank"
-        >{{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
+      <a :href="attribution.url" target="_blank">
+        {{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
       </a>
     </span>
     <VcsButton
@@ -21,14 +21,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .attribution-wrap .vcs-button-wrap {
-    bottom: 3px;
-  }
-
-  a:before {
-    content: '\00a9\00a0';
-  }
-  .attribution-span {
+  .attribution {
     font-size: smaller;
     &:before {
       content: '\00a0\007c\00a0';
@@ -39,6 +32,12 @@
     span {
       font-size: inherit;
     }
+    a {
+      color: var(--v-text-color);
+      &:before {
+        content: '\00a9\00a0';
+      }
+    }
   }
 </style>
 

package/src/application/VcsContainer.vue

@@ -1,7 +1,12 @@
 <template>
   <v-container
     class="vcs-container pa-0"
-    :class="{ 'vcs-container-xs': xs }"
+    :class="{
+      'vcs-container-xs': xs,
+      'with-header': !config.hideHeader,
+      'without-header': config.hideHeader,
+      'without-footer': config.hideFooter,
+    }"
     fluid
     absolute
     style="background: #1b5e20"
@@ -25,25 +30,37 @@
       class="z-index-1 mobile-attribution-btn"
     /-->
     <PanelManagerComponent />
-    <ToolboxManagerComponent />
+    <ToolboxManagerComponent v-if="!config.hideToolbox" />
     <WindowManagerComponent />
     <NotifierComponent />
   </v-container>
 </template>
 
 <style scoped lang="scss">
+  .without-header {
+    top: 0px;
+  }
+  .with-header {
+    top: 48px;
+  }
   .vcs-container {
     position: absolute;
-    top: 48px;
     left: 0;
     right: 0;
-    bottom: 22px;
+    bottom: round(up, calc(var(--v-vcs-font-size) * 1.65), 1px);
+  }
+  .vcs-container.without-footer {
+    bottom: 0;
   }
 
-  .vcs-container-xs {
+  .vcs-container-xs.with-header {
     top: 0;
     bottom: 56px;
   }
+  .vcs-container-xs.without-header {
+    top: 0;
+    bottom: 0px;
+  }
 
   .mobile-logo {
     max-height: 40px;
@@ -93,16 +110,16 @@
       },
     },
     setup() {
+      /** @type {import("../vcsUiApp.js").default} */
       const app = inject('vcsApp');
-
       const { xs } = useDisplay();
-
       return {
+        config: app.uiConfig.config,
         xs,
         mobileLogo: computed(
           () =>
-            app.uiConfig.config.value.mobileLogo ??
-            app.uiConfig.config.value.logo ??
+            app.uiConfig.config.mobileLogo ??
+            app.uiConfig.config.logo ??
             VcsDefaultLogoMobile,
         ),
       };