@vcmap/ui 5.0.0-rc.18 → 5.0.0-rc.21

package/plugins/{test/windowManagerExample.vue → @vcmap-show-case/window-tester/WindowExample.vue}

@@ -1,10 +1,14 @@
 <template>
   <div>
-    <VcsButton v-for="(example, index) in examples" :key="`b-${index}`" @click="(e) => toggle(e, example)">
+    <VcsButton
+      v-for="(example, index) in examples"
+      :key="`b-${index}`"
+      @click="(e) => toggle(e, example)"
+    >
       toggle {{ example }}
     </VcsButton>
 
-    <VcsButton @click="toggleClass()">
+    <VcsButton @click="toggleClass()" :active="showTestClass">
       Change Static2 TestClass
     </VcsButton>
   </div>
@@ -18,21 +22,21 @@
   import { getLogger } from '@vcsuite/logger';
 
   import { WindowSlot, VcsButton } from '@vcmap/ui';
-  import VcsContent from './vcsContent.vue';
+  import VcsContent from './windowExampleContent.vue';
   import MyCustomHeader from './myCustomHeader.vue';
   import EmptyComponent from './emptyComponent.vue';
 
   const showTestClass = ref(false);
 
   export default {
-    name: 'WindowManagerExample',
+    name: 'WindowExample',
     components: { VcsButton },
     setup() {
       const exampleWindows = [
         {
           id: 'dynamicLeft',
           headerTitle: 'Example dynamicLeft',
-          component: EmptyComponent,
+          component: VcsContent,
           slot: WindowSlot.DYNAMIC_LEFT,
         },
         {
@@ -40,15 +44,26 @@
           state: {
             headerTitle: 'Example dynamicLeft2',
           },
-          component: EmptyComponent,
+          component: VcsContent,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        {
+          id: 'dynamicLeft2 large',
+          state: {
+            headerTitle: 'Example dynamicLeft2 with 1000px width',
+          },
+          component: VcsContent,
           slot: WindowSlot.DYNAMIC_LEFT,
+          position: {
+            width: '1000px',
+          },
         },
         {
           id: 'dynamicRight',
           state: {
             headerTitle: 'Example dynamicRight',
           },
-          component: EmptyComponent,
+          component: VcsContent,
           headerComponent: MyCustomHeader,
           slot: WindowSlot.DYNAMIC_RIGHT,
           props: {
@@ -60,7 +75,7 @@
           state: {
             headerTitle: 'Example dynamicRight2',
           },
-          component: EmptyComponent,
+          component: VcsContent,
           slot: WindowSlot.DYNAMIC_RIGHT,
         },
         {
@@ -69,7 +84,7 @@
             headerTitle: 'Example static',
             styles: { 'background-color': 'red' },
           },
-          component: VcsContent,
+          component: EmptyComponent,
           slot: WindowSlot.STATIC,
         },
         {
@@ -82,7 +97,7 @@
               }),
             },
           },
-          component: VcsContent,
+          component: EmptyComponent,
           slot: WindowSlot.STATIC,
         },
         {
@@ -104,7 +119,7 @@
             hideHeader: false,
             headerTitle: 'Example position2 absolute',
           },
-          component: EmptyComponent,
+          component: VcsContent,
           position: {
             left: '200px',
             top: '300px',
@@ -121,25 +136,26 @@
         getLogger('windowManagerExample').log('got unmounted');
       });
 
-      /**
-       * @type {Map<string, WindowComponent>}
-       */
-      const windowComponents = new Map();
-
       const app = inject('vcsApp');
       return {
+        showTestClass,
         toggleClass() {
           showTestClass.value = !showTestClass.value;
+          if (app.windowManager.has('static2')) {
+            if (showTestClass.value) {
+              app.windowManager.get('static2').state.classes = ['vcsTest'];
+            } else {
+              app.windowManager.get('static2').state.classes = [];
+            }
+          }
         },
         toggle(e, windowId) {
           if (app.windowManager.has(windowId)) {
             app.windowManager.remove(windowId);
           } else {
             e.stopPropagation();
-            const windowComponentOptions =
-              windowComponents.get(windowId) || exampleWindows.find(item => item.id === windowId);
-            const windowComponent = app.windowManager.add(windowComponentOptions, 'WindowManagerExample');
-            windowComponents.set(windowId, windowComponent);
+            const windowComponentOptions = exampleWindows.find(item => item.id === windowId);
+            app.windowManager.add(windowComponentOptions, 'WindowManagerExample');
           }
         },
         examples: exampleWindows.map(item => item.id),

package/plugins/{test → @vcmap-show-case/window-tester}/emptyComponent.vue

@@ -1,10 +1,15 @@
 <template>
   <v-sheet style="height: 100%">
-    Statisches Window
-    <v-sheet />
+    <span>
+      Static Window
+    </span>
   </v-sheet>
 </template>
-
+<style scoped>
+.vcsTest span {
+  background-color: red;
+}
+</style>
 <script>
 
   import { VSheet } from 'vuetify/lib';

package/plugins/@vcmap-show-case/window-tester/index.js

@@ -0,0 +1,62 @@
+import {
+  ButtonLocation, createToggleAction, ToolboxType,
+} from '@vcmap/ui';
+import packageJSON from './package.json';
+import { getToolboxData } from './toolbox-data.js';
+import windowExample from './WindowExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function () {
+  return {
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Window Tester',
+        },
+        {
+          id: 'window-tester',
+          state: {
+            headerTitle: 'Window Tester',
+          },
+          component: windowExample,
+          position: {
+            left: '60%',
+            right: '10%',
+            top: '10%',
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'window-tester', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      const { toolboxData, destroy: destroyToolboxData } = getToolboxData(app);
+      toolboxData.forEach(([{ buttonComponents, ...toolboxComponentOptions }, owner]) => {
+        let group;
+        if (app.toolboxManager.has(toolboxComponentOptions.id)) {
+          group = app.toolboxManager.get(toolboxComponentOptions.id);
+        } else {
+          group = app.toolboxManager.add(toolboxComponentOptions, owner);
+        }
+        if (group.type === ToolboxType.GROUP && buttonComponents) {
+          buttonComponents.forEach(c => group.buttonManager.add(c, owner));
+        }
+      });
+      this._destroyAction = [destroy, destroyToolboxData];
+    },
+    destroy() {
+      if (this._destroyActions) {
+        this._destroyActions.forEach(cb => cb());
+        this._destroyActions = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/window-tester/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/window-tester",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/plugins/{test → @vcmap-show-case/window-tester}/toolbox-data.js

@@ -1,7 +1,7 @@
 import { ToolboxType } from '@vcmap/ui';
-import { reactive, shallowRef } from 'vue';
-import { VcsEvent } from '@vcmap/core';
-import VcsContent from './vcsContent.vue';
+import { reactive } from 'vue';
+import WindowExampleContent from './windowExampleContent.vue';
+import packageJSON from './package.json';
 
 const dummySelectAction = {
   active: false,
@@ -41,7 +41,7 @@ function createDummyTriStateAction(app) {
     state: {
       headerTitle: 'Example Session Toggle',
     },
-    component: VcsContent,
+    component: WindowExampleContent,
   };
 
   const action = reactive({
@@ -106,7 +106,7 @@ export function getToolboxData(app) {
           callback() { this.active = !this.active; },
         },
       },
-      '@vcmap/test',
+      packageJSON.name,
     ],
     [
       {
@@ -130,7 +130,7 @@ export function getToolboxData(app) {
           ],
         },
       },
-      '@vcmap/test',
+      packageJSON.name,
     ],
     [
       {
@@ -164,7 +164,7 @@ export function getToolboxData(app) {
           ],
         },
       },
-      '@vcmap/test',
+      packageJSON.name,
     ],
     [
       {
@@ -172,7 +172,7 @@ export function getToolboxData(app) {
         type: ToolboxType.SINGLE,
         action: triStateAction,
       },
-      '@vcmap/test',
+      packageJSON.name,
     ],
     [
       {
@@ -203,7 +203,7 @@ export function getToolboxData(app) {
           },
         ],
       },
-      '@vcmap/test',
+      packageJSON.name,
     ],
   ];
 

package/plugins/{test/vcsContent.vue → @vcmap-show-case/window-tester/windowExampleContent.vue}

@@ -8,16 +8,12 @@
 
 <style scoped>
 
-.vcsTest span {
-  background-color: red;
-}
-
 </style>
 <script>
   import { VSheet } from 'vuetify/lib';
 
   export default {
-    name: 'VcsContent',
+    name: 'WindowExampleContent',
     components: { VSheet },
     setup() {
       return { };

package/plugins/@vcmap-show-case/wizard-example/README.md

@@ -0,0 +1,3 @@
+# Wizard Example
+
+This is a show-case plugin demonstrating the usage of [VcsWizard](../../../src/components/form-inputs-controls/VcsWizard.vue).

package/plugins/{wizardExample → @vcmap-show-case/wizard-example}/index.js

@@ -1,15 +1,21 @@
 import { createToggleAction, ButtonLocation, WindowSlot } from '@vcmap/ui';
+import packageJSON from './package.json';
 import WizardExample from './wizardExample.vue';
 
+/**
+ * @returns {VcsPlugin}
+ */
 export default async () => {
   return {
-    name: 'wizardExample',
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
     onVcsAppMounted(app) {
       const { action, destroy } = createToggleAction(
         {
-          name: 'wizardExample',
-          icon: '$vcsLegend',
-          title: 'VCS Wizard Example',
+          name: 'Wizard Example',
+          icon: '$vcsWand',
+          title: 'Wizard Example Plugin',
         },
         {
           id: 'wizard-example',
@@ -22,11 +28,11 @@ export default async () => {
           },
         },
         app.windowManager,
-        'wizardExample',
+        packageJSON.name,
       );
       app.navbarManager.add(
         { id: 'wizard-example', action },
-        'wizardExample',
+        packageJSON.name,
         ButtonLocation.TOOL,
       );
       this._destroyAction = destroy;

package/plugins/@vcmap-show-case/wizard-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/wizard-example",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/plugins/@vcmap-show-case/wizard-example/wizardExample.vue

@@ -0,0 +1,95 @@
+<template>
+  <VcsWizard
+    v-model.number="step"
+  >
+    <VcsWizardStep
+      step="1"
+      :complete="step > 1"
+      help-text="1. this is the help text"
+      heading="This is the first step"
+      v-model.number="step"
+    >
+      <template #content>
+        <div>
+          This is the content of the first step.
+        </div>
+        <VcsButton
+          @click="increaseStep()"
+          class="my-2"
+        >
+          Next
+        </VcsButton>
+      </template>
+    </VcsWizardStep>
+    <VcsWizardStep
+      :rules="[() => false]"
+      step="2"
+      editable
+      :header-actions="actions.second"
+      heading="This is the second step"
+      v-model.number="step"
+    >
+      <template #help>
+        <ol>
+          <li>this</li>
+          <li>is</li>
+          <li>the help slot</li>
+        </ol>
+      </template>
+      <template #content>
+        <VcsSelect
+          :items="['this', 'is', 'a', 'test']"
+          v-model="selection"
+          label="Select"
+          class="my-2"
+        />
+        <VcsButton
+          @click="decreaseStep()"
+        >
+          Back
+        </VcsButton>
+      </template>
+    </VcsWizardStep>
+  </VcsWizard>
+</template>
+
+<script>
+  import { VcsWizard, VcsWizardStep, VcsButton, VcsSelect } from '@vcmap/ui';
+  import { ref } from 'vue';
+
+  /** Component to showcase the VcsWizard and VcsWizardStep. */
+  export default {
+    name: 'WizardExample',
+    components: {
+      VcsWizard,
+      VcsWizardStep,
+      VcsButton,
+      VcsSelect,
+    },
+    setup() {
+      const step = ref(1);
+      const selection = ref();
+      const actions = {
+        second: [{
+          name: 'resetSecondStep',
+          title: 'Reset step',
+          icon: '$vcsReturn',
+          callback() {
+            selection.value = undefined;
+          },
+        }],
+      };
+      return {
+        step,
+        increaseStep() { step.value += 1; },
+        decreaseStep() { step.value -= 1; },
+        selection,
+        actions,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/plugins/package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@vcmap/hello-world": "^1.0.7",
-    "@vcmap/print": "^1.0.2"
+    "@vcmap/print": "^1.0.2",
+    "@vcmap/swipe-tool": "^1.0.3"
   }
 }

package/src/actions/actionHelper.js

@@ -117,10 +117,8 @@ export function createSearchButtonAction(app) {
           id: 'searchId',
           component: SearchComponent,
           state: { hideHeader: true },
-          slot: WindowSlot.DETACHED,
+          slot: WindowSlot.DYNAMIC_RIGHT,
           position: {
-            right: 0,
-            top: 0,
             width: 440,
           },
         },

package/src/actions/stateRefAction.js

@@ -19,14 +19,6 @@ const stateIconMap = {
   [StateActionState.LOADING]: '$vcsProgress',
 };
 
-const stateI18nMap = {
-  [StateActionState.INACTIVE]: 'content.stateAction.titleInactive',
-  [StateActionState.ACTIVE]: 'content.stateAction.titleActive',
-  [StateActionState.INDETERMINATE]: 'content.stateAction.titleIndeterminate',
-  [StateActionState.LOADING]: 'content.stateAction.titleLoading',
-};
-
-
 /**
  * Creates an action
  * @param {string} name
@@ -42,14 +34,12 @@ export function createStateRefAction(name, stateRef, callback) {
   const currentState = stateRef.value;
   const action = {
     name,
-    title: stateI18nMap[currentState],
     icon: stateIconMap[currentState],
     callback,
   };
 
   const destroy = watch(stateRef, () => {
     action.icon = stateIconMap[stateRef.value];
-    action.title = stateI18nMap[stateRef.value];
   });
 
   return {

package/src/application/VcsApp.vue

@@ -70,7 +70,6 @@
     onMounted,
     onUnmounted,
     provide,
-    watch,
   } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
   import { VContainer, VFooter } from 'vuetify/lib';
@@ -198,7 +197,10 @@
       {
         id: 'legend',
         component: VcsLegend,
-        state: { headerTitle: 'legend.title' },
+        state: {
+          headerTitle: 'legend.title',
+          headerIcon: '$vcsLegend',
+        },
         slot: WindowSlot.DYNAMIC_RIGHT,
         props: { entries },
       },
@@ -207,37 +209,54 @@
     );
 
     /**
-     * adds or removes the legend button, depending on the number of entries
-     * @param {Array<LegendEntry>} newEntries
+     * Adds a legend button, if not existing
      */
-    const handleLegendButton = (newEntries) => {
-      if (newEntries.length > 0) {
-        if (!app.navbarManager.has('legend')) {
-          app.navbarManager.add(
-            {
-              id: 'legend',
-              action: legendAction,
-            },
-            vcsAppSymbol,
-            ButtonLocation.TOOL,
-          );
-        }
-      } else {
+    const addLegend = () => {
+      if (!app.navbarManager.has('legend')) {
+        app.navbarManager.add(
+          {
+            id: 'legend',
+            action: legendAction,
+          },
+          vcsAppSymbol,
+          ButtonLocation.TOOL,
+        );
+      }
+    };
+
+    /**
+     * Handles legend button and window.
+     * Adds a button, if legend definitions are available or removes legend otherwise.
+     */
+    const handleLegend = () => {
+      const layersWithLegend = [...app.layers]
+        .filter(layer => layer.style?.properties?.legend ?? layer.properties?.legend);
+      const stylesWithLegend = [...app.styles].filter(style => style?.properties?.legend);
+      if (layersWithLegend < 1 && stylesWithLegend < 1) {
         app.navbarManager.remove('legend');
         app.windowManager.remove('legend');
       }
     };
-    handleLegendButton(entries.value);
 
-    const stopWatching = watch(
-      entries,
-      handleLegendButton,
-    );
+    const listeners = [
+      app.layers.added.addEventListener((layer) => {
+        if (layer.style?.properties?.legend ?? layer.properties?.legend) {
+          addLegend();
+        }
+      }),
+      app.styles.added.addEventListener((style) => {
+        if (style?.properties?.legend) {
+          addLegend();
+        }
+      }),
+      app.layers.removed.addEventListener(handleLegend),
+      app.styles.removed.addEventListener(handleLegend),
+    ];
 
     return () => {
       destroy();
       legendDestroy();
-      stopWatching();
+      listeners.forEach(cb => cb());
     };
   }
 

package/src/application/VcsMap.vue

@@ -14,6 +14,15 @@
       overflow: hidden; /* Fix for iFrame content */
     }
 
+    .overviewMapElement {
+      position: absolute;
+      top: 3px;
+      bottom: 3px;
+      left: 3px;
+      right: 3px;
+      overflow: hidden; /* Fix for iFrame content */
+    }
+
     .cesium-widget,
     .cesium-widget canvas {
       width: 100%;

package/src/components/buttons/VcsActionButtonList.vue

@@ -9,6 +9,7 @@
       :active="button.active"
       @click.stop="button.callback($event)"
       v-bind="{...$attrs}"
+      v-on="{...$listeners}"
     />
     <v-menu
       v-if="overflowButtons.length > 0"

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

@@ -21,7 +21,8 @@
         >
           <template #label>
             <VcsLabel :html-for="$attrs.id" :dense="!!$attrs.dense">
-              {{ $t($attrs.label) }}
+              <slot name="label" />
+              <span v-if="!$slots.label">{{ $t($attrs.label) }}</span>
             </VcsLabel>
           </template>
         </v-checkbox>
@@ -61,6 +62,7 @@
    * Provides VcsTooltip to show error messages
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
    * @vue-prop {string} label - Label to be displayed, will be translated.
+   * @vue-data {slot} [#label] - slot to pass html for Checkbox label. Overrides label passed as prop.
    */
   export default {
     name: 'VcsCheckbox',