@vcmap/ui 6.0.0-rc.5 → 6.0.0-rc.7

package/src/contentTree/layerGroupContentTreeItem.js

@@ -3,13 +3,14 @@ import ContentTreeItem, {
 } from './contentTreeItem.js';
 import {
   getStateFromLayer,
+  setStyleAction,
   setViewpointAction,
 } from './layerContentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], defaultViewpoint?: string }} LayerGroupContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], defaultViewpoint?: string, availableStyles?: string[] }} LayerGroupContentTreeItemOptions
  * @property {Array<string>} layerNames list of LayerNames which should be activated on click
  * @property {string} [defaultViewpoint] - the name of an optional default viewpoint
  */
@@ -69,10 +70,18 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     this._listeners = [];
 
     /**
-     * @type {string|null}
+     * @type {string|undefined}
      * @private
      */
-    this._defaultViewpoint = options.defaultViewpoint || null;
+    this._defaultViewpoint = options.defaultViewpoint;
+
+    /**
+     * @type {string[]}
+     * @private
+     */
+    this._availableStyles = Array.isArray(options.availableStyles)
+      ? options.availableStyles.slice()
+      : [];
 
     this._setup();
   }
@@ -116,6 +125,13 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     this.visible = layers.some((l) => l.isSupported(this._app.maps.activeMap));
     this.state = getStateFromLayers(layers);
     setViewpointAction(this, this._app, this._defaultViewpoint);
+    setStyleAction(
+      this,
+      this._app,
+      this._listeners,
+      this._layerNames,
+      this._availableStyles,
+    );
 
     this._listeners.push(
       this._app.layers.removed.addEventListener(resetHandler),
@@ -166,6 +182,9 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     if (this._defaultViewpoint) {
       config.defaultViewpoint = this._defaultViewpoint;
     }
+    if (this._availableStyles.length > 0) {
+      config.availableStyles = this._availableStyles.slice();
+    }
     return config;
   }
 

package/src/featureInfo/BalloonComponent.vue

@@ -2,19 +2,23 @@
   <v-card class="mx-auto elevation-0" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
       <v-list-item class="px-1">
-        <template #prepend>
-          <div class="pl-1 pr-2">
-            <v-icon color="primary" size="16"> $vcsInfo </v-icon>
-          </div>
+        <template #prepend="prependScope">
+          <slot name="prepend" v-bind="prependScope">
+            <div class="pl-1 pr-2">
+              <v-icon color="primary" :size="iconSize"> $vcsInfo </v-icon>
+            </div>
+          </slot>
         </template>
-        <v-list-item-title>
-          <h3 class="font-weight-bold">
-            {{ $st(balloonTitle) }}
-          </h3>
-        </v-list-item-title>
-        <v-list-item-subtitle v-if="balloonSubtitle">
-          {{ $st(balloonSubtitle) }}
-        </v-list-item-subtitle>
+        <slot name="balloon-title" :attrs="{ ...$props, ...$attrs }">
+          <v-list-item-title>
+            <h3 class="font-weight-bold">
+              {{ $st(balloonTitle) }}
+            </h3>
+          </v-list-item-title>
+          <v-list-item-subtitle v-if="balloonSubtitle">
+            {{ $st(balloonSubtitle) }}
+          </v-list-item-subtitle>
+        </slot>
         <template #append>
           <VcsButton
             @click.stop="close"
@@ -73,6 +77,7 @@
   import { setupBalloonPositionListener } from './balloonHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import { getTag, getTagOptions } from '../components/tables/VcsTable.vue';
+  import { useIconSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description A balloon viewing feature attributes. Size dynamic dependent on number of attributes.
@@ -84,7 +89,9 @@
    * @vue-prop {Object} tags - optional object containing keys rendered as tags
    * @vue-prop {Array<import("ol/coordinate").Coordinate>} position - clicked position balloon is rendered at
    * @vue-data {slot} [#balloon-header] - slot to override balloon header, $props and $attrs are passed to `attrs`
+   * @vue-data {slot} [#balloon-title] - slot to override balloon title and subtitle, $props and $attrs are passed to `attrs`. Is overwritten by balloon-header slot.
    * @vue-data {slot} [#default] - slot to override balloon content, $props and $attrs are passed to `attrs`
+   * @vue-data {slot} [#prepend] - slot to override balloon header icon
    */
   export default {
     name: 'BalloonComponent',
@@ -186,8 +193,9 @@
         app.windowManager.remove(attrs['window-state'].id);
         destroyListener();
       };
-
+      const iconSize = useIconSize();
       return {
+        iconSize,
         close,
         getTag,
         getTagOptions,

package/src/featureInfo/BalloonComponent.vue.d.ts

@@ -24,6 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
 }, {
+    iconSize: import("vue").ComputedRef<number>;
     close: () => void;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;

package/src/featureInfo/abstractFeatureInfoView.d.ts

@@ -103,7 +103,7 @@ export type FeatureInfoViewOptions = import("@vcmap/core").VcsObjectOptions & {
     keyMapping?: Record<string, string>;
     valueMapping?: Record<string, string | Record<string, string>>;
     tags?: Record<string, HTMLTagOptions>;
-    window?: import("../manager/window/windowManager.js").WindowComponentOptions;
+    window?: Pick<import("../manager/window/windowManager.js").WindowComponentOptions, 'state' | 'slot' | 'position'>;
 };
 /**
  * Abstract class to be extended by FeatureInfoView classes
@@ -145,7 +145,7 @@ declare class AbstractFeatureInfoView extends VcsObject {
         [x: string]: HTMLTagOptions;
     };
     /**
-     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>|Object}
      * @private
      */
     private _window;
@@ -156,9 +156,9 @@ declare class AbstractFeatureInfoView extends VcsObject {
     private _component;
     /**
      * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
-     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions<FeatureInfoProps>,'state'|'slot'|'position'>|Object}
      */
-    get window(): Object | import("../manager/window/windowManager.js").WindowComponentOptions<Object>;
+    get window(): Object | Pick<import("../manager/window/windowManager.js").WindowComponentOptions<FeatureInfoProps>, "slot" | "state" | "position">;
     /**
      * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
      * @type {import("vue").Component<FeatureInfoProps, unknown, unknown>|undefined}

package/src/featureInfo/abstractFeatureInfoView.js

@@ -24,13 +24,13 @@ import { renderTemplate } from '../components/form-output/markdownHelper.js';
  *   keyMapping?: Record<string,string>,
  *   valueMapping?: Record<string, string|Record<string,string>>,
  *   tags?: Record<string, HTMLTagOptions>,
- *   window?: import("../manager/window/windowManager.js").WindowComponentOptions
+ *   window?: Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>
  * }} FeatureInfoViewOptions
  * @property {Array<string>} [attributeKeys] - list of keys to filter attributes of selected feature
  * @property {Object<string,string>} [keyMapping] - object providing text replacements or i18n strings for attribute keys
  * @property {Object<string, string|Object<string,string>>} [valueMapping] - object providing text replacements or i18n strings for attribute values
  * @property {Object<string,HTMLTagOptions>} [tags] - object with keys rendered as special html element. Value contains html options
- * @property {import("../manager/window/windowManager.js").WindowComponentOptions} [window] - state, slot, position can be set. Other options are predefined. headerTitle of window state can be a template string, e.g. "{{myAttribute}}" or ["{{layerName}}", " - ", "{{myAttribute}}"]
+ * @property {Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>} [window] - state, slot, position can be set. Other options are predefined. headerTitle of window state can be a template string, e.g. "{{myAttribute}}" or ["{{layerName}}", " - ", "{{myAttribute}}"]
  */
 
 /**
@@ -314,7 +314,7 @@ class AbstractFeatureInfoView extends VcsObject {
      */
     this.tags = options.tags || defaultOptions.tags;
     /**
-     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>|Object}
      * @private
      */
     this._window = options.window || defaultOptions.window;
@@ -327,7 +327,7 @@ class AbstractFeatureInfoView extends VcsObject {
 
   /**
    * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
-   * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+   * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions<FeatureInfoProps>,'state'|'slot'|'position'>|Object}
    */
   get window() {
     return this._window;

package/src/featureInfo/balloonHelper.js

@@ -28,7 +28,7 @@ export const balloonOffset = { x: 55, y: 25 };
  * @returns {undefined|import("@vcmap-cesium/engine").Cartesian2}
  */
 function getBalloonPositionCesium(scene, cartesian) {
-  return SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
+  return SceneTransforms.worldToWindowCoordinates(scene, cartesian);
 }
 
 /**

package/src/featureInfo/featureInfo.d.ts

@@ -11,9 +11,9 @@ export function getHighlightStyle(feature: FeatureType, layer: import("@vcmap/co
  */
 export function createFeatureInfoSession(app: import("../vcsUiApp.js").default): FeatureInfoSession;
 /**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>}
+ * @type {ClassRegistry<typeof AbstractFeatureInfoView>}
  */
-export const featureInfoClassRegistry: ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>;
+export const featureInfoClassRegistry: ClassRegistry<typeof AbstractFeatureInfoView>;
 /**
  * Symbol added to features to overwrite the layers predefined feature info
  * @type {symbol}

package/src/featureInfo/featureInfo.js

@@ -54,7 +54,7 @@ function getLogger() {
 }
 
 /**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>}
+ * @type {ClassRegistry<typeof AbstractFeatureInfoView>}
  */
 export const featureInfoClassRegistry = new ClassRegistry();
 

package/src/i18n/de.d.ts

@@ -334,8 +334,12 @@ declare namespace messages {
             export { header_1 as header };
             export let altitudeMode: string;
             export let clampToGround: string;
+            export let clampToTerrain: string;
+            export let clampTo3DTiles: string;
             export let absolute: string;
             export let relativeToGround: string;
+            export let relativeToTerrain: string;
+            export let relativeTo3DTiles: string;
             export let groundLevel: string;
             export let classificationType: string;
             export let none: string;
@@ -354,6 +358,7 @@ declare namespace messages {
             export let modelHeading: string;
             export let modelPitch: string;
             export let modelRoll: string;
+            export let modelAutoScale: string;
             export let baseUrl: string;
             export let extrudedHeight: string;
             export let skirt: string;

package/src/i18n/de.js

@@ -217,9 +217,13 @@ const messages = {
     vectorProperties: {
       header: 'Vektor Eigenschaften',
       altitudeMode: 'Höhenmodus',
-      clampToGround: 'Auf Gelände legen',
+      clampToGround: 'Auf Grund legen',
+      clampToTerrain: 'Auf Gelände legen',
+      clampTo3DTiles: 'Auf 3D Tiles legen',
       absolute: 'Absolut',
-      relativeToGround: 'Relativ zum Gelände',
+      relativeToGround: 'Relativ zum Grund',
+      relativeToTerrain: 'Relativ zum Gelände',
+      relativeTo3DTiles: 'Relativ zu 3D Tiles',
       groundLevel: 'Geländehöhe',
       classificationType: 'Klassifizierung',
       none: 'Keine',
@@ -238,6 +242,7 @@ const messages = {
       modelHeading: 'Modell Ausrichtung',
       modelPitch: 'Modell Neigung',
       modelRoll: 'Modell Rotation',
+      modelAutoScale: 'Modellautoskalierung',
       baseUrl: 'Basis URL',
       extrudedHeight: 'Extrusion',
       skirt: 'Skirts',

package/src/i18n/en.d.ts

@@ -334,8 +334,12 @@ declare namespace messages {
             export { header_1 as header };
             export let altitudeMode: string;
             export let clampToGround: string;
+            export let clampToTerrain: string;
+            export let clampTo3DTiles: string;
             export let absolute: string;
             export let relativeToGround: string;
+            export let relativeToTerrain: string;
+            export let relativeTo3DTiles: string;
             export let groundLevel: string;
             export let classificationType: string;
             export let none: string;
@@ -354,6 +358,7 @@ declare namespace messages {
             export let modelHeading: string;
             export let modelPitch: string;
             export let modelRoll: string;
+            export let modelAutoScale: string;
             export let baseUrl: string;
             export let extrudedHeight: string;
             export let skirt: string;

package/src/i18n/en.js

@@ -217,9 +217,13 @@ const messages = {
     vectorProperties: {
       header: 'Vector properties',
       altitudeMode: 'Altitude mode',
-      clampToGround: 'Clamp to ground',
+      clampToGround: 'Drape on ground',
+      clampToTerrain: 'Drape on terrain',
+      clampTo3DTiles: 'Drape on 3D tiles',
       absolute: 'Absolute',
       relativeToGround: 'Relative to ground',
+      relativeToTerrain: 'Relative to terrain',
+      relativeTo3DTiles: 'Relative to 3D tiles',
       groundLevel: 'Ground level',
       classificationType: 'Classification',
       none: 'None',
@@ -238,6 +242,7 @@ const messages = {
       modelHeading: 'Model heading',
       modelPitch: 'Model pitch',
       modelRoll: 'Model roll',
+      modelAutoScale: 'Model auto scale',
       baseUrl: 'Base URL',
       extrudedHeight: 'Extrusion',
       skirt: 'Skirts',

package/src/i18n/i18nCollection.d.ts

@@ -16,8 +16,8 @@ export function mergeDeep(...sources: Object[]): Object;
 /**
  * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
  * Other locales can be supported by adding corresponding mapping objects with associated locale key.
- * @typedef {Object} I18nConfigurationItem
- * @property {string} [name] - optional name for the item. If not provided checksum is used.
+ * @typedef {Record<string, string | object> & { name: string, properties?: object, de?: object, en?: object }} I18nConfigurationItem
+ * @property {string} name - the name for the item.
  * @property {Object} [properties]
  * @property {Object} [de]
  * @property {Object} [en]
@@ -33,17 +33,11 @@ export default I18nCollection;
  * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
  * Other locales can be supported by adding corresponding mapping objects with associated locale key.
  */
-export type I18nConfigurationItem = {
-    /**
-     * - optional name for the item. If not provided checksum is used.
-     */
-    name?: string | undefined;
-    properties?: Object | undefined;
-    de?: Object | undefined;
-    /**
-     * ...
-     */
-    en?: Object | undefined;
+export type I18nConfigurationItem = Record<string, string | object> & {
+    name: string;
+    properties?: object;
+    de?: object;
+    en?: object;
 };
 /**
  * @extends {IndexedCollection<I18nConfigurationItem>}
@@ -74,9 +68,9 @@ declare class I18nCollection extends IndexedCollection<I18nConfigurationItem> {
     /**
      * Returns a merged Message Object with the locale as a key and an Object with all the translated keys.
      * Includes all available plugin messages.
-     * @returns {Object}
+     * @returns {Record<string, object>}
      */
-    getMergedMessages(): Object;
+    getMergedMessages(): Record<string, object>;
 }
 import { IndexedCollection } from '@vcmap/core';
 import { VcsEvent } from '@vcmap/core';

package/src/i18n/i18nCollection.js

@@ -17,8 +17,8 @@ export function isObject(item) {
 /**
  * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
  * Other locales can be supported by adding corresponding mapping objects with associated locale key.
- * @typedef {Object} I18nConfigurationItem
- * @property {string} [name] - optional name for the item. If not provided checksum is used.
+ * @typedef {Record<string, string | object> & { name: string, properties?: object, de?: object, en?: object }} I18nConfigurationItem
+ * @property {string} name - the name for the item.
  * @property {Object} [properties]
  * @property {Object} [de]
  * @property {Object} [en]
@@ -113,7 +113,7 @@ class I18nCollection extends IndexedCollection {
   /**
    * Returns a merged Message Object with the locale as a key and an Object with all the translated keys.
    * Includes all available plugin messages.
-   * @returns {Object}
+   * @returns {Record<string, object>}
    */
   getMergedMessages() {
     const pluginMessages = [...this._pluginCollection]

package/src/legend/VcsLegend.vue

@@ -25,12 +25,12 @@
             </div>
             <div v-else-if="item.type === LegendType.Iframe">
               <iframe
-                :id="`legendIframe${idx}`"
+                :id="`${cid}-legendIframe${idx}`"
                 :src="$st(item.src)"
                 scrolling="no"
                 style="width: 100%; height: 100%"
                 frameBorder="0"
-                @load="setIframeHeight(`legendIframe${idx}`)"
+                @load="setIframeHeight(`${cid}-legendIframe${idx}`)"
               />
             </div>
             <style-legend-item v-else :item="item" />
@@ -47,6 +47,7 @@
 <script>
   import { VExpansionPanels, VList, VSheet } from 'vuetify/components';
   import { computed } from 'vue';
+  import { useComponentId } from '../components/composables.js';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './StyleLegendItem.vue';
   import VcsExpansionPanel from '../components/section/VcsExpansionPanel.vue';
@@ -93,10 +94,13 @@
         set() {},
       });
 
+      const cid = useComponentId();
+
       return {
         LegendType,
         setIframeHeight,
         panels, // TODO
+        cid,
       };
     },
   };

package/src/legend/VcsLegend.vue.d.ts

@@ -11,6 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     setIframeHeight: (id: string) => void;
     panels: import("vue").ComputedRef<number[]>;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     entries: {
         type: ArrayConstructor;

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -136,6 +136,6 @@
 
 <style lang="scss" scoped>
   .inner-header {
-    height: calc(var(--v-vcs-item-height) - 8px);
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
   }
 </style>

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

@@ -57,7 +57,7 @@ declare class CategoryManager extends CollectionManager implements ICategoryMana
      */
     requestCategory<T extends Object | import("@vcmap/core").VcsObject>(options: import("@vcmap/core").CategoryOptions<T>, owner: string | symbol, collectionComponentOptions?: import("./collectionComponentClass.js").CollectionComponentUiOptions): Promise<{
         collectionComponent: import("./collectionComponentClass.js").default<T>;
-        category: import("@vcmap/core").Category<T>;
+        category: import("@vcmap/core").Category<T, object>;
     }>;
     /**
      * Updates the filterFunction for added moduleIds.

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

@@ -51,9 +51,9 @@ export type CollectionComponentListItem = import("../../components/lists/VcsList
  * Listens to all collection events and synchronizes changes to the items array.
  * The Collection Items will be transformed and filtered with the given itemMappings and itemFilter functions
  * @class
- * @template {Object|import("@vcmap/core").VcsObject} T
+ * @template {Object|import("@vcmap/core").VcsObject} [T=Object|import("@vcmap/core").VcsObject]
  */
-declare class CollectionComponentClass<T extends Object | import("@vcmap/core").VcsObject> {
+declare class CollectionComponentClass<T extends Object | import("@vcmap/core").VcsObject = Object | import("@vcmap/core").VcsObject> {
     /**
      * @param {CollectionComponentClassOptions<T>} options
      * @param {string|import("../../pluginHelper.js").vcsAppSymbol} owner

package/src/manager/collectionManager/collectionComponentClass.js

@@ -1,7 +1,7 @@
 import { IndexedCollection, isOverrideCollection } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 import { v4 as uuidv4 } from 'uuid';
-import { computed, ref, shallowRef, watch } from 'vue';
+import { computed, reactive, ref, shallowRef, watch } from 'vue';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { check, oneOf } from '@vcsuite/check';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
@@ -95,7 +95,7 @@ export function createSupportedMapMappingFunction(
  * Listens to all collection events and synchronizes changes to the items array.
  * The Collection Items will be transformed and filtered with the given itemMappings and itemFilter functions
  * @class
- * @template {Object|import("@vcmap/core").VcsObject} T
+ * @template {Object|import("@vcmap/core").VcsObject} [T=Object|import("@vcmap/core").VcsObject]
  */
 class CollectionComponentClass {
   /**
@@ -341,7 +341,7 @@ class CollectionComponentClass {
    */
   _transformItem(item) {
     const keyProperty = this._collection.uniqueKey;
-    const listItem = {
+    const listItem = reactive({
       get name() {
         return item[keyProperty];
       },
@@ -356,7 +356,7 @@ class CollectionComponentClass {
       clickedCallbacks: [],
       destroy: undefined,
       destroyFunctions: [],
-    };
+    });
     if (this.renamable.value) {
       listItem.renamable = {
         name: this._actionTitles.renameTitle,

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

@@ -18,7 +18,7 @@ export type OwnedAction = {
     weight?: number | undefined;
     owner: string | symbol;
 };
-export type ICollectionManager = import("../../vcsUiApp.js").VcsComponentManager<CollectionComponentClass<any>, import("./collectionComponentClass.js").CollectionComponentClassOptions<Object>>;
+export type ICollectionManager = import("../../vcsUiApp.js").VcsComponentManager<CollectionComponentClass, import("./collectionComponentClass.js").CollectionComponentClassOptions<Object>>;
 /**
  * @typedef {function(T, import("./collectionComponentClass.js").default<T>, import("./collectionComponentClass.js").CollectionComponentListItem): void} MappingFunction
  * @template {Object} T

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -22,9 +22,8 @@
       </template>
 
       <v-toolbar
-        id="vcs-toolbox-toolbar--secondary"
-        class="mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
-        :height="itemHeight + 8"
+        class="vcs-toolbox-toolbar--secondary mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
+        :height="toolboxHeight"
       >
         <v-toolbar-items class="w-100">
           <div class="d-flex align-center justify-space-between gc-1 w-100">
@@ -54,7 +53,7 @@
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { getComponentsByOrder } from './toolboxManager.js';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description
@@ -95,13 +94,16 @@
         orderedButtons.value.some((a) => a.action.active),
       );
 
-      const itemHeight = useItemHeight();
+      const fontSize = useFontSize();
+      const toolboxHeight = computed(() => {
+        return fontSize.value * 3 + 1;
+      });
 
       return {
         open,
         orderedButtons,
         hasActiveAction,
-        itemHeight,
+        toolboxHeight,
       };
     },
   };

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

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     open: import("vue").Ref<boolean>;
     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>;
-    itemHeight: import("vue").ComputedRef<number>;
+    toolboxHeight: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: ObjectConstructor;

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -38,7 +38,7 @@
 
       <v-toolbar
         class="vcs-toolbox-2 mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
-        :height="itemHeight + 8"
+        :height="toolboxHeight"
         dense
       >
         <v-toolbar-items class="w-100">
@@ -64,10 +64,10 @@
   }
 </style>
 <script>
-  import { ref } from 'vue';
+  import { ref, computed } from 'vue';
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description
@@ -91,11 +91,13 @@
     },
     setup() {
       const open = ref(false);
-      const itemHeight = useItemHeight();
-
+      const fontSize = useFontSize();
+      const toolboxHeight = computed(() => {
+        return fontSize.value * 3 + 1;
+      });
       return {
         open,
-        itemHeight,
+        toolboxHeight,
       };
     },
   };

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

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     open: import("vue").Ref<boolean>;
-    itemHeight: import("vue").ComputedRef<number>;
+    toolboxHeight: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: ObjectConstructor;