@vcmap/ui 5.0.0-rc.10

package/src/icons/SimpleCircleOutlinedIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+    <g id="Rectangle_750" data-name="Rectangle 750" fill="none" stroke="#585858" stroke-width="2">
+      <rect width="8" height="8" rx="4" stroke="none" />
+      <rect
+        x="1"
+        y="1"
+        width="6"
+        height="6"
+        rx="3"
+        fill="none"
+      />
+    </g>
+  </svg>
+</template>

package/src/icons/SkipNextIcon.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <path id="Path_92" data-name="Path 92" d="M7,15.377a1,1,0,0,0,1.669.744l3.753-3.378a1,1,0,0,0,.075-1.412q-.036-.039-.075-.075L8.67,7.878A1,1,0,0,0,7,8.622ZM14,8v8a1,1,0,0,0,1,1h1a1,1,0,0,0,1-1V8a1,1,0,0,0-1-1H15A1,1,0,0,0,14,8Z" transform="translate(-7 -7)" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/SkipPreviousIcon.vue

@@ -0,0 +1,9 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <g id="streamline-icon-button-previous_24x24" data-name="streamline-icon-button-previous@24x24" transform="translate(-7 -7)">
+      <path id="Path_92" data-name="Path 92" d="M17,15.377a1,1,0,0,1-1.669.744l-3.753-3.378a1,1,0,0,1-.075-1.412q.036-.039.075-.075L15.33,7.878A1,1,0,0,1,17,8.622ZM10,8v8a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V8A1,1,0,0,1,8,7H9A1,1,0,0,1,10,8Z" fill="currentColor" />
+    </g>
+  </svg>
+</template>

package/src/icons/SplitViewIcon.vue

@@ -0,0 +1,19 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25.003" viewBox="0 0 25 25.003">
+    <g id="icon_24_splitview" transform="translate(0.5 0.5)">
+      <path
+        id="Union_46"
+        data-name="Union 46"
+        d="M10942,13196v-22a1,1,0,1,1,2,0v22a1,1,0,1,1-2,0Zm9.5-9.25v-.5a.5.5,0,0,0-.5-.5h-4v-2h4a.5.5,0,0,0,.5-.5v-.5a.75.75,0,0,1,1.281-.53l2,2a.747.747,0,0,1,0,1.06l-2,2a.757.757,0,0,1-.529.218A.748.748,0,0,1,10951.5,13186.75Zm-18.279.53-2-2a.75.75,0,0,1,0-1.063l2-2a.736.736,0,0,1,.526-.219.747.747,0,0,1,.752.749v.5a.5.5,0,0,0,.5.5h4v2h-4a.5.5,0,0,0-.5.5v.5a.763.763,0,0,1-.218.534.754.754,0,0,1-1.061,0Zm5.779-1.53Zm8-2Z"
+        transform="translate(-10931 -13172.998)"
+        fill="currentColor"
+        stroke="rgba(0,0,0,0)"
+        stroke-miterlimit="10"
+        stroke-width="1"
+      />
+      <rect id="size" width="24" height="24" fill="none" />
+    </g>
+  </svg>
+</template>

package/src/icons/TextStyleIcon.vue

@@ -0,0 +1,14 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg
+    id="streamline-icon-text-style_24x24"
+    data-name="streamline-icon-text-style@24x24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="20.105"
+    height="24"
+    viewBox="0 0 20.105 24"
+  >
+    <path id="Path_4" data-name="Path 4" d="M20.093.359H4.512A2.268,2.268,0,0,0,2.25,2.622V4.57a1.289,1.289,0,1,0,2.578,0V3.194a.258.258,0,0,1,.258-.258h5.671a.258.258,0,0,1,.258.258V21.524a.258.258,0,0,1-.258.258H8.894a1.289,1.289,0,0,0,0,2.578h6.817a1.289,1.289,0,0,0,0-2.578H13.849a.258.258,0,0,1-.258-.258V3.194a.258.258,0,0,1,.258-.258H19.52a.258.258,0,0,1,.258.258V4.57a1.289,1.289,0,0,0,2.578,0V2.622A2.268,2.268,0,0,0,20.093.359Z" transform="translate(-2.25 -0.359)" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/ThreeDimensionsIcon.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16">
+    <path id="Path_488" data-name="Path 488" d="M6.688-1.914q-1.633,0-3.112-.117T.912-2.361v-2.53H5.545a6.016,6.016,0,0,0,1.367-.128A1.38,1.38,0,0,0,7.7-5.465a1.4,1.4,0,0,0,.255-.893v-.659a1.4,1.4,0,0,0-.265-.9,1.568,1.568,0,0,0-.7-.489,3.314,3.314,0,0,0-1.01-.181L2.259-8.74v-2.424l3.592-.213a3.148,3.148,0,0,0,1.429-.34,1.084,1.084,0,0,0,.51-1.021v-.532a1.464,1.464,0,0,0-.541-1.255,3.086,3.086,0,0,0-1.806-.4h-4.2v-2.509q1.163-.191,2.531-.351a19.986,19.986,0,0,1,2.878-.117,5.416,5.416,0,0,1,2.245.457,3.056,3.056,0,0,1,1.4,1.3,4.343,4.343,0,0,1,.48,2.137v1.17a4.139,4.139,0,0,1-.133,1.084,2.432,2.432,0,0,1-.4.84,2.756,2.756,0,0,1-.612.6,2.777,2.777,0,0,1-.735.372,2.119,2.119,0,0,1,.806.4,3.242,3.242,0,0,1,.663.712,3.531,3.531,0,0,1,.459.989,4.322,4.322,0,0,1,.173,1.255v.808A3.6,3.6,0,0,1,9.851-2.9,4.678,4.678,0,0,1,6.688-1.914Zm6.571-.128V-17.778h6.388a5.225,5.225,0,0,1,2.551.564A4.166,4.166,0,0,1,23.82-15.6a7.532,7.532,0,0,1,.847,2.5,19.165,19.165,0,0,1,.245,3.19,14.119,14.119,0,0,1-.582,4.4,5.146,5.146,0,0,1-1.745,2.6,4.806,4.806,0,0,1-2.939.861Zm3.02-2.828h3.061a1.988,1.988,0,0,0,1.49-.564,3.471,3.471,0,0,0,.806-1.691,12.866,12.866,0,0,0,.255-2.786,15.951,15.951,0,0,0-.163-2.52,4.7,4.7,0,0,0-.48-1.542,1.742,1.742,0,0,0-.8-.766,2.722,2.722,0,0,0-1.112-.213H16.279Z" transform="translate(-0.912 17.914)" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/ToolsIcon.vue

@@ -0,0 +1,35 @@
+<!-- eslint-disable max-len -->
+<template>
+  <svg>
+    <rect id="size" width="24" height="24" fill="none" />
+    <g id="Group_719" data-name="Group 719" transform="translate(-0.001)">
+      <rect
+        id="Rectangle_667"
+        data-name="Rectangle 667"
+        width="5"
+        height="1"
+        transform="translate(5.001 19)"
+        fill="currentColor"
+      />
+      <rect
+        id="Rectangle_668"
+        data-name="Rectangle 668"
+        width="2"
+        height="10"
+        transform="translate(8 8)"
+        fill="currentColor"
+      />
+      <path id="Path_366" data-name="Path 366" d="M7.957,3.3a.5.5,0,0,0-.913,0L5.176,7H9.825Z" fill="currentColor" />
+      <path id="Path_367" data-name="Path 367" d="M5,21.5a2.5,2.5,0,1,0,5,0V21H5v.5Z" fill="currentColor" />
+      <rect
+        id="Rectangle_669"
+        data-name="Rectangle 669"
+        width="2"
+        height="10"
+        transform="translate(5.001 8)"
+        fill="currentColor"
+      />
+      <path id="Path_368" data-name="Path 368" d="M18.5,0h-6a.5.5,0,0,0-.5.5V3h2.5a.5.5,0,0,1,0,1H12V7h2.5a.5.5,0,0,1,0,1H12v3h2.5a.5.5,0,0,1,0,1H12v3h2.5a.5.5,0,0,1,0,1H12v3h2.5a.5.5,0,0,1,0,1H12v3.5a.5.5,0,0,0,.5.5h6a.5.5,0,0,0,.5-.5V.5A.5.5,0,0,0,18.5,0Z" fill="currentColor" />
+    </g>
+  </svg>
+</template>

package/src/icons/TouchIcon.vue

@@ -0,0 +1,8 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon-touch" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <rect id="size" width="16" height="16" fill="none" />
+    <path id="touch-app" d="M16.668-42.679a1.077,1.077,0,0,1,.679,1.036v.143l-.571,4.036a.976.976,0,0,1-.357.7,1.136,1.136,0,0,1-.75.268H10.489a1.069,1.069,0,0,1-.786-.321L5.918-40.607l.607-.607a.827.827,0,0,1,.607-.25.294.294,0,0,1,.089.018.294.294,0,0,0,.089.018l2.607.536v-8.179a1.082,1.082,0,0,1,.339-.821,1.129,1.129,0,0,1,.8-.321,1.129,1.129,0,0,1,.8.321,1.082,1.082,0,0,1,.339.821V-44.5h.607a1.969,1.969,0,0,1,.393.071Zm-7.5-3.536a3.211,3.211,0,0,1-1.536-2.857,3.306,3.306,0,0,1,1-2.429,3.306,3.306,0,0,1,2.429-1,3.306,3.306,0,0,1,2.429,1,3.306,3.306,0,0,1,1,2.429,3.178,3.178,0,0,1-1.5,2.857v-2.857a1.8,1.8,0,0,0-.571-1.339,1.884,1.884,0,0,0-1.357-.554,1.824,1.824,0,0,0-1.339.554,1.824,1.824,0,0,0-.554,1.339Z" transform="translate(-3.633 52.5)" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/TrashCanIcon.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="14" viewBox="0 0 12 14">
+    <path id="delete" d="M14.525,4.27A.5.5,0,0,1,15,4.784V5.05a.5.5,0,0,1-.475.514H3.476A.5.5,0,0,1,3,5.05V4.784a.5.5,0,0,1,.476-.514H5.42a.866.866,0,0,0,.827-.71l.1-.477A1.341,1.341,0,0,1,7.624,2h2.753a1.338,1.338,0,0,1,1.268,1.048l.109.511a.865.865,0,0,0,.827.711Zm-.988,9.724c.2-1.986.558-6.7.558-6.751a.539.539,0,0,0-.121-.391.474.474,0,0,0-.349-.164H4.379a.461.461,0,0,0-.349.164.571.571,0,0,0-.127.391c0,.009.014.175.035.453.095,1.234.358,4.672.529,6.3a1.989,1.989,0,0,0,1.954,1.979c.837.02,1.7.027,2.581.027.831,0,1.674-.007,2.537-.027A1.988,1.988,0,0,0,13.537,13.994Z" transform="translate(-3 -2)" fill="currentColor" fill-rule="evenodd" />
+  </svg>
+</template>

package/src/icons/TriangleIcon.vue

@@ -0,0 +1,15 @@
+
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg
+    id="streamline-icon-vectors-anchor-triangle_24x24"
+    data-name="streamline-icon-vectors-anchor-triangle@24x24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path id="Path_22" data-name="Path 22" d="M12,0A3,3,0,1,1,9,3,3,3,0,0,1,12,0ZM3,18a3,3,0,1,1-3,3A3,3,0,0,1,3,18Zm18,0a3,3,0,1,1-3,3A3,3,0,0,1,21,18ZM4.218,15.829,8.494,7.276a.251.251,0,0,1,.336-.111l1.342.671a.25.25,0,0,1,.112.335L6.008,16.724a.25.25,0,0,1-.335.112L4.33,16.164A.249.249,0,0,1,4.218,15.829Zm9.611-7.993,1.342-.671a.249.249,0,0,1,.335.112l4.276,8.553a.249.249,0,0,1-.112.335l-1.342.671a.249.249,0,0,1-.335-.112L13.717,8.171A.251.251,0,0,1,13.829,7.836ZM7.75,20h8.5a.25.25,0,0,1,.25.25v1.5a.25.25,0,0,1-.25.25H7.75a.25.25,0,0,1-.25-.25v-1.5A.25.25,0,0,1,7.75,20Z" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/TwoDimensionsIcon.vue

@@ -0,0 +1,8 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_24_2d" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <rect id="size" width="24" height="24" fill="none" />
+    <path id="Path_489" data-name="Path 489" d="M1.1-1.9V-4.456L6.295-9.711a10.338,10.338,0,0,0,1.03-1.158,4.419,4.419,0,0,0,.6-1.062,3.144,3.144,0,0,0,.2-1.126,2.11,2.11,0,0,0-.221-1,1.4,1.4,0,0,0-.715-.633A3.481,3.481,0,0,0,5.833-14.9H1.461v-2.488q1.009-.193,2.238-.354A21.267,21.267,0,0,1,6.442-17.9a6.568,6.568,0,0,1,2.869.515,3.046,3.046,0,0,1,1.482,1.48,5.6,5.6,0,0,1,.441,2.338,6.333,6.333,0,0,1-.284,1.952,6.587,6.587,0,0,1-.83,1.684A10.5,10.5,0,0,1,8.733-8.317L5.244-4.778h6.473V-1.9Zm12,0V-17.775h6.578a5.474,5.474,0,0,1,2.627.568,4.247,4.247,0,0,1,1.671,1.63,7.492,7.492,0,0,1,.872,2.52A18.941,18.941,0,0,1,25.1-9.84a13.968,13.968,0,0,1-.6,4.44,5.188,5.188,0,0,1-1.8,2.627,5.023,5.023,0,0,1-3.026.869Zm3.11-2.853h3.152A2.071,2.071,0,0,0,20.9-5.325a3.472,3.472,0,0,0,.83-1.705,12.719,12.719,0,0,0,.263-2.81,15.763,15.763,0,0,0-.168-2.542,4.673,4.673,0,0,0-.494-1.555,1.778,1.778,0,0,0-.82-.772,2.854,2.854,0,0,0-1.145-.214H16.214Z" transform="translate(-1.104 21.904)" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/UploadIcon.vue

@@ -0,0 +1,14 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg
+    id="streamline-icon-cloud-upload_24x24_1_"
+    data-name="streamline-icon-cloud-upload@24x24 (1)"
+    xmlns="http://www.w3.org/2000/svg"
+    width="25.717"
+    height="24"
+    viewBox="0 0 25.717 24"
+  >
+    <path id="Path_121" data-name="Path 121" d="M25.713,11.1a6.236,6.236,0,0,0-1.9-4.464,6.117,6.117,0,0,0-3.693-1.7.267.267,0,0,1-.2-.129A8.232,8.232,0,0,0,4.811,7.266a.268.268,0,0,1-.243.214A4.918,4.918,0,0,0,0,12.381,4.632,4.632,0,0,0,1.324,15.82,5.912,5.912,0,0,0,5.187,17.3a1.071,1.071,0,1,0-.032-2.143A3.525,3.525,0,0,1,2.828,14.3a2.544,2.544,0,0,1-.685-1.919A2.775,2.775,0,0,1,5.487,9.664,1.071,1.071,0,0,0,6.752,8.83a1.043,1.043,0,0,0,.02-.151A6.092,6.092,0,0,1,18.365,6.442a1.031,1.031,0,0,0,1.008.611,3.965,3.965,0,0,1,2.955,1.126A4.02,4.02,0,0,1,23.571,11.1a4.109,4.109,0,0,1-3.683,4.057,1.071,1.071,0,0,0,.141,2.134,1.018,1.018,0,0,0,.14-.01A6.221,6.221,0,0,0,25.713,11.1Zm-12.1-1.526a1.072,1.072,0,0,0-1.515,0l-3.75,3.75a1.071,1.071,0,0,0,.757,1.833h1.875a.266.266,0,0,1,.268.266v7.77a1.607,1.607,0,1,0,3.214,0V15.424a.266.266,0,0,1,.266-.268h1.877a1.071,1.071,0,0,0,.757-1.829Z" transform="translate(0.004 -0.799)" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/VideoRecorderIcon.vue

@@ -0,0 +1,14 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg
+    id="streamline-icon-camera-studio_24x24"
+    data-name="streamline-icon-camera-studio@24x24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="20.999"
+    viewBox="0 0 24 20.999"
+  >
+    <path id="Path_15" data-name="Path 15" d="M23.5,12.989a1.175,1.175,0,0,0-1.121-.066L19.653,14.06a.251.251,0,0,0-.154.231v5.416a.251.251,0,0,0,.154.231l2.73,1.137a1.154,1.154,0,0,0,1.122-.066A1.178,1.178,0,0,0,24,20V14A1.178,1.178,0,0,0,23.5,12.989ZM2.5,11.5h14A1.5,1.5,0,0,1,18,13v8a1.5,1.5,0,0,1-1.5,1.5H2.5A1.5,1.5,0,0,1,1,21V13A1.5,1.5,0,0,1,2.5,11.5Zm2-10A4.5,4.5,0,1,1,0,6,4.5,4.5,0,0,1,4.5,1.5Zm9,3a3,3,0,1,1-3,3A3,3,0,0,1,13.5,4.5Z" transform="translate(0 -1.5)" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/WalkingIcon.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="10.666" height="15.999" viewBox="0 0 10.666 15.999">
+    <path id="Path_7" data-name="Path 7" d="M9.731.784A1.828,1.828,0,0,1,11.6,2.567a1.872,1.872,0,0,1-3.74,0A1.828,1.828,0,0,1,9.731.784ZM11.37,8.2a6.486,6.486,0,0,0,1.809.9l.88.28a1.176,1.176,0,0,0,.355.055,1.066,1.066,0,0,0,.3-2.1l-.827-.262a4.2,4.2,0,0,1-1.17-.585l-.76-.543A4.438,4.438,0,0,0,7.5,5.558,4.494,4.494,0,0,0,4.869,9.531,1.088,1.088,0,0,0,5.9,10.679c.029,0,.058,0,.088,0A1.1,1.1,0,0,0,7.113,9.665a2.409,2.409,0,0,1,1.213-2.1.193.193,0,0,1,.257.06.164.164,0,0,1,.027.093v.968a13.235,13.235,0,0,1-.346,3.008,8.9,8.9,0,0,1-1.655,3.352,1.037,1.037,0,0,0,.176,1.5,1.16,1.16,0,0,0,1.578-.168,12.131,12.131,0,0,0,1.915-3.786.192.192,0,0,1,.324-.058,11.634,11.634,0,0,1,1.807,3.514,1.118,1.118,0,0,0,1.065.732,1.15,1.15,0,0,0,.355-.056,1.06,1.06,0,0,0,.711-1.353v0a12.176,12.176,0,0,0-3.417-5.362.7.7,0,0,1-.266-.538V8.186a.183.183,0,0,1,.187-.178.2.2,0,0,1,.112.036Z" transform="translate(-4.866 -0.784)" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/WallIcon.vue

@@ -0,0 +1,14 @@
+<!-- eslint-disable max-len -->
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.158" height="22" viewBox="0 0 20.158 22">
+    <defs>
+      <clipPath id="clip-path">
+        <rect id="Rectangle_843" data-name="Rectangle 843" width="20.158" height="22" fill="currentColor" />
+      </clipPath>
+    </defs>
+    <g id="Group_1440" data-name="Group 1440" clip-path="url(#clip-path)">
+      <path id="Path_530" data-name="Path 530" d="M16.158,20h-3V2h3V7h2V1a1,1,0,0,0-1-1H12.593a1,1,0,0,0-.2.02L.805,2.33A1,1,0,0,0,0,3.311V15.864a1,1,0,0,0,.59.913L12,21.912a1,1,0,0,0,.41.088h4.745a1,1,0,0,0,1-1V15h-2ZM2,4.131l9.158-1.825V19.339L2,15.218Z" fill="currentColor" />
+      <path id="Path_531" data-name="Path 531" d="M17.158,8a3,3,0,1,0,3,3,3,3,0,0,0-3-3" fill="currentColor" />
+    </g>
+  </svg>
+</template>

package/src/init.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import { check, checkMaybe } from '@vcsuite/check';
+import { Context } from '@vcmap/core';
+import VcsAppComponentWrapper from './application/vcsAppWrapper.vue';
+import { vuetify } from './vuePlugins/vuetify.js';
+import { createVueI18n, setupI18n } from './vuePlugins/i18n.js';
+import VcsUiApp from './vcsUiApp.js';
+
+/**
+ * creates and mounts a vcsApp
+ * @param {string} mountTarget
+ * @param {string=} configUrl optional config
+ * @returns {Promise<VcsUiApp>}
+ */
+export default async function initApp(mountTarget, configUrl) {
+  check(mountTarget, String);
+  checkMaybe(configUrl, String);
+  const app = new VcsUiApp();
+  const i18n = createVueI18n();
+  new Vue({
+    vuetify,
+    i18n,
+    render: h => h(VcsAppComponentWrapper, {
+      props: {
+        appId: app.id,
+      },
+    }),
+  }).$mount(mountTarget);
+
+  setupI18n(app, i18n);
+  if (configUrl) {
+    const config = await fetch(configUrl)
+      .then(response => response.json());
+    const context = new Context(config);
+    await app.addContext(context);
+  }
+  return app;
+}

package/src/manager/buttonManager.js

@@ -0,0 +1,156 @@
+/* eslint-disable import/prefer-default-export */
+import { reactive } from '@vue/composition-api';
+import { VcsEvent } from '@vcmap/core';
+import { v4 as uuidv4 } from 'uuid';
+import { check, checkMaybe } from '@vcsuite/check';
+import { vcsAppSymbol } from '../pluginHelper.js';
+
+/**
+ * @typedef ButtonComponentOptions
+ * @property {string} [id] Optional ID, If not provided an uuid will be generated.
+ * @property {VcsAction} action Action performed by button.
+ */
+
+/**
+ * @typedef ButtonComponent
+ * @property {string} id
+ * @property {string|vcsAppSymbol} owner
+ * @property {VcsAction} action
+ */
+
+/**
+ * @class ButtonManager
+ * @description Manages a set of Map Buttons
+ * @implements VcsComponentManager<ButtonComponent,ButtonComponentOptions>
+ */
+export class ButtonManager {
+  constructor() {
+    /**
+     * @type {import("@vcmap/core").VcsEvent<ButtonComponent>}
+     */
+    this.added = new VcsEvent();
+    /**
+     * @type {import("@vcmap/core").VcsEvent<ButtonComponent>}
+     */
+    this.removed = new VcsEvent();
+    /**
+     * reactive ordered array of ids,
+     * @type {Array<string>}
+     */
+    this.componentIds = reactive([]);
+
+    /**
+     * @type {Map<string, ButtonComponent>}
+     * @private
+     */
+    this._buttonComponents = new Map();
+  }
+
+
+  /**
+   * @param {string} id
+   * @returns {ButtonComponent}
+   */
+  get(id) {
+    return this._buttonComponents.get(id);
+  }
+
+  /**
+   * @param {string} id
+   * @returns {boolean}
+   */
+  has(id) {
+    return this._buttonComponents.has(id);
+  }
+
+  /**
+   * removes a button, Component will not be rendered anymore and will be destroyed. Add ButtonComponent again
+   * to show the component again
+   * @param {string} id
+   */
+  remove(id) {
+    check(id, String);
+    const buttonComponent = this._buttonComponents.get(id);
+    if (buttonComponent) {
+      const index = this.componentIds.indexOf(id);
+      this.componentIds.splice(index, 1);
+      this._buttonComponents.delete(id);
+      this.removed.raiseEvent(buttonComponent);
+    }
+  }
+
+  /**
+   * adds a buttonComponent
+   * @param {ButtonComponentOptions} buttonComponentOptions
+   * @param {string|symbol} owner pluginName or vcsAppSymbol
+   * @throws {Error} if a buttonComponent with the same ID has already been added
+   * @returns {ButtonComponent}
+   */
+  add(buttonComponentOptions, owner) {
+    checkMaybe(buttonComponentOptions.id, String);
+    check(buttonComponentOptions.action, {
+      name: String,
+      title: [undefined, String],
+      icon: [undefined, String],
+      callback: Function,
+      active: [undefined, Boolean],
+    });
+    check(owner, [String, vcsAppSymbol]);
+
+    if (buttonComponentOptions.id && this.has(buttonComponentOptions.id)) {
+      throw new Error(`A button with id ${buttonComponentOptions.id} has already been registered.`);
+    }
+    const id = buttonComponentOptions.id || uuidv4();
+
+    /**
+     * @type {ButtonComponent}
+     */
+    const buttonComponent = {
+      get id() {
+        return id;
+      },
+      get owner() {
+        return owner;
+      },
+      get action() {
+        return reactive(buttonComponentOptions.action);
+      },
+    };
+
+    this._buttonComponents.set(id, buttonComponent);
+    this.componentIds.push(id);
+    this.added.raiseEvent(buttonComponent);
+    return buttonComponent;
+  }
+
+  /**
+   * removes all buttonComponents of a specific owner and fires removed Events
+   * @param {string|vcsAppSymbol} owner
+   */
+  removeOwner(owner) {
+    const componentIds = [...this.componentIds];
+    componentIds.forEach((id) => {
+      if (owner === this.get(id).owner) {
+        this.remove(id);
+      }
+    });
+  }
+
+  /**
+   * removes all buttonComponents and fires removed Events
+   */
+  clear() {
+    const componentIds = [...this.componentIds];
+    componentIds.forEach((id) => { this.remove(id); });
+  }
+
+  /**
+   * destroys the ButtonManager;
+   */
+  destroy() {
+    this.added.destroy();
+    this.removed.destroy();
+    this.componentIds.splice(0);
+    this._buttonComponents.clear();
+  }
+}

package/src/manager/navbarManager.js

@@ -0,0 +1,81 @@
+import { check } from '@vcsuite/check';
+import { ButtonManager } from './buttonManager.js';
+import { vcsAppSymbol } from '../pluginHelper.js';
+
+export const locationSymbol = Symbol('location');
+
+/**
+ * sorts by owner and optionally plugin order
+ * @param {ButtonComponent} a
+ * @param {ButtonComponent} b
+ * @param {string[]} [order] order of owners to sort by
+ * @returns {number}
+ */
+function sortByOwner(a, b, order = []) {
+  const sorted = [vcsAppSymbol, ...order];
+  const indexA = sorted.indexOf(a.owner);
+  const indexB = sorted.indexOf(b.owner);
+
+  if (indexA === indexB) {
+    return 0;
+  }
+
+  if (indexA === -1) {
+    return 1;
+  }
+
+  if (indexB === -1) {
+    return -1;
+  }
+  return indexA - indexB;
+}
+
+/**
+ * filters actions by button location and returns actions (optionally sorted)
+ * @param {Array<ButtonComponent>} buttonComponents
+ * @param {ButtonLocation} location Button render position
+ * @param {string[]} [order] optional order to sort by (plugin names)
+ * @param {function(a: ButtonComponent, b: ButtonComponent, order: string[]):number} [compareFn=sortByOwner] Per default components are sorted by owner: app first, then plugins
+ * @returns {Array<VcsAction>}
+ */
+export function getActionsByLocation(buttonComponents, location, order = [], compareFn = sortByOwner) {
+  return [...buttonComponents]
+    .filter(b => b[locationSymbol] === location)
+    .sort((a, b) => compareFn(a, b, order))
+    .map(b => b.action);
+}
+
+/**
+ * Possible render positions of buttons in navbar from left to right
+ * @enum
+ */
+export const ButtonLocation = {
+  MAP: 0,
+  CONTENT: 1,
+  TOOL: 2,
+  PROJECT: 3,
+  SHARE: 4,
+  MENU: 5,
+};
+
+/**
+ * @class NavbarManager
+ * @description Manages a set of Map Buttons in the Navbar
+ * @implements VcsComponentManager<ButtonComponent,ButtonComponentOptions>
+ */
+export class NavbarManager extends ButtonManager {
+  /**
+   * adds a buttonComponent
+   * @param {ButtonComponentOptions} buttonComponentOptions
+   * @param {string|symbol} owner pluginName or vcsAppSymbol
+   * @param {ButtonLocation} location Button render position
+   * @throws {Error} if a buttonComponent with the same ID has already been added
+   * @returns {ButtonComponent}
+   */
+  add(buttonComponentOptions, owner, location) {
+    check(location, Object.values(ButtonLocation));
+    const buttonComponent = super.add(buttonComponentOptions, owner);
+    buttonComponent[locationSymbol] = location;
+    return buttonComponent;
+  }
+}

package/src/manager/toolbox/ToolboxGroupComponent.vue

@@ -0,0 +1,128 @@
+<template>
+  <div v-if="actions.length > 0">
+    <VcsButton
+      v-if="singleActionButton"
+      :key="singleActionButton.name"
+      :tooltip="singleActionButton.title"
+      :icon="singleActionButton.icon"
+      :active="singleActionButton.active"
+      @click.stop="singleActionButton.callback($event)"
+      v-bind="{...$attrs}"
+    />
+    <VcsButton
+      v-else-if="groupButtons.length > 0"
+      v-bind="{...$attrs}"
+      width="48"
+      :icon="groupIcon"
+      :tooltip="groupTitle"
+      :active="active"
+      @click="$emit('click')"
+    >
+      <v-icon v-text="active ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
+    </VcsButton>
+    <v-toolbar
+      v-if="active"
+      dense
+      absolute
+      :width="width"
+      class="toolbar__secondary rounded-b mx-auto v-sheet mt-12 px-4"
+      :style="{left: `${nudgeLeft}px` }"
+    >
+      <v-toolbar-items class="w-full">
+        <div class="d-flex align-center justify-space-between w-full action-btn-wrap">
+          <VcsButton
+            v-for="(button, index) in groupButtons"
+            :key="`${button.name}-${index}`"
+            :tooltip="button.title"
+            :icon="button.icon"
+            :active="button.active"
+            @click.stop="button.callback($event)"
+            small
+            :width="buttonSize"
+            v-bind="{...$attrs}"
+          />
+        </div>
+      </v-toolbar-items>
+    </v-toolbar>
+  </div>
+</template>
+<style lang="scss" scoped>
+.action-btn-wrap{
+  gap: 8px;
+}
+.v-toolbar.v-sheet {
+  background-color: #ffffffda;
+}
+</style>
+<script>
+
+  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import { validateActions } from '../../components/lists/VcsActionList.vue';
+
+  /**
+   * @description
+   * A component rendering a single action or a group of actions in a dropdown toolbox using {@link VcsButton} and {@link ToolboxButton}.
+   * @vue-prop {Array<VcsAction>} actions - Array of actions
+   * @vue-prop {string} [groupIcon=''] - optional icon for group dropdown button
+   * @vue-prop {string} [groupTitle=''] - optional title for group dropdown button
+   * @vue-prop {boolean} active - boolean flag, whether group is active
+   * @vue-prop {boolean} position - relative x-position of the button within the toolbar
+   * @vue-computed {Array<VcsAction>} singleActionButton - single button without dropdown
+   * @vue-computed {Array<VcsAction>} groupButtons - buttons rendered below group dropdown button
+   * @vue-computed {number} nudgeLeft - offset depending on buttonSize and buttonPadding to render toolbox centered below dropdown button
+   */
+  export default {
+    name: 'ToolboxGroupComponent',
+    components: { VcsButton },
+    props: {
+      actions: {
+        type: Array,
+        required: true,
+        validator: validateActions,
+      },
+      groupIcon: {
+        type: String,
+        required: true,
+      },
+      groupTitle: {
+        type: String,
+        default: '',
+      },
+      active: {
+        type: Boolean,
+        required: true,
+      },
+      position: {
+        type: Number,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        buttonSize: 34,
+        buttonPadding: 8,
+      };
+    },
+    computed: {
+      singleActionButton() {
+        if (this.actions.length === 1) {
+          return this.actions[0];
+        }
+        return undefined;
+      },
+      groupButtons() {
+        if (this.singleActionButton) {
+          return [];
+        }
+        return this.actions;
+      },
+      width() {
+        // XXX can this be solved by CSS to get rid of hardcoded size and padding?
+        return this.groupButtons.length * (this.buttonSize + 2 * this.buttonPadding);
+      },
+      nudgeLeft() {
+        return this.position - this.width / 2;
+      },
+    },
+  };
+</script>