@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/src/components/lists/VcsTreeview.vue

@@ -1,61 +1,64 @@
 <template>
   <div class="d-contents">
     <VcsTreeviewSearchbar
-      v-if="hasSearchbar"
+      v-if="showSearchbar"
       :placeholder="searchbarPlaceholder"
       v-model="search"
     />
     <v-treeview
       class="vcs-treeview"
-      v-bind="{...$props, ...$attrs}"
+      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()"
+          @click.native="item.clickable && item.clicked($event)"
         />
       </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;
+  .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:not(:last-child) {
+        border-bottom: 1px solid var(--v-base-lighten2);
+      }
+      // 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;
       }
-    }
-    // Toggle Item Chevron with should be 16px
-    .v-treeview-node__toggle {
-      width: 16px;
     }
   }
-}
 </style>
 
 <script>
-  import { inject, ref } from '@vue/composition-api';
+  import { getCurrentInstance, ref } from 'vue';
+  import { VTreeview } from 'vuetify/lib';
   import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
 
@@ -63,14 +66,18 @@
    * @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
+   * @vue-prop {boolean} [showSearchbar=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 },
+    components: {
+      VcsTreeviewSearchbar,
+      VcsTreeviewLeaf,
+      VTreeview,
+    },
     props: {
-      hasSearchbar: {
+      showSearchbar: {
         type: Boolean,
         default: false,
       },
@@ -81,22 +88,19 @@
     },
     setup() {
       const search = ref('');
-      const language = inject('language');
       // 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 = '') => {
-        if (typeof treeNode.title === 'string') {
-          return treeNode.title.toLocaleLowerCase().includes(q.toLocaleLowerCase());
-        }
-        if (typeof treeNode.title === 'object') {
-          const title = (treeNode.title[language] || treeNode.title.en || treeNode.title.de || 'NO LABEL FOUND');
-          return title.toLocaleLowerCase().includes(q.toLocaleLowerCase());
-        }
-        return false;
+        const translatedTitle = vm.$t(treeNode.title);
+        return translatedTitle
+          .toLocaleLowerCase()
+          .includes(q.toLocaleLowerCase());
       };
 
       return {
@@ -106,4 +110,3 @@
     },
   };
 </script>
-

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -1,27 +1,30 @@
 <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="d-flex flex-row align-center" v-if="item">
     <div class="position-relative col-8 pa-0 d-flex align-center">
-      <span>{{ label }}</span>
+      <span v-if="item.icon" class="d-inline-flex">
+        <v-icon v-if="isStringIcon" :size="16" class="mr-1">
+          {{ item.icon }}
+        </v-icon>
+        <ImageElementInjector :element="item.icon" v-else />
+      </span>
+      <VcsTooltip :tooltip="tooltip">
+        <template #activator="{ on, attrs }">
+          <span
+            v-bind="attrs"
+            v-on="on"
+            class="d-inline-block text-truncate"
+            ref="titleElem"
+            >{{ $t(item.title || item.name) }}</span
+          >
+        </template>
+      </VcsTooltip>
     </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"
     />
@@ -29,29 +32,25 @@
 </template>
 
 <script>
-  import
-  {
-    computed,
-    inject,
-    onMounted,
-    ref,
-  } from '@vue/composition-api';
-
+  import { computed, ref } from 'vue';
+  import { VIcon } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-
-
-  const iconTypes = {
-    image: 'HTMLImageElement',
-    canvas: 'HTMLCanvasElement',
-    string: 'StringIcon',
-  };
+  import ImageElementInjector from '../ImageElementInjector.vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
    * @description
    * Template for a treeview leaf, see: https://vuetifyjs.com/en/api/v-treeview/
+   * @vue-prop {TreeViewItem} item - A ContentTreeItem
+   * @vue-computed {boolean} leaf - Whether the item is a leaf item or not
    */
   export default {
-    components: { VcsActionButtonList },
+    components: {
+      VcsTooltip,
+      VcsActionButtonList,
+      VIcon,
+      ImageElementInjector,
+    },
     props: {
       item: {
         type: Object,
@@ -59,46 +58,23 @@
       },
     },
     setup(props) {
-      const iconType = ref();
-      const imgContainer = ref();
-      const language = inject('language');
-
-      const leaf = computed(() => props.item.children.length === 0);
-      const label = computed(() => {
-        const titleObj = props.item.title;
-        if (titleObj) {
-          if (typeof titleObj === 'string') {
-            return titleObj; // TODO translateable text
-          } else {
-            return titleObj[language]; // TODO translateable text
-          }
-        }
-        return props.item.name;
-      });
-
-      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;
-          }
-        }
-      });
+      const leaf = computed(() => props.item?.children?.length === 0);
+      const titleElem = ref(null);
 
       return {
-        iconTypes,
-        iconType,
-        label,
-        imgContainer,
+        isStringIcon: computed(() => typeof props.item.icon === 'string'),
         leaf,
+        titleElem,
+        tooltip: computed(() => {
+          if (props.item.tooltip) {
+            return props.item.tooltip;
+          }
+          const elem = titleElem.value;
+          if (elem && elem.offsetWidth < elem.scrollWidth) {
+            return props.item.title;
+          }
+          return '';
+        }),
       };
     },
   };

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,29 +1,26 @@
 <template>
-  <div class="pa-2 accent position-relative d-flex flex-row justify-space-between align-center">
+  <div
+    class="pa-2 base lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
+  >
     <slot name="prepend">
-      <v-icon
-        class="search-icon my-0 ml-1"
-        v-text="'$vcsSearch'"
-        slot="prepend"
-        size="12"
-      />
+      <v-icon class="search-icon my-0 ml-1" size="12"> $vcsSearch </v-icon>
     </slot>
 
-    <slot>
+    <slot v-bind="{ ...$props, on: $listeners }">
       <v-text-field
         solo
         dense
         hide-details
-        class="searchbar outlined rounded-xl align-center d-flex justify-center white pa-1 pl-6"
-        :placeholder="(placeholder || 'search.title') | translate"
+        class="searchbar outlined rounded-xl align-center d-flex justify-center base lighten-4 pa-1 pl-6"
+        :placeholder="$t(placeholder)"
         :value="value"
-        @input="$event => handleInput($event)"
+        v-on="$listeners"
         clearable
       />
     </slot>
 
-    <slot name="append">
-      <v-icon v-if="hasFilter" v-text="'$vcsFilter'" class="ml-2" size="16" />
+    <slot name="append" :has-filter="hasFilter">
+      <v-icon v-if="hasFilter" class="ml-2" size="16">$vcsFilter</v-icon>
     </slot>
   </div>
 </template>
@@ -44,7 +41,7 @@
     border-radius: 9999rem;
     outline-style: none;
     font-size: 12px;
-    box-shadow: 0 0 0 1px #dedede;
+    box-shadow: 0 0 0 1px var(--v-base-lighten2);
 
     &:focus {
       box-shadow: 0 0 0 1px var(--v-primary-base);
@@ -73,15 +70,17 @@
       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: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;
+      padding: 0 8px;
     }
 
     .v-input.outlined {
       outline-style: none;
       font-size: 12px;
-      box-shadow: 0 0 0 1px #dedede;
+      box-shadow: 0 0 0 1px var(--v-base-lighten2);
 
       &:focus,
       &.v-input--is-focused {
@@ -89,41 +88,52 @@
       }
     }
 
-    .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
+      ).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 {
+    .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';
-
+  import { VIcon, VTextField } from 'vuetify/lib';
 
   /**
-   * @description Stylized wrapper around vuetify divider
-   * @vue-prop {number}   height - Height of the component.
+   * @description stylized searchbar used in VcsTreeview, VcsDataTable and VcsList
+   * @vue-prop {string} [placeholder='search.title'] - Placeholder will be displayed in the search field, and will be translated.
+   * @vue-prop {string[]} [customClasses] - CSS classes to customize style
+   * @vue-prop {string} [value] - The search value
+   * @vue-prop {boolean} [hasFilter=false] - Appends a filter icon
+   * @vue-data {slot} [prepend] - prepend slot overwriting search icon
+   * @vue-data {slot} [default] - default slot overwriting search input text field. binds all props
+   * @vue-data {slot} [append] - append slot overwriting filter icon. binds hasFilter prop
    */
   export default {
     name: 'VcsTreeviewSearchbar',
+    components: {
+      VIcon,
+      VTextField,
+    },
     props: {
       placeholder: {
         type: String,
-        default: '',
+        default: 'search.title',
       },
       customClasses: {
         type: Array,
-        default: () => ([]),
+        default: () => [],
       },
       value: {
         type: String,
@@ -134,23 +144,5 @@
         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>

package/src/components/notification/VcsBadge.vue

@@ -3,14 +3,16 @@
 </template>
 
 <style lang="scss" scoped>
-  .v-application .badge {
-    border: 1px solid var(--v-basic-base) !important;
+  @import '../../styles/shades.scss';
+  .v-application .theme--light .badge {
+    border: 1px solid map-get($shades, 'white') !important;
+  }
+  .v-application .theme--dark .badge {
+    border: 1px solid map-get($shades, 'black') !important;
   }
 </style>
 
-
 <script>
-
   /**
    * @description UI component representing a circular indicator.
    * @vue-prop {string} color - any of the theme colors.

package/src/components/notification/VcsHelp.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-alert
+    :value="show"
+    dense
+    text
+    class="mb-0 font-weight-regular rounded-0 px-2 pt-2"
+  >
+    <slot>
+      <span>{{ $t(text) }}</span>
+    </slot>
+  </v-alert>
+</template>
+
+<script>
+  import { VAlert } from 'vuetify/lib';
+
+  /**
+   * @description Wraps Vuetify VAlert for displaying help.
+   * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
+   * @vue-prop {boolean} show - If help should be displayed. If false, component is completely hidden.
+   * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
+   */
+  export default {
+    name: 'VcsHelp',
+    components: {
+      VAlert,
+    },
+    props: {
+      text: {
+        type: String,
+        default: undefined,
+      },
+      show: {
+        type: Boolean,
+        required: true,
+      },
+    },
+  };
+</script>