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

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>

package/src/components/lists/VcsList.vue

@@ -31,16 +31,20 @@
           </v-icon>
         </v-list-item-action>
 
-        <v-list-item-content
-          :title="$t(tooltip || title)"
-        >
+        <v-list-item-content>
           <v-icon v-if="icon">
             {{ icon }}
           </v-icon>
 
-          <v-list-item-title>
-            {{ $t(title) }}
-          </v-list-item-title>
+          <VcsTooltip
+            :tooltip="tooltip || title"
+          >
+            <template #activator="{ on, attrs }">
+              <v-list-item-title v-bind="attrs" v-on="on">
+                {{ $t(title) }}
+              </v-list-item-title>
+            </template>
+          </VcsTooltip>
 
           <vcs-action-button-list
             v-if="actions?.length > 0"
@@ -85,7 +89,6 @@
         </v-list-item-action>
 
         <v-list-item-content
-          :title="$t(item.tooltip || item.title)"
           :class="[selectable ? 'cursor-pointer' : '']"
           @click="select(item, $event)"
         >
@@ -93,9 +96,15 @@
             {{ item.icon }}
           </v-icon>
 
-          <v-list-item-title>
-            {{ $t(item.title) }}
-          </v-list-item-title>
+          <VcsTooltip
+            :tooltip="item.tooltip || item.title"
+          >
+            <template #activator="{ on, attrs }">
+              <v-list-item-title v-bind="attrs" v-on="on">
+                {{ $t(item.title) }}
+              </v-list-item-title>
+            </template>
+          </VcsTooltip>
 
           <vcs-action-button-list
             v-if="item.actions?.length > 0"
@@ -122,6 +131,7 @@
     VListItemTitle,
   } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
 
   /**
@@ -165,6 +175,7 @@
     components: {
       VcsTreeviewSearchbar,
       VcsActionButtonList,
+      VcsTooltip,
       VList,
       VListItem,
       VListItemContent,
@@ -410,8 +421,6 @@
     .v-list{
       .v-list-item {
         padding: 4px 8px 4px 16px;
-        display: grid;
-        grid-template-columns: auto auto;
         &:after{
           display: none;
         }

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -5,7 +5,6 @@
   >
     <div
       class="position-relative col-8 pa-0 d-flex align-center vcs-treeview-leaf"
-      :title="$t(item.tooltip || item.title)"
     >
       <span
         v-if="item.icon"
@@ -18,8 +17,19 @@
         />
         <ImageElementInjector :element="item.icon" v-else />
       </span>
-      <span class="vcs-treeview-item-title">{{ $t(item.title) }}</span>
+      <VcsTooltip
+        :tooltip="item.tooltip || item.title"
+      >
+        <template #activator="{ on, attrs }">
+          <span
+            v-bind="attrs"
+            v-on="on"
+            class="vcs-treeview-item-title"
+          >{{ $t(item.title) }}</span>
+        </template>
+      </VcsTooltip>
     </div>
+
     <VcsActionButtonList
       v-if="item.actions.length > 0"
       :actions="item.actions"
@@ -44,6 +54,7 @@
   import { VIcon } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import ImageElementInjector from '../imageElementInjector.vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
    * @description
@@ -53,6 +64,7 @@
    */
   export default {
     components: {
+      VcsTooltip,
       VcsActionButtonList,
       VIcon,
       ImageElementInjector,

package/src/components/notification/VcsTooltip.vue

@@ -6,7 +6,7 @@
     :top="tooltipPosition === 'top'"
     :left="tooltipPosition === 'left'"
     :right="tooltipPosition === 'right'"
-    :open-delay="$attrs.openDelay || 200"
+    transition="expand-x-transition"
     v-bind="{...$props, ...$attrs}"
   >
     <template #activator="{ on, attrs }">