@vcmap/ui 5.0.0-rc.15 → 5.0.0-rc.17

package/plugins/test/windowManagerExample.vue

@@ -51,6 +51,9 @@
           component: EmptyComponent,
           headerComponent: MyCustomHeader,
           slot: WindowSlot.DYNAMIC_RIGHT,
+          props: {
+            sample: 'A window property',
+          },
         },
         {
           id: 'dynamicRight2',
@@ -85,7 +88,7 @@
         {
           id: 'position1',
           state: {
-            headerTitle: 'Example position1',
+            headerTitle: 'Example position1 relative',
           },
           component: VcsContent,
           position: {
@@ -98,15 +101,17 @@
         {
           id: 'position2',
           state: {
-            hideHeader: true,
-            headerTitle: 'Example position2',
+            hideHeader: false,
+            headerTitle: 'Example position2 absolute',
           },
           component: EmptyComponent,
           position: {
-            left: '35%',
-            right: '35%',
-            top: '40%',
-            bottom: '20%',
+            left: '200px',
+            top: '300px',
+            minHeight: '250px',
+            maxHeight: '500px',
+            minWidth: '400px',
+            maxWidth: '1000px',
           },
         },
       ];

package/plugins/wizardExample/index.js

@@ -0,0 +1,41 @@
+import { createToggleAction, ButtonLocation, WindowSlot } from '@vcmap/ui';
+import WizardExample from './wizardExample.vue';
+
+export default async () => {
+  return {
+    name: 'wizardExample',
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'wizardExample',
+          icon: '$vcsLegend',
+          title: 'VCS Wizard Example',
+        },
+        {
+          id: 'wizard-example',
+          component: WizardExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'VCS Wizard',
+            headerIcon: '$vcsWand',
+            styles: { width: '350px', height: 'auto' },
+          },
+        },
+        app.windowManager,
+        'wizardExample',
+      );
+      app.navbarManager.add(
+        { id: 'wizard-example', action },
+        'wizardExample',
+        ButtonLocation.TOOL,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+};

package/plugins/wizardExample/wizardExample.vue

@@ -0,0 +1,77 @@
+<template>
+  <VcsWizard
+    v-model="step"
+  >
+    <v-stepper-step
+      step="1"
+      editable
+      :complete="step > 1"
+    >
+      This is the first step
+    </v-stepper-step>
+    <v-stepper-content
+      step="1"
+    >
+      <v-sheet>
+        This is the content of the first step.
+      </v-sheet>
+      <VcsButton
+        @click="increaseStep()"
+        class="my-2"
+      >
+        Next
+      </VcsButton>
+    </v-stepper-content>
+    <v-stepper-step
+      :rules="[() => false]"
+      step="2"
+      editable
+    >
+      This is the second step
+    </v-stepper-step>
+    <v-stepper-content
+      step="2"
+    >
+      <VcsSelect
+        :items="['this', 'is', 'a', 'test']"
+        label="Select"
+        class="my-2"
+      />
+      <VcsButton
+        @click="decreaseStep()"
+      >
+        Back
+      </VcsButton>
+    </v-stepper-content>
+  </VcsWizard>
+</template>
+
+<script>
+  import { VcsWizard, VcsButton, VcsSelect } from '@vcmap/ui';
+  import { VStepperStep, VStepperContent, VSheet } from 'vuetify/lib';
+  import { ref } from 'vue';
+
+  export default {
+    name: 'WizardExample',
+    components: {
+      VcsWizard,
+      VStepperStep,
+      VStepperContent,
+      VSheet,
+      VcsButton,
+      VcsSelect,
+    },
+    setup() {
+      const step = ref(1);
+      return {
+        step,
+        increaseStep() { step.value += 1; },
+        decreaseStep() { step.value -= 1; },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/src/actions/actionHelper.js

@@ -4,7 +4,8 @@ import { Collection, Extent, MapCollection, mercatorProjection, Viewpoint } from
 import { Feature } from 'ol';
 import { reactive, ref } from 'vue';
 import { vcsAppSymbol } from '../pluginHelper.js';
-import { getWindowPositionOptions, WindowSlot } from '../manager/window/windowManager.js';
+import { WindowSlot } from '../manager/window/windowManager.js';
+import { getWindowPositionOptions } from '../manager/window/windowHelper.js';
 import SearchComponent from '../search/searchComponent.vue';
 
 /**
@@ -189,11 +190,11 @@ export function createOverviewMapAction(overviewMap, windowComponent, windowMana
  * at the clicked position (the actions position) by default, unless the window component already has a position set.
  * @param {ActionOptions} actionOptions
  * @param {WindowComponentOptions} modalComponent
- * @param {WindowManager}  windowManager
+ * @param {VcsUiApp}  app
  * @param {string|symbol} owner
  * @returns {{action: VcsAction, destroy: Function}}
  */
-export function createModalAction(actionOptions, modalComponent, windowManager, owner) {
+export function createModalAction(actionOptions, modalComponent, app, owner) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
@@ -216,7 +217,7 @@ export function createModalAction(actionOptions, modalComponent, windowManager,
         left: 0,
         right: 0,
       });
-      elem.onclick = () => { windowManager.remove(id); };
+      elem.onclick = () => { app.windowManager.remove(id); };
       document.body.appendChild(elem);
     }
   };
@@ -235,20 +236,20 @@ export function createModalAction(actionOptions, modalComponent, windowManager,
       if (!this.active) {
         this.active = true;
         const { left, top, width } = event.currentTarget.getBoundingClientRect();
-        const position = getWindowPositionOptions(left + width, top);
+        const position = getWindowPositionOptions(left + width, top, app.maps.target);
         const state = { ...modalComponent?.state, hideHeader: true };
-        windowManager.add({ position, ...modalComponent, id, state }, owner);
-        addModal(windowManager.componentIds.length - 2);
+        app.windowManager.add({ position, ...modalComponent, id, state }, owner);
+        addModal(app.windowManager.componentIds.length - 2);
       } else {
         this.active = false;
-        windowManager.remove(id);
+        app.windowManager.remove(id);
       }
       return null;
     },
   };
 
   const listeners = [
-    windowManager.removed.addEventListener(({ id: windowId }) => {
+    app.windowManager.removed.addEventListener(({ id: windowId }) => {
       if (windowId === id) {
         action.active = false;
         removeModal();

package/src/application/VcsApp.vue

@@ -20,6 +20,7 @@
       <MapNavigation />
       <ToolboxManagerComponent />
       <WindowManagerComponent />
+      <NotifierComponent />
     </v-container>
     <v-footer absolute v-if="$vuetify.breakpoint.smAndUp" min-height="22px">
       <VcsAttributionsFooter :entries="attributionEntries" :attribution-action="attributionAction" />
@@ -73,6 +74,7 @@
   } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
   import { VContainer, VFooter } from 'vuetify/lib';
+  import { getLogger } from '@vcsuite/logger';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
   import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
   import { ButtonLocation } from '../manager/navbarManager.js';
@@ -83,7 +85,7 @@
   import MapNavigation from '../navigation/mapNavigation.vue';
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
-  import ComponentsManager from '../manager/categoryManager/ComponentsManager.vue';
+  import CategoryManager from '../manager/categoryManager/CategoryManager.vue';
   import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
   import VcsLegend from '../legend/vcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
@@ -91,6 +93,7 @@
   import VcsButton from '../components/buttons/VcsButton.vue';
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
+  import NotifierComponent from '../notifier/notifierComponent.vue';
 
   /**
    * You should call this function in the component providing the vcsUiApp to your
@@ -101,17 +104,23 @@
    * @returns {function():void}
    */
   export function setupPluginMountedListeners(app) {
-    [...app.plugins].forEach((plugin) => {
+    /**
+     * wrapped execution of onVcsAppMounted hook
+     * @param {VcsPlugin} plugin
+     */
+    function onVcsAppMounted(plugin) {
       if (plugin.onVcsAppMounted) {
-        plugin.onVcsAppMounted(app);
+        try {
+          plugin.onVcsAppMounted(app);
+        } catch (e) {
+          getLogger('VcsUiApp').error(`Error in plugin ${plugin.name} onVcsAppMounted hook`, e);
+        }
       }
-    });
+    }
 
-    return app.plugins.added.addEventListener((plugin) => {
-      if (plugin.onVcsAppMounted) {
-        plugin.onVcsAppMounted(app);
-      }
-    });
+    [...app.plugins].forEach(onVcsAppMounted);
+
+    return app.plugins.added.addEventListener(onVcsAppMounted);
   }
 
   /**
@@ -267,56 +276,54 @@
   }
 
   /**
-   * This helper function will add a Components manager button to the navbar. The Components Manager
+   * This helper function will add a category manager button to the navbar. The category 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(
+  export function setupCategoryManagerWindow(app) {
+    const id = 'category-manager';
+    const { action: categoryManagerAction, destroy } = createToggleAction(
       {
-        name: 'components-manager',
+        name: id,
         icon: '$vcsComponents',
-        title: 'components.tooltip',
+        title: 'categoryManager.tooltip',
       },
       {
-        id: 'component-manager',
+        id,
         state: {
-          headerTitle: 'components.title',
+          headerTitle: 'categoryManager.title',
           headerIcon: '$vcsComponents',
         },
-        component: ComponentsManager,
+        component: CategoryManager,
         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.value, () => {
-      if (app.categoryManager.items.value.length > 0) {
-        if (!app.navbarManager.has('component-manager')) {
+    const setupCategories = () => {
+      if (app.categoryManager.componentIds.length > 0) {
+        if (!app.navbarManager.has(id)) {
           app.navbarManager.add(
-            { id: 'component-manager', action: componentsManagerAction },
+            { id, action: categoryManagerAction },
             vcsAppSymbol,
             ButtonLocation.CONTENT,
           );
         }
       } else {
-        app.windowManager.remove('component-manager');
-        app.navbarManager.remove('component-manager');
+        app.windowManager.remove(id);
+        app.navbarManager.remove(id);
       }
-    });
+    };
+    const addedListener = app.categoryManager.added.addEventListener(setupCategories);
+    const removedListener = app.categoryManager.removed.addEventListener(setupCategories);
+    setupCategories();
 
     return () => {
-      destroyComponentsManagerAction();
+      destroy();
+      addedListener();
+      removedListener();
     };
   }
 
@@ -405,6 +412,7 @@
       ToolboxManagerComponent,
       VContainer,
       VFooter,
+      NotifierComponent,
     },
     props: {
       appId: {
@@ -422,7 +430,7 @@
       const mapNavbarListener = setupMapNavbar(app);
       const legendDestroy = setupLegendWindow(app);
       const settingsDestroy = setupSettingsWindow(app);
-      const destroyComponentsWindow = setupComponentsWindow(app);
+      const destroyComponentsWindow = setupCategoryManagerWindow(app);
       const destroyThemingListener = setupUiConfigTheming(app, getCurrentInstance().proxy.$vuetify);
       const { attributionEntries, attributionAction, destroyAttributions } = setupAttributions(app);
 
@@ -430,6 +438,7 @@
       onMounted(() => {
         pluginMountedListener = setupPluginMountedListeners(app);
         app.maps.setTarget(mapId);
+        app.mounted.raiseEvent(mapId);
       });
 
       onUnmounted(() => {

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

@@ -7,6 +7,7 @@
     <template #activator="{ on, attrs }">
       <span v-on="on">
         <v-checkbox
+          :input-value="$attrs.value"
           on-icon="$vcsCheckboxChecked"
           off-icon="$vcsCheckbox"
           class="vcs-checkbox"

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

@@ -1,11 +1,12 @@
 <template>
   <section class="vcs-form-section">
-    <slot name="title">
+    <slot name="header" :heading="heading" :actions="actions">
       <article class="pa-2 accent">
         <div class="form-section-header d-flex justify-space-between align-center">
-          <strong class="caption">{{ $t(title) }}</strong>
+          <strong class="caption">{{ $t(heading) }}</strong>
           <VcsActionButtonList
             :actions="actions"
+            :overflow-count="actionButtonListOverflowCount"
             small
           />
         </div>
@@ -30,20 +31,21 @@
 
 
 <script>
-  import { computed, ref } from 'vue';
+  import { computed, reactive } from 'vue';
   import { VAlert } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
 
   /**
    * @description
    * Stylized form section with action buttons
-   * @vue-data {slot} [#title] - slot to override form section header
+   * @vue-data {slot} [#header] - slot to override form section header
    * @vue-data {slot} [#default] - slot with the section content
    * @vue-data {slot} [#help] - Slot to specify html based help. Gets precedence over helpText prop.
-   * @vue-prop {string} title - Title to be displayed, will be translated.
-   * @vue-prop {Array<VcsAction>}    titleActions - Icons to be displayed on the right side
+   * @vue-prop {string} heading - Title of the section to be displayed, will be translated.
+   * @vue-prop {Array<VcsAction>}    headerActions - Icons to be displayed on the right side
+   * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
    * @vue-prop {string} [helpText] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over helpText prop.
-   * @vue-computed {Array<VcsAction>} actions - Returns title actions extended by a help action, if help prop is passed or help slot is used.
+   * @vue-computed {Array<VcsAction>} actions - Returns header actions extended by a help action, if help prop is passed or help slot is used.
    */
   export default {
     name: 'VcsFormSection',
@@ -52,35 +54,41 @@
       VAlert,
     },
     props: {
-      title: {
+      heading: {
         type: String,
         default: undefined,
       },
-      titleActions: {
+      headerActions: {
         type: Array,
         default: () => ([]),
       },
+      actionButtonListOverflowCount: {
+        type: Number,
+        required: false,
+        default: undefined,
+      },
       helpText: {
         type: String,
         default: undefined,
       },
     },
     setup(props, { slots }) {
-      const showHelp = ref(false);
-      const helpAction = {
+      const helpAction = reactive({
         name: 'help',
         title: 'components.vcsFormSection.help',
+        active: false,
         icon: 'mdi-help-circle',
-        callback: () => { showHelp.value = !showHelp.value; },
-      };
+        callback() { this.active = !this.active; },
+      });
+      const showHelp = computed(() => helpAction.active);
       /**
        * @type {ComputedRef<VcsAction>}
        */
       const actions = computed(() => {
         if (props.helpText || (slots.help && slots.help().length > 0)) {
-          return [helpAction, ...props.titleActions];
+          return [helpAction, ...props.headerActions];
         }
-        return props.titleActions;
+        return props.headerActions;
       });
 
       return {

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

@@ -17,11 +17,21 @@
             :outlined="isOutlined"
             :dense="isDense"
             :height="isDense ? 24 : 32"
+            :item-text="item => $t(getText(item))"
             :class="$attrs.color === 'primary' ? 'primary--select' : ''"
             v-bind="{...$attrs, ...attrs}"
             v-on="{...$listeners, ...on}"
             @update:error="setError"
-          />
+          >
+            <template #selection="{ item, index }">
+              <span v-if="index === 0" class="text-truncate">
+                {{ $t(getText(item)) }}
+              </span>
+              <span v-if="index === 1" class="text-no-wrap grey--text text-caption">
+                (+{{ $attrs.value.length - 1 }})
+              </span>
+            </template>
+          </v-select>
         </span>
       </template>
     </VcsTooltip>
@@ -46,6 +56,15 @@
      }
    }
  }
+ .v-select{
+   &.v-select--is-multi{
+     ::v-deep {
+       .v-select__selections{
+          flex-wrap: nowrap;
+       }
+     }
+   }
+ }
 </style>
 <script>
 
@@ -55,11 +74,13 @@
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-select/ |vuetify select}.
+   * Translates the items text if it is an i18n string.
    * 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 {Function} itemText - A function that is applied to each item and should return the item's text value.
    * @vue-computed {boolean} isDense - Whether size of select is dense.
    * @vue-computed {boolean} isOutlined - Select is outlined on either hover, focus or error, if not disabled.
    */
@@ -74,6 +95,10 @@
         type: String,
         default: 'right',
       },
+      itemText: {
+        type: Function,
+        default: undefined,
+      },
     },
     data() {
       return {
@@ -95,6 +120,13 @@
         const rules = [...this.$attrs.rules].concat(this.$attrs.errorMessages);
         this.errorMessage = validate(rules, this.$attrs.value).join('\n');
       },
+      getText(item) {
+        if (this.itemText) {
+          return this.itemText(item);
+        } else {
+          return item?.text ?? item;
+        }
+      },
     },
   };
 </script>

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

@@ -11,7 +11,8 @@
       :max-width="200"
     >
       <template #activator="{ attrs }">
-        <v-text-field
+        <component
+          :is="inputComponent"
           ref="textFieldRef"
           hide-details
           :dense="isDense"
@@ -23,7 +24,7 @@
           v-bind="{...$attrs, ...attrs}"
           v-on="{...$listeners}"
           :height="isDense ? 24 : 32"
-          class="ma-0 pb-1 pt-1 primary--placeholder"
+          class="ma-0 pb-1 pt-1 primary--placeholder align-center"
           :class="$attrs.color === 'primary' ? 'primary--textfield' : ''"
         />
       </template>
@@ -51,7 +52,7 @@
 </style>
 
 <script>
-  import { VTextField } from 'vuetify/lib';
+  import { VTextField, VFileInput } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
@@ -74,6 +75,7 @@
     components: {
       VcsTooltip,
       VTextField,
+      VFileInput,
     },
     props: {
       tooltipPosition: {
@@ -92,6 +94,12 @@
       };
     },
     computed: {
+      inputComponent() {
+        if (this.$attrs.type === 'file') {
+          return 'VFileInput';
+        }
+        return 'VTextField';
+      },
       isClearable() {
         return (this.$attrs.clearable !== undefined && this.$attrs.clearable !== false) &&
           (this.hover || this.focus || this.isError);