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

package/src/uiConfig.d.ts

@@ -88,6 +88,50 @@ export type UiConfigObject = {
      * - an optional flag whether to show the Locator in the map.
      */
     showLocator?: boolean | undefined;
+    /**
+     * - can be used to hide the default Header of the map
+     */
+    hideHeader?: boolean | undefined;
+    /**
+     * - can be used to hide the integrated Search bar
+     */
+    hideSearch?: boolean | undefined;
+    /**
+     * - can be used to hide the default Map Buttons
+     */
+    hideMapButtons?: boolean | undefined;
+    /**
+     * - can be used to hide the toolbox
+     */
+    hideToolbox?: boolean | undefined;
+    /**
+     * - can be used to hide the navigation
+     */
+    hideMapNavigation?: boolean | undefined;
+    /**
+     * - can be used to hide the footer
+     */
+    hideFooter?: boolean | undefined;
+    /**
+     * - can be used to hide the myWorkspace button
+     */
+    hideMyWorkspace?: boolean | undefined;
+    /**
+     * - can be used to hide the contentTree
+     */
+    hideContentTree?: boolean | undefined;
+    /**
+     * - can be used to hide the legend
+     */
+    hideLegend?: boolean | undefined;
+    /**
+     * - can be used to hide the settings Window
+     */
+    hideSettings?: boolean | undefined;
+    /**
+     * - can be used to activate the overviewMap on startup
+     */
+    overviewMapActiveOnStartup?: boolean | undefined;
     /**
      * - the display quality settings
      */
@@ -146,6 +190,17 @@ export type UiConfigObject = {
  * @property {string} [favicon] - the favicon to set
  * @property {string} [headerTitle] - the title to display in the tab of the browser
  * @property {boolean} [showLocator] - an optional flag whether to show the Locator in the map.
+ * @property {boolean} [hideHeader] - can be used to hide the default Header of the map
+ * @property {boolean} [hideSearch] - can be used to hide the integrated Search bar
+ * @property {boolean} [hideMapButtons] - can be used to hide the default Map Buttons
+ * @property {boolean} [hideToolbox] - can be used to hide the toolbox
+ * @property {boolean} [hideMapNavigation] - can be used to hide the navigation
+ * @property {boolean} [hideFooter] - can be used to hide the footer
+ * @property {boolean} [hideMyWorkspace] - can be used to hide the myWorkspace button
+ * @property {boolean} [hideContentTree] - can be used to hide the contentTree
+ * @property {boolean} [hideLegend] - can be used to hide the legend
+ * @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
  */
 /**
@@ -157,20 +212,260 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
      */
     constructor(getDynamicModuleId: () => string);
     /**
-     * @type {import("vue").Ref<Object<string, *>>}
+     * @type {import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>}
      * @private
      */
     private _config;
+    /**
+     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
+     */
+    _readonlyConfig: import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<{
+        [x: string]: any;
+    } & UiConfigObject>>;
     /**
      * @type {Array<function():void>}
      * @private
      */
     private _listeners;
     /**
-     * @type {import("vue").Ref<Object<string, unknown>|UiConfigObject>}
+     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
      */
-    get config(): import("vue").Ref<{
-        [x: string]: unknown;
-    } | UiConfigObject>;
+    get config(): {
+        readonly [x: string]: any;
+        /**
+         * - the company logo to display. this will override any and all css overrides.
+         */
+        readonly logo?: string | undefined;
+        /**
+         * - an alternative logo to display in mobile view
+         */
+        readonly mobileLogo?: string | undefined;
+        /**
+         * - an optional title to display next to the company logo
+         */
+        readonly appTitle?: string | undefined;
+        /**
+         * - an optional primary color to use in all themes
+         */
+        readonly primaryColor?: string | undefined;
+        /**
+         * - an optional flag whether to activate feature info on startup (default active)
+         */
+        readonly startingFeatureInfo?: boolean | undefined;
+        /**
+         * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
+         */
+        readonly positionDisplayEventType?: string | undefined;
+        /**
+         * - an optional URL to a help landing page
+         */
+        readonly helpBaseUrl?: string | undefined;
+        /**
+         * - an option imprint, will show a link in the footer. Default title is 'footer.imprint.title'.
+         */
+        readonly imprint?: {
+            readonly title?: string | undefined;
+            readonly url?: string | {
+                readonly hash: string;
+                readonly host: string;
+                readonly hostname: string;
+                readonly href: string;
+                readonly toString: () => string;
+                readonly origin: string;
+                readonly password: string;
+                readonly pathname: string;
+                readonly port: string;
+                readonly protocol: string;
+                readonly search: string;
+                readonly searchParams: ReadonlyMap<string, string | null>;
+                readonly username: string;
+                readonly toJSON: () => string;
+            } | undefined;
+            readonly content?: string | undefined;
+        } | undefined;
+        /**
+         * - an option dataProtection, will show a link in the footer. Default title is 'footer.dataProtection.title'.
+         */
+        readonly dataProtection?: {
+            readonly title?: string | undefined;
+            readonly url?: string | {
+                readonly hash: string;
+                readonly host: string;
+                readonly hostname: string;
+                readonly href: string;
+                readonly toString: () => string;
+                readonly origin: string;
+                readonly password: string;
+                readonly pathname: string;
+                readonly port: string;
+                readonly protocol: string;
+                readonly search: string;
+                readonly searchParams: ReadonlyMap<string, string | null>;
+                readonly username: string;
+                readonly toJSON: () => string;
+            } | undefined;
+            readonly content?: string | undefined;
+        } | undefined;
+        /**
+         * - an option splashScreen, will show a splash Screen on Map Load.
+         */
+        readonly splashScreen?: {
+            readonly title?: string | undefined;
+            readonly icon?: string | undefined;
+            readonly content?: string | undefined;
+            readonly name?: string | undefined;
+            readonly checkBoxText?: string | undefined;
+            readonly buttonTitle?: string | undefined;
+            readonly menuEntry?: boolean | undefined;
+            readonly acceptInput?: boolean | undefined;
+            readonly position?: {
+                readonly width?: string | undefined;
+                readonly height?: string | undefined;
+                readonly maxHeight?: string | undefined;
+                readonly maxWidth?: string | undefined;
+            } | undefined;
+        } | undefined;
+        /**
+         * - an option customScreen, will show a Custom Menu Point that opens a window with custom content.
+         */
+        readonly customScreen?: {
+            readonly title?: string | undefined;
+            readonly icon?: string | undefined;
+            readonly content?: string | undefined;
+            readonly name?: string | undefined;
+            readonly windowPosition?: {
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly left?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly top?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly right?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly bottom?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly width?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly height?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly maxHeight?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly maxWidth?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly minHeight?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly minWidth?: string | number | undefined;
+            } | undefined;
+        } | undefined;
+        /**
+         * - the favicon to set
+         */
+        readonly favicon?: string | undefined;
+        /**
+         * - the title to display in the tab of the browser
+         */
+        readonly headerTitle?: string | undefined;
+        /**
+         * - an optional flag whether to show the Locator in the map.
+         */
+        readonly showLocator?: boolean | undefined;
+        /**
+         * - can be used to hide the default Header of the map
+         */
+        readonly hideHeader?: boolean | undefined;
+        /**
+         * - can be used to hide the integrated Search bar
+         */
+        readonly hideSearch?: boolean | undefined;
+        /**
+         * - can be used to hide the default Map Buttons
+         */
+        readonly hideMapButtons?: boolean | undefined;
+        /**
+         * - can be used to hide the toolbox
+         */
+        readonly hideToolbox?: boolean | undefined;
+        /**
+         * - can be used to hide the navigation
+         */
+        readonly hideMapNavigation?: boolean | undefined;
+        /**
+         * - can be used to hide the footer
+         */
+        readonly hideFooter?: boolean | undefined;
+        /**
+         * - can be used to hide the myWorkspace button
+         */
+        readonly hideMyWorkspace?: boolean | undefined;
+        /**
+         * - can be used to hide the contentTree
+         */
+        readonly hideContentTree?: boolean | undefined;
+        /**
+         * - can be used to hide the legend
+         */
+        readonly hideLegend?: boolean | undefined;
+        /**
+         * - can be used to hide the settings Window
+         */
+        readonly hideSettings?: boolean | undefined;
+        /**
+         * - can be used to activate the overviewMap on startup
+         */
+        readonly overviewMapActiveOnStartup?: boolean | undefined;
+        /**
+         * - the display quality settings
+         */
+        readonly displayQuality?: {
+            readonly startingQualityLevel?: import("@vcmap/core").DisplayQualityLevel | undefined;
+            readonly startingMobileQualityLevel?: import("@vcmap/core").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;
+    };
 }
 import { Collection } from '@vcmap/core';

package/src/uiConfig.js

@@ -1,5 +1,5 @@
 import { Collection, makeOverrideCollection } from '@vcmap/core';
-import { ref } from 'vue';
+import { reactive, readonly } from 'vue';
 
 /**
  * @typedef {{
@@ -58,6 +58,17 @@ import { ref } from 'vue';
  * @property {string} [favicon] - the favicon to set
  * @property {string} [headerTitle] - the title to display in the tab of the browser
  * @property {boolean} [showLocator] - an optional flag whether to show the Locator in the map.
+ * @property {boolean} [hideHeader] - can be used to hide the default Header of the map
+ * @property {boolean} [hideSearch] - can be used to hide the integrated Search bar
+ * @property {boolean} [hideMapButtons] - can be used to hide the default Map Buttons
+ * @property {boolean} [hideToolbox] - can be used to hide the toolbox
+ * @property {boolean} [hideMapNavigation] - can be used to hide the navigation
+ * @property {boolean} [hideFooter] - can be used to hide the footer
+ * @property {boolean} [hideMyWorkspace] - can be used to hide the myWorkspace button
+ * @property {boolean} [hideContentTree] - can be used to hide the contentTree
+ * @property {boolean} [hideLegend] - can be used to hide the legend
+ * @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
  */
 
@@ -70,19 +81,18 @@ class UiConfig extends Collection {
    */
   constructor(getDynamicModuleId) {
     super();
-
     makeOverrideCollection(this, getDynamicModuleId);
     /**
-     * This object just acts as a go between for reactivity until we have vue3
-     * @todo vue3 cleanup
-     * @type {Object<string, *>}
+     * @type {import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>}
+     * @private
      */
-    const configObject = {};
+    this._config = reactive({});
+
     /**
-     * @type {import("vue").Ref<Object<string, *>>}
-     * @private
+     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
      */
-    this._config = ref({});
+    this._readonlyConfig = readonly(this._config);
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -90,24 +100,26 @@ class UiConfig extends Collection {
     this._listeners = [
       this.added.addEventListener((item) => {
         if (typeof item?.name === 'string') {
-          configObject[item.name] = item.value;
-          this._config.value = { ...configObject }; // shallow clone to trip reactivity
+          this._config[item.name] = structuredClone(item.value);
         }
       }),
       this.removed.addEventListener((item) => {
-        if (typeof item?.name === 'string') {
-          delete configObject[item.name];
-          this._config.value = { ...configObject }; // shallow clone to trip reactivity
+        const previousItem = this.getByKey(item?.name);
+        if (typeof previousItem?.name === 'string') {
+          // still in the collection
+          this._config[previousItem.name] = structuredClone(previousItem.value);
+        } else if (typeof item?.name === 'string') {
+          delete this._config[item.name];
         }
       }),
     ];
   }
 
   /**
-   * @type {import("vue").Ref<Object<string, unknown>|UiConfigObject>}
+   * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
    */
   get config() {
-    return this._config;
+    return this._readonlyConfig;
   }
 
   /**

package/src/vcsUiApp.d.ts

@@ -136,6 +136,11 @@ declare class VcsUiApp extends VcsApp {
      * @private
      */
     private _contentTreeClassRegistry;
+    /**
+     * @type {import("@vcmap/core").OverrideCollection<import("./uiConfig.js").UiConfigurationItem<unknown>, UiConfig>}
+     * @private
+     */
+    private _uiConfig;
     /**
      * @type {import("@vcmap/core").OverrideCollection<import("./contentTree/contentTreeItem.js").ContentTreeItem, import("./contentTree/contentTreeCollection.js").ContentTreeCollection>}
      * @private
@@ -162,10 +167,10 @@ declare class VcsUiApp extends VcsApp {
      */
     private _navbarManager;
     /**
-     * @type {import("@vcmap/core").OverrideCollection<import("./uiConfig.js").UiConfigurationItem<unknown>, UiConfig>}
+     * @type {Search}
      * @private
      */
-    private _uiConfig;
+    private _search;
     /**
      * @type {import("@vcmap/core").OverrideClassRegistry<AbstractFeatureInfoView>}
      * @private
@@ -191,11 +196,6 @@ declare class VcsUiApp extends VcsApp {
      * @private
      */
     private _contextMenuManager;
-    /**
-     * @type {Search}
-     * @private
-     */
-    private _search;
     /**
      * @type {Notifier}
      * @private
@@ -275,7 +275,14 @@ declare class VcsUiApp extends VcsApp {
         theme: import("vuetify").ThemeInstance & {
             install: (app: import("vue").App<any>) => void;
         };
-        icons: Record<string, any>;
+        icons: {
+            defaultSet: string;
+            aliases: Partial<import("vuetify").IconAliases>;
+            sets: Record<string, import("vuetify").IconSet>; /**
+             * @type {Array<function():void>}
+             * @private
+             */
+        };
         locale: {
             isRtl: import("vue").Ref<boolean>;
             rtl: import("vue").Ref<Record<string, boolean>>;
@@ -306,7 +313,7 @@ declare class VcsUiApp extends VcsApp {
                 toISO: (date: unknown) => string;
                 startOfDay: (date: unknown) => unknown;
                 endOfDay: (date: unknown) => unknown;
-                startOfWeek: (date: unknown) => unknown;
+                startOfWeek: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown;
                 endOfWeek: (date: unknown) => unknown;
                 startOfMonth: (date: unknown) => unknown;
                 endOfMonth: (date: unknown) => unknown;
@@ -329,8 +336,8 @@ declare class VcsUiApp extends VcsApp {
                 getYear: (date: unknown) => number;
                 setYear: (date: unknown, year: number) => unknown;
                 getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
-                getWeekArray: (date: unknown) => unknown[][];
-                getWeekdays: () => string[];
+                getWeekArray: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown[][];
+                getWeekdays: (firstDayOfWeek?: string | number | undefined) => string[];
                 getMonth: (date: unknown) => number;
                 setMonth: (date: unknown, month: number) => unknown;
                 getDate: (date: unknown) => number;
@@ -343,15 +350,12 @@ declare class VcsUiApp extends VcsApp {
                 setMinutes: (date: unknown, minutes: number) => unknown;
             };
         };
-        goTo: {
-            rtl: import("vue").Ref<boolean>;
-            options: Record<string, any>;
-        };
+        goTo: import("vuetify").GoToInstance;
     };
     /**
-     * @returns {import("vue-i18n").VueI18n}
+     * @returns {import("vue-i18n").Composer<{}, {}, {}, string, string, string>}
      */
-    get vueI18n(): import("vue-i18n").VueI18n<any, any, any, string, string, string, import("vue-i18n").Composer<any, any, any, string, string, string>>;
+    get vueI18n(): import("vue-i18n").Composer<{}, {}, {}, string, string, string>;
     /**
      * @returns {CategoryManager}
      */

package/src/vcsUiApp.js

@@ -267,6 +267,12 @@ class VcsUiApp extends VcsApp {
       contentTreeClassRegistry,
     );
 
+    /**
+     * @type {import("@vcmap/core").OverrideCollection<import("./uiConfig.js").UiConfigurationItem<unknown>, UiConfig>}
+     * @private
+     */
+    this._uiConfig = new UiConfig(() => this.dynamicModuleId);
+
     /**
      * @type {import("@vcmap/core").OverrideCollection<import("./contentTree/contentTreeItem.js").ContentTreeItem, import("./contentTree/contentTreeCollection.js").ContentTreeCollection>}
      * @private
@@ -298,10 +304,11 @@ class VcsUiApp extends VcsApp {
     this._navbarManager = new NavbarManager();
 
     /**
-     * @type {import("@vcmap/core").OverrideCollection<import("./uiConfig.js").UiConfigurationItem<unknown>, UiConfig>}
+     * @type {Search}
      * @private
      */
-    this._uiConfig = new UiConfig(() => this.dynamicModuleId);
+    this._search = new Search(this);
+
     /**
      * @type {import("@vcmap/core").OverrideClassRegistry<AbstractFeatureInfoView>}
      * @private
@@ -340,12 +347,6 @@ class VcsUiApp extends VcsApp {
      */
     this._contextMenuManager = new ContextMenuManager(this);
 
-    /**
-     * @type {Search}
-     * @private
-     */
-    this._search = new Search(this);
-
     /**
      * @type {Notifier}
      * @private
@@ -466,7 +467,7 @@ class VcsUiApp extends VcsApp {
   }
 
   /**
-   * @returns {import("vue-i18n").VueI18n}
+   * @returns {import("vue-i18n").Composer<{}, {}, {}, string, string, string>}
    */
   get vueI18n() {
     return this._vueI18n;
@@ -527,7 +528,7 @@ class VcsUiApp extends VcsApp {
     )[0];
     return () => {
       const base =
-        this.uiConfig.config.value.helpBaseUrl || 'https://help.vc.systems/';
+        this.uiConfig.config.helpBaseUrl || 'https://help.vc.systems/';
       const url = `${
         this.locale
       }/${subpage}/v${mayorMinorVersion}/${path.replace(/^\//, '')}`;

package/src/vuePlugins/vuetify.d.ts

@@ -48,6 +48,8 @@ export function createVcsThemes(): {
         };
         variables: {
             'hover-opacity': number;
+            'high-emphasis-opacity': number;
+            'medium-emphasis-opacity': number;
             'vcs-item-height': string;
             'vcs-font-size': string;
             'vcs-font-family': string;

package/src/vuePlugins/vuetify.js

@@ -64,6 +64,8 @@ export function createVcsThemes() {
       },
       variables: {
         'hover-opacity': 0.16,
+        'high-emphasis-opacity': 1,
+        'medium-emphasis-opacity': 1,
         'vcs-item-height': '40px',
         'vcs-font-size': '15px',
         'vcs-font-family': 'Titillium Web',
@@ -133,6 +135,9 @@ export function createVcsVuetify(i18n) {
         density: 'compact',
         ripple: false,
       },
+      VDataTable: {
+        density: 'compact',
+      },
       VSelect: {
         density: 'compact',
       },
@@ -144,6 +149,15 @@ export function createVcsVuetify(i18n) {
         density: 'compact',
         ripple: false,
       },
+      VColorPicker: {
+        elevation: 0,
+        tile: true,
+      },
+      VExpansionPanel: {
+        ripple: false,
+        elevation: 0,
+        tile: true,
+      },
     },
     defaultAssets: {
       font: {