@vcmap/ui 5.1.8 → 5.2.0

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 (91) 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/dist/assets/cesium.js +1 -1
  5. package/dist/assets/{core.45041e.js → core.627882.js} +4160 -4041
  6. package/dist/assets/core.js +1 -1
  7. package/dist/assets/index-76acacac.js +1 -0
  8. package/dist/assets/ol.js +1 -1
  9. package/dist/assets/{ui.74ba2a.css → ui.895896.css} +2 -2
  10. package/dist/assets/{ui.74ba2a.js → ui.895896.js} +8628 -7657
  11. package/dist/assets/ui.js +1 -1
  12. package/dist/assets/vue.js +2 -2
  13. package/dist/assets/{vuetify.72ace9.js → vuetify.1621f3.js} +1 -1
  14. package/dist/assets/vuetify.js +2 -2
  15. package/dist/index.html +1 -1
  16. package/index.d.ts +16 -0
  17. package/index.js +23 -0
  18. package/package.json +2 -2
  19. package/plugins/@vcmap-show-case/collection-manager-example/src/CollectionManagerExample.vue +110 -37
  20. package/plugins/@vcmap-show-case/collection-manager-example/src/index.js +4 -0
  21. package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue +10 -3
  22. package/plugins/@vcmap-show-case/panel-tester/README.md +3 -0
  23. package/plugins/@vcmap-show-case/panel-tester/package.json +5 -0
  24. package/plugins/@vcmap-show-case/panel-tester/src/IframePanelExample.vue +15 -0
  25. package/plugins/@vcmap-show-case/panel-tester/src/ImgPanelExample.vue +19 -0
  26. package/plugins/@vcmap-show-case/panel-tester/src/PanelExample.vue +128 -0
  27. package/plugins/@vcmap-show-case/panel-tester/src/TextPanelExample.vue +34 -0
  28. package/plugins/@vcmap-show-case/panel-tester/src/index.js +63 -0
  29. package/src/actions/actionHelper.js +1 -1
  30. package/src/actions/flightActions.d.ts +38 -2
  31. package/src/actions/flightActions.js +257 -6
  32. package/src/application/VcsApp.vue +4 -104
  33. package/src/application/VcsApp.vue.d.ts +0 -6
  34. package/src/application/VcsContainer.vue +105 -0
  35. package/src/application/VcsContainer.vue.d.ts +14 -0
  36. package/src/application/VcsMainMap.vue +68 -0
  37. package/src/application/VcsMainMap.vue.d.ts +9 -0
  38. package/src/application/markdownHelper.d.ts +7 -0
  39. package/src/application/markdownHelper.js +57 -1
  40. package/src/components/form-inputs-controls/VcsRadioGrid.vue +27 -42
  41. package/src/contentTree/LayerTree.vue +40 -14
  42. package/src/downloadHelper.d.ts +0 -2
  43. package/src/downloadHelper.js +2 -4
  44. package/src/featureInfo/BalloonComponent.vue +31 -3
  45. package/src/featureInfo/BalloonComponent.vue.d.ts +1 -0
  46. package/src/featureInfo/MarkdownBalloonComponent.vue +24 -0
  47. package/src/featureInfo/MarkdownBalloonComponent.vue.d.ts +12 -0
  48. package/src/featureInfo/abstractFeatureInfoView.js +54 -22
  49. package/src/featureInfo/addressBalloonFeatureInfoView.d.ts +2 -2
  50. package/src/featureInfo/addressBalloonFeatureInfoView.js +1 -1
  51. package/src/featureInfo/balloonFeatureInfoView.js +1 -1
  52. package/src/featureInfo/balloonHelper.js +16 -9
  53. package/src/featureInfo/featureInfo.js +10 -0
  54. package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts +47 -0
  55. package/src/featureInfo/markdownBalloonFeatureInfoView.js +81 -0
  56. package/src/featureInfo/markdownFeatureInfoView.d.ts +47 -0
  57. package/src/featureInfo/markdownFeatureInfoView.js +95 -0
  58. package/src/i18n/de.d.ts +8 -3
  59. package/src/i18n/de.js +3 -0
  60. package/src/i18n/en.d.ts +32 -26
  61. package/src/i18n/en.js +4 -1
  62. package/src/manager/collectionManager/CollectionComponent.vue +12 -49
  63. package/src/manager/collectionManager/CollectionComponent.vue.d.ts +5 -9
  64. package/src/manager/collectionManager/CollectionComponentContent.vue +102 -0
  65. package/src/manager/collectionManager/CollectionComponentContent.vue.d.ts +17 -0
  66. package/src/manager/collectionManager/CollectionComponentList.vue +10 -2
  67. package/src/manager/collectionManager/CollectionComponentList.vue.d.ts +9 -0
  68. package/src/manager/collectionManager/CollectionComponentStandalone.vue +91 -0
  69. package/src/manager/collectionManager/CollectionComponentStandalone.vue.d.ts +9 -0
  70. package/src/manager/collectionManager/collectionManager.d.ts +2 -2
  71. package/src/manager/collectionManager/collectionManager.js +21 -19
  72. package/src/manager/panel/PanelComponent.vue +110 -0
  73. package/src/manager/panel/PanelComponent.vue.d.ts +19 -0
  74. package/src/manager/panel/PanelManagerComponent.vue +224 -0
  75. package/src/manager/panel/PanelManagerComponent.vue.d.ts +36 -0
  76. package/src/manager/panel/panelHelper.d.ts +83 -0
  77. package/src/manager/panel/panelHelper.js +272 -0
  78. package/src/manager/panel/panelManager.d.ts +338 -0
  79. package/src/manager/panel/panelManager.js +381 -0
  80. package/src/manager/window/WindowManager.vue +14 -0
  81. package/src/manager/window/windowHelper.js +1 -1
  82. package/src/search/ResultItem.vue +1 -1
  83. package/src/search/search.d.ts +2 -2
  84. package/src/search/search.js +2 -2
  85. package/src/vcsUiApp.d.ts +14 -0
  86. package/src/vcsUiApp.js +18 -0
  87. package/dist/assets/index-3cd5a3f3.js +0 -1
  88. /package/dist/assets/{cesium.035e3a.js → cesium.9e39f4.js} +0 -0
  89. /package/dist/assets/{ol.eb3bee.js → ol.fe8c0e.js} +0 -0
  90. /package/dist/assets/{vue.17a8fa.js → vue.4b3319.js} +0 -0
  91. /package/dist/assets/{vuetify.72ace9.css → vuetify.1621f3.css} +0 -0
package/dist/assets/ui.js CHANGED
@@ -1 +1 @@
1
- export * from "./ui.74ba2a.js";
1
+ export * from "./ui.895896.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.4b3319.js";
2
+ import { default as f } from "./vue.4b3319.js";
3
3
  export {
4
4
  f as default
5
5
  };
package/dist/assets/{vuetify.72ace9.js → vuetify.1621f3.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.1621f3.css');import v from "./vue.4b3319.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.1621f3.js";
2
+ import { default as f } from "./vuetify.1621f3.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-76acacac.js"></script>
99
99
  </head>
100
100
  <body style="height: 100vh; margin: 0;">
101
101
  <noscript>
package/index.d.ts CHANGED
@@ -42,6 +42,10 @@ export { default as WindowComponentHeader } from "./src/manager/window/WindowCom
42
42
  export type * from "./src/manager/window/WindowComponentHeader.vue.d.ts";
43
43
  export { default as VcsWindowManager } from "./src/manager/window/WindowManager.vue";
44
44
  export type * from "./src/manager/window/WindowManager.vue.d.ts";
45
+ export { default as PanelManagerComponent } from "./src/manager/panel/PanelManagerComponent.vue";
46
+ export type * from "./src/manager/panel/PanelManagerComponent.vue.d.ts";
47
+ export { default as PanelComponent } from "./src/manager/panel/PanelComponent.vue";
48
+ export type * from "./src/manager/panel/PanelComponent.vue.d.ts";
45
49
  export { default as ButtonManager } from "./src/manager/buttonManager.js";
46
50
  export type * from "./src/manager/buttonManager.d.ts";
47
51
  export { default as CategoryManager } from "./src/manager/collectionManager/categoryManager.js";
@@ -54,8 +58,12 @@ export { default as CollectionComponentProvider } from "./src/manager/collection
54
58
  export type * from "./src/manager/collectionManager/CollectionComponentProvider.vue.d.ts";
55
59
  export { default as CollectionComponent } from "./src/manager/collectionManager/CollectionComponent.vue";
56
60
  export type * from "./src/manager/collectionManager/CollectionComponent.vue.d.ts";
61
+ export { default as CollectionComponentStandalone } from "./src/manager/collectionManager/CollectionComponentStandalone.vue";
62
+ export type * from "./src/manager/collectionManager/CollectionComponentStandalone.vue.d.ts";
57
63
  export { default as CollectionComponentList } from "./src/manager/collectionManager/CollectionComponentList.vue";
58
64
  export type * from "./src/manager/collectionManager/CollectionComponentList.vue.d.ts";
65
+ export { default as CollectionComponentContent } from "./src/manager/collectionManager/CollectionComponentContent.vue";
66
+ export type * from "./src/manager/collectionManager/CollectionComponentContent.vue.d.ts";
59
67
  export { default as ContextMenuManager } from "./src/manager/contextMenu/contextMenuManager.js";
60
68
  export type * from "./src/manager/contextMenu/contextMenuManager.d.ts";
61
69
  export { default as ContextMenuComponent } from "./src/manager/contextMenu/ContextMenuComponent.vue";
@@ -72,6 +80,10 @@ export { default as IframeFeatureInfoView } from "./src/featureInfo/iframeFeatur
72
80
  export type * from "./src/featureInfo/iframeFeatureInfoView.d.ts";
73
81
  export { default as TableFeatureInfoView } from "./src/featureInfo/tableFeatureInfoView.js";
74
82
  export type * from "./src/featureInfo/tableFeatureInfoView.d.ts";
83
+ export { default as MarkdownFeatureInfoView } from "./src/featureInfo/markdownFeatureInfoView.js";
84
+ export type * from "./src/featureInfo/markdownFeatureInfoView.d.ts";
85
+ export { default as MarkdownBalloonFeatureInfoView } from "./src/featureInfo/markdownBalloonFeatureInfoView.js";
86
+ export type * from "./src/featureInfo/markdownBalloonFeatureInfoView.d.ts";
75
87
  export { default as MapNavCompass } from "./src/navigation/MapNavCompass.vue";
76
88
  export type * from "./src/navigation/MapNavCompass.vue.d.ts";
77
89
  export { default as MapNavigation } from "./src/navigation/MapNavigation.vue";
@@ -198,6 +210,8 @@ export { createStateRefAction, StateActionState } from "./src/actions/stateRefAc
198
210
  export type * from "./src/actions/stateRefAction.d.ts";
199
211
  export { createLayerToggleAction, createZoomToExtentAction, createExtentFeatureAction, setupExtentComponentActions } from "./src/actions/extentActions.js";
200
212
  export type * from "./src/actions/extentActions.d.ts";
213
+ export { createPlayAction, PlayerDirection, createStepAction, createFastAction, createFlightPlayerActions, setupFlightListItemPlayer, createZoomToFlightAction, createFlightVisualizationAction, createExportFlightAction, importFlights } from "./src/actions/flightActions.js";
214
+ export type * from "./src/actions/flightActions.d.ts";
201
215
  export { createListItemRenameAction, createListItemDeleteAction, createListItemBulkAction, createListExportAction, createListImportAction, importIntoLayer } from "./src/actions/listActions.js";
202
216
  export type * from "./src/actions/listActions.d.ts";
203
217
  export { default as VcsCallback, executeCallbacks } from "./src/callback/vcsCallback.js";
@@ -212,6 +226,8 @@ export { default as WindowManager, WindowSlot, WindowPositions, posToPixel, wind
212
226
  export type * from "./src/manager/window/windowManager.d.ts";
213
227
  export { WindowAlignment, getFittedWindowPositionOptions, getFittedWindowPositionOptionsFromMapEvent, getTargetSize, getWindowPositionOptions, getWindowPositionOptionsFromMapEvent, posToNumber, posToPercent, optionsFromWindowPosition, updateWindowPosition, clipToTargetSize, moveWindow, applyParentPosition, getPositionAppliedOnTarget } from "./src/manager/window/windowHelper.js";
214
228
  export type * from "./src/manager/window/windowHelper.d.ts";
229
+ export { default as PanelManager, PanelLocation } from "./src/manager/panel/panelManager.js";
230
+ export type * from "./src/manager/panel/panelManager.d.ts";
215
231
  export { default as NavbarManager, ButtonLocation, getActionsByLocation } from "./src/manager/navbarManager.js";
216
232
  export type * from "./src/manager/navbarManager.d.ts";
217
233
  export { default as ToolboxManager, ToolboxType, defaultToolboxName } from "./src/manager/toolbox/toolboxManager.js";
package/index.js CHANGED
@@ -22,6 +22,18 @@ export {
22
22
  createExtentFeatureAction,
23
23
  setupExtentComponentActions,
24
24
  } from './src/actions/extentActions.js';
25
+ export {
26
+ createPlayAction,
27
+ PlayerDirection,
28
+ createStepAction,
29
+ createFastAction,
30
+ createFlightPlayerActions,
31
+ setupFlightListItemPlayer,
32
+ createZoomToFlightAction,
33
+ createFlightVisualizationAction,
34
+ createExportFlightAction,
35
+ importFlights,
36
+ } from './src/actions/flightActions.js';
25
37
  export {
26
38
  createListItemRenameAction,
27
39
  createListItemDeleteAction,
@@ -97,6 +109,13 @@ export {
97
109
  getPositionAppliedOnTarget,
98
110
  } from './src/manager/window/windowHelper.js';
99
111
 
112
+ export {
113
+ default as PanelManager,
114
+ PanelLocation,
115
+ } from './src/manager/panel/panelManager.js';
116
+ export { default as PanelManagerComponent } from './src/manager/panel/PanelManagerComponent.vue';
117
+ export { default as PanelComponent } from './src/manager/panel/PanelComponent.vue';
118
+
100
119
  export { default as ButtonManager } from './src/manager/buttonManager.js';
101
120
  export {
102
121
  default as NavbarManager,
@@ -121,7 +140,9 @@ export {
121
140
  isEditorCollectionComponentClass,
122
141
  } from './src/manager/collectionManager/editorCollectionComponentClass.js';
123
142
  export { default as CollectionComponent } from './src/manager/collectionManager/CollectionComponent.vue';
143
+ export { default as CollectionComponentStandalone } from './src/manager/collectionManager/CollectionComponentStandalone.vue';
124
144
  export { default as CollectionComponentList } from './src/manager/collectionManager/CollectionComponentList.vue';
145
+ export { default as CollectionComponentContent } from './src/manager/collectionManager/CollectionComponentContent.vue';
125
146
  export { default as ContextMenuManager } from './src/manager/contextMenu/contextMenuManager.js';
126
147
  export { default as ContextMenuComponent } from './src/manager/contextMenu/ContextMenuComponent.vue';
127
148
  export { default as ContextMenuInteraction } from './src/manager/contextMenu/contextMenuInteraction.js';
@@ -145,6 +166,8 @@ export { default as BalloonComponent } from './src/featureInfo/BalloonComponent.
145
166
  export { default as AddressBalloonComponent } from './src/featureInfo/AddressBalloonComponent.vue';
146
167
  export { default as IframeFeatureInfoView } from './src/featureInfo/iframeFeatureInfoView.js';
147
168
  export { default as TableFeatureInfoView } from './src/featureInfo/tableFeatureInfoView.js';
169
+ export { default as MarkdownFeatureInfoView } from './src/featureInfo/markdownFeatureInfoView.js';
170
+ export { default as MarkdownBalloonFeatureInfoView } from './src/featureInfo/markdownBalloonFeatureInfoView.js';
148
171
  export {
149
172
  getHighlightStyle,
150
173
  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.0",
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>
package/plugins/@vcmap-show-case/panel-tester/src/TextPanelExample.vue ADDED
@@ -0,0 +1,34 @@
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
+ <p>
7
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
8
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
9
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
10
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
11
+ amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
12
+ nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
13
+ sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
14
+ rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
15
+ ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
16
+ elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
17
+ aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
18
+ dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
19
+ est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in
20
+ hendrerit in vulputate velit esse molestie consequat, vel illum dolore
21
+ eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
22
+ dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
23
+ te feugait nulla facilisi. Lorem ipsum dolor sit amet,
24
+ </p>
25
+ </div>
26
+ </div>
27
+ </template>
28
+
29
+ <style scoped></style>
30
+ <script>
31
+ export default {
32
+ name: 'TextPanelExample',
33
+ };
34
+ </script>