@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.24

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

@@ -2,8 +2,10 @@
   <section class="vcs-form-section">
     <slot name="header" :heading="heading" :actions="actions">
       <article class="pa-2 base lighten-3">
-        <div class="form-section-header d-flex justify-space-between align-center">
-          <strong class="caption">{{ $t(heading) }}</strong>
+        <div
+          class="form-section-header d-flex justify-space-between align-center"
+        >
+          <strong>{{ $t(heading) }}</strong>
           <VcsActionButtonList
             :actions="actions"
             :overflow-count="actionButtonListOverflowCount"
@@ -12,11 +14,7 @@
         </div>
       </article>
     </slot>
-    <VcsHelp
-      :text="helpText"
-      :show="showHelp"
-      class="base lighten-4"
-    >
+    <VcsHelp :text="helpText" :show="showHelp" class="base lighten-4">
       <slot name="help" />
     </VcsHelp>
     <article class="section-content">
@@ -25,7 +23,6 @@
   </section>
 </template>
 
-
 <script>
   import { computed, reactive } from 'vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
@@ -56,7 +53,7 @@
       },
       headerActions: {
         type: Array,
-        default: () => ([]),
+        default: () => [],
       },
       actionButtonListOverflowCount: {
         type: Number,
@@ -74,11 +71,13 @@
         title: 'components.vcsFormSection.help',
         active: false,
         icon: 'mdi-help-circle',
-        callback() { this.active = !this.active; },
+        callback() {
+          this.active = !this.active;
+        },
       });
       const showHelp = computed(() => helpAction.active);
       /**
-       * @type {ComputedRef<VcsAction>}
+       * @type {import("vue").ComputedRef<VcsAction>}
        */
       const actions = computed(() => {
         if (props.helpText || (slots.help && slots.help().length > 0)) {
@@ -96,7 +95,7 @@
 </script>
 
 <style scoped>
-  .v-alert--text:before{
+  .v-alert--text:before {
     background-color: transparent;
   }
 </style>

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

@@ -13,18 +13,17 @@
 </template>
 
 <style lang="scss" scoped>
-@import "../../styles/vcsGrid.scss";
-@import "../../styles/vcsFont";
-.vcs-label {
-  font-size: $base-font-size;
-  line-height: $line-height-base;
-}
-.vcs-label-dense {
-  line-height: $line-height-dense;
-}
+  @import '../../styles/vcsGrid.scss';
+  @import '../../styles/vcsFont';
+  .vcs-label {
+    font-size: $vcs-font-size;
+    line-height: $line-height-base;
+  }
+  .vcs-label-dense {
+    line-height: $line-height-dense;
+  }
 </style>
 <script>
-
   /**
    * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
    * pass the label text as innerHtml

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

@@ -13,8 +13,8 @@
           class="w-full vcs-radio-group"
           :dense="isDense"
           :ripple="false"
-          v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners, ...on}"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
         >
           <v-radio
             v-for="(item, idx) in items"
@@ -38,54 +38,54 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
-@import "../../styles/vcsFont";
-@import '../../styles/shades.scss';
-.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
-  margin-bottom: 0;
-}
-.v-input {
-  &.vcs-radio-group {
-    ::v-deep {
-      margin-top: 0;
-      padding-top: 0;
-      label.v-label,
-      .v-icon.v-icon{
-        font-size: $base-font-size;
-        color: inherit;
-        &.theme--light{
-          color: map-get($shades, 'black') !important;
-          &.error--text{
-            color: var(--v-error-base) !important;
+  @import '../../styles/vcsFont.scss';
+  @import '../../styles/shades.scss';
+  .v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
+    margin-bottom: 0;
+  }
+  .v-input {
+    &.vcs-radio-group {
+      ::v-deep {
+        margin-top: 0;
+        padding-top: 0;
+        label.v-label,
+        .v-icon.v-icon {
+          font-size: $vcs-font-size;
+          color: inherit;
+          &.theme--light {
+            color: map-get($shades, 'black') !important;
+            &.error--text {
+              color: var(--v-error-base) !important;
+            }
           }
-        }
-        &.theme--dark{
-          color: map-get($shades, 'white') !important;
-          &.error--text{
-            color: var(--v-error-base) !important;
+          &.theme--dark {
+            color: map-get($shades, 'white') !important;
+            &.error--text {
+              color: var(--v-error-base) !important;
+            }
           }
         }
-      }
-      .v-radio:not(:last-child):not(:only-child) {
-        margin-bottom: 0;
-      }
-      .v-input--selection-controls__input {
-        margin: 0;
-      }
-      label.v-label.error--text {
-        animation: none;
+        .v-radio:not(:last-child):not(:only-child) {
+          margin-bottom: 0;
+        }
+        .v-input--selection-controls__input {
+          margin: 0;
+        }
+        label.v-label.error--text {
+          animation: none;
+        }
       }
     }
   }
-}
-.vcs-radio {
-  height: 40px;
-  align-items: center;
-  padding-left: 4px;
-}
-.vcs-radio-dense {
-  height: 32px;
-  align-items: center;
-}
+  .vcs-radio {
+    height: 40px;
+    align-items: center;
+    padding-left: 4px;
+  }
+  .vcs-radio-dense {
+    height: 32px;
+    align-items: center;
+  }
 </style>
 <script>
   import { computed, ref } from 'vue';

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

@@ -16,7 +16,7 @@
             outlined
             :dense="isDense"
             :height="isDense ? 24 : 32"
-            :item-text="item => $t(getText(item))"
+            :item-text="(item) => $t(getText(item))"
             class="py-1 primary--placeholder"
             :class="{
               'remove-outline': !isOutlined,
@@ -25,10 +25,10 @@
               'outline--current': focus,
               'outline--error': !!errorMessage,
             }"
-            v-bind="{...$attrs, ...attrs}"
-            v-on="{...$listeners, ...on}"
-            @focus="focus = true;"
-            @blur="focus = false;"
+            v-bind="{ ...$attrs, ...attrs }"
+            v-on="{ ...$listeners, ...on }"
+            @focus="focus = true"
+            @blur="focus = false"
             @mouseover="hover = true"
             @mouseleave="hover = false"
           >
@@ -56,10 +56,10 @@
       }
     }
   }
-  .v-select{
-    &.v-select--is-multi{
+  .v-select {
+    &.v-select--is-multi {
       ::v-deep {
-        .v-select__selections{
+        .v-select__selections {
           flex-wrap: nowrap;
         }
       }
@@ -75,7 +75,8 @@
   }
   .outline--current {
     ::v-deep {
-      .v-input__slot fieldset, .v-input__slot .v-select__slot {
+      .v-input__slot fieldset,
+      .v-input__slot .v-select__slot {
         border-color: currentColor;
         transition: border-color 0.5s ease;
       }
@@ -83,7 +84,8 @@
   }
   .outline--error {
     ::v-deep {
-      .v-input__slot fieldset, .v-input__slot .v-select__slot {
+      .v-input__slot fieldset,
+      .v-input__slot .v-select__slot {
         border-color: var(--v-error-base);
       }
     }
@@ -121,7 +123,6 @@
   }
 </style>
 <script>
-
   import { VSelect } from 'vuetify/lib';
   import { computed, ref } from 'vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
@@ -165,7 +166,10 @@
 
       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 === '')
+        );
       });
 
       function getText(item) {
@@ -188,4 +192,3 @@
     },
   };
 </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"
@@ -17,16 +14,15 @@
           :hide-spin-buttons="!showSpinButtons"
           :dense="isDense"
           :clearable="isClearable"
-          @focus="focus = true;"
-          @blur="focus = false;"
-          @input="value => $emit('input', value)"
-          @keydown.esc="handleEsc"
-          @keydown="event => $emit('keydown', event)"
+          @focus="onFocus"
+          @blur="onBlur"
+          @keydown.esc="onEscape"
+          @keydown="$emit('keydown', $event)"
           :value="visibleValue"
           :type="type"
           outlined
-          v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners, ...on}"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
           :height="isDense ? 24 : 32"
           class="py-1 primary--placeholder align-center"
           :class="{
@@ -35,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>
@@ -74,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);
       }
     }
@@ -198,15 +199,27 @@
         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) {
+        if (
+          attrs.type === 'number' &&
+          attrs.value &&
+          props.unit &&
+          !focus.value &&
+          !hover.value
+        ) {
           return `${attrs.value} ${props.unit}`;
         } else {
           return attrs.value || '';
@@ -220,9 +233,19 @@
         }
       });
 
-      function handleEsc() {
+      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 {
@@ -234,9 +257,11 @@
         isOutlined,
         visibleValue,
         type,
-        handleEsc,
+        onEscape,
         textFieldRef,
         errorMessage,
+        onBlur,
+        onFocus,
       };
     },
   };

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

@@ -2,7 +2,8 @@
   <v-stepper
     vertical
     :value="value"
-    @change="newValue => $emit('input', newValue)"
+    @change="(newValue) => $emit('input', newValue)"
+    class="rounded-0"
   >
     <slot />
   </v-stepper>
@@ -32,105 +33,106 @@
   };
 </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');
           }
+          &--active {
+            background-color: rgba(34, 34, 34, 0.1);
+            .v-stepper__label {
+              color: var(--v-primary-base);
+            }
+          }
+          &--complete {
+            .v-stepper__label {
+              color: map-get($shades, 'black');
+            }
+          }
+          .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 {
-    ::v-deep{
-      .v-stepper__step {
-        .v-stepper__label {
-          color: map-get($shades, 'white');
-        }
-        &--active {
-          background-color: rgba(255, 255, 255, 0.5);
-          .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;
+          &--active {
+            background-color: rgba(255, 255, 255, 0.17);
+            .v-stepper__label {
+              color: var(--v-primary-base);
+            }
           }
-          &:before{
-            color: map-get($shades, 'black');
+          &--complete {
+            .v-stepper__label {
+              color: map-get($shades, 'white');
+            }
           }
-        }
-        &.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;
+          margin-right: 5px;
+          &: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 {
+      .v-stepper__content.v-stepper__wrapper {
         margin: 4px 0;
+      }
     }
   }
-}
 </style>