@vcmap/ui 5.0.0-rc.10

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

@@ -0,0 +1,129 @@
+<template>
+  <div
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+  >
+    <VcsTooltip
+      :tooltip-position="tooltipPosition"
+      :tooltip="errorMessage"
+      :value="(hover || focus) && isError"
+      color="error"
+      :max-width="200"
+    >
+      <template #activator="{ attrs }">
+        <v-text-field
+          ref="textFieldRef"
+          hide-details
+          :dense="isDense"
+          :clearable="isClearable"
+          @focus="focus = true"
+          @blur="focus = neverBlurred = false"
+          @input="firstInput = true"
+          :outlined="isOutlined"
+          v-bind="{...$attrs, ...attrs}"
+          v-on="{...$listeners}"
+          :height="isDense ? 24 : 32"
+          class="ma-0 pb-1 pt-1 primary--placeholder"
+          :class="$attrs.color === 'primary' ? 'primary--textfield' : ''"
+        />
+      </template>
+    </VcsTooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.primary--placeholder {
+  ::v-deep {
+    input::placeholder {
+      color: var(--v-primary-base);
+      font-style: italic;
+      opacity: 1;
+    }
+  }
+}
+.primary--textfield {
+  ::v-deep {
+    input {
+      color: var(--v-primary-base);
+    }
+  }
+}
+</style>
+
+<script>
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+
+  /**
+   * @description extends API of {@link https://vuetifyjs.com/en/api/v-text-field/|vuetify 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
+   * Provides VcsTooltip to
+   * - show error messages on focus
+   * - show tooltips, if supplied, when hovered over append-icon
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-computed {boolean}                            isClearable - Whether textfield is isClearable. Makes sure icon is only shown on focus, hover or error.
+   * @vue-computed {boolean}                            isDense - Whether size of textfield is dense.
+   * @vue-computed {boolean}                            isError - Whether errorBucket is not empty and textfield was focused at least once.
+   * @vue-computed {boolean}                            isOutlined - Textfield is outlined on either hover, focus or error, if not disabled.
+   * @vue-computed {Array<string>}                      joinedErrorBucket - errorBucket + errorMessages of child v-text-field.
+   */
+  export default {
+    name: 'VcsTextField',
+    components: {
+      VcsTooltip,
+    },
+    props: {
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+    },
+    data() {
+      return {
+        hover: false,
+        focus: false,
+        firstInput: false,
+        neverBlurred: true,
+        isMounted: false,
+        errorMessage: '',
+      };
+    },
+    computed: {
+      isClearable() {
+        return (this.$attrs.clearable !== undefined && this.$attrs.clearable !== false) &&
+          (this.hover || this.focus || this.isError);
+      },
+      isDense() {
+        return this.$attrs.dense !== undefined && this.$attrs.dense !== false;
+      },
+      isError() {
+        return this.joinedErrorBucket.length > 0 && (this.firstInput || !this.neverBlurred);
+      },
+      isOutlined() {
+        return (this.hover || this.focus || this.isError) && !(this.$attrs.disabled || this.$attrs.disabled === '');
+      },
+      joinedErrorBucket() {
+        if (!this.isMounted) {
+          return false;
+        } else {
+          return this.$refs.textFieldRef.errorBucket.concat(this.$refs.textFieldRef.errorMessages).join('\n');
+        }
+      },
+    },
+    watch: {
+      joinedErrorBucket(newValue, oldValue) {
+        if (oldValue && !newValue) {
+          setTimeout(() => {
+            this.errorMessage = newValue;
+          }, 200);
+        } else {
+          this.errorMessage = newValue;
+        }
+      },
+    },
+    mounted() {
+      this.isMounted = true;
+    },
+  };
+</script>

package/src/components/form-output/VcsFormattedNumber.vue

@@ -0,0 +1,103 @@
+<template>
+  <span class="vcs-formatted-number" :class="{'vcs-formatted-number-dense': dense}">
+    {{ formatted }}
+    <span v-if="unit === SpecialUnits.SQM">
+      m<sup>2</sup>
+    </span>
+    <span v-else-if="unit === SpecialUnits.CBM">
+      m<sup>3</sup>
+    </span>
+    <span v-else-if="unit === SpecialUnits.DEG">
+      °
+    </span>
+    <span v-else>
+      {{ unit }}
+    </span>
+  </span>
+</template>
+<style lang="scss" scoped>
+@import "../../styles/vcsGrid.scss";
+@import "../../styles/vcsFont";
+.vcs-formatted-number {
+  font-size: $base-font-size;
+  line-height: $line-height-base;
+}
+.vcs-formatted-number-dense {
+  line-height: $line-height-dense;
+}
+</style>
+<script>
+  import { computed } from '@vue/composition-api';
+
+  /**
+   * Converts a number (e.g. 12345678,9) to a locale-aware and
+   * dot-seperated string with given amount of fractional digits (e.g. 12.345.678,90)
+   * @param {string|number} value
+   * @param {number} fractionDigits
+   * @returns {string|number}
+   */
+  export function numberToLocaleString(value, fractionDigits) { // XXX todo maybe merge with dateTime helpers in core?
+    const number = parseInt(value, 10);
+    if (Number.isNaN(number)) {
+      return number;
+    }
+
+    return (/** @type {number} */ value)
+      .toLocaleString(navigator.language, {
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits,
+      });
+  }
+
+  /**
+   * Enumeration of units displayed with special symbol
+   * @typedef {Object} VcsFormattedNumber.SpecialUnits
+   * @enum {string}
+   * @property {string} SQM square meters
+   * @property {string} CBM cubic meters
+   * @property {string} DEG degrees
+   * @module VcsFormattedNumber
+   */
+  export const SpecialUnits = {
+    SQM: 'sqm',
+    CBM: 'cbm',
+    DEG: 'deg',
+  };
+
+  /**
+   * @description Formatted number display, optionally with unit
+   * @vue-prop {string|SpecialUnits} [unit=undefined]
+   * @vue-prop {number} [fractionDigits=undefined]
+   * @vue-prop {number} value
+   * @vue-prop {boolean} [dense=true] - default line height is 32px (dense). If set false, height is 40px.
+   * @vue-computed {string} formatted - value formatted to locale string
+   */
+  export default {
+    name: 'VcsFormattedNumber',
+    props: {
+      unit: {
+        type: [String || SpecialUnits],
+        default: undefined,
+      },
+      fractionDigits: {
+        type: Number,
+        default: 2,
+      },
+      value: {
+        type: Number,
+        default: 0,
+      },
+      dense: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    setup(props) {
+      const formatted = computed(() => numberToLocaleString(props.value, props.fractionDigits));
+      return {
+        SpecialUnits,
+        formatted,
+      };
+    },
+  };
+</script>

package/src/components/lists/VcsActionList.vue

@@ -0,0 +1,100 @@
+<template>
+  <v-list
+    v-if="actions.length > 0"
+  >
+    <VcsTooltip
+      v-for="(action, index) in actions"
+      :key="`${action.name}-${index}`"
+      :tooltip="action.title"
+      :tooltip-position="tooltipPosition"
+      v-bind="{...tooltipProps}"
+    >
+      <template #activator="{ on, attrs }">
+        <v-list-item
+          :class="action.active ? 'primary--text' : ''"
+          color="primary"
+          @click="action.callback($event)"
+          v-bind="{...$attrs, ...attrs}"
+          v-on="{...$listeners, ...on}"
+        >
+          <v-list-item-icon v-if="showIcon && action.icon">
+            <v-icon v-text="action.icon" small />
+          </v-list-item-icon>
+          <v-list-item-content
+            class="vcs-action-list"
+          >
+            <v-list-item-title v-text="$t(action.name)" />
+          </v-list-item-content>
+        </v-list-item>
+      </template>
+    </VcsTooltip>
+  </v-list>
+</template>
+<style lang="scss">
+.vcs-action-list {
+  width: 100%;
+  &:hover{
+    color: var(--v-primary-base);
+  }
+}
+</style>
+<script>
+  import { is } from '@vcsuite/check';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+
+  /**
+   * @interface VcsAction
+   * @property {string} name - reactive and translatable name rendered in overflow
+   * @property {string} [title] - reactive and translatable title rendered as tooltip
+   * @property {string} [icon] - icon rendered on the button. If no icon provided, item is rendered in overflow
+   * @property {Function} callback - callback function is triggered when the button is clicked
+   * @property {boolean} [active=false] - optional state of button. If active, button is rendered in primary color
+   */
+
+  /**
+   * @param {Array<VcsAction>} actions
+   * @returns {boolean}
+   */
+  export function validateActions(actions) {
+    return actions.every(item => is(item, {
+      name: String,
+      title: [undefined, String],
+      icon: [undefined, String],
+      callback: Function,
+      active: [undefined, Boolean],
+    }));
+  }
+
+  /**
+   * @description
+   * A component rendering a list of actions with overflow mechanic using
+   * {@link https://vuetifyjs.com/en/api/v-list-item-group/|vuetify v-list-item-group} and {@link VcsTooltip}.
+   * @vue-prop {Array<VcsAction>} actions - Array of actions
+   * @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-prop {boolean}                                [showIcon=false] - Whether list item icons should be displayed.
+   */
+  export default {
+    name: 'VcsActionList',
+    components: { VcsTooltip },
+    props: {
+      actions: {
+        type: Array,
+        required: true,
+        validator: validateActions,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      tooltipProps: {
+        type: Object,
+        default: () => ({}),
+      },
+      showIcon: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+</script>

package/src/components/lists/VcsTreeview.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="d-contents">
+    <VcsTreeviewSearchbar
+      v-if="hasSearchbar"
+      :placeholder="searchbarPlaceholder"
+      v-model="search"
+    />
+    <v-treeview
+      class="vcs-treeview"
+      v-bind="{...$props, ...$attrs}"
+      v-on="$listeners"
+      expand-icon="mdi-chevron-down"
+      item-key="name"
+      :search="search"
+      :filter="handleFilter"
+      :activatable="false"
+    >
+      <template #label="{ item }">
+        <VcsTreeviewLeaf
+          :item="item"
+          :class="[item.clickable ? 'cursor-pointer' : '']"
+          @click.native="item.clickable && item.clicked()"
+        />
+      </template>
+    </v-treeview>
+  </div>
+</template>
+<style lang="scss" scoped>
+.vcs-treeview {
+  ::v-deep {
+    // Root Level Entries should be 40px high
+    > .v-treeview-node > .v-treeview-node__root {
+      min-height: 40px;
+    }
+    // Border around root nodes with children included
+    > .v-treeview-node {
+      border-bottom: 1px solid var(--v-gray-200-base);
+    }
+    // Only Root Entries have a bold font
+    > .v-treeview-node > .v-treeview-node__root > .v-treeview-node__content > .v-treeview-node__label {
+      font-weight: 700;
+    }
+    // remove ripple effect from expand icon
+    .v-icon.v-icon {
+      &::after{
+        background-color: transparent;
+      }
+    }
+    // Toggle Item Chevron with should be 16px
+    .v-treeview-node__toggle {
+      width: 16px;
+    }
+  }
+}
+</style>
+
+<script>
+  import { getCurrentInstance, ref } from '@vue/composition-api';
+  import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
+  import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
+
+  /**
+   * @description extends API of https://vuetifyjs.com/en/api/v-treeview/
+   * Can render dynamic components as leaf items.
+   * In order to display an item needs to be registered and added to `availableComponents`.
+   * @vue-prop {boolean} [hasSearchbar=false] - Whether there is a searchbar for this treeview
+   * @vue-prop {string}  [searchbarPlaceholder] - Placeholder text for the searchbar, will be translated
+   */
+  export default {
+    name: 'VcsTreeview',
+    components: { VcsTreeviewSearchbar, VcsTreeviewLeaf },
+    props: {
+      hasSearchbar: {
+        type: Boolean,
+        default: false,
+      },
+      searchbarPlaceholder: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup() {
+      const search = ref('');
+      // TODO properly type the tree view item interface & export in index.d.ts
+
+      const vm = getCurrentInstance().proxy;
+      /**
+       * @param {{ title: string }} treeNode
+       * @param {string} q
+       * @returns {boolean}
+       */
+      const handleFilter = (treeNode, q = '') => {
+        const translatedTitle = vm.$t(treeNode.title);
+        return translatedTitle.toLocaleLowerCase().includes(q.toLocaleLowerCase());
+      };
+
+      return {
+        search,
+        handleFilter,
+      };
+    },
+  };
+</script>
+

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="d-flex flex-row align-center"
+    v-if="item"
+  >
+    <span v-if="item.icon" class="d-flex align-center">
+      <v-icon
+        v-if="iconType === iconTypes.string"
+        v-text="item.icon"
+        :size="16"
+        class="mr-1"
+      />
+      <span ref="imgContainer" />
+    </span>
+
+    <div class="position-relative col-8 pa-0 d-flex align-center">
+      <span>{{ $t(item.title) }}</span>
+    </div>
+    <VcsActionButtonList
+      v-if="item.actions.length > 0"
+      :actions="item.actions"
+      :block-overflow="true"
+      :overflow-count="3"
+      small
+      right
+      class="col-4 pa-0 d-flex align-center"
+    />
+  </div>
+</template>
+
+<script>
+  import
+  {
+    computed,
+    onMounted,
+    ref,
+  } from '@vue/composition-api';
+
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+
+
+  const iconTypes = {
+    image: 'HTMLImageElement',
+    canvas: 'HTMLCanvasElement',
+    string: 'StringIcon',
+  };
+
+  /**
+   * @description
+   * Template for a treeview leaf, see: https://vuetifyjs.com/en/api/v-treeview/
+   */
+  export default {
+    components: { VcsActionButtonList },
+    props: {
+      item: {
+        type: Object,
+        default: undefined,
+      },
+    },
+    setup(props) {
+      const iconType = ref();
+      const imgContainer = ref();
+
+      const leaf = computed(() => props.item.children.length === 0);
+
+      onMounted(() => { // TODO make icon reactive
+        const { icon } = props.item;
+        if (icon) {
+          if (icon instanceof HTMLImageElement) {
+            imgContainer.value.appendChild(icon);
+            iconType.value = iconTypes.image;
+          }
+          if (icon instanceof HTMLCanvasElement) {
+            imgContainer.value.appendChild(icon);
+            iconType.value = iconTypes.canvas;
+          }
+          if (typeof icon === 'string') {
+            iconType.value = iconTypes.string;
+          }
+        }
+      });
+
+      return {
+        iconTypes,
+        iconType,
+        imgContainer,
+        leaf,
+      };
+    },
+  };
+</script>

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="pa-2 accent position-relative d-flex flex-row justify-space-between align-center">
+    <slot name="prepend">
+      <v-icon
+        class="search-icon my-0 ml-1"
+        v-text="'$vcsSearch'"
+        slot="prepend"
+        size="12"
+      />
+    </slot>
+
+    <slot>
+      <v-text-field
+        solo
+        dense
+        hide-details
+        class="searchbar outlined rounded-xl align-center d-flex justify-center white pa-1 pl-6"
+        :placeholder="$t(placeholder)"
+        :value="value"
+        @input="$event => handleInput($event)"
+        clearable
+      />
+    </slot>
+
+    <slot name="append">
+      <v-icon v-if="hasFilter" v-text="'$vcsFilter'" class="ml-2" size="16" />
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .input-container {
+    position: relative;
+  }
+
+  .search-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 12px;
+  }
+
+  input {
+    border-radius: 9999rem;
+    outline-style: none;
+    font-size: 12px;
+    box-shadow: 0 0 0 1px #dedede;
+
+    &:focus {
+      box-shadow: 0 0 0 1px var(--v-primary-base);
+    }
+  }
+
+  ::v-deep {
+    .v-input__slot {
+      background-color: transparent !important;
+    }
+
+    .v-input__append-inner {
+      height: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .v-icon {
+        width: 20px;
+        height: 20px;
+        font-size: 16px;
+      }
+    }
+
+    .v-text-field.v-text-field--solo.v-input--dense > .v-input__control {
+      min-height: unset;
+    }
+
+    .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded) > .v-input__control > .v-input__slot,
+    .v-text-field.v-text-field--enclosed .v-text-field__details {
+      padding-right: 0;
+    }
+
+    .v-input.outlined {
+      outline-style: none;
+      font-size: 12px;
+      box-shadow: 0 0 0 1px #dedede;
+
+      &:focus,
+      &.v-input--is-focused {
+        box-shadow: 0 0 0 1px var(--v-primary-base);
+      }
+    }
+
+    .v-text-field.v-input--dense:not(.v-text-field--outlined) .v-text-field__prefix,
+    .v-text-field.v-input--dense:not(.v-text-field--outlined) .v-text-field__suffix,
+    .v-text-field.v-input--dense:not(.v-text-field--outlined) input {
+      padding: 0;
+    }
+
+    .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot {
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+</style>
+
+
+<script>
+  import { onMounted, onUnmounted } from '@vue/composition-api';
+
+  import { Subject } from 'rxjs';
+  import { debounceTime } from 'rxjs/operators';
+
+
+  /**
+   * @description Stylized wrapper around vuetify divider
+   * @vue-prop {number} height - Height of the component.
+   * @vue-prop {string} [placeholder='search.title'] - Placeholder will be displayed in the search field, and will be translated.
+   */
+  export default {
+    name: 'VcsTreeviewSearchbar',
+    props: {
+      placeholder: {
+        type: String,
+        default: 'search.title',
+      },
+      customClasses: {
+        type: Array,
+        default: () => ([]),
+      },
+      value: {
+        type: String,
+        default: '',
+      },
+      hasFilter: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props, context) {
+      const sub = new Subject();
+      onMounted(() => {
+        sub.pipe(debounceTime(330)).subscribe(
+          (value) => {
+            context.emit('input', value);
+          },
+        );
+      });
+      onUnmounted(() => sub.unsubscribe());
+
+      return {
+        sub,
+        handleInput: (val) => {
+          sub.next(val);
+        },
+      };
+    },
+  };
+</script>