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

package/src/components/buttons/VcsToolButton.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="vcs-button-wrap">
+    <v-btn
+      v-if="!tooltip"
+      :color="appliedColor"
+      :text="isTextButton"
+      class="vcs-tool-button"
+      :class="classes"
+      :ripple="{ class: 'primary--text text--darken-4' }"
+      elevation="0"
+      v-bind="{ ...$attrs }"
+      v-on="{ ...$listeners }"
+    >
+      <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+        {{ icon }}
+      </v-icon>
+      <slot />
+    </v-btn>
+    <VcsTooltip
+      v-else
+      :tooltip="tooltip"
+      :tooltip-position="tooltipPosition"
+      v-bind="{ ...tooltipProps }"
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn
+          :color="appliedColor"
+          :text="isTextButton"
+          class="vcs-tool-button"
+          :class="classes"
+          :ripple="{ class: 'primary--text text--darken-4' }"
+          elevation="0"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
+        >
+          <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+            {{ icon }}
+          </v-icon>
+          <slot />
+        </v-btn>
+      </template>
+    </VcsTooltip>
+    <VcsBadge v-if="hasUpdate" :color="'warning'" class="position-absolute" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .vcs-button-wrap {
+    position: relative;
+    display: inline-block;
+  }
+  .badge {
+    top: -3px;
+    right: -3px;
+  }
+  .v-btn {
+    &.vcs-tool-button {
+      min-width: 42px;
+      height: 34px;
+      padding: 0;
+      position: relative;
+
+      &.vcs-tool-button--active-background {
+        border: 2px solid var(--v-primary-base);
+        background-color: var(--v-base-lighten2) !important;
+      }
+
+      &.v-btn--disabled {
+        background-color: transparent !important;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { VBtn, VIcon } from 'vuetify/lib';
+  import VcsBadge from '../notification/VcsBadge.vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+
+  /**
+   * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}. Used for tool buttons in the Navbar.
+   * @vue-prop {boolean}                                active - Whether button has background color. Applies vuetify primary color if color property is not set.
+   * @vue-prop {string}                                 color - Passes property to v-btn in case prop active is true.
+   * @vue-prop {boolean}                                background - When applied with active the button shows an active-background state implying that a tool is active, but running in background, e.g. windowComponent closed.
+   * @vue-prop {boolean}                                hasUpdate - Whether the button shows a badge in the top right.
+   * @vue-prop {string}                                 icon - When given, will display an icon in the button. Replaces vuetify icon property.
+   * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
+   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
+   * @vue-computed {string}                             appliedColor - color applied to button, depending on size and state
+   * @vue-computed {Object<string, string>}             classes - css classes applied to button, depending on size and state
+   * @vue-computed {boolean}                            hasDefaultSlot
+   * @vue-computed {boolean}                            isTextButton - button is text
+   * @vue-event {MouseEvent}                            click - Emits click event when the button is clicked.
+   */
+  export default {
+    name: 'VcsToolButton',
+    components: {
+      VcsTooltip,
+      VcsBadge,
+      VBtn,
+      VIcon,
+    },
+    inheritAttrs: false,
+    props: {
+      active: {
+        type: Boolean,
+        default: false,
+      },
+      color: {
+        type: String,
+        default: undefined,
+      },
+      background: {
+        type: Boolean,
+        default: false,
+      },
+      hasUpdate: {
+        type: Boolean,
+        default: false,
+      },
+      icon: {
+        type: String,
+        default: undefined,
+      },
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'bottom',
+      },
+      tooltipProps: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+    computed: {
+      appliedColor() {
+        if (this.active) {
+          return this.color ? this.color : 'primary';
+        } else {
+          return null;
+        }
+      },
+      classes() {
+        return {
+          'vcs-tool-button--active-background':
+            this.active && this.background && !this.$attrs.disabled,
+        };
+      },
+      hasDefaultSlot() {
+        return !!this.$slots?.default?.[0]?.text?.trim();
+      },
+      isTextButton() {
+        return !this.active ? true : null;
+      },
+    },
+  };
+</script>

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

@@ -13,13 +13,13 @@
           on-icon="$vcsCheckboxChecked"
           off-icon="$vcsCheckbox"
           class="vcs-checkbox"
-          :class="{'pl-1': !isDense }"
+          :class="{ 'pl-1': !isDense }"
           hide-details
           indeterminate-icon="$vcsCheckboxIndeterminate"
           :dense="isDense"
           :ripple="false"
-          v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners, ...on}"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
         >
           <template #label>
             <VcsLabel :html-for="$attrs.id" :dense="isDense">
@@ -33,7 +33,7 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
-@import '../../styles/shades.scss';
+  @import '../../styles/shades.scss';
   .vcs-checkbox {
     ::v-deep {
       .v-input--selection-controls__input {
@@ -47,13 +47,13 @@
       .v-label {
         &.theme--light {
           color: map-get($shades, 'black') !important;
-          &.error--text{
+          &.error--text {
             color: var(--v-error-base) !important;
           }
         }
         &.theme--dark {
           color: map-get($shades, 'white') !important;
-          &.error--text{
+          &.error--text {
             color: var(--v-error-base) !important;
           }
         }
@@ -64,7 +64,6 @@
     margin: 0;
     padding: 0;
   }
-
 </style>
 <script>
   import { computed, ref } from 'vue';

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

@@ -11,15 +11,26 @@
       <v-text-field
         v-model="formattedDate"
         :placeholder="formatDate(new Date().toISOString())"
-        v-bind="{...$attrs, ...attrs}"
-        v-on="{...$listeners, ...on}"
+        v-bind="{ ...$attrs, ...attrs }"
+        v-on="{ ...$listeners, ...on }"
         :prepend-icon="icon"
+        :dense="isDense"
         readonly
         hide-details
         class="ma-0 py-1"
+        :class="{
+          'input--dense': isDense,
+          'input--not-dense': !isDense,
+        }"
       />
     </template>
-    <v-date-picker v-model="date" no-title @input="menuOpen = false" :locale="locale" color="primary">
+    <v-date-picker
+      v-model="date"
+      no-title
+      @input="menuOpen = false"
+      :locale="locale"
+      color="primary"
+    >
       <v-btn color="primary" @click="goToToday">
         {{ $t('datePicker.today') }}
       </v-btn>
@@ -27,19 +38,28 @@
   </v-menu>
 </template>
 <style lang="scss" scoped>
-::v-deep {
-  .v-input__control{
-    padding: 0 8px;
+  ::v-deep {
+    .v-input__control {
+      padding: 0 4px;
+    }
+    .v-input__prepend-outer {
+      margin-right: 4px;
+    }
+    .v-icon {
+      font-size: 16px;
+    }
   }
-}
 </style>
 <script>
   import {
-    computed, ref, watch, inject, onUnmounted, onBeforeMount,
+    computed,
+    ref,
+    watch,
+    inject,
+    onUnmounted,
+    onBeforeMount,
   } from 'vue';
-  import {
-    VMenu, VTextField, VDatePicker, VBtn,
-  } from 'vuetify/lib';
+  import { VMenu, VTextField, VDatePicker, VBtn } from 'vuetify/lib';
   /**
    * @description stylized wrapper around {@link https://v15.vuetifyjs.com/en/components/date-pickers/#month-pickers-in-dialog-and-menu}.
    * @vue-prop {string} value - value of the date picker in {@link https://tc39.es/ecma262/#sec-date-time-string-format | Date Time String Format}
@@ -64,31 +84,39 @@
       VDatePicker,
       VBtn,
     },
-    setup(props, context) {
+    setup(props, { emit, attrs }) {
       /**
        * @type {import("@vcmap/ui").VcsUiApp}
        */
-      const app = /** @type {import("@vcmap/ui").VcsUiApp} */ (inject('vcsApp'));
+      const app = /** @type {import("@vcmap/ui").VcsUiApp} */ (
+        inject('vcsApp')
+      );
       const localValue = ref(props.value);
       const menuOpen = ref(false);
       const locale = ref(app.locale);
 
-      const isValid = date => !Number.isNaN(Date.parse(date));
+      const isDense = computed(() => attrs.dense !== false);
+
+      const isValid = (date) => !Number.isNaN(new Date(date).getTime());
       const setFromValue = () => {
         if (isValid(localValue.value)) {
           localValue.value = props.value;
-        } else {
+        } else if (localValue.value) {
           // eslint-disable-next-line no-console
           console.error('Invalid date provided: ', props.value);
         }
       };
       onBeforeMount(() => setFromValue());
-      const destroyLocaleChanged = app.localeChanged.addEventListener(() => { locale.value = app.locale; });
+      const destroyLocaleChanged = app.localeChanged.addEventListener(() => {
+        locale.value = app.locale;
+      });
       onUnmounted(() => destroyLocaleChanged());
 
       const formatDate = (date) => {
         if (date) {
-          return new Intl.DateTimeFormat(locale.value, { dateStyle: 'short' }).format(Date.parse(date));
+          return new Intl.DateTimeFormat(locale.value, {
+            dateStyle: 'short',
+          }).format(Date.parse(date));
         }
         return '';
       };
@@ -96,15 +124,32 @@
         localValue.value = new Date(Date.now()).toISOString().substring(0, 10);
         menuOpen.value = false;
       };
-      watch(() => props.value, () => setFromValue());
+      watch(
+        () => props.value,
+        () => setFromValue(),
+      );
       const formattedDate = computed({
-        get: () => { return formatDate(localValue.value); },
+        get: () => {
+          return formatDate(localValue.value);
+        },
         set: () => {},
       });
-      const date = computed({ get: () => localValue.value, set: (nv) => { localValue.value = nv; context.emit('input', localValue.value); } });
+      const date = computed({
+        get: () => localValue.value,
+        set: (nv) => {
+          localValue.value = nv;
+          emit('input', localValue.value);
+        },
+      });
 
       return {
-        formattedDate, date, menuOpen, formatDate, locale, goToToday,
+        formattedDate,
+        date,
+        isDense,
+        menuOpen,
+        formatDate,
+        locale,
+        goToToday,
       };
     },
   };

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

@@ -2,21 +2,18 @@
   <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"
-            small
           />
         </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 +22,6 @@
   </section>
 </template>
 
-
 <script>
   import { computed, reactive } from 'vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
@@ -56,7 +52,7 @@
       },
       headerActions: {
         type: Array,
-        default: () => ([]),
+        default: () => [],
       },
       actionButtonListOverflowCount: {
         type: Number,
@@ -74,11 +70,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 +94,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,15 +25,15 @@
               '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"
           >
             <template #selection="{ item, index }">
-              <span v-if="index === 0" class="text-truncate">
+              <span v-if="index === 0" class="text-truncate w-full">
                 {{ $t(getText(item)) }}
               </span>
               <span v-if="index === 1" class="text-no-wrap text-caption">
@@ -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);
       }
     }
@@ -112,16 +114,29 @@
     ::v-deep {
       fieldset {
         border-radius: 2px;
-        border-color: var(--v-base-base);
       }
       .v-select__slot {
         border-bottom: 1px solid var(--v-base-base);
       }
     }
+    &.v-text-field--outlined:hover {
+      ::v-deep {
+        fieldset {
+          border: 1px solid currentColor;
+        }
+      }
+    }
+    &.v-input--is-focused:hover,
+    &.v-input--is-focused {
+      ::v-deep {
+        .v-select__slot {
+          border-bottom: 1px solid var(--v-primary-base);
+        }
+      }
+    }
   }
 </style>
 <script>
-
   import { VSelect } from 'vuetify/lib';
   import { computed, ref } from 'vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
@@ -165,7 +180,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 +206,3 @@
     },
   };
 </script>
-