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

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/application/VcsNavbar.vue

@@ -76,7 +76,7 @@
                     v-bind="attrs"
                     v-on="on"
                     large
-                    tooltip="Share current view of the map."
+                    tooltip="navbar.share.tooltip"
                     icon="$vcsShare"
                   />
                 </template>

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/buttons/VcsButton.vue

@@ -85,8 +85,14 @@
         padding: 0;
         position: relative;
 
-        &.vcs-button--active-disabled{
+        &.vcs-button--active-background {
           border: 2px solid var(--v-primary-base);
+          color: var(--v-secondary-base);
+          background-color: var(--v-accent-darken1) !important;
+        }
+
+        &.v-btn--disabled {
+          background-color: transparent !important;
         }
       }
     }
@@ -102,6 +108,7 @@
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}.
    * @vue-prop {boolean}                                active - Whether button has background color. Applies vuetify primary color if color property is not set.
    * @vue-prop {string}                                 color - Passes property to v-btn in case prop active is true.
+   * @vue-prop {boolean}                                background - When applied with active the button shows an active-background state implying that a tool is active, but running in background, e.g. windowComponent closed.
    * @vue-prop {boolean}                                hasUpdate - Whether the button shows a badge in the top right.
    * @vue-prop {string}                                 icon - When given, will display an icon in the button. Replaces vuetify icon property.
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
@@ -135,6 +142,10 @@
         type: String,
         default: undefined,
       },
+      background: {
+        type: Boolean,
+        default: false,
+      },
       hasUpdate: {
         type: Boolean,
         default: false,
@@ -175,7 +186,7 @@
           'font-weight-bold': this.isStandard,
           'text-capitalize': this.isStandard,
           'vcs-button--large': this.isLarge,
-          'vcs-button--active-disabled': this.active && this.$attrs.disabled,
+          'vcs-button--active-background': this.active && this.background && !this.$attrs.disabled,
         };
       },
       hasDefaultSlot() {
@@ -192,7 +203,7 @@
       },
       isOutlined() {
         if (this.isStandard) {
-          return this.active || this.$attrs.disabled;
+          return this.active || this.background;
         }
         return false;
       },

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',

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

@@ -2,7 +2,7 @@
   <v-stepper
     vertical
     :value="value"
-    @change="(value) => emitValue(value)"
+    @change="newValue => $emit('input', newValue)"
   >
     <slot />
   </v-stepper>
@@ -15,7 +15,8 @@
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper/ |vuetify stepper}
    * Is always vertical.
    * Only passes the step property, all other props are ignored.
-   * @vue-prop {number} step - The current step of the stepper.
+   * @vue-prop {number} value - The current step of the stepper.
+   * @vue-data {slot} [#default] - Slot to add VcsWizardSteps.
    */
   export default {
     name: 'VcsWizard',
@@ -28,15 +29,6 @@
         default: undefined,
       },
     },
-    setup(props, { emit }) {
-      function emitValue(newValue) {
-        emit('input', typeof newValue !== 'number' ? Number(newValue) : newValue);
-      }
-
-      return {
-        emitValue,
-      };
-    },
   };
 </script>
 <style scoped lang="scss">
@@ -56,10 +48,8 @@
           }
         }
       }
-      .v-stepper__content {
-        &:not(:last-child) {
-          border-left: 2px solid rgba(0, 0, 0, 0.12) !important;
-        }
+      .step-border:not(:last-child) > .v-stepper__content {
+          border-left: 2px solid rgba(0, 0, 0, 0.12);
       }
     }
   }
@@ -91,23 +81,30 @@
           }
         }
       }
-      .v-stepper__content {
-        &:not(:last-child) {
-          border-left: 2px solid rgba(255, 255, 255, 0.8) !important;
-        }
+      .step-border:not(:last-child) > .v-stepper__content {
+          border-left: 2px solid rgba(255, 255, 255, 0.8);
       }
     }
   }
   ::v-deep{
     .v-stepper__step {
-      height: 40px;
+      align-items: start;
       .v-stepper__label {
         font-weight: 700;
         text-shadow: none !important;
+        position: relative;
+        &::before{
+          content: '';
+          position: absolute;
+          top: 14px;
+          bottom: 2px;
+          left: -15px;
+        }
       }
       .v-stepper__step__step {
         color: transparent;
         position: relative;
+        margin-top: 2px;
         &:before{
           content: '\25cf';
           color: var(--v-basic-base);

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

@@ -0,0 +1,160 @@
+<template>
+  <div class="step-border">
+    <v-stepper-step
+      :step="step"
+      :editable="editable"
+      :complete="complete"
+      :rules="rules"
+    >
+      <div class="form-section-header d-flex justify-space-between align-center">
+        <slot name="header" />
+        <span v-if="!$slots.header">{{ $t(heading) }}</span>
+        <VcsActionButtonList
+          v-if="editable || Number(step) === Number(value)"
+          :actions="actions"
+          :overflow-count="actionButtonListOverflowCount"
+          small
+          @mousedown.stop
+          @touchstart.stop
+          @keydown.stop
+        />
+      </div>
+    </v-stepper-step>
+    <v-stepper-content
+      v-if="$slots.content"
+      class="pr-5"
+      :step="step"
+    >
+      <v-alert
+        :value="showHelp"
+        dense
+        text
+        color="grey"
+        class="mt-2 mb-0 font-weight-regular rounded-0 px-0 pt-0"
+      >
+        <slot name="help">
+          <span>{{ $t(helpText) }}</span>
+        </slot>
+      </v-alert>
+      <slot name="content" />
+    </v-stepper-content>
+  </div>
+</template>
+
+<script>
+  import { computed, reactive, watch } from 'vue';
+  import { VStepperStep, VStepperContent, VAlert } from 'vuetify/lib';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+
+  /**
+   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper-step/ |vuetify VStepperStep} and
+   * {@link https://vuetifyjs.com/en/api/v-stepper-content/ |vuetify VStepperContent}.
+   * @vue-prop {number | string} step - Declares which step of the VcsWizard this VcsWizardStep is.
+   * @vue-prop {boolean} [editable=false] - If this step is editable. If so, user can jump to that step by clicking on the v-stepper-step.
+   * @vue-prop {boolean} [complete=false] - If this step is completed. Has effect on the look of the v-stepper-step.
+   * @vue-prop {Array} [rules] - Vuetify rules.
+   * @vue-prop {string} [heading] - The heading of this step. Is rendered in the v-stepper-step.
+   * @vue-prop {Array<VcsAction>} [headerActions] - Action buttons to be displayed on the right side of the v-stepper-step.
+   * @vue-prop {number} [actionButtonListOverflowCount] - Overflow count to use for the headerActions.
+   * @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-prop {string | number} value - The current step of the VcsWizard.
+   * @vue-data {slot} [#header] - Slot to override the heading prop. Allows to pass html as v-stepper-step content.
+   * @vue-data {slot} [#content] - Slot to add content to the step. Is rendered in v-stepper-content.
+   * @vue-data {slot} [#help] - Slot to add html to the help section. Overrides content of helpText prop.
+   */
+  export default {
+    name: 'VcsWizardStep',
+    components: {
+      VStepperStep,
+      VStepperContent,
+      VcsActionButtonList,
+      VAlert,
+    },
+    props: {
+      step: {
+        type: [String, Number],
+        required: true,
+      },
+      editable: {
+        type: Boolean,
+        default: false,
+      },
+      complete: {
+        type: Boolean,
+        default: false,
+      },
+      rules: {
+        type: Array,
+        default: () => ([]),
+      },
+      heading: {
+        type: String,
+        default: undefined,
+      },
+      headerActions: {
+        type: Array,
+        default: () => ([]),
+      },
+      actionButtonListOverflowCount: {
+        type: Number,
+        required: false,
+        default: undefined,
+      },
+      helpText: {
+        type: String,
+        default: undefined,
+      },
+      value: {
+        type: [String, Number],
+        required: true,
+      },
+    },
+    setup(props, { slots, emit }) {
+      const helpAction = reactive({
+        name: 'help',
+        title: 'components.vcsFormSection.help',
+        active: false,
+        icon: 'mdi-help-circle',
+        callback() {
+          this.active = !this.active;
+          if (Number(props.value) !== Number(props.step) && props.editable) {
+            emit('input', props.step);
+          }
+        },
+      });
+      const showHelp = computed(() => helpAction.active);
+      // deactivate help when leaving a step
+      watch(() => props.value, (currentStep, previousStep) => {
+        if (Number(previousStep) === Number(props.step)) {
+          helpAction.active = false;
+        }
+      });
+      /**
+       * @type {ComputedRef<VcsAction>}
+       */
+      const actions = computed(() => {
+        if (props.helpText || (slots.help && slots.help().length > 0)) {
+          return [...props.headerActions, helpAction];
+        }
+        return props.headerActions;
+      });
+
+      return {
+        showHelp,
+        actions,
+      };
+    },
+  };
+</script>
+<style scoped lang="scss">
+  .v-alert--text:before{
+    background-color: transparent;
+  }
+  .v-stepper__step {
+    ::v-deep {
+      .v-ripple__container {
+        display: none !important;
+      }
+    }
+  }
+</style>