@vcmap/ui 6.0.11 → 6.1.0-rc.1

package/src/components/lists/VcsTreeview.vue

@@ -1,163 +1,80 @@
 <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"
+        :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 {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: '',
@@ -171,58 +88,71 @@
         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(name, state) {
+        if (state) {
+          localOpenedItems.value.push(name);
+        } else {
+          const idx = localOpenedItems.value.indexOf(name);
+          if (idx >= 0) {
+            localOpenedItems.value.splice(idx, 1);
+          }
         }
-        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, !localOpenedItems.value.includes(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>

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

@@ -3,6 +3,22 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
+    opened: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    itemChildren: {
+        type: StringConstructor;
+        default: string;
+    };
+    openAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    openOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     search: {
         type: StringConstructor;
         default: string;
@@ -16,16 +32,32 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    iconSize: import("vue").ComputedRef<number>;
     localSearchValue: import("vue").Ref<any>;
-    handleFilter: (value: string, q: string, item: Object) => number;
+    localOpenedItems: import("vue").Ref<any>;
     forwardSlots: string[];
-    itemClicked(name: any, event: any): void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:search"[], "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    itemToggled: (name: any, state: any) => void;
+    itemClicked(item: any, event: any): void;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:opened" | "update:search")[], "update:opened" | "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: ArrayConstructor;
         default: () => never[];
     };
+    opened: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    itemChildren: {
+        type: StringConstructor;
+        default: string;
+    };
+    openAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    openOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     search: {
         type: StringConstructor;
         default: string;
@@ -39,10 +71,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>> & {
+    "onUpdate:opened"?: ((...args: any[]) => any) | undefined;
     "onUpdate:search"?: ((...args: any[]) => any) | undefined;
 }, {
     search: string;
+    openOnClick: boolean;
     items: unknown[];
+    opened: unknown[];
+    itemChildren: string;
+    openAll: boolean;
     showSearchbar: boolean;
     searchbarPlaceholder: string;
 }, {}>;

package/src/components/lists/VcsTreeviewTitle.vue

@@ -8,6 +8,10 @@
       type: Object,
       default: undefined,
     },
+    cursorPointer: {
+      type: Boolean,
+      default: false,
+    },
   });
 
   const titleParent = ref();
@@ -23,14 +27,17 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
 </style>
 <template>
   <div
-    class="title-parent pr-2 vcs-treeview-title"
+    class="title-parent pr-2 vcs-treeview-title w-100"
+    :class="{ 'cursor-pointer': cursorPointer }"
     ref="titleParent"
-    @click.stop="item.clicked && !item.disabled && item.clicked($event)"
   >
-    <span>
+    <span class="w-100">
       {{ $st(item.title || item.name) }}
     </span>
     <v-tooltip v-if="tooltip" activator="parent">

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

@@ -1,6 +1,8 @@
 declare const _default: import("vue").DefineComponent<{}, {
+    cursorPointer: boolean;
     item?: Record<string, any> | undefined;
     $props: {
+        readonly cursorPointer?: boolean | undefined;
         readonly item?: Record<string, any> | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

package/src/featureInfo/BalloonComponent.vue

@@ -1,5 +1,8 @@
 <template>
-  <v-card class="mx-auto elevation-0 balloon-component" v-if="position">
+  <v-sheet
+    class="balloon-component d-flex flex-column flex-grow-1"
+    v-if="position"
+  >
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
       <v-list-item class="px-1">
         <template #prepend="prependScope">
@@ -32,21 +35,17 @@
 
     <v-divider />
 
-    <v-card
-      class="overflow-y-auto py-2 elevation-0"
-      :max-height="maxHeight"
-      color="transparent"
+    <div
+      class="overflow-x-hidden overflow-y-auto d-flex flex-column flex-grow-1"
     >
       <slot :attrs="{ ...$props, ...$attrs }">
-        <v-list
-          v-for="(value, key, index) in attributes"
-          :key="`attribute-${index}`"
-          color="transparent"
-        >
-          <v-list-item class="px-2">
-            <v-list-item-title>
-              {{ $st(key) }}
-            </v-list-item-title>
+        <v-list color="transparent" class="py-2">
+          <v-list-item
+            v-for="(value, key, index) in attributes"
+            :key="`attribute-${index}`"
+            class="px-2"
+            :title="$st(key)"
+          >
             <v-list-item-subtitle
               :tag="getTag(tags, key)"
               v-bind="getTagOptions(tags, key)"
@@ -56,13 +55,13 @@
           </v-list-item>
         </v-list>
       </slot>
-    </v-card>
-  </v-card>
+    </div>
+  </v-sheet>
 </template>
 <script>
-  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+  import { inject, onMounted, onUnmounted, watch } from 'vue';
   import {
-    VCard,
+    VSheet,
     VDivider,
     VIcon,
     VList,
@@ -70,10 +69,6 @@
     VListItemSubtitle,
     VListItemTitle,
   } from 'vuetify/components';
-  import {
-    getTargetSize,
-    posToNumber,
-  } from '../manager/window/windowHelper.js';
   import { setupBalloonPositionListener } from './balloonHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import { getTag, getTagOptions } from '../components/tables/VcsTable.vue';
@@ -97,7 +92,7 @@
     name: 'BalloonComponent',
     components: {
       VcsButton,
-      VCard,
+      VSheet,
       VList,
       VListItem,
       VIcon,
@@ -134,28 +129,6 @@
     setup(props, { attrs }) {
       const app = inject('vcsApp');
       const windowId = attrs['window-state'].id;
-      function getMaxHeight() {
-        if (app.windowManager.get(windowId)?.position?.maxHeight) {
-          return (
-            posToNumber(
-              app.windowManager.get(windowId).position.maxHeight,
-              'maxHeight',
-              getTargetSize(app.maps.target),
-            ) - 49 // 44px header offset with padding 5px
-          );
-        }
-        if (app.windowManager.get(windowId)?.position?.height) {
-          return (
-            posToNumber(
-              app.windowManager.get(windowId).position.height,
-              'height',
-              getTargetSize(app.maps.target),
-            ) - 49 // 44px header offset with padding 5px
-          );
-        }
-        return 250;
-      }
-      const maxHeight = ref(getMaxHeight());
 
       let balloonPositionListener = null;
       const destroyListener = () => {
@@ -181,7 +154,6 @@
             windowId,
             props.position,
           );
-          maxHeight.value = getMaxHeight();
         },
       );
 
@@ -199,7 +171,6 @@
         close,
         getTag,
         getTagOptions,
-        maxHeight,
       };
     },
   };

package/src/featureInfo/BalloonComponent.vue.d.ts

@@ -28,7 +28,6 @@ declare const _default: import("vue").DefineComponent<{
     close: () => void;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;
-    maxHeight: import("vue").Ref<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     featureId: {
         type: StringConstructor;

package/src/featureInfo/IframeComponent.vue

@@ -2,17 +2,10 @@
   <iframe
     :src="src"
     :title="title"
-    :style="{ height, width }"
-    class="iframe-component"
+    class="h-100 w-100 border-0 d-block flex-grow-1"
   />
 </template>
 <script>
-  import { inject } from 'vue';
-  import {
-    getTargetSize,
-    posToNumber,
-  } from '../manager/window/windowHelper.js';
-
   /**
    * @description An iframe component
    * @vue-prop {string} src - Specifies the address of the document to embed in the <iframe>
@@ -38,30 +31,6 @@
         default: () => {},
       },
     },
-    setup(props, { attrs }) {
-      const app = inject('vcsApp');
-      let { height, width } = app.windowManager.get(
-        attrs['window-state'].id,
-      ).position;
-
-      // set iframe size to absolute px values
-      if (app.maps.target) {
-        const targetSize = getTargetSize(app.maps.target);
-        const heightNumber = posToNumber(height, 'height', targetSize);
-        if (heightNumber) {
-          height = `${heightNumber - 36}px`; // 32px header height + 4px margin
-        }
-        const widthNumber = posToNumber(width, 'width', targetSize);
-        if (widthNumber) {
-          width = `${widthNumber}px`;
-        }
-      }
-
-      return {
-        height,
-        width,
-      };
-    },
   };
 </script>
 

package/src/featureInfo/IframeComponent.vue.d.ts

@@ -14,10 +14,7 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: () => void;
     };
-}, {
-    height: any;
-    width: any;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     src: {
         type: StringConstructor;
         required: true;

package/src/i18n/de.d.ts

@@ -147,6 +147,7 @@ declare namespace messages {
         }
     }
     export namespace navigation {
+        let rotateButton: string;
         let obliqueLeftTooltip: string;
         let obliqueRightTooltip: string;
         let zoomInTooltip: string;

package/src/i18n/de.js

@@ -46,6 +46,7 @@ const messages = {
     },
   },
   navigation: {
+    rotateButton: 'Ansicht drehen',
     obliqueLeftTooltip: 'Ansicht nach links drehen',
     obliqueRightTooltip: 'Ansicht nach rechts drehen',
     zoomInTooltip: 'Hineinzoomen',

package/src/i18n/en.d.ts

@@ -147,6 +147,7 @@ declare namespace messages {
         }
     }
     export namespace navigation {
+        let rotateButton: string;
         let obliqueLeftTooltip: string;
         let obliqueRightTooltip: string;
         let zoomInTooltip: string;

package/src/i18n/en.js

@@ -46,6 +46,7 @@ const messages = {
     },
   },
   navigation: {
+    rotateButton: 'Rotate view',
     obliqueLeftTooltip: 'Rotate view to left',
     obliqueRightTooltip: 'Rotate view to right',
     zoomInTooltip: 'Zoom in',