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

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,326 @@ 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, 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;
+    };
+    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/VcsAppWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app class="vcs-app-wrapper">
     <VcsApp :app-id="appId" />
   </v-app>
 </template>

package/src/application/VcsAttributions.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-attributions">
     <v-list v-if="entries.length" class="px-2">
       <v-list-item
         v-for="{ key, title, attributions } in entries"
@@ -12,7 +12,7 @@
           :key="attribution.provider"
           :title="`${$st(attribution.provider)} ${attribution.year}`"
         >
-          <a :href="attribution.url" target="_blank">
+          <a :href="attribution.url ? attribution.url : null" target="_blank">
             {{ $st(attribution.provider) }} {{ attribution.year }}
           </a>
         </v-list-item-subtitle>
@@ -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

@@ -1,15 +1,20 @@
 <template>
-  <span class="d-inline-block text-truncate mr-10">
-    <span
-      v-for="attribution in mergedAttributions"
-      class="attribution-span"
-      :key="attribution.provider"
-    >
-      <a :href="attribution.url" target="_blank"
-        >{{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
-      </a>
-    </span>
+  <div
+    class="d-flex align-center justify-end overflow-hidden vcs-attributions-footer"
+  >
+    <div class="attribution-container">
+      <span
+        v-for="attribution in mergedAttributions"
+        class="attribution"
+        :key="attribution.provider"
+      >
+        <a :href="attribution.url ? attribution.url : null" target="_blank">
+          {{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
+        </a>
+      </span>
+    </div>
     <VcsButton
+      class="flex-shrink-0"
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
       :icon="attributionAction.icon"
@@ -17,18 +22,17 @@
       :disabled="attributionAction.disabled"
       @click.stop="attributionAction.callback($event)"
     />
-  </span>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-  .attribution-wrap .vcs-button-wrap {
-    bottom: 3px;
+  .attribution-container {
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-
-  a:before {
-    content: '\00a9\00a0';
-  }
-  .attribution-span {
+  .attribution {
     font-size: smaller;
     &:before {
       content: '\00a0\007c\00a0';
@@ -39,6 +43,12 @@
     span {
       font-size: inherit;
     }
+    a {
+      color: var(--v-text-color);
+      &:before {
+        content: '\00a9\00a0';
+      }
+    }
   }
 </style>
 

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

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedAttributions: import("vue").ComputedRef<{
         provider: string;
         years: string;
-        url: URL;
+        url: string;
     }[]>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     entries: {

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: calc(var(--v-vcs-font-size) * 3 + 9px);
+  }
   .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;
@@ -70,7 +87,7 @@
   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 ToolboxManagerComponent from '../manager/toolbox/ToolboxManagerComponent.vue';
   import NotifierComponent from '../notifier/NotifierComponent.vue';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
 
@@ -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,
         ),
       };