@vcmap/ui 6.0.0-rc.7 → 6.0.0-rc.9

package/src/manager/window/WindowManager.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="{ 'win-container-mobile': addMobileClass }">
+  <div
+    :class="{ 'win-container-mobile': addMobileClass }"
+    class="window-manager"
+  >
     <WindowComponent
       v-for="id in componentIds"
       :key="id"

package/src/manager/window/windowManager.d.ts

@@ -17,7 +17,7 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  *   parentId?: string,
  *   component: import("vue").Component<T>,
  *   headerComponent?: import("vue").Component<T>,
- *   state? : Partial<WindowState>,
+ *   state? : WindowStateOptions,
  *   position? : Partial<WindowPositionOptions>,
  *   slot?: WindowSlot,
  *   props?: T,
@@ -28,16 +28,34 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  * @property {string} [parentId] An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
  * @property {import("vue").Component<T, unknown, unknown>} component Main Component which is shown below the header.
  * @property {import("vue").Component<T, unknown, unknown>} [headerComponent] Replaces the Header Component.
- * @property {Partial<WindowState>} [state]
+ * @property {WindowStateOptions} [state]
  * @property {Partial<WindowPositionOptions>} [position] Will be merged with default position for slot
  * @property {WindowSlot} [slot]
  * @property {T} [props]
  * @property {Object} [provides]
  */
+/**
+ * @typedef {T|import('vue').Ref<T>|import('vue').ComputedRef<T>} OptionsOrRef
+ * @template T
+ */
+/**
+ * @typedef {Object} WindowStateOptions
+ * @property {OptionsOrRef<boolean>} [hideHeader] be used to not show the header.
+ * @property {OptionsOrRef<boolean>} [hidePin] be used to not show the pin button.
+ * @property {OptionsOrRef<string|string[]>} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
+ * @property {OptionsOrRef<string>} [headerIcon]
+ * @property {OptionsOrRef<Array<import("../../actions/actionHelper.js").VcsAction>>} [headerActions]
+ * @property {OptionsOrRef<number>} [headerActionsOverflow]
+ * @property {OptionsOrRef<string>} [infoUrl] An optional url referencing help or further information on the window's content.
+ * @property {OptionsOrRef<function():string>} [infoUrlCallback] An optional function returning an url referencing help or further information. Can be used for urls depending on the app's locale, e.g. app.getHelpUrl()
+ * @property {Record<string, string>} [styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+ * @property {Array<string>|Record<string,string>} [classes] Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
+ */
 /**
  * @typedef {Object} WindowState
  * @property {string} id
  * @property {string|vcsAppSymbol} owner Owner of the window, set by windowManager on add
+ * @property {string|undefined} parentId - the parent of this window
  * @property {boolean} [hideHeader] be used to not show the header.
  * @property {boolean} [hidePin] be used to not show the pin button.
  * @property {string|string[]} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
@@ -134,18 +152,56 @@ export type WindowComponentOptions<T = any> = {
     parentId?: string;
     component: import("vue").Component<T>;
     headerComponent?: import("vue").Component<T>;
-    state?: Partial<WindowState>;
+    state?: WindowStateOptions;
     position?: Partial<WindowPositionOptions>;
     slot?: WindowSlot;
     props?: T;
     provides?: Record<string, unknown>;
 };
+export type OptionsOrRef<T> = T | import('vue').Ref<T> | import('vue').ComputedRef<T>;
+export type WindowStateOptions = {
+    /**
+     * be used to not show the header.
+     */
+    hideHeader?: OptionsOrRef<boolean> | undefined;
+    /**
+     * be used to not show the pin button.
+     */
+    hidePin?: OptionsOrRef<boolean> | undefined;
+    /**
+     * An optional translatable header. If an array is provided all elements are translated and joined afterward.
+     */
+    headerTitle?: OptionsOrRef<string | string[]> | undefined;
+    headerIcon?: OptionsOrRef<string> | undefined;
+    headerActions?: OptionsOrRef<import("../../actions/actionHelper.js").VcsAction[]> | undefined;
+    headerActionsOverflow?: OptionsOrRef<number> | undefined;
+    /**
+     * An optional url referencing help or further information on the window's content.
+     */
+    infoUrl?: OptionsOrRef<string> | undefined;
+    /**
+     * An optional function returning an url referencing help or further information. Can be used for urls depending on the app's locale, e.g. app.getHelpUrl()
+     */
+    infoUrlCallback?: OptionsOrRef<() => string> | undefined;
+    /**
+     * Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+     */
+    styles?: Record<string, string> | undefined;
+    /**
+     * Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
+     */
+    classes?: string[] | Record<string, string> | undefined;
+};
 export type WindowState = {
     id: string;
     /**
      * Owner of the window, set by windowManager on add
      */
     owner: string | symbol;
+    /**
+     * - the parent of this window
+     */
+    parentId: string | undefined;
     /**
      * be used to not show the header.
      */

package/src/manager/window/windowManager.js

@@ -107,7 +107,7 @@ export function isSlotPosition(windowPosition) {
  *   parentId?: string,
  *   component: import("vue").Component<T>,
  *   headerComponent?: import("vue").Component<T>,
- *   state? : Partial<WindowState>,
+ *   state? : WindowStateOptions,
  *   position? : Partial<WindowPositionOptions>,
  *   slot?: WindowSlot,
  *   props?: T,
@@ -118,17 +118,37 @@ export function isSlotPosition(windowPosition) {
  * @property {string} [parentId] An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
  * @property {import("vue").Component<T, unknown, unknown>} component Main Component which is shown below the header.
  * @property {import("vue").Component<T, unknown, unknown>} [headerComponent] Replaces the Header Component.
- * @property {Partial<WindowState>} [state]
+ * @property {WindowStateOptions} [state]
  * @property {Partial<WindowPositionOptions>} [position] Will be merged with default position for slot
  * @property {WindowSlot} [slot]
  * @property {T} [props]
  * @property {Object} [provides]
  */
 
+/**
+ * @typedef {T|import('vue').Ref<T>|import('vue').ComputedRef<T>} OptionsOrRef
+ * @template T
+ */
+
+/**
+ * @typedef {Object} WindowStateOptions
+ * @property {OptionsOrRef<boolean>} [hideHeader] be used to not show the header.
+ * @property {OptionsOrRef<boolean>} [hidePin] be used to not show the pin button.
+ * @property {OptionsOrRef<string|string[]>} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
+ * @property {OptionsOrRef<string>} [headerIcon]
+ * @property {OptionsOrRef<Array<import("../../actions/actionHelper.js").VcsAction>>} [headerActions]
+ * @property {OptionsOrRef<number>} [headerActionsOverflow]
+ * @property {OptionsOrRef<string>} [infoUrl] An optional url referencing help or further information on the window's content.
+ * @property {OptionsOrRef<function():string>} [infoUrlCallback] An optional function returning an url referencing help or further information. Can be used for urls depending on the app's locale, e.g. app.getHelpUrl()
+ * @property {Record<string, string>} [styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+ * @property {Array<string>|Record<string,string>} [classes] Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
+ */
+
 /**
  * @typedef {Object} WindowState
  * @property {string} id
  * @property {string|vcsAppSymbol} owner Owner of the window, set by windowManager on add
+ * @property {string|undefined} parentId - the parent of this window
  * @property {boolean} [hideHeader] be used to not show the header.
  * @property {boolean} [hidePin] be used to not show the pin button.
  * @property {string|string[]} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
@@ -599,6 +619,7 @@ class WindowManager {
       ? [...(windowComponentOptions?.state?.classes ?? [])]
       : { ...windowComponentOptions?.state?.classes };
 
+    /** @type {WindowState} */
     const state = reactive({
       id,
       parentId,

package/src/navigation/MapNavigation.vue

@@ -1,5 +1,8 @@
 <template>
-  <v-container :class="xs ? 'nav-container mobile' : 'nav-container'">
+  <v-container
+    :class="xs ? 'nav-container mobile' : 'nav-container'"
+    class="map-navigation"
+  >
     <v-row>
       <VcsCompass
         :view-mode="viewMode"

package/src/navigation/ObliqueRotation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-inline-flex rounded vcs-oblique-orientation">
+  <div class="d-inline-flex rounded oblique-orientation">
     <div class="d-inline-flex rounded inner">
       <OrientationToolsButton
         @click="input(-90)"
@@ -56,7 +56,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .vcs-oblique-orientation {
+  .oblique-orientation {
     box-shadow: rgba(0, 0, 0, 0.15) 0 2px 2px 0;
     .inner {
       box-shadow: rgba(0, 0, 0, 0.25) 0 -2px 2px 0 inset;

package/src/navigation/OrientationToolsButton.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card
-    class="d-flex align-center justify-center text-center btn-orientation-tools"
+    class="d-flex align-center justify-center text-center btn-orientation-tools orientation-tools-button"
     v-bind="{ ...$attrs }"
     :height="height"
     :width="width"

package/src/navigation/TiltSlider.vue

@@ -1,5 +1,6 @@
 <template>
   <v-card
+    class="tilt-slider"
     :width="minWidth"
     :height="minHeight"
     v-bind="props"

package/src/navigation/VcsCompass.vue

@@ -4,7 +4,7 @@
       transform: `rotate(${compassRotation}deg)`,
     }"
     @click="$emit('update:modelValue', 0)"
-    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
+    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease vcs-compass"
     elevation="1"
     :height="height"
     :width="width"

package/src/navigation/VcsZoomButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded vcs-navigation-zoom">
+  <div class="rounded vcs-navigation-zoom vcs-zoom-button">
     <div class="rounded inner">
       <OrientationToolsButton
         @click="$emit('zoom-in')"

package/src/notifier/NotifierComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="notifier-component">
     <v-snackbar
       v-for="notification in notifications"
       :key="notification.id"

package/src/obliqueFallbackWarnings.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {import("./vcsUiApp.js").default} app
+ * @returns {() => void}
+ */
+export default function createObliqueFallbackWarnings(app: import("./vcsUiApp.js").default): () => void;

package/src/obliqueFallbackWarnings.js

@@ -0,0 +1,54 @@
+import { ObliqueMap } from '@vcmap/core';
+import { NotificationType } from './notifier/notifier.js';
+
+function createNotification(app) {
+  app.notifier.add({
+    title: 'navigation.obliqueFallback.title',
+    type: NotificationType.WARNING,
+    message: 'navigation.obliqueFallback.message',
+  });
+}
+
+/**
+ * @param {import("./vcsUiApp.js").default} app
+ * @returns {() => void}
+ */
+export default function createObliqueFallbackWarnings(app) {
+  const fallbackMapEventListener =
+    app.maps.fallbackMapActivated.addEventListener(() => {
+      createNotification(app);
+    });
+
+  const mapListeners = new Map();
+  const setMapListener = (map) => {
+    mapListeners.set(
+      map,
+      map.failedToSetCollection.addEventListener(() => {
+        createNotification(app);
+      }),
+    );
+  };
+
+  app.maps.getByType(ObliqueMap.className).forEach(setMapListener);
+
+  const mapAddedListener = app.maps.added.addEventListener((map) => {
+    if (map instanceof ObliqueMap) {
+      setMapListener(map);
+    }
+  });
+
+  const mapRemovedListener = app.maps.removed.addEventListener((map) => {
+    mapListeners.get(map)?.();
+    mapListeners.delete(map);
+  });
+
+  return () => {
+    fallbackMapEventListener();
+    mapAddedListener();
+    mapRemovedListener();
+    [...mapListeners.values()].forEach((cb) => {
+      cb();
+    });
+    mapListeners.clear();
+  };
+}

package/src/search/ResultItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list-item v-if="item" v-bind="$attrs">
+  <v-list-item v-if="item" v-bind="$attrs" class="result-item">
     <template #prepend v-if="item.icon">
       <v-icon>
         {{ item.icon }}

package/src/search/ResultsComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <v-list
-    class="ma-0 overflow-y-auto vcs-search-results"
+    class="ma-0 overflow-y-auto vcs-search-results results-component"
     v-model:selected="highlighted"
   >
     <ResultItem

package/src/search/SearchComponent.vue

@@ -1,6 +1,8 @@
 <template>
   <v-sheet>
-    <span class="d-flex justify-space-between align-center mt-1 ml-2">
+    <span
+      class="d-flex justify-space-between align-center mt-1 ml-2 search-component"
+    >
       <v-icon class="pa-1" :size="searchIconSize"> $vcsSearch </v-icon>
       <VcsTextField
         class="d-inline-block user-select-none w-100 mx-1"

package/src/uiConfig.d.ts

@@ -137,9 +137,13 @@ export type UiConfigObject = {
      */
     displayQuality?: import("@vcmap/core").DisplayQualityOptions | undefined;
     /**
-     * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+     * - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
      */
     vuetifyTheme?: any;
+    /**
+     * - open the legend window, if new layer has a config
+     */
+    openLegendOnAdd?: boolean | undefined;
 };
 /**
  * @typedef {{
@@ -206,7 +210,8 @@ export type UiConfigObject = {
  * @property {boolean} [hideSettings] - can be used to hide the settings Window
  * @property {boolean} [overviewMapActiveOnStartup] - can be used to activate the overviewMap on startup
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
- * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+ * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
+ * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
  */
 /**
  * @extends {Collection<UiConfigurationItem<unknown>>}
@@ -233,7 +238,7 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
      */
     private _listeners;
     /**
-     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
+     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Record<string, *> & UiConfigObject>>}
      */
     get config(): {
         readonly [x: string]: any;
@@ -451,6 +456,7 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
                 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;
@@ -460,6 +466,7 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
                 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;
@@ -469,12 +476,17 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
                 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 configuration https://vuetifyjs.com/en/features/theme/
+         * - 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;
     };
 }
 import { Collection } from '@vcmap/core';

package/src/uiConfig.js

@@ -70,7 +70,8 @@ import { reactive, readonly } from 'vue';
  * @property {boolean} [hideSettings] - can be used to hide the settings Window
  * @property {boolean} [overviewMapActiveOnStartup] - can be used to activate the overviewMap on startup
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
- * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+ * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
+ * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
  */
 
 /**
@@ -117,7 +118,7 @@ class UiConfig extends Collection {
   }
 
   /**
-   * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
+   * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Record<string, *> & UiConfigObject>>}
    */
   get config() {
     return this._readonlyConfig;

package/src/vcsUiApp.d.ts

@@ -70,20 +70,21 @@ declare class VcsUiApp extends VcsApp {
      */
     themeChanged: VcsEvent<void>;
     /**
-     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin, Collection<VcsPlugin>, Object>}
+     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>, Collection<VcsPlugin<Object, Object>>, Object>}
      * @private
      */
     private _plugins;
     /**
-     * @type {Array<function():void>}
+     * I18n Collection adds plugin listener first, so the plugin i18n data is available on plugin initialize
+     * @type {I18nCollection<Object>}
      * @private
      */
-    private _pluginListeners;
+    private _i18n;
     /**
-     * @type {I18nCollection<Object>}
+     * @type {Array<function():void>}
      * @private
      */
-    private _i18n;
+    private _pluginListeners;
     /**
      *
      * @type {import("vue-i18n").I18n}
@@ -194,10 +195,11 @@ declare class VcsUiApp extends VcsApp {
      */
     mounted: import("@vcmap/core").VcsEvent<string>;
     _destroySiteConfig: () => void;
+    _destroyObliqueFallback: () => void;
     /**
-     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin, Collection<VcsPlugin>, Object>}
+     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>, Collection<VcsPlugin<Object, Object>>, Object>}
      */
-    get plugins(): import("@vcmap/core").OverrideCollection<any, Collection<any>, Object>;
+    get plugins(): import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>, Collection<VcsPlugin<Object, Object>>, Object>;
     /**
      * @type {import("@vcmap/core").OverrideCollection<ContentTreeItem, ContentTreeCollection>}
      */
@@ -253,10 +255,6 @@ declare class VcsUiApp extends VcsApp {
         install: (app: import("vue").App<any>) => void;
         defaults: import("vue").Ref<import("vuetify").DefaultsInstance>;
         display: import("vuetify").DisplayInstance;
-        /**
-         * @type {NavbarManager}
-         * @private
-         */
         theme: import("vuetify").ThemeInstance & {
             install: (app: import("vue").App<any>) => void;
         };
@@ -284,17 +282,39 @@ declare class VcsUiApp extends VcsApp {
                     formats?: any;
                 }) => import("vuetify").DateInstance) | import("vuetify").DateInstance;
                 formats?: Record<string, any> | undefined;
-                locale: Record<string, any>;
+                locale: Record<string, any>; /**
+                 * Interface for VcsPlugins.
+                 * The function implementing the interface should not throw!
+                 * @typedef {{
+                 *   name: string,
+                 *   version: string,
+                 *   mapVersion: string,
+                 *   i18n?: Object<string, unknown>,
+                 *   initialize?: function(import("@src/vcsUiApp.js").default, S=):void|Promise<void>,
+                 *   onVcsAppMounted?: function(import("@src/vcsUiApp.js").default):void,
+                 *   toJSON?: function(): C,
+                 *   getDefaultOptions?: function(): C,
+                 *   getState?: function(boolean=):S|Promise<S>,
+                 *   getConfigEditors?: function():Array<PluginConfigEditor<object>>,
+                 *   destroy?: function(): void
+                 * }} VcsPlugin
+                 * @template {Object} C - plugin config
+                 * @template {Object} S - plugin state
+                 * @property {Object<string, *>} [i18n] - the i18n messages of this plugin
+                 * @property {function(import("@src/vcsUiApp.js").default, S=)} initialize - called on plugin added. Is passed the VcsUiApp and optionally, the state for the plugin
+                 * @property {function(import("@src/vcsUiApp.js").default)} onVcsAppMounted - called on mounted of VcsApp.vue
+                 * @property {function():C} [toJSON] - should return the plugin's serialization excluding all default values
+                 * @property {function():C} [getDefaultOptions] - should return the plugin's default options
+                 * @property {function(boolean=):S|Promise<S>} [getState] - should return the plugin's state or a promise for said state. is passed a "for url" flag. If true, only the state relevant for sharing a URL should be passed and short keys shall be used
+                 * @property {Array<PluginConfigEditor>} [getConfigEditors] - should return components for configuring the plugin or custom items defined by the plugin
+                 * @api
+                 */
             };
             instance: {
                 locale?: any;
                 date: (value?: any) => unknown;
                 format: (date: unknown, formatString: string) => string;
                 toJsDate: (value: unknown) => Date;
-                /**
-                 * @type {OverviewMap}
-                 * @private
-                 */
                 parseISO: (date: string) => unknown;
                 toISO: (date: unknown) => string;
                 startOfDay: (date: unknown) => unknown;
@@ -303,6 +323,10 @@ declare class VcsUiApp extends VcsApp {
                 endOfWeek: (date: unknown) => unknown;
                 startOfMonth: (date: unknown) => unknown;
                 endOfMonth: (date: unknown) => unknown;
+                /**
+                 * @type {ContextMenuManager}
+                 * @private
+                 */
                 startOfYear: (date: unknown) => unknown;
                 endOfYear: (date: unknown) => unknown;
                 isAfter: (date: unknown, comparing: unknown) => boolean;
@@ -324,7 +348,9 @@ declare class VcsUiApp extends VcsApp {
                 getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
                 getWeekArray: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown[][];
                 getWeekdays: (firstDayOfWeek?: string | number | undefined) => string[];
-                getMonth: (date: unknown) => number;
+                getMonth: (date: unknown) => number; /**
+                 * @type {import("@vcmap/core").OverrideClassRegistry<typeof AbstractFeatureInfoView>}
+                 */
                 setMonth: (date: unknown, month: number) => unknown;
                 getDate: (date: unknown) => number;
                 setDate: (date: unknown, day: number) => unknown;

package/src/vcsUiApp.js

@@ -45,6 +45,7 @@ import { createVueI18n, setupI18n } from './vuePlugins/i18n.js';
 import { callbackClassRegistry } from './callback/vcsCallback.js';
 import createSiteConfig from './siteConfig.js';
 import { createVcsVuetify } from './vuePlugins/vuetify.js';
+import createObliqueFallbackWarnings from './obliqueFallbackWarnings.js';
 
 /**
  * @typedef {import("@vcmap/core").VcsModuleConfig & {
@@ -170,7 +171,7 @@ class VcsUiApp extends VcsApp {
      */
     this.themeChanged = new VcsEvent();
     /**
-     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin, Collection<VcsPlugin>, Object>}
+     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>, Collection<VcsPlugin<Object, Object>>, Object>}
      * @private
      */
     this._plugins = makeOverrideCollection(
@@ -179,6 +180,17 @@ class VcsUiApp extends VcsApp {
       serializePlugin,
       deserializePlugin,
     );
+
+    /**
+     * I18n Collection adds plugin listener first, so the plugin i18n data is available on plugin initialize
+     * @type {I18nCollection<Object>}
+     * @private
+     */
+    this._i18n = makeOverrideCollection(
+      new I18nCollection(this._plugins),
+      () => this.dynamicModuleId,
+    );
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -222,15 +234,6 @@ class VcsUiApp extends VcsApp {
       }),
     ];
 
-    /**
-     * @type {I18nCollection<Object>}
-     * @private
-     */
-    this._i18n = makeOverrideCollection(
-      new I18nCollection(this._plugins),
-      () => this.dynamicModuleId,
-    );
-
     /**
      *
      * @type {import("vue-i18n").I18n}
@@ -372,10 +375,12 @@ class VcsUiApp extends VcsApp {
     this.mounted = new VcsEvent();
 
     this._destroySiteConfig = createSiteConfig(this._uiConfig);
+
+    this._destroyObliqueFallback = createObliqueFallbackWarnings(this);
   }
 
   /**
-   * @type {import("@vcmap/core").OverrideCollection<VcsPlugin, Collection<VcsPlugin>, Object>}
+   * @type {import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>, Collection<VcsPlugin<Object, Object>>, Object>}
    */
   get plugins() {
     return this._plugins;
@@ -751,6 +756,7 @@ class VcsUiApp extends VcsApp {
     this._featureInfo.destroy();
     this._uiConfig.destroy();
     this._destroySiteConfig();
+    this._destroyObliqueFallback();
     super.destroy();
   }
 }

package/src/vuePlugins/i18n.js

@@ -9,6 +9,7 @@ import { resolveValue } from '@intlify/core-base';
 export function createVueI18n() {
   return createI18n({
     legacy: false,
+    globalInjection: true,
     locale: 'en',
     missingWarn: false,
     fallbackWarn: false,