@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.24

package/src/styles/variables.scss

@@ -1,41 +1,42 @@
 @import 'shades.scss';
+@import 'vcsFont.scss';
 
 /** Global **/
-$font-size: 14px;
-$font-size-root: 14px;
+$font-size: $vcs-font-size;
+$font-size-root: $vcs-font-size;
 
 $material-dark: (
-        'background': map-get($shades, 'black'),
-        'cards': map-get($shades, 'black'),
-        'text-fields': (
-                'outlined': var(--v-base-base),
-                'outlined-hover': var(--v-base-base),
-        ),
-        'input-bottom-line': var(--v-base-base),
-        'dividers': var(--v-base-lighten2),
-        'toolbar': rgba(map-get($shades, 'black'), 0.8),
-        'table': (
-                'hover': var(--v-base-lighten4),
-        ),
+  'background': map-get($shades, 'black'),
+  'cards': map-get($shades, 'black'),
+  'text-fields': (
+    'outlined': var(--v-base-base),
+    'outlined-hover': var(--v-base-base),
+  ),
+  'input-bottom-line': var(--v-base-base),
+  'dividers': var(--v-base-lighten2),
+  'toolbar': rgba(map-get($shades, 'black'), 0.8),
+  'table': (
+    'hover': var(--v-base-lighten4),
+  ),
 );
 $material-light: (
-        'text-fields': (
-                'outlined': var(--v-base-base),
-                'outlined-hover': var(--v-base-base),
-        ),
-        'input-bottom-line': var(--v-base-base),
-        'text': (
-                'primary': map-get($shades, 'black'),
-                'disabled': rgba(map-get($shades, 'black'), 0.3),
-        ),
-        'buttons': (
-                'disabled': rgba(map-get($shades, 'black'), 0.5),
-        ),
-        'dividers': var(--v-base-lighten2),
-        'toolbar': rgba(map-get($shades, 'white'), 0.8),
-        'table': (
-                'hover': var(--v-base-lighten4),
-        ),
+  'text-fields': (
+    'outlined': var(--v-base-base),
+    'outlined-hover': var(--v-base-base),
+  ),
+  'input-bottom-line': var(--v-base-base),
+  'text': (
+    'primary': map-get($shades, 'black'),
+    'disabled': rgba(map-get($shades, 'black'), 0.3),
+  ),
+  'buttons': (
+    'disabled': rgba(map-get($shades, 'black'), 0.5),
+  ),
+  'dividers': var(--v-base-lighten2),
+  'toolbar': rgba(map-get($shades, 'white'), 0.8),
+  'table': (
+    'hover': var(--v-base-lighten4),
+  ),
 );
 
 // input font and icon
@@ -43,7 +44,7 @@ $input-font-size: $font-size;
 $input-icon-height: 16px; // 24px !default;
 $input-icon-width: 16px; // 24px !default;
 $input-icon-min-width: 16px; // 24px !default;
-
+$input-icon-font-size: 16px;
 
 /** VcsTextfield **/
 
@@ -71,8 +72,9 @@ $text-field-outlined-label-position-x: 6px;
 $text-field-outlined-label-position-y: -14px;
 $text-field-outlined-dense-label-position-x: 2px;
 $text-field-outlined-dense-label-position-y: -10px;
+$label-font-size: $font-size; // 1rem !default;
 $text-field-label-top: 2px; // 6px !default;
-$text-field-label-active-transform: translateY(-14px) scale(.75); //translateY(-18px) scale(.75) !default;
+$text-field-label-active-transform: translateY(-14px) scale(0.75); //translateY(-18px) scale(.75) !default;
 
 /** VcsTextarea **/
 $textarea-box-enclosed-single-outlined-margin-top: 0; // 10px !default;
@@ -130,4 +132,7 @@ $snackbar-bottom: 36px;
 $snackbar-background-color: rgba(0, 0, 0, 0.8);
 $snackbar-content-padding: 8px;
 $snackbar-action-margin: 8px;
-$snackbar-wrapper-min-height: 36px;
+$snackbar-wrapper-min-height: 36px;
+
+/** Datatable **/
+$data-table-regular-row-font-size: $font-size;

package/src/styles/vcsFont.scss

@@ -4,7 +4,8 @@
   font-style: normal;
   font-weight: 400;
   src: url(../assets/font/TitilliumWeb-Regular.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
@@ -12,11 +13,11 @@
   font-style: normal;
   font-weight: 400;
   src: url(../assets/font/TitilliumWeb-Regular.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
 }
 
 // fonts
-$base-font-size: 14px; // base font-size minimum size
-
+$vcs-font-size: 13px;
 // header
-

package/src/styles/vcsGrid.scss

@@ -2,3 +2,12 @@
 $line-height-base: 40px; // header lines
 $line-height-dense: 32px; // rows in form field
 
+.gap-1 {
+  gap: 4px;
+}
+.gap-2 {
+  gap: 8px;
+}
+.gap-3 {
+  gap: 12px;
+}

package/src/uiConfig.js

@@ -71,7 +71,9 @@ class UiConfig extends Collection {
    * @inheritDoc
    */
   destroy() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners = [];
     super.destroy();
   }

package/src/vcsUiApp.js

@@ -18,7 +18,9 @@ import {
   serializePlugin,
   deserializePlugin,
 } from './pluginHelper.js';
-import ToolboxManager, { setupDefaultGroups } from './manager/toolbox/toolboxManager.js';
+import ToolboxManager, {
+  setupDefaultGroups,
+} from './manager/toolbox/toolboxManager.js';
 import WindowManager from './manager/window/windowManager.js';
 import NavbarManager from './manager/navbarManager.js';
 import { createContentTreeCollection } from './contentTree/contentTreeCollection.js';
@@ -35,7 +37,7 @@ import Search from './search/search.js';
 import Notifier from './notifier/notifier.js';
 
 /**
- * @typedef {import("@vcmap/core").VcsAppConfig} VcsUiAppConfig
+ * @typedef {import("@vcmap/core").VcsModuleConfig} VcsUiModuleConfig
  * @property {Array<Object>} [plugins]
  * @property {Array<ContentTreeItemOptions>} [contentTree]
  * @property {Array<UiConfigurationItem>} [uiConfig]
@@ -73,7 +75,6 @@ import Notifier from './notifier/notifier.js';
  * @api
  */
 
-
 /**
  * @interface VcsComponentManager
  * @template {Object} T - the component type
@@ -106,7 +107,9 @@ class VcsUiApp extends VcsApp {
    * Gets the version of the @vcmap/ui npm package
    * @returns {string}
    */
-  static getVersion() { return version; }
+  static getVersion() {
+    return version;
+  }
 
   constructor() {
     super();
@@ -138,17 +141,26 @@ class VcsUiApp extends VcsApp {
         this._contextMenuManager.removeOwner(plugin.name);
         this._search.removeOwner(plugin.name);
         if (plugin.i18n) {
-          this.i18n.addPluginMessages(plugin.name, plugin[moduleIdSymbol], plugin.i18n);
+          this.i18n.addPluginMessages(
+            plugin.name,
+            plugin[moduleIdSymbol],
+            plugin.i18n,
+          );
         }
         if (plugin.initialize) {
           let state;
           if (this._cachedAppState.moduleIds.includes(plugin[moduleIdSymbol])) {
-            state = this._cachedAppState.plugins.find(s => s.name === plugin.name);
+            state = this._cachedAppState.plugins.find(
+              (s) => s.name === plugin.name,
+            );
           }
           try {
             plugin.initialize(this, state?.state);
           } catch (e) {
-            getLogger().error(`Error in plugin ${plugin.name} initialize hook`, e);
+            getLogger().error(
+              `Error in plugin ${plugin.name} initialize hook`,
+              e,
+            );
           }
         }
       }),
@@ -167,7 +179,9 @@ class VcsUiApp extends VcsApp {
      * @type {OverrideClassRegistry<ContentTreeItem>}
      * @private
      */
-    this._contentTreeClassRegistry = new OverrideClassRegistry(contentTreeClassRegistry);
+    this._contentTreeClassRegistry = new OverrideClassRegistry(
+      contentTreeClassRegistry,
+    );
 
     /**
      * @type {OverrideContentTreeCollection}
@@ -256,85 +270,113 @@ class VcsUiApp extends VcsApp {
    * @type {import("@vcmap/core").OverrideCollection<VcsPlugin>}
    * @readonly
    */
-  get plugins() { return this._plugins; }
+  get plugins() {
+    return this._plugins;
+  }
 
   /**
    * @type {OverrideContentTreeCollection}
    * @readonly
    */
-  get contentTree() { return this._contentTree; }
+  get contentTree() {
+    return this._contentTree;
+  }
 
   /**
    * @type {OverrideClassRegistry<ContentTreeItem>}
    * @readonly
    */
-  get contentTreeClassRegistry() { return this._contentTreeClassRegistry; }
+  get contentTreeClassRegistry() {
+    return this._contentTreeClassRegistry;
+  }
 
   /**
    * @returns {ToolboxManager}
    * @readonly
    */
-  get toolboxManager() { return this._toolboxManager; }
+  get toolboxManager() {
+    return this._toolboxManager;
+  }
 
   /**
    * @returns {WindowManager}
    * @readonly
    */
-  get windowManager() { return this._windowManager; }
+  get windowManager() {
+    return this._windowManager;
+  }
 
   /**
    * @returns {NavbarManager}
    * @readonly
    */
-  get navbarManager() { return this._navbarManager; }
+  get navbarManager() {
+    return this._navbarManager;
+  }
 
   /**
    * @returns {FeatureInfo}
    * @readonly
    */
-  get featureInfo() { return this._featureInfo; }
+  get featureInfo() {
+    return this._featureInfo;
+  }
 
   /**
    * @type {OverviewMap}
    * @readonly
    */
-  get overviewMap() { return this._overviewMap; }
+  get overviewMap() {
+    return this._overviewMap;
+  }
 
   /**
    * @type {I18nCollection}
    * @readonly
    */
-  get i18n() { return this._i18n; }
+  get i18n() {
+    return this._i18n;
+  }
 
   /**
    * @returns {CategoryManager}
    * @readonly
    */
-  get categoryManager() { return this._categoryManager; }
+  get categoryManager() {
+    return this._categoryManager;
+  }
 
   /**
    * @type {ContextMenuManager}
    * @readonly
    */
-  get contextMenuManager() { return this._contextMenuManager; }
+  get contextMenuManager() {
+    return this._contextMenuManager;
+  }
 
   /**
    * @type {Search}
    * @readonly
    */
-  get search() { return this._search; }
+  get search() {
+    return this._search;
+  }
 
   /**
    * @type {UiConfig}
    * @readonly
    */
-  get uiConfig() { return this._uiConfig; }
+  get uiConfig() {
+    return this._uiConfig;
+  }
 
   /**
    * @type {Notifier}
    * @readonly
    */
-  get notifier() { return this._notifier; }
+  get notifier() {
+    return this._notifier;
+  }
 
   /**
    * Get the state of the application. When passed the forUrl flag, only a minimal set of states shall be provided for a sharable link to the current state (to ensure
@@ -351,16 +393,21 @@ class VcsUiApp extends VcsApp {
 
     state.activeMap = this.maps.activeMap.name;
     const viewpoint = await this.maps.activeMap.getViewpoint();
-    state.activeViewpoint = viewpoint?.isValid?.() ? viewpoint.toJSON() : undefined;
+    state.activeViewpoint = viewpoint?.isValid?.()
+      ? viewpoint.toJSON()
+      : undefined;
     state.layers = [...this.layers]
-      .filter(l => l.isSupported(this.maps.activeMap) &&
-        l[moduleIdSymbol] !== defaultDynamicModuleId &&
-        l[moduleIdSymbol] !== volatileModuleId &&
-        (
-          ((l.active || l.loading) && !l.activeOnStartup) ||
-          (!l.active && l.activeOnStartup) ||
-          ((l.active || l.loading) && l.style !== l.defaultStyle && this.styles.has(l.style))
-        ))
+      .filter(
+        (l) =>
+          l.isSupported(this.maps.activeMap) &&
+          l[moduleIdSymbol] !== defaultDynamicModuleId &&
+          l[moduleIdSymbol] !== volatileModuleId &&
+          (((l.active || l.loading) && !l.activeOnStartup) ||
+            (!l.active && l.activeOnStartup) ||
+            ((l.active || l.loading) &&
+              l.style !== l.defaultStyle &&
+              this.styles.has(l.style))),
+      )
       .map((l) => {
         const layerState = {
           name: l.name,
@@ -378,11 +425,25 @@ class VcsUiApp extends VcsApp {
         return layerState;
       });
 
-    state.plugins = await Promise.all([...this.plugins]
-      .filter(p => p[moduleIdSymbol] !== defaultDynamicModuleId &&
-        p[moduleIdSymbol] !== volatileModuleId &&
-        typeof p.getState === 'function')
-      .map(async p => ({ name: p.name, state: await p.getState(forUrl) })));
+    const plugins = await Promise.all(
+      [...this.plugins]
+        .filter(
+          (p) =>
+            p[moduleIdSymbol] !== defaultDynamicModuleId &&
+            p[moduleIdSymbol] !== volatileModuleId &&
+            typeof p.getState === 'function',
+        )
+        .map(async (p) => {
+          try {
+            return { name: p.name, state: await p.getState(forUrl) };
+          } catch (e) {
+            getLogger().error(e);
+            return null;
+          }
+        }),
+    );
+
+    state.plugins = plugins.filter((p) => p);
 
     if (this.maps.activeMap instanceof ObliqueMap) {
       state.activeObliqueCollection = this.maps.activeMap.collection.name;
@@ -398,21 +459,23 @@ class VcsUiApp extends VcsApp {
   async _parseModule(module) {
     const { config } = module;
     if (Array.isArray(config.plugins)) {
-      const plugins = await Promise.all(config.plugins.map(async (pluginConfig) => {
-        const plugin = await loadPlugin(pluginConfig.name, pluginConfig);
-        if (!plugin) {
-          return null;
-        }
-        if (!isValidPackageName(plugin.name)) {
-          getLogger().warning(`plugin ${plugin.name} has no valid package name!`);
-        }
-        plugin[moduleIdSymbol] = module._id;
-        return plugin;
-      }));
+      const plugins = await Promise.all(
+        config.plugins.map(async (pluginConfig) => {
+          const plugin = await loadPlugin(pluginConfig.name, pluginConfig);
+          if (!plugin) {
+            return null;
+          }
+          if (!isValidPackageName(plugin.name)) {
+            getLogger().warning(
+              `plugin ${plugin.name} has no valid package name!`,
+            );
+          }
+          plugin[moduleIdSymbol] = module._id;
+          return plugin;
+        }),
+      );
 
-      plugins
-        .filter(p => p)
-        .map(p => this._plugins.override(p));
+      plugins.filter((p) => p).map((p) => this._plugins.override(p));
     }
     if (Array.isArray(config.i18n)) {
       await this.i18n.parseItems(config.i18n, module._id);
@@ -420,7 +483,10 @@ class VcsUiApp extends VcsApp {
     await super._parseModule(module);
     await this._contentTree.parseItems(config.contentTree, module._id);
     await this._uiConfig.parseItems(config.uiConfig, module._id);
-    await this._featureInfo.collection.parseItems(config.featureInfo, module._id);
+    await this._featureInfo.collection.parseItems(
+      config.featureInfo,
+      module._id,
+    );
   }
 
   /**
@@ -440,30 +506,59 @@ class VcsUiApp extends VcsApp {
             layer.deactivate();
           }
 
-          if (layerState.styleName && this.styles.hasKey(layerState.styleName) && layer.setStyle) {
+          if (
+            layerState.styleName &&
+            this.styles.hasKey(layerState.styleName) &&
+            layer.setStyle
+          ) {
             layer.setStyle(this.styles.getByKey(layerState.styleName));
           }
         }
       });
-      if (this._cachedAppState.activeMap && this.maps.hasKey(this._cachedAppState.activeMap)) {
+      if (
+        this._cachedAppState.activeMap &&
+        this.maps.hasKey(this._cachedAppState.activeMap)
+      ) {
         await this.maps.setActiveMap(this._cachedAppState.activeMap);
       }
       if (
         this._cachedAppState.activeObliqueCollection &&
         this.maps.activeMap instanceof ObliqueMap &&
-        this.obliqueCollections.hasKey(this._cachedAppState.activeObliqueCollection)
+        this.obliqueCollections.hasKey(
+          this._cachedAppState.activeObliqueCollection,
+        )
       ) {
         await this.maps.activeMap.setCollection(
-          this.obliqueCollections.getByKey(this._cachedAppState.activeObliqueCollection),
-          this._cachedAppState.activeViewpoint,
+          this.obliqueCollections.getByKey(
+            this._cachedAppState.activeObliqueCollection,
+          ),
+          new Viewpoint(this._cachedAppState.activeViewpoint),
         );
       } else if (this._cachedAppState.activeViewpoint && this.maps.activeMap) {
-        await this.maps.activeMap.gotoViewpoint(new Viewpoint(this._cachedAppState.activeViewpoint));
+        await this.maps.activeMap.gotoViewpoint(
+          new Viewpoint(this._cachedAppState.activeViewpoint),
+        );
       }
-      this._cachedAppState.moduleIds.splice(this._cachedAppState.moduleIds.indexOf(module._id), 1);
+      this._cachedAppState.moduleIds.splice(
+        this._cachedAppState.moduleIds.indexOf(module._id),
+        1,
+      );
     }
   }
 
+  /**
+   * @param {string} moduleId
+   * @returns {VcsUiModuleConfig}
+   */
+  serializeModule(moduleId) {
+    const config = super.serializeModule(moduleId);
+    config.uiConfig = this._uiConfig.serializeModule(moduleId);
+    config.featureInfo = this._featureInfo.collection.serializeModule(moduleId);
+    config.i18n = this._i18n.serializeModule(moduleId);
+    config.plugins = this._plugins.serializeModule(moduleId);
+    return config;
+  }
+
   /**
    * @param {string} moduleId
    * @returns {Promise<void>}
@@ -490,7 +585,9 @@ class VcsUiApp extends VcsApp {
     this.categoryManager.destroy();
     this.contextMenuManager.destroy();
     this._overviewMap.destroy();
-    this._pluginListeners.forEach((cb) => { cb(); });
+    this._pluginListeners.forEach((cb) => {
+      cb();
+    });
     this._pluginListeners = [];
     destroyCollection(this._plugins);
     destroyCollection(this._contentTree);

package/src/vuePlugins/i18n.js

@@ -5,7 +5,6 @@ import { vcsAppSymbol } from '../pluginHelper.js';
 import de from '../i18n/de.js';
 import en from '../i18n/en.js';
 
-
 Vue.use(VueI18n);
 
 /**
@@ -46,7 +45,7 @@ function setI18n(messages, i18n) {
  * @returns {function():void} returns a destroy function
  */
 export function setupI18n(app, i18n) {
-  const defaultMessages = { en, de };
+  const defaultMessages = { name: 'default', en, de };
   defaultMessages[i18nPluginSymbol] = vcsAppSymbol;
   app.i18n.add(defaultMessages);
 
@@ -64,7 +63,8 @@ export function setupI18n(app, i18n) {
     }),
   ];
   return function tearDownI18nSetup() {
-    destroyFunctions.forEach((destroy) => { destroy(); });
+    destroyFunctions.forEach((destroy) => {
+      destroy();
+    });
   };
 }
-

package/src/vuePlugins/vuetify.js

@@ -19,6 +19,9 @@ export const defaultPrimaryColor = {
  * @returns {import("vuetify").default}
  */
 export function createVuetify() {
+  const dark =
+    window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false;
+
   return new Vuetify({
     treeShake: false,
     defaultAssets: {
@@ -27,6 +30,7 @@ export function createVuetify() {
       },
     },
     theme: {
+      dark,
       options: {
         customProperties: true,
       },