@vcmap/ui 5.0.0-rc.15 → 5.0.0-rc.16

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

@@ -17,11 +17,21 @@
             :outlined="isOutlined"
             :dense="isDense"
             :height="isDense ? 24 : 32"
+            :item-text="item => $t(getText(item))"
             :class="$attrs.color === 'primary' ? 'primary--select' : ''"
             v-bind="{...$attrs, ...attrs}"
             v-on="{...$listeners, ...on}"
             @update:error="setError"
-          />
+          >
+            <template #selection="{ item, index }">
+              <span v-if="index === 0" class="text-truncate">
+                {{ $t(getText(item)) }}
+              </span>
+              <span v-if="index === 1" class="text-no-wrap grey--text text-caption">
+                (+{{ $attrs.value.length - 1 }})
+              </span>
+            </template>
+          </v-select>
         </span>
       </template>
     </VcsTooltip>
@@ -46,6 +56,15 @@
      }
    }
  }
+ .v-select{
+   &.v-select--is-multi{
+     ::v-deep {
+       .v-select__selections{
+          flex-wrap: nowrap;
+       }
+     }
+   }
+ }
 </style>
 <script>
 
@@ -55,11 +74,13 @@
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-select/ |vuetify select}.
+   * Translates the items text if it is an i18n string.
    * 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
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {Function} itemText - A function that is applied to each item and should return the item's text value.
    * @vue-computed {boolean} isDense - Whether size of select is dense.
    * @vue-computed {boolean} isOutlined - Select is outlined on either hover, focus or error, if not disabled.
    */
@@ -74,6 +95,10 @@
         type: String,
         default: 'right',
       },
+      itemText: {
+        type: Function,
+        default: undefined,
+      },
     },
     data() {
       return {
@@ -95,6 +120,13 @@
         const rules = [...this.$attrs.rules].concat(this.$attrs.errorMessages);
         this.errorMessage = validate(rules, this.$attrs.value).join('\n');
       },
+      getText(item) {
+        if (this.itemText) {
+          return this.itemText(item);
+        } else {
+          return item?.text ?? item;
+        }
+      },
     },
   };
 </script>

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

@@ -11,7 +11,8 @@
       :max-width="200"
     >
       <template #activator="{ attrs }">
-        <v-text-field
+        <component
+          :is="inputComponent"
           ref="textFieldRef"
           hide-details
           :dense="isDense"
@@ -23,7 +24,7 @@
           v-bind="{...$attrs, ...attrs}"
           v-on="{...$listeners}"
           :height="isDense ? 24 : 32"
-          class="ma-0 pb-1 pt-1 primary--placeholder"
+          class="ma-0 pb-1 pt-1 primary--placeholder align-center"
           :class="$attrs.color === 'primary' ? 'primary--textfield' : ''"
         />
       </template>
@@ -51,7 +52,7 @@
 </style>
 
 <script>
-  import { VTextField } from 'vuetify/lib';
+  import { VTextField, VFileInput } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
@@ -74,6 +75,7 @@
     components: {
       VcsTooltip,
       VTextField,
+      VFileInput,
     },
     props: {
       tooltipPosition: {
@@ -92,6 +94,12 @@
       };
     },
     computed: {
+      inputComponent() {
+        if (this.$attrs.type === 'file') {
+          return 'VFileInput';
+        }
+        return 'VTextField';
+      },
       isClearable() {
         return (this.$attrs.clearable !== undefined && this.$attrs.clearable !== false) &&
           (this.hover || this.focus || this.isError);

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

@@ -0,0 +1,133 @@
+<template>
+  <v-stepper
+    vertical
+    :value="value"
+    @change="(value) => emitValue(value)"
+  >
+    <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} step - The current step of the stepper.
+   */
+  export default {
+    name: 'VcsWizard',
+    components: {
+      VStepper,
+    },
+    props: {
+      value: {
+        type: Number,
+        default: undefined,
+      },
+    },
+    setup(props, { emit }) {
+      function emitValue(newValue) {
+        emit('input', typeof newValue !== 'number' ? Number(newValue) : newValue);
+      }
+
+      return {
+        emitValue,
+      };
+    },
+  };
+</script>
+<style scoped lang="scss">
+.v-stepper{
+  &.theme--light {
+    ::v-deep{
+      .v-stepper__step {
+        &--active {
+          background-color: rgba(34, 34, 34, 0.1);
+          .v-stepper__label {
+            color: rgba(34, 34, 34, 0.8);
+          }
+        }
+        &--complete {
+          .v-stepper__label {
+            color: rgba(0, 0, 0, 0.38);
+          }
+        }
+      }
+      .v-stepper__content {
+        &:not(:last-child) {
+          border-left: 2px solid rgba(0, 0, 0, 0.12) !important;
+        }
+      }
+    }
+  }
+  &.theme--dark {
+    ::v-deep{
+      .v-stepper__step {
+        &--active {
+          background-color: rgba(255, 255, 255, 0.5);
+          .v-stepper__label {
+            color: rgba(255, 255, 255, 1);
+          }
+        }
+        &--complete {
+          .v-stepper__label {
+            color: rgba(255, 255, 255, 0.5);
+          }
+        }
+        .v-stepper__step__step {
+          .v-icon {
+            color: transparent;
+          }
+        }
+        &.v-stepper__step--error{
+          .v-stepper__label{
+            color: var(--v-error-darken2);
+          }
+          .v-stepper__step__step{
+            background-color: var(--v-error-darken1);
+          }
+        }
+      }
+      .v-stepper__content {
+        &:not(:last-child) {
+          border-left: 2px solid rgba(255, 255, 255, 0.8) !important;
+        }
+      }
+    }
+  }
+  ::v-deep{
+    .v-stepper__step {
+      height: 40px;
+      .v-stepper__label {
+        font-weight: 700;
+        text-shadow: none !important;
+      }
+      .v-stepper__step__step {
+        color: transparent;
+        position: relative;
+        &:before{
+          content: '\25cf';
+          color: var(--v-basic-base);
+          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;
+    }
+  }
+}
+</style>

package/src/components/imageElementInjector.vue

@@ -0,0 +1,22 @@
+<template>
+  <div />
+</template>
+
+<script>
+  export default {
+    name: 'ImageElementInjector',
+    props: {
+      element: {
+        type: [HTMLCanvasElement, HTMLImageElement],
+        required: true,
+      },
+    },
+    mounted() {
+      this.$el.replaceWith(this.element);
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>