@vcmap/ui 5.0.0-rc.6 → 5.0.0-rc.9

package/src/components/buttons/VcsActionButtonList.vue

@@ -0,0 +1,99 @@
+<template>
+  <div v-if="actions.length > 0" :class="classes">
+    <VcsButton
+      class="d-flex"
+      v-for="(button, index) in buttons"
+      :key="`${button.name}-${index}`"
+      :tooltip="button.title"
+      :icon="button.icon"
+      :active="button.active"
+      @click.stop="button.callback($event)"
+      v-bind="{...$attrs}"
+    />
+    <v-menu
+      v-if="overflowButtons.length > 0"
+      content-class="vcs-overflow-menu-wrap"
+      max-width="none"
+      :nudge-right="13"
+      offset-x
+    >
+      <template #activator="{ on, attrs }">
+        <VcsButton
+          v-bind="{...$attrs, ...attrs}"
+          v-on="on"
+          class="d-flex"
+        >
+          <v-icon v-text="overflowIcon" />
+        </VcsButton>
+      </template>
+      <VcsActionList :actions="overflowButtons" />
+    </v-menu>
+    <v-spacer v-else-if="blockOverflow" class="flex-grow-0 d-inline-block px-2" />
+  </div>
+</template>
+<style lang="scss">
+.action-btn-wrap{
+  gap: 8px;
+}
+</style>
+<script>
+
+  import VcsButton from './VcsButton.vue';
+  import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
+
+  /**
+   * @description
+   * 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 {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)
+   * @vue-computed {Array<VcsAction>} buttons - buttons rendered directly, have to provide an icon
+   * @vue-computed {Array<VcsAction>} overflowButtons - rest of buttons rendered in overflow
+   */
+  export default {
+    name: 'VcsActionButtonList',
+    components: { VcsActionList, VcsButton },
+    props: {
+      actions: {
+        type: Array,
+        required: true,
+        validator: validateActions,
+      },
+      overflowCount: {
+        type: Number,
+        default: 2,
+      },
+      overflowIcon: {
+        type: String,
+        default: '$vcsKebab',
+      },
+      blockOverflow: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      right() { return this.$attrs.right !== undefined && this.$attrs.right !== false; },
+      buttons() {
+        const buttons = this.actions.filter(i => i.icon).slice(0, this.overflowCount);
+        if (this.right) {
+          return buttons.reverse();
+        }
+        return buttons;
+      },
+      overflowButtons() {
+        const buttonsNames = this.buttons.map(i => i.name);
+        return this.actions.filter(i => !buttonsNames.includes(i.name));
+      },
+      classes() {
+        const classes = ['d-flex', 'align-center', 'action-btn-wrap'];
+        if (this.right) {
+          classes.push('justify-end');
+        }
+        return classes;
+      },
+    },
+  };
+</script>

package/src/components/buttons/VcsButton.vue

@@ -0,0 +1,201 @@
+<template>
+  <div
+    class="vcs-button-wrap"
+  >
+    <VcsTooltip
+      :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"
+          elevation="0"
+          v-bind="{...$attrs, ...attrs}"
+          v-on="{...$listeners, ...on}"
+        >
+          <v-icon v-if="icon" v-text="icon" :class="{ 'mr-2': hasDefaultSlot }" />
+          <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{
+    &--outlined{
+      border: thin solid currentColor;
+    }
+    &.vcs-button{
+
+      &--standard {
+        min-width: 48px;
+        height: 32px;
+        font-size: 12px;
+        border: 1px solid transparent;
+        &:hover{
+          color: var(--v-accent-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;
+          }
+        }
+      }
+
+      &--large {
+        min-width: 42px;
+        height: 34px;
+        padding: 0;
+        position: relative;
+
+        &.vcs-button--active-disabled{
+          border: 2px solid var(--v-primary-base);
+        }
+      }
+    }
+  }
+</style>
+
+<script>
+  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}.
+   * @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}                                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 {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 {
+    name: 'VcsButton',
+    components: { VcsTooltip, VcsBadge },
+    inheritAttrs: false,
+    props: {
+      active: {
+        type: Boolean,
+        default: false,
+      },
+      color: {
+        type: String,
+        default: undefined,
+      },
+      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: {
+      backgroundColor() {
+        if (this.isStandard && !this.active) {
+          return this.color;
+        } else 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-disabled': this.active && 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.$attrs.disabled;
+        }
+        return false;
+      },
+      isTextButton() {
+        if (this.isSmall) {
+          return true;
+        }
+        return !this.active ? true : null;
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,73 @@
+<template>
+  <VcsTooltip
+    :tooltip-position="tooltipPosition"
+    :tooltip="errorMessage"
+    color="error"
+  >
+    <template #activator="{ on, attrs }">
+      <span v-on="on">
+        <v-checkbox
+          on-icon="$vcsCheckboxChecked"
+          off-icon="$vcsCheckbox"
+          hide-details
+          indeterminate-icon="$vcsCheckboxIndeterminate"
+          :dense="$attrs.dense!==false"
+          :ripple="false"
+          v-bind="{...$attrs, ...attrs}"
+          v-on="{...$listeners, ...on}"
+          @update:error="setError"
+        >
+          <template #label>
+            <VcsLabel :html-for="$attrs.id" :dense="!!$attrs.dense">
+              {{ $attrs.label }}
+            </VcsLabel>
+          </template>
+        </v-checkbox>
+      </span>
+    </template>
+  </VcsTooltip>
+</template>
+<style lang="scss" scoped>
+.v-input--selection-controls {
+  margin: 0;
+  padding: 0;
+}
+</style>
+<script>
+  import VcsLabel from './VcsLabel.vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import validate from '../notification/validation.js';
+
+  /**
+   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-checkbox/ |vuetify checkbox}.
+   * 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.
+   */
+  export default {
+    name: 'VcsCheckbox',
+    components: { VcsTooltip, VcsLabel },
+    props: {
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+    },
+    data() {
+      return {
+        errorMessage: '',
+      };
+    },
+    methods: {
+      setError() {
+        const rules = [...this.$attrs.rules].concat(this.$attrs.errorMessages);
+        this.errorMessage = validate(rules, this.$attrs.value).join('\n');
+      },
+    },
+    model: {
+      event: 'change',
+    },
+  };
+</script>

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

@@ -0,0 +1,81 @@
+<template>
+  <v-color-picker
+    ref="picker"
+    @input="(e) => sub$.next(e)"
+    :value="value"
+    class="caption"
+    v-bind="props"
+  />
+</template>
+
+<style lang="scss" scoped>
+::v-deep {
+  .v-color-picker__controls {
+    padding: 8px;
+  }
+
+  .v-color-picker__input input {
+    margin: 0;
+  }
+
+  .v-color-picker__edit {
+    margin-top: 12px;
+  }
+}
+</style>
+
+<script>
+  import {
+    onMounted,
+    onUnmounted,
+  } from '@vue/composition-api';
+  import { Subject } from 'rxjs';
+  import { debounceTime, takeUntil } from 'rxjs/operators';
+
+  /**
+   * @description
+   * Stylized wrapper around vuetify Color Picker
+   */
+  export default {
+    name: 'VcsColorPicker',
+    props: {
+      width: {
+        type: Number,
+        default: 200,
+      },
+      mode: {
+        type: String,
+        default: 'hexa',
+      },
+      dotSize: {
+        type: Number,
+        default: 12,
+      },
+      value: {
+        type: String,
+        default: '#000000',
+      },
+    },
+    setup(props, context) {
+      const destroy$ = new Subject();
+      const sub$ = new Subject();
+
+      onMounted(() => {
+        sub$.pipe(debounceTime(330), takeUntil(destroy$)).subscribe((color) => {
+          // this.$vuetify.theme.themes.light.primary = color;
+          context.emit('input', color);
+        });
+      });
+
+      onUnmounted(() => {
+        destroy$.next();
+        destroy$.unsubscribe();
+      });
+
+      return {
+        props,
+        sub$,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <section class="vcs-form-section">
+    <slot name="title">
+      <article class="pa-2 accent">
+        <div class="form-section-header d-flex justify-space-between align-center">
+          <strong class="caption">{{ title }}</strong>
+          <VcsActionButtonList
+            :actions="titleActions"
+            small
+          />
+        </div>
+      </article>
+    </slot>
+    <article class="section-content">
+      <slot />
+    </article>
+  </section>
+</template>
+
+
+<script>
+  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} [#default] - slot with the section content
+   * @vue-prop {string}   title - Title to be displayed
+   * @vue-prop {Array<VcsAction>}    titleActions - Icons to be displayed on the right side
+   */
+  export default {
+    name: 'VcsFormSection',
+    components: { VcsActionButtonList },
+    props: {
+      title: {
+        type: String,
+        default: undefined,
+      },
+      titleActions: {
+        type: Array,
+        default: () => ([]),
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <label :htmlFor="htmlFor" class="vcs-label" :class="{'vcs-label-dense': dense}">
+    <slot />
+  </label>
+</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;
+}
+</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
+   * @vue-prop {string} htmlFor - an id reference the label is meant for
+   * @vue-prop {boolean} [dense=true] - default line height is 32px (dense). If set false, height is 40px.
+   */
+  export default {
+    name: 'VcsLabel',
+    props: {
+      htmlFor: {
+        type: String,
+        default: undefined,
+      },
+      dense: {
+        type: Boolean,
+        default: true,
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,97 @@
+<template>
+  <div
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+  >
+    <VcsTooltip
+      :tooltip-position="tooltipPosition"
+      :tooltip="errorMessage"
+      color="error"
+    >
+      <template #activator="{ on, attrs }">
+        <span v-on="on">
+          <v-select
+            append-icon="mdi-chevron-down"
+            hide-details
+            flat
+            :outlined="isOutlined"
+            :dense="isDense"
+            :height="isDense ? 24 : 32"
+            :class="$attrs.color === 'primary' ? 'primary--select' : ''"
+            v-bind="{...$attrs, ...attrs}"
+            v-on="{...$listeners, ...on}"
+            @update:error="setError"
+          />
+        </span>
+      </template>
+    </VcsTooltip>
+  </div>
+</template>
+<style lang="scss" scoped>
+ .v-text-field {
+   padding: 0;
+   margin: 0;
+ }
+
+ .vcs-select-hover{
+   color: var(--v-primary-base) !important;
+ }
+
+ .primary--select {
+   ::v-deep {
+     .v-select__selection,
+     .v-select__selection--comma,
+     .v-select.v-text-field input {
+       color: var(--v-primary-base);
+     }
+   }
+ }
+</style>
+<script>
+
+  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}.
+   * 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-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 },
+    props: {
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+    },
+    data() {
+      return {
+        hover: false,
+        errorMessage: '',
+      };
+    },
+    computed: {
+      isDense() {
+        return this.$attrs.dense !== undefined && this.$attrs.dense !== false;
+      },
+      isOutlined() {
+        return (this.hover || this.errorMessage.length > 0) &&
+          !(this.$attrs.disabled || this.$attrs.disabled === '');
+      },
+    },
+    methods: {
+      setError() {
+        const rules = [...this.$attrs.rules].concat(this.$attrs.errorMessages);
+        this.errorMessage = validate(rules, this.$attrs.value).join('\n');
+      },
+    },
+  };
+</script>
+