@vcmap/ui 5.0.0-rc.14 → 5.0.0-rc.16

package/src/components/lists/VcsList.vue

@@ -0,0 +1,466 @@
+<template>
+  <div
+    class="d-contents"
+  >
+    <vcs-treeview-searchbar
+      v-if="searchable"
+      :placeholder="searchbarPlaceholder"
+      v-model="query"
+    />
+    <v-list
+      dense
+    >
+      <v-list-item
+        v-if="showTitle"
+        class="font-weight-bold"
+      >
+        <v-list-item-action
+          v-if="selectable"
+        >
+          <v-icon
+            v-if="selected.length === renderingItems.length"
+            @click="clear"
+          >
+            mdi-check-circle-outline
+          </v-icon>
+          <v-icon
+            v-else
+            @click="selectAll()"
+          >
+            mdi-circle-outline
+          </v-icon>
+        </v-list-item-action>
+
+        <v-list-item-content
+          :title="$t(tooltip || title)"
+        >
+          <v-icon v-if="icon">
+            {{ icon }}
+          </v-icon>
+
+          <v-list-item-title>
+            {{ $t(title) }}
+          </v-list-item-title>
+
+          <vcs-action-button-list
+            v-if="actions?.length > 0"
+            :actions="actions"
+            :block-overflow="true"
+            :overflow-count="actionButtonListOverflowCount"
+            small
+            right
+          />
+        </v-list-item-content>
+      </v-list-item>
+      <v-list-item
+        v-for="(item, index) in renderingItems"
+        :key="`item-${index}`"
+        :input-value="selected.includes(item)"
+        :disabled="item.disabled"
+        @mousedown.shift="$event.preventDefault()"
+        @mouseover="hovering = index"
+        @mouseout="hovering = null"
+      >
+        <v-list-item-action
+          v-if="selectable"
+        >
+          <v-icon
+            v-if="selected.includes(item)"
+            @click="remove(item)"
+          >
+            mdi-check-circle-outline
+          </v-icon>
+          <v-icon
+            v-else-if="hovering === index || (!singleSelect && selected.length > 0)"
+            @click="singleSelect ? select(item, $event) : add(item)"
+          >
+            mdi-circle-outline
+          </v-icon>
+          <v-icon
+            v-else
+            @click="select(item, $event)"
+          >
+            mdi-circle-small
+          </v-icon>
+        </v-list-item-action>
+
+        <v-list-item-content
+          :title="$t(item.tooltip || item.title)"
+          :class="[selectable ? 'cursor-pointer' : '']"
+          @click="select(item, $event)"
+        >
+          <v-icon v-if="item.icon">
+            {{ item.icon }}
+          </v-icon>
+
+          <v-list-item-title>
+            {{ $t(item.title) }}
+          </v-list-item-title>
+
+          <vcs-action-button-list
+            v-if="item.actions?.length > 0"
+            :actions="item.actions"
+            :block-overflow="true"
+            :overflow-count="actionButtonListOverflowCount"
+            small
+            right
+          />
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>
+
+<script>
+  import { computed, getCurrentInstance, inject, ref, watch } from 'vue';
+  import {
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemAction,
+    VIcon,
+    VListItemTitle,
+  } from 'vuetify/lib';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
+
+  /**
+   * @typedef {Object} VcsListItem
+   * @property {string} name
+   * @property {boolean} [visible] - Whether to display this item or not.
+   * @property {boolean} [disabled] - Whether this item should be displayed as disabled.
+   * @property {string} title - The title to be displayed
+   * @property {string} [tooltip]
+   * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be an URL or HTMLElement.
+   * @property {Array<VcsAction>} [actions]
+   * @property {function(boolean):void} [selectionChanged] - A callback called if the selection changes with the current selection status. called before value update
+   */
+
+  /**
+   * The VCS list is intended to render items. Items can be selectable (by default, more then one) or only a single item can
+   * be selected. If items are disabled they cannot selected. Items which are not visible are not rendered. This items can
+   * no longer be selected or deselected either. Making a selected item invisible can lead to undefined behavior
+   * in the selection state.
+   * Clicking an unselected item selects it.
+   * Clicking a selected item which is not part of a set or range, deselects it.
+   * Clicking a selected item of a list or range will deselect the other items in the range or set
+   * Clicking with CTRL adds or removes to a selection set.
+   * Clicking with SHIFT will create a selection range, starting or ending with the first item in the list
+   * or the last normally selected item (not the last item clicked with CTRL for instance).
+   * @vue-prop {Array<VcsListItem>} items
+   * @vue-prop {boolean} [selectable=false]
+   * @vue-prop {boolean} [singleSelect=false]
+   * @vue-prop {Array<VcsListItem>} [value=[]] - the initial items to be selected.
+   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched. you can provide your own predicate function by providing "filterPredicate" which is of type function(VcsListItem, string):boolean
+   * @vue-prop {string} [searchbarPlaceholder] - placeholder to render inside the search field
+   * @vue-prop {boolean} [showTitle=true] - show the title component
+   * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
+   * @vue-prop {string} [title] - the lists title
+   * @vue-prop {string} [icon] - icon to prepend to the list title
+   * @vue-prop {string} [tooltip] - tooltip to render on the list title
+   * @vue-prop {Array<VcsAction>} [actions] - actions to render in the list title
+   */
+  export default {
+    name: 'VcsList',
+    components: {
+      VcsTreeviewSearchbar,
+      VcsActionButtonList,
+      VList,
+      VListItem,
+      VListItemContent,
+      VListItemAction,
+      VIcon,
+      VListItemTitle,
+    },
+    props: {
+      /** @type {Array<VcsListItem>} */
+      items: {
+        type: Array,
+        required: true,
+      },
+      selectable: {
+        type: Boolean,
+        default: false,
+      },
+      singleSelect: {
+        type: Boolean,
+        default: false,
+      },
+      /** @type {Array<VcsListItem>} */
+      value: {
+        type: Array,
+        default: () => [],
+      },
+      searchable: {
+        type: Boolean,
+        default: false,
+      },
+      searchbarPlaceholder: {
+        type: String,
+        default: undefined,
+      },
+      showTitle: {
+        type: Boolean,
+        default: true,
+      },
+      actionButtonListOverflowCount: {
+        type: Number,
+        required: false,
+        default: undefined,
+      },
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      icon: {
+        type: String,
+        required: false,
+        default: undefined,
+      },
+      tooltip: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      actions: {
+        type: Array,
+        required: false,
+        default: undefined,
+      },
+    },
+    setup(props, { emit }) {
+      /** @type {import("vue").Ref<Array<VcsListItem>>} */
+      const selected = ref(props.value);
+      /** @type {import("vue").Ref<string>} */
+      const query = ref('');
+      const hovering = ref(null);
+      let firstSelected = null;
+
+      watch(props, () => {
+        if (selected.value !== props.value) {
+          selected.value = props.value;
+        }
+        if (props.singleSelect && selected.value.length > 1) {
+          selected.value
+            .filter((i, index) => index && i.selectionChanged)
+            .forEach(i => i.selectionChanged(false));
+          selected.value = [selected.value[0]];
+          emit('input', selected);
+        }
+        if (!props.selectable && selected.value.length > 0) {
+          selected.value
+            .filter(i => i.selectionChanged)
+            .forEach(i => i.selectionChanged(false));
+          selected.value = [];
+          emit('input', selected);
+        }
+        if (!props.searchable) {
+          query.value = '';
+        }
+      }, { immediate: true, deep: false });
+
+      const vm = getCurrentInstance().proxy;
+      /** @type {function(VcsListItem, string):boolean} */
+      const filterPredicate = inject('filterPredicate', (item, queryString = '') => {
+        const translatedTitle = vm.$t(item.title);
+        return translatedTitle.toLocaleLowerCase().includes(queryString.toLocaleLowerCase());
+      });
+
+      return {
+        query,
+        hovering,
+        /**
+         * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+         */
+        renderingItems: computed(() => {
+          let items = props.items.filter(i => i.visible !== false);
+          if (query.value) {
+            items = items.filter(i => filterPredicate(i, query.value));
+          }
+          return items;
+        }),
+        /** @type {import("vue").Ref<Array<VcsListItem>>} */
+        selected,
+        /**
+         * @param {VcsListItem} item
+         * @param {PointerEvent} event
+         */
+        select(item, event) {
+          if (!props.selectable || item.disabled) {
+            return;
+          }
+          if (props.singleSelect) {
+            if (selected.value[0] === item) {
+              item.selectionChanged?.(false);
+              selected.value = [];
+              firstSelected = null;
+            } else {
+              selected.value[0]?.selectionChanged?.(false);
+              item.selectionChanged?.(true);
+              selected.value = [item];
+              firstSelected = item;
+            }
+          } else if (event.shiftKey) {
+            let firstIndex = 0;
+            if (firstSelected) {
+              firstIndex = this.renderingItems.indexOf(firstSelected);
+            }
+            const currentIndex = this.renderingItems.indexOf(item);
+            if (firstIndex > -1 && currentIndex > -1) {
+              const currentSelection = [...selected.value];
+              selected.value = this.renderingItems.slice(
+                Math.min(firstIndex, currentIndex),
+                Math.max(firstIndex, currentIndex) + 1,
+              );
+              currentSelection.forEach((oldItem) => {
+                if (oldItem.selectionChanged && !selected.value.includes(oldItem)) {
+                  oldItem.selectionChanged(false);
+                }
+              });
+              selected.value.forEach((newItem) => {
+                if (newItem.selectionChanged && !currentSelection.includes(newItem)) {
+                  newItem.selectionChanged(true);
+                }
+              });
+            } else {
+              selected.value
+                .filter(i => i !== item && i.selectionChanged)
+                .forEach(i => i.selectionChanged(false));
+              selected.value = [];
+              firstSelected = null;
+            }
+          } else if (selected.value.includes(item)) {
+            if (event.ctrlKey) {
+              item.selectionChanged?.(false);
+              selected.value = selected.value.filter(i => i !== item);
+            } else if (selected.value.length > 1) {
+              selected.value
+                .filter(i => i !== item && i.selectionChanged)
+                .forEach(i => i.selectionChanged(false));
+              selected.value = [item];
+              firstSelected = item;
+            } else {
+              item.selectionChanged?.(false);
+              selected.value = [];
+              firstSelected = null;
+            }
+          } else if (event.ctrlKey) {
+            item.selectionChanged?.(true);
+            selected.value = [...selected.value, item];
+            if (selected.value.length === 1) {
+              firstSelected = item;
+            }
+          } else {
+            selected.value
+              .filter(i => i !== item && i.selectionChanged)
+              .forEach(i => i.selectionChanged(false));
+            item.selectionChanged?.(true);
+            selected.value = [item];
+            firstSelected = item;
+          }
+
+          emit('input', selected.value);
+        },
+        /**
+         * @param {VcsListItem} item
+         */
+        add(item) {
+          if (!selected.value.includes(item) && !item.disabled) {
+            item.selectionChanged?.(true);
+            selected.value = [...selected.value, item];
+            emit('input', selected.value);
+          }
+        },
+        /**
+         * @param {VcsListItem} item
+         */
+        remove(item) {
+          if (selected.value.includes(item) && !item.disabled) {
+            item.selectionChanged?.(false);
+            selected.value = selected.value.filter(i => i !== item);
+            emit('input', selected.value);
+          }
+        },
+        clear() {
+          selected.value
+            .filter(i => i.selectionChanged)
+            .forEach(i => i.selectionChanged(false));
+          selected.value = [];
+          firstSelected = null;
+        },
+        selectAll() {
+          const currentSelection = [...selected.value];
+          selected.value = this.renderingItems.slice(0);
+          selected.value.forEach((item) => {
+            if (item.selectionChanged && currentSelection.includes(item)) {
+              item.selectionChanged(true);
+            }
+          });
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep {
+    .v-list{
+      .v-list-item {
+        padding: 4px 8px 4px 16px;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        &:after{
+          display: none;
+        }
+        &.font-weight-bold{
+          .v-list-item__title{
+            font-weight: 700;
+          }
+        }
+        &.v-list-item--active{
+          padding: 4px 8px 3px 16px;
+          &.theme--light{
+            background-color: var(--v-primary-base);
+            border-bottom: 1px solid var(--v-primary-darken1);
+          }
+        }
+        &.v-list-item.theme--dark{
+          &.v-list-item--active{
+            background-color: var(--v-primary-darken1);
+            border-bottom: 1px solid var(--v-primary-darken2);
+            &:nth-child(even){
+              background-color: var(--v-primary-darken1);
+            }
+          }
+          &:nth-child(even){
+            background-color: rgba(255, 255, 255, 0.15);
+          }
+        }
+        &:nth-child(even) {
+          background-color: var(--v-accent-base);
+        }
+        .v-list-item__action {
+          .v-icon {
+            font-size: 16px;
+          }
+        }
+        .v-list-item__content {
+          flex-wrap: nowrap;
+          column-gap: 4px;
+          .v-icon,
+          .action-btn-wrap {
+            flex: 1 1 auto;
+          }
+          .v-icon{
+            font-size: 16px;
+            .v-icon__component{
+              width: 16px;
+              height: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/lists/VcsTreeview.vue

@@ -13,13 +13,12 @@
       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>
@@ -56,6 +55,7 @@
 
 <script>
   import { getCurrentInstance, ref } from 'vue';
+  import { VTreeview } from 'vuetify/lib';
   import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
 
@@ -68,7 +68,11 @@
    */
   export default {
     name: 'VcsTreeview',
-    components: { VcsTreeviewSearchbar, VcsTreeviewLeaf },
+    components: {
+      VcsTreeviewSearchbar,
+      VcsTreeviewLeaf,
+      VTreeview,
+    },
     props: {
       showSearchbar: {
         type: Boolean,

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -3,21 +3,22 @@
     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 treeview-label"
+      class="position-relative col-8 pa-0 d-flex align-center vcs-treeview-leaf"
       :title="$t(item.tooltip || item.title)"
     >
-      <span>{{ $t(item.title) }}</span>
+      <span
+        v-if="item.icon"
+      >
+        <v-icon
+          v-if="isStringIcon"
+          v-text="item.icon"
+          :size="16"
+          class="mr-1"
+        />
+        <ImageElementInjector :element="item.icon" v-else />
+      </span>
+      <span class="vcs-treeview-item-title">{{ $t(item.title) }}</span>
     </div>
     <VcsActionButtonList
       v-if="item.actions.length > 0"
@@ -31,7 +32,7 @@
   </div>
 </template>
 <style lang="css" scoped>
-.treeview-label span{
+.vcs-treeview-leaf .vcs-treeview-item-title{
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -39,21 +40,10 @@
 </style>
 
 <script>
-  import
-  {
-    computed,
-    onMounted,
-    ref,
-  } from 'vue';
-
+  import { computed } 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';
 
   /**
    * @description
@@ -62,7 +52,11 @@
    * @vue-computed {boolean} leaf - Whether the item is a leaf item or not
    */
   export default {
-    components: { VcsActionButtonList },
+    components: {
+      VcsActionButtonList,
+      VIcon,
+      ImageElementInjector,
+    },
     props: {
       item: {
         type: Object,
@@ -70,32 +64,10 @@
       },
     },
     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,
+        isStringIcon: computed(() => typeof props.item.icon === 'string'),
         leaf,
       };
     },

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -17,7 +17,7 @@
         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)"
+        v-on="$listeners"
         clearable
       />
     </slot>
@@ -104,11 +104,7 @@
 
 
 <script>
-  import { onMounted, onUnmounted } from 'vue';
-
-  import { Subject } from 'rxjs';
-  import { debounceTime } from 'rxjs/operators';
-
+  import { VIcon, VTextField } from 'vuetify/lib';
 
   /**
    * @description Stylized wrapper around vuetify divider
@@ -117,6 +113,10 @@
    */
   export default {
     name: 'VcsTreeviewSearchbar',
+    components: {
+      VIcon,
+      VTextField,
+    },
     props: {
       placeholder: {
         type: String,
@@ -135,22 +135,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 {
-        handleInput: (val) => {
-          sub.next(val);
-        },
-      };
-    },
   };
 </script>

package/src/components/notification/VcsTooltip.vue

@@ -110,15 +110,17 @@
 </style>
 <script>
 
-/**
- * @enum {string} TooltipPositions
- * @property {string} bottom
- * @property {string} left
- * @property {string} top
- * @property {string} right
- * @readonly
- * @module VcsTooltip
- */
+  import { VTooltip } from 'vuetify/lib';
+
+  /**
+   * @enum {string} TooltipPositions
+   * @property {string} bottom
+   * @property {string} left
+   * @property {string} top
+   * @property {string} right
+   * @readonly
+   * @module VcsTooltip
+   */
   const TooltipPositions = {
     bottom: 'arrow-top',
     top: 'arrow-bottom',
@@ -134,6 +136,9 @@
    */
   export default {
     name: 'VcsTooltip',
+    components: {
+      VTooltip,
+    },
     props: {
       tooltip: {
         type: String,