@vcmap/ui 5.0.0-rc.8 → 5.0.0-rc.9

package/plugins/test/toolbox-data.js

@@ -1,49 +1,129 @@
+// 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; },
+          },
+        },
+      ],
+    },
+    '@vcmap/test',
+  ],
+  [
+    {
+      id: 'multiSelect',
       icon: '$vcsPen',
-      type: 'multiSelectButton',
-      id: 1,
-      open: false,
-      options: [
+      title: 'multi select',
+      buttonComponents: [
+        {
+          id: 'pen',
+          action: {
+            name: 'pen',
+            title: 'Item 1',
+            icon: '$vcsPen',
+            active: false,
+            callback() { this.active = !this.active; },
+          },
+        },
         {
-          id: 'foo',
-          icon: '$vcsPointSelect',
-          text: 'Item 1',
-          selected: true,
+          id: 'object',
+          action: {
+            name: 'object',
+            title: 'Item 2',
+            icon: '$vcsObjectSelect',
+            active: false,
+            callback() { this.active = !this.active; },
+          },
         },
-        { id: 'bar', icon: '$vcsObjectSelect', text: 'Item 2' },
       ],
     },
-    1,
+    '@vcmap/test',
   ],
   [
     {
-      type: 'singleSelectButton',
-      id: 2,
-      open: false,
-      options: [
-        { id: 'delta', icon: '$vcsPointSelect' },
-        { id: 'zulu', icon: '$vcsObjectSelect' },
+      id: 'measurement',
+      icon: '$vcsDimensionsHouse',
+      title: 'measurement',
+      buttonComponents: [
+        {
+          id: 'distance',
+          action: {
+            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; },
+          },
+        },
       ],
     },
-    2,
+    '@vcmap/test',
   ],
   [
     {
-      type: 'toggleButton',
-      id: 3,
-      active: true,
+      id: 'toggle',
+      buttonComponents: [
+        {
+          id: 'split',
+          action: {
+            name: 'split',
+            title: 'split view',
+            icon: '$vcsSplitView',
+            active: false,
+            callback() { this.active = !this.active; },
+          },
+        },
+      ],
     },
-    3,
+    '@vcmap/test',
   ],
   [
     {
-      type: 'customComponent',
-      component: 'Button',
-      id: 5,
-      active: true,
+      id: 'flight',
+      icon: '$vcsVideoRecorder',
+      title: 'flight',
+      buttonComponents: [
+        {
+          id: 'flight',
+          action: {
+            name: 'flight',
+            title: 'add flight',
+            icon: 'mdi-camera-plus',
+            active: false,
+            callback() { this.active = !this.active; },
+          },
+        },
+        {
+          id: 'export',
+          action: {
+            name: 'export',
+            title: 'export flight',
+            icon: '$vcsExportFlight',
+            active: false,
+            callback() { this.active = !this.active; },
+          },
+        },
+      ],
     },
-    5,
+    '@vcmap/test',
   ],
 ];

package/plugins/test/windowManagerExample.vue

@@ -16,9 +16,8 @@
 <script>
   import { inject, onUnmounted, ref, computed } from '@vue/composition-api';
   import { getLogger } from '@vcsuite/logger';
-  import { VcsButton } from '@vcsuite/ui-components';
 
-  import { EmptyCmpt, WindowSlot } from '@vcmap/ui';
+  import { EmptyCmpt, WindowSlot, VcsButton } from '@vcmap/ui';
   import VcsContent from './vcsContent.vue';
   import MyCustomHeader from './myCustomHeader.vue';
 

package/src/actions/actionHelper.js

@@ -26,9 +26,10 @@ export function createMapButtonAction(actionOptions, mapName, maps) {
   check(mapName, String);
   check(maps, MapCollection);
 
+  const active = maps.activeMap?.name === mapName;
   const action = {
     ...actionOptions,
-    active: false,
+    active,
     callback() {
       maps.setActiveMap(mapName);
     },

package/src/actions/styleSelector.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script>
-  import { VcsSelect } from '@vcsuite/ui-components';
   import { computed, inject, onUnmounted, ref } from '@vue/composition-api';
+  import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 
   export default {
     name: 'StyleSelector',

package/src/application/Navbar.vue

@@ -1,5 +1,13 @@
 <template>
-  <v-app-bar app absolute dense elevation="0" color="var(--v-basic-base)">
+  <v-app-bar
+    app
+    absolute
+    dense
+    elevation="0"
+    :height="$vuetify.breakpoint.xs ? '56px' : '48px'"
+    :color="'var(--v-basic-base)'"
+    :bottom="$vuetify.breakpoint.xs ? 'bottom' : undefined"
+  >
     <v-container fluid class="pa-0">
       <v-row no-gutters>
         <v-col>
@@ -18,6 +26,7 @@
               />
               <VcsActionButtonList
                 :actions="contentActions"
+                :overflow-count="$vuetify.breakpoint.xs ? 2 : 3"
                 large
               />
               <v-divider
@@ -28,16 +37,17 @@
               />
               <VcsActionButtonList
                 :actions="toolActions"
+                v-if="$vuetify.breakpoint.mdAndUp"
                 large
               />
             </div>
           </v-toolbar-items>
         </v-col>
         <v-col class="align-center d-flex justify-center">
-          <div class="company-logo" />
+          <div v-if="$vuetify.breakpoint.mdAndUp" class="company-logo" />
         </v-col>
         <v-col class="align-content-end d-flex justify-end">
-          <v-toolbar-items>
+          <v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
             <div class="d-flex align-center">
               <VcsActionButtonList
                 :actions="projectActions"
@@ -84,14 +94,16 @@
 <style lang="scss" scoped>
   .v-toolbar__items > div{
     gap: 8px;
-}
+  }
 </style>
 
 <script>
 
-  import { VcsActionButtonList, VcsActionList, VcsButton } from '@vcsuite/ui-components';
   import { inject, ref, computed } from '@vue/composition-api';
-  import { ButtonLocation, getActionsByLocation } from '../manager/buttonManager.js';
+  import { ButtonLocation, getActionsByLocation } from '../manager/navbarManager.js';
+  import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
+  import VcsActionList from '../components/lists/VcsActionList.vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
 
   export default {
     name: 'VcsNavbar',

package/src/application/VcsApp.vue

@@ -1,19 +1,19 @@
 <template>
   <v-app class="h-full" absolute>
     <Navbar />
-    <v-main fill-height absolute>
+    <v-main class="fill-height absolute">
+      <div v-if="$vuetify.breakpoint.smAndDown" class="company-logo-mobile" />
       <VcsMap :map-id="mapId" />
       <MapNavigation />
-      <ToolboxManagerComponent v-if="toolboxManagerVisible" />
+      <ToolboxManagerComponent />
       <WindowManagerComponent />
     </v-main>
-    <v-footer app absolute>
+    <v-footer app absolute v-if="$vuetify.breakpoint.mdAndUp">
       footer
     </v-footer>
   </v-app>
 </template>
 
-
 <style scoped lang="scss">
 ::v-deep .v-application--wrap {
   min-height: fit-content;
@@ -30,7 +30,7 @@
   import { getVcsAppById } from '@vcmap/core';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
   import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
-  import { ButtonLocation } from '../manager/buttonManager.js';
+  import { ButtonLocation } from '../manager/navbarManager.js';
   import { vcsAppSymbol } from '../pluginHelper.js';
   import VcsMap from './VcsMap.vue';
   import Navbar from './Navbar.vue';
@@ -64,31 +64,36 @@
       };
 
       const mapButtonActionDestroy = {};
-      const mapAddedDestroy = app.maps.added.addEventListener(
-        ({ className, name }) => {
-          if (mapButtonActionDestroy[name]) {
-            mapButtonActionDestroy[name]();
-          }
-          const { action, destroy } = createMapButtonAction(
-            {
-              name,
-              icon: iconMap[className],
-              title: `Activate ${ name}`,
-            },
+
+      const setupMap = ({ className, name }) => {
+        if (mapButtonActionDestroy[name]) {
+          mapButtonActionDestroy[name]();
+        }
+        const { action, destroy } = createMapButtonAction(
+          {
             name,
-            app.maps,
-          );
-          app.navbarManager.add({
+            icon: iconMap[className],
+            title: `Activate ${ name}`,
+          },
+          name,
+          app.maps,
+        );
+        app.navbarManager.add(
+          {
             id: `mapButton-${name}`,
-            location: ButtonLocation.MAP,
             action,
-          }, vcsAppSymbol);
-          mapButtonActionDestroy[name] = () => {
-            app.navbarManager.remove(`mapButton-${name}`);
-            destroy();
-          };
-        },
-      );
+          },
+          vcsAppSymbol,
+          ButtonLocation.MAP,
+        );
+        mapButtonActionDestroy[name] = () => {
+          app.navbarManager.remove(`mapButton-${name}`);
+          destroy();
+        };
+      };
+
+      [...app.maps].forEach(setupMap);
+      const mapAddedDestroy = app.maps.added.addEventListener(setupMap);
 
       const mapRemovedDestroy = app.maps.removed.addEventListener(({ name }) => {
         if (mapButtonActionDestroy[name]) {
@@ -101,12 +106,14 @@
       const pluginRemoved = app.plugins.removed.addEventListener(async (plugin) => {
         app.windowManager.removeOwner(plugin.name);
         app.navbarManager.removeOwner(plugin.name);
+        app.toolboxManager.removeOwner(plugin.name);
       });
 
       onMounted(() => {
         pluginAdded = app.plugins.added.addEventListener((plugin) => {
           app.windowManager.removeOwner(plugin.name);
           app.navbarManager.removeOwner(plugin.name);
+          app.toolboxManager.removeOwner(plugin.name);
           if (plugin.onVcsAppMounted) {
             plugin.onVcsAppMounted(app);
           }
@@ -137,7 +144,6 @@
 
       return {
         mapId,
-        toolboxManagerVisible: app.toolboxManager.state.visible,
       };
     },
     provide() {

package/src/assets/logo-mobile.svg

@@ -0,0 +1,9 @@
+<svg id="VCS_Logo_Color_Mobile" data-name="VCS Logo Color Mobile" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 39">
+  <path d="M65.15,6.98l-12.49,12.52L36.06,2.85c-.55-.55-1.29-.86-2.06-.85h29.09c.77,0,1.51,.31,2.06,.85,1.12,1.12,1.14,2.95,.03,4.09l-.03,.03Zm-12.49,12.52l-16.6,16.65c-1.14,1.14-2.97,1.14-4.11,0-.55-.54-.85-1.29-.85-2.06V4.92c0-.78,.31-1.52,.85-2.06,1.14-1.14,2.97-1.14,4.11,0l16.6,16.65ZM31.09,4.92v29.16c0,.78,.31,1.52,.85,2.06L2.85,6.98c-1.12-1.12-1.14-2.95-.03-4.09l.03-.03c.55-.55,1.29-.86,2.06-.85h29.09c-.77,0-1.51,.31-2.06,.85-.55,.54-.86,1.29-.86,2.06Zm34.06,31.23c-.55,.55-1.29,.86-2.06,.85h-29.09c.77,0,1.51-.31,2.06-.85l16.6-16.64,12.49,12.52c1.12,1.12,1.14,2.95,.03,4.09l-.03,.03Z" style="fill: #fff; isolation: isolate; opacity: .9; stroke: #fff; stroke-miterlimit: 10; stroke-width: 4px;"/>
+  <g>
+    <path id="Path_274" d="M64.99,7.19l-12.43,12.31L36.05,3.14c-.54-.54-1.28-.84-2.05-.84h28.94c.77,0,1.5,.3,2.05,.84,1.12,1.1,1.13,2.9,.03,4.02l-.03,.03Z" style="fill: #86b110; isolation: isolate; opacity: .9;"/>
+    <path id="Path_273" d="M52.56,19.5l-16.52,16.36c-1.13,1.12-2.96,1.12-4.09,0-.54-.54-.85-1.27-.85-2.03V5.17c0-.76,.31-1.49,.85-2.03,1.13-1.12,2.96-1.12,4.09,0l16.52,16.36Z" style="fill: #005434; isolation: isolate; opacity: .9;"/>
+    <path id="Path_272" d="M31.1,5.17v28.66c0,.76,.31,1.49,.85,2.03L3.01,7.19c-1.12-1.1-1.13-2.9-.03-4.02l.03-.03c.55-.54,1.28-.84,2.05-.84h28.94c-.77,0-1.5,.3-2.05,.84-.54,.53-.85,1.26-.85,2.03Z" style="fill: #409d76; isolation: isolate; opacity: .9;"/>
+    <path id="Path_271" d="M64.99,35.86c-.54,.54-1.28,.84-2.05,.84h-28.94c.77,0,1.5-.3,2.05-.84l16.52-16.36,12.43,12.31c1.12,1.1,1.13,2.9,.03,4.02l-.03,.03Z" style="fill: #00a0ba; isolation: isolate; opacity: .9;"/>
+  </g>
+</svg>

package/src/assets/logo.svg

@@ -1,26 +1,26 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="151" height="35.585" viewBox="0 0 151 35.585">
-  <g id="VCS_Logo_Color" data-name="VCS Logo Color" transform="translate(0)">
-    <path id="Path_271" data-name="Path 271" d="M245.674,76.716a3,3,0,0,1-2.116.868H213.62a3,3,0,0,0,2.116-.868l17.085-16.924,12.853,12.731A2.943,2.943,0,0,1,245.674,76.716Z" transform="translate(-180.688 -42)" fill="#00a0ba"/>
-    <path id="Path_272" data-name="Path 272" d="M199.938,38.964V68.618a2.944,2.944,0,0,0,.878,2.1L170.878,41.061a2.943,2.943,0,0,1,0-4.193A3,3,0,0,1,173,36h29.938a3,3,0,0,0-2.117.868A2.943,2.943,0,0,0,199.938,38.964Z" transform="translate(-170 -36)" fill="#409d76"/>
-    <path id="Path_273" data-name="Path 273" d="M231.848,53.792,214.764,70.717a3.014,3.014,0,0,1-4.233,0,2.948,2.948,0,0,1-.879-2.1V38.964a2.945,2.945,0,0,1,.879-2.1,3.014,3.014,0,0,1,4.233,0Z" transform="translate(-179.715 -36)" fill="#005434"/>
-    <path id="Path_274" data-name="Path 274" d="M245.674,41.061,232.821,53.792,215.736,36.868A3,3,0,0,0,213.62,36h29.938a3.005,3.005,0,0,1,2.116.868A2.943,2.943,0,0,1,245.674,41.061Z" transform="translate(-180.688 -36)" fill="#86b110"/>
-    <path id="Path_275" data-name="Path 275" d="M276.469,43.932c.18,0,.23.049.2.259l-1.849,6.874c-.442,1.7-.573,1.914-2.406,1.914-1.7,0-1.85-.2-2.325-1.914l-1.915-6.874c-.033-.211.032-.259.212-.259H270c.131,0,.147.049.214.259l1.7,6.453c.164.568.213.648.492.648.344,0,.409-.081.556-.648l1.653-6.453c.049-.211.082-.259.213-.259Z" transform="translate(-194.05 -38)" fill="#409d76"/>
-    <path id="Path_276" data-name="Path 276" d="M283.025,42.691a.216.216,0,0,1,.245.243v8.48a.216.216,0,0,1-.245.243h-1.49a.216.216,0,0,1-.245-.243v-8.48a.216.216,0,0,1,.245-.243Zm.442-2.561a1.036,1.036,0,0,1-1.179,1.119,1.121,1.121,0,1,1,0-2.237A1.036,1.036,0,0,1,283.467,40.13Z" transform="translate(-197.219 -36.76)" fill="#409d76"/>
-    <path id="Path_277" data-name="Path 277" d="M291.515,44c.164.049.262.114.262.292v.989c0,.179-.1.259-.278.244h-1.49c-.982,0-1.277.162-1.277.875v6.226a.216.216,0,0,1-.245.243H287a.216.216,0,0,1-.245-.243V45.9c0-1.929,1.555-2.075,2.766-2.075A10.535,10.535,0,0,1,291.515,44Z" transform="translate(-198.604 -37.973)" fill="#409d76"/>
-    <path id="Path_278" data-name="Path 278" d="M295.885,40.611c.18-.049.278.049.278.227v2.27h1.62c.164,0,.262.082.262.243v1.022a.232.232,0,0,1-.262.259h-1.62v4.945c0,.713.213.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.262.262,0,0,1-.245.292,7.384,7.384,0,0,1-1.162.114c-1.277,0-2.6-.032-2.6-1.978V41.243c0-.162.082-.227.229-.259Z" transform="translate(-200.421 -37.159)" fill="#409d76"/>
-    <path id="Path_279" data-name="Path 279" d="M308.785,43.932a.216.216,0,0,1,.245.243v8.269c0,.211-.082.227-.245.259a19.837,19.837,0,0,1-3.65.276c-3.028,0-3.879-.47-3.879-3.859V44.175c0-.162.115-.243.278-.243h1.474c.164,0,.23.082.23.243v4.589c0,2.4.376,2.513,1.915,2.513h1.882v-7.1a.216.216,0,0,1,.245-.243Z" transform="translate(-202.158 -38)" fill="#409d76"/>
-    <path id="Path_280" data-name="Path 280" d="M316.88,49.077c-.867,0-1.261.276-1.261,1.087,0,.924.442,1.151,1.653,1.151a8.923,8.923,0,0,0,1.866-.178V49.077Zm4.239-2.593v5.642a.411.411,0,0,1-.328.47,15.409,15.409,0,0,1-3.683.357c-2.291,0-3.454-.357-3.454-2.707,0-2.059,1.1-2.578,3.11-2.578h2.374v-.844c0-.908-.541-1.3-1.851-1.3H314.6c-.2,0-.246-.049-.246-.243v-.989c0-.194.066-.227.229-.259a14.739,14.739,0,0,1,2.7-.211C320.17,43.824,321.12,44.732,321.12,46.483Z" transform="translate(-205.195 -37.973)" fill="#409d76"/>
-    <path id="Rectangle_510" data-name="Rectangle 510" d="M.325,0h1.33a.325.325,0,0,1,.325.325V12.078a.325.325,0,0,1-.325.325H.326A.326.326,0,0,1,0,12.077V.325A.325.325,0,0,1,.325,0Z" transform="translate(117.969 2.495)" fill="#409d76"/>
-    <path id="Path_281" data-name="Path 281" d="M342.55,44a.262.262,0,0,1,.245.292v.989c0,.162-.082.243-.262.243h-2.57c-1.752,0-1.98.568-1.98,2.854s.229,2.87,1.98,2.87h2.57c.18,0,.262.081.262.243v.989a.263.263,0,0,1-.245.292,17.086,17.086,0,0,1-2.587.179c-3.323,0-3.977-.909-3.977-4.572s.655-4.556,3.977-4.556A16.987,16.987,0,0,1,342.55,44Z" transform="translate(-210.667 -37.973)" fill="#409d76"/>
-    <path id="Path_282" data-name="Path 282" d="M348.821,42.691a.216.216,0,0,1,.245.243v8.48a.216.216,0,0,1-.245.243h-1.49a.216.216,0,0,1-.245-.243v-8.48a.216.216,0,0,1,.245-.243Zm.442-2.561a1.036,1.036,0,0,1-1.179,1.119,1.121,1.121,0,1,1,0-2.237A1.036,1.036,0,0,1,349.263,40.13Z" transform="translate(-213.338 -36.76)" fill="#409d76"/>
-    <path id="Path_283" data-name="Path 283" d="M354.223,40.611c.18-.049.279.049.279.227v2.27h1.62a.228.228,0,0,1,.261.243v1.022a.232.232,0,0,1-.261.259H354.5v4.945c0,.713.212.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.262.262,0,0,1-.245.292,7.384,7.384,0,0,1-1.162.114c-1.277,0-2.6-.032-2.6-1.978V41.243c0-.162.082-.227.23-.259Z" transform="translate(-214.714 -37.159)" fill="#409d76"/>
-    <path id="Path_284" data-name="Path 284" d="M367.2,43.932a.217.217,0,0,1,.246.243v8.2c-.017,2.821-.573,3.842-3.9,3.842a17.949,17.949,0,0,1-2.766-.179.236.236,0,0,1-.213-.259v-.956c0-.178.066-.243.229-.243h2.636c1.637,0,2.029-.389,2.029-1.67v-.082a12.48,12.48,0,0,1-2.1.147c-3.028,0-3.8-1.022-3.8-4.3V44.175a.216.216,0,0,1,.245-.243h1.49a.216.216,0,0,1,.245.243v4.232c0,2.318.3,2.854,2.128,2.854a13.514,13.514,0,0,0,1.785-.1V44.175a.216.216,0,0,1,.245-.243Z" transform="translate(-216.445 -38)" fill="#409d76"/>
-    <path id="Path_285" data-name="Path 285" d="M275.307,63.735c.164.032.245.114.245.259v.956c0,.162-.082.243-.261.243h-3.012c-.687,0-1.08.211-1.08.713V66.1c0,.389.212.7.9.956l2.145.778a2.183,2.183,0,0,1,1.669,2.367v.211c0,1.849-1.243,2.27-3.388,2.27-1.423,0-2.652-.1-3.191-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.066-.259.262-.259h3.175c1.1,0,1.441-.129,1.441-.7v-.162c0-.389-.2-.648-.934-.924l-2.16-.81a2.324,2.324,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.941,16.941,0,0,1,275.307,63.735Z" transform="translate(-194.276 -42.949)" fill="#005434"/>
-    <path id="Path_286" data-name="Path 286" d="M287.859,63.665a.216.216,0,0,1,.245.243v8.2c-.017,2.821-.573,3.842-3.9,3.842a17.956,17.956,0,0,1-2.766-.179.236.236,0,0,1-.213-.259V74.56c0-.178.066-.243.229-.243h2.636c1.637,0,2.03-.389,2.03-1.67v-.081a12.57,12.57,0,0,1-2.1.146c-3.028,0-3.8-1.022-3.8-4.3V63.908a.216.216,0,0,1,.246-.243h1.49a.216.216,0,0,1,.245.243V68.14c0,2.318.294,2.854,2.128,2.854a13.509,13.509,0,0,0,1.784-.1V63.908a.216.216,0,0,1,.246-.243Z" transform="translate(-197.007 -42.977)" fill="#005434"/>
-    <path id="Path_287" data-name="Path 287" d="M299.154,63.735c.164.032.246.114.246.259v.956c0,.162-.082.243-.262.243h-3.012c-.687,0-1.08.211-1.08.713V66.1c0,.389.213.7.9.956l2.144.778a2.184,2.184,0,0,1,1.67,2.367v.211c0,1.849-1.244,2.27-3.388,2.27-1.424,0-2.652-.1-3.192-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.065-.259.261-.259h3.176c1.1,0,1.44-.129,1.44-.7v-.162c0-.389-.2-.648-.932-.924l-2.161-.81a2.325,2.325,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.947,16.947,0,0,1,299.154,63.735Z" transform="translate(-200.119 -42.949)" fill="#005434"/>
-    <path id="Path_288" data-name="Path 288" d="M305.925,60.343c.18-.049.279.049.279.227v2.27h1.621a.229.229,0,0,1,.262.243V64.1a.233.233,0,0,1-.262.259H306.2v4.945c0,.713.213.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.263.263,0,0,1-.245.292,7.466,7.466,0,0,1-1.163.113c-1.277,0-2.6-.032-2.6-1.978V60.975c0-.162.082-.227.229-.259Z" transform="translate(-202.881 -42.136)" fill="#005434"/>
-    <path id="Path_289" data-name="Path 289" d="M312.99,67.463h3.748c-.016-1.751-.376-2.2-1.833-2.2C313.383,65.259,313.006,65.713,312.99,67.463Zm5.746.487v.487c0,.307-.1.437-.557.437H312.99c.049,1.718.442,2.107,2.029,2.107h2.8a.216.216,0,0,1,.245.243v1.006a.246.246,0,0,1-.23.275,20.493,20.493,0,0,1-2.93.178c-3.191,0-3.912-.907-3.912-4.555,0-3.664.72-4.573,3.912-4.573C317.982,63.556,318.7,64.432,318.736,67.95Z" transform="translate(-204.544 -42.949)" fill="#005434"/>
-    <path id="Path_290" data-name="Path 290" d="M335.8,67.134l-.033,5.221c0,.162-.066.243-.23.243h-1.489c-.164,0-.229-.081-.229-.243v-4.6c0-2.4-.376-2.513-1.8-2.513a10.087,10.087,0,0,0-1.636.129,6.5,6.5,0,0,1,.245,2.027l-.032,4.961c0,.179-.066.244-.213.244h-1.506a.217.217,0,0,1-.246-.244V67.426c0-2.091-.408-2.172-1.8-2.172h-1.391v7.1a.216.216,0,0,1-.246.243H323.7c-.164,0-.23-.081-.245-.243V64.07c0-.194.082-.227.245-.259a16.721,16.721,0,0,1,2.914-.259,7.382,7.382,0,0,1,2.815.486,9.167,9.167,0,0,1,2.75-.5C334.884,63.535,335.817,64.07,335.8,67.134Z" transform="translate(-207.598 -42.943)" fill="#005434"/>
-    <path id="Path_291" data-name="Path 291" d="M348.214,63.735c.164.032.245.114.245.259v.956c0,.162-.082.243-.262.243h-3.012c-.688,0-1.08.211-1.08.713V66.1c0,.389.213.7.9.956l2.143.778a2.184,2.184,0,0,1,1.67,2.367v.211c0,1.849-1.244,2.27-3.388,2.27-1.424,0-2.652-.1-3.192-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.066-.259.262-.259h3.176c1.1,0,1.44-.129,1.44-.7v-.162c0-.389-.2-.648-.932-.924l-2.161-.81a2.325,2.325,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.956,16.956,0,0,1,348.214,63.735Z" transform="translate(-212.139 -42.949)" fill="#005434"/>
+  <g id="VCS_Logo_Color" transform="translate(0)">
+    <path id="Path_271" d="M245.674,76.716a3,3,0,0,1-2.116.868H213.62a3,3,0,0,0,2.116-.868l17.085-16.924,12.853,12.731A2.943,2.943,0,0,1,245.674,76.716Z" transform="translate(-180.688 -42)" fill="#00a0ba"/>
+    <path id="Path_272" d="M199.938,38.964V68.618a2.944,2.944,0,0,0,.878,2.1L170.878,41.061a2.943,2.943,0,0,1,0-4.193A3,3,0,0,1,173,36h29.938a3,3,0,0,0-2.117.868A2.943,2.943,0,0,0,199.938,38.964Z" transform="translate(-170 -36)" fill="#409d76"/>
+    <path id="Path_273" d="M231.848,53.792,214.764,70.717a3.014,3.014,0,0,1-4.233,0,2.948,2.948,0,0,1-.879-2.1V38.964a2.945,2.945,0,0,1,.879-2.1,3.014,3.014,0,0,1,4.233,0Z" transform="translate(-179.715 -36)" fill="#005434"/>
+    <path id="Path_274" d="M245.674,41.061,232.821,53.792,215.736,36.868A3,3,0,0,0,213.62,36h29.938a3.005,3.005,0,0,1,2.116.868A2.943,2.943,0,0,1,245.674,41.061Z" transform="translate(-180.688 -36)" fill="#86b110"/>
+    <path id="Path_275" d="M276.469,43.932c.18,0,.23.049.2.259l-1.849,6.874c-.442,1.7-.573,1.914-2.406,1.914-1.7,0-1.85-.2-2.325-1.914l-1.915-6.874c-.033-.211.032-.259.212-.259H270c.131,0,.147.049.214.259l1.7,6.453c.164.568.213.648.492.648.344,0,.409-.081.556-.648l1.653-6.453c.049-.211.082-.259.213-.259Z" transform="translate(-194.05 -38)" fill="#409d76"/>
+    <path id="Path_276" d="M283.025,42.691a.216.216,0,0,1,.245.243v8.48a.216.216,0,0,1-.245.243h-1.49a.216.216,0,0,1-.245-.243v-8.48a.216.216,0,0,1,.245-.243Zm.442-2.561a1.036,1.036,0,0,1-1.179,1.119,1.121,1.121,0,1,1,0-2.237A1.036,1.036,0,0,1,283.467,40.13Z" transform="translate(-197.219 -36.76)" fill="#409d76"/>
+    <path id="Path_277" d="M291.515,44c.164.049.262.114.262.292v.989c0,.179-.1.259-.278.244h-1.49c-.982,0-1.277.162-1.277.875v6.226a.216.216,0,0,1-.245.243H287a.216.216,0,0,1-.245-.243V45.9c0-1.929,1.555-2.075,2.766-2.075A10.535,10.535,0,0,1,291.515,44Z" transform="translate(-198.604 -37.973)" fill="#409d76"/>
+    <path id="Path_278" d="M295.885,40.611c.18-.049.278.049.278.227v2.27h1.62c.164,0,.262.082.262.243v1.022a.232.232,0,0,1-.262.259h-1.62v4.945c0,.713.213.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.262.262,0,0,1-.245.292,7.384,7.384,0,0,1-1.162.114c-1.277,0-2.6-.032-2.6-1.978V41.243c0-.162.082-.227.229-.259Z" transform="translate(-200.421 -37.159)" fill="#409d76"/>
+    <path id="Path_279" d="M308.785,43.932a.216.216,0,0,1,.245.243v8.269c0,.211-.082.227-.245.259a19.837,19.837,0,0,1-3.65.276c-3.028,0-3.879-.47-3.879-3.859V44.175c0-.162.115-.243.278-.243h1.474c.164,0,.23.082.23.243v4.589c0,2.4.376,2.513,1.915,2.513h1.882v-7.1a.216.216,0,0,1,.245-.243Z" transform="translate(-202.158 -38)" fill="#409d76"/>
+    <path id="Path_280" d="M316.88,49.077c-.867,0-1.261.276-1.261,1.087,0,.924.442,1.151,1.653,1.151a8.923,8.923,0,0,0,1.866-.178V49.077Zm4.239-2.593v5.642a.411.411,0,0,1-.328.47,15.409,15.409,0,0,1-3.683.357c-2.291,0-3.454-.357-3.454-2.707,0-2.059,1.1-2.578,3.11-2.578h2.374v-.844c0-.908-.541-1.3-1.851-1.3H314.6c-.2,0-.246-.049-.246-.243v-.989c0-.194.066-.227.229-.259a14.739,14.739,0,0,1,2.7-.211C320.17,43.824,321.12,44.732,321.12,46.483Z" transform="translate(-205.195 -37.973)" fill="#409d76"/>
+    <path id="Rectangle_510" d="M.325,0h1.33a.325.325,0,0,1,.325.325V12.078a.325.325,0,0,1-.325.325H.326A.326.326,0,0,1,0,12.077V.325A.325.325,0,0,1,.325,0Z" transform="translate(117.969 2.495)" fill="#409d76"/>
+    <path id="Path_281" d="M342.55,44a.262.262,0,0,1,.245.292v.989c0,.162-.082.243-.262.243h-2.57c-1.752,0-1.98.568-1.98,2.854s.229,2.87,1.98,2.87h2.57c.18,0,.262.081.262.243v.989a.263.263,0,0,1-.245.292,17.086,17.086,0,0,1-2.587.179c-3.323,0-3.977-.909-3.977-4.572s.655-4.556,3.977-4.556A16.987,16.987,0,0,1,342.55,44Z" transform="translate(-210.667 -37.973)" fill="#409d76"/>
+    <path id="Path_282" d="M348.821,42.691a.216.216,0,0,1,.245.243v8.48a.216.216,0,0,1-.245.243h-1.49a.216.216,0,0,1-.245-.243v-8.48a.216.216,0,0,1,.245-.243Zm.442-2.561a1.036,1.036,0,0,1-1.179,1.119,1.121,1.121,0,1,1,0-2.237A1.036,1.036,0,0,1,349.263,40.13Z" transform="translate(-213.338 -36.76)" fill="#409d76"/>
+    <path id="Path_283" d="M354.223,40.611c.18-.049.279.049.279.227v2.27h1.62a.228.228,0,0,1,.261.243v1.022a.232.232,0,0,1-.261.259H354.5v4.945c0,.713.212.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.262.262,0,0,1-.245.292,7.384,7.384,0,0,1-1.162.114c-1.277,0-2.6-.032-2.6-1.978V41.243c0-.162.082-.227.23-.259Z" transform="translate(-214.714 -37.159)" fill="#409d76"/>
+    <path id="Path_284" d="M367.2,43.932a.217.217,0,0,1,.246.243v8.2c-.017,2.821-.573,3.842-3.9,3.842a17.949,17.949,0,0,1-2.766-.179.236.236,0,0,1-.213-.259v-.956c0-.178.066-.243.229-.243h2.636c1.637,0,2.029-.389,2.029-1.67v-.082a12.48,12.48,0,0,1-2.1.147c-3.028,0-3.8-1.022-3.8-4.3V44.175a.216.216,0,0,1,.245-.243h1.49a.216.216,0,0,1,.245.243v4.232c0,2.318.3,2.854,2.128,2.854a13.514,13.514,0,0,0,1.785-.1V44.175a.216.216,0,0,1,.245-.243Z" transform="translate(-216.445 -38)" fill="#409d76"/>
+    <path id="Path_285" d="M275.307,63.735c.164.032.245.114.245.259v.956c0,.162-.082.243-.261.243h-3.012c-.687,0-1.08.211-1.08.713V66.1c0,.389.212.7.9.956l2.145.778a2.183,2.183,0,0,1,1.669,2.367v.211c0,1.849-1.243,2.27-3.388,2.27-1.423,0-2.652-.1-3.191-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.066-.259.262-.259h3.175c1.1,0,1.441-.129,1.441-.7v-.162c0-.389-.2-.648-.934-.924l-2.16-.81a2.324,2.324,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.941,16.941,0,0,1,275.307,63.735Z" transform="translate(-194.276 -42.949)" fill="#005434"/>
+    <path id="Path_286" d="M287.859,63.665a.216.216,0,0,1,.245.243v8.2c-.017,2.821-.573,3.842-3.9,3.842a17.956,17.956,0,0,1-2.766-.179.236.236,0,0,1-.213-.259V74.56c0-.178.066-.243.229-.243h2.636c1.637,0,2.03-.389,2.03-1.67v-.081a12.57,12.57,0,0,1-2.1.146c-3.028,0-3.8-1.022-3.8-4.3V63.908a.216.216,0,0,1,.246-.243h1.49a.216.216,0,0,1,.245.243V68.14c0,2.318.294,2.854,2.128,2.854a13.509,13.509,0,0,0,1.784-.1V63.908a.216.216,0,0,1,.246-.243Z" transform="translate(-197.007 -42.977)" fill="#005434"/>
+    <path id="Path_287" d="M299.154,63.735c.164.032.246.114.246.259v.956c0,.162-.082.243-.262.243h-3.012c-.687,0-1.08.211-1.08.713V66.1c0,.389.213.7.9.956l2.144.778a2.184,2.184,0,0,1,1.67,2.367v.211c0,1.849-1.244,2.27-3.388,2.27-1.424,0-2.652-.1-3.192-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.065-.259.261-.259h3.176c1.1,0,1.44-.129,1.44-.7v-.162c0-.389-.2-.648-.932-.924l-2.161-.81a2.325,2.325,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.947,16.947,0,0,1,299.154,63.735Z" transform="translate(-200.119 -42.949)" fill="#005434"/>
+    <path id="Path_288" d="M305.925,60.343c.18-.049.279.049.279.227v2.27h1.621a.229.229,0,0,1,.262.243V64.1a.233.233,0,0,1-.262.259H306.2v4.945c0,.713.213.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.263.263,0,0,1-.245.292,7.466,7.466,0,0,1-1.163.113c-1.277,0-2.6-.032-2.6-1.978V60.975c0-.162.082-.227.229-.259Z" transform="translate(-202.881 -42.136)" fill="#005434"/>
+    <path id="Path_289" d="M312.99,67.463h3.748c-.016-1.751-.376-2.2-1.833-2.2C313.383,65.259,313.006,65.713,312.99,67.463Zm5.746.487v.487c0,.307-.1.437-.557.437H312.99c.049,1.718.442,2.107,2.029,2.107h2.8a.216.216,0,0,1,.245.243v1.006a.246.246,0,0,1-.23.275,20.493,20.493,0,0,1-2.93.178c-3.191,0-3.912-.907-3.912-4.555,0-3.664.72-4.573,3.912-4.573C317.982,63.556,318.7,64.432,318.736,67.95Z" transform="translate(-204.544 -42.949)" fill="#005434"/>
+    <path id="Path_290" d="M335.8,67.134l-.033,5.221c0,.162-.066.243-.23.243h-1.489c-.164,0-.229-.081-.229-.243v-4.6c0-2.4-.376-2.513-1.8-2.513a10.087,10.087,0,0,0-1.636.129,6.5,6.5,0,0,1,.245,2.027l-.032,4.961c0,.179-.066.244-.213.244h-1.506a.217.217,0,0,1-.246-.244V67.426c0-2.091-.408-2.172-1.8-2.172h-1.391v7.1a.216.216,0,0,1-.246.243H323.7c-.164,0-.23-.081-.245-.243V64.07c0-.194.082-.227.245-.259a16.721,16.721,0,0,1,2.914-.259,7.382,7.382,0,0,1,2.815.486,9.167,9.167,0,0,1,2.75-.5C334.884,63.535,335.817,64.07,335.8,67.134Z" transform="translate(-207.598 -42.943)" fill="#005434"/>
+    <path id="Path_291" d="M348.214,63.735c.164.032.245.114.245.259v.956c0,.162-.082.243-.262.243h-3.012c-.688,0-1.08.211-1.08.713V66.1c0,.389.213.7.9.956l2.143.778a2.184,2.184,0,0,1,1.67,2.367v.211c0,1.849-1.244,2.27-3.388,2.27-1.424,0-2.652-.1-3.192-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.066-.259.262-.259h3.176c1.1,0,1.44-.129,1.44-.7v-.162c0-.389-.2-.648-.932-.924l-2.161-.81a2.325,2.325,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.956,16.956,0,0,1,348.214,63.735Z" transform="translate(-212.139 -42.949)" fill="#005434"/>
   </g>
 </svg>

package/src/components/buttons/VcsActionButtonList.vue

@@ -0,0 +1,99 @@
+<template>
+  <div v-if="actions.length > 0" :class="classes">
+    <VcsButton
+      class="d-flex"
+      v-for="(button, index) in buttons"
+      :key="`${button.name}-${index}`"
+      :tooltip="button.title"
+      :icon="button.icon"
+      :active="button.active"
+      @click.stop="button.callback($event)"
+      v-bind="{...$attrs}"
+    />
+    <v-menu
+      v-if="overflowButtons.length > 0"
+      content-class="vcs-overflow-menu-wrap"
+      max-width="none"
+      :nudge-right="13"
+      offset-x
+    >
+      <template #activator="{ on, attrs }">
+        <VcsButton
+          v-bind="{...$attrs, ...attrs}"
+          v-on="on"
+          class="d-flex"
+        >
+          <v-icon v-text="overflowIcon" />
+        </VcsButton>
+      </template>
+      <VcsActionList :actions="overflowButtons" />
+    </v-menu>
+    <v-spacer v-else-if="blockOverflow" class="flex-grow-0 d-inline-block px-2" />
+  </div>
+</template>
+<style lang="scss">
+.action-btn-wrap{
+  gap: 8px;
+}
+</style>
+<script>
+
+  import VcsButton from './VcsButton.vue';
+  import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
+
+  /**
+   * @description
+   * A component rendering a list of actions with overflow mechanic using
+   * {@link VcsButton} and {@link VcsActionList}.
+   * @vue-prop {Array<VcsAction>} actions - Array of actions
+   * @vue-prop {number} [overflowCount=2] - number of buttons rendered until overflow.
+   * @vue-prop {string} [overflowIcon='$vcsKebab'] - optional custom icon for overflow button
+   * @vue-prop {boolean} [blockOverflow=false] - if space for the overflow should be blocked or not (e.g. when rendering lists in a grid)
+   * @vue-computed {Array<VcsAction>} buttons - buttons rendered directly, have to provide an icon
+   * @vue-computed {Array<VcsAction>} overflowButtons - rest of buttons rendered in overflow
+   */
+  export default {
+    name: 'VcsActionButtonList',
+    components: { VcsActionList, VcsButton },
+    props: {
+      actions: {
+        type: Array,
+        required: true,
+        validator: validateActions,
+      },
+      overflowCount: {
+        type: Number,
+        default: 2,
+      },
+      overflowIcon: {
+        type: String,
+        default: '$vcsKebab',
+      },
+      blockOverflow: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      right() { return this.$attrs.right !== undefined && this.$attrs.right !== false; },
+      buttons() {
+        const buttons = this.actions.filter(i => i.icon).slice(0, this.overflowCount);
+        if (this.right) {
+          return buttons.reverse();
+        }
+        return buttons;
+      },
+      overflowButtons() {
+        const buttonsNames = this.buttons.map(i => i.name);
+        return this.actions.filter(i => !buttonsNames.includes(i.name));
+      },
+      classes() {
+        const classes = ['d-flex', 'align-center', 'action-btn-wrap'];
+        if (this.right) {
+          classes.push('justify-end');
+        }
+        return classes;
+      },
+    },
+  };
+</script>