@vcmap/ui 6.0.0-rc.3 → 6.0.0-rc.6

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,31 +74,319 @@ 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;
+            } | 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;
+        /**
+         * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+         */
+        readonly vuetifyTheme?: any;
+    };
+    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/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,
         ),
       };

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

@@ -4,6 +4,247 @@ 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;
+            } | 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;
+        /**
+         * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+         */
+        readonly vuetifyTheme?: any;
+    };
     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<{