@vcmap/ui 6.1.0-rc.7 → 6.1.1

package/src/application/VcsMobileMenuList.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import { computed, inject } from 'vue';
+  import { inject } from 'vue';
   import { VDivider, VList, VListItem } from 'vuetify/components';
   import {
     ButtonLocation,
@@ -9,56 +9,48 @@
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
   import { getDataProtection, getImprint } from './uiConfigHelper.js';
   import { toolboxComponentId } from '../manager/toolbox/ToolboxManagerComponent.vue';
-  import { defaultContentTreeComponentId } from '../contentTree/contentTreeCollection.js';
-  import { legendComponentId } from './VcsApp.vue';
 
   const app = inject('vcsApp');
 
-  const mobileButtonComponents = computed(() =>
-    app.navbarManager.componentIds
-      .map((id) => app.navbarManager.get(id))
-      .filter((buttonComponent) => {
-        return buttonComponent[deviceSymbol].mobile;
-      }),
-  );
-
-  const getActions = (location) =>
-    computed(() =>
-      getActionsByLocation(
-        mobileButtonComponents.value,
-        location,
-        [...app.plugins].map((p) => p.name),
-      ),
-    );
+  const mobileButtonComponents = app.navbarManager.componentIds
+    .map((id) => app.navbarManager.get(id))
+    .filter((buttonComponent) => {
+      return buttonComponent[deviceSymbol].mobile;
+    });
 
   // Actions from the content overflow are put in Menu
-  const defaultContentTreeComponentIdAction = app.navbarManager.get(
-    defaultContentTreeComponentId,
-  ).action;
-  const legendComponentIdAction =
-    app.navbarManager.get(legendComponentId).action;
-  const contentOverflowActions = computed(() => {
-    return getActions(ButtonLocation.CONTENT).value.filter(
-      (action) =>
-        action.name !== defaultContentTreeComponentIdAction.name &&
-        action.name !== legendComponentIdAction.name,
-    );
-  });
+  const contentOverflowActions = getActionsByLocation(
+    mobileButtonComponents,
+    ButtonLocation.CONTENT,
+    [...app.plugins].map((p) => p.name),
+  )?.slice(2);
 
   const toolboxToggleAction = app.navbarManager.get(toolboxComponentId).action;
 
-  const toolboxOverflowActions = computed(() =>
-    getActions(ButtonLocation.TOOL).value.filter(
-      (action) => action.name !== toolboxToggleAction.name,
-    ),
-  );
+  const toolboxOverflowActions = getActionsByLocation(
+    mobileButtonComponents,
+    ButtonLocation.TOOL,
+    [...app.plugins].map((p) => p.name),
+  )?.filter((action) => action.name !== toolboxToggleAction.name);
 
   const mobileMenuActions = [
-    ...getActions(ButtonLocation.MENU).value,
-    ...getActions(ButtonLocation.SHARE).value,
-    ...getActions(ButtonLocation.PROJECT).value,
-    ...toolboxOverflowActions.value,
-    ...contentOverflowActions.value,
+    ...getActionsByLocation(
+      mobileButtonComponents,
+      ButtonLocation.MENU,
+      [...app.plugins].map((p) => p.name),
+    ),
+    ...getActionsByLocation(
+      mobileButtonComponents,
+      ButtonLocation.SHARE,
+      [...app.plugins].map((p) => p.name),
+    ),
+    ...getActionsByLocation(
+      mobileButtonComponents,
+      ButtonLocation.PROJECT,
+      [...app.plugins].map((p) => p.name),
+    ),
+    ...toolboxOverflowActions,
+    ...contentOverflowActions,
   ];
 
   const dataProtection = getDataProtection(app.uiConfig?.config);
@@ -70,6 +62,7 @@
     <div v-for="action in mobileMenuActions" :key="action.name">
       <v-list-item
         @click="action.callback()"
+        :data-action-name="action.name"
         :title="$t(action.name)"
         :prepend-icon="action.icon"
       >

package/src/application/VcsNavbar.vue

@@ -85,6 +85,7 @@
                       v-bind="props"
                       tooltip="navbar.share.tooltip"
                       icon="$vcsShare"
+                      id="vcs-navbar-share-menu-activator"
                     />
                   </template>
                   <VcsActionList
@@ -96,6 +97,7 @@
                 <VcsToolButton
                   class="d-flex"
                   v-if="searchAction"
+                  :data-action-name="searchAction.name"
                   :key="searchAction.name"
                   :tooltip="searchAction.title"
                   :icon="searchAction.icon"
@@ -108,6 +110,7 @@
                     <VcsToolButton
                       v-bind="props"
                       tooltip="navbar.menu.tooltip"
+                      id="vcs-navbar-burger-menu-activator"
                       icon="$vcsMenu"
                     />
                   </template>

package/src/application/VcsNavbarMobile.vue

@@ -1,7 +1,7 @@
 <template>
   <v-toolbar
     absolute
-    :density="density"
+    density="comfortable"
     elevation="0"
     class="px-4 vcs-navbar-mobile"
     :height="toolbarHeight"
@@ -14,6 +14,7 @@
               <VcsToolButton
                 v-if="mobileMenuAction"
                 :key="mobileMenuAction.name"
+                :data-action-name="mobileMenuAction.name"
                 :tooltip="mobileMenuAction.title"
                 :icon="mobileMenuAction.icon"
                 :active="mobileMenuAction.active"
@@ -22,6 +23,7 @@
               />
               <VcsToolButton
                 v-if="searchAction"
+                :data-action-name="searchAction.name"
                 :key="searchAction.name"
                 :tooltip="searchAction.title"
                 :icon="searchAction.icon"
@@ -76,7 +78,7 @@
 </style>
 
 <script>
-  import { inject, computed, onUnmounted, shallowRef } from 'vue';
+  import { computed, inject, onUnmounted, shallowRef } from 'vue';
   import {
     VCol,
     VContainer,
@@ -100,8 +102,6 @@
   import { WindowSlot } from '../manager/window/windowManager.js';
   import MapsGroupMobileMenu from './MapsGroupMobileMenu.vue';
   import { toolboxComponentId } from '../manager/toolbox/ToolboxManagerComponent.vue';
-  import { defaultContentTreeComponentId } from '../contentTree/contentTreeCollection.js';
-  import { legendComponentId } from './VcsApp.vue';
 
   export const mobileMenuListId = 'mobileMenuList';
 
@@ -148,10 +148,6 @@
         destroySearchAction();
       });
 
-      const density = computed(() => {
-        return 'comfortable';
-      });
-
       const fontSize = useFontSize();
       const toolbarHeight = computed(() => {
         return fontSize.value * 3 + 1;
@@ -178,16 +174,9 @@
         vcsAppSymbol,
       );
 
-      // only show the ContentTree and Legend actions, rest handled in VcsMobileMenuList
+      // only show the first two actions, rest handled in VcsMobileMenuList
       const contentActions = computed(() => {
-        return getActions(ButtonLocation.CONTENT).value.filter(
-          (action) =>
-            action.name ===
-              app.navbarManager.get(defaultContentTreeComponentId).action
-                .name ||
-            action.name ===
-              app.navbarManager.get(legendComponentId).action.name,
-        );
+        return getActions(ButtonLocation.CONTENT)?.value?.slice(0, 2);
       });
 
       const toolboxToggleAction = shallowRef(
@@ -210,7 +199,6 @@
         contentActions,
         toolboxToggleAction,
         searchAction,
-        density,
         toolbarHeight,
       };
     },

package/src/application/VcsNavbarMobile.vue.d.ts

@@ -37,7 +37,6 @@ declare const _default: import("vue").DefineComponent<{}, {
          */
         disabled?: boolean | undefined;
     } | null>;
-    density: import("vue").ComputedRef<string>;
     toolbarHeight: import("vue").ComputedRef<number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsPositionDisplay.vue

@@ -4,6 +4,7 @@
     :class="{ active: positionDisplayAction.active }"
   >
     <VcsButton
+      :data-action-name="positionDisplayAction.name"
       :tooltip="positionDisplayAction.title"
       :icon="positionDisplayAction.icon"
       @click.stop="positionDisplayAction.callback($event)"

package/src/callback/activateLayersCallback.js

@@ -1,3 +1,4 @@
+import { getLogger } from '@vcsuite/logger';
 import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
 
 /**
@@ -34,7 +35,14 @@ class ActivateLayersCallback extends VcsCallback {
     this._layerNames
       .map((n) => this._app.layers.getByKey(n))
       .filter((l) => l)
-      .forEach((l) => l.activate());
+      .forEach((l) =>
+        l.activate().catch((e) => {
+          getLogger('ActivateLayersCallback').error(
+            `Could not activate layer: ${l.name}`,
+            e,
+          );
+        }),
+      );
   }
 
   /**

package/src/callback/addModuleCallback.js

@@ -36,8 +36,9 @@ class AddModuleCallback extends VcsCallback {
     createModuleFromObjectOrUrl(this._module)
       .then((module) => {
         if (module) {
-          this._app.addModule(module);
+          return this._app.addModule(module);
         }
+        return undefined;
       })
       .catch((e) => {
         getLogger('addModuleCallback').error('Error adding module', e);

package/src/components/buttons/VcsActionButtonList.vue

@@ -10,6 +10,7 @@
         class="d-flex"
         v-for="(btn, index) in buttons"
         :key="`${btn.name}-${index}`"
+        :data-action-name="btn.name"
         :tooltip="btn.title"
         :tooltip-position="tooltipPosition"
         :icon="btn.icon"

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

@@ -15,12 +15,14 @@
     v-model="localModelValue"
   >
     <template #selection="{ item, index }">
-      <span v-if="index === 0" class="text-truncate w-100">
-        {{ $st(getTitle(item.raw)) }}
-      </span>
-      <span v-if="index === 1" class="text-no-wrap">
-        (+{{ additionalItems }})
-      </span>
+      <slot name="selection" v-bind="{ item, index }">
+        <span v-if="index === 0" class="text-truncate w-100">
+          {{ $st(getTitle(item.raw)) }}
+        </span>
+        <span v-if="index === 1" class="text-no-wrap">
+          (+{{ additionalItems }})
+        </span>
+      </slot>
     </template>
 
     <template #append-inner="scope">

package/src/components/icons/+all.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @param {string} color
+ * @returns {import("ol/style/Icon").Options}
+ */
+export function getColoredMapIcon(color: string): import("ol/style/Icon").Options;
 export const IconIds: string[];
 export const IconNames: string[];
 export default Icons;

package/src/components/icons/+all.js

@@ -497,3 +497,17 @@ export const IconNames = Object.keys(Icons).map((name) => {
   return `$${name}`;
 });
 export default Icons;
+
+/**
+ * @param {string} color
+ * @returns {import("ol/style/Icon").Options}
+ */
+export function getColoredMapIcon(color) {
+  return {
+    src: `data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='icon_24_poi' width='24' height='23.994' viewBox='0 0 24 23.994' sodipodi:docname='mapIcon.svg'%3E%3Cg id='Gruppe_1972' transform='translate(-571 -609.477)'%3E%3Cpath id='Pfad_773' d='M583,611a8.009,8.009,0,0,0-8,8c0,5.314,6.952,13.32,7.248,13.658a1,1,0,0,0,1.5,0c.3-.338,7.248-8.344,7.248-13.658A8.009,8.009,0,0,0,583,611Zm0,19.444c-2.18-2.685-6-8.09-6-11.444a6,6,0,0,1,12,0C589,622.354,585.18,627.759,583,630.444Z' fill='currentColor' /%3E%3Cpath id='Pfad_774' d='M583,615a4,4,0,1,0,4,4A4,4,0,0,0,583,615Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,583,621Z' fill='currentColor' /%3E%3C/g%3E%3Cpath fill='${encodeURIComponent(
+      color,
+    )}' d='M 11.672998,20.526286 C 8.5115524,16.526958 6.4310003,12.714969 6.0702695,10.260963 6.0109099,9.8571482 6.0115821,9.1201807 6.0716855,8.7084104 6.4424582,6.1682348 8.3335069,4.1603103 10.828528,3.6575721 c 1.904966,-0.383844 3.881822,0.1903514 5.289639,1.5364231 0.993092,0.9495349 1.610829,2.1488769 1.810148,3.5144152 0.0601,0.4117703 0.06077,1.1487378 0.0014,1.5525526 -0.357076,2.429138 -2.337816,6.081898 -5.487559,10.119822 -0.224045,0.287223 -0.415188,0.530536 -0.424763,0.540696 -0.0096,0.01016 -0.16456,-0.167678 -0.344411,-0.395195 z m 0.990366,-7.047968 c 0.894914,-0.146674 1.762065,-0.627065 2.349286,-1.301476 0.86707,-0.995812 1.194989,-2.3427819 0.880571,-3.6170541 -0.379849,-1.5394474 -1.596396,-2.6842781 -3.173401,-2.9863277 -0.368703,-0.070619 -1.070937,-0.070619 -1.43964,0 C 9.7056173,5.875042 8.48604,7.0227247 8.1067793,8.5597879 7.8410265,9.6368274 8.0329903,10.787029 8.6317551,11.705317 c 0.5717674,0.876885 1.4205679,1.474277 2.4457369,1.721329 0.47704,0.114961 1.079877,0.134602 1.585872,0.05167 z' id='path1432' /%3E%3C/svg%3E`,
+    scale: 1,
+    color,
+  };
+}

package/src/components/lists/VcsActionList.vue

@@ -2,6 +2,7 @@
   <v-list v-if="actions.length > 0" rounded class="vcs-action-list">
     <v-list-item
       v-for="(action, index) in actions"
+      :data-action-name="action.name"
       :key="`${action.name}-${index}`"
       :class="action.active ? 'text-primary' : ''"
       :disabled="action.disabled || disabled"

package/src/components/lists/VcsGroupedList.vue

@@ -142,7 +142,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="vcs-grouped-list">
     <VcsTreeviewSearchbar
       v-if="searchable"
       :placeholder="searchbarPlaceholder"
@@ -156,6 +156,7 @@
     >
       <vcs-expansion-panel
         v-for="(group, i) in groups"
+        :data-group-name="group.name"
         :key="i"
         :value="group.name"
         :disabled="group.disabled"

package/src/components/lists/VcsListItemComponent.vue

@@ -93,6 +93,7 @@
     :disabled="item.disabled"
     v-bind="$attrs"
     class="vcs-list-item-component"
+    :data-list-item-name="item.name"
   >
     <template #prepend="scope">
       <slot name="prepend" v-bind="scope">

package/src/components/lists/VcsTreeNode.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="vcs-tree-node" v-if="matchFilter">
+  <div
+    class="vcs-tree-node"
+    v-if="matchFilter"
+    :data-tree-item-name="item.name"
+  >
     <v-row
       no-gutters
       class="treenode flex-nowrap text-truncate"

package/src/components/lists/VcsTreeview.vue

@@ -33,6 +33,7 @@
 <script>
   import { watch } from 'vue';
   import { useDisplay } from 'vuetify';
+  import { getLogger } from '@vcsuite/logger';
   import {
     useProxiedAtomicModel,
     useProxiedComplexModel,
@@ -114,7 +115,10 @@
         [() => props.items, () => props.openAll],
         () => {
           if (props.openAll) {
-            localOpenedItems.value = [...props.items.map((item) => item.name)];
+            const newItems = props.items
+              .map((item) => item.name)
+              .filter((name) => !localOpenedItems.value.includes(name));
+            localOpenedItems.value.push(...newItems);
           }
         },
         {
@@ -141,7 +145,15 @@
         itemClicked(item, event) {
           if (item?.clickable) {
             if (item?.clicked && !item?.disabled) {
-              item.clicked(event);
+              const p = item.clicked(event);
+              if (p instanceof Promise) {
+                p.catch((e) => {
+                  getLogger('VcsTreeview.vue').error(
+                    `Tree view item failed to click ${item.name}`,
+                    e,
+                  );
+                });
+              }
             }
           } else if (
             (props.openOnClick ?? false) !== false &&

package/src/components/style/{MenuWrapper.vue → StyleMenuWrapper.vue}

@@ -5,6 +5,7 @@
         :model-value="!!modelValue"
         @update:modelValue="handleCheckbox"
         :disabled="disabled"
+        class="pr-1"
       />
       <v-menu
         :close-on-content-click="false"
@@ -73,7 +74,7 @@
    * @vue-prop {boolean} [disabled=false] - Disable the input
    */
   export default {
-    name: 'MenuWrapper',
+    name: 'StyleMenuWrapper',
     components: {
       VSheet,
       VMenu,

package/src/components/style/VcsFillMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuWrapper
+  <StyleMenuWrapper
     class="vcs-fill-menu"
     :value-fallback="{ color: [255, 255, 255, 1] }"
     name="components.style.fill"
@@ -11,7 +11,7 @@
     <template #content>
       <VcsFillSelector v-bind="{ ...$attrs, ...$props }" />
     </template>
-  </MenuWrapper>
+  </StyleMenuWrapper>
 </template>
 
 <script>
@@ -19,7 +19,7 @@
   import { VSheet } from 'vuetify/components';
   import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsFillSelector from './VcsFillSelector.vue';
-  import MenuWrapper from './MenuWrapper.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
 
   /**
@@ -33,7 +33,7 @@
     components: {
       VSheet,
       VcsFillSelector,
-      MenuWrapper,
+      StyleMenuWrapper,
     },
     props: {
       modelValue: {

package/src/components/style/VcsImageMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuWrapper
+  <StyleMenuWrapper
     class="vcs-image-menu"
     :value-fallback="{
       radius: 10,
@@ -21,13 +21,13 @@
         class="pb-2"
       />
     </template>
-  </MenuWrapper>
+  </StyleMenuWrapper>
 </template>
 
 <script>
   import { onMounted, ref, watch } from 'vue';
   import { useProxiedAtomicModel } from '../modelHelper.js';
-  import MenuWrapper from './MenuWrapper.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.vue';
   import VcsImageSelector, { drawImageStyle } from './VcsImageSelector.vue';
 
   /**
@@ -37,7 +37,7 @@
   export default {
     name: 'VcsImageMenu',
     components: {
-      MenuWrapper,
+      StyleMenuWrapper,
       VcsImageSelector,
     },
     props: {

package/src/components/style/VcsStrokeMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuWrapper
+  <StyleMenuWrapper
     class="vcs-stroke-menu"
     :value-fallback="{ color: [0, 0, 0, 1], width: 1 }"
     name="components.style.stroke"
@@ -18,7 +18,7 @@
     <template #content>
       <VcsStrokeSelector v-bind="{ ...$attrs, ...$props }" />
     </template>
-  </MenuWrapper>
+  </StyleMenuWrapper>
 </template>
 
 <script>
@@ -26,7 +26,7 @@
   import { VSheet } from 'vuetify/components';
   import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsStrokeSelector from './VcsStrokeSelector.vue';
-  import MenuWrapper from './MenuWrapper.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
 
   /**
@@ -40,7 +40,7 @@
     components: {
       VSheet,
       VcsStrokeSelector,
-      MenuWrapper,
+      StyleMenuWrapper,
     },
     props: {
       modelValue: {

package/src/components/style/VcsTextMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuWrapper
+  <StyleMenuWrapper
     class="vcs-text-menu"
     :value-fallback="fallbackStyle"
     name="components.style.text"
@@ -13,14 +13,14 @@
     <template #content>
       <VcsTextSelector v-bind="{ ...$attrs, ...$props }" />
     </template>
-  </MenuWrapper>
+  </StyleMenuWrapper>
 </template>
 
 <script>
   import { computed } from 'vue';
   import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsTextSelector from './VcsTextSelector.vue';
-  import MenuWrapper from './MenuWrapper.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.vue';
   import { rgbaObjectToString, useColorObject } from './composables.js';
 
   export const fallbackStyle = {
@@ -38,7 +38,7 @@
   export default {
     name: 'VcsTextMenu',
     components: {
-      MenuWrapper,
+      StyleMenuWrapper,
       VcsTextSelector,
     },
     props: {

package/src/contentTree/LayerTree.vue

@@ -16,12 +16,10 @@
 </template>
 
 <script>
-  import { inject, ref, watch } from 'vue';
+  import { inject, computed } from 'vue';
   import { VSheet } from 'vuetify/components';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
-  /** The open state Symbol of the ContentTree */
-  export const openStateMapSymbol = Symbol('openStateMap');
   /**
    * @description
    * Implements Treeview and shows content tree
@@ -37,52 +35,16 @@
     },
     setup(props) {
       const app = inject('vcsApp');
-      const open = ref(app.contentTree.getTreeOpenState(props.windowState.id));
-      const tree = app.contentTree.getComputedVisibleTree(props.windowState.id);
-
-      function getWithVisibleChildren(item) {
-        return [
-          item.name,
-          ...(item.visibleChildren
-            ?.map((c) => getWithVisibleChildren(c))
-            ?.flat() ?? []),
-        ];
-      }
 
-      if (!app.contentTree[openStateMapSymbol]) {
-        app.contentTree[openStateMapSymbol] = new Map();
-      }
-      /**
-       * @type {Map<string, string[]>}
-       */
-      const openStateMap = app.contentTree[openStateMapSymbol];
-      // watch for new visible children, which should start init open
-      watch(
-        tree,
-        (value, oldValue) => {
-          if (openStateMap.has(app.maps.activeMap?.name)) {
-            open.value = openStateMap.get(app.maps.activeMap?.name);
-          } else {
-            const items = [...app.contentTree]
-              .filter((i) => i.initOpen && i.getTreeViewItem().visible)
-              .map(({ name }) => name);
-            const oldValues = oldValue
-              ? oldValue.map(getWithVisibleChildren).flat()
-              : [];
-            const changed = items.filter(
-              (name) => !oldValues.includes(name) && !open.value.includes(name),
-            );
-            open.value.push(...changed);
-          }
+      const open = computed({
+        get: () => app.contentTree.getTreeOpenState(props.windowState.id),
+        set: (value) => {
+          app.contentTree
+            .getTreeOpenState(props.windowState.id)
+            .splice(0, Infinity, ...value);
         },
-        { immediate: true },
-      );
-
-      watch(open, () => {
-        if (app.maps.activeMap) {
-          openStateMap.set(app.maps.activeMap.name, [...open.value]);
-        }
       });
+      const tree = app.contentTree.getComputedVisibleTree(props.windowState.id);
 
       return {
         tree,

package/src/contentTree/LayerTree.vue.d.ts

@@ -1,5 +1,3 @@
-/** The open state Symbol of the ContentTree */
-export const openStateMapSymbol: unique symbol;
 declare const _default: import("vue").DefineComponent<{
     windowState: {
         type: ObjectConstructor;
@@ -7,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     tree: any;
-    open: import("vue").Ref<any>;
+    open: import("vue").WritableComputedRef<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {
         type: ObjectConstructor;

package/src/contentTree/contentTreeCollection.d.ts

@@ -78,6 +78,12 @@ declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
      * @private
      */
     private _setTreeView;
+    /**
+     * @param {ContentTreeItem} item
+     * @returns {string}
+     * @private
+     */
+    private _getSubtreeIdForItem;
     /**
      * Returns all managed subtrees. Entries are not persisted and will change, if the trees get recalculated.
      * @type {import("vue").Ref<Map<string, import("./contentTreeItem.js").TreeViewItem>>}
@@ -107,6 +113,7 @@ declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
      */
     getChildrenForSubTree(id: string): Array<ContentTreeItem>;
     /**
+     * This returns a proxy to the subtrees open state. You should mutate this array in place.
      * @param {string} id
      * @returns {Array<string>}
      */