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

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

@@ -0,0 +1,72 @@
+<template>
+  <v-slider
+    class="vcs-slider"
+    :dense="$attrs.dense !== false"
+    hide-details
+    v-bind="{ ...$attrs }"
+    v-on="{ ...$listeners }"
+    :color="$attrs.color || 'base darken-1'"
+    :track-color="$attrs['track-color'] || 'base darken-1'"
+    :thumb-color="$attrs['thumb-color'] || 'base darken-3'"
+  />
+</template>
+<style lang="scss" scoped>
+  @import '../../styles/shades.scss';
+  .vcs-slider {
+    ::v-deep {
+      .v-slider {
+        .v-slider__thumb {
+          border: 2px solid;
+          &:before {
+            display: none;
+          }
+        }
+        &.theme--light {
+          .v-slider__thumb {
+            border-color: map-get($shades, 'white') !important;
+          }
+        }
+        &.theme--dark {
+          .v-slider__thumb {
+            border-color: map-get($shades, 'black') !important;
+          }
+        }
+        .v-slider__tick,
+        .v-slider__tick--filled {
+          background-color: var(--v-base-darken1);
+          height: 4px !important;
+          top: calc(50% - 2px) !important;
+        }
+        &.v-slider--vertical {
+          .v-slider__tick,
+          .v-slider__tick--filled {
+            width: 4px !important;
+            height: 2px !important;
+            right: calc(50% - 2px) !important;
+            top: auto !important;
+          }
+        }
+      }
+    }
+    &:not(.v-input--dense) {
+      ::v-deep {
+        .v-slider.v-slider--horizontal {
+          margin-left: 12px;
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+</style>
+<script>
+  import { VSlider } from 'vuetify/lib';
+  /**
+   * @description stylized wrapper around {@link https://v2.vuetifyjs.com/en/components/sliders/#api}.
+   */
+  export default {
+    name: 'VcsSlider',
+    components: {
+      VSlider,
+    },
+  };
+</script>

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

@@ -17,8 +17,8 @@
           @mouseover="hover = true"
           @mouseleave="hover = false"
           outlined
-          v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners, ...on}"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
           :rows="$attrs.rows || (isDense ? 3 : 5)"
           class="ma-0 py-1 primary--placeholder"
           :class="{
@@ -35,16 +35,16 @@
 </template>
 
 <style lang="scss" scoped>
-.primary--placeholder {
-  ::v-deep {
-    textarea::placeholder {
-      color: var(--v-primary-base);
-      font-style: italic;
-      opacity: 1;
+  .primary--placeholder {
+    ::v-deep {
+      textarea::placeholder {
+        color: var(--v-primary-base);
+        font-style: italic;
+        opacity: 1;
+      }
     }
   }
-}
-.remove-outline {
+  .remove-outline {
     ::v-deep {
       fieldset {
         border-width: 0;
@@ -65,7 +65,8 @@
   }
   .outline--error {
     ::v-deep {
-      .v-input__slot fieldset, .v-text-field__slot textarea {
+      .v-input__slot fieldset,
+      .v-text-field__slot textarea {
         border-color: var(--v-error-base);
       }
     }
@@ -152,12 +153,18 @@
       const errorMessage = useErrorSync(textAreaRef);
 
       const isClearable = computed(() => {
-        return (attrs.clearable !== undefined && attrs.clearable !== false) &&
-          (hover.value || focus.value || errorMessage.value);
+        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.value || focus.value || errorMessage.value) &&
+          !(attrs.disabled || attrs.disabled === '')
+        );
       });
       return {
         hover,

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

@@ -1,8 +1,5 @@
 <template>
-  <div
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-  >
+  <div @mouseover="hover = true" @mouseleave="hover = false">
     <VcsTooltip
       :tooltip-position="tooltipPosition"
       :tooltip="errorMessage"
@@ -21,11 +18,11 @@
           @blur="onBlur"
           @keydown.esc="onEscape"
           @keydown="$emit('keydown', $event)"
-          :value="visibleValue"
           :type="type"
           outlined
-          v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners, ...on}"
+          v-model="visibleValue"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
           :height="isDense ? 24 : 32"
           class="py-1 primary--placeholder align-center"
           :class="{
@@ -34,7 +31,11 @@
             'outline--error': !!errorMessage,
             'input--dense': isDense,
             'input--not-dense': !isDense,
-            'file-border-bottom': inputComponent === 'VFileInput' && !focus && !hover && !errorMessage,
+            'file-border-bottom':
+              inputComponent === 'VFileInput' &&
+              !focus &&
+              !hover &&
+              !errorMessage,
           }"
         />
       </template>
@@ -73,7 +74,8 @@
   }
   .outline--error {
     ::v-deep {
-      .v-input__slot fieldset, .v-text-field__slot input {
+      .v-input__slot fieldset,
+      .v-text-field__slot input {
         border-color: var(--v-error-base);
       }
     }
@@ -125,6 +127,12 @@
       .v-text-field__suffix {
         padding-left: 4px;
       }
+      .v-input__prepend-outer {
+        margin-right: 4px;
+      }
+      .v-icon {
+        font-size: 16px;
+      }
       fieldset {
         border-radius: 2px;
         border-color: var(--v-base-base);
@@ -197,19 +205,36 @@
         return 'VTextField';
       });
       const isClearable = computed(() => {
-        return (attrs.clearable !== undefined && attrs.clearable !== false) &&
-          (hover.value || focus.value || !!errorMessage.value);
+        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.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 attrs.value || '';
-        }
+      const visibleValue = computed({
+        get() {
+          if (
+            attrs.type === 'number' &&
+            attrs.value &&
+            props.unit &&
+            !focus.value &&
+            !hover.value
+          ) {
+            return `${attrs.value} ${props.unit}`;
+          } else {
+            return attrs.value ?? '';
+          }
+        },
+        set(event) {
+          emit('input', event);
+        },
       });
       const type = computed(() => {
         if (attrs.type === 'number' && !focus.value) {

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

@@ -2,8 +2,8 @@
   <v-stepper
     vertical
     :value="value"
-    @change="newValue => $emit('input', newValue)"
-    class="rounded-0"
+    @change="(newValue) => $emit('input', newValue)"
+    class="rounded-0 pb-1"
   >
     <slot />
   </v-stepper>
@@ -33,106 +33,105 @@
   };
 </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: var(--v-primary-base);
-          }
-        }
-        &--complete {
+  @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');
+          }
         }
-        .v-stepper__step__step::before {
-          color: map-get($shades, 'white');
-        }
-      }
-      .step-border:not(:last-child) > .v-stepper__content {
+        .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');
-        }
-        &--active {
-          background-color: rgba(255, 255, 255, 0.17);
-          .v-stepper__label {
-            color: var(--v-primary-base);
-          }
-        }
-        &--complete {
+    &.theme--dark {
+      background: map-get($shades, 'black');
+      ::v-deep {
+        .v-stepper__step {
           .v-stepper__label {
             color: map-get($shades, 'white');
           }
-        }
-        .v-stepper__step__step {
-          .v-icon {
-            color: transparent;
+          &--complete {
+            .v-stepper__label {
+              color: map-get($shades, 'white');
+            }
           }
-          &:before{
-            color: map-get($shades, 'black');
+          &--active {
+            background-color: rgba(255, 255, 255, 0.17);
+            .v-stepper__label {
+              color: var(--v-primary-base);
+            }
           }
-        }
-        &.v-stepper__step--error{
-          .v-stepper__label{
-            color: var(--v-error-darken2);
+          .v-stepper__step__step {
+            .v-icon {
+              color: transparent;
+            }
+            &:before {
+              color: map-get($shades, 'black');
+            }
           }
-          .v-stepper__step__step{
-            background-color: var(--v-error-darken1);
+          &.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 {
+        .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: 2px;
-        margin-right: 5px;
-        &:before{
-          content: '\25cf';
-          font-size: 18px;
-          position: absolute;
-          top: -9px;
+    ::v-deep {
+      .v-stepper__step {
+        padding-top: 0;
+        padding-bottom: 0;
+        .v-stepper__label {
+          font-weight: 700;
+          text-shadow: none !important;
         }
-      }
-      &.v-stepper__step--error {
-        .v-stepper__step__step{
-          background-color: var(--v-error-base);
+        .v-stepper__step__step {
+          color: transparent;
+          position: relative;
+          margin-top: 1px;
+          &:before {
+            content: '\25cf';
+            font-size: 18px;
+            position: absolute;
+            top: -9px;
+          }
         }
-        .v-stepper__label{
-          color: var(--v-error-base);
+        &.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;
+      .v-stepper__content .v-stepper__wrapper {
+        margin: 4px 0 4px 4px;
+      }
     }
   }
-}
 </style>

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

@@ -5,33 +5,25 @@
       :editable="editable"
       :complete="complete"
       :rules="rules"
-      class="pr-6"
+      class="pr-2"
     >
       <div class="d-flex justify-space-between align-center">
         <slot name="header" />
-        <div v-if="!$slots.header" class="py-3">
+        <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"
-          small
           @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"
-      >
+    <v-stepper-content v-if="$slots.content" class="pr-4" :step="step">
+      <VcsHelp :text="helpText" :show="showHelp">
         <slot name="help" />
       </VcsHelp>
       <slot name="content" />
@@ -84,7 +76,7 @@
       },
       rules: {
         type: Array,
-        default: () => ([]),
+        default: () => [],
       },
       heading: {
         type: String,
@@ -92,7 +84,7 @@
       },
       headerActions: {
         type: Array,
-        default: () => ([]),
+        default: () => [],
       },
       actionButtonListOverflowCount: {
         type: Number,
@@ -123,13 +115,16 @@
       });
       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;
-        }
-      });
+      watch(
+        () => props.value,
+        (currentStep, previousStep) => {
+          if (Number(previousStep) === Number(props.step)) {
+            helpAction.active = false;
+          }
+        },
+      );
       /**
-       * @type {ComputedRef<VcsAction>}
+       * @type {import("vue").ComputedRef<VcsAction>}
        */
       const actions = computed(() => {
         if (props.helpText || (slots.help && slots.help().length > 0)) {
@@ -146,7 +141,7 @@
   };
 </script>
 <style scoped lang="scss">
-  .v-alert--text:before{
+  .v-alert--text:before {
     background-color: transparent;
   }
   .v-stepper__step {
@@ -159,4 +154,8 @@
   .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

@@ -2,25 +2,30 @@ import { computed } from 'vue';
 
 /**
  * Syncs the error and validation state with the underlying vuetify component.
- * @param {Ref<any>} elementRef The template ref to the base vuetify component.
- * @returns {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
+ * @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) {
-  const errorMessage = computed(() => {
+  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];
+      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) {
+      if (
+        elementRef.value.validationState === 'error' ||
+        !!customErrorMessages.length
+      ) {
         // custom errorMessages are displayed when all validation error are solved.
-        return [...elementRef.value.errorBucket, ...customErrorMessages][0] || '';
+        return (
+          [...elementRef.value.errorBucket, ...customErrorMessages][0] || ''
+        );
       }
     }
     return '';
   });
-  return errorMessage;
 }

package/src/components/form-output/VcsFormattedNumber.vue

@@ -1,30 +1,28 @@
 <template>
-  <span class="vcs-formatted-number px-1" :class="{'vcs-formatted-number-dense': dense}">
+  <span
+    class="vcs-formatted-number pr-2 pl-1"
+    :class="{ 'vcs-formatted-number-dense': dense }"
+  >
     {{ formatted }}
-    <span v-if="unit === SpecialUnits.SQM">
-      m<sup>2</sup>
-    </span>
-    <span v-else-if="unit === SpecialUnits.CBM">
-      m<sup>3</sup>
-    </span>
-    <span v-else-if="unit === SpecialUnits.DEG">
-      °
-    </span>
+    <span v-if="unit === SpecialUnits.SQM"> m<sup>2</sup> </span>
+    <span v-else-if="unit === SpecialUnits.CBM"> m<sup>3</sup> </span>
+    <span v-else-if="unit === SpecialUnits.DEG"> ° </span>
     <span v-else>
       {{ unit }}
     </span>
   </span>
 </template>
 <style lang="scss" scoped>
-@import "../../styles/vcsGrid.scss";
-@import "../../styles/vcsFont";
-.vcs-formatted-number {
-  font-size: $base-font-size;
-  line-height: $line-height-base;
-}
-.vcs-formatted-number-dense {
-  line-height: $line-height-dense;
-}
+  @import '../../styles/vcsGrid.scss';
+  @import '../../styles/vcsFont';
+  .vcs-formatted-number,
+  .vcs-formatted-number span {
+    font-size: $vcs-font-size;
+    line-height: $line-height-base;
+  }
+  .vcs-formatted-number-dense {
+    line-height: $line-height-dense;
+  }
 </style>
 <script>
   import { computed } from 'vue';
@@ -36,17 +34,17 @@
    * @param {number} fractionDigits
    * @returns {string|number}
    */
-  export function numberToLocaleString(value, fractionDigits) { // XXX todo maybe merge with dateTime helpers in core?
+  export function numberToLocaleString(value, fractionDigits) {
+    // XXX todo maybe merge with dateTime helpers in core?
     const number = parseInt(value, 10);
     if (Number.isNaN(number)) {
       return number;
     }
 
-    return (/** @type {number} */ value)
-      .toLocaleString(navigator.language, {
-        minimumFractionDigits: fractionDigits,
-        maximumFractionDigits: fractionDigits,
-      });
+    return /** @type {number} */ value.toLocaleString(navigator.language, {
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits,
+    });
   }
 
   /**
@@ -93,7 +91,9 @@
       },
     },
     setup(props) {
-      const formatted = computed(() => numberToLocaleString(props.value, props.fractionDigits));
+      const formatted = computed(() =>
+        numberToLocaleString(props.value, props.fractionDigits),
+      );
       return {
         SpecialUnits,
         formatted,