@vcmap/ui 5.0.0-rc.9 → 5.0.0

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

@@ -1,30 +1,44 @@
 <template>
-  <div
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-  >
+  <div @mouseover="hover = true" @mouseleave="hover = false">
     <VcsTooltip
       :tooltip-position="tooltipPosition"
       :tooltip="errorMessage"
-      :value="(hover || focus) && isError"
       color="error"
       :max-width="200"
     >
-      <template #activator="{ attrs }">
-        <v-text-field
+      <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"
-          v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners}"
+          @focus="onFocus"
+          @blur="onBlur"
+          @keydown.esc="onEscape"
+          @keydown="$emit('keydown', $event)"
+          :type="type"
+          outlined
+          v-model="visibleValue"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
           :height="isDense ? 24 : 32"
-          class="ma-0 pb-1 pt-1 primary--placeholder"
-          :class="$attrs.color === 'primary' ? 'primary--textfield' : ''"
+          :rules="rules"
+          class="primary--placeholder align-center"
+          :class="{
+            'py-1': !noPadding,
+            '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>
@@ -32,98 +46,253 @@
 </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;
+      }
+      .v-input__prepend-outer {
+        margin-right: 4px;
+      }
+      .v-icon {
+        font-size: 16px;
+      }
+      .v-text-field--rounded 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/|vuetify v-text-field}.
+   * @description extends API of {@link https://vuetifyjs.com/en/api/v-text-field v-text-field}.
    * 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 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-prop {boolean}                                noPadding - Padding is required for usage within rows. For standalone usage this prop removes class py-1.
    * @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',
     components: {
       VcsTooltip,
+      VTextField,
+      VFileInput,
     },
     props: {
       tooltipPosition: {
         type: String,
         default: 'right',
       },
-    },
-    data() {
-      return {
-        hover: false,
-        focus: false,
-        firstInput: false,
-        neverBlurred: true,
-        isMounted: false,
-        errorMessage: '',
-      };
-    },
-    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;
+      unit: {
+        type: String,
+        default: '',
       },
-      isError() {
-        return this.joinedErrorBucket.length > 0 && (this.firstInput || !this.neverBlurred);
+      showSpinButtons: {
+        type: Boolean,
+        default: false,
       },
-      isOutlined() {
-        return (this.hover || this.focus || this.isError) && !(this.$attrs.disabled || this.$attrs.disabled === '');
+      noPadding: {
+        type: Boolean,
+        default: false,
       },
-      joinedErrorBucket() {
-        if (!this.isMounted) {
-          return false;
+    },
+    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';
+      });
+      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({
+        get() {
+          if (
+            attrs.type === 'number' &&
+            Number.isFinite(attrs.value) &&
+            props.unit &&
+            !focus.value &&
+            !hover.value
+          ) {
+            return `${attrs.value} ${props.unit}`;
+          } else {
+            return attrs.value ?? '';
+          }
+        },
+        set() {
+          // emit is not needed, the vuetify component already emits an @input event. (forwarded listeners)
+          // emit('input', event);
+        },
+      });
+      const type = computed(() => {
+        if (attrs.type === 'number' && !focus.value) {
+          return 'text';
         } else {
-          return this.$refs.textFieldRef.errorBucket.concat(this.$refs.textFieldRef.errorMessages).join('\n');
+          return attrs.type || 'text';
         }
-      },
-    },
-    watch: {
-      joinedErrorBucket(newValue, oldValue) {
-        if (oldValue && !newValue) {
-          setTimeout(() => {
-            this.errorMessage = newValue;
-          }, 200);
+      });
+
+      const rules = computed(() => {
+        if (attrs.type === 'number' && Array.isArray(attrs.rules)) {
+          return attrs.rules.map((rule) => {
+            return (value) => rule(parseFloat(value));
+          });
         } else {
-          this.errorMessage = newValue;
+          return attrs.rules;
         }
-      },
-    },
-    mounted() {
-      this.isMounted = true;
+      });
+
+      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,
+        rules,
+        onEscape,
+        textFieldRef,
+        errorMessage,
+        onBlur,
+        onFocus,
+      };
     },
   };
 </script>

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

@@ -0,0 +1,137 @@
+<template>
+  <v-stepper
+    vertical
+    :value="value"
+    @change="(newValue) => $emit('input', newValue)"
+    class="rounded-0 pb-1"
+  >
+    <slot />
+  </v-stepper>
+</template>
+
+<script>
+  import { VStepper } from 'vuetify/lib';
+
+  /**
+   * @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} value - The current step of the stepper.
+   * @vue-data {slot} [#default] - Slot to add VcsWizardSteps.
+   */
+  export default {
+    name: 'VcsWizard',
+    components: {
+      VStepper,
+    },
+    props: {
+      value: {
+        type: Number,
+        default: undefined,
+      },
+    },
+  };
+</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');
+          }
+          &--complete {
+            .v-stepper__label {
+              color: map-get($shades, 'black');
+            }
+          }
+          &--active {
+            background-color: rgba(34, 34, 34, 0.1);
+            .v-stepper__label {
+              color: var(--v-primary-base);
+            }
+          }
+          .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);
+        }
+      }
+    }
+    &.theme--dark {
+      background: map-get($shades, 'black');
+      ::v-deep {
+        .v-stepper__step {
+          .v-stepper__label {
+            color: map-get($shades, 'white');
+          }
+          &--complete {
+            .v-stepper__label {
+              color: map-get($shades, 'white');
+            }
+          }
+          &--active {
+            background-color: rgba(255, 255, 255, 0.17);
+            .v-stepper__label {
+              color: var(--v-primary-base);
+            }
+          }
+          .v-stepper__step__step {
+            .v-icon {
+              color: transparent;
+            }
+            &:before {
+              color: map-get($shades, 'black');
+            }
+          }
+          &.v-stepper__step--error {
+            .v-stepper__label {
+              color: var(--v-error-darken2);
+            }
+            .v-stepper__step__step {
+              background-color: var(--v-error-darken1);
+            }
+          }
+        }
+        .step-border:not(:last-child) > .v-stepper__content {
+          border-left: 2px solid rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+    ::v-deep {
+      .v-stepper__step {
+        padding-top: 0;
+        padding-bottom: 0;
+        .v-stepper__label {
+          font-weight: 700;
+          text-shadow: none !important;
+        }
+        .v-stepper__step__step {
+          color: transparent;
+          position: relative;
+          margin-top: 1px;
+          &:before {
+            content: '\25cf';
+            font-size: 18px;
+            position: absolute;
+            top: -9px;
+          }
+        }
+        &.v-stepper__step--error {
+          .v-stepper__step__step {
+            background-color: var(--v-error-base);
+          }
+          .v-stepper__label {
+            color: var(--v-error-base);
+          }
+        }
+      }
+      .v-stepper__content .v-stepper__wrapper {
+        margin: 4px 0 4px 4px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,161 @@
+<template>
+  <div class="step-border">
+    <v-stepper-step
+      :step="step"
+      :editable="editable"
+      :complete="complete"
+      :rules="rules"
+      class="pr-2"
+    >
+      <div class="d-flex justify-space-between align-center">
+        <slot name="header" />
+        <div v-if="!$slots.header" class="step-label-wrap">
+          <span>{{ $t(heading) }}</span>
+        </div>
+        <VcsActionButtonList
+          v-if="Number(step) === Number(value)"
+          :actions="actions"
+          :overflow-count="actionButtonListOverflowCount"
+          @mousedown.stop
+          @touchstart.stop
+          @keydown.stop
+        />
+      </div>
+    </v-stepper-step>
+    <v-stepper-content v-if="$slots.content" class="pr-4" :step="step">
+      <VcsHelp :text="helpText" :show="showHelp">
+        <slot name="help" />
+      </VcsHelp>
+      <slot name="content" />
+    </v-stepper-content>
+  </div>
+</template>
+
+<script>
+  import { computed, reactive, watch } from 'vue';
+  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
+   * {@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,
+      VcsHelp,
+    },
+    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 {import("vue").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;
+      }
+    }
+  }
+  .v-stepper__content {
+    padding-left: 2px !important;
+  }
+  .step-label-wrap {
+    padding-top: 13px !important;
+    padding-bottom: 13px !important;
+  }
+</style>

package/src/components/form-inputs-controls/composables.js

@@ -0,0 +1,31 @@
+import { computed } from 'vue';
+
+/**
+ * Syncs the error and validation state with the underlying vuetify component.
+ * @param {import("vue").Ref<any>} elementRef The template ref to the base vuetify component.
+ * @returns {import("vue").Ref<string>} Error message to display. Is empty string if either there are no error messages or if the validation errors are not displayed because
+ * no interaction with the component or validation was reset by form. Validation errors have precedence over custom error messages.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function useErrorSync(elementRef) {
+  return computed(() => {
+    // if element is already mounted
+    if (elementRef.value) {
+      // errorMessages of selectField can either be (empty) array or string. Makes sure it is array.
+      const customErrorMessages = Array.isArray(elementRef.value.errorMessages)
+        ? elementRef.value.errorMessages
+        : [elementRef.value.errorMessages];
+      // if validationState is 'error' (reset button removes this) or if there is errorMessages prop
+      if (
+        elementRef.value.validationState === 'error' ||
+        !!customErrorMessages.length
+      ) {
+        // custom errorMessages are displayed when all validation error are solved.
+        return (
+          [...elementRef.value.errorBucket, ...customErrorMessages][0] || ''
+        );
+      }
+    }
+    return '';
+  });
+}