@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/manager/collectionManager/collectionManager.d.ts

@@ -67,9 +67,10 @@ declare class CollectionManager implements ICollectionManager {
      */
     removed: VcsEvent<CollectionComponentClass<Object>>;
     /**
-     * @type {Array<string>}
+     * reactive ordered array of ids,
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    componentIds: Array<string>;
+    componentIds: import("vue").UnwrapRef<string[]>;
     /**
      * @type {Map<string, CollectionComponentClass<Object>>}
      * @private
@@ -111,7 +112,7 @@ declare class CollectionManager implements ICollectionManager {
      * @returns {CollectionComponentClass<T>[]}
      * @template {Object|import("@vcmap/core").VcsObject} T
      */
-    getCollection<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default>(collection: Collection<T>): CollectionComponentClass<T>[];
+    getCollection<T extends Object | import("@vcmap/core").VcsObject>(collection: Collection<T>): CollectionComponentClass<T>[];
     /**
      * adds a collectionComponent
      * @param {import("./collectionComponentClass.js").CollectionComponentClassOptions<T>} collectionComponentOptions
@@ -119,7 +120,7 @@ declare class CollectionManager implements ICollectionManager {
      * @returns {CollectionComponentClass<T>}
      * @template {Object|import("@vcmap/core").VcsObject} T
      */
-    add<T_1 extends Object | import("@vcmap/core/dist/src/vcsObject.js").default>(collectionComponentOptions: import("./collectionComponentClass.js").CollectionComponentClassOptions<T_1>, owner: string | symbol): CollectionComponentClass<T_1>;
+    add<T_1 extends Object | import("@vcmap/core").VcsObject>(collectionComponentOptions: import("./collectionComponentClass.js").CollectionComponentClassOptions<T_1>, owner: string | symbol): CollectionComponentClass<T_1>;
     /**
      * removes a CollectionComponentClass, Component will not be rendered anymore and will be destroyed. Add CollectionComponentClass again
      * to show the component again

package/src/manager/collectionManager/collectionManager.js

@@ -1,4 +1,5 @@
 import { VcsEvent, Collection } from '@vcmap/core';
+import { reactive } from 'vue';
 import { check, checkMaybe } from '@vcsuite/check';
 import { validateActions } from '../../components/lists/VcsActionList.vue';
 import CollectionComponentClass from './collectionComponentClass.js';
@@ -58,9 +59,10 @@ class CollectionManager {
      */
     this.removed = new VcsEvent();
     /**
-     * @type {Array<string>}
+     * reactive ordered array of ids,
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    this.componentIds = [];
+    this.componentIds = reactive([]);
     /**
      * @type {Map<string, CollectionComponentClass<Object>>}
      * @private

package/src/manager/collectionManager/editorCollectionComponentClass.d.ts

@@ -9,7 +9,7 @@
  * @template {Object|import("@vcmap/core").VcsObject} T
  * @returns {EditorCollectionComponentClass<T>}
  */
-export function makeEditorCollectionComponentClass<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default>(app: import("../../vcsUiApp.js").default, collectionComponent: CollectionComponentClass<T>, editingOptions: EditingOptions<T>, parentId?: string | undefined): EditorCollectionComponentClass<T>;
+export function makeEditorCollectionComponentClass<T extends Object | import("@vcmap/core").VcsObject>(app: import("../../vcsUiApp.js").default, collectionComponent: CollectionComponentClass<T>, editingOptions: EditingOptions<T>, parentId?: string | undefined): EditorCollectionComponentClass<T>;
 /**
  * @typedef {Omit<import("../window/windowManager.js").WindowComponentOptions,"id"|"parentId"|"slot">} EditorWindowComponentOptions
  */

package/src/manager/contextMenu/ContextMenuComponent.vue.d.ts

@@ -9,10 +9,10 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     close: () => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     actions: {
         type: ArrayConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/manager/panel/PanelComponent.vue.d.ts

@@ -10,10 +10,10 @@ declare const _default: import("vue").DefineComponent<{
     isBottom: import("vue").ComputedRef<boolean>;
     startResize(e: any): void;
     stopResize(): void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     panelState: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/manager/panel/PanelManagerComponent.vue

@@ -86,7 +86,10 @@
    */
   export default {
     name: 'VcsPanelManager',
-    components: { VcsMainMap, PanelComponent },
+    components: {
+      VcsMainMap,
+      PanelComponent,
+    },
     setup() {
       const app = inject('vcsApp');
       /** @type {PanelManager} */
@@ -185,9 +188,8 @@
         }
       };
 
-      const componentIdRef = ref(componentIds);
       watch(
-        () => [...componentIdRef.value],
+        () => [...componentIds],
         () => {
           updatePanelSizes(
             panelManager,
@@ -200,13 +202,13 @@
       const addMobileClass = computed(() => {
         return (
           getCurrentInstance().proxy.$vuetify.breakpoint.xs &&
-          componentIdRef.value.length > 0
+          componentIds.length > 0
         );
       });
 
       return {
         mainPanel,
-        componentIds: componentIdRef,
+        componentIds,
         getComponent: (id) => panelManager.get(id).component,
         getPosition,
         getStyles,

package/src/manager/panel/PanelManagerComponent.vue.d.ts

@@ -3,7 +3,7 @@
  */
 export function createMainPanel(): Partial<import("./panelManager.js").PanelComponent>;
 declare const _default: import("vue").DefineComponent<{}, {
-    mainPanel: Partial<import("./panelManager.js").PanelComponent>;
+    mainPanel: Partial<import("./panelManager.js", { with: { "resolution-mode": "import" } }).PanelComponent>;
     componentIds: PanelManager;
     getComponent: (id: any) => any;
     getPosition: (panelComponent: import("vue").DefineComponent<{
@@ -18,12 +18,12 @@ declare const _default: import("vue").DefineComponent<{}, {
         isBottom: import("vue").ComputedRef<boolean>;
         startResize(e: any): void;
         stopResize(): void;
-    }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         panelState: {
             type: ObjectConstructor;
             required: true;
         };
-    }>>, {}>) => PanelPosition | null;
+    }>>, {}, {}>) => PanelPosition | null;
     getStyles: (id: string) => import("vue").ComputedRef<Object>;
     getState: (id: string) => PanelState;
     getProps: (id: string) => Object;
@@ -32,5 +32,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     resizingFunction: () => void;
     close: (id: any) => void;
     addMobileClass: import("vue").ComputedRef<any>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/manager/panel/panelManager.d.ts

@@ -1,7 +1,7 @@
 /**
  * @typedef {Object} PanelComponentOptions
  * @property {string} [id] - Optional id, which will be set as HTML container ID. If not provided an uuid will be generated.
- * @property {import("vue").Component} [component] Optional component to be rendered in the panel.
+ * @property {import("vue").Component<unknown, unknown, unknown>} [component] Optional component to be rendered in the panel.
  * @property {Partial<PanelState>} [state]
  * @property {Partial<VerticalPanelPositionOptions|HorizontalPanelPositionOptions>} [position] Will be merged with default position for panel
  * @property {Object} [props]
@@ -19,7 +19,7 @@
 /**
  * @typedef {Object} PanelComponent
  * @property {string} id
- * @property {import("vue").Component} component
+ * @property {import("vue").Component<unknown, unknown, unknown>} component
  * @property {Partial<PanelState>} state
  * @property {Object} props
  * @property {Object} provides
@@ -118,7 +118,7 @@ export type PanelComponentOptions = {
     /**
      * Optional component to be rendered in the panel.
      */
-    component?: import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
+    component?: import("vue").Component<unknown, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined;
     state?: Partial<PanelState> | undefined;
     /**
      * Will be merged with default position for panel
@@ -156,7 +156,7 @@ export type PanelState = {
 };
 export type PanelComponent = {
     id: string;
-    component: import("vue").Component;
+    component: import("vue").Component<unknown, unknown, unknown>;
     state: Partial<PanelState>;
     props: Object;
     provides: Object;
@@ -251,9 +251,9 @@ declare class PanelManager implements IPanelManager {
     removed: import("@vcmap/core").VcsEvent<PanelComponent>;
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    componentIds: Array<string>;
+    componentIds: import("vue").UnwrapRef<string[]>;
     /**
      * @type {Map<PanelLocation, string>}
      * @private

package/src/manager/panel/panelManager.js

@@ -79,7 +79,7 @@ export const DefaultPanelPositions = {
 /**
  * @typedef {Object} PanelComponentOptions
  * @property {string} [id] - Optional id, which will be set as HTML container ID. If not provided an uuid will be generated.
- * @property {import("vue").Component} [component] Optional component to be rendered in the panel.
+ * @property {import("vue").Component<unknown, unknown, unknown>} [component] Optional component to be rendered in the panel.
  * @property {Partial<PanelState>} [state]
  * @property {Partial<VerticalPanelPositionOptions|HorizontalPanelPositionOptions>} [position] Will be merged with default position for panel
  * @property {Object} [props]
@@ -99,7 +99,7 @@ export const DefaultPanelPositions = {
 /**
  * @typedef {Object} PanelComponent
  * @property {string} id
- * @property {import("vue").Component} component
+ * @property {import("vue").Component<unknown, unknown, unknown>} component
  * @property {Partial<PanelState>} state
  * @property {Object} props
  * @property {Object} provides
@@ -151,9 +151,9 @@ class PanelManager {
     this.removed = new VcsEvent();
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    this.componentIds = [];
+    this.componentIds = reactive([]);
     /**
      * @type {Map<PanelLocation, string>}
      * @private

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -2,12 +2,11 @@
   <div v-if="orderedButtons.length > 0">
     <v-menu
       v-model="open"
-      @input="$emit('toggle', open)"
-      offset-y
-      :nudge-left="nudgeLeft"
+      @update:model-value="$emit('toggle', open)"
+      location="bottom center"
       z-index="0"
     >
-      <template #activator="{ on, attrs }">
+      <template #activator="{ props }">
         <VcsToolButton
           class="vcs-toolbox-toggle-button"
           width="48"
@@ -16,8 +15,7 @@
           :tooltip="group.title"
           :active="open || hasActiveAction"
           :color="hasActiveAction ? 'primary' : ''"
-          v-bind="attrs"
-          v-on="on"
+          v-bind="props"
         >
           <v-icon>{{ open ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
         </VcsToolButton>
@@ -25,13 +23,11 @@
 
       <v-toolbar
         id="vcs-toolbox-toolbar--secondary"
-        class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop"
+        class="mx-auto marginToTop px-1 rounded-b opacity-80 px-1"
         :height="40"
-        width="fit-content"
-        dense
       >
-        <v-toolbar-items class="w-full">
-          <div class="d-flex align-center justify-space-between w-full mx-1">
+        <v-toolbar-items class="w-100">
+          <div class="d-flex align-center justify-space-between w-100">
             <VcsToolButton
               v-for="{ id, action } in orderedButtons"
               :key="id"
@@ -48,20 +44,14 @@
     </v-menu>
   </div>
 </template>
-<style lang="scss">
-  .vcs-toolbox-2 {
-    .v-toolbar__content {
-      padding: 0;
-    }
-  }
-
+<style lang="scss" scoped>
   .marginToTop {
     margin-top: 3px;
   }
 </style>
 <script>
   import { computed, ref } from 'vue';
-  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/lib';
+  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { getComponentsByOrder } from './toolboxManager.js';
 
@@ -74,7 +64,6 @@
    * @vue-computed {Array<ButtonComponent>} buttons - Buttons of the group.
    * @vue-computed {Array<ButtonComponent>} orderedButtons - Buttons of the group sorted by owner.
    * @vue-computed {boolean} hasActiveAction - Whether the group has an active action.
-   * @vue-computed {number} nudgeLeft - offset of the dropdown toolbar to the left
    */
   export default {
     name: 'ToolboxActionGroup',
@@ -96,8 +85,7 @@
 
       const buttons = computed(() => {
         const { buttonManager } = props.group;
-        const buttonIds = ref(buttonManager.componentIds);
-        return buttonIds.value.map((id) => buttonManager.get(id));
+        return buttonManager.componentIds.map((id) => buttonManager.get(id));
       });
       const orderedButtons = computed(() =>
         getComponentsByOrder(buttons.value),
@@ -106,21 +94,9 @@
         orderedButtons.value.some((a) => a.action.active),
       );
 
-      /**
-       * v-menu auto prop is not working as expected.
-       * Workaround using hardcoded button sizes and paddings
-       * @type {ComputedRef<number>}
-       */
-      const nudgeLeft = computed(() => {
-        const toolboxBtnWidth = 42 + 8; // with padding
-        const menuBtnWidth = 48;
-        return buttons.value.length * (toolboxBtnWidth / 2) - menuBtnWidth / 2;
-      });
-
       return {
         open,
         orderedButtons,
-        nudgeLeft,
         hasActiveAction,
       };
     },

package/src/manager/toolbox/GroupToolboxComponent.vue.d.ts

@@ -5,13 +5,12 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     open: import("vue").Ref<boolean>;
-    orderedButtons: import("vue").ComputedRef<(import("../buttonManager.js").ButtonComponent | import("./toolboxManager.js").ToolboxComponent)[]>;
-    nudgeLeft: ComputedRef<number>;
+    orderedButtons: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
     hasActiveAction: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -1,8 +1,8 @@
 <template>
   <div
     v-if="group.action"
+    class="d-flex"
     :class="{ 'vcs-toolbox-action-select-button--active': open }"
-    style="width: fit-content"
   >
     <VcsToolButton
       :key="group.action.tools[group.action.currentIndex].name"
@@ -19,17 +19,15 @@
     />
     <v-menu
       v-model="open"
-      @input="$emit('toggle', open)"
-      offset-y
-      :nudge-left="nudgeLeft"
+      location="bottom center"
+      @update:model-value="$emit('toggle', open)"
       z-index="0"
     >
-      <template #activator="{ on, attrs }">
+      <template #activator="{ props }">
         <VcsToolButton
           :tooltip="group.action.title"
           :disabled="group.action.disabled"
-          v-bind="attrs"
-          v-on="on"
+          v-bind="props"
           class="vcs-toolbox-action-select"
           :min-width="16"
           :width="16"
@@ -39,13 +37,12 @@
       </template>
 
       <v-toolbar
-        class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop justify-center"
+        class="vcs-toolbox-2 mx-auto marginToTop rounded-b opacity-80 px-1"
         :height="40"
-        width="fit-content"
         dense
       >
-        <v-toolbar-items class="w-full">
-          <div class="d-flex align-center justify-space-between w-full mx-1">
+        <v-toolbar-items class="w-100">
+          <div class="d-flex align-center justify-space-between w-100">
             <VcsToolButton
               v-for="(item, index) in group.action.tools"
               :key="`${item.name}-${index}`"
@@ -61,48 +58,20 @@
     </v-menu>
   </div>
 </template>
-<style lang="scss">
-  @import '../../styles/shades.scss';
-
-  .vcs-toolbox-action-selected > .v-btn.vcs-button--large {
-    max-width: 40px;
-  }
-
-  .vcs-toolbox-action-select > .v-btn.vcs-button--large {
-    max-width: 8px;
-  }
-
-  .vcs-toolbox-action-select-button--active {
-    //border: 2px solid var(--v-shades-base);
-    border-radius: 4px;
-  }
-  .theme--light .vcs-toolbox-action-select-button--active {
-    background: map-get($shades, 'white');
-  }
-  .theme--dark .vcs-toolbox-action-select-button--active {
-    background: map-get($shades, 'black');
-  }
-
-  .vcs-toolbox-2 {
-    .v-toolbar__content {
-      padding: 0;
-    }
-  }
-
+<style lang="scss" scoped>
   .marginToTop {
     margin-top: 3px;
   }
 </style>
 <script>
-  import { ref, computed } from 'vue';
-  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/lib';
+  import { ref } from 'vue';
+  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
 
   /**
    * @description
    * A dynamic Toolbox Button rendering a selected item and a dropdown to select an item using {@link https://vuetifyjs.com/en/api/v-menu/|vuetify v-menu} and {@link VcsButton}.
    * @vue-prop {SelectToolboxComponent} group - A toolbox group of type 'select'.
-   * @vue-computed {number} nudgeLeft - offset of the dropdown toolbar to the left
    */
   export default {
     name: 'ToolboxActionSelect',
@@ -119,26 +88,11 @@
         required: true,
       },
     },
-    setup(props) {
+    setup() {
       const open = ref(false);
 
-      /**
-       * v-menu auto prop is not working as expected.
-       * Workaround using hardcoded button sizes and paddings
-       * @type {ComputedRef<number>}
-       */
-      const nudgeLeft = computed(() => {
-        const toolboxBtnWidth = 42 + 8; // with padding
-        const menuBtnWidth = 16;
-        return (
-          props.group.action.tools.length * (toolboxBtnWidth / 2) +
-          menuBtnWidth / 2
-        );
-      });
-
       return {
         open,
-        nudgeLeft,
       };
     },
   };

package/src/manager/toolbox/SelectToolboxComponent.vue.d.ts

@@ -5,11 +5,10 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     open: import("vue").Ref<boolean>;
-    nudgeLeft: ComputedRef<number>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/manager/toolbox/ToolboxManager.vue

@@ -1,22 +1,18 @@
 <template>
   <v-toolbar
-    v-if="
-      toolboxOpen && orderedGroups.length > 0 && $vuetify.breakpoint.mdAndUp
-    "
-    class="vcs-toolbox mx-auto v-sheet marginToTop"
+    v-if="toolboxOpen && orderedGroups.length > 0 && mdAndUp"
+    class="vcs-toolbox mx-auto marginToTop opacity-80"
     :class="{
       'rounded-b': !open,
-      toolbar__secondary: !isDefaultToolbox,
     }"
     :height="40"
     :style="{ zIndex }"
     @click.stop="bringToTop"
-    width="fit-content"
-    dense
+    style="width: fit-content"
   >
-    <v-toolbar-items class="w-full">
+    <v-toolbar-items class="w-100 px-4 gc-1">
       <div
-        class="d-flex align-center justify-space-between w-full mx-1"
+        class="d-flex align-center justify-space-between w-100"
         v-for="group in orderedGroups"
         :key="group.id"
       >
@@ -46,40 +42,15 @@
 </template>
 
 <style lang="scss" scoped>
-  .toolbar__secondary {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    &.vcs-toolbox.theme {
-      &--light {
-        background-color: var(--v-primary-lighten3) !important;
-      }
-      &--dark {
-        background-color: var(--v-primary-darken4) !important;
-      }
-    }
-    &.v-toolbar {
-      ::v-deep .v-toolbar__content {
-        padding: 0;
-      }
-    }
-  }
-
   .marginToTop {
     margin-top: 2px;
   }
-
-  .v-toolbar__items > div {
-    gap: 8px;
-    width: fit-content;
-  }
 </style>
 
 <script>
   import { inject, ref, computed, watch, onUnmounted } from 'vue';
-  import { ButtonLocation, vcsAppSymbol } from '@vcmap/ui';
-  import { VToolbar, VToolbarItems } from 'vuetify/lib';
+  import { useDisplay } from 'vuetify';
+  import { VToolbar, VToolbarItems } from 'vuetify/components';
   import {
     defaultToolboxName,
     getComponentsByOrder,
@@ -88,6 +59,8 @@
   import ToolboxActionSelect from './SelectToolboxComponent.vue';
   import ToolboxActionGroup from './GroupToolboxComponent.vue';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
+  import { vcsAppSymbol } from '../../pluginHelper.js';
+  import { ButtonLocation } from '../navbarManager.js';
 
   /**
    * @typedef {Object} ToolboxButtonGroup
@@ -122,9 +95,8 @@
     setup() {
       const app = inject('vcsApp');
 
-      const toolboxComponentIds = ref(app.toolboxManager.componentIds);
       const groups = computed(() => {
-        return toolboxComponentIds.value.map((id) =>
+        return app.toolboxManager.componentIds.map((id) =>
           app.toolboxManager.get(id),
         );
       });
@@ -210,7 +182,9 @@
         app.windowManager.bringWindowToTop('toolbox');
       };
 
+      const { mdAndUp } = useDisplay();
       return {
+        mdAndUp,
         toolboxOpen,
         orderedGroups,
         zIndex,

package/src/manager/toolbox/ToolboxManager.vue.d.ts

@@ -1,6 +1,7 @@
 declare const _default: import("vue").DefineComponent<{}, {
+    mdAndUp: import("vue").Ref<boolean>;
     toolboxOpen: import("vue").Ref<boolean>;
-    orderedGroups: import("vue").ComputedRef<(import("../buttonManager.js").ButtonComponent | import("./toolboxManager.js").ToolboxComponent)[]>;
+    orderedGroups: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
     zIndex: any;
     isDefaultToolbox: import("vue").ComputedRef<boolean>;
     ToolboxType: {
@@ -11,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     open: import("vue").Ref<boolean>;
     bringToTop: () => void;
     openGroup(group: any): void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;
 export type ToolboxButtonGroup = {
     id: string;

package/src/manager/toolbox/toolboxManager.d.ts

@@ -114,9 +114,9 @@ declare class ToolboxManager implements IToolboxManager {
     removed: import("@vcmap/core").VcsEvent<ToolboxComponent>;
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    componentIds: Array<string>;
+    componentIds: import("vue").UnwrapRef<string[]>;
     /**
      * @type {Map<string, ToolboxComponent>}
      * @private
@@ -131,7 +131,7 @@ declare class ToolboxManager implements IToolboxManager {
      * @type {VcsEvent<string>}
      */
     toolboxNameChanged: VcsEvent<string>;
-    set toolboxName(arg: string | symbol);
+    set toolboxName(name: string | symbol);
     get toolboxName(): string | symbol;
     setDefaultToolboxName(): void;
     /**

package/src/manager/toolbox/toolboxManager.js

@@ -204,10 +204,9 @@ class ToolboxManager {
     this.removed = new VcsEvent();
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    this.componentIds = [];
-
+    this.componentIds = reactive([]);
     /**
      * @type {Map<string, ToolboxComponent>}
      * @private