@vcmap/ui 5.1.8 → 5.2.1

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 (99) hide show
  1. package/build/buildTypes.js +9 -0
  2. package/config/base.config.json +33 -2
  3. package/config/dev.config.json +22 -2
  4. package/config/www.config.json +16 -0
  5. package/dist/assets/cesium.js +1 -1
  6. package/dist/assets/{core.45041e.js → core.a8552c.js} +4160 -4041
  7. package/dist/assets/core.js +1 -1
  8. package/dist/assets/index-8783569c.js +1 -0
  9. package/dist/assets/ol.js +1 -1
  10. package/dist/assets/{ui.74ba2a.css → ui.aebd62.css} +2 -2
  11. package/dist/assets/{ui.74ba2a.js → ui.aebd62.js} +8031 -6985
  12. package/dist/assets/ui.js +1 -1
  13. package/dist/assets/vue.js +2 -2
  14. package/dist/assets/{vuetify.72ace9.js → vuetify.c8459d.js} +1 -1
  15. package/dist/assets/vuetify.js +2 -2
  16. package/dist/index.html +1 -1
  17. package/index.d.ts +22 -2
  18. package/index.js +29 -1
  19. package/package.json +2 -2
  20. package/plugins/@vcmap-show-case/collection-manager-example/src/CollectionManagerExample.vue +110 -37
  21. package/plugins/@vcmap-show-case/collection-manager-example/src/index.js +4 -0
  22. package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue +10 -3
  23. package/plugins/@vcmap-show-case/panel-tester/README.md +3 -0
  24. package/plugins/@vcmap-show-case/panel-tester/package.json +5 -0
  25. package/plugins/@vcmap-show-case/panel-tester/src/IframePanelExample.vue +15 -0
  26. package/plugins/@vcmap-show-case/panel-tester/src/ImgPanelExample.vue +19 -0
  27. package/plugins/@vcmap-show-case/panel-tester/src/PanelExample.vue +128 -0
  28. package/plugins/@vcmap-show-case/panel-tester/src/TextPanelExample.vue +34 -0
  29. package/plugins/@vcmap-show-case/panel-tester/src/index.js +63 -0
  30. package/plugins/package.json +7 -3
  31. package/src/actions/actionHelper.js +1 -1
  32. package/src/actions/flightActions.d.ts +38 -2
  33. package/src/actions/flightActions.js +257 -6
  34. package/src/application/VcsApp.vue +4 -104
  35. package/src/application/VcsApp.vue.d.ts +0 -6
  36. package/src/application/VcsContainer.vue +105 -0
  37. package/src/application/VcsContainer.vue.d.ts +14 -0
  38. package/src/application/VcsMainMap.vue +68 -0
  39. package/src/application/VcsMainMap.vue.d.ts +9 -0
  40. package/src/application/markdownHelper.d.ts +7 -0
  41. package/src/application/markdownHelper.js +57 -1
  42. package/src/components/form-inputs-controls/VcsRadioGrid.vue +27 -42
  43. package/src/contentTree/LayerTree.vue +40 -14
  44. package/src/downloadHelper.d.ts +0 -2
  45. package/src/downloadHelper.js +2 -4
  46. package/src/featureInfo/BalloonComponent.vue +31 -3
  47. package/src/featureInfo/BalloonComponent.vue.d.ts +1 -0
  48. package/src/featureInfo/IframeComponent.vue +55 -0
  49. package/src/featureInfo/IframeComponent.vue.d.ts +25 -0
  50. package/src/featureInfo/MarkdownBalloonComponent.vue +24 -0
  51. package/src/featureInfo/MarkdownBalloonComponent.vue.d.ts +12 -0
  52. package/src/featureInfo/abstractFeatureInfoView.js +54 -22
  53. package/src/featureInfo/addressBalloonFeatureInfoView.d.ts +2 -2
  54. package/src/featureInfo/addressBalloonFeatureInfoView.js +1 -1
  55. package/src/featureInfo/balloonFeatureInfoView.js +1 -1
  56. package/src/featureInfo/balloonHelper.js +16 -9
  57. package/src/featureInfo/featureInfo.js +15 -0
  58. package/src/featureInfo/iframeFeatureInfoView.js +1 -20
  59. package/src/featureInfo/iframeWmsFeatureInfoView.d.ts +41 -0
  60. package/src/featureInfo/iframeWmsFeatureInfoView.js +73 -0
  61. package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts +47 -0
  62. package/src/featureInfo/markdownBalloonFeatureInfoView.js +81 -0
  63. package/src/featureInfo/markdownFeatureInfoView.d.ts +47 -0
  64. package/src/featureInfo/markdownFeatureInfoView.js +95 -0
  65. package/src/i18n/de.d.ts +8 -3
  66. package/src/i18n/de.js +3 -0
  67. package/src/i18n/en.d.ts +32 -26
  68. package/src/i18n/en.js +4 -1
  69. package/src/manager/collectionManager/CollectionComponent.vue +12 -49
  70. package/src/manager/collectionManager/CollectionComponent.vue.d.ts +5 -9
  71. package/src/manager/collectionManager/CollectionComponentContent.vue +102 -0
  72. package/src/manager/collectionManager/CollectionComponentContent.vue.d.ts +17 -0
  73. package/src/manager/collectionManager/CollectionComponentList.vue +10 -2
  74. package/src/manager/collectionManager/CollectionComponentList.vue.d.ts +9 -0
  75. package/src/manager/collectionManager/CollectionComponentStandalone.vue +91 -0
  76. package/src/manager/collectionManager/CollectionComponentStandalone.vue.d.ts +9 -0
  77. package/src/manager/collectionManager/collectionManager.d.ts +2 -2
  78. package/src/manager/collectionManager/collectionManager.js +21 -19
  79. package/src/manager/panel/PanelComponent.vue +110 -0
  80. package/src/manager/panel/PanelComponent.vue.d.ts +19 -0
  81. package/src/manager/panel/PanelManagerComponent.vue +224 -0
  82. package/src/manager/panel/PanelManagerComponent.vue.d.ts +36 -0
  83. package/src/manager/panel/panelHelper.d.ts +83 -0
  84. package/src/manager/panel/panelHelper.js +272 -0
  85. package/src/manager/panel/panelManager.d.ts +338 -0
  86. package/src/manager/panel/panelManager.js +381 -0
  87. package/src/manager/window/WindowManager.vue +14 -0
  88. package/src/manager/window/windowHelper.js +1 -1
  89. package/src/manager/window/windowManager.js +4 -0
  90. package/src/search/ResultItem.vue +1 -1
  91. package/src/search/search.d.ts +2 -2
  92. package/src/search/search.js +2 -2
  93. package/src/vcsUiApp.d.ts +14 -0
  94. package/src/vcsUiApp.js +23 -1
  95. package/dist/assets/index-3cd5a3f3.js +0 -1
  96. /package/dist/assets/{cesium.035e3a.js → cesium.1b488a.js} +0 -0
  97. /package/dist/assets/{ol.eb3bee.js → ol.7488a7.js} +0 -0
  98. /package/dist/assets/{vue.17a8fa.js → vue.df3538.js} +0 -0
  99. /package/dist/assets/{vuetify.72ace9.css → vuetify.c8459d.css} +0 -0
package/dist/assets/ui.js CHANGED
@@ -1 +1 @@
1
- export * from "./ui.74ba2a.js";
1
+ export * from "./ui.aebd62.js";
package/dist/assets/vue.js CHANGED
@@ -1,5 +1,5 @@
1
- export * from "./vue.17a8fa.js";
2
- import { default as f } from "./vue.17a8fa.js";
1
+ export * from "./vue.df3538.js";
2
+ import { default as f } from "./vue.df3538.js";
3
3
  export {
4
4
  f as default
5
5
  };
package/dist/assets/{vuetify.72ace9.js → vuetify.c8459d.js} RENAMED
@@ -13,7 +13,7 @@ function loadCss(href) {
13
13
  elem.onerror = reject;
14
14
  document.head.appendChild(elem);
15
15
  });
16
- } await loadCss('./assets/vuetify.72ace9.css');import v from "./vue.17a8fa.js";
16
+ } await loadCss('./assets/vuetify.c8459d.css');import v from "./vue.df3538.js";
17
17
  const Ne = v.extend().extend({
18
18
  name: "themeable",
19
19
  provide() {
package/dist/assets/vuetify.js CHANGED
@@ -1,5 +1,5 @@
1
- export * from "./vuetify.72ace9.js";
2
- import { default as f } from "./vuetify.72ace9.js";
1
+ export * from "./vuetify.c8459d.js";
2
+ import { default as f } from "./vuetify.c8459d.js";
3
3
  export {
4
4
  f as default
5
5
  };
package/dist/index.html CHANGED
@@ -95,7 +95,7 @@
95
95
  }
96
96
  }
97
97
  </style>
98
- <script type="module" crossorigin src="./assets/index-3cd5a3f3.js"></script>
98
+ <script type="module" crossorigin src="./assets/index-8783569c.js"></script>
99
99
  </head>
100
100
  <body style="height: 100vh; margin: 0;">
101
101
  <noscript>
package/index.d.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  export { default as StyleSelector } from "./src/actions/StyleSelector.vue";
2
2
  export type * from "./src/actions/StyleSelector.vue.d.ts";
3
- export { parseAndSanitizeMarkdown } from "./src/application/markdownHelper.js";
4
- export type * from "./src/application/markdownHelper.d.ts";
5
3
  export { default as ActivateLayersCallback } from "./src/callback/activateLayersCallback.js";
6
4
  export type * from "./src/callback/activateLayersCallback.d.ts";
7
5
  export { default as DeactivateLayersCallback } from "./src/callback/deactivateLayersCallback.js";
@@ -42,6 +40,10 @@ export { default as WindowComponentHeader } from "./src/manager/window/WindowCom
42
40
  export type * from "./src/manager/window/WindowComponentHeader.vue.d.ts";
43
41
  export { default as VcsWindowManager } from "./src/manager/window/WindowManager.vue";
44
42
  export type * from "./src/manager/window/WindowManager.vue.d.ts";
43
+ export { default as PanelManagerComponent } from "./src/manager/panel/PanelManagerComponent.vue";
44
+ export type * from "./src/manager/panel/PanelManagerComponent.vue.d.ts";
45
+ export { default as PanelComponent } from "./src/manager/panel/PanelComponent.vue";
46
+ export type * from "./src/manager/panel/PanelComponent.vue.d.ts";
45
47
  export { default as ButtonManager } from "./src/manager/buttonManager.js";
46
48
  export type * from "./src/manager/buttonManager.d.ts";
47
49
  export { default as CategoryManager } from "./src/manager/collectionManager/categoryManager.js";
@@ -54,8 +56,12 @@ export { default as CollectionComponentProvider } from "./src/manager/collection
54
56
  export type * from "./src/manager/collectionManager/CollectionComponentProvider.vue.d.ts";
55
57
  export { default as CollectionComponent } from "./src/manager/collectionManager/CollectionComponent.vue";
56
58
  export type * from "./src/manager/collectionManager/CollectionComponent.vue.d.ts";
59
+ export { default as CollectionComponentStandalone } from "./src/manager/collectionManager/CollectionComponentStandalone.vue";
60
+ export type * from "./src/manager/collectionManager/CollectionComponentStandalone.vue.d.ts";
57
61
  export { default as CollectionComponentList } from "./src/manager/collectionManager/CollectionComponentList.vue";
58
62
  export type * from "./src/manager/collectionManager/CollectionComponentList.vue.d.ts";
63
+ export { default as CollectionComponentContent } from "./src/manager/collectionManager/CollectionComponentContent.vue";
64
+ export type * from "./src/manager/collectionManager/CollectionComponentContent.vue.d.ts";
59
65
  export { default as ContextMenuManager } from "./src/manager/contextMenu/contextMenuManager.js";
60
66
  export type * from "./src/manager/contextMenu/contextMenuManager.d.ts";
61
67
  export { default as ContextMenuComponent } from "./src/manager/contextMenu/ContextMenuComponent.vue";
@@ -68,10 +74,18 @@ export { default as BalloonComponent } from "./src/featureInfo/BalloonComponent.
68
74
  export type * from "./src/featureInfo/BalloonComponent.vue.d.ts";
69
75
  export { default as AddressBalloonComponent } from "./src/featureInfo/AddressBalloonComponent.vue";
70
76
  export type * from "./src/featureInfo/AddressBalloonComponent.vue.d.ts";
77
+ export { default as IframeComponent } from "./src/featureInfo/IframeComponent.vue";
78
+ export type * from "./src/featureInfo/IframeComponent.vue.d.ts";
71
79
  export { default as IframeFeatureInfoView } from "./src/featureInfo/iframeFeatureInfoView.js";
72
80
  export type * from "./src/featureInfo/iframeFeatureInfoView.d.ts";
81
+ export { default as IframeWmsFeatureInfoView } from "./src/featureInfo/iframeWmsFeatureInfoView.js";
82
+ export type * from "./src/featureInfo/iframeWmsFeatureInfoView.d.ts";
73
83
  export { default as TableFeatureInfoView } from "./src/featureInfo/tableFeatureInfoView.js";
74
84
  export type * from "./src/featureInfo/tableFeatureInfoView.d.ts";
85
+ export { default as MarkdownFeatureInfoView } from "./src/featureInfo/markdownFeatureInfoView.js";
86
+ export type * from "./src/featureInfo/markdownFeatureInfoView.d.ts";
87
+ export { default as MarkdownBalloonFeatureInfoView } from "./src/featureInfo/markdownBalloonFeatureInfoView.js";
88
+ export type * from "./src/featureInfo/markdownBalloonFeatureInfoView.d.ts";
75
89
  export { default as MapNavCompass } from "./src/navigation/MapNavCompass.vue";
76
90
  export type * from "./src/navigation/MapNavCompass.vue.d.ts";
77
91
  export { default as MapNavigation } from "./src/navigation/MapNavigation.vue";
@@ -194,10 +208,14 @@ export { default as ImportComponent } from "./src/components/import/ImportCompon
194
208
  export type * from "./src/components/import/ImportComponent.vue.d.ts";
195
209
  export { createMapButtonAction, createToggleAction, createOverviewMapAction, createModalAction, createLinkAction, createGoToViewpointAction, createZoomToFeatureAction } from "./src/actions/actionHelper.js";
196
210
  export type * from "./src/actions/actionHelper.d.ts";
211
+ export { parseAndSanitizeMarkdown, replaceAttributes } from "./src/application/markdownHelper.js";
212
+ export type * from "./src/application/markdownHelper.d.ts";
197
213
  export { createStateRefAction, StateActionState } from "./src/actions/stateRefAction.js";
198
214
  export type * from "./src/actions/stateRefAction.d.ts";
199
215
  export { createLayerToggleAction, createZoomToExtentAction, createExtentFeatureAction, setupExtentComponentActions } from "./src/actions/extentActions.js";
200
216
  export type * from "./src/actions/extentActions.d.ts";
217
+ export { createPlayAction, PlayerDirection, createStepAction, createFastAction, createFlightPlayerActions, setupFlightListItemPlayer, createZoomToFlightAction, createFlightVisualizationAction, createExportFlightAction, importFlights } from "./src/actions/flightActions.js";
218
+ export type * from "./src/actions/flightActions.d.ts";
201
219
  export { createListItemRenameAction, createListItemDeleteAction, createListItemBulkAction, createListExportAction, createListImportAction, importIntoLayer } from "./src/actions/listActions.js";
202
220
  export type * from "./src/actions/listActions.d.ts";
203
221
  export { default as VcsCallback, executeCallbacks } from "./src/callback/vcsCallback.js";
@@ -212,6 +230,8 @@ export { default as WindowManager, WindowSlot, WindowPositions, posToPixel, wind
212
230
  export type * from "./src/manager/window/windowManager.d.ts";
213
231
  export { WindowAlignment, getFittedWindowPositionOptions, getFittedWindowPositionOptionsFromMapEvent, getTargetSize, getWindowPositionOptions, getWindowPositionOptionsFromMapEvent, posToNumber, posToPercent, optionsFromWindowPosition, updateWindowPosition, clipToTargetSize, moveWindow, applyParentPosition, getPositionAppliedOnTarget } from "./src/manager/window/windowHelper.js";
214
232
  export type * from "./src/manager/window/windowHelper.d.ts";
233
+ export { default as PanelManager, PanelLocation } from "./src/manager/panel/panelManager.js";
234
+ export type * from "./src/manager/panel/panelManager.d.ts";
215
235
  export { default as NavbarManager, ButtonLocation, getActionsByLocation } from "./src/manager/navbarManager.js";
216
236
  export type * from "./src/manager/navbarManager.d.ts";
217
237
  export { default as ToolboxManager, ToolboxType, defaultToolboxName } from "./src/manager/toolbox/toolboxManager.js";
package/index.js CHANGED
@@ -11,7 +11,10 @@ export {
11
11
  createGoToViewpointAction,
12
12
  createZoomToFeatureAction,
13
13
  } from './src/actions/actionHelper.js';
14
- export { parseAndSanitizeMarkdown } from './src/application/markdownHelper.js';
14
+ export {
15
+ parseAndSanitizeMarkdown,
16
+ replaceAttributes,
17
+ } from './src/application/markdownHelper.js';
15
18
  export {
16
19
  createStateRefAction,
17
20
  StateActionState,
@@ -22,6 +25,18 @@ export {
22
25
  createExtentFeatureAction,
23
26
  setupExtentComponentActions,
24
27
  } from './src/actions/extentActions.js';
28
+ export {
29
+ createPlayAction,
30
+ PlayerDirection,
31
+ createStepAction,
32
+ createFastAction,
33
+ createFlightPlayerActions,
34
+ setupFlightListItemPlayer,
35
+ createZoomToFlightAction,
36
+ createFlightVisualizationAction,
37
+ createExportFlightAction,
38
+ importFlights,
39
+ } from './src/actions/flightActions.js';
25
40
  export {
26
41
  createListItemRenameAction,
27
42
  createListItemDeleteAction,
@@ -97,6 +112,13 @@ export {
97
112
  getPositionAppliedOnTarget,
98
113
  } from './src/manager/window/windowHelper.js';
99
114
 
115
+ export {
116
+ default as PanelManager,
117
+ PanelLocation,
118
+ } from './src/manager/panel/panelManager.js';
119
+ export { default as PanelManagerComponent } from './src/manager/panel/PanelManagerComponent.vue';
120
+ export { default as PanelComponent } from './src/manager/panel/PanelComponent.vue';
121
+
100
122
  export { default as ButtonManager } from './src/manager/buttonManager.js';
101
123
  export {
102
124
  default as NavbarManager,
@@ -121,7 +143,9 @@ export {
121
143
  isEditorCollectionComponentClass,
122
144
  } from './src/manager/collectionManager/editorCollectionComponentClass.js';
123
145
  export { default as CollectionComponent } from './src/manager/collectionManager/CollectionComponent.vue';
146
+ export { default as CollectionComponentStandalone } from './src/manager/collectionManager/CollectionComponentStandalone.vue';
124
147
  export { default as CollectionComponentList } from './src/manager/collectionManager/CollectionComponentList.vue';
148
+ export { default as CollectionComponentContent } from './src/manager/collectionManager/CollectionComponentContent.vue';
125
149
  export { default as ContextMenuManager } from './src/manager/contextMenu/contextMenuManager.js';
126
150
  export { default as ContextMenuComponent } from './src/manager/contextMenu/ContextMenuComponent.vue';
127
151
  export { default as ContextMenuInteraction } from './src/manager/contextMenu/contextMenuInteraction.js';
@@ -143,8 +167,12 @@ export {
143
167
  } from './src/featureInfo/balloonHelper.js';
144
168
  export { default as BalloonComponent } from './src/featureInfo/BalloonComponent.vue';
145
169
  export { default as AddressBalloonComponent } from './src/featureInfo/AddressBalloonComponent.vue';
170
+ export { default as IframeComponent } from './src/featureInfo/IframeComponent.vue';
146
171
  export { default as IframeFeatureInfoView } from './src/featureInfo/iframeFeatureInfoView.js';
172
+ export { default as IframeWmsFeatureInfoView } from './src/featureInfo/iframeWmsFeatureInfoView.js';
147
173
  export { default as TableFeatureInfoView } from './src/featureInfo/tableFeatureInfoView.js';
174
+ export { default as MarkdownFeatureInfoView } from './src/featureInfo/markdownFeatureInfoView.js';
175
+ export { default as MarkdownBalloonFeatureInfoView } from './src/featureInfo/markdownBalloonFeatureInfoView.js';
148
176
  export {
149
177
  getHighlightStyle,
150
178
  featureInfoViewSymbol,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vcmap/ui",
3
- "version": "5.1.8",
3
+ "version": "5.2.1",
4
4
  "author": "Virtual City Systems",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -53,7 +53,7 @@
53
53
  },
54
54
  "peerDependencies": {
55
55
  "@vcmap-cesium/engine": "^4.0.3",
56
- "@vcmap/core": "^5.1.6",
56
+ "@vcmap/core": "^5.2.0",
57
57
  "ol": "^7.5.2",
58
58
  "vue": "~2.7.3",
59
59
  "vuetify": "~2.6.7"
package/plugins/@vcmap-show-case/collection-manager-example/src/CollectionManagerExample.vue CHANGED
@@ -1,54 +1,62 @@
1
1
  <template>
2
2
  <div>
3
- <VcsFormSection heading="Collection Manager" v-if="componentIds.length > 0">
3
+ <CollectionComponentStandalone />
4
+ <VcsFormSection heading="Collection Manager" :header-actions="actions">
4
5
  <CollectionManagerComponent />
5
- </VcsFormSection>
6
- <VcsFormSection heading="Tester Settings">
7
- <v-container class="py-0 px-1">
8
- <v-row no-gutters>
9
- <v-col>
10
- <VcsLabel html-for="selectInput" dense>
11
- {{ $t('collectionManagerExample.select') }}
12
- </VcsLabel>
13
- </v-col>
14
- <v-col>
15
- <VcsSelect
16
- id="selectInput"
17
- :items="appCollections"
18
- dense
19
- v-model="selected"
20
- />
21
- </v-col>
22
- </v-row>
23
- <div class="d-flex gap-2 w-full justify-end">
24
- <VcsFormButton @click="addCollection" variant="filled"
25
- >Add Collection</VcsFormButton
26
- >
27
- <VcsFormButton @click="clear">Clear</VcsFormButton>
28
- </div>
29
- </v-container>
6
+ <p v-if="componentIds.length < 1" class="pa-1">
7
+ Add a collection by clicking +
8
+ </p>
9
+ <v-dialog v-model="addDialog" width="400">
10
+ <v-card>
11
+ <v-container>
12
+ <v-row no-gutters>
13
+ <v-col>
14
+ <VcsLabel html-for="selectInput" dense>
15
+ {{ $t('collectionManagerExample.select') }}
16
+ </VcsLabel>
17
+ </v-col>
18
+ <v-col>
19
+ <VcsSelect
20
+ id="selectInput"
21
+ :items="appCollections"
22
+ dense
23
+ v-model="selected"
24
+ />
25
+ </v-col>
26
+ </v-row>
27
+ <div class="d-flex gap-2 w-full justify-end">
28
+ <VcsFormButton @click="addCollection" variant="filled"
29
+ >Add Collection</VcsFormButton
30
+ >
31
+ </div>
32
+ </v-container>
33
+ </v-card>
34
+ </v-dialog>
30
35
  </VcsFormSection>
31
36
  </div>
32
37
  </template>
33
38
 
34
39
  <script>
35
- import { inject, onMounted, onUnmounted, ref } from 'vue';
40
+ import { inject, onMounted, onUnmounted, provide, ref } from 'vue';
36
41
  import {
37
- VcsFormSection,
42
+ CollectionComponentClass,
43
+ CollectionComponentStandalone,
38
44
  CollectionManagerComponent,
45
+ NotificationType,
39
46
  VcsFormButton,
40
- VcsSelect,
47
+ VcsFormSection,
41
48
  VcsLabel,
42
- NotificationType,
49
+ VcsSelect,
43
50
  } from '@vcmap/ui';
44
- import { VContainer, VRow, VCol } from 'vuetify/lib';
51
+ import { VCol, VContainer, VRow, VCard, VDialog } from 'vuetify/lib';
52
+ import { Collection } from '@vcmap/core';
45
53
  import { name as owner } from '../package.json';
46
54
 
47
55
  /**
48
56
  * a sample mapping function adding a console log to all list items
49
57
  * @param {T} i
50
- * @param {CollectionComponentClass} c
51
- * @param {VcsListItem} l
58
+ * @param {import("@vcmap/ui").CollectionComponentClass} c
59
+ * @param {import("@vcmap/ui").VcsListItem} l
52
60
  */
53
61
  const mappingFunction = (i, c, l) => {
54
62
  l.actions = [
@@ -62,17 +70,61 @@
62
70
  ];
63
71
  };
64
72
 
73
+ function setupCollectionComponentStandalone() {
74
+ const collectionComponent = new CollectionComponentClass({
75
+ id: 'standalone',
76
+ title: 'Collection Component Standalone',
77
+ collection: new Collection(),
78
+ renamable: true,
79
+ });
80
+
81
+ for (let i = 0; i <= 12; i++) {
82
+ collectionComponent.collection.add({
83
+ name: `item-${i}`,
84
+ properties: {
85
+ title: `item-${i}-title`,
86
+ },
87
+ random: Math.random(),
88
+ });
89
+ }
90
+
91
+ collectionComponent.addActions([
92
+ {
93
+ action: {
94
+ name: 'add',
95
+ icon: '$vcsPlus',
96
+ callback() {
97
+ const i = collectionComponent.collection.size;
98
+ collectionComponent.collection.add({
99
+ name: `item-${i}`,
100
+ properties: {
101
+ title: `item-${i}-title`,
102
+ },
103
+ random: Math.random(),
104
+ });
105
+ },
106
+ },
107
+ owner,
108
+ },
109
+ ]);
110
+
111
+ return collectionComponent;
112
+ }
113
+
65
114
  export default {
66
115
  name: 'CollectionManagerExample',
67
116
  components: {
68
117
  VcsFormSection,
69
118
  CollectionManagerComponent,
119
+ CollectionComponentStandalone,
70
120
  VcsFormButton,
71
121
  VcsLabel,
72
122
  VcsSelect,
73
123
  VContainer,
74
124
  VRow,
75
125
  VCol,
126
+ VCard,
127
+ VDialog,
76
128
  },
77
129
  setup() {
78
130
  const app = inject('vcsApp');
@@ -88,6 +140,12 @@
88
140
  'viewpoints',
89
141
  ];
90
142
  const selected = ref(appCollections[0]);
143
+ const addDialog = ref(false);
144
+
145
+ const collectionComponentStandalone =
146
+ setupCollectionComponentStandalone();
147
+ // provide for <CollectionComponentStandalone>
148
+ provide('collectionComponent', collectionComponentStandalone);
91
149
 
92
150
  onMounted(() => {
93
151
  /**
@@ -165,16 +223,31 @@
165
223
  }
166
224
  }
167
225
 
168
- function clear() {
169
- collectionManager.clear();
170
- }
226
+ const actions = [
227
+ {
228
+ name: 'collectionManagerExample.addAction',
229
+ title: 'collectionManagerExample.addAction',
230
+ icon: '$vcsPlus',
231
+ callback() {
232
+ addDialog.value = true;
233
+ },
234
+ },
235
+ {
236
+ name: 'collectionManagerExample.clearAction',
237
+ title: 'collectionManagerExample.clearAction',
238
+ callback() {
239
+ collectionManager.clear();
240
+ },
241
+ },
242
+ ];
171
243
 
172
244
  return {
173
245
  componentIds,
174
246
  appCollections,
175
247
  selected,
176
248
  addCollection,
177
- clear,
249
+ addDialog,
250
+ actions,
178
251
  };
179
252
  },
180
253
  };
package/plugins/@vcmap-show-case/collection-manager-example/src/index.js CHANGED
@@ -64,12 +64,16 @@ export default async function collectionManagerExample() {
64
64
  collectionManagerExample: {
65
65
  select: 'Collection',
66
66
  addFailed: 'Die gewählte Collection wurde bereits hinzugefügt!',
67
+ addAction: 'Collection hinzufügen',
68
+ clearAction: 'Manager leeren',
67
69
  },
68
70
  },
69
71
  en: {
70
72
  collectionManagerExample: {
71
73
  select: 'Collection',
72
74
  addFailed: 'The selected collection is already added!',
75
+ addAction: 'Add collection to manager',
76
+ clearAction: 'Clear Manager',
73
77
  },
74
78
  },
75
79
  },
package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue CHANGED
@@ -407,7 +407,7 @@
407
407
  <VcsRadioGrid
408
408
  v-model="state.selected"
409
409
  :items="[
410
- { value: 'A', src: 'mdi-circle-outline' },
410
+ { value: 'AAAAAAAA', src: 'mdi-circle-outline' },
411
411
  { value: 'B', src: 'mdi-close' },
412
412
  { value: 'C', src: 'mdi-triangle-outline' },
413
413
  { value: 'D', src: 'mdi-square-outline' },
@@ -416,8 +416,15 @@
416
416
  :rules="[(v) => v !== 'D' || 'Square is not allowed']"
417
417
  >
418
418
  <!-- if label slot is not used, src is forwarded to img src -->
419
- <template #label="{ src }">
420
- <v-icon size="24">{{ src }}</v-icon>
419
+ <template #label="{ src, value }">
420
+ <figure>
421
+ <v-icon size="24" class="d-flex justify-center">{{
422
+ src
423
+ }}</v-icon>
424
+ <figcaption class="d-flex justify-center">
425
+ {{ value }}
426
+ </figcaption>
427
+ </figure>
421
428
  </template>
422
429
  </VcsRadioGrid>
423
430
  </v-col>
package/plugins/@vcmap-show-case/panel-tester/README.md ADDED
@@ -0,0 +1,3 @@
1
+ # Window Tester
2
+
3
+ This is a show-case plugin demonstrating the concept of [PANELS](../../../documentation/PANELS.md).
package/plugins/@vcmap-show-case/panel-tester/package.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "name": "@vcmap-show-case/panel-tester",
3
+ "version": "1.0.0",
4
+ "mapVersion": "^5.1.0"
5
+ }
package/plugins/@vcmap-show-case/panel-tester/src/IframePanelExample.vue ADDED
@@ -0,0 +1,15 @@
1
+ <template>
2
+ <div class="pa-1">
3
+ <h1>{{ $attrs['panel-state'].location }}</h1>
4
+ <p>{{ $attrs['panel-state'].id }}</p>
5
+ <div class="d-flex flex-column overflow-hidden w-full h-full pa-1">
6
+ <iframe src="http://localhost:8080" class="flex-grow-1" height="1000" />
7
+ </div>
8
+ </div>
9
+ </template>
10
+ <style scoped></style>
11
+ <script>
12
+ export default {
13
+ name: 'IframePanelExample',
14
+ };
15
+ </script>
package/plugins/@vcmap-show-case/panel-tester/src/ImgPanelExample.vue ADDED
@@ -0,0 +1,19 @@
1
+ <template>
2
+ <div class="pa-1 h-full">
3
+ <h1>{{ $attrs['panel-state'].location }}</h1>
4
+ <p>{{ $attrs['panel-state'].id }}</p>
5
+ <div class="d-flex pa-1">
6
+ <img
7
+ src="https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png"
8
+ alt="logo"
9
+ />
10
+ </div>
11
+ </div>
12
+ </template>
13
+
14
+ <style scoped></style>
15
+ <script>
16
+ export default {
17
+ name: 'ImgPanelExample',
18
+ };
19
+ </script>
package/plugins/@vcmap-show-case/panel-tester/src/PanelExample.vue ADDED
@@ -0,0 +1,128 @@
1
+ <template>
2
+ <div class="pa-1">
3
+ <VcsToolButton
4
+ v-for="(location, index) in panelLocations"
5
+ :key="`b-${index}`"
6
+ :active="isActive(location).value"
7
+ @click="(e) => toggle(e, location)"
8
+ class="pa-1"
9
+ >
10
+ toggle {{ location }}
11
+ </VcsToolButton>
12
+ <v-divider />
13
+ <VcsToolButton class="pa-1" @click="switchLR"
14
+ >switch LEFT-RIGHT
15
+ </VcsToolButton>
16
+ <VcsToolButton class="pa-1" @click="toggleResizable"
17
+ >toggle resizable
18
+ </VcsToolButton>
19
+ </div>
20
+ </template>
21
+ <style></style>
22
+ <script>
23
+ import { computed, inject, ref } from 'vue';
24
+ import { VDivider } from 'vuetify/lib';
25
+ import { VcsToolButton, PanelLocation } from '@vcmap/ui';
26
+ import { name as owner } from '../package.json';
27
+ import IframePanelExample from './IframePanelExample.vue';
28
+ import TextPanelExample from './TextPanelExample.vue';
29
+ import ImgPanelExample from './ImgPanelExample.vue';
30
+
31
+ export default {
32
+ name: 'PanelExample',
33
+ components: { VcsToolButton, VDivider },
34
+ setup() {
35
+ const app = inject('vcsApp');
36
+ const panelLocations = Object.values(PanelLocation);
37
+ const componentIds = ref(app.panelManager.componentIds);
38
+
39
+ const sampleIds = {
40
+ [PanelLocation.LEFT]: 'panel-1',
41
+ [PanelLocation.RIGHT]: 'panel-2',
42
+ [PanelLocation.BOTTOM]: 'panel-3',
43
+ };
44
+
45
+ const sampleComponent = {
46
+ [PanelLocation.LEFT]: IframePanelExample,
47
+ [PanelLocation.RIGHT]: TextPanelExample,
48
+ [PanelLocation.BOTTOM]: ImgPanelExample,
49
+ };
50
+
51
+ const sampleClasses = {
52
+ [PanelLocation.LEFT]: {
53
+ green: true,
54
+ },
55
+ [PanelLocation.RIGHT]: {
56
+ red: true,
57
+ },
58
+ };
59
+
60
+ const sampleStyles = {
61
+ [PanelLocation.BOTTOM]: {
62
+ backgroundColor: '#2196f3',
63
+ },
64
+ };
65
+
66
+ const panelComponentOptions = (location) => ({
67
+ id: sampleIds[location],
68
+ component: sampleComponent[location],
69
+ state: {
70
+ classes: sampleClasses[location],
71
+ styles: sampleStyles[location],
72
+ },
73
+ });
74
+
75
+ return {
76
+ toggle(e, location) {
77
+ if (app.panelManager.hasLocation(location)) {
78
+ app.panelManager.removePanelAtLocation(location);
79
+ } else {
80
+ e.stopPropagation();
81
+ app.panelManager.add(
82
+ { ...panelComponentOptions(location) },
83
+ owner,
84
+ location,
85
+ );
86
+ }
87
+ },
88
+ switchLR() {
89
+ const l = app.panelManager.getLocation(PanelLocation.LEFT);
90
+ const r = app.panelManager.getLocation(PanelLocation.RIGHT);
91
+ app.panelManager.removePanelAtLocation(PanelLocation.LEFT);
92
+ app.panelManager.removePanelAtLocation(PanelLocation.RIGHT);
93
+ if (l) {
94
+ const { id, component, state } = l;
95
+ app.panelManager.add(
96
+ { id, component, state },
97
+ owner,
98
+ PanelLocation.RIGHT,
99
+ );
100
+ }
101
+ if (r) {
102
+ const { id, component, state } = r;
103
+ app.panelManager.add(
104
+ { id, component, state },
105
+ owner,
106
+ PanelLocation.LEFT,
107
+ );
108
+ }
109
+ },
110
+ toggleResizable() {
111
+ app.panelManager.componentIds.forEach((id) => {
112
+ Object.assign(app.panelManager.get(id).state, {
113
+ resizable: !app.panelManager.get(id).state.resizable,
114
+ });
115
+ });
116
+ },
117
+ panelLocations,
118
+ isActive(location) {
119
+ return computed(() =>
120
+ componentIds.value.includes(
121
+ app.panelManager.getLocation(location)?.id,
122
+ ),
123
+ );
124
+ },
125
+ };
126
+ },
127
+ };
128
+ </script>