@vcmap/ui 5.0.0-rc.12 → 5.0.0-rc.13

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui.9eb282.js";
+export * from "./ui.3c2933.js";

package/dist/assets/vue.js

@@ -1,2 +1,2 @@
-export * from "./vue.65d93f.js";
-export { default } from "./vue.65d93f.js";
+export * from "./vue.c897fc.js";
+export { default } from "./vue.c897fc.js";

package/dist/assets/{vuetify.149dde.js → vuetify.147c3a.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.149dde.css');var Qr=Object.defineProperty,Jr=Object.defineProperties;var to=Object.getOwnPropertyDescriptors;var oe=Object.getOwnPropertySymbols;var Ki=Object.prototype.hasOwnProperty,Xi=Object.prototype.propertyIsEnumerable;var Ui=(t,e,i)=>e in t?Qr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i,s=(t,e)=>{for(var i in e||(e={}))Ki.call(e,i)&&Ui(t,i,e[i]);if(oe)for(var i of oe(e))Xi.call(e,i)&&Ui(t,i,e[i]);return t},h=(t,e)=>Jr(t,to(e));var q=(t,e)=>{var i={};for(var a in t)Ki.call(t,a)&&e.indexOf(a)<0&&(i[a]=t[a]);if(t!=null&&oe)for(var a of oe(t))e.indexOf(a)<0&&Xi.call(t,a)&&(i[a]=t[a]);return i};import _ from"./vue.65d93f.js";var qd=(()=>`.theme--light.v-application{background:#FFFFFF;color:#000000de}.theme--light.v-application .text--primary{color:#000000de!important}.theme--light.v-application .text--secondary{color:#0009!important}.theme--light.v-application .text--disabled{color:#00000061!important}.theme--dark.v-application{background:#121212;color:#fff}.theme--dark.v-application .text--primary{color:#fff!important}.theme--dark.v-application .text--secondary{color:#ffffffb3!important}.theme--dark.v-application .text--disabled{color:#ffffff80!important}.v-application{display:flex;position:relative}.v-application a{cursor:pointer}.v-application--is-rtl{direction:rtl}.v-application--wrap{flex:1 1 auto;backface-visibility:hidden;display:flex;flex-direction:column;min-height:100vh;max-width:100%;position:relative}@-moz-document url-prefix(){@media print{.v-application,.v-application--wrap{display:block}}}
+} await loadCss('./assets/vuetify.147c3a.css');var Qr=Object.defineProperty,Jr=Object.defineProperties;var to=Object.getOwnPropertyDescriptors;var oe=Object.getOwnPropertySymbols;var Ki=Object.prototype.hasOwnProperty,Xi=Object.prototype.propertyIsEnumerable;var Ui=(t,e,i)=>e in t?Qr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i,s=(t,e)=>{for(var i in e||(e={}))Ki.call(e,i)&&Ui(t,i,e[i]);if(oe)for(var i of oe(e))Xi.call(e,i)&&Ui(t,i,e[i]);return t},h=(t,e)=>Jr(t,to(e));var q=(t,e)=>{var i={};for(var a in t)Ki.call(t,a)&&e.indexOf(a)<0&&(i[a]=t[a]);if(t!=null&&oe)for(var a of oe(t))e.indexOf(a)<0&&Xi.call(t,a)&&(i[a]=t[a]);return i};import _ from"./vue.c897fc.js";var qd=(()=>`.theme--light.v-application{background:#FFFFFF;color:#000000de}.theme--light.v-application .text--primary{color:#000000de!important}.theme--light.v-application .text--secondary{color:#0009!important}.theme--light.v-application .text--disabled{color:#00000061!important}.theme--dark.v-application{background:#121212;color:#fff}.theme--dark.v-application .text--primary{color:#fff!important}.theme--dark.v-application .text--secondary{color:#ffffffb3!important}.theme--dark.v-application .text--disabled{color:#ffffff80!important}.v-application{display:flex;position:relative}.v-application a{cursor:pointer}.v-application--is-rtl{direction:rtl}.v-application--wrap{flex:1 1 auto;backface-visibility:hidden;display:flex;flex-direction:column;min-height:100vh;max-width:100%;position:relative}@-moz-document url-prefix(){@media print{.v-application,.v-application--wrap{display:block}}}
 `)();const je=_.extend().extend({name:"themeable",provide(){return{theme:this.themeableProvide}},inject:{theme:{default:{isDark:!1}}},props:{dark:{type:Boolean,default:null},light:{type:Boolean,default:null}},data(){return{themeableProvide:{isDark:!1}}},computed:{appIsDark(){return this.$vuetify.theme.dark||!1},isDark(){return this.dark===!0?!0:this.light===!0?!1:this.theme.isDark},themeClasses(){return{"theme--dark":this.isDark,"theme--light":!this.isDark}},rootIsDark(){return this.dark===!0?!0:this.light===!0?!1:this.appIsDark},rootThemeClasses(){return{"theme--dark":this.rootIsDark,"theme--light":!this.rootIsDark}}},watch:{isDark:{handler(t,e){t!==e&&(this.themeableProvide.isDark=this.isDark)},immediate:!0}}});var y=je;function qi(t){const e=s(s({},t.props),t.injections),i=je.options.computed.isDark.call(e);return je.options.computed.themeClasses.call({isDark:i})}function v(...t){return _.extend({mixins:t})}var eo=v(y).extend({name:"v-app",props:{dark:{type:Boolean,default:void 0},id:{type:String,default:"app"},light:{type:Boolean,default:void 0}},computed:{isDark(){return this.$vuetify.theme.dark}},beforeCreate(){if(!this.$vuetify||this.$vuetify===this.$root)throw new Error("Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object")},render(t){const e=t("div",{staticClass:"v-application--wrap"},this.$slots.default);return t("div",{staticClass:"v-application",class:s({"v-application--is-rtl":this.$vuetify.rtl,"v-application--is-ltr":!this.$vuetify.rtl},this.themeClasses),attrs:{"data-app":!0},domProps:{id:this.id}},[e])}}),Zd=(()=>`.theme--light.v-app-bar.v-toolbar.v-sheet{background-color:#f5f5f5}.theme--dark.v-app-bar.v-toolbar.v-sheet{background-color:#272727}.v-sheet.v-app-bar.v-toolbar{border-radius:0}.v-sheet.v-app-bar.v-toolbar:not(.v-sheet--outlined){box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.v-sheet.v-app-bar.v-toolbar.v-sheet--shaped{border-radius:24px 0}.v-app-bar:not([data-booted=true]){transition:none!important}.v-app-bar.v-app-bar--fixed{position:fixed;top:0;z-index:5}.v-app-bar.v-app-bar.v-app-bar--hide-shadow{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f!important}.v-app-bar--fade-img-on-scroll .v-toolbar__image .v-image__image{transition:.4s opacity cubic-bezier(.4,0,.2,1)}.v-app-bar.v-toolbar--prominent.v-app-bar--shrink-on-scroll .v-toolbar__image{will-change:opacity}.v-app-bar.v-toolbar--prominent.v-app-bar--shrink-on-scroll.v-app-bar--collapse-on-scroll .v-toolbar__extension{display:none}.v-app-bar.v-toolbar--prominent.v-app-bar--shrink-on-scroll.v-app-bar--is-scrolled .v-toolbar__title{padding-top:9px}.v-app-bar.v-toolbar--prominent.v-app-bar--shrink-on-scroll.v-app-bar--is-scrolled:not(.v-app-bar--bottom) .v-toolbar__title{padding-bottom:9px}.v-app-bar.v-app-bar--shrink-on-scroll .v-toolbar__title{font-size:inherit}.v-app-bar-title__placeholder,.v-app-bar-title__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v-app-bar-title__content{position:absolute}
 `)(),Qd=(()=>`.theme--light.v-toolbar.v-sheet{background-color:#fff}.theme--dark.v-toolbar.v-sheet{background-color:#272727}.v-sheet.v-toolbar{border-radius:0}.v-sheet.v-toolbar:not(.v-sheet--outlined){box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.v-sheet.v-toolbar.v-sheet--shaped{border-radius:24px 0}.v-toolbar{contain:layout;display:block;flex:1 1 auto;max-width:100%;transition:.2s cubic-bezier(.4,0,.2,1) transform,.2s cubic-bezier(.4,0,.2,1) background-color,.2s cubic-bezier(.4,0,.2,1) left,.2s cubic-bezier(.4,0,.2,1) right,.28s cubic-bezier(.4,0,.2,1) box-shadow,.25s cubic-bezier(.4,0,.2,1) max-width,.25s cubic-bezier(.4,0,.2,1) width;position:relative;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.v-toolbar .v-input{padding-top:0;margin-top:0}.v-toolbar__content,.v-toolbar__extension{padding:4px 16px}.v-toolbar__content .v-btn.v-btn--icon.v-size--default,.v-toolbar__extension .v-btn.v-btn--icon.v-size--default{height:48px;width:48px}.v-application--is-ltr .v-toolbar__content>.v-btn.v-btn--icon:first-child,.v-application--is-ltr .v-toolbar__extension>.v-btn.v-btn--icon:first-child{margin-left:-12px}.v-application--is-rtl .v-toolbar__content>.v-btn.v-btn--icon:first-child,.v-application--is-rtl .v-toolbar__extension>.v-btn.v-btn--icon:first-child{margin-right:-12px}.v-application--is-ltr .v-toolbar__content>.v-btn.v-btn--icon:first-child+.v-toolbar__title,.v-application--is-ltr .v-toolbar__extension>.v-btn.v-btn--icon:first-child+.v-toolbar__title{padding-left:20px}.v-application--is-rtl .v-toolbar__content>.v-btn.v-btn--icon:first-child+.v-toolbar__title,.v-application--is-rtl .v-toolbar__extension>.v-btn.v-btn--icon:first-child+.v-toolbar__title{padding-right:20px}.v-application--is-ltr .v-toolbar__content>.v-btn.v-btn--icon:last-child,.v-application--is-ltr .v-toolbar__extension>.v-btn.v-btn--icon:last-child{margin-right:-12px}.v-application--is-rtl .v-toolbar__content>.v-btn.v-btn--icon:last-child,.v-application--is-rtl .v-toolbar__extension>.v-btn.v-btn--icon:last-child{margin-left:-12px}.v-toolbar__content>.v-tabs,.v-toolbar__extension>.v-tabs{height:inherit;margin-top:-4px;margin-bottom:-4px}.v-toolbar__content>.v-tabs>.v-slide-group.v-tabs-bar,.v-toolbar__extension>.v-tabs>.v-slide-group.v-tabs-bar{background-color:inherit;height:inherit}.v-toolbar__content>.v-tabs:first-child,.v-toolbar__extension>.v-tabs:first-child{margin-left:-16px}.v-toolbar__content>.v-tabs:last-child,.v-toolbar__extension>.v-tabs:last-child{margin-right:-16px}.v-toolbar__content,.v-toolbar__extension{align-items:center;display:flex;position:relative;z-index:0}.v-toolbar__image{border-radius:inherit;position:absolute;top:0;bottom:0;width:100%;z-index:0;contain:strict}.v-toolbar__image .v-image{border-radius:inherit}.v-toolbar__items{display:flex;height:inherit}.v-toolbar__items>.v-btn{border-radius:0;height:100%!important;max-height:none}.v-toolbar__title{font-size:1.25rem;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v-toolbar.v-toolbar--absolute{position:absolute;top:0;z-index:1}.v-toolbar.v-toolbar--bottom{top:initial;bottom:0}.v-toolbar.v-toolbar--collapse .v-toolbar__title{white-space:nowrap}.v-toolbar.v-toolbar--collapsed{max-width:112px;overflow:hidden}.v-application--is-ltr .v-toolbar.v-toolbar--collapsed{border-bottom-right-radius:24px}.v-application--is-rtl .v-toolbar.v-toolbar--collapsed{border-bottom-left-radius:24px}.v-toolbar.v-toolbar--collapsed .v-toolbar__title,.v-toolbar.v-toolbar--collapsed .v-toolbar__extension{display:none}.v-toolbar--dense .v-toolbar__content,.v-toolbar--dense .v-toolbar__extension{padding-top:0;padding-bottom:0}.v-toolbar--flat{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f!important}.v-toolbar--floating{display:inline-flex}.v-toolbar--prominent .v-toolbar__content{align-items:flex-start}.v-toolbar--prominent .v-toolbar__title{font-size:1.5rem;padding-top:6px}.v-toolbar--prominent:not(.v-toolbar--bottom) .v-toolbar__title{align-self:flex-end;padding-bottom:6px;padding-top:0}
 `)(),Jd=(()=>`.theme--light.v-sheet{background-color:#fff;border-color:#fff;color:#000000de}.theme--light.v-sheet--outlined{border:thin solid rgba(0,0,0,.12)}.theme--dark.v-sheet{background-color:#1e1e1e;border-color:#1e1e1e;color:#fff}.theme--dark.v-sheet--outlined{border:thin solid rgba(255,255,255,.12)}.v-sheet{border-radius:0}.v-sheet:not(.v-sheet--outlined){box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f}.v-sheet.v-sheet--shaped{border-radius:24px 0}

package/dist/assets/vuetify.js

@@ -1,2 +1,2 @@
-export * from "./vuetify.149dde.js";
-export { default } from "./vuetify.149dde.js";
+export * from "./vuetify.147c3a.js";
+export { default } from "./vuetify.147c3a.js";

package/dist/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <script type="module" crossorigin src="./assets/index.7aa11f5a.js"></script>
+    <script type="module" crossorigin src="./assets/index.44b91cfe.js"></script>
   </head>
   <body style="height: 100vH;">
     <noscript>

package/index.js

@@ -59,6 +59,7 @@ export {
 
 export { default as ButtonManager } from './src/manager/buttonManager.js';
 export { NavbarManager, ButtonLocation, getActionsByLocation } from './src/manager/navbarManager.js';
+export { default as ToolboxManager, ToolboxType } from './src/manager/toolbox/toolboxManager.js';
 export { default as CategoryManager } from './src/manager/categoryManager/categoryManager.js';
 export { default as ComponentsManager } from './src/manager/categoryManager/ComponentsManager.vue';
 export { default as ContextMenuManager } from './src/manager/contextMenu/contextMenuManager.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.0.0-rc.12",
+  "version": "5.0.0-rc.13",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -121,5 +121,15 @@
     "node": "^16.14.0",
     "npm": "^8.3.1"
   },
-  "type": "module"
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./config/*.json": "./config/*.json",
+    "./src/assets/logo.svg": "./src/assets/logo.svg",
+    "./src/assets/logo-mobile.svg": "./src/assets/logo-mobile.svg",
+    "./build/buildHelpers.js": "./build/buildHelpers.js",
+    "./build/getPluginProxies.js": "./build/getPluginProxies.js",
+    "./build/determineHost.js": "./build/determineHost.js",
+    "./src/styles/variables.scss": "./src/styles/variables.scss"
+  }
 }

package/plugins/example/index.js

@@ -40,30 +40,17 @@ export default async function (config) {
         '@vcmap/example',
         ButtonLocation.TOOL,
       );
-      const buttonComponents = [
-        {
-          id: 'distance3D',
-          action: {
-            name: 'distance3D',
-            title: '3D distance',
-            icon: '$vcs3dDistance',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
-        },
-        {
-          id: 'area3D',
-          action: {
-            name: 'area3D',
-            title: '3D area',
-            icon: '$vcs3dArea',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
+      const miscGroup = app.toolboxManager.get('miscellaneous');
+      miscGroup.buttonManager.add({
+        id: 'example',
+        action: {
+          name: 'example',
+          title: 'example',
+          icon: 'mdi-circle-small',
+          active: false,
+          callback() { this.active = !this.active; },
         },
-      ];
-      const measurementGroup = app.toolboxManager.requestGroup('measurement');
-      buttonComponents.forEach(c => measurementGroup.buttonManager.add(c, '@vcmap/example'));
+      }, '@vcmap/example');
     },
     destroy() {
       if (this._destroyAction) {

package/plugins/test/index.js

@@ -1,6 +1,8 @@
 import VectorSource from 'ol/source/Vector.js';
 import { Feature } from 'ol';
-import { ButtonLocation, createModalAction, createToggleAction, setStateToUrl, WindowSlot } from '@vcmap/ui';
+import {
+  ButtonLocation, createModalAction, createToggleAction, setStateToUrl, ToolboxType, WindowSlot,
+} from '@vcmap/ui';
 import { toolboxData } from './toolbox-data.js';
 import editor from './editor.vue';
 import windowManagerExample from './windowManagerExample.vue';
@@ -136,9 +138,16 @@ export default async function () {
         '@vcmap/test',
         ButtonLocation.TOOL,
       );
-      toolboxData.forEach(([{ id, icon, title, buttonComponents }, owner]) => {
-        const group = app.toolboxManager.requestGroup(id, icon, title);
-        buttonComponents.forEach(c => group.buttonManager.add(c, owner));
+      toolboxData.forEach(([{ buttonComponents, ...toolboxComponentOptions }, owner]) => {
+        let group;
+        if (app.toolboxManager.has(toolboxComponentOptions.id)) {
+          group = app.toolboxManager.get(toolboxComponentOptions.id);
+        } else {
+          group = app.toolboxManager.add(toolboxComponentOptions, owner);
+        }
+        if (group.type === ToolboxType.GROUP && buttonComponents) {
+          buttonComponents.forEach(c => group.buttonManager.add(c, owner));
+        }
       });
 
       app.contextMenuManager.addEventHandler(async (event) => {

package/plugins/test/toolbox-data.js

@@ -1,104 +1,129 @@
+import { ToolboxType } from '@vcmap/ui';
+
+const dummySelectAction = {
+  active: false,
+  currentIndex: 0,
+  _stop() {
+    console.log('stopping session', this._session);
+    this._session = null;
+    this.active = false;
+  },
+  _start() {
+    const startSession = tool => ({ type: tool });
+    this._session = startSession(this.tools[this.currentIndex].name);
+    this.active = true;
+    console.log('starting session', this._session);
+  },
+  callback() {
+    if (this.active) {
+      this._stop();
+    } else {
+      this._start();
+    }
+  },
+  selected(index) {
+    this.currentIndex = index;
+    if (this.active) {
+      this._session.type = this.tools[this.currentIndex].name;
+      console.log('updating active session', this._session);
+    } else {
+      this._start();
+    }
+  },
+};
+
 // eslint-disable-next-line import/prefer-default-export
 export const toolboxData = [
   [
     {
-      id: 'select',
-      buttonComponents: [
-        {
-          id: 'select',
-          action: {
-            name: 'select',
-            title: 'select',
-            icon: '$vcsPointSelect',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
-        },
-      ],
+      id: 'singleSelect',
+      type: ToolboxType.SINGLE,
+      action: {
+        name: 'select',
+        title: 'single select',
+        icon: '$vcsPointSelect',
+        active: false,
+        callback() { this.active = !this.active; },
+      },
     },
     '@vcmap/test',
   ],
   [
     {
       id: 'multiSelect',
-      icon: '$vcsPen',
-      title: 'multi select',
-      buttonComponents: [
-        {
-          id: 'pen',
-          action: {
+      type: ToolboxType.SELECT,
+      action: {
+        name: 'multiSelect',
+        title: 'multi select',
+        ...dummySelectAction,
+        tools: [
+          {
             name: 'pen',
             title: 'Item 1',
             icon: '$vcsPen',
-            active: false,
-            callback() { this.active = !this.active; },
           },
-        },
-        {
-          id: 'object',
-          action: {
+          {
             name: 'object',
             title: 'Item 2',
             icon: '$vcsObjectSelect',
-            active: false,
-            callback() { this.active = !this.active; },
           },
-        },
-      ],
+        ],
+      },
     },
     '@vcmap/test',
   ],
   [
     {
       id: 'measurement',
-      icon: '$vcsDimensionsHouse',
-      title: 'measurement',
-      buttonComponents: [
-        {
-          id: 'distance',
-          action: {
+      type: ToolboxType.SELECT,
+      action: {
+        name: 'measurement',
+        title: 'measurement',
+        ...dummySelectAction,
+        tools: [
+          {
             name: 'distance',
             title: '2D distance',
             icon: '$vcs2dDistance',
-            active: false,
-            callback() { this.active = !this.active; },
           },
-        },
-        {
-          id: 'area',
-          action: {
+          {
             name: 'area',
             title: '2D area',
             icon: '$vcs2dArea',
-            active: false,
-            callback() { this.active = !this.active; },
           },
-        },
-      ],
+          {
+            name: 'distance3D',
+            title: '3D distance',
+            icon: '$vcs3dDistance',
+          },
+          {
+            name: 'area3D',
+            title: '3D area',
+            icon: '$vcs3dArea',
+          },
+        ],
+      },
     },
     '@vcmap/test',
   ],
   [
     {
       id: 'toggle',
-      buttonComponents: [
-        {
-          id: 'split',
-          action: {
-            name: 'split',
-            title: 'split view',
-            icon: '$vcsSplitView',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
-        },
-      ],
+      type: ToolboxType.SINGLE,
+      action: {
+        name: 'split',
+        title: 'split view',
+        icon: '$vcsSplitView',
+        active: false,
+        callback() { this.active = !this.active; },
+      },
     },
     '@vcmap/test',
   ],
   [
     {
       id: 'flight',
+      type: ToolboxType.GROUP,
       icon: '$vcsVideoRecorder',
       title: 'flight',
       buttonComponents: [

package/src/application/VcsApp.vue

@@ -279,7 +279,7 @@
         ButtonLocation.CONTENT,
       );
     }
-    watch(app.categoryManager.items, () => {
+    watch(app.categoryManager.items.value, () => {
       if (app.categoryManager.items.value.length > 0) {
         if (!app.navbarManager.has('component-manager')) {
           app.navbarManager.add(

package/src/components/lists/VcsActionList.vue

@@ -51,18 +51,24 @@
    * @property {boolean} [active=false] - optional state of button. If active, button is rendered in primary color
    */
 
+  /**
+   * pattern to check actions
+   * @type {Object}
+   */
+  export const ActionPattern = {
+    name: String,
+    title: [undefined, String],
+    icon: [undefined, String],
+    callback: Function,
+    active: [undefined, Boolean],
+  };
+
   /**
    * @param {VcsAction} action
    * @returns {boolean}
    */
   export function validateAction(action) {
-    return is(action, {
-      name: String,
-      title: [undefined, String],
-      icon: [undefined, String],
-      callback: Function,
-      active: [undefined, Boolean],
-    });
+    return is(action, ActionPattern);
   }
 
   /**

package/src/featureInfo/BalloonComponent.vue

@@ -51,6 +51,7 @@
 
   import { inject, onMounted, onUnmounted, watch } from 'vue';
   import { setupBalloonPositionListener } from './balloonHelper.js';
+  import VcsButton from '../components/buttons/VcsButton.vue';
 
   /**
    * @description A balloon viewing feature attributes. Size dynamic dependent on number of attributes.
@@ -65,6 +66,7 @@
    */
   export default {
     name: 'BalloonComponent',
+    components: { VcsButton },
     props: {
       featureId: {
         type: String,

package/src/featureInfo/featureInfo.js

@@ -27,6 +27,7 @@ import { Feature } from 'ol';
 import { check, checkMaybe } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
 
+import { ToolboxType } from '@vcmap/ui';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import FeatureInfoInteraction from './featureInfoInteraction.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
@@ -153,9 +154,10 @@ function setupFeatureInfoTool(app) {
     },
   };
 
-  app.toolboxManager.requestGroup('featureInfo').buttonManager.add(
+  app.toolboxManager.add(
     {
-      id: 'featureInfoTool',
+      id: 'featureInfo',
+      type: ToolboxType.SINGLE,
       action,
     },
     vcsAppSymbol,
@@ -436,7 +438,7 @@ class FeatureInfo {
   destroy() {
     this._clearInternal();
     this._featureChanged.destroy();
-    this._app.toolboxManager.requestGroup('featureInfo').buttonManager.remove('featureInfoTool');
+    this._app.toolboxManager.remove('featureInfo');
     if (this._scratchLayer) {
       this._app.layers.remove(this._scratchLayer);
       this._scratchLayer.destroy();

package/src/i18n/de.js

@@ -69,6 +69,10 @@ const messages = {
     openInNew: 'In neuem Browser Tab öffnen',
     defaultLabelText: 'Text',
   },
+  toolbox: {
+    flight: 'Flug',
+    miscellaneous: 'Verschiedenes',
+  },
   footer: {
     title: 'Fußzeile',
   },

package/src/i18n/en.js

@@ -69,6 +69,10 @@ const messages = {
     openInNew: 'Open in new tab',
     defaultLabelText: 'Text',
   },
+  toolbox: {
+    flight: 'flight',
+    miscellaneous: 'miscellaneous',
+  },
   footer: {
     title: 'Footer',
   },

package/src/manager/buttonManager.js

@@ -3,6 +3,7 @@ import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { check, checkMaybe } from '@vcsuite/check';
 import { vcsAppSymbol } from '../pluginHelper.js';
+import { ActionPattern } from '../components/lists/VcsActionList.vue';
 
 /**
  * @typedef ButtonComponentOptions
@@ -86,13 +87,7 @@ class ButtonManager {
    */
   add(buttonComponentOptions, owner) {
     checkMaybe(buttonComponentOptions.id, String);
-    check(buttonComponentOptions.action, {
-      name: String,
-      title: [undefined, String],
-      icon: [undefined, String],
-      callback: Function,
-      active: [undefined, Boolean],
-    });
+    check(buttonComponentOptions.action, ActionPattern);
     check(owner, [String, vcsAppSymbol]);
 
     if (buttonComponentOptions.id && this.has(buttonComponentOptions.id)) {

package/src/manager/navbarManager.js

@@ -47,7 +47,7 @@ export function getActionsByLocation(buttonComponents, location, order = [], com
 
 /**
  * Possible render positions of buttons in navbar from left to right
- * @enum
+ * @enum {number}
  */
 export const ButtonLocation = {
   MAP: 0,

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -0,0 +1,118 @@
+<template>
+  <div v-if="orderedButtons.length > 0">
+    <v-menu
+      v-model="open"
+      @input="$emit('toggle', open)"
+      offset-y
+      :nudge-left="nudgeLeft"
+      z-index="0"
+    >
+      <template #activator="{ on, attrs }">
+        <VcsButton
+          class="vcs-toolbox-toogle-button"
+          width="48"
+          :icon="group.icon"
+          :tooltip="group.title"
+          :active="open || hasActiveAction"
+          :color="hasActiveAction ? 'primary' : 'basic'"
+          v-bind="attrs"
+          v-on="on"
+          large
+        >
+          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
+        </VcsButton>
+      </template>
+
+      <v-toolbar
+        id="vcs-toolbox-toolbar--secondary"
+        class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop"
+        :height="40"
+        width="fit-content"
+        color="basic"
+        dense
+      >
+        <v-toolbar-items class="w-full">
+          <div class="d-flex align-center justify-space-between w-full mx-1">
+            <VcsButton
+              v-for="({id, action}) in orderedButtons"
+              :key="id"
+              :tooltip="action.title"
+              :icon="action.icon"
+              :active="action.active"
+              @click="action.callback($event)"
+              v-bind="{...$attrs}"
+              large
+            />
+          </div>
+        </v-toolbar-items>
+      </v-toolbar>
+    </v-menu>
+  </div>
+</template>
+<style lang="scss">
+.vcs-toolbox-2 {
+  .v-toolbar__content {
+    padding: 0;
+  }
+}
+
+.marginToTop {
+  margin-top: 3px;
+}
+</style>
+<script>
+  import { computed, ref } from 'vue';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import { getComponentsByOrder } from './toolboxManager.js';
+
+  /**
+   * @description
+   * A Toolbox Button rendering a menu dropdown with actions using {@link https://vuetifyjs.com/en/api/v-menu/|vuetify v-menu} and {@link VcsButton}.
+   * The button is rendered in primary color if at least one action is active.
+   * The button is rendered in basic color if menu is open and no action is active.
+   * @vue-prop {GroupToolboxComponent} group - A toolbox group of type 'group'.
+   * @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',
+    components: { VcsButton },
+    props: {
+      group: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const open = ref(false);
+
+      const buttons = computed(() => {
+        const { buttonManager } = props.group;
+        const buttonIds = ref(buttonManager.componentIds);
+        return buttonIds.value.map(id => buttonManager.get(id));
+      });
+      const orderedButtons = computed(() => getComponentsByOrder(buttons.value));
+      const hasActiveAction = computed(() => 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,
+      };
+    },
+  };
+</script>