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

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

@@ -1,30 +1,33 @@
 <template>
-  <div
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-  >
+  <div>
     <VcsTooltip
       :tooltip-position="tooltipPosition"
       :tooltip="errorMessage"
-      :value="(hover || focus) && isError"
       color="error"
       :max-width="200"
     >
-      <template #activator="{ attrs }">
+      <template #activator="{ on, attrs }">
         <v-textarea
           ref="textAreaRef"
           hide-details
           :dense="isDense"
           :clearable="isClearable"
           @focus="focus = true"
-          @blur="focus = neverBlurred = false"
-          @input="firstInput = true"
-          :outlined="isOutlined"
+          @blur="focus = false"
+          @mouseover="hover = true"
+          @mouseleave="hover = false"
+          outlined
           v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners}"
+          v-on="{...$listeners, ...on}"
           :rows="$attrs.rows || (isDense ? 3 : 5)"
-          class="ma-0 pb-1 pt-1 primary--placeholder"
-          :class="$attrs.color === 'primary' ? 'primary--textarea' : ''"
+          class="ma-0 py-1 primary--placeholder"
+          :class="{
+            'remove-outline': !isOutlined,
+            'outline--current': focus,
+            'outline--error': errorMessage,
+            'input--dense': isDense,
+            'input--not-dense': !isDense,
+          }"
         />
       </template>
     </VcsTooltip>
@@ -41,18 +44,77 @@
     }
   }
 }
-.primary--textarea {
-  ::v-deep {
-    textarea {
-      color: var(--v-primary-base);
+.remove-outline {
+    ::v-deep {
+      fieldset {
+        border-width: 0;
+        border-radius: 0;
+      }
+    }
+  }
+  .outline--current {
+    ::v-deep {
+      .v-input__slot fieldset {
+        border-color: currentColor;
+        transition: border-color 0.5s ease;
+      }
+      .v-text-field__slot textarea {
+        border-color: transparent;
+      }
+    }
+  }
+  .outline--error {
+    ::v-deep {
+      .v-input__slot fieldset, .v-text-field__slot textarea {
+        border-color: var(--v-error-base);
+      }
+    }
+  }
+  .input--dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 4px !important;
+      }
+      fieldset {
+        padding-left: 2px;
+      }
+    }
+  }
+  .input--not-dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 8px !important;
+      }
+      fieldset {
+        padding-left: 6px;
+      }
+    }
+  }
+  .v-input {
+    ::v-deep {
+      textarea {
+        border-bottom: 1px solid var(--v-base-base);
+        border-radius: 0;
+      }
+      textarea::selection {
+        background-color: var(--v-primary-base);
+      }
+      fieldset {
+        border-radius: 2px;
+        border-color: var(--v-base-base);
+      }
+      .v-text-field__slot {
+        margin-right: 0 !important;
+      }
     }
   }
-}
 </style>
 
 <script>
+  import { computed, ref } from 'vue';
   import { VTextarea } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useErrorSync } from './composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-textarea/|vuetify v-textarea}.
@@ -82,51 +144,30 @@
         default: 'right',
       },
     },
-    data() {
+    setup(props, { attrs }) {
+      const hover = ref(false);
+      const focus = ref(false);
+      const textAreaRef = ref();
+
+      const errorMessage = useErrorSync(textAreaRef);
+
+      const isClearable = computed(() => {
+        return (attrs.clearable !== undefined && attrs.clearable !== false) &&
+          (hover.value || focus.value || errorMessage.value);
+      });
+      const isDense = computed(() => attrs.dense !== false);
+      const isOutlined = computed(() => {
+        return (hover.value || focus.value || errorMessage.value) && !(attrs.disabled || attrs.disabled === '');
+      });
       return {
-        hover: false,
-        focus: false,
-        firstInput: false,
-        neverBlurred: true,
-        isMounted: false,
-        errorMessage: '',
+        hover,
+        focus,
+        textAreaRef,
+        errorMessage,
+        isClearable,
+        isDense,
+        isOutlined,
       };
     },
-    computed: {
-      isClearable() {
-        return (this.$attrs.clearable !== undefined && this.$attrs.clearable !== false) &&
-          (this.hover || this.focus || this.isError);
-      },
-      isDense() {
-        return this.$attrs.dense !== undefined && this.$attrs.dense !== false;
-      },
-      isError() {
-        return this.joinedErrorBucket.length > 0 && (this.firstInput || !this.neverBlurred);
-      },
-      isOutlined() {
-        return (this.hover || this.focus || this.isError) && !(this.$attrs.disabled || this.$attrs.disabled === '');
-      },
-      joinedErrorBucket() {
-        if (!this.isMounted) {
-          return false;
-        } else {
-          return this.$refs.textAreaRef.errorBucket.concat(this.$refs.textAreaRef.errorMessages).join('\n');
-        }
-      },
-    },
-    watch: {
-      joinedErrorBucket(newValue, oldValue) {
-        if (oldValue && !newValue) {
-          setTimeout(() => {
-            this.errorMessage = newValue;
-          }, 200);
-        } else {
-          this.errorMessage = newValue;
-        }
-      },
-    },
-    mounted() {
-      this.isMounted = true;
-    },
   };
 </script>

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

@@ -6,26 +6,36 @@
     <VcsTooltip
       :tooltip-position="tooltipPosition"
       :tooltip="errorMessage"
-      :value="(hover || focus) && isError"
       color="error"
       :max-width="200"
     >
-      <template #activator="{ attrs }">
+      <template #activator="{ attrs, on }">
         <component
           :is="inputComponent"
           ref="textFieldRef"
           hide-details
+          :hide-spin-buttons="!showSpinButtons"
           :dense="isDense"
           :clearable="isClearable"
-          @focus="focus = true"
-          @blur="focus = neverBlurred = false"
-          @input="firstInput = true"
-          :outlined="isOutlined"
+          @focus="onFocus"
+          @blur="onBlur"
+          @keydown.esc="onEscape"
+          @keydown="$emit('keydown', $event)"
+          :value="visibleValue"
+          :type="type"
+          outlined
           v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners}"
+          v-on="{...$listeners, ...on}"
           :height="isDense ? 24 : 32"
-          class="ma-0 pb-1 pt-1 primary--placeholder align-center"
-          :class="$attrs.color === 'primary' ? 'primary--textfield' : ''"
+          class="py-1 primary--placeholder align-center"
+          :class="{
+            'remove-outline': !isOutlined,
+            'outline--current': focus,
+            'outline--error': !!errorMessage,
+            'input--dense': isDense,
+            'input--not-dense': !isDense,
+            'file-border-bottom': inputComponent === 'VFileInput' && !focus && !hover && !errorMessage,
+          }"
         />
       </template>
     </VcsTooltip>
@@ -33,27 +43,101 @@
 </template>
 
 <style lang="scss" scoped>
-.primary--placeholder {
-  ::v-deep {
-    input::placeholder {
-      color: var(--v-primary-base);
-      font-style: italic;
-      opacity: 1;
+  .primary--placeholder {
+    ::v-deep {
+      input::placeholder {
+        color: var(--v-primary-base);
+        font-style: italic;
+        opacity: 1;
+      }
     }
   }
-}
-.primary--textfield {
-  ::v-deep {
-    input {
-      color: var(--v-primary-base);
+  .remove-outline {
+    ::v-deep {
+      fieldset {
+        border-width: 0;
+        border-radius: 0;
+      }
+    }
+  }
+  .outline--current {
+    ::v-deep {
+      .v-input__slot fieldset {
+        border-color: currentColor;
+        transition: border-color 0.5s ease;
+      }
+      .v-text-field__slot input {
+        border-color: transparent;
+      }
+    }
+  }
+  .outline--error {
+    ::v-deep {
+      .v-input__slot fieldset, .v-text-field__slot input {
+        border-color: var(--v-error-base);
+      }
+    }
+  }
+  .input--dense {
+    ::v-deep {
+      .v-text-field__slot input {
+        height: 24px;
+      }
+      .v-input__slot {
+        padding: 0 4px !important;
+      }
+      fieldset {
+        padding-left: 2px;
+      }
+    }
+  }
+  .input--not-dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 8px !important;
+      }
+      fieldset {
+        padding-left: 6px;
+      }
+    }
+  }
+  .file-border-bottom {
+    ::v-deep {
+      .v-file-input__text {
+        border-bottom: 1px solid var(--v-base-base);
+        border-radius: 0;
+      }
+    }
+  }
+  .v-input {
+    ::v-deep {
+      input {
+        height: 32px;
+        border-bottom: 1px solid var(--v-base-base);
+        border-radius: 0;
+      }
+      input::selection {
+        background-color: var(--v-primary-base);
+      }
+      .v-text-field__prefix {
+        padding-right: 8px;
+      }
+      .v-text-field__suffix {
+        padding-left: 4px;
+      }
+      fieldset {
+        border-radius: 2px;
+        border-color: var(--v-base-base);
+      }
     }
   }
-}
 </style>
 
 <script>
+  import { computed, onMounted, ref } from 'vue';
   import { VTextField, VFileInput } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useErrorSync } from './composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-text-field v-text-field}.
@@ -63,12 +147,15 @@
    * Provides VcsTooltip to
    * - show error messages on focus
    * - show tooltips, if supplied, when hovered over append-icon
+   * When clicking esc key, previous input is restored.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {string}                                 unit - Unit for number input fields. Is displayed behind the number.
+   * @vue-prop {boolean}                                showSpinButtons - If true, spin buttons are displayed in number input fields. Overrides Vuetify hide-spin-buttons.
    * @vue-computed {boolean}                            isClearable - Whether textfield is isClearable. Makes sure icon is only shown on focus, hover or error.
    * @vue-computed {boolean}                            isDense - Whether size of textfield is dense.
-   * @vue-computed {boolean}                            isError - Whether errorBucket is not empty and textfield was focused at least once.
    * @vue-computed {boolean}                            isOutlined - Textfield is outlined on either hover, focus or error, if not disabled.
-   * @vue-computed {Array<string>}                      joinedErrorBucket - errorBucket + errorMessages of child v-text-field.
+   * @vue-computed {string | number}                    visibleValue - Returns the number input as string with unit, in case unit is provided.
+   * @vue-computed {string}                             type - The input field type. If number input field is blurred and unit is provided, type changes to text field, so unit can be displayed in input field.
    */
   export default {
     name: 'VcsTextField',
@@ -82,60 +169,86 @@
         type: String,
         default: 'right',
       },
+      unit: {
+        type: String,
+        default: '',
+      },
+      showSpinButtons: {
+        type: Boolean,
+        default: false,
+      },
     },
-    data() {
-      return {
-        hover: false,
-        focus: false,
-        firstInput: false,
-        neverBlurred: true,
-        isMounted: false,
-        errorMessage: '',
-      };
-    },
-    computed: {
-      inputComponent() {
-        if (this.$attrs.type === 'file') {
+    setup(props, { attrs, emit }) {
+      const hover = ref(false);
+      const focus = ref(false);
+      const textFieldRef = ref();
+
+      onMounted(() => {
+        // fix for autofocus
+        focus.value = attrs.autofocus != null;
+      });
+
+      const errorMessage = useErrorSync(textFieldRef);
+
+      const inputComponent = computed(() => {
+        if (attrs.type === 'file') {
           return 'VFileInput';
         }
         return 'VTextField';
-      },
-      isClearable() {
-        return (this.$attrs.clearable !== undefined && this.$attrs.clearable !== false) &&
-          (this.hover || this.focus || this.isError);
-      },
-      isDense() {
-        return this.$attrs.dense !== undefined && this.$attrs.dense !== false;
-      },
-      isError() {
-        return this.joinedErrorBucket.length > 0 && (this.firstInput || !this.neverBlurred);
-      },
-      isOutlined() {
-        return (this.$attrs.outlined || this.hover || this.focus || this.isError) && !(this.$attrs.disabled || this.$attrs.disabled === '');
-      },
-      joinedErrorBucket() {
-        if (!this.isMounted) {
-          return false;
+      });
+      const isClearable = computed(() => {
+        return (attrs.clearable !== undefined && attrs.clearable !== false) &&
+          (hover.value || focus.value || !!errorMessage.value);
+      });
+      const isDense = computed(() => attrs.dense !== false);
+      const isOutlined = computed(() => {
+        return (hover.value || focus.value || !!errorMessage.value) && !(attrs.disabled || attrs.disabled === '');
+      });
+      const visibleValue = computed(() => {
+        if (attrs.type === 'number' && attrs.value && props.unit && !focus.value && !hover.value) {
+          return `${attrs.value} ${props.unit}`;
         } else {
-          return this.$refs.textFieldRef.errorBucket.concat(this.$refs.textFieldRef.errorMessages).join('\n');
+          return attrs.value || '';
         }
-      },
-    },
-    watch: {
-      joinedErrorBucket(newValue, oldValue) {
-        if (oldValue && !newValue) {
-          setTimeout(() => {
-            this.errorMessage = newValue;
-          }, 200);
+      });
+      const type = computed(() => {
+        if (attrs.type === 'number' && !focus.value) {
+          return 'text';
         } else {
-          this.errorMessage = newValue;
+          return attrs.type || 'text';
         }
-      },
-    },
-    mounted() {
-      this.isMounted = true;
-      // fix for autofocus
-      this.focus = this.$attrs.autofocus != null;
+      });
+
+      function onEscape(event) {
+        textFieldRef.value.blur();
+        emit('input', textFieldRef.value.initialValue);
+        emit('keydown', event);
+      }
+
+      function onBlur(event) {
+        focus.value = false;
+        emit('blur', event);
+      }
+      function onFocus(event) {
+        focus.value = true;
+        emit('focus', event);
+      }
+
+      return {
+        hover,
+        focus,
+        inputComponent,
+        isClearable,
+        isDense,
+        isOutlined,
+        visibleValue,
+        type,
+        onEscape,
+        textFieldRef,
+        errorMessage,
+        onBlur,
+        onFocus,
+      };
     },
   };
 </script>

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

@@ -3,6 +3,7 @@
     vertical
     :value="value"
     @change="newValue => $emit('input', newValue)"
+    class="rounded-0"
   >
     <slot />
   </v-stepper>
@@ -32,21 +33,28 @@
   };
 </script>
 <style scoped lang="scss">
+@import '../../styles/shades.scss';
 .v-stepper{
   &.theme--light {
     ::v-deep{
       .v-stepper__step {
+        .v-stepper__label {
+          color: map-get($shades, 'black');
+        }
         &--active {
           background-color: rgba(34, 34, 34, 0.1);
           .v-stepper__label {
-            color: rgba(34, 34, 34, 0.8);
+            color: var(--v-primary-base);
           }
         }
         &--complete {
           .v-stepper__label {
-            color: rgba(0, 0, 0, 0.38);
+            color: map-get($shades, 'black');
           }
         }
+        .v-stepper__step__step::before {
+          color: map-get($shades, 'white');
+        }
       }
       .step-border:not(:last-child) > .v-stepper__content {
           border-left: 2px solid rgba(0, 0, 0, 0.12);
@@ -54,23 +62,30 @@
     }
   }
   &.theme--dark {
+    background: map-get($shades, 'black');
     ::v-deep{
       .v-stepper__step {
+        .v-stepper__label {
+          color: map-get($shades, 'white');
+        }
         &--active {
-          background-color: rgba(255, 255, 255, 0.5);
+          background-color: rgba(255, 255, 255, 0.17);
           .v-stepper__label {
-            color: rgba(255, 255, 255, 1);
+            color: var(--v-primary-base);
           }
         }
         &--complete {
           .v-stepper__label {
-            color: rgba(255, 255, 255, 0.5);
+            color: map-get($shades, 'white');
           }
         }
         .v-stepper__step__step {
           .v-icon {
             color: transparent;
           }
+          &:before{
+            color: map-get($shades, 'black');
+          }
         }
         &.v-stepper__step--error{
           .v-stepper__label{
@@ -88,26 +103,19 @@
   }
   ::v-deep{
     .v-stepper__step {
-      align-items: start;
+      padding-top: 0;
+      padding-bottom: 0;
       .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;
+        margin-right: 5px;
         &:before{
           content: '\25cf';
-          color: var(--v-basic-base);
           font-size: 18px;
           position: absolute;
           top: -9px;

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

@@ -5,12 +5,15 @@
       :editable="editable"
       :complete="complete"
       :rules="rules"
+      class="pr-6"
     >
-      <div class="form-section-header d-flex justify-space-between align-center">
+      <div class="d-flex justify-space-between align-center">
         <slot name="header" />
-        <span v-if="!$slots.header">{{ $t(heading) }}</span>
+        <div v-if="!$slots.header" class="py-3">
+          <span>{{ $t(heading) }}</span>
+        </div>
         <VcsActionButtonList
-          v-if="editable || Number(step) === Number(value)"
+          v-if="Number(step) === Number(value)"
           :actions="actions"
           :overflow-count="actionButtonListOverflowCount"
           small
@@ -22,20 +25,15 @@
     </v-stepper-step>
     <v-stepper-content
       v-if="$slots.content"
-      class="pr-5"
+      class="pr-4"
       :step="step"
     >
-      <v-alert
-        :value="showHelp"
-        dense
-        text
-        color="grey"
-        class="mt-2 mb-0 font-weight-regular rounded-0 px-0 pt-0"
+      <VcsHelp
+        :text="helpText"
+        :show="showHelp"
       >
-        <slot name="help">
-          <span>{{ $t(helpText) }}</span>
-        </slot>
-      </v-alert>
+        <slot name="help" />
+      </VcsHelp>
       <slot name="content" />
     </v-stepper-content>
   </div>
@@ -43,8 +41,9 @@
 
 <script>
   import { computed, reactive, watch } from 'vue';
-  import { VStepperStep, VStepperContent, VAlert } from 'vuetify/lib';
+  import { VStepperStep, VStepperContent } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsHelp from '../notification/VcsHelp.vue';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper-step/ |vuetify VStepperStep} and
@@ -68,7 +67,7 @@
       VStepperStep,
       VStepperContent,
       VcsActionButtonList,
-      VAlert,
+      VcsHelp,
     },
     props: {
       step: {
@@ -157,4 +156,7 @@
       }
     }
   }
+  .v-stepper__content {
+    padding-left: 2px !important;
+  }
 </style>