@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.11

package/src/application/VcsApp.vue

@@ -2,7 +2,10 @@
   <v-container class="fill-height pa-0" absolute fluid>
     <Navbar />
     <v-container class="vcs-main pa-0" :class="{ 'vcs-main-xs': $vuetify.breakpoint.xs }" fluid absolute>
-      <div v-if="$vuetify.breakpoint.smAndDown" class="company-logo-mobile" />
+      <template v-if="$vuetify.breakpoint.smAndDown">
+        <img v-if="mobileLogo" :src="mobileLogo" alt="Logo" class="mobile-logo">
+        <div v-else class="company-logo-mobile mobile-logo" />
+      </template>
       <VcsMap :map-id="mapId" />
       <MapNavigation />
       <ToolboxManagerComponent />
@@ -31,15 +34,27 @@
   bottom: 56px;
 }
 
+.mobile-logo {
+  max-height: 40px;
+  max-width: 70px;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 1;
+}
+
 </style>
 
 <script>
   import { v4 as uuid } from 'uuid';
   import {
+    computed,
+    getCurrentInstance,
     onMounted,
     onUnmounted,
     provide,
-  } from '@vue/composition-api';
+    watch,
+  } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
   import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
@@ -50,8 +65,178 @@
   import { createMapButtonAction, createToggleAction } from '../actions/actionHelper.js';
   import MapNavigation from '../navigation/mapNavigation.vue';
   import VcsSettings from './VcsSettings.vue';
-  import { WindowSlot } from '../manager/window/windowManager';
+  import { WindowSlot } from '../manager/window/windowManager.js';
+  import ComponentsManager from '../manager/categoryManager/ComponentsManager.vue';
+  import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+
+  /**
+   * 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
+   * and add a listener to call. Returns a destroy hook to stop listening to the added event. If you use the VcsApp
+   * component, do not call this function, since the component will do this for you.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupPluginMountedListeners(app) {
+    [...app.plugins].forEach((plugin) => {
+      if (plugin.onVcsAppMounted) {
+        plugin.onVcsAppMounted(app);
+      }
+    });
+
+    return app.plugins.added.addEventListener((plugin) => {
+      if (plugin.onVcsAppMounted) {
+        plugin.onVcsAppMounted(app);
+      }
+    });
+  }
+
+  /**
+   * 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.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupMapNavbar(app) {
+    const iconMap = {
+      OpenlayersMap: '$vcs2d',
+      CesiumMap: '$vcs3d',
+      ObliqueMap: '$vcsObliqueView',
+    };
+
+    const mapButtonActionDestroy = {};
+    const setupMap = ({ className, name }) => {
+      if (mapButtonActionDestroy[name]) {
+        mapButtonActionDestroy[name]();
+      }
+      const { action, destroy } = createMapButtonAction(
+        {
+          name,
+          icon: iconMap[className],
+          title: `navbar.maps.${className}`,
+        },
+        name,
+        app.maps,
+      );
+      app.navbarManager.add(
+        {
+          id: `mapButton-${name}`,
+          action,
+        },
+        vcsAppSymbol,
+        ButtonLocation.MAP,
+      );
+      mapButtonActionDestroy[name] = () => {
+        app.navbarManager.remove(`mapButton-${name}`);
+        destroy();
+      };
+    };
+    [...app.maps].forEach(setupMap);
+    const mapAddedListener = app.maps.added.addEventListener(setupMap);
+
+    const mapRemovedListener = app.maps.removed.addEventListener(({ name }) => {
+      if (mapButtonActionDestroy[name]) {
+        mapButtonActionDestroy[name]();
+        delete mapButtonActionDestroy[name];
+      }
+    });
+
+    return () => {
+      mapAddedListener();
+      mapRemovedListener();
+      Object.values(mapButtonActionDestroy).forEach(cb => cb());
+    };
+  }
+
+  /**
+   * This helper function will add a Components manager button to the navbar. The Components Manager
+   * will only be shown if there is at least one category under management in the categoryManager.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupComponentsWindow(app) {
+    const { action: componentsManagerAction, destroy: destroyComponentsManagerAction } = createToggleAction(
+      {
+        name: 'components-manager',
+        icon: '$vcsComponents',
+        title: 'components.tooltip',
+      },
+      {
+        id: 'component-manager',
+        state: {
+          headerTitle: 'components.title',
+          headerIcon: '$vcsComponents',
+        },
+        component: ComponentsManager,
+        slot: WindowSlot.STATIC,
+      },
+      app.windowManager,
+      vcsAppSymbol,
+    );
+
+    // only show Components Window if we have at least one managed Category
+    if (app.categoryManager.items.value.length > 0) {
+      app.navbarManager.add(
+        { id: 'component-manager', action: componentsManagerAction },
+        vcsAppSymbol,
+        ButtonLocation.CONTENT,
+      );
+    }
+    watch(app.categoryManager.items, () => {
+      if (app.categoryManager.items.value.length > 0) {
+        if (!app.navbarManager.has('component-manager')) {
+          app.navbarManager.add(
+            { id: 'component-manager', action: componentsManagerAction },
+            vcsAppSymbol,
+            ButtonLocation.CONTENT,
+          );
+        }
+      } else {
+        app.windowManager.remove('component-manager');
+        app.navbarManager.remove('component-manager');
+      }
+    });
+
+    return () => {
+      destroyComponentsManagerAction();
+    };
+  }
 
+  /**
+   * This helper sets up a listener to sync the theming relevant keys from the {@see UiConfigObject}
+   * with a given vuetify instance. Use this helper, if you do not use the VcsApp component and wish to evaluate
+   * the theming keys. Returns a function to stop syncing.
+   * @param {VcsUiApp} app
+   * @param {import("vuetify").Framework} vuetify
+   * @returns {function():void} - call to stop syncing
+   */
+  export function setupUiConfigTheming(app, vuetify) {
+    const listeners = [
+      app.uiConfig.added.addEventListener((item) => {
+        if (item.name === 'primaryColor') {
+          vuetify.theme.themes.dark.primary = item.value;
+          vuetify.theme.themes.light.primary = item.value;
+        }
+      }),
+      app.uiConfig.removed.addEventListener((item) => {
+        if (item.name === 'primaryColor') {
+          vuetify.theme.themes.dark.primary = defaultPrimaryColor;
+          vuetify.theme.themes.light.primary = defaultPrimaryColor;
+        }
+      }),
+    ];
+
+    return () => {
+      listeners.forEach((cb) => { cb(); });
+      listeners.splice(0);
+    };
+  }
+
+  /**
+   * The base component to setup the entire application. To embed the VcsApp, use this component.
+   * @vue-prop {string} appId - the id of the app to inject. this will setup listeners on the app to call vcsAppMounted on plugins
+   * @vue-provide
+   */
   export default {
     components: {
       MapNavigation,
@@ -65,62 +250,15 @@
         type: String,
         required: true,
       },
-      app: {
-        type: Boolean,
-        default: true,
-      },
     },
     setup(props) {
       const id = uuid();
       const mapId = `mapCollection-${id}`;
+      /** @type {VcsUiApp} */
       const app = getVcsAppById(props.appId);
       provide('vcsApp', app);
 
-      const iconMap = {
-        OpenlayersMap: '$vcs2d',
-        CesiumMap: '$vcs3d',
-        ObliqueMap: '$vcsObliqueView',
-      };
-
-      const mapButtonActionDestroy = {};
-
-      const setupMap = ({ className, name }) => {
-        if (mapButtonActionDestroy[name]) {
-          mapButtonActionDestroy[name]();
-        }
-        const { action, destroy } = createMapButtonAction(
-          {
-            name,
-            icon: iconMap[className],
-            title: `navbar.maps.${className}`,
-          },
-          name,
-          app.maps,
-        );
-        app.navbarManager.add(
-          {
-            id: `mapButton-${name}`,
-            action,
-          },
-          vcsAppSymbol,
-          ButtonLocation.MAP,
-        );
-        mapButtonActionDestroy[name] = () => {
-          app.navbarManager.remove(`mapButton-${name}`);
-          destroy();
-        };
-      };
-
-      [...app.maps].forEach(setupMap);
-      const mapAddedDestroy = app.maps.added.addEventListener(setupMap);
-
-      const mapRemovedDestroy = app.maps.removed.addEventListener(({ name }) => {
-        if (mapButtonActionDestroy[name]) {
-          mapButtonActionDestroy[name]();
-          delete mapButtonActionDestroy[name];
-        }
-      });
-
+      const mapNavbarListener = setupMapNavbar(app);
       const { action: settingsAction, destroy: settingsDestroy } = createToggleAction(
         {
           name: 'settings.title',
@@ -145,57 +283,28 @@
         ButtonLocation.MENU,
       );
 
-      let pluginAdded;
-      const pluginRemoved = app.plugins.removed.addEventListener(async (plugin) => {
-        app.windowManager.removeOwner(plugin.name);
-        app.navbarManager.removeOwner(plugin.name);
-        app.toolboxManager.removeOwner(plugin.name);
-      });
+      const destroyComponentsWindow = setupComponentsWindow(app);
+      const destroyThemingListener = setupUiConfigTheming(app, getCurrentInstance().proxy.$vuetify);
 
+      let pluginMountedListener;
       onMounted(() => {
-        pluginAdded = app.plugins.added.addEventListener((plugin) => {
-          app.windowManager.removeOwner(plugin.name);
-          app.navbarManager.removeOwner(plugin.name);
-          app.toolboxManager.removeOwner(plugin.name);
-          if (plugin.onVcsAppMounted) {
-            plugin.onVcsAppMounted(app);
-          }
-        });
-        [...app.plugins].forEach((plugin) => {
-          if (plugin.onVcsAppMounted) {
-            plugin.onVcsAppMounted(app);
-          }
-        });
+        pluginMountedListener = setupPluginMountedListeners(app);
         app.maps.setTarget(mapId);
       });
 
       onUnmounted(() => {
-        if (mapAddedDestroy) {
-          mapAddedDestroy();
-        }
-        if (mapRemovedDestroy) {
-          mapRemovedDestroy();
-        }
-        if (pluginAdded) {
-          pluginAdded();
-        }
-        if (pluginRemoved) {
-          pluginRemoved();
-        }
-        Object.values(mapButtonActionDestroy).forEach(cb => cb());
-
-        if (settingsDestroy) {
-          settingsDestroy();
+        if (pluginMountedListener) {
+          pluginMountedListener();
         }
+        mapNavbarListener();
+        settingsDestroy();
+        destroyComponentsWindow();
+        destroyThemingListener();
       });
 
       return {
         mapId,
-      };
-    },
-    provide() {
-      return {
-        language: window.navigator.language.split('-')[0],
+        mobileLogo: computed(() => app.uiConfig.config.value.mobileLogo ?? app.uiConfig.config.value.logo),
       };
     },
   };

package/src/application/VcsMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="mapId" />
+  <div :id="mapId" @click.right.stop="(e) => { e.preventDefault(); }" />
 </template>
 
 <style lang="scss" scoped>

package/src/application/VcsSettings.vue

@@ -33,7 +33,7 @@
 <script>
   import {
     ref, inject, onUnmounted, getCurrentInstance, computed,
-  } from '@vue/composition-api';
+  } from 'vue';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 

package/src/application/vcsAppWrapper.vue

@@ -11,6 +11,7 @@
    * This component wraps the {@see VcsApp} component in a
    * v-app tag to ensure vuetify functionality. If you provide your own vuetify app,
    * do NOT use this wrapper, but use {@see VcsApp} directly, since you may only use v-app once.
+   * @vue-prop {string} appId - the app to wrap. will be passed to the VcsApp component
    */
   export default {
     name: 'VcsAppWrapper',

package/src/components/form-inputs-controls/VcsCheckbox.vue

@@ -9,6 +9,7 @@
         <v-checkbox
           on-icon="$vcsCheckboxChecked"
           off-icon="$vcsCheckbox"
+          class="vcs-checkbox"
           hide-details
           indeterminate-icon="$vcsCheckboxIndeterminate"
           :dense="$attrs.dense!==false"
@@ -28,6 +29,18 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
+.vcs-checkbox {
+  ::v-deep {
+    label.v-label,
+    .v-icon.v-icon{
+      color: inherit;
+    }
+    .v-input--selection-controls__input {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
 .v-input--selection-controls {
   margin: 0;
   padding: 0;

package/src/components/form-inputs-controls/VcsColorPicker.vue

@@ -28,7 +28,7 @@
   import {
     onMounted,
     onUnmounted,
-  } from '@vue/composition-api';
+  } from 'vue';
   import { Subject } from 'rxjs';
   import { debounceTime, takeUntil } from 'rxjs/operators';
 

package/src/components/form-inputs-controls/VcsRadio.vue

@@ -0,0 +1,123 @@
+<template>
+  <VcsTooltip
+    :tooltip-position="tooltipPosition"
+    :tooltip="errorMessage"
+    color="error"
+  >
+    <template #activator="{ on, attrs }">
+      <span v-on="on">
+        <v-radio-group
+          hide-details
+          class="w-full vcs-radio-group"
+          :dense="$attrs.dense!==false"
+          :ripple="false"
+          v-bind="{...$attrs, ...attrs}"
+          v-on="{...$listeners, ...on}"
+          @update:error="setError"
+        >
+          <v-radio
+            v-for="(item, idx) in items"
+            :id="`radio-${idx}`"
+            :key="`radio-${idx}`"
+            :ripple="false"
+            :color="item.color ?? 'secondary'"
+            :value="item.value ?? item"
+            :disabled="item.disabled ?? false"
+            :class="$attrs.dense!==false ? 'vcs-radio-dense' : 'vcs-radio'"
+          >
+            <template #label>
+              <VcsLabel :html-for="`radio-${idx}`" :dense="!!$attrs.dense">
+                {{ $t(item.label ?? item) }}
+              </VcsLabel>
+            </template>
+          </v-radio>
+        </v-radio-group>
+      </span>
+    </template>
+  </VcsTooltip>
+</template>
+<style lang="scss" scoped>
+@import "../../styles/vcsFont";
+.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
+  margin-bottom: 0;
+}
+.v-input{
+  &.vcs-radio-group{
+    ::v-deep {
+      margin-top: 0;
+      padding-top: 0;
+      label.v-label,
+      .v-icon.v-icon{
+        font-size: $base-font-size;
+        color: inherit;
+      }
+      .v-radio:not(:last-child):not(:only-child){
+        margin-bottom: 0;
+      }
+      .v-input--selection-controls__input{
+        margin: 0;
+      }
+    }
+  }
+}
+.vcs-radio {
+  height: 40px;
+  align-items: center;
+}
+.vcs-radio-dense {
+  height: 32px;
+  align-items: center;
+}
+</style>
+<script>
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import VcsLabel from './VcsLabel.vue';
+  import validate from '../notification/validation.js';
+
+  /**
+   * @typedef {Object} VcsRadioItem
+   * @property {string} label
+   * @property {string} [color='secondary']
+   * @property {any} value
+   * @property {boolean} [disabled=false]
+   */
+
+  /**
+   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-radio-group/ |vuetify v-radio-group} using
+   * {@link https://vuetifyjs.com/en/api/v-radio/ |vuetify v-radio}.
+   * Provides two height options depending on "dense" property:
+   * - if dense is set true (default), height is 24 px
+   * - if dense is set false, height is 32 px
+   * Provides VcsTooltip to show error messages
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {Array<string|VcsRadioItem>} items - A list of options. If strings are provided, the string is used as label and value.
+   */
+  export default {
+    name: 'VcsRadio',
+    components: { VcsTooltip, VcsLabel },
+    props: {
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      items: {
+        type: Array,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        errorMessage: '',
+      };
+    },
+    methods: {
+      setError() {
+        const rules = [...this.$attrs.rules].concat(this.$attrs.errorMessages);
+        this.errorMessage = validate(rules, this.$attrs.value).join('\n');
+      },
+    },
+    model: {
+      event: 'change',
+    },
+  };
+</script>

package/src/components/form-output/VcsFormattedNumber.vue

@@ -27,7 +27,7 @@
 }
 </style>
 <script>
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
 
   /**
    * Converts a number (e.g. 12345678,9) to a locale-aware and

package/src/components/lists/VcsActionList.vue

@@ -52,19 +52,28 @@
    */
 
   /**
-   * @param {Array<VcsAction>} actions
+   * @param {VcsAction} action
    * @returns {boolean}
    */
-  export function validateActions(actions) {
-    return actions.every(item => is(item, {
+  export function validateAction(action) {
+    return is(action, {
       name: String,
       title: [undefined, String],
       icon: [undefined, String],
       callback: Function,
       active: [undefined, Boolean],
-    }));
+    });
+  }
+
+  /**
+   * @param {Array<VcsAction>} actions
+   * @returns {boolean}
+   */
+  export function validateActions(actions) {
+    return actions.every(validateAction);
   }
 
+
   /**
    * @description
    * A component rendering a list of actions with overflow mechanic using

package/src/components/lists/VcsTreeview.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d-contents">
     <VcsTreeviewSearchbar
-      v-if="hasSearchbar"
+      v-if="showSearchbar"
       :placeholder="searchbarPlaceholder"
       v-model="search"
     />
@@ -55,7 +55,7 @@
 </style>
 
 <script>
-  import { getCurrentInstance, ref } from '@vue/composition-api';
+  import { getCurrentInstance, ref } from 'vue';
   import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
 
@@ -63,14 +63,14 @@
    * @description extends API of https://vuetifyjs.com/en/api/v-treeview/
    * Can render dynamic components as leaf items.
    * In order to display an item needs to be registered and added to `availableComponents`.
-   * @vue-prop {boolean} [hasSearchbar=false] - Whether there is a searchbar for this treeview
+   * @vue-prop {boolean} [showSearchbar=false] - Whether there is a searchbar for this treeview
    * @vue-prop {string}  [searchbarPlaceholder] - Placeholder text for the searchbar, will be translated
    */
   export default {
     name: 'VcsTreeview',
     components: { VcsTreeviewSearchbar, VcsTreeviewLeaf },
     props: {
-      hasSearchbar: {
+      showSearchbar: {
         type: Boolean,
         default: false,
       },

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -13,7 +13,7 @@
       <span ref="imgContainer" />
     </span>
 
-    <div class="position-relative col-8 pa-0 d-flex align-center">
+    <div class="position-relative col-8 pa-0 d-flex align-center treeview-label" :title="$t(item.title)">
       <span>{{ $t(item.title) }}</span>
     </div>
     <VcsActionButtonList
@@ -27,6 +27,13 @@
     />
   </div>
 </template>
+<style lang="css" scoped>
+.treeview-label span{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
 
 <script>
   import
@@ -34,7 +41,7 @@
     computed,
     onMounted,
     ref,
-  } from '@vue/composition-api';
+  } from 'vue';
 
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
 

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -104,7 +104,7 @@
 
 
 <script>
-  import { onMounted, onUnmounted } from '@vue/composition-api';
+  import { onMounted, onUnmounted } from 'vue';
 
   import { Subject } from 'rxjs';
   import { debounceTime } from 'rxjs/operators';
@@ -147,7 +147,6 @@
       onUnmounted(() => sub.unsubscribe());
 
       return {
-        sub,
         handleInput: (val) => {
           sub.next(val);
         },