@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
package/dist/assets/vuetify.js CHANGED
@@ -1 +1 @@
1
- export * from "./vuetify-5dbe2644.js";
1
+ export * from "./vuetify-43a20e18.js";
package/dist/index.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <title>VC Map</title>
5
5
  <meta charset="utf-8">
6
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1">
7
7
  <link
8
8
  class="vcs-favicon"
9
9
  rel="icon"
package/index.d.ts CHANGED
@@ -175,6 +175,8 @@ export { default as VcsFormattedNumber } from "./src/components/form-output/VcsF
175
175
  export type * from "./src/components/form-output/VcsFormattedNumber.vue.d.ts";
176
176
  export { default as VcsMarkdown } from "./src/components/form-output/VcsMarkdown.vue";
177
177
  export type * from "./src/components/form-output/VcsMarkdown.vue.d.ts";
178
+ export { default as VcsTemplateMarkdown } from "./src/components/form-output/VcsTemplateMarkdown.vue";
179
+ export type * from "./src/components/form-output/VcsTemplateMarkdown.vue.d.ts";
178
180
  export { default as VcsTextPage } from "./src/application/VcsTextPage.vue";
179
181
  export type * from "./src/application/VcsTextPage.vue.d.ts";
180
182
  export { default as VcsList } from "./src/components/lists/VcsList.vue";
package/index.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <title>VC Map</title>
5
5
  <meta charset="utf-8">
6
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1">
7
7
  <link
8
8
  class="vcs-favicon"
9
9
  rel="icon"
package/index.js CHANGED
@@ -289,6 +289,7 @@ export { default as VcsWizardStep } from './src/components/form-inputs-controls/
289
289
  export { default as VcsDatePicker } from './src/components/form-inputs-controls/VcsDatePicker.vue';
290
290
  export { default as VcsFormattedNumber } from './src/components/form-output/VcsFormattedNumber.vue';
291
291
  export { default as VcsMarkdown } from './src/components/form-output/VcsMarkdown.vue';
292
+ export { default as VcsTemplateMarkdown } from './src/components/form-output/VcsTemplateMarkdown.vue';
292
293
  export { default as VcsTextPage } from './src/application/VcsTextPage.vue';
293
294
  export {
294
295
  default as VcsActionList,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vcmap/ui",
3
- "version": "6.1.0-rc.6",
3
+ "version": "6.1.0-rc.7",
4
4
  "author": "Virtual City Systems",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -57,10 +57,13 @@
57
57
  },
58
58
  "peerDependencies": {
59
59
  "@vcmap-cesium/engine": "^11.0.2",
60
- "@vcmap/core": "^6.1.0-rc.5",
60
+ "@vcmap/core": "^6.1.0-rc.6",
61
61
  "ol": "^10.4.0",
62
62
  "vue": "~3.4.38",
63
- "vuetify": "^3.7.11"
63
+ "vuetify": "^3.7.12"
64
+ },
65
+ "overrides": {
66
+ "esbuild": "^0.25.0"
64
67
  },
65
68
  "devDependencies": {
66
69
  "@histoire/plugin-vue": "^0.17.17",
package/plugins/@vcmap-show-case/theming-example/src/index.js CHANGED
@@ -40,6 +40,7 @@ export default async () => {
40
40
  { id: 'theming-example', action },
41
41
  packageJSON.name,
42
42
  ButtonLocation.MENU,
43
+ { desktop: true, tablet: true },
43
44
  );
44
45
  this._destroyAction = destroy;
45
46
  },
package/src/application/MapsGroupMobileMenu.vue ADDED
@@ -0,0 +1,105 @@
1
+ <template>
2
+ <div v-if="mapActions.length > 0" class="maps-group-mobile-menu">
3
+ <v-menu v-model="open" location="center" z-index="99">
4
+ <template #activator="{ props }">
5
+ <VcsToolButton
6
+ class="vcs-toolbox-toggle-button pl-4"
7
+ width="50"
8
+ :icon="activeIcon"
9
+ v-bind="props"
10
+ >
11
+ <v-icon>{{ open ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
12
+ </VcsToolButton>
13
+ </template>
14
+
15
+ <v-toolbar
16
+ class="vcs-toolbox-toolbar--secondary mx-auto bottom-align rounded-t elevation-4 opacity-80 px-1"
17
+ :height="toolboxHeight"
18
+ >
19
+ <v-toolbar-items class="w-100">
20
+ <div class="d-flex align-center justify-space-between gc-1 w-100">
21
+ <VcsToolButton
22
+ v-for="action in mapActions"
23
+ :key="action.id"
24
+ :tooltip="action.title"
25
+ :icon="action.icon"
26
+ :disabled="action.disabled"
27
+ :active="action.active"
28
+ @click.stop="
29
+ () => {
30
+ $emit('click', $event);
31
+ open = false;
32
+ action.callback($event);
33
+ }
34
+ "
35
+ v-bind="{ ...$attrs }"
36
+ />
37
+ </div>
38
+ </v-toolbar-items>
39
+ </v-toolbar>
40
+ </v-menu>
41
+ </div>
42
+ </template>
43
+ <style lang="scss" scoped>
44
+ .bottom-align {
45
+ bottom: calc(var(--v-vcs-font-size) * 3 - 2px) !important;
46
+ }
47
+ </style>
48
+ <script>
49
+ import { computed, ref, inject } from 'vue';
50
+ import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
51
+ import VcsToolButton from '../components/buttons/VcsToolButton.vue';
52
+ import { useFontSize } from '../vuePlugins/vuetify.js';
53
+ import {
54
+ ButtonLocation,
55
+ deviceSymbol,
56
+ getActionsByLocation,
57
+ } from '../manager/navbarManager.js';
58
+
59
+ export default {
60
+ name: 'MapsGroupMobileMenu',
61
+ components: {
62
+ VcsToolButton,
63
+ VMenu,
64
+ VIcon,
65
+ VToolbar,
66
+ VToolbarItems,
67
+ },
68
+ setup() {
69
+ const app = inject('vcsApp');
70
+ const open = ref(false);
71
+
72
+ const mobileButtonComponents = computed(() =>
73
+ app.navbarManager.componentIds
74
+ .map((id) => app.navbarManager.get(id))
75
+ .filter((buttonComponent) => {
76
+ return buttonComponent[deviceSymbol].mobile;
77
+ }),
78
+ );
79
+
80
+ const mapActions = computed(() =>
81
+ getActionsByLocation(
82
+ mobileButtonComponents.value,
83
+ ButtonLocation.MAP,
84
+ [...app.plugins].map((p) => p.name),
85
+ ),
86
+ );
87
+
88
+ const activeIcon = computed(
89
+ () => mapActions.value.find((a) => a.active)?.icon,
90
+ );
91
+
92
+ const fontSize = useFontSize();
93
+ const toolboxHeight = computed(() => {
94
+ return fontSize.value * 3 + 5;
95
+ });
96
+
97
+ return {
98
+ open,
99
+ activeIcon,
100
+ toolboxHeight,
101
+ mapActions,
102
+ };
103
+ },
104
+ };
105
+ </script>
package/src/application/MapsGroupMobileMenu.vue.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ declare const _default: import("vue").DefineComponent<{}, {
2
+ open: import("vue").Ref<boolean>;
3
+ activeIcon: import("vue").ComputedRef<string | undefined>;
4
+ toolboxHeight: import("vue").ComputedRef<number>;
5
+ mapActions: import("vue").ComputedRef<import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[]>;
6
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
7
+ export default _default;
package/src/application/VcsApp.vue CHANGED
@@ -5,10 +5,11 @@
5
5
  :options="splashScreen"
6
6
  v-model="showSplashScreen"
7
7
  ></VcsSplashScreen>
8
- <VcsNavbar v-if="!config.hideHeader" />
8
+ <VcsNavbar v-if="!config.hideHeader && smAndUp && !mobileLandscape" />
9
+ <VcsNavbarMobile v-if="!config.hideHeader && xs && !mobileLandscape" />
9
10
  <VcsContainer :attribution-action="attributionAction" />
10
11
  <v-footer
11
- v-if="showFooter"
12
+ v-if="showFooter && !mobileLandscape"
12
13
  app
13
14
  absolute
14
15
  :height="footerHeight"
@@ -32,6 +33,9 @@
32
33
  :attribution-action="attributionAction"
33
34
  />
34
35
  </v-footer>
36
+ <p v-if="mobileLandscape" class="mobileRotatedWarning">
37
+ {{ $st('footer.mobile.rotationWarning') }}
38
+ </p>
35
39
  </v-container>
36
40
  </template>
37
41
 
@@ -39,6 +43,17 @@
39
43
  :deep(.v-application--wrap) {
40
44
  min-height: fit-content;
41
45
  }
46
+ .mobileRotatedWarning {
47
+ bottom: 0px;
48
+ z-index: 5;
49
+ position: fixed;
50
+ background-color: rgba(var(--v-theme-surface-light), 0.5);
51
+ color: rgb(var(--v-theme-on-surface));
52
+ backdrop-filter: blur(1px);
53
+ -webkit-backdrop-filter: blur(1px);
54
+ padding: 5px;
55
+ border-radius: 4px;
56
+ }
42
57
  </style>
43
58
 
44
59
  <script>
@@ -58,6 +73,7 @@
58
73
  import { ButtonLocation } from '../manager/navbarManager.js';
59
74
  import { vcsAppSymbol } from '../pluginHelper.js';
60
75
  import VcsNavbar from './VcsNavbar.vue';
76
+ import VcsNavbarMobile from './VcsNavbarMobile.vue';
61
77
  import {
62
78
  createLinkAction,
63
79
  createMapButtonAction,
@@ -70,20 +86,21 @@
70
86
  createVcsThemes,
71
87
  setTheme,
72
88
  useFontSize,
89
+ isMobileLandscape,
73
90
  } from '../vuePlugins/vuetify.js';
74
91
  import VcsLegend from '../legend/VcsLegend.vue';
75
92
  import { getLegendEntries } from '../legend/legendHelper.js';
76
93
  import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
77
94
  import VcsObliqueFooter from './VcsObliqueFooter.vue';
78
95
  import VcsTextPageFooter from './VcsTextPageFooter.vue';
79
- import VcsSplashScreen, { getSplashScreenHash } from './VcsSplashScreen.vue';
96
+ import VcsSplashScreen, {
97
+ shouldShowSplashSceen,
98
+ } from './VcsSplashScreen.vue';
80
99
  import VcsTextPage from './VcsTextPage.vue';
81
100
  import VcsAttributions from './VcsAttributions.vue';
82
101
  import { getAttributions } from './attributionsHelper.js';
83
102
  import VcsDefaultLogoMobile from '../logo-mobile.svg';
84
103
  import VcsPositionDisplay from './VcsPositionDisplay.vue';
85
- import { getFromLocalStorage, hideSplashScreenKey } from '../localStorage.js';
86
- import { name as packageName } from '../../package.json';
87
104
 
88
105
  /**
89
106
  * This helper checks the uiConfig and depending on the value will setup/teardown the providedSetupFunction
@@ -188,6 +205,7 @@
188
205
  },
189
206
  vcsAppSymbol,
190
207
  ButtonLocation.MAP,
208
+ { mobile: true, tablet: true, desktop: true },
191
209
  );
192
210
  mapButtonActionDestroy[name] = () => {
193
211
  app.navbarManager.remove(`mapButton-${name}`);
@@ -257,16 +275,18 @@
257
275
  },
258
276
  vcsAppSymbol,
259
277
  ButtonLocation.CONTENT,
278
+ { mobile: true, tablet: true, desktop: true },
260
279
  );
261
280
  }
262
281
  };
263
-
282
+ const { xs } = useDisplay();
264
283
  let currentEntryLength = entries.length;
265
284
  const watchEntries = watch(entries, (newValue) => {
266
285
  if (
267
286
  app.uiConfig.config.openLegendOnAdd &&
268
287
  newValue.length > currentEntryLength &&
269
- !app.windowManager.has(legendComponentId)
288
+ !app.windowManager.has(legendComponentId) &&
289
+ !xs.value
270
290
  ) {
271
291
  app.windowManager.add(
272
292
  {
@@ -373,6 +393,7 @@
373
393
  },
374
394
  vcsAppSymbol,
375
395
  ButtonLocation.MENU,
396
+ { mobile: true, tablet: true, desktop: true },
376
397
  );
377
398
  return () => {
378
399
  customScreenDestroy();
@@ -406,11 +427,11 @@
406
427
  * @returns {WatchStopHandle}
407
428
  */
408
429
  function setupSplashScreen(app) {
430
+ const { config, showSplashScreen } = app.uiConfig;
409
431
  function setupSplashScreenAction(moduleId) {
410
- const { config, showSplashScreen } = app.uiConfig;
411
432
  const { splashScreen } = config;
412
433
  if (splashScreen && moduleId !== app.dynamicModuleId) {
413
- showSplashScreen.value = true;
434
+ showSplashScreen.value = shouldShowSplashSceen(app);
414
435
  }
415
436
  if (splashScreen && splashScreen.menuEntry) {
416
437
  const splashScreenAction = {
@@ -428,6 +449,7 @@
428
449
  },
429
450
  vcsAppSymbol,
430
451
  ButtonLocation.MENU,
452
+ { mobile: true, tablet: true, desktop: true },
431
453
  );
432
454
  }
433
455
  }
@@ -485,6 +507,7 @@
485
507
  },
486
508
  vcsAppSymbol,
487
509
  ButtonLocation.MENU,
510
+ { mobile: true, tablet: true, desktop: true },
488
511
  );
489
512
  return () => {
490
513
  app.navbarManager.remove(settingsComponentId);
@@ -514,6 +537,7 @@
514
537
  },
515
538
  vcsAppSymbol,
516
539
  ButtonLocation.MENU,
540
+ { mobile: true, tablet: true, desktop: true },
517
541
  );
518
542
  }
519
543
 
@@ -747,6 +771,7 @@
747
771
  VcsObliqueFooter,
748
772
  VcsSplashScreen,
749
773
  VcsNavbar,
774
+ VcsNavbarMobile,
750
775
  VContainer,
751
776
  VFooter,
752
777
  VSpacer,
@@ -797,21 +822,14 @@
797
822
 
798
823
  function getSplashScreenConfig() {
799
824
  if (app.uiConfig.config.splashScreen) {
800
- const config = app.uiConfig.getByKey('splashScreen');
801
- const hash = getSplashScreenHash(app);
802
- const moduleId = config[moduleIdSymbol];
803
- const storedHash = getFromLocalStorage(
804
- `${packageName}_${moduleId}`,
805
- hideSplashScreenKey,
806
- );
807
- if (hash !== storedHash) {
808
- return {
809
- title: 'components.splashScreen.name',
810
- tooltip: 'components.splashScreen.tooltip',
811
- position: { width: '800px', height: '400px' },
812
- ...app.uiConfig.config.splashScreen,
813
- };
825
+ if (shouldShowSplashSceen(app)) {
826
+ showSplashScreen.value = true;
814
827
  }
828
+ return {
829
+ title: 'components.splashScreen.name',
830
+ tooltip: 'components.splashScreen.tooltip',
831
+ ...app.uiConfig.config.splashScreen,
832
+ };
815
833
  }
816
834
  return undefined;
817
835
  }
@@ -837,7 +855,10 @@
837
855
  destroyAttributions();
838
856
  });
839
857
 
840
- const { smAndUp } = useDisplay();
858
+ const { smAndUp, xs } = useDisplay();
859
+
860
+ const mobileLandscape = isMobileLandscape();
861
+
841
862
  const fontSize = useFontSize();
842
863
  const footerHeight = computed(() => {
843
864
  return Math.ceil(fontSize.value * 1.65);
@@ -879,6 +900,9 @@
879
900
  splashScreen,
880
901
  attributionEntries,
881
902
  attributionAction,
903
+ smAndUp,
904
+ xs,
905
+ mobileLandscape,
882
906
  };
883
907
  },
884
908
  };
package/src/application/VcsApp.vue.d.ts CHANGED
@@ -447,16 +447,19 @@ declare const _default: import("vue").DefineComponent<{
447
447
  * Whether to display a checkbox allowing the user not to see the SplashScreen again. This parameter is relative to moduleId and configuration; the SplashScreen will be shown again in case of any change.
448
448
  */
449
449
  enableDontShowAgain?: boolean | undefined;
450
- position: {
450
+ position?: {
451
451
  readonly width?: string | undefined;
452
452
  readonly height?: string | undefined;
453
453
  readonly maxHeight?: string | undefined;
454
454
  readonly maxWidth?: string | undefined;
455
- };
455
+ } | undefined;
456
456
  tooltip: string;
457
457
  } | undefined>;
458
458
  attributionEntries: import("vue").Ref<import("./attributionsHelper.js", { with: { "resolution-mode": "import" } }).AttributionEntry[]>;
459
459
  attributionAction: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction;
460
+ smAndUp: import("vue").Ref<boolean>;
461
+ xs: import("vue").Ref<boolean>;
462
+ mobileLandscape: import("vue").ComputedRef<boolean>;
460
463
  }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
461
464
  appId: {
462
465
  type: StringConstructor;
package/src/application/VcsContainer.vue CHANGED
@@ -3,9 +3,9 @@
3
3
  class="vcs-container pa-0"
4
4
  :class="{
5
5
  'vcs-container-xs': xs,
6
- 'with-header': !config.hideHeader,
7
- 'without-header': config.hideHeader,
8
- 'without-footer': config.hideFooter,
6
+ 'with-header': !config.hideHeader && !mobileLandscape,
7
+ 'without-header': config.hideHeader || mobileLandscape,
8
+ 'without-footer': config.hideFooter || mobileLandscape,
9
9
  }"
10
10
  fluid
11
11
  absolute
@@ -20,18 +20,18 @@
20
20
  :class="{ 'mobile-logo': sm }"
21
21
  />
22
22
  </template>
23
- <!--VcsButton
24
- v-if="!$vuetify.breakpoint.smAndUp && $vuetify.breakpoint.mobile"
23
+ <VcsButton
24
+ v-if="!smAndUp"
25
25
  :key="attributionAction.name"
26
26
  :tooltip="attributionAction.title"
27
- :icon="attributionAction.icon"
27
+ icon="mdi-copyright"
28
28
  :active="attributionAction.active"
29
29
  @click.stop="attributionAction.callback($event)"
30
30
  class="z-index-1 mobile-attribution-btn"
31
- /-->
31
+ />
32
32
  <PanelManagerComponent />
33
- <ToolboxManagerComponent v-if="!config.hideToolbox" />
34
- <WindowManagerComponent />
33
+ <ToolboxManagerComponent v-if="!config.hideToolbox && !mobileLandscape" />
34
+ <WindowManagerComponent v-if="!mobileLandscape" />
35
35
  <NotifierComponent />
36
36
  </v-container>
37
37
  </template>
@@ -55,7 +55,7 @@
55
55
 
56
56
  .vcs-container-xs.with-header {
57
57
  top: 0;
58
- bottom: 56px;
58
+ bottom: calc(var(--v-vcs-font-size) * 3 + 10px);
59
59
  }
60
60
  .vcs-container-xs.without-header {
61
61
  top: 0;
@@ -72,8 +72,23 @@
72
72
  }
73
73
  .mobile-attribution-btn {
74
74
  position: fixed;
75
- right: 2px;
76
- bottom: 36px;
75
+ right: 32px;
76
+ bottom: 67px;
77
+ background-color: rgba(var(--v-theme-surface-light), 0.5);
78
+ color: rgb(var(--v-theme-on-surface));
79
+ backdrop-filter: blur(1px);
80
+ -webkit-backdrop-filter: blur(1px);
81
+ padding: 6px !important;
82
+ padding-bottom: 7px !important;
83
+ border-radius: 4px;
84
+ height: 35px !important;
85
+ width: 35px !important;
86
+ font-size: 20px !important;
87
+ justify-content: center;
88
+ align-items: center;
89
+ }
90
+ ::v-deep(.mobile-attribution-btn span i) {
91
+ font-size: calc(var(--v-vcs-font-size) + 13px) !important;
77
92
  }
78
93
  .z-index-1 {
79
94
  z-index: 1;
@@ -84,11 +99,13 @@
84
99
  import { computed, inject } from 'vue';
85
100
  import { useDisplay } from 'vuetify';
86
101
  import { VContainer } from 'vuetify/components';
102
+ import VcsButton from '../components/buttons/VcsButton.vue';
87
103
  import PanelManagerComponent from '../manager/panel/PanelManagerComponent.vue';
88
104
  import WindowManagerComponent from '../manager/window/WindowManager.vue';
89
105
  import ToolboxManagerComponent from '../manager/toolbox/ToolboxManagerComponent.vue';
90
106
  import NotifierComponent from '../notifier/NotifierComponent.vue';
91
107
  import VcsDefaultLogoMobile from '../logo-mobile.svg';
108
+ import { isMobileLandscape } from '../vuePlugins/vuetify.js';
92
109
 
93
110
  /**
94
111
  * @description The main container with map canvas
@@ -101,6 +118,7 @@
101
118
  ToolboxManagerComponent,
102
119
  VContainer,
103
120
  NotifierComponent,
121
+ VcsButton,
104
122
  },
105
123
  props: {
106
124
  attributionAction: {
@@ -111,12 +129,16 @@
111
129
  setup() {
112
130
  /** @type {import("../vcsUiApp.js").default} */
113
131
  const app = inject('vcsApp');
114
- const { smAndDown, xs, sm } = useDisplay();
132
+ const { smAndDown, xs, sm, smAndUp, mobile } = useDisplay();
133
+ const mobileLandscape = isMobileLandscape();
115
134
  return {
116
135
  config: app.uiConfig.config,
117
136
  smAndDown,
118
137
  xs,
119
138
  sm,
139
+ smAndUp,
140
+ mobile,
141
+ mobileLandscape,
120
142
  mobileLogo: computed(
121
143
  () =>
122
144
  app.uiConfig.config.mobileLogo ??
package/src/application/VcsContainer.vue.d.ts CHANGED
@@ -294,6 +294,9 @@ declare const _default: import("vue").DefineComponent<{
294
294
  smAndDown: import("vue").Ref<boolean>;
295
295
  xs: import("vue").Ref<boolean>;
296
296
  sm: import("vue").Ref<boolean>;
297
+ smAndUp: import("vue").Ref<boolean>;
298
+ mobile: import("vue").ComputedRef<boolean>;
299
+ mobileLandscape: import("vue").ComputedRef<boolean>;
297
300
  mobileLogo: import("vue").ComputedRef<any>;
298
301
  }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
299
302
  attributionAction: {
package/src/application/VcsMobileMenuList.vue ADDED
@@ -0,0 +1,118 @@
1
+ <script setup>
2
+ import { computed, inject } from 'vue';
3
+ import { VDivider, VList, VListItem } from 'vuetify/components';
4
+ import {
5
+ ButtonLocation,
6
+ deviceSymbol,
7
+ getActionsByLocation,
8
+ } from '../manager/navbarManager.js';
9
+ import VcsTextPageFooter from './VcsTextPageFooter.vue';
10
+ import { getDataProtection, getImprint } from './uiConfigHelper.js';
11
+ import { toolboxComponentId } from '../manager/toolbox/ToolboxManagerComponent.vue';
12
+ import { defaultContentTreeComponentId } from '../contentTree/contentTreeCollection.js';
13
+ import { legendComponentId } from './VcsApp.vue';
14
+
15
+ const app = inject('vcsApp');
16
+
17
+ const mobileButtonComponents = computed(() =>
18
+ app.navbarManager.componentIds
19
+ .map((id) => app.navbarManager.get(id))
20
+ .filter((buttonComponent) => {
21
+ return buttonComponent[deviceSymbol].mobile;
22
+ }),
23
+ );
24
+
25
+ const getActions = (location) =>
26
+ computed(() =>
27
+ getActionsByLocation(
28
+ mobileButtonComponents.value,
29
+ location,
30
+ [...app.plugins].map((p) => p.name),
31
+ ),
32
+ );
33
+
34
+ // Actions from the content overflow are put in Menu
35
+ const defaultContentTreeComponentIdAction = app.navbarManager.get(
36
+ defaultContentTreeComponentId,
37
+ ).action;
38
+ const legendComponentIdAction =
39
+ app.navbarManager.get(legendComponentId).action;
40
+ const contentOverflowActions = computed(() => {
41
+ return getActions(ButtonLocation.CONTENT).value.filter(
42
+ (action) =>
43
+ action.name !== defaultContentTreeComponentIdAction.name &&
44
+ action.name !== legendComponentIdAction.name,
45
+ );
46
+ });
47
+
48
+ const toolboxToggleAction = app.navbarManager.get(toolboxComponentId).action;
49
+
50
+ const toolboxOverflowActions = computed(() =>
51
+ getActions(ButtonLocation.TOOL).value.filter(
52
+ (action) => action.name !== toolboxToggleAction.name,
53
+ ),
54
+ );
55
+
56
+ const mobileMenuActions = [
57
+ ...getActions(ButtonLocation.MENU).value,
58
+ ...getActions(ButtonLocation.SHARE).value,
59
+ ...getActions(ButtonLocation.PROJECT).value,
60
+ ...toolboxOverflowActions.value,
61
+ ...contentOverflowActions.value,
62
+ ];
63
+
64
+ const dataProtection = getDataProtection(app.uiConfig?.config);
65
+ const imprint = getImprint(app.uiConfig?.config);
66
+ </script>
67
+
68
+ <template>
69
+ <v-list>
70
+ <div v-for="action in mobileMenuActions" :key="action.name">
71
+ <v-list-item
72
+ @click="action.callback()"
73
+ :title="$t(action.name)"
74
+ :prepend-icon="action.icon"
75
+ >
76
+ </v-list-item>
77
+ <v-divider></v-divider>
78
+ </div>
79
+ <template v-if="imprint">
80
+ <v-list-item v-if="imprint">
81
+ <VcsTextPageFooter
82
+ class="plainStyle"
83
+ :text-page="imprint"
84
+ :window-id="'imprintWindow'"
85
+ />
86
+ </v-list-item>
87
+ <v-divider></v-divider>
88
+ </template>
89
+ <template v-if="dataProtection">
90
+ <v-list-item v-if="dataProtection">
91
+ <VcsTextPageFooter
92
+ class="plainStyle"
93
+ :text-page="dataProtection"
94
+ :window-id="'dataProtectionWindow'"
95
+ />
96
+ </v-list-item>
97
+ </template>
98
+ </v-list>
99
+ </template>
100
+
101
+ <style scoped lang="scss">
102
+ .plainStyle {
103
+ font-family: var(--v-vcs-font-family), sans-serif !important;
104
+ font-size: var(--v-vcs-font-size) !important;
105
+ }
106
+ ::v-deep(.text-page-footer) {
107
+ font-size: var(--v-vcs-font-size) !important;
108
+ text-decoration: none !important;
109
+
110
+ a {
111
+ color: var(--v-text-color);
112
+ text-decoration: none !important;
113
+ }
114
+ }
115
+ ::v-deep(.v-list-item__prepend) {
116
+ display: block !important;
117
+ }
118
+ </style>
package/src/application/VcsMobileMenuList.vue.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
2
+ export default _default;