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

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

@@ -47,6 +47,7 @@
 }
 </style>
 <script>
+  import { VCheckbox } from 'vuetify/lib';
   import VcsLabel from './VcsLabel.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import validate from '../notification/validation.js';
@@ -58,11 +59,15 @@
    * - 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 {string} label Label to be displayed, will be translated.
+   * @vue-prop {string} label - Label to be displayed, will be translated.
    */
   export default {
     name: 'VcsCheckbox',
-    components: { VcsTooltip, VcsLabel },
+    components: {
+      VcsTooltip,
+      VcsLabel,
+      VCheckbox,
+    },
     props: {
       tooltipPosition: {
         type: String,

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

@@ -31,6 +31,7 @@
   } from 'vue';
   import { Subject } from 'rxjs';
   import { debounceTime, takeUntil } from 'rxjs/operators';
+  import { VColorPicker } from 'vuetify/lib';
 
   /**
    * @description
@@ -38,6 +39,9 @@
    */
   export default {
     name: 'VcsColorPicker',
+    components: {
+      VColorPicker,
+    },
     props: {
       width: {
         type: Number,

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

@@ -1,16 +1,27 @@
 <template>
   <section class="vcs-form-section">
-    <slot name="title">
+    <slot name="header">
       <article class="pa-2 accent">
         <div class="form-section-header d-flex justify-space-between align-center">
-          <strong class="caption">{{ $t(title) }}</strong>
+          <strong class="caption">{{ $t(heading) }}</strong>
           <VcsActionButtonList
-            :actions="titleActions"
+            :actions="actions"
             small
           />
         </div>
       </article>
     </slot>
+    <v-alert
+      :value="showHelp"
+      dense
+      text
+      color="secondary"
+      class="ma-0"
+    >
+      <slot name="help">
+        <span>{{ $t(helpText) }}</span>
+      </slot>
+    </v-alert>
     <article class="section-content">
       <slot />
     </article>
@@ -19,28 +30,63 @@
 
 
 <script>
+  import { computed, ref } from 'vue';
+  import { VAlert } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
 
   /**
    * @description
    * Stylized form section with action buttons
-   * @vue-data {slot} [#title] - slot to override form section header
+   * @vue-data {slot} [#header] - slot to override form section header
    * @vue-data {slot} [#default] - slot with the section content
-   * @vue-prop {string} title - Title to be displayed, will be translated.
-   * @vue-prop {Array<VcsAction>}    titleActions - Icons to be displayed on the right side
+   * @vue-data {slot} [#help] - Slot to specify html based help. Gets precedence over helpText prop.
+   * @vue-prop {string} heading - Title of the section to be displayed, will be translated.
+   * @vue-prop {Array<VcsAction>}    headerActions - Icons to be displayed on the right side
+   * @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-computed {Array<VcsAction>} actions - Returns header actions extended by a help action, if help prop is passed or help slot is used.
    */
   export default {
     name: 'VcsFormSection',
-    components: { VcsActionButtonList },
+    components: {
+      VcsActionButtonList,
+      VAlert,
+    },
     props: {
-      title: {
+      heading: {
         type: String,
         default: undefined,
       },
-      titleActions: {
+      headerActions: {
         type: Array,
         default: () => ([]),
       },
+      helpText: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup(props, { slots }) {
+      const showHelp = ref(false);
+      const helpAction = {
+        name: 'help',
+        title: 'components.vcsFormSection.help',
+        icon: 'mdi-help-circle',
+        callback: () => { showHelp.value = !showHelp.value; },
+      };
+      /**
+       * @type {ComputedRef<VcsAction>}
+       */
+      const actions = computed(() => {
+        if (props.helpText || (slots.help && slots.help().length > 0)) {
+          return [helpAction, ...props.headerActions];
+        }
+        return props.headerActions;
+      });
+
+      return {
+        showHelp,
+        actions,
+      };
     },
   };
 </script>

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

@@ -70,6 +70,7 @@
 }
 </style>
 <script>
+  import { VRadio, VRadioGroup } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import VcsLabel from './VcsLabel.vue';
   import validate from '../notification/validation.js';
@@ -94,7 +95,12 @@
    */
   export default {
     name: 'VcsRadio',
-    components: { VcsTooltip, VcsLabel },
+    components: {
+      VcsTooltip,
+      VcsLabel,
+      VRadioGroup,
+      VRadio,
+    },
     props: {
       tooltipPosition: {
         type: String,

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,30 +56,49 @@
      }
    }
  }
+ .v-select{
+   &.v-select--is-multi{
+     ::v-deep {
+       .v-select__selections{
+          flex-wrap: nowrap;
+       }
+     }
+   }
+ }
 </style>
 <script>
 
+  import { VSelect } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import validate from '../notification/validation.js';
 
   /**
    * @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.
    */
   export default {
     name: 'VcsSelect',
-    components: { VcsTooltip },
+    components: {
+      VcsTooltip,
+      VSelect,
+    },
     props: {
       tooltipPosition: {
         type: String,
         default: 'right',
       },
+      itemText: {
+        type: Function,
+        default: undefined,
+      },
     },
     data() {
       return {
@@ -91,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/VcsTextArea.vue

@@ -51,6 +51,7 @@
 </style>
 
 <script>
+  import { VTextarea } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
@@ -73,6 +74,7 @@
     name: 'VcsTextArea',
     components: {
       VcsTooltip,
+      VTextarea,
     },
     props: {
       tooltipPosition: {

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,10 +52,11 @@
 </style>
 
 <script>
+  import { VTextField, VFileInput } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
-   * @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
@@ -72,6 +74,8 @@
     name: 'VcsTextField',
     components: {
       VcsTooltip,
+      VTextField,
+      VFileInput,
     },
     props: {
       tooltipPosition: {
@@ -90,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);
@@ -101,7 +111,7 @@
         return this.joinedErrorBucket.length > 0 && (this.firstInput || !this.neverBlurred);
       },
       isOutlined() {
-        return (this.hover || this.focus || this.isError) && !(this.$attrs.disabled || this.$attrs.disabled === '');
+        return (this.$attrs.outlined || this.hover || this.focus || this.isError) && !(this.$attrs.disabled || this.$attrs.disabled === '');
       },
       joinedErrorBucket() {
         if (!this.isMounted) {
@@ -124,6 +134,8 @@
     },
     mounted() {
       this.isMounted = true;
+      // fix for autofocus
+      this.focus = this.$attrs.autofocus != null;
     },
   };
 </script>

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>

package/src/components/lists/VcsActionList.vue

@@ -40,6 +40,9 @@
 </style>
 <script>
   import { is } from '@vcsuite/check';
+  import {
+    VIcon, VList, VListItem, VListItemContent, VListItemIcon, VListItemTitle,
+  } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
@@ -91,7 +94,15 @@
    */
   export default {
     name: 'VcsActionList',
-    components: { VcsTooltip },
+    components: {
+      VcsTooltip,
+      VList,
+      VListItem,
+      VListItemIcon,
+      VIcon,
+      VListItemTitle,
+      VListItemContent,
+    },
     props: {
       actions: {
         type: Array,