@vcmap/ui 6.0.14 → 6.1.0-rc.2

package/src/components/lists/VcsTreeNode.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="vcs-tree-node" v-if="matchFilter">
+    <v-row
+      no-gutters
+      class="treenode flex-nowrap text-truncate"
+      :class="`level-${level} ${children.length ? 'group' : 'item'}`"
+    >
+      <VBtn
+        v-if="children.length"
+        class="chevron-btn"
+        variant="text"
+        :icon="isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'"
+        @click="bubbleItemToggled(item.name)"
+      />
+      <slot name="prepend" v-bind="{ item }">
+        <span class="prepend">
+          <div v-if="item.icon">
+            <v-icon v-if="typeof item?.icon === 'string'" :size="iconSize">
+              {{ item.icon }}
+            </v-icon>
+            <ImageElementInjector :element="item.icon" v-else />
+          </div>
+        </span>
+      </slot>
+      <slot name="title" v-bind="{ item }">
+        <VcsTreeviewTitle
+          :item="item"
+          :cursor-pointer="item.clickable || (openOnClick && !!children.length)"
+          @click="(event) => $emit('click', item, event)"
+        />
+      </slot>
+      <slot name="append" v-bind="{ item }">
+        <VcsActionButtonList
+          v-if="item.actions?.length > 0"
+          :actions="item.actions"
+          :overflow-count="3"
+          :disabled="item.disabled"
+          right
+          tooltip-position="right"
+          block-overflow
+          class="col-4 pa-0 ml-auto pr-4"
+        />
+      </slot>
+    </v-row>
+    <v-expand-transition>
+      <div v-if="isOpen && children.length" class="children">
+        <VcsTreeNode
+          v-for="child in children"
+          :key="child.name"
+          :item="child"
+          :search="search"
+          :custom-filter="customFilter"
+          :level="level + 1"
+          :open-on-click="openOnClick"
+          :item-children="itemChildren"
+          :opened="opened"
+          @item-toggled="bubbleItemToggled"
+          @click="bubbleItemClicked"
+        >
+          <template v-for="slot of forwardSlots" #[slot]="scope">
+            <slot :name="slot" v-bind="scope ?? {}" />
+          </template>
+        </VcsTreeNode>
+      </div>
+    </v-expand-transition>
+  </div>
+</template>
+
+<script>
+  import { computed, getCurrentInstance } from 'vue';
+  import { VBtn, VExpandTransition, VIcon, VRow } from 'vuetify/components';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
+  import { getForwardSlots } from '../composables.js';
+  import ImageElementInjector from '../ImageElementInjector.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsTreeviewTitle from './VcsTreeviewTitle.vue';
+
+  /**
+   * @typedef {Object} VcsTreeNodeItem
+   * @property {string} name
+   * @property {string} [title] - An optional translatable title.
+   * @property {string} [tooltip]
+   * @property {boolean} [clickable] - Whether this item reacts to click events.
+   * @property {boolean} [disabled] - Whether this item should be displayed as disabled.
+   * @property {Array<import("../../actions/actionHelper.js").VcsAction>} [actions]
+   * @property {Array<VcsTreeNodeItem>} [children] - An optional array of children. Can be binded to another key, using the `item-children` attributes of the VcsTreeview component.
+   * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be a URL or HTMLElement.
+   * @property {function(string):void} [clicked] - A callback called when the item is clicked.
+   */
+
+  /**
+   * @description
+   *  A recursive component to render a treenode and its children.
+   * Exposes the `prepend`, `title` and `append` slots for customization.
+   * Emits `itemToggled` and `click` events.
+   * @vue-prop {VcsTreeNodeItem} item - The item to render.
+   * @vue-prop {Array<string>} opened - Names of the opened items.
+   * @vue-prop {number} [level=0] - The level of the item
+   * @vue-prop {string} [itemChildren='children'] - The property key of the children.
+   * @vue-prop {boolean} [openOnClick=false] - Whether to open items on title click..
+   * @vue-prop {string} [search] - The search string to filter the tree.
+   * @vue-prop {function(VcsTreeNodeItem, string|undefined):boolean}} [customFilter] - a function to customize filtering when searching.
+   * @vue-data {slot} [#prepend] - A slot prepended to the item, binding the item. Default fallback renders an image.
+   * @vue-data {slot} [#title] - A slot to render the item title, binding the item. Default fallback renders a translatable title using the VcsTreeviewTitle component.
+   * @vue-data {slot} [#append] - A slot appended to the item, binding the item. Default fallback renders the VcsActionButtonList if the item has an array of Actions.
+   */
+  export default {
+    name: 'VcsTreeNode',
+    components: {
+      ImageElementInjector,
+      VBtn,
+      VExpandTransition,
+      VIcon,
+      VRow,
+      VcsActionButtonList,
+      VcsTreeviewTitle,
+    },
+    props: {
+      /** @type {VcsTreeNodeItem} */
+      item: {
+        type: Object,
+        required: true,
+      },
+      opened: {
+        type: Array,
+        required: true,
+      },
+      level: {
+        type: Number,
+        default: 0,
+      },
+      openOnClick: {
+        type: Boolean,
+        default: false,
+      },
+      itemChildren: {
+        type: String,
+        default: 'children',
+      },
+      search: {
+        type: String,
+        default: undefined,
+      },
+      /**
+       * @param {VcsTreeNodeItem} item The item to check the match for.
+       * @param {string} search The search value.
+       */
+      customFilter: {
+        type: Function,
+        default: undefined,
+      },
+    },
+    emits: ['itemToggled', 'click'],
+    setup(props, { emit, slots }) {
+      const vm = getCurrentInstance().proxy;
+      const iconSize = useIconSize();
+      const forwardSlots = getForwardSlots(slots);
+
+      const isOpen = computed(() => props.opened.includes(props.item.name));
+      const children = computed(() => props.item[props.itemChildren] ?? []);
+
+      const matchFilter = computed(() => {
+        if (!props.search) {
+          return true;
+        }
+        if (props.customFilter) {
+          return props.customFilter(props.item, props.search);
+        }
+        const translatedTitle = (item) =>
+          item.title ? vm.$t(item.title) : item.name;
+
+        const hasText = (item) =>
+          translatedTitle(item)
+            .toLocaleLowerCase()
+            .indexOf(props.search.toLocaleLowerCase()) > -1 ||
+          item[props.itemChildren]?.some(hasText);
+
+        return hasText(props.item);
+      });
+
+      return {
+        forwardSlots,
+        isOpen,
+        matchFilter,
+        iconSize,
+        children,
+
+        // Bubble up events for the nested tree-items
+        bubbleItemToggled: (itemName) => {
+          emit('itemToggled', itemName);
+        },
+        bubbleItemClicked: (item, event) => {
+          emit('click', item, event);
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .treenode {
+    align-items: center !important;
+    min-height: calc(var(--v-vcs-font-size) * 2 + 6px);
+  }
+  @for $i from 0 through 6 {
+    .level-#{$i} {
+      padding-left: calc(var(--v-vcs-font-size) * $i + 2px);
+      &.item {
+        & > .prepend:not(:has(.v-icon)) {
+          margin-left: calc(var(--v-vcs-font-size) * 2);
+        }
+        & > .prepend:has(.v-icon) {
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+  .prepend {
+    :deep(.v-icon) {
+      margin-right: 6px;
+      display: flex;
+      align-items: start;
+    }
+  }
+  // Indent children padding
+  .children {
+    padding-left: var(--v-vcs-font-size);
+  }
+  // set the size of the buttons, except for the ActionButtonList
+  :deep(.v-btn):not(.vcs-button) {
+    width: var(--v-vcs-font-size);
+    height: var(--v-vcs-font-size);
+    // for alignment of chevron
+    display: flex;
+    &.chevron-btn {
+      margin-left: 4px;
+      margin-right: 8px;
+    }
+  }
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
+  }
+</style>

package/src/components/lists/VcsTreeNode.vue.d.ts

@@ -0,0 +1,31 @@
+declare const _default: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+export default _default;
+export type VcsTreeNodeItem = {
+    name: string;
+    /**
+     * - An optional translatable title.
+     */
+    title?: string | undefined;
+    tooltip?: string | undefined;
+    /**
+     * - Whether this item reacts to click events.
+     */
+    clickable?: boolean | undefined;
+    /**
+     * - Whether this item should be displayed as disabled.
+     */
+    disabled?: boolean | undefined;
+    actions?: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[] | undefined;
+    /**
+     * - An optional array of children. Can be binded to another key, using the `item-children` attributes of the VcsTreeview component.
+     */
+    children?: VcsTreeNodeItem[] | undefined;
+    /**
+     * - An optional icon to display with this item. Can be a URL or HTMLElement.
+     */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /**
+     * - A callback called when the item is clicked.
+     */
+    clicked?: ((arg0: string) => void) | undefined;
+};

package/src/components/lists/VcsTreeview.vue

@@ -1,163 +1,82 @@
 <template>
-  <div class="d-contents">
+  <div class="vcs-treeview">
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
       :placeholder="searchbarPlaceholder"
       v-model="localSearchValue"
     />
-    <v-treeview
-      class="vcs-treeview"
-      density="compact"
-      item-value="name"
-      :item-props="true"
-      :custom-filter="handleFilter"
-      :selectable="false"
-      :activatable="false"
-      expand-icon="mdi-chevron-right"
-      collapse-icon="mdi-chevron-down"
-      v-bind="{ ...$props, ...$attrs }"
-      :search="localSearchValue"
-      @click:select="itemClicked($event.id, $event.event)"
-    >
-      <template #title="scope">
-        <slot name="title" v-bind="scope ?? {}">
-          <VcsTreeviewTitle :item="scope.item"></VcsTreeviewTitle>
-        </slot>
-      </template>
-      <template v-for="slot of forwardSlots" #[slot]="scope">
-        <slot :name="slot" v-bind="scope ?? {}" />
-      </template>
-      <template #prepend="scope">
-        <slot name="prepend" v-bind="scope ?? {}">
-          <template v-if="scope.item?.icon">
-            <v-icon
-              v-if="typeof scope.item?.icon === 'string'"
-              :size="iconSize"
-            >
-              {{ scope.item.icon }}
-            </v-icon>
-            <ImageElementInjector :element="scope.item.icon" v-else />
-          </template>
-        </slot>
-      </template>
-      <template #append="scope">
-        <slot name="append" v-bind="scope ?? {}">
-          <VcsActionButtonList
-            v-if="scope.item.actions?.length > 0"
-            :actions="scope.item.actions"
-            :overflow-count="3"
-            :disabled="scope.item.disabled"
-            right
-            tooltip-position="right"
-            block-overflow
-            class="col-4 pa-0 d-flex align-center"
-          />
-        </slot>
-      </template>
-    </v-treeview>
+    <div v-for="item in items" :key="item.name" class="vcs-treeitem">
+      <VcsTreeNode
+        class="root-node"
+        :item="item"
+        :search="localSearchValue"
+        v-model:opened="localOpenedItems"
+        :custom-filter="customFilter"
+        :open-on-click="openOnClick"
+        :item-children="itemChildren"
+        @item-toggled="itemToggled"
+        @click="itemClicked"
+      >
+        <template v-for="slot of forwardSlots" #[slot]="scope">
+          <slot :name="slot" v-bind="scope ?? {}" />
+        </template>
+      </VcsTreeNode>
+    </div>
   </div>
 </template>
-<style lang="scss" scoped>
-  :deep(.vcs-treeview) {
-    // Root Level Entries should be 40px high
-    > .v-list-item,
-    > .v-list-group > .v-list-item {
-      min-height: calc(var(--v-vcs-font-size) * 2 + 14px) !important;
-      padding-left: 6px;
-    }
-    // Border around root nodes with children included
-    > .v-list-item:not(:last-child),
-    > .v-list-group:not(:last-child) {
-      border-bottom: 1px solid rgb(var(--v-theme-base-lighten-2));
-    }
-    // Only Group Entries have a bold font
-    > .v-list-group
-      > .v-list-item
-      > .v-list-item__content
-      > .v-list-item-title {
-      font-weight: 700 !important;
-    }
-  }
-
-  // leaf indent
-  :deep(.v-list--slim .v-treeview-group.v-list-group) {
-    --prepend-width: 0px;
-  }
-
-  // Padding left of root nodes
-  :deep(.v-list-item__prepend) {
-    width: var(--v-vcs-font-size);
-    margin-right: 8px;
-    > .v-list-item-action > .v-btn {
-      width: var(--v-vcs-font-size);
-      height: var(--v-vcs-font-size);
-      margin: auto;
-      // for alignment of chevron
-      display: flex;
-    }
-  }
-
-  // Width of prepend for group nodes having two icons (chevron and custom icon)
-  :deep(.v-list-item__prepend:has(> .v-list-item-action + .v-icon)) {
-    width: calc(var(--v-vcs-font-size) + 23px);
-    .v-list-item-action {
-      margin-right: calc(22px - var(--v-vcs-font-size));
-    }
-  }
-
-  // remove hover shadow over button
-  :deep(.v-btn__overlay) {
-    --v-hover-opacity: 0;
-  }
-  // remove ripple effect
-  :deep(.v-ripple__container) {
-    display: none;
-  }
-  // hide active class
-  :deep(.v-list-item__overlay) {
-    display: none;
-  }
-
-  .d-contents {
-    display: contents;
-  }
-</style>
 
 <script>
-  import { getCurrentInstance } from 'vue';
-  import { VIcon } from 'vuetify/components';
-  import { VTreeview } from 'vuetify/labs/VTreeview';
-  import { useProxiedAtomicModel } from '../modelHelper.js';
+  import { watch } from 'vue';
+  import {
+    useProxiedAtomicModel,
+    useProxiedComplexModel,
+  } from '../modelHelper.js';
   import { getForwardSlots } from '../composables.js';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-  import ImageElementInjector from '../ImageElementInjector.vue';
-  import VcsTreeviewTitle from './VcsTreeviewTitle.vue';
-  import { useIconSize } from '../../vuePlugins/vuetify.js';
+  import VcsTreeNode from './VcsTreeNode.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`.
+   * @description The VcsTreeview is heavily inspired by the Vuetify VTreeview component. Can render dynamic components as leaf items.
    * Exposes the `search` value for filtering the treeview.
-   * @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
+   * Exposes the `opened` model-value for controlling the opened state of the treeview.
+   * Forwards the `prepend`, `title` and `append` slots to the VcsTreeNode component.
+   * @vue-prop {Array<import("./VcsTreeNode.vue").VcsTreeNodeItem>} items.
+   * @vue-prop {Array<import("./VcsTreeNode.vue").VcsTreeNodeItem>} opened - Array of name of opened nodes.
+   * @vue-prop {string} [itemChildren='children'] - The property key of the children.
+   * @vue-prop {boolean} [openAll=false] - Whether to open all root items on startup.
+   * @vue-prop {boolean} [openOnClick=false] - Whether to open items on title click.
+   * @vue-prop {string} [search=''] - The value used to filter the items.
+   * @vue-prop {boolean} [showSearchbar=false] - Whether there is a searchbar for this treeview.
+   * @vue-prop {function(import("./VcsTreeNode.vue").VcsTreeNodeItem, string|undefined):boolean}} [customFilter] - a function to customize filtering when searching.
+   * @vue-prop {string}  [searchbarPlaceholder] - Placeholder text for the searchbar, will be translated.
    */
   export default {
     name: 'VcsTreeview',
     components: {
-      VcsTreeviewTitle,
-      VIcon,
-      ImageElementInjector,
-      VcsActionButtonList,
       VcsTreeviewSearchbar,
-      VTreeview,
+      VcsTreeNode,
     },
     props: {
       items: {
         type: Array,
         default: () => [],
       },
+      opened: {
+        type: Array,
+        default: () => [],
+      },
+      itemChildren: {
+        type: String,
+        default: 'children',
+      },
+      openAll: {
+        type: Boolean,
+        default: false,
+      },
+      openOnClick: {
+        type: Boolean,
+        default: false,
+      },
       search: {
         type: String,
         default: '',
@@ -170,59 +89,78 @@
         type: String,
         default: undefined,
       },
+      /**
+       * @param {import("./VcsTreeNode.vue").VcsTreeNodeItem} item The item to filter.
+       * @param {string} search The query value.
+       */
+      customFilter: {
+        type: Function,
+        default: undefined,
+      },
     },
-    emits: ['update:search'],
+    emits: ['update:search', 'update:opened'],
     setup(props, { emit, slots }) {
+      const forwardSlots = getForwardSlots(slots);
       const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
+      const localOpenedItems = useProxiedComplexModel(props, 'opened', emit);
 
-      // TODO properly type the tree view item interface & export in index.d.ts
+      if ((props.openAll ?? false) !== false) {
+        localOpenedItems.value = props.items.map((item) => item.name);
+        watch(
+          () => props.items,
+          (items) => {
+            const newItems = items.filter(
+              (item) => !localOpenedItems.value.includes(item.name),
+            );
+            localOpenedItems.value.push(...newItems.map((item) => item.name));
+          },
+        );
+      }
 
-      const vm = getCurrentInstance().proxy;
-      /**
-       * @param {string} value
-       * @param {string} q
-       * @param {Object} item
-       * @returns {number}
-       */
-      const handleFilter = (value, q, item) => {
-        if (value == null || q == null) {
-          return -1;
+      function itemToggled(itemName) {
+        const idx = localOpenedItems.value.indexOf(itemName);
+        if (idx >= 0) {
+          localOpenedItems.value.splice(idx, 1);
+        } else {
+          localOpenedItems.value.push(itemName);
         }
-        const translatedTitle = item.title ? vm.$st(item.title) : item.value;
-        return translatedTitle
-          .toLocaleLowerCase()
-          .indexOf(q.toLocaleLowerCase());
-      };
+      }
 
-      const forwardSlots = getForwardSlots(slots, [
-        'append',
-        'title',
-        'prepend',
-      ]);
-      const iconSize = useIconSize();
       return {
-        iconSize,
         localSearchValue,
-        handleFilter,
+        localOpenedItems,
         forwardSlots,
-        itemClicked(name, event) {
-          const items = props.items.slice();
-          let item;
-          while (items.length > 0) {
-            item = items.pop();
-            if (item.name === name) {
-              break;
-            }
-            if (item.children?.length > 0) {
-              items.push(...item.children);
+        itemToggled,
+        itemClicked(item, event) {
+          if (item?.clickable) {
+            if (item?.clicked && !item?.disabled) {
+              item.clicked(event);
             }
-          }
-
-          if (item?.clicked && !item?.disabled) {
-            item.clicked(event);
+          } else if ((props.openOnClick ?? false) !== false) {
+            itemToggled(item.name);
           }
         },
       };
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  // Hide node component when not rendered (e.g. filtered by search)
+  .vcs-treeitem:not(:has(.vcs-tree-node)) {
+    display: none;
+  }
+  .vcs-treeitem:not(:last-child) {
+    border-bottom: 1px solid rgb(var(--v-theme-base-lighten-2));
+  }
+  .root-node {
+    :deep(.level-0) {
+      // Root Level Entries should be 40px high
+      min-height: calc(var(--v-vcs-font-size) * 2 + 14px) !important;
+    }
+    // Only Group Entries have a bold font
+    > :deep(.group) {
+      font-weight: 700 !important;
+    }
+  }
+</style>