@vcmap/ui 5.3.7 → 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}
  */
@@ -45,10 +54,9 @@ export function setupCategoryManagerWindow(app: import("../vcsUiApp.js").default
  * the theming keys. Returns a function to stop syncing.
  * Also adds a watcher to vuetify theme, which triggers themeChanged event on the VcsUiApp.
  * @param {import("../vcsUiApp.js").default} app
- * @param {import("vuetify").Framework} vuetify
  * @returns {function():void} - call to stop syncing
  */
-export function setupUiConfigTheming(app: import("../vcsUiApp.js").default, vuetify: import("vuetify").Framework): () => void;
+export function setupUiConfigTheming(app: import("../vcsUiApp.js").default): () => void;
 /**
  * This helper sets up a listener to sync the display quality settings from the {@see UiConfigObject}
  * @param {import("../vcsUiApp.js").default} app
@@ -66,36 +74,333 @@ 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;
     };
 }, {
+    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").AttributionEntry[]>;
-    attributionAction: import("../actions/actionHelper.js").VcsAction;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    attributionEntries: import("vue").Ref<import("./attributionsHelper.js", { with: { "resolution-mode": "import" } }).AttributionEntry[]>;
+    attributionAction: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     appId: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/application/VcsAppWrapper.vue

@@ -1,11 +1,11 @@
 <template>
-  <v-app>
+  <v-app class="vcs-app-wrapper">
     <VcsApp :app-id="appId" />
   </v-app>
 </template>
 
 <script>
-  import { VApp } from 'vuetify/lib';
+  import { VApp } from 'vuetify/components';
   import VcsApp from './VcsApp.vue';
 
   /**

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

@@ -3,10 +3,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     appId: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/application/VcsAttributions.vue

@@ -1,23 +1,21 @@
 <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"
         :key="key"
         class="px-0"
       >
-        <v-list-item-content>
-          <v-list-item-title>{{ $t(title) }}</v-list-item-title>
-          <v-list-item-subtitle
-            v-for="attribution in attributions"
-            :key="attribution.provider"
-            :title="`${$t(attribution.provider)} ${attribution.year}`"
-          >
-            <a :href="attribution.url" target="_blank">
-              {{ $t(attribution.provider) }} {{ attribution.year }}
-            </a>
-          </v-list-item-subtitle>
-        </v-list-item-content>
+        <v-list-item-title>{{ $st(title) }}</v-list-item-title>
+        <v-list-item-subtitle
+          v-for="attribution in attributions"
+          :key="attribution.provider"
+          :title="`${$st(attribution.provider)} ${attribution.year}`"
+        >
+          <a :href="attribution.url ? attribution.url : null" target="_blank">
+            {{ $st(attribution.provider) }} {{ attribution.year }}
+          </a>
+        </v-list-item-subtitle>
       </v-list-item>
     </v-list>
     <v-sheet v-else class="ma-2">
@@ -27,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';
@@ -53,30 +40,28 @@
   import {
     VList,
     VListItem,
-    VListItemContent,
     VListItemTitle,
     VListItemSubtitle,
     VSheet,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
 
   /**
    * @description Lists attributions of maps, layers and oblique collections
-   * @vue-prop {import("vue").Ref<Array<AttributionEntry>} entries - array with one entry per active VcsObject
+   * @vue-prop {import("vue").UnwrapRef<Array<AttributionEntry>} entries - array with one entry per active VcsObject
    */
   export default {
     name: 'VcsAttributions',
     components: {
       VList,
       VListItem,
-      VListItemContent,
       VListItemTitle,
       VListItemSubtitle,
       VSheet,
     },
     props: {
       entries: {
-        type: Object,
-        default: () => {},
+        type: Array,
+        default: () => [],
       },
     },
   };

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

@@ -1,14 +1,14 @@
 declare const _default: import("vue").DefineComponent<{
     entries: {
-        type: ObjectConstructor;
-        default: () => void;
+        type: ArrayConstructor;
+        default: () => never[];
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     entries: {
-        type: ObjectConstructor;
-        default: () => void;
+        type: ArrayConstructor;
+        default: () => never[];
     };
 }>>, {
-    entries: Record<string, any>;
-}>;
+    entries: unknown[];
+}, {}>;
 export default _default;

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"
-        >{{ $t(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,9 +11,9 @@ declare const _default: import("vue").DefineComponent<{
     mergedAttributions: import("vue").ComputedRef<{
         provider: string;
         years: string;
-        url: URL;
+        url: string;
     }[]>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     entries: {
         type: ArrayConstructor;
         required: true;
@@ -22,5 +22,5 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;