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

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/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/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;

package/src/manager/toolbox/{ToolboxManager.vue → ToolboxManagerComponent.vue}

@@ -5,7 +5,7 @@
     :class="{
       'rounded-b': !open,
     }"
-    :height="itemHeight + 8"
+    :height="toolboxHeight"
     :style="{ zIndex }"
     @click.stop="bringToTop"
   >
@@ -61,7 +61,7 @@
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { vcsAppSymbol } from '../../pluginHelper.js';
   import { ButtonLocation } from '../navbarManager.js';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @typedef {Object} ToolboxButtonGroup
@@ -85,7 +85,7 @@
    * @vue-computed {Array<ToolboxButtonGroup>} orderedGroups - Array of group components sorted by owner
    */
   export default {
-    name: 'VcsToolboxManager',
+    name: 'ToolboxManagerComponent',
     components: {
       ToolboxActionSelect,
       ToolboxActionGroup,
@@ -184,7 +184,10 @@
       };
 
       const { mdAndUp } = useDisplay();
-      const itemHeight = useItemHeight();
+      const fontSize = useFontSize();
+      const toolboxHeight = computed(() => {
+        return fontSize.value * 3 + 1;
+      });
       return {
         mdAndUp,
         toolboxOpen,
@@ -202,7 +205,7 @@
             bringToTop();
           }
         },
-        itemHeight,
+        toolboxHeight,
       };
     },
   };

package/src/manager/toolbox/{ToolboxManager.vue.d.ts → ToolboxManagerComponent.vue.d.ts}

@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     open: import("vue").Ref<boolean>;
     bringToTop: () => void;
     openGroup(group: any): void;
-    itemHeight: import("vue").ComputedRef<number>;
+    toolboxHeight: import("vue").ComputedRef<number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;
 export type ToolboxButtonGroup = {

package/src/manager/window/WindowComponentHeader.vue

@@ -7,7 +7,7 @@
         v-if="windowState.headerIcon"
         class="mr-1"
         :class="{ 'text-primary': isOnTop }"
-        size="16"
+        :size="iconSize"
       >
         {{ windowState.headerIcon }}
       </v-icon>
@@ -56,10 +56,10 @@
 
 <style lang="scss" scoped>
   .window-component-header {
-    max-height: calc(var(--v-vcs-item-height) / 2);
+    max-height: calc(var(--v-vcs-font-size) * 2 - 10px);
 
     h3 {
-      line-height: calc(var(--v-vcs-item-height) / 2);
+      line-height: calc(var(--v-vcs-font-size) * 2 - 10px);
     }
     .v-divider--vertical.v-divider--inset {
       margin-top: 2px;
@@ -84,6 +84,7 @@
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import { createLinkAction } from '../../actions/actionHelper.js';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description Default window component header with drag functionality close action and further optional window actions.
@@ -151,12 +152,14 @@
             )
           : undefined;
 
+      const iconSize = useIconSize();
       return {
         pin,
         close,
         isDockable,
         translatedHeaderTitle,
         headerRef,
+        iconSize,
         headerTooltip: createEllipseTooltip(
           computed(() => headerRef.value),
           computed(() => undefined),

package/src/manager/window/WindowComponentHeader.vue.d.ts

@@ -18,6 +18,7 @@ declare const _default: import("vue").DefineComponent<{
     isDockable: import("vue").ComputedRef<any>;
     translatedHeaderTitle: import("vue").ComputedRef<any>;
     headerRef: import("vue").Ref<null>;
+    iconSize: import("vue").ComputedRef<number>;
     headerTooltip: import("vue").ComputedRef<string>;
     infoAction: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction | undefined;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/src/manager/window/windowManager.d.ts

@@ -15,15 +15,15 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  * @typedef {{
  *   id?: string,
  *   parentId?: string,
- *   component: import("vue").Component<T, unknown, unknown>,
- *   headerComponent?: import("vue").Component<T, unknown, unknown>,
+ *   component: import("vue").Component<T>,
+ *   headerComponent?: import("vue").Component<T>,
  *   state? : Partial<WindowState>,
  *   position? : Partial<WindowPositionOptions>,
  *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
- * @template {Object} [T=Object]
+ * @template [T=any]
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {string} [parentId] An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
  * @property {import("vue").Component<T, unknown, unknown>} component Main Component which is shown below the header.
@@ -129,11 +129,11 @@ export namespace WindowPositions {
     export { DETACHED_1 as DETACHED };
 }
 export default WindowManager;
-export type WindowComponentOptions<T extends Object = Object> = {
+export type WindowComponentOptions<T = any> = {
     id?: string;
     parentId?: string;
-    component: import("vue").Component<T, unknown, unknown>;
-    headerComponent?: import("vue").Component<T, unknown, unknown>;
+    component: import("vue").Component<T>;
+    headerComponent?: import("vue").Component<T>;
     state?: Partial<WindowState>;
     position?: Partial<WindowPositionOptions>;
     slot?: WindowSlot;

package/src/manager/window/windowManager.js

@@ -105,15 +105,15 @@ export function isSlotPosition(windowPosition) {
  * @typedef {{
  *   id?: string,
  *   parentId?: string,
- *   component: import("vue").Component<T, unknown, unknown>,
- *   headerComponent?: import("vue").Component<T, unknown, unknown>,
+ *   component: import("vue").Component<T>,
+ *   headerComponent?: import("vue").Component<T>,
  *   state? : Partial<WindowState>,
  *   position? : Partial<WindowPositionOptions>,
  *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
- * @template {Object} [T=Object]
+ * @template [T=any]
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {string} [parentId] An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
  * @property {import("vue").Component<T, unknown, unknown>} component Main Component which is shown below the header.

package/src/navigation/OrientationToolsButton.vue

@@ -18,7 +18,7 @@
 <script>
   import { VCard, VIcon, VTooltip } from 'vuetify/components';
   import { computed } from 'vue';
-  import { useFontSize } from '../vuePlugins/vuetify.js';
+  import { useFontSize, useIconSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description v-card with h & w 8. Requires an icon and binds all attributes & listeners to the v-card
@@ -50,9 +50,7 @@
     setup() {
       const fontSize = useFontSize();
 
-      const iconSize = computed(() => {
-        return fontSize.value * (1.2 + 0.1 / 3);
-      });
+      const iconSize = useIconSize();
       const height = computed(() => {
         return fontSize.value * 2.5;
       });

package/src/navigation/TiltSlider.vue

@@ -65,7 +65,7 @@
 <script>
   import { computed, defineComponent } from 'vue';
   import { VCard, VSlider, VTooltip } from 'vuetify/components';
-  import { useFontSize, useItemHeight } from '../vuePlugins/vuetify.js';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
   import { useProxiedAtomicModel } from '../components/modelHelper.js';
 
   export default defineComponent({
@@ -87,15 +87,13 @@
       },
     },
     setup(props, { emit }) {
-      const itemHeight = useItemHeight();
-
+      const fontSize = useFontSize();
       const trackSize = computed(() => {
-        return Math.floor(itemHeight.value / 12);
+        return Math.floor((fontSize.value + 3) / 6);
       });
       const tickSize = computed(() => {
         return trackSize.value * 2;
       });
-      const fontSize = useFontSize();
       const minWidth = computed(() => {
         return fontSize.value * 2.5;
       });

package/src/search/SearchComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <v-sheet>
     <span class="d-flex justify-space-between align-center mt-1 ml-2">
-      <v-icon class="pa-1" :size="itemHeight - 8"> $vcsSearch </v-icon>
+      <v-icon class="pa-1" :size="searchIconSize"> $vcsSearch </v-icon>
       <VcsTextField
         class="d-inline-block user-select-none w-100 mx-1"
         autofocus
@@ -35,13 +35,13 @@
 </style>
 
 <script>
-  import { inject, onUnmounted, ref } from 'vue';
+  import { inject, onUnmounted, ref, computed } from 'vue';
   import { getLogger } from '@vcsuite/logger';
   import { VSheet, VDivider, VIcon } from 'vuetify/components';
   import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
   import ResultsComponent from './ResultsComponent.vue';
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';
-  import { useItemHeight } from '../vuePlugins/vuetify.js';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description Stylized search component providing an input field for search inputs.
@@ -94,8 +94,10 @@
         clear();
       });
 
-      const itemHeight = useItemHeight();
-
+      const fontSize = useFontSize();
+      const searchIconSize = computed(() => {
+        return fontSize.value + 11;
+      });
       return {
         query,
         searching,
@@ -104,7 +106,7 @@
         clear,
         search,
         zoomToAll,
-        itemHeight,
+        searchIconSize,
       };
     },
   };

package/src/search/SearchComponent.vue.d.ts

@@ -6,6 +6,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     clear: () => void;
     search: () => Promise<void>;
     zoomToAll: () => void;
-    itemHeight: import("vue").ComputedRef<number>;
+    searchIconSize: import("vue").ComputedRef<number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/styles/vcsList.scss

@@ -3,6 +3,6 @@
 
 .vcsList {
   .v-list-item--density-compact.v-list-item--one-line {
-    min-height: var(--v-vcs-item-height);
+    min-height: calc(var(--v-vcs-font-size) * 2 + 6px);
   }
 }