@vcmap/ui 6.1.0-rc.6 → 6.1.0

package/src/legend/legendHelper.js

@@ -107,31 +107,7 @@ export function getImageSrcFromShape(image) {
  * @property {string} title - layer or entry name
  * @property {boolean} [open=true] - panel state of entry
  * @property {Array<LegendItem>} legend - legend properties
- * @property {Array<import("../actions/actionHelper.js").VcsAction>} actions - popout actions
- */
-
-/**
- * creates a LegendEntry with title, options and optionally popout action to the entries array
- * @param {string} key - layerName
- * @param {string} title
- * @param {Array<LegendItem>} legend
- * @returns {LegendEntry}
- */
-export function createLegendEntry(key, title, legend) {
-  const actions = [];
-  legend.forEach((item) => {
-    // XXX only one popout button allowed. Rethink if use case for multiple popout buttons comes up.
-    if (item.src && item.popoutBtn && actions.length < 1) {
-      actions.push({
-        name: 'legendPopoutAction',
-        icon: 'mdi-open-in-new',
-        title: 'legend.openInNew',
-        callback: () => window.open(item.src, '_blank'),
-      });
-    }
-  });
-  return { key, title, legend, actions, open: true };
-}
+ */
 
 /**
  *
@@ -176,7 +152,7 @@ export function getLegendEntries(app) {
       const legend =
         layer.style?.properties?.legend ?? layer.properties?.legend;
       if (legend) {
-        const legendEntry = createLegendEntry(key, title, legend);
+        const legendEntry = { key, title, legend, open: true };
         entries.unshift(legendEntry);
       }
       if (layer.styleChanged) {
@@ -214,7 +190,7 @@ export function getLegendEntries(app) {
         const title = group.properties.title || group.name;
         const { legend } = group.properties;
         if (!entries.some(({ key }) => key === group.name)) {
-          const legendEntry = createLegendEntry(group.name, title, legend);
+          const legendEntry = { key: group.name, title, legend, open: true };
           entries.unshift(legendEntry);
         }
       }

package/src/manager/navbarManager.d.ts

@@ -16,6 +16,7 @@ export function sortByOwner(ownerA: string | symbol, ownerB: string | symbol, or
  */
 export function getActionsByLocation(buttonComponents: Array<import("./buttonManager.js").ButtonComponent>, location: ButtonLocation, order?: string[] | undefined, compareFn?: ((arg0: import("./buttonManager.js").ButtonComponent, arg1: import("./buttonManager.js").ButtonComponent) => number) | undefined): Array<import("../actions/actionHelper.js").VcsAction>;
 export const locationSymbol: unique symbol;
+export const deviceSymbol: unique symbol;
 /**
  * *
  */
@@ -30,9 +31,20 @@ export namespace ButtonLocation {
 }
 export default NavbarManager;
 export type INavbarManager = import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent, import("./buttonManager.js").ButtonComponentOptions>;
+export type DeviceOptions = {
+    desktop: boolean | null;
+    tablet: boolean | null;
+    mobile: boolean | null;
+};
 /**
  * @typedef {import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
  */
+/**
+ * @typedef {Object} DeviceOptions
+ * @property {boolean?} desktop
+ * @property {boolean?} tablet
+ * @property {boolean?} mobile
+ */
 /**
  * @class NavbarManager
  * @description Manages a set of Map Buttons in the Navbar
@@ -44,11 +56,12 @@ declare class NavbarManager extends ButtonManager implements INavbarManager {
      * @param {import("./buttonManager.js").ButtonComponentOptions} buttonComponentOptions
      * @param {string|symbol} owner pluginName or vcsAppSymbol
      * @param {ButtonLocation} location Button render position
+     * @param {DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
      * @throws {Error} if a buttonComponent with the same ID has already been added
      * @returns {import("./buttonManager.js").ButtonComponent}
      */
     // @ts-ignore
-add(buttonComponentOptions: import("./buttonManager.js").ButtonComponentOptions, owner: string | symbol, location: ButtonLocation): import("./buttonManager.js").ButtonComponent;
+add(buttonComponentOptions: import("./buttonManager.js").ButtonComponentOptions, owner: string | symbol, location: ButtonLocation, device?: DeviceOptions | undefined): import("./buttonManager.js").ButtonComponent;
     /**
      * Toggles a button of provided id by executing its callback.
      * Use active flag to force a state to be applied.

package/src/manager/navbarManager.js

@@ -1,8 +1,9 @@
-import { check, ofEnum } from '@vcsuite/check';
+import { check, ofEnum, optional } from '@vcsuite/check';
 import ButtonManager, { sortByWeight } from './buttonManager.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 
 export const locationSymbol = Symbol('location');
+export const deviceSymbol = Symbol('device');
 
 /**
  * sorts by owner and optionally plugin order
@@ -74,6 +75,13 @@ export const ButtonLocation = {
  * @typedef {import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
  */
 
+/**
+ * @typedef {Object} DeviceOptions
+ * @property {boolean?} desktop
+ * @property {boolean?} tablet
+ * @property {boolean?} mobile
+ */
+
 /**
  * @class NavbarManager
  * @description Manages a set of Map Buttons in the Navbar
@@ -85,13 +93,25 @@ class NavbarManager extends ButtonManager {
    * @param {import("./buttonManager.js").ButtonComponentOptions} buttonComponentOptions
    * @param {string|symbol} owner pluginName or vcsAppSymbol
    * @param {ButtonLocation} location Button render position
+   * @param {DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
    * @throws {Error} if a buttonComponent with the same ID has already been added
    * @returns {import("./buttonManager.js").ButtonComponent}
    */
-  add(buttonComponentOptions, owner, location) {
+  add(
+    buttonComponentOptions,
+    owner,
+    location,
+    device = { desktop: true, tablet: true },
+  ) {
     check(location, ofEnum(ButtonLocation));
+    check(device, {
+      desktop: optional(Boolean),
+      tablet: optional(Boolean),
+      mobile: optional(Boolean),
+    });
     const buttonComponent = super.add(buttonComponentOptions, owner);
     buttonComponent[locationSymbol] = location;
+    buttonComponent[deviceSymbol] = device;
     return buttonComponent;
   }
 

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -3,8 +3,8 @@
     <v-menu
       v-model="open"
       @update:model-value="$emit('toggle', open)"
-      location="bottom center"
-      z-index="0"
+      :location="xs ? 'top center' : 'bottom center'"
+      :z-index="xs ? 2 : undefined"
     >
       <template #activator="{ props }">
         <VcsToolButton
@@ -22,13 +22,20 @@
       </template>
 
       <v-toolbar
-        class="vcs-toolbox-toolbar--secondary mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
+        class="vcs-toolbox-toolbar--secondary mx-auto elevation-4 opacity-80 px-1"
+        :class="{
+          marginToTop: !xs,
+          marginToBottom: xs,
+          'rounded-t': xs,
+          'rounded-b': !xs,
+        }"
         :height="toolboxHeight"
       >
         <v-toolbar-items class="w-100">
           <div class="d-flex align-center justify-space-between gc-1 w-100">
             <VcsToolButton
               v-for="{ id, action } in orderedButtons"
+              :data-action-name="action.name"
               :key="id"
               :tooltip="action.title"
               :icon="action.icon"
@@ -52,10 +59,14 @@
   .marginToTop {
     margin-top: 3px;
   }
+  .marginToBottom {
+    margin-bottom: 3px;
+  }
 </style>
 <script>
   import { computed, ref } from 'vue';
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
+  import { useDisplay } from 'vuetify';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { getComponentsByOrder } from './toolboxManager.js';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
@@ -104,11 +115,14 @@
         return fontSize.value * 3 + 1;
       });
 
+      const { xs } = useDisplay();
+
       return {
         open,
         orderedButtons,
         hasActiveAction,
         toolboxHeight,
+        xs,
       };
     },
   };

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

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

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -6,6 +6,7 @@
   >
     <VcsToolButton
       :key="group.action.tools[group.action.currentIndex].name"
+      :data-action-name="group.action.tools[group.action.currentIndex].name"
       :tooltip="group.action.tools[group.action.currentIndex].title"
       :icon="group.action.tools[group.action.currentIndex].icon"
       :active="group.action.active"
@@ -24,9 +25,9 @@
     />
     <v-menu
       v-model="open"
-      location="bottom center"
+      :location="xs ? 'top center' : 'bottom center'"
       @update:model-value="$emit('toggle', open)"
-      z-index="0"
+      :z-index="xs ? 2 : undefined"
     >
       <template #activator="{ props }">
         <VcsToolButton
@@ -42,13 +43,20 @@
       </template>
 
       <v-toolbar
-        class="vcs-toolbox-2 mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
+        class="vcs-toolbox-2 mx-auto elevation-4 opacity-80 px-1"
+        :class="{
+          marginToTop: !xs,
+          marginToBottom: xs,
+          'rounded-t': xs,
+          'rounded-b': !xs,
+        }"
         :height="toolboxHeight"
       >
         <v-toolbar-items class="w-100">
           <div class="d-flex align-center justify-space-between gc-1 w-100">
             <VcsToolButton
               v-for="(item, index) in group.action.tools"
+              :data-action-name="item.name"
               :key="`${item.name}-${index}`"
               :tooltip="item.title"
               :icon="item.icon"
@@ -66,10 +74,14 @@
   .marginToTop {
     margin-top: 3px;
   }
+  .marginToBottom {
+    margin-bottom: 3px;
+  }
 </style>
 <script>
   import { ref, computed } from 'vue';
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
+  import { useDisplay } from 'vuetify';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
 
@@ -99,9 +111,11 @@
       const toolboxHeight = computed(() => {
         return fontSize.value * 3 + 1;
       });
+      const { xs } = useDisplay();
       return {
         open,
         toolboxHeight,
+        xs,
       };
     },
   };

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

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

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -1,32 +1,41 @@
 <template>
   <v-toolbar
-    v-if="toolboxOpen && orderedGroups.length > 0 && smAndUp"
+    v-if="toolboxOpen && orderedGroups.length > 0"
     class="vcs-toolbox mx-auto elevation-4 opacity-80 toolbox-manager-component"
     :class="{
-      'rounded-b': !open,
+      'rounded-b': !open && !xs,
+      'rounded-t': xs,
       'vcs-toolbox__secondary': !isDefaultToolbox,
+      mobileToolbox: xs,
     }"
     :height="toolboxHeight"
-    :style="{ zIndex }"
+    :style="{ zIndex: xs ? zIndexMobile : zIndex }"
     @click.stop="bringToTop"
   >
     <v-toolbar-items class="w-100 px-4 gc-1">
       <div
         class="d-flex align-center justify-space-between w-100"
         v-for="group in orderedGroups"
+        :data-toolbox-id="group.id"
         :key="group.id"
       >
         <ToolboxActionGroup
           v-if="group.type === ToolboxType.GROUP"
           :group="group"
           @toggle="openGroup"
-          @click="bringToTop"
+          @click="
+            bringToTop;
+            xs && toolboxToggleAction.callback();
+          "
         />
         <ToolboxActionSelect
           v-else-if="group.type === ToolboxType.SELECT"
           :group="group"
           @toggle="openGroup"
-          @click="bringToTop"
+          @click="
+            bringToTop;
+            xs && toolboxToggleAction.callback();
+          "
         />
         <VcsToolButton
           v-else
@@ -37,6 +46,7 @@
           :disabled="group.action.disabled"
           @click.stop="
             bringToTop();
+            xs && toolboxToggleAction.callback();
             group.action.callback($event);
           "
           v-bind="{ ...$attrs }"
@@ -61,10 +71,16 @@
     margin-top: 2px;
     width: fit-content;
   }
+  .mobileToolbox {
+    bottom: 0px !important;
+    position: absolute !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
 </style>
 
 <script>
-  import { inject, ref, computed, watch, onUnmounted } from 'vue';
+  import { inject, ref, computed, watch, onUnmounted, reactive } from 'vue';
   import { useDisplay } from 'vuetify';
   import { VToolbar, VToolbarItems } from 'vuetify/components';
   import {
@@ -76,7 +92,7 @@
   import ToolboxActionGroup from './GroupToolboxComponent.vue';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { vcsAppSymbol } from '../../pluginHelper.js';
-  import { ButtonLocation } from '../navbarManager.js';
+  import { ButtonLocation, deviceSymbol } from '../navbarManager.js';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
@@ -114,6 +130,8 @@
     setup() {
       const app = inject('vcsApp');
 
+      const { smAndUp, xs, sm, mdAndUp } = useDisplay();
+
       const groups = computed(() => {
         return app.toolboxManager.componentIds.map((id) =>
           app.toolboxManager.get(id),
@@ -130,6 +148,8 @@
         toolboxComponentId,
         vcsAppSymbol,
       );
+      // The zIndex of the mobile toolbox is two higher than the desktop toolbox because it needs to be above the windows
+      const zIndexMobile = computed(() => zIndex.value + 2);
 
       /**
        * To be rendered in Toolbox components must meet certain conditions:
@@ -139,13 +159,18 @@
        * @param {SingleToolboxComponent|SelectToolboxComponent|GroupToolboxComponent} c
        * @returns {boolean}
        */
+
       function filterFunc(c) {
         return (
-          c.type === ToolboxType.SINGLE ||
-          c?.action?.tools?.length > 1 ||
-          c.buttonManager?.componentIds?.length > 0
+          (c.type === ToolboxType.SINGLE ||
+            c?.action?.tools?.length > 1 ||
+            c.buttonManager?.componentIds?.length > 0) &&
+          ((xs.value === true && c[deviceSymbol]?.mobile === true) ||
+            (sm.value === true && c[deviceSymbol]?.tablet === true) ||
+            (mdAndUp.value === true && c[deviceSymbol]?.desktop === true))
         );
       }
+
       const orderedGroups = computed(() =>
         getComponentsByOrder(groups.value)
           .filter((comp) => comp.toolboxNames.includes(toolboxName.value))
@@ -153,16 +178,19 @@
       );
 
       const toolboxOpen = app.toolboxManager.open;
-      const toolboxToggleAction = {
+      if (xs.value) {
+        toolboxOpen.value = false;
+      }
+      const toolboxToggleAction = reactive({
         name: 'toolboxToggleAction',
         icon: '$vcsTools',
         title: 'toolbox.title',
-        active: true,
+        active: toolboxOpen.value,
         callback() {
           this.active = !this.active;
           toolboxOpen.value = this.active;
         },
-      };
+      });
 
       function handleToolboxButton() {
         if (orderedGroups.value.length > 0) {
@@ -174,6 +202,7 @@
               },
               vcsAppSymbol,
               ButtonLocation.TOOL,
+              { desktop: true, tablet: true, mobile: true },
             );
           }
         } else {
@@ -201,7 +230,6 @@
         app.windowManager.bringWindowToTop(toolboxComponentId);
       };
 
-      const { smAndUp } = useDisplay();
       const fontSize = useFontSize();
       const toolboxHeight = computed(() => {
         return fontSize.value * 3 + 1;
@@ -209,8 +237,10 @@
       return {
         smAndUp,
         toolboxOpen,
+        toolboxToggleAction,
         orderedGroups,
         zIndex,
+        zIndexMobile,
         isDefaultToolbox: computed(
           () => toolboxName.value === defaultToolboxName,
         ),
@@ -224,6 +254,7 @@
           }
         },
         toolboxHeight,
+        xs,
       };
     },
   };

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

@@ -12,8 +12,16 @@ export const toolboxComponentId: "toolbox";
 declare const _default: import("vue").DefineComponent<{}, {
     smAndUp: import("vue").Ref<boolean>;
     toolboxOpen: any;
+    toolboxToggleAction: {
+        name: string;
+        icon: string;
+        title: string;
+        active: any;
+        callback: () => void;
+    };
     orderedGroups: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
     zIndex: any;
+    zIndexMobile: import("vue").ComputedRef<any>;
     isDefaultToolbox: import("vue").ComputedRef<boolean>;
     ToolboxType: {
         SINGLE: number;
@@ -24,6 +32,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     bringToTop: () => void;
     openGroup(group: any): void;
     toolboxHeight: import("vue").ComputedRef<number>;
+    xs: import("vue").Ref<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;
 export type ToolboxButtonGroup = {

package/src/manager/toolbox/toolboxManager.d.ts

@@ -159,11 +159,12 @@ declare class ToolboxManager implements IToolboxManager {
      * adds a ToolboxComponent
      * @param {SingleToolboxComponentOptions|SelectToolboxComponentOptions|GroupToolboxComponentOptions} toolboxComponentOptions
      * @param {string|symbol} owner pluginName or vcsAppSymbol
+     * @param {import('../navbarManager.js').DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
      * @throws {Error} if a toolboxComponent with the same ID has already been added
      * @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
      */
     // @ts-ignore
-add(toolboxComponentOptions: SingleToolboxComponentOptions | SelectToolboxComponentOptions | GroupToolboxComponentOptions, owner: string | symbol): SingleToolboxComponent | SelectToolboxComponent | import("vue").ShallowReactive<GroupToolboxComponent>;
+add(toolboxComponentOptions: SingleToolboxComponentOptions | SelectToolboxComponentOptions | GroupToolboxComponentOptions, owner: string | symbol, device?: import("../navbarManager.js").DeviceOptions | undefined): SingleToolboxComponent | SelectToolboxComponent | import("vue").ShallowReactive<GroupToolboxComponent>;
     /**
      * removes all {@link ToolboxComponent}s of a specific owner and fires removed Events
      * @param {string|vcsAppSymbol} owner

package/src/manager/toolbox/toolboxManager.js

@@ -6,6 +6,7 @@ import { vcsAppSymbol } from '../../pluginHelper.js';
 import ButtonManager from '../buttonManager.js';
 import { ActionPattern } from '../../components/lists/VcsActionList.vue';
 import { getActionFromOptions } from '../../actions/actionHelper.js';
+import { deviceSymbol } from '../navbarManager.js';
 
 /**
  * Possible group types. Define behaviour of group:
@@ -287,12 +288,22 @@ class ToolboxManager {
    * adds a ToolboxComponent
    * @param {SingleToolboxComponentOptions|SelectToolboxComponentOptions|GroupToolboxComponentOptions} toolboxComponentOptions
    * @param {string|symbol} owner pluginName or vcsAppSymbol
+   * @param {import('../navbarManager.js').DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
    * @throws {Error} if a toolboxComponent with the same ID has already been added
    * @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
    */
-  add(toolboxComponentOptions, owner) {
+  add(
+    toolboxComponentOptions,
+    owner,
+    device = { desktop: true, tablet: true },
+  ) {
     check(toolboxComponentOptions.id, maybe(String));
     check(toolboxComponentOptions.type, ofEnum(ToolboxType));
+    check(device, {
+      desktop: optional(Boolean),
+      tablet: optional(Boolean),
+      mobile: optional(Boolean),
+    });
     check(owner, oneOf(String, vcsAppSymbol));
 
     if (toolboxComponentOptions.id && this.has(toolboxComponentOptions.id)) {
@@ -322,6 +333,7 @@ class ToolboxManager {
       get toolboxNames() {
         return toolboxNames;
       },
+      [deviceSymbol]: device,
     };
 
     if (type === ToolboxType.SINGLE) {

package/src/manager/window/WindowComponent.vue

@@ -9,7 +9,7 @@
     :class="{
       rounded: !isDocked,
       marginToTop: isDocked || !isChild,
-      marginToTopTablet: isTabletWithOpenToolbar,
+      marginTablet: isTabletWithOpenToolbar,
       'rounded-be': isDynamicLeft,
       'rounded-bs': isDynamicRight,
     }"
@@ -42,8 +42,9 @@
   .marginToTop {
     margin-top: 2px;
   }
-  .marginToTopTablet {
+  .marginTablet {
     margin-top: calc(var(--v-vcs-font-size) * 3 + 6px);
+    margin-bottom: 2px;
   }
 </style>
 

package/src/manager/window/WindowComponentHeader.vue

@@ -22,7 +22,10 @@
         {{ $st(headerTooltip) }}
       </v-tooltip>
     </h3>
-    <div class="d-flex justify-space-between align-center">
+    <div
+      class="d-flex justify-space-between align-center"
+      :class="{ 'gc-4': xs, 'mr-2': xs }"
+    >
       <template v-if="windowState.headerActions?.length > 0">
         <VcsActionButtonList
           :actions="windowState.headerActions"
@@ -30,6 +33,7 @@
         />
         <v-divider vertical inset class="mx-1 my-1" />
       </template>
+
       <VcsButton
         v-if="infoAction"
         @click.stop="infoAction.callback()"
@@ -80,6 +84,7 @@
 <script>
   import { VIcon, VDivider, VTooltip } from 'vuetify/components';
   import { computed, getCurrentInstance, ref } from 'vue';
+  import { useDisplay } from 'vuetify';
   import { createEllipseTooltip } from '../../components/composables.js';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
@@ -130,6 +135,8 @@
         () => !props.windowState.hidePin && props.windowState.dockable,
       );
 
+      const { xs } = useDisplay();
+
       const vm = getCurrentInstance().proxy;
 
       const translatedHeaderTitle = computed(() =>
@@ -166,6 +173,7 @@
           translatedHeaderTitle,
         ),
         infoAction,
+        xs,
       };
     },
   };

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

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