@vcmap/ui 6.1.0-rc.6 → 6.1.0-rc.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/config/cluster.config.json +4 -13
  2. package/config/dev.config.json +6 -3
  3. package/config/splashscreen.config.json +6 -10
  4. package/dist/assets/{cesium-f5e8e354.js → cesium-6c6aa853.js} +53 -23
  5. package/dist/assets/cesium.js +1 -1
  6. package/dist/assets/{core-c134a524.js → core-52c2ef11.js} +5982 -5411
  7. package/dist/assets/core.js +1 -1
  8. package/dist/assets/{ol-2752311f.js → ol-b0589b0c.js} +87 -37
  9. package/dist/assets/ol.js +1 -1
  10. package/dist/assets/ui-dccb9009.css +1 -0
  11. package/dist/assets/{ui-83514586.js → ui-dccb9009.js} +16051 -15479
  12. package/dist/assets/ui.js +1 -1
  13. package/dist/assets/vue.js +1 -1
  14. package/dist/assets/{vuetify-5dbe2644.css → vuetify-43a20e18.css} +1 -1
  15. package/dist/assets/{vuetify-5dbe2644.js → vuetify-43a20e18.js} +5004 -4958
  16. package/dist/assets/vuetify.js +1 -1
  17. package/dist/index.html +1 -1
  18. package/index.d.ts +2 -0
  19. package/index.html +1 -1
  20. package/index.js +1 -0
  21. package/package.json +6 -3
  22. package/plugins/@vcmap-show-case/theming-example/src/index.js +1 -0
  23. package/src/application/MapsGroupMobileMenu.vue +105 -0
  24. package/src/application/MapsGroupMobileMenu.vue.d.ts +7 -0
  25. package/src/application/VcsApp.vue +48 -24
  26. package/src/application/VcsApp.vue.d.ts +5 -2
  27. package/src/application/VcsContainer.vue +35 -13
  28. package/src/application/VcsContainer.vue.d.ts +3 -0
  29. package/src/application/VcsMobileMenuList.vue +118 -0
  30. package/src/application/VcsMobileMenuList.vue.d.ts +2 -0
  31. package/src/application/VcsNavbar.vue +12 -3
  32. package/src/application/VcsNavbarMobile.vue +218 -0
  33. package/src/application/VcsNavbarMobile.vue.d.ts +43 -0
  34. package/src/application/VcsSplashScreen.vue +39 -7
  35. package/src/application/VcsSplashScreen.vue.d.ts +6 -0
  36. package/src/application/uiConfigHelper.d.ts +12 -0
  37. package/src/application/uiConfigHelper.js +37 -0
  38. package/src/components/buttons/VcsToolButton.vue +8 -1
  39. package/src/components/buttons/VcsToolButton.vue.d.ts +1 -0
  40. package/src/components/form-output/VcsTemplateMarkdown.vue +43 -0
  41. package/src/components/form-output/VcsTemplateMarkdown.vue.d.ts +9 -0
  42. package/src/components/lists/VcsTreeNode.vue +6 -1
  43. package/src/components/lists/VcsTreeview.vue +36 -2
  44. package/src/components/lists/VcsTreeview.vue.d.ts +1 -0
  45. package/src/components/lists/VcsTreeviewTitle.vue +8 -1
  46. package/src/contentTree/contentTreeCollection.js +1 -0
  47. package/src/contentTree/flightContentTreeItem.d.ts +8 -1
  48. package/src/contentTree/flightContentTreeItem.js +26 -3
  49. package/src/contentTree/groupContentTreeItem.d.ts +16 -0
  50. package/src/contentTree/groupContentTreeItem.js +31 -1
  51. package/src/contentTree/layerContentTreeItem.d.ts +8 -1
  52. package/src/contentTree/layerContentTreeItem.js +25 -3
  53. package/src/contentTree/layerGroupContentTreeItem.d.ts +6 -0
  54. package/src/contentTree/layerGroupContentTreeItem.js +27 -3
  55. package/src/contentTree/obliqueCollectionContentTreeItem.d.ts +6 -0
  56. package/src/contentTree/obliqueCollectionContentTreeItem.js +22 -2
  57. package/src/featureInfo/BalloonComponent.vue +6 -6
  58. package/src/featureInfo/MarkdownBalloonComponent.vue +3 -9
  59. package/src/featureInfo/MarkdownBalloonComponent.vue.d.ts +1 -11
  60. package/src/featureInfo/balloonHelper.js +1 -1
  61. package/src/featureInfo/featureInfo.js +2 -3
  62. package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts +0 -6
  63. package/src/featureInfo/markdownBalloonFeatureInfoView.js +5 -14
  64. package/src/featureInfo/markdownFeatureInfoView.d.ts +2 -8
  65. package/src/featureInfo/markdownFeatureInfoView.js +6 -15
  66. package/src/i18n/de.d.ts +58 -50
  67. package/src/i18n/de.js +5 -0
  68. package/src/i18n/en.d.ts +58 -50
  69. package/src/i18n/en.js +5 -0
  70. package/src/legend/VcsLegend.vue +21 -2
  71. package/src/legend/VcsLegend.vue.d.ts +1 -0
  72. package/src/legend/legendHelper.d.ts +0 -13
  73. package/src/legend/legendHelper.js +3 -27
  74. package/src/manager/navbarManager.d.ts +14 -1
  75. package/src/manager/navbarManager.js +22 -2
  76. package/src/manager/toolbox/GroupToolboxComponent.vue +16 -3
  77. package/src/manager/toolbox/GroupToolboxComponent.vue.d.ts +1 -0
  78. package/src/manager/toolbox/SelectToolboxComponent.vue +15 -3
  79. package/src/manager/toolbox/SelectToolboxComponent.vue.d.ts +1 -0
  80. package/src/manager/toolbox/ToolboxManagerComponent.vue +44 -14
  81. package/src/manager/toolbox/ToolboxManagerComponent.vue.d.ts +9 -0
  82. package/src/manager/toolbox/toolboxManager.d.ts +2 -1
  83. package/src/manager/toolbox/toolboxManager.js +13 -1
  84. package/src/manager/window/WindowComponent.vue +3 -2
  85. package/src/manager/window/WindowComponentHeader.vue +9 -1
  86. package/src/manager/window/WindowComponentHeader.vue.d.ts +1 -0
  87. package/src/manager/window/WindowManager.vue +175 -30
  88. package/src/manager/window/WindowManager.vue.d.ts +5 -0
  89. package/src/navigation/MapNavigation.vue +27 -19
  90. package/src/navigation/MapNavigation.vue.d.ts +1 -0
  91. package/src/search/ResultsComponent.vue +44 -17
  92. package/src/search/ResultsComponent.vue.d.ts +11 -1
  93. package/src/search/SearchComponent.vue +60 -9
  94. package/src/search/SearchComponent.vue.d.ts +2 -0
  95. package/src/vuePlugins/vuetify.d.ts +4 -0
  96. package/src/vuePlugins/vuetify.js +49 -3
  97. package/dist/assets/ui-83514586.css +0 -1
  98. /package/dist/assets/{vue-f8b1b5f8.js → vue-f7a0b088.js} +0 -0
@@ -61,16 +61,7 @@ export function getImageSrcFromShape(image: import("ol/style/Image.js").Options)
61
61
  * @property {string} title - layer or entry name
62
62
  * @property {boolean} [open=true] - panel state of entry
63
63
  * @property {Array<LegendItem>} legend - legend properties
64
- * @property {Array<import("../actions/actionHelper.js").VcsAction>} actions - popout actions
65
64
  */
66
- /**
67
- * creates a LegendEntry with title, options and optionally popout action to the entries array
68
- * @param {string} key - layerName
69
- * @param {string} title
70
- * @param {Array<LegendItem>} legend
71
- * @returns {LegendEntry}
72
- */
73
- export function createLegendEntry(key: string, title: string, legend: Array<LegendItem>): LegendEntry;
74
65
  /**
75
66
  *
76
67
  * @param {import("../vcsUiApp.js").default} app
@@ -165,8 +156,4 @@ export type LegendEntry = {
165
156
  * - legend properties
166
157
  */
167
158
  legend: Array<LegendItem>;
168
- /**
169
- * - popout actions
170
- */
171
- actions: Array<import("../actions/actionHelper.js").VcsAction>;
172
159
  };
@@ -107,31 +107,7 @@ export function getImageSrcFromShape(image) {
107
107
  * @property {string} title - layer or entry name
108
108
  * @property {boolean} [open=true] - panel state of entry
109
109
  * @property {Array<LegendItem>} legend - legend properties
110
- * @property {Array<import("../actions/actionHelper.js").VcsAction>} actions - popout actions
111
- */
112
-
113
- /**
114
- * creates a LegendEntry with title, options and optionally popout action to the entries array
115
- * @param {string} key - layerName
116
- * @param {string} title
117
- * @param {Array<LegendItem>} legend
118
- * @returns {LegendEntry}
119
- */
120
- export function createLegendEntry(key, title, legend) {
121
- const actions = [];
122
- legend.forEach((item) => {
123
- // XXX only one popout button allowed. Rethink if use case for multiple popout buttons comes up.
124
- if (item.src && item.popoutBtn && actions.length < 1) {
125
- actions.push({
126
- name: 'legendPopoutAction',
127
- icon: 'mdi-open-in-new',
128
- title: 'legend.openInNew',
129
- callback: () => window.open(item.src, '_blank'),
130
- });
131
- }
132
- });
133
- return { key, title, legend, actions, open: true };
134
- }
110
+ */
135
111
 
136
112
  /**
137
113
  *
@@ -176,7 +152,7 @@ export function getLegendEntries(app) {
176
152
  const legend =
177
153
  layer.style?.properties?.legend ?? layer.properties?.legend;
178
154
  if (legend) {
179
- const legendEntry = createLegendEntry(key, title, legend);
155
+ const legendEntry = { key, title, legend, open: true };
180
156
  entries.unshift(legendEntry);
181
157
  }
182
158
  if (layer.styleChanged) {
@@ -214,7 +190,7 @@ export function getLegendEntries(app) {
214
190
  const title = group.properties.title || group.name;
215
191
  const { legend } = group.properties;
216
192
  if (!entries.some(({ key }) => key === group.name)) {
217
- const legendEntry = createLegendEntry(group.name, title, legend);
193
+ const legendEntry = { key: group.name, title, legend, open: true };
218
194
  entries.unshift(legendEntry);
219
195
  }
220
196
  }
@@ -16,6 +16,7 @@ export function sortByOwner(ownerA: string | symbol, ownerB: string | symbol, or
16
16
  */
17
17
  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>;
18
18
  export const locationSymbol: unique symbol;
19
+ export const deviceSymbol: unique symbol;
19
20
  /**
20
21
  * *
21
22
  */
@@ -30,9 +31,20 @@ export namespace ButtonLocation {
30
31
  }
31
32
  export default NavbarManager;
32
33
  export type INavbarManager = import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent, import("./buttonManager.js").ButtonComponentOptions>;
34
+ export type DeviceOptions = {
35
+ desktop: boolean | null;
36
+ tablet: boolean | null;
37
+ mobile: boolean | null;
38
+ };
33
39
  /**
34
40
  * @typedef {import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
35
41
  */
42
+ /**
43
+ * @typedef {Object} DeviceOptions
44
+ * @property {boolean?} desktop
45
+ * @property {boolean?} tablet
46
+ * @property {boolean?} mobile
47
+ */
36
48
  /**
37
49
  * @class NavbarManager
38
50
  * @description Manages a set of Map Buttons in the Navbar
@@ -44,11 +56,12 @@ declare class NavbarManager extends ButtonManager implements INavbarManager {
44
56
  * @param {import("./buttonManager.js").ButtonComponentOptions} buttonComponentOptions
45
57
  * @param {string|symbol} owner pluginName or vcsAppSymbol
46
58
  * @param {ButtonLocation} location Button render position
59
+ * @param {DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
47
60
  * @throws {Error} if a buttonComponent with the same ID has already been added
48
61
  * @returns {import("./buttonManager.js").ButtonComponent}
49
62
  */
50
63
  // @ts-ignore
51
- add(buttonComponentOptions: import("./buttonManager.js").ButtonComponentOptions, owner: string | symbol, location: ButtonLocation): import("./buttonManager.js").ButtonComponent;
64
+ add(buttonComponentOptions: import("./buttonManager.js").ButtonComponentOptions, owner: string | symbol, location: ButtonLocation, device?: DeviceOptions | undefined): import("./buttonManager.js").ButtonComponent;
52
65
  /**
53
66
  * Toggles a button of provided id by executing its callback.
54
67
  * Use active flag to force a state to be applied.
@@ -1,8 +1,9 @@
1
- import { check, ofEnum } from '@vcsuite/check';
1
+ import { check, ofEnum, optional } from '@vcsuite/check';
2
2
  import ButtonManager, { sortByWeight } from './buttonManager.js';
3
3
  import { vcsAppSymbol } from '../pluginHelper.js';
4
4
 
5
5
  export const locationSymbol = Symbol('location');
6
+ export const deviceSymbol = Symbol('device');
6
7
 
7
8
  /**
8
9
  * sorts by owner and optionally plugin order
@@ -74,6 +75,13 @@ export const ButtonLocation = {
74
75
  * @typedef {import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
75
76
  */
76
77
 
78
+ /**
79
+ * @typedef {Object} DeviceOptions
80
+ * @property {boolean?} desktop
81
+ * @property {boolean?} tablet
82
+ * @property {boolean?} mobile
83
+ */
84
+
77
85
  /**
78
86
  * @class NavbarManager
79
87
  * @description Manages a set of Map Buttons in the Navbar
@@ -85,13 +93,25 @@ class NavbarManager extends ButtonManager {
85
93
  * @param {import("./buttonManager.js").ButtonComponentOptions} buttonComponentOptions
86
94
  * @param {string|symbol} owner pluginName or vcsAppSymbol
87
95
  * @param {ButtonLocation} location Button render position
96
+ * @param {DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
88
97
  * @throws {Error} if a buttonComponent with the same ID has already been added
89
98
  * @returns {import("./buttonManager.js").ButtonComponent}
90
99
  */
91
- add(buttonComponentOptions, owner, location) {
100
+ add(
101
+ buttonComponentOptions,
102
+ owner,
103
+ location,
104
+ device = { desktop: true, tablet: true },
105
+ ) {
92
106
  check(location, ofEnum(ButtonLocation));
107
+ check(device, {
108
+ desktop: optional(Boolean),
109
+ tablet: optional(Boolean),
110
+ mobile: optional(Boolean),
111
+ });
93
112
  const buttonComponent = super.add(buttonComponentOptions, owner);
94
113
  buttonComponent[locationSymbol] = location;
114
+ buttonComponent[deviceSymbol] = device;
95
115
  return buttonComponent;
96
116
  }
97
117
 
@@ -3,8 +3,8 @@
3
3
  <v-menu
4
4
  v-model="open"
5
5
  @update:model-value="$emit('toggle', open)"
6
- location="bottom center"
7
- z-index="0"
6
+ :location="xs ? 'top center' : 'bottom center'"
7
+ :z-index="xs ? 2 : undefined"
8
8
  >
9
9
  <template #activator="{ props }">
10
10
  <VcsToolButton
@@ -22,7 +22,13 @@
22
22
  </template>
23
23
 
24
24
  <v-toolbar
25
- class="vcs-toolbox-toolbar--secondary mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
25
+ class="vcs-toolbox-toolbar--secondary mx-auto elevation-4 opacity-80 px-1"
26
+ :class="{
27
+ marginToTop: !xs,
28
+ marginToBottom: xs,
29
+ 'rounded-t': xs,
30
+ 'rounded-b': !xs,
31
+ }"
26
32
  :height="toolboxHeight"
27
33
  >
28
34
  <v-toolbar-items class="w-100">
@@ -52,10 +58,14 @@
52
58
  .marginToTop {
53
59
  margin-top: 3px;
54
60
  }
61
+ .marginToBottom {
62
+ margin-bottom: 3px;
63
+ }
55
64
  </style>
56
65
  <script>
57
66
  import { computed, ref } from 'vue';
58
67
  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
68
+ import { useDisplay } from 'vuetify';
59
69
  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
60
70
  import { getComponentsByOrder } from './toolboxManager.js';
61
71
  import { useFontSize } from '../../vuePlugins/vuetify.js';
@@ -104,11 +114,14 @@
104
114
  return fontSize.value * 3 + 1;
105
115
  });
106
116
 
117
+ const { xs } = useDisplay();
118
+
107
119
  return {
108
120
  open,
109
121
  orderedButtons,
110
122
  hasActiveAction,
111
123
  toolboxHeight,
124
+ xs,
112
125
  };
113
126
  },
114
127
  };
@@ -8,6 +8,7 @@ declare const _default: import("vue").DefineComponent<{
8
8
  orderedButtons: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
9
9
  hasActiveAction: import("vue").ComputedRef<boolean>;
10
10
  toolboxHeight: import("vue").ComputedRef<number>;
11
+ xs: import("vue").Ref<boolean>;
11
12
  }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
12
13
  group: {
13
14
  type: ObjectConstructor;
@@ -24,9 +24,9 @@
24
24
  />
25
25
  <v-menu
26
26
  v-model="open"
27
- location="bottom center"
27
+ :location="xs ? 'top center' : 'bottom center'"
28
28
  @update:model-value="$emit('toggle', open)"
29
- z-index="0"
29
+ :z-index="xs ? 2 : undefined"
30
30
  >
31
31
  <template #activator="{ props }">
32
32
  <VcsToolButton
@@ -42,7 +42,13 @@
42
42
  </template>
43
43
 
44
44
  <v-toolbar
45
- class="vcs-toolbox-2 mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
45
+ class="vcs-toolbox-2 mx-auto elevation-4 opacity-80 px-1"
46
+ :class="{
47
+ marginToTop: !xs,
48
+ marginToBottom: xs,
49
+ 'rounded-t': xs,
50
+ 'rounded-b': !xs,
51
+ }"
46
52
  :height="toolboxHeight"
47
53
  >
48
54
  <v-toolbar-items class="w-100">
@@ -66,10 +72,14 @@
66
72
  .marginToTop {
67
73
  margin-top: 3px;
68
74
  }
75
+ .marginToBottom {
76
+ margin-bottom: 3px;
77
+ }
69
78
  </style>
70
79
  <script>
71
80
  import { ref, computed } from 'vue';
72
81
  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
82
+ import { useDisplay } from 'vuetify';
73
83
  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
74
84
  import { useFontSize } from '../../vuePlugins/vuetify.js';
75
85
 
@@ -99,9 +109,11 @@
99
109
  const toolboxHeight = computed(() => {
100
110
  return fontSize.value * 3 + 1;
101
111
  });
112
+ const { xs } = useDisplay();
102
113
  return {
103
114
  open,
104
115
  toolboxHeight,
116
+ xs,
105
117
  };
106
118
  },
107
119
  };
@@ -6,6 +6,7 @@ declare const _default: import("vue").DefineComponent<{
6
6
  }, {
7
7
  open: import("vue").Ref<boolean>;
8
8
  toolboxHeight: import("vue").ComputedRef<number>;
9
+ xs: import("vue").Ref<boolean>;
9
10
  }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
10
11
  group: {
11
12
  type: ObjectConstructor;
@@ -1,13 +1,15 @@
1
1
  <template>
2
2
  <v-toolbar
3
- v-if="toolboxOpen && orderedGroups.length > 0 && smAndUp"
3
+ v-if="toolboxOpen && orderedGroups.length > 0"
4
4
  class="vcs-toolbox mx-auto elevation-4 opacity-80 toolbox-manager-component"
5
5
  :class="{
6
- 'rounded-b': !open,
6
+ 'rounded-b': !open && !xs,
7
+ 'rounded-t': xs,
7
8
  'vcs-toolbox__secondary': !isDefaultToolbox,
9
+ mobileToolbox: xs,
8
10
  }"
9
11
  :height="toolboxHeight"
10
- :style="{ zIndex }"
12
+ :style="{ zIndex: xs ? zIndexMobile : zIndex }"
11
13
  @click.stop="bringToTop"
12
14
  >
13
15
  <v-toolbar-items class="w-100 px-4 gc-1">
@@ -20,13 +22,19 @@
20
22
  v-if="group.type === ToolboxType.GROUP"
21
23
  :group="group"
22
24
  @toggle="openGroup"
23
- @click="bringToTop"
25
+ @click="
26
+ bringToTop;
27
+ xs && toolboxToggleAction.callback();
28
+ "
24
29
  />
25
30
  <ToolboxActionSelect
26
31
  v-else-if="group.type === ToolboxType.SELECT"
27
32
  :group="group"
28
33
  @toggle="openGroup"
29
- @click="bringToTop"
34
+ @click="
35
+ bringToTop;
36
+ xs && toolboxToggleAction.callback();
37
+ "
30
38
  />
31
39
  <VcsToolButton
32
40
  v-else
@@ -37,6 +45,7 @@
37
45
  :disabled="group.action.disabled"
38
46
  @click.stop="
39
47
  bringToTop();
48
+ xs && toolboxToggleAction.callback();
40
49
  group.action.callback($event);
41
50
  "
42
51
  v-bind="{ ...$attrs }"
@@ -61,10 +70,16 @@
61
70
  margin-top: 2px;
62
71
  width: fit-content;
63
72
  }
73
+ .mobileToolbox {
74
+ bottom: 0px !important;
75
+ position: absolute !important;
76
+ left: 50% !important;
77
+ transform: translateX(-50%) !important;
78
+ }
64
79
  </style>
65
80
 
66
81
  <script>
67
- import { inject, ref, computed, watch, onUnmounted } from 'vue';
82
+ import { inject, ref, computed, watch, onUnmounted, reactive } from 'vue';
68
83
  import { useDisplay } from 'vuetify';
69
84
  import { VToolbar, VToolbarItems } from 'vuetify/components';
70
85
  import {
@@ -76,7 +91,7 @@
76
91
  import ToolboxActionGroup from './GroupToolboxComponent.vue';
77
92
  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
78
93
  import { vcsAppSymbol } from '../../pluginHelper.js';
79
- import { ButtonLocation } from '../navbarManager.js';
94
+ import { ButtonLocation, deviceSymbol } from '../navbarManager.js';
80
95
  import { useFontSize } from '../../vuePlugins/vuetify.js';
81
96
 
82
97
  /**
@@ -114,6 +129,8 @@
114
129
  setup() {
115
130
  const app = inject('vcsApp');
116
131
 
132
+ const { smAndUp, xs, sm, mdAndUp } = useDisplay();
133
+
117
134
  const groups = computed(() => {
118
135
  return app.toolboxManager.componentIds.map((id) =>
119
136
  app.toolboxManager.get(id),
@@ -130,6 +147,8 @@
130
147
  toolboxComponentId,
131
148
  vcsAppSymbol,
132
149
  );
150
+ // The zIndex of the mobile toolbox is two higher than the desktop toolbox because it needs to be above the windows
151
+ const zIndexMobile = computed(() => zIndex.value + 2);
133
152
 
134
153
  /**
135
154
  * To be rendered in Toolbox components must meet certain conditions:
@@ -139,13 +158,18 @@
139
158
  * @param {SingleToolboxComponent|SelectToolboxComponent|GroupToolboxComponent} c
140
159
  * @returns {boolean}
141
160
  */
161
+
142
162
  function filterFunc(c) {
143
163
  return (
144
- c.type === ToolboxType.SINGLE ||
145
- c?.action?.tools?.length > 1 ||
146
- c.buttonManager?.componentIds?.length > 0
164
+ (c.type === ToolboxType.SINGLE ||
165
+ c?.action?.tools?.length > 1 ||
166
+ c.buttonManager?.componentIds?.length > 0) &&
167
+ ((xs.value === true && c[deviceSymbol]?.mobile === true) ||
168
+ (sm.value === true && c[deviceSymbol]?.tablet === true) ||
169
+ (mdAndUp.value === true && c[deviceSymbol]?.desktop === true))
147
170
  );
148
171
  }
172
+
149
173
  const orderedGroups = computed(() =>
150
174
  getComponentsByOrder(groups.value)
151
175
  .filter((comp) => comp.toolboxNames.includes(toolboxName.value))
@@ -153,16 +177,19 @@
153
177
  );
154
178
 
155
179
  const toolboxOpen = app.toolboxManager.open;
156
- const toolboxToggleAction = {
180
+ if (xs.value) {
181
+ toolboxOpen.value = false;
182
+ }
183
+ const toolboxToggleAction = reactive({
157
184
  name: 'toolboxToggleAction',
158
185
  icon: '$vcsTools',
159
186
  title: 'toolbox.title',
160
- active: true,
187
+ active: toolboxOpen.value,
161
188
  callback() {
162
189
  this.active = !this.active;
163
190
  toolboxOpen.value = this.active;
164
191
  },
165
- };
192
+ });
166
193
 
167
194
  function handleToolboxButton() {
168
195
  if (orderedGroups.value.length > 0) {
@@ -174,6 +201,7 @@
174
201
  },
175
202
  vcsAppSymbol,
176
203
  ButtonLocation.TOOL,
204
+ { desktop: true, tablet: true, mobile: true },
177
205
  );
178
206
  }
179
207
  } else {
@@ -201,7 +229,6 @@
201
229
  app.windowManager.bringWindowToTop(toolboxComponentId);
202
230
  };
203
231
 
204
- const { smAndUp } = useDisplay();
205
232
  const fontSize = useFontSize();
206
233
  const toolboxHeight = computed(() => {
207
234
  return fontSize.value * 3 + 1;
@@ -209,8 +236,10 @@
209
236
  return {
210
237
  smAndUp,
211
238
  toolboxOpen,
239
+ toolboxToggleAction,
212
240
  orderedGroups,
213
241
  zIndex,
242
+ zIndexMobile,
214
243
  isDefaultToolbox: computed(
215
244
  () => toolboxName.value === defaultToolboxName,
216
245
  ),
@@ -224,6 +253,7 @@
224
253
  }
225
254
  },
226
255
  toolboxHeight,
256
+ xs,
227
257
  };
228
258
  },
229
259
  };
@@ -12,8 +12,16 @@ export const toolboxComponentId: "toolbox";
12
12
  declare const _default: import("vue").DefineComponent<{}, {
13
13
  smAndUp: import("vue").Ref<boolean>;
14
14
  toolboxOpen: any;
15
+ toolboxToggleAction: {
16
+ name: string;
17
+ icon: string;
18
+ title: string;
19
+ active: any;
20
+ callback: () => void;
21
+ };
15
22
  orderedGroups: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
16
23
  zIndex: any;
24
+ zIndexMobile: import("vue").ComputedRef<any>;
17
25
  isDefaultToolbox: import("vue").ComputedRef<boolean>;
18
26
  ToolboxType: {
19
27
  SINGLE: number;
@@ -24,6 +32,7 @@ declare const _default: import("vue").DefineComponent<{}, {
24
32
  bringToTop: () => void;
25
33
  openGroup(group: any): void;
26
34
  toolboxHeight: import("vue").ComputedRef<number>;
35
+ xs: import("vue").Ref<boolean>;
27
36
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
28
37
  export default _default;
29
38
  export type ToolboxButtonGroup = {
@@ -159,11 +159,12 @@ declare class ToolboxManager implements IToolboxManager {
159
159
  * adds a ToolboxComponent
160
160
  * @param {SingleToolboxComponentOptions|SelectToolboxComponentOptions|GroupToolboxComponentOptions} toolboxComponentOptions
161
161
  * @param {string|symbol} owner pluginName or vcsAppSymbol
162
+ * @param {import('../navbarManager.js').DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
162
163
  * @throws {Error} if a toolboxComponent with the same ID has already been added
163
164
  * @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
164
165
  */
165
166
  // @ts-ignore
166
- add(toolboxComponentOptions: SingleToolboxComponentOptions | SelectToolboxComponentOptions | GroupToolboxComponentOptions, owner: string | symbol): SingleToolboxComponent | SelectToolboxComponent | import("vue").ShallowReactive<GroupToolboxComponent>;
167
+ add(toolboxComponentOptions: SingleToolboxComponentOptions | SelectToolboxComponentOptions | GroupToolboxComponentOptions, owner: string | symbol, device?: import("../navbarManager.js").DeviceOptions | undefined): SingleToolboxComponent | SelectToolboxComponent | import("vue").ShallowReactive<GroupToolboxComponent>;
167
168
  /**
168
169
  * removes all {@link ToolboxComponent}s of a specific owner and fires removed Events
169
170
  * @param {string|vcsAppSymbol} owner
@@ -6,6 +6,7 @@ import { vcsAppSymbol } from '../../pluginHelper.js';
6
6
  import ButtonManager from '../buttonManager.js';
7
7
  import { ActionPattern } from '../../components/lists/VcsActionList.vue';
8
8
  import { getActionFromOptions } from '../../actions/actionHelper.js';
9
+ import { deviceSymbol } from '../navbarManager.js';
9
10
 
10
11
  /**
11
12
  * Possible group types. Define behaviour of group:
@@ -287,12 +288,22 @@ class ToolboxManager {
287
288
  * adds a ToolboxComponent
288
289
  * @param {SingleToolboxComponentOptions|SelectToolboxComponentOptions|GroupToolboxComponentOptions} toolboxComponentOptions
289
290
  * @param {string|symbol} owner pluginName or vcsAppSymbol
291
+ * @param {import('../navbarManager.js').DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
290
292
  * @throws {Error} if a toolboxComponent with the same ID has already been added
291
293
  * @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
292
294
  */
293
- add(toolboxComponentOptions, owner) {
295
+ add(
296
+ toolboxComponentOptions,
297
+ owner,
298
+ device = { desktop: true, tablet: true },
299
+ ) {
294
300
  check(toolboxComponentOptions.id, maybe(String));
295
301
  check(toolboxComponentOptions.type, ofEnum(ToolboxType));
302
+ check(device, {
303
+ desktop: optional(Boolean),
304
+ tablet: optional(Boolean),
305
+ mobile: optional(Boolean),
306
+ });
296
307
  check(owner, oneOf(String, vcsAppSymbol));
297
308
 
298
309
  if (toolboxComponentOptions.id && this.has(toolboxComponentOptions.id)) {
@@ -322,6 +333,7 @@ class ToolboxManager {
322
333
  get toolboxNames() {
323
334
  return toolboxNames;
324
335
  },
336
+ [deviceSymbol]: device,
325
337
  };
326
338
 
327
339
  if (type === ToolboxType.SINGLE) {
@@ -9,7 +9,7 @@
9
9
  :class="{
10
10
  rounded: !isDocked,
11
11
  marginToTop: isDocked || !isChild,
12
- marginToTopTablet: isTabletWithOpenToolbar,
12
+ marginTablet: isTabletWithOpenToolbar,
13
13
  'rounded-be': isDynamicLeft,
14
14
  'rounded-bs': isDynamicRight,
15
15
  }"
@@ -42,8 +42,9 @@
42
42
  .marginToTop {
43
43
  margin-top: 2px;
44
44
  }
45
- .marginToTopTablet {
45
+ .marginTablet {
46
46
  margin-top: calc(var(--v-vcs-font-size) * 3 + 6px);
47
+ margin-bottom: 2px;
47
48
  }
48
49
  </style>
49
50
 
@@ -22,7 +22,10 @@
22
22
  {{ $st(headerTooltip) }}
23
23
  </v-tooltip>
24
24
  </h3>
25
- <div class="d-flex justify-space-between align-center">
25
+ <div
26
+ class="d-flex justify-space-between align-center"
27
+ :class="{ 'gc-4': xs, 'mr-2': xs }"
28
+ >
26
29
  <template v-if="windowState.headerActions?.length > 0">
27
30
  <VcsActionButtonList
28
31
  :actions="windowState.headerActions"
@@ -30,6 +33,7 @@
30
33
  />
31
34
  <v-divider vertical inset class="mx-1 my-1" />
32
35
  </template>
36
+
33
37
  <VcsButton
34
38
  v-if="infoAction"
35
39
  @click.stop="infoAction.callback()"
@@ -80,6 +84,7 @@
80
84
  <script>
81
85
  import { VIcon, VDivider, VTooltip } from 'vuetify/components';
82
86
  import { computed, getCurrentInstance, ref } from 'vue';
87
+ import { useDisplay } from 'vuetify';
83
88
  import { createEllipseTooltip } from '../../components/composables.js';
84
89
  import VcsButton from '../../components/buttons/VcsButton.vue';
85
90
  import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
@@ -130,6 +135,8 @@
130
135
  () => !props.windowState.hidePin && props.windowState.dockable,
131
136
  );
132
137
 
138
+ const { xs } = useDisplay();
139
+
133
140
  const vm = getCurrentInstance().proxy;
134
141
 
135
142
  const translatedHeaderTitle = computed(() =>
@@ -166,6 +173,7 @@
166
173
  translatedHeaderTitle,
167
174
  ),
168
175
  infoAction,
176
+ xs,
169
177
  };
170
178
  },
171
179
  };
@@ -21,6 +21,7 @@ declare const _default: import("vue").DefineComponent<{
21
21
  iconSize: import("vue").ComputedRef<number>;
22
22
  headerTooltip: import("vue").ComputedRef<string>;
23
23
  infoAction: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction | undefined;
24
+ xs: import("vue").Ref<boolean>;
24
25
  }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
25
26
  windowState: {
26
27
  type: ObjectConstructor;