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

package/src/components/buttons/VcsActionButtonList.vue

@@ -1,14 +1,16 @@
 <template>
   <div v-if="actions.length > 0" :class="classes">
-    <VcsButton
+    <component
+      :is="button"
       class="d-flex"
-      v-for="(button, index) in buttons"
-      :key="`${button.name}-${index}`"
-      :tooltip="button.title"
-      :icon="button.icon"
-      :active="button.active"
-      :disabled="button.disabled"
-      @click.stop="button.callback($event)"
+      v-for="(btn, index) in buttons"
+      :key="`${btn.name}-${index}`"
+      :tooltip="btn.title"
+      :icon="btn.icon"
+      :active="btn.active"
+      :disabled="btn.disabled"
+      :background="btn.background"
+      @click.stop="btn.callback($event)"
       v-bind="{ ...$attrs }"
       v-on="{ ...$listeners }"
     />
@@ -20,9 +22,14 @@
       offset-x
     >
       <template #activator="{ on, attrs }">
-        <VcsButton v-bind="{ ...$attrs, ...attrs }" v-on="on" class="d-flex">
+        <component
+          :is="button"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="on"
+          class="d-flex"
+        >
           <v-icon>{{ overflowIcon }}</v-icon>
-        </VcsButton>
+        </component>
       </template>
       <VcsActionList :actions="overflowButtons" />
     </v-menu>
@@ -40,6 +47,8 @@
 <script>
   import { VIcon, VMenu, VSpacer } from 'vuetify/lib';
   import VcsButton from './VcsButton.vue';
+  import VcsToolButton from './VcsToolButton.vue';
+  import VcsFormButton from './VcsFormButton.vue';
   import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
 
   /**
@@ -47,6 +56,7 @@
    * A component rendering a list of actions with overflow mechanic using
    * {@link VcsButton} and {@link VcsActionList}.
    * @vue-prop {Array<VcsAction>} actions - Array of actions
+   * @vue-prop {string} [button='VcsButton'] - used button type (one of 'VcsButton', 'VcsToolButton' or 'VcsFormButton)
    * @vue-prop {number} [overflowCount=2] - number of buttons rendered until overflow.
    * @vue-prop {string} [overflowIcon='$vcsKebab'] - optional custom icon for overflow button
    * @vue-prop {boolean} [blockOverflow=false] - if space for the overflow should be blocked or not (e.g. when rendering lists in a grid)
@@ -58,6 +68,8 @@
     components: {
       VcsActionList,
       VcsButton,
+      VcsToolButton,
+      VcsFormButton,
       VMenu,
       VIcon,
       VSpacer,
@@ -68,6 +80,12 @@
         required: true,
         validator: validateActions,
       },
+      button: {
+        type: String,
+        default: 'VcsButton',
+        validator: (type) =>
+          ['VcsButton', 'VcsToolButton', 'VcsFormButton'].includes(type),
+      },
       overflowCount: {
         type: Number,
         default: 2,

package/src/components/buttons/VcsButton.vue

@@ -1,17 +1,34 @@
 <template>
   <div class="vcs-button-wrap">
+    <v-btn
+      v-if="!tooltip"
+      text
+      :color="appliedColor"
+      :disabled="disabled"
+      class="vcs-button pa-0"
+      :ripple="false"
+      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="backgroundColor"
-          :text="isTextButton"
-          :outlined="isOutlined"
-          :class="classes"
-          :ripple="!isSmall ? { class: 'primary--text text--darken-4' } : false"
+          text
+          :color="appliedColor"
+          :disabled="disabled"
+          class="vcs-button pa-0"
+          :ripple="false"
           elevation="0"
           v-bind="{ ...$attrs, ...attrs }"
           v-on="{ ...$listeners, ...on }"
@@ -37,56 +54,19 @@
     right: -3px;
   }
   .v-btn {
-    &--outlined {
-      border: thin solid currentColor;
-    }
     &.vcs-button {
-      &--standard {
-        min-width: 48px;
-        height: 32px;
-        font-size: 12px;
-        border: 1px solid transparent;
-        &:hover {
-          color: var(--v-base-lighten5) !important;
-          border-color: var(--v-primary-base);
-          background-color: var(--v-primary-base);
-        }
-      }
-
-      &--small {
-        height: 16px;
-        min-width: auto;
-        &:hover {
-          color: var(--v-primary-base);
-        }
-        &::before {
-          display: none; /*prevents unwanted mouseover effect*/
-        }
-        ::v-deep {
-          .v-icon {
-            font-size: 16px;
-          }
-
-          .v-icon__component {
-            height: 16px;
-            width: 16px;
-          }
-        }
+      height: 16px;
+      min-width: auto;
+      &:hover {
+        color: var(--v-primary-lighten1) !important;
       }
-
-      &--large {
-        min-width: 42px;
-        height: 34px;
-        padding: 0;
-        position: relative;
-
-        &.vcs-button--active-background {
-          border: 2px solid var(--v-primary-base);
-          background-color: var(--v-base-lighten2) !important;
+      ::v-deep {
+        .v-icon {
+          font-size: 16px;
         }
-
-        &.v-btn--disabled {
-          background-color: transparent !important;
+        .v-icon__component {
+          height: 16px;
+          width: 16px;
         }
       }
     }
@@ -100,22 +80,16 @@
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}.
-   * @vue-prop {boolean}                                active - Whether button has background color. Applies vuetify primary color if color property is not set.
+   * @vue-prop {boolean}                                active - State of the button. Applies set color or vuetify primary color in active state.
    * @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}                                disabled
    * @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}                             backgroundColor - 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 {string}                             appliedColor - color applied to button, depending on active state
    * @vue-computed {boolean}                            hasDefaultSlot
-   * @vue-computed {boolean}                            isSmall - button size is small
-   * @vue-computed {boolean}                            isStandard - button size standard
-   * @vue-computed {boolean}                            isLarge - button size is large
-   * @vue-computed {boolean}                            isOutlined - button is outlined
-   * @vue-computed {boolean}                            isTextButton - button is text
    * @vue-event {MouseEvent}                            click - Emits click event when the button is clicked.
    */
   export default {
@@ -136,7 +110,7 @@
         type: String,
         default: undefined,
       },
-      background: {
+      disabled: {
         type: Boolean,
         default: false,
       },
@@ -162,52 +136,16 @@
       },
     },
     computed: {
-      backgroundColor() {
-        if (this.isStandard && !this.active) {
-          return this.color;
-        } else if (this.active) {
+      appliedColor() {
+        if (this.active) {
           return this.color ? this.color : 'primary';
         } else {
           return null;
         }
       },
-      classes() {
-        return {
-          'vcs-button--small': this.isSmall,
-          'pa-0': this.isSmall,
-          'vcs-button--standard': this.isStandard,
-          padding: this.isStandard,
-          'font-weight-bold': this.isStandard,
-          'text-capitalize': this.isStandard,
-          'vcs-button--large': this.isLarge,
-          'vcs-button--active-background':
-            this.active && this.background && !this.$attrs.disabled,
-        };
-      },
       hasDefaultSlot() {
         return !!this.$slots?.default?.[0]?.text?.trim();
       },
-      isSmall() {
-        return this.$attrs.small != null;
-      },
-      isStandard() {
-        return !(this.isSmall || this.isLarge);
-      },
-      isLarge() {
-        return this.$attrs.large != null;
-      },
-      isOutlined() {
-        if (this.isStandard) {
-          return this.active || this.background;
-        }
-        return false;
-      },
-      isTextButton() {
-        if (this.isSmall) {
-          return true;
-        }
-        return !this.active ? true : null;
-      },
     },
   };
 </script>

package/src/components/buttons/VcsFormButton.vue

@@ -80,10 +80,12 @@
         border: thin solid currentColor;
         &:hover {
           border-color: var(--v-primary-lighten1) !important;
-          &::before {
-            background-color: var(--v-primary-lighten4) !important;
-            opacity: 1;
-          }
+        }
+        &.theme--light:hover::before {
+          opacity: 0.16;
+        }
+        &.theme--dark:hover::before {
+          opacity: 0.32;
         }
       }
 

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/VcsDatePicker.vue

@@ -14,9 +14,14 @@
         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
@@ -35,7 +40,13 @@
 <style lang="scss" scoped>
   ::v-deep {
     .v-input__control {
-      padding: 0 8px;
+      padding: 0 4px;
+    }
+    .v-input__prepend-outer {
+      margin-right: 4px;
+    }
+    .v-icon {
+      font-size: 16px;
     }
   }
 </style>
@@ -73,7 +84,7 @@
       VDatePicker,
       VBtn,
     },
-    setup(props, context) {
+    setup(props, { emit, attrs }) {
       /**
        * @type {import("@vcmap/ui").VcsUiApp}
        */
@@ -84,11 +95,13 @@
       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);
         }
@@ -125,13 +138,14 @@
         get: () => localValue.value,
         set: (nv) => {
           localValue.value = nv;
-          context.emit('input', localValue.value);
+          emit('input', localValue.value);
         },
       });
 
       return {
         formattedDate,
         date,
+        isDense,
         menuOpen,
         formatDate,
         locale,

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

@@ -9,7 +9,6 @@
           <VcsActionButtonList
             :actions="actions"
             :overflow-count="actionButtonListOverflowCount"
-            small
           />
         </div>
       </article>

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

@@ -33,7 +33,7 @@
             @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">
@@ -114,12 +114,26 @@
     ::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>

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>