@vcmap/ui 5.0.0-rc.15 → 5.0.0-rc.17

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/buildHelpers.js +7 -1
  2. package/config/base.config.json +7 -45
  3. package/config/dev.config.json +5 -1
  4. package/config/www.config.json +14 -13
  5. package/dist/assets/{cesium.2e288a.js → cesium.41de56.js} +0 -0
  6. package/dist/assets/cesium.js +1 -1
  7. package/dist/assets/{core.8014d3.js → core.af84e3.js} +6077 -4544
  8. package/dist/assets/core.js +1 -1
  9. package/dist/assets/{index.3f74fa92.js → index.5b773cad.js} +1 -1
  10. package/dist/assets/{ol.31c3a5.js → ol.5c7490.js} +0 -0
  11. package/dist/assets/ol.js +1 -1
  12. package/dist/assets/ui.dffe32.css +1 -0
  13. package/dist/assets/{ui.36f84f.js → ui.dffe32.js} +7243 -6234
  14. package/dist/assets/ui.js +1 -1
  15. package/dist/assets/{vue.a39c10.js → vue.25da17.js} +0 -0
  16. package/dist/assets/vue.js +2 -2
  17. package/dist/assets/{vuetify.378637.css → vuetify.e4ece7.css} +1 -1
  18. package/dist/assets/{vuetify.378637.js → vuetify.e4ece7.js} +5 -2
  19. package/dist/assets/vuetify.js +2 -2
  20. package/dist/index.html +1 -1
  21. package/index.html +77 -0
  22. package/index.js +18 -3
  23. package/package.json +4 -2
  24. package/plugins/@vcmap/create-link/fallbackCreateLink.vue +4 -1
  25. package/plugins/@vcmap/create-link/index.js +4 -1
  26. package/plugins/@vcmap/pluginExample/exampleActions.js +45 -0
  27. package/plugins/@vcmap/pluginExample/index.js +26 -2
  28. package/plugins/@vcmap/pluginExample/pluginExampleComponent.vue +77 -42
  29. package/plugins/@vcmap/search-nominatim/nominatim.js +1 -1
  30. package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue +4 -2
  31. package/plugins/categoryTest/Categories.vue +27 -13
  32. package/plugins/categoryTest/Category.vue +7 -1
  33. package/plugins/categoryTest/index.js +1 -1
  34. package/plugins/notifier/index.js +31 -0
  35. package/plugins/notifier/notifierTester.vue +88 -0
  36. package/plugins/package.json +1 -1
  37. package/plugins/test/allIconsComponent.vue +5 -5
  38. package/plugins/test/emptyComponent.vue +1 -1
  39. package/plugins/test/index.js +27 -3
  40. package/plugins/test/myCustomHeader.vue +9 -1
  41. package/plugins/test/testList.vue +290 -0
  42. package/plugins/test/vcsContent.vue +1 -1
  43. package/plugins/test/windowManagerExample.vue +12 -7
  44. package/plugins/wizardExample/index.js +41 -0
  45. package/plugins/wizardExample/wizardExample.vue +77 -0
  46. package/src/actions/actionHelper.js +10 -9
  47. package/src/application/VcsApp.vue +43 -34
  48. package/src/components/form-inputs-controls/VcsCheckbox.vue +1 -0
  49. package/src/components/form-inputs-controls/VcsFormSection.vue +23 -15
  50. package/src/components/form-inputs-controls/VcsSelect.vue +33 -1
  51. package/src/components/form-inputs-controls/VcsTextField.vue +11 -3
  52. package/src/components/form-inputs-controls/VcsWizard.vue +133 -0
  53. package/src/components/imageElementInjector.vue +22 -0
  54. package/src/components/lists/VcsList.vue +468 -0
  55. package/src/components/lists/VcsTreeview.vue +1 -2
  56. package/src/components/lists/VcsTreeviewLeaf.vue +18 -50
  57. package/src/components/lists/VcsTreeviewSearchbar.vue +1 -23
  58. package/src/components/tables/VcsTable.vue +13 -1
  59. package/src/contentTree/LayerTree.vue +1 -1
  60. package/src/contentTree/contentTreeCollection.js +9 -0
  61. package/src/contentTree/contentTreeItem.js +13 -13
  62. package/src/contentTree/layerContentTreeItem.js +1 -1
  63. package/src/contentTree/subContentTreeItem.js +1 -1
  64. package/src/contentTree/vcsObjectContentTreeItem.js +1 -1
  65. package/src/featureInfo/BalloonComponent.vue +13 -8
  66. package/src/featureInfo/balloonFeatureInfoView.js +16 -22
  67. package/src/featureInfo/balloonHelper.js +26 -5
  68. package/src/featureInfo/featureInfo.js +14 -2
  69. package/src/featureInfo/featureInfoInteraction.js +1 -1
  70. package/src/i18n/de.js +13 -1
  71. package/src/i18n/en.js +13 -1
  72. package/src/icons/+all.js +4 -0
  73. package/src/icons/WandIcon.vue +63 -0
  74. package/src/manager/categoryManager/CategoryComponent.vue +115 -0
  75. package/src/manager/categoryManager/CategoryComponentList.vue +57 -0
  76. package/src/manager/categoryManager/CategoryManager.vue +35 -0
  77. package/src/manager/categoryManager/categoryManager.js +251 -165
  78. package/src/manager/contextMenu/contextMenuManager.js +8 -2
  79. package/src/manager/window/WindowComponent.vue +51 -70
  80. package/src/manager/window/WindowComponentHeader.vue +81 -13
  81. package/src/manager/window/WindowManager.vue +54 -30
  82. package/src/manager/window/windowHelper.js +341 -0
  83. package/src/manager/window/windowManager.js +173 -151
  84. package/src/navigation/overviewMap.js +10 -9
  85. package/src/notifier/notifier.js +120 -0
  86. package/src/notifier/notifierComponent.vue +84 -0
  87. package/src/styles/variables.scss +19 -3
  88. package/src/vcsUiApp.js +26 -2
  89. package/src/vuePlugins/vuetify.js +2 -0
  90. package/dist/assets/ui.36f84f.css +0 -1
  91. package/src/manager/categoryManager/ComponentsManager.vue +0 -30
package/dist/assets/{vuetify.378637.js → vuetify.e4ece7.js} RENAMED
@@ -1,16 +1,19 @@
1
1
 
2
2
  function loadCss(href) {
3
+ const base64url = href
4
+ .replace(/-/g, '+')
5
+ .replace(/_/g, '/');
3
6
  return new Promise((resolve, reject) => {
4
7
  const elem = document.createElement('link');
5
8
  elem.rel = 'stylesheet';
6
- elem.href = href;
9
+ elem.href = base64url;
7
10
  elem.defer = false;
8
11
  elem.async = false;
9
12
  elem.onload = resolve;
10
13
  elem.onerror = reject;
11
14
  document.head.appendChild(elem);
12
15
  });
13
- } await loadCss('./assets/vuetify.378637.css');import v from "./vue.a39c10.js";
16
+ } await loadCss('./assets/vuetify.e4ece7.css');import v from "./vue.25da17.js";
14
17
  const Ne = v.extend().extend({
15
18
  name: "themeable",
16
19
  provide() {
package/dist/assets/vuetify.js CHANGED
@@ -1,5 +1,5 @@
1
- export * from "./vuetify.378637.js";
2
- import { default as f } from "./vuetify.378637.js";
1
+ export * from "./vuetify.e4ece7.js";
2
+ import { default as f } from "./vuetify.e4ece7.js";
3
3
  export {
4
4
  f as default
5
5
  };
package/dist/index.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
6
- <script type="module" crossorigin src="./assets/index.3f74fa92.js"></script>
6
+ <script type="module" crossorigin src="./assets/index.5b773cad.js"></script>
7
7
  </head>
8
8
  <body style="height: 100vH;">
9
9
  <noscript>
package/index.html ADDED
@@ -0,0 +1,77 @@
1
+ <!DOCTYPE html>
2
+ <html class="vcs-ui" lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
6
+ </head>
7
+ <body style="height: 100vH;">
8
+ <noscript>
9
+ <strong>...</strong>
10
+ </noscript>
11
+ <div id="app">
12
+ <div id="loading-wrapper">
13
+ <div id="loading-text">LOADING</div>
14
+ <div id="loading-content"></div>
15
+ </div>
16
+ </div>
17
+ <style>
18
+ #loading-wrapper {
19
+ position: fixed;
20
+ width: 100%;
21
+ height: 100%;
22
+ left: 0;
23
+ top: 0;
24
+ }
25
+
26
+ #loading-text {
27
+ display: block;
28
+ position: absolute;
29
+ top: 50%;
30
+ left: 50%;
31
+ color: #409d76;
32
+ width: 100px;
33
+ height: 30px;
34
+ margin: -7px 0 0 -45px;
35
+ text-align: center;
36
+ font-family: 'PT Sans Narrow', sans-serif;
37
+ font-size: 20px;
38
+ }
39
+
40
+ #loading-content {
41
+ display: block;
42
+ position: relative;
43
+ left: 50%;
44
+ top: 50%;
45
+ width: 170px;
46
+ height: 170px;
47
+ margin: -85px 0 0 -85px;
48
+ }
49
+
50
+ #loading-content {
51
+ border: 3px solid transparent;
52
+ border-top-color: #409d76;
53
+ border-bottom-color: #409d76;
54
+ border-radius: 50%;
55
+ -webkit-animation: loader 2s linear infinite;
56
+ -moz-animation: loader 2s linear infinite;
57
+ -o-animation: loader 2s linear infinite;
58
+ animation: loader 2s linear infinite;
59
+ }
60
+
61
+ @keyframes loader {
62
+ 0% {
63
+ -webkit-transform: rotate(0deg);
64
+ -ms-transform: rotate(0deg);
65
+ transform: rotate(0deg);
66
+ }
67
+
68
+ 100% {
69
+ -webkit-transform: rotate(360deg);
70
+ -ms-transform: rotate(360deg);
71
+ transform: rotate(360deg);
72
+ }
73
+ }
74
+ </style>
75
+ <script type="module" src="./start.js"></script>
76
+ </body>
77
+ </html>
package/index.js CHANGED
@@ -13,6 +13,7 @@ export {
13
13
  } from './src/actions/actionHelper.js';
14
14
  export {
15
15
  createStateRefAction,
16
+ StateActionState,
16
17
  } from './src/actions/stateRefAction.js';
17
18
 
18
19
  export { default as VcsNavbar } from './src/application/VcsNavbar.vue';
@@ -20,7 +21,7 @@ export {
20
21
  default as VcsApp,
21
22
  setupMapNavbar,
22
23
  setupPluginMountedListeners,
23
- setupComponentsWindow,
24
+ setupCategoryManagerWindow,
24
25
  } from './src/application/VcsApp.vue';
25
26
  export { default as VcsAppWrapper } from './src/application/vcsAppWrapper.vue';
26
27
  export { default as VcsMap } from './src/application/VcsMap.vue';
@@ -51,18 +52,29 @@ export {
51
52
  default as WindowManager,
52
53
  WindowSlot,
53
54
  WindowPositions,
55
+ posToPixel,
56
+ windowPositionFromOptions,
57
+ } from './src/manager/window/windowManager.js';
58
+ export {
54
59
  WindowAlignment,
55
60
  getFittedWindowPositionOptions,
56
61
  getFittedWindowPositionOptionsFromMapEvent,
57
62
  getWindowPositionOptions,
58
63
  getWindowPositionOptionsFromMapEvent,
59
- } from './src/manager/window/windowManager.js';
64
+ posToNumber,
65
+ posToPercent,
66
+ optionsFromWindowPosition,
67
+ updateWindowPosition,
68
+ clipToTargetSize,
69
+ moveWindow,
70
+ applyPositionOnTarget,
71
+ } from './src/manager/window/windowHelper.js';
60
72
 
61
73
  export { default as ButtonManager } from './src/manager/buttonManager.js';
62
74
  export { default as NavbarManager, ButtonLocation, getActionsByLocation } from './src/manager/navbarManager.js';
63
75
  export { default as ToolboxManager, ToolboxType } from './src/manager/toolbox/toolboxManager.js';
64
76
  export { default as CategoryManager } from './src/manager/categoryManager/categoryManager.js';
65
- export { default as ComponentsManager } from './src/manager/categoryManager/ComponentsManager.vue';
77
+ export { default as CategoryManagerComponent } from './src/manager/categoryManager/CategoryManager.vue';
66
78
  export { default as ContextMenuManager } from './src/manager/contextMenu/contextMenuManager.js';
67
79
  export { default as ContextMenuComponent } from './src/manager/contextMenu/contextMenuComponent.vue';
68
80
  export { default as ContextMenuInteraction } from './src/manager/contextMenu/contextMenuInteraction.js';
@@ -102,6 +114,7 @@ export {
102
114
  } from './src/pluginHelper.js';
103
115
  export { getStateFromURL, createEmptyState, setStateToUrl } from './src/state.js';
104
116
  export { default as VcsUiApp } from './src/vcsUiApp.js';
117
+ export { default as Notifier, NotificationType } from './src/notifier/notifier.js';
105
118
  export { default as Icons } from './src/icons/+all.js';
106
119
 
107
120
  export { default as VcsButton } from './src/components/buttons/VcsButton.vue';
@@ -123,11 +136,13 @@ export { default as VcsFormSection } from './src/components/form-inputs-controls
123
136
  export { default as VcsSelect } from './src/components/form-inputs-controls/VcsSelect.vue';
124
137
  export { default as VcsTextField } from './src/components/form-inputs-controls/VcsTextField.vue';
125
138
  export { default as VcsTextArea } from './src/components/form-inputs-controls/VcsTextArea.vue';
139
+ export { default as VcsWizard } from './src/components/form-inputs-controls/VcsWizard.vue';
126
140
 
127
141
  export { default as VcsFormattedNumber } from './src/components/form-output/VcsFormattedNumber.vue';
128
142
 
129
143
  export { default as VcsActionList, validateAction, validateActions } from './src/components/lists/VcsActionList.vue';
130
144
  // export { default as VcsEndlessList } from './src/components/lists/VcsEndlessList.vue';
145
+ export { default as VcsList } from './src/components/lists/VcsList.vue';
131
146
  export { default as VcsTreeview } from './src/components/lists/VcsTreeview.vue';
132
147
  export { default as VcsTreeviewLeaf } from './src/components/lists/VcsTreeviewLeaf.vue';
133
148
  // export { default as VcsTreeviewSearchbar } from './src/components/lists/VcsTreeviewSearchbar.vue';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vcmap/ui",
3
- "version": "5.0.0-rc.15",
3
+ "version": "5.0.0-rc.17",
4
4
  "author": "Virtual City Systems",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -22,6 +22,7 @@
22
22
  "files": [
23
23
  "index.js",
24
24
  "start.js",
25
+ "index.html",
25
26
  "map.config.json",
26
27
  "dist/",
27
28
  "src/",
@@ -42,7 +43,7 @@
42
43
  },
43
44
  "peerDependencies": {
44
45
  "@vcmap/cesium": "~1.97.1",
45
- "@vcmap/core": "~5.0.0-rc.23",
46
+ "@vcmap/core": "~5.0.0-rc.25",
46
47
  "ol": "~7.1.0",
47
48
  "vue": "~2.7.3",
48
49
  "vuetify": "~2.6.7"
@@ -51,6 +52,7 @@
51
52
  "@vcmap/rollup-plugin-vcs-ol": "^1.0.2",
52
53
  "@vcsuite/eslint-config": "^2.1.1",
53
54
  "@vitest/coverage-c8": "^0.24.3",
55
+ "@vue/test-utils": "^1.3.3",
54
56
  "eslint": "^8.9.0",
55
57
  "eslint-import-resolver-alias": "^1.1.2",
56
58
  "jest-canvas-mock": "^2.4.0",
package/plugins/@vcmap/create-link/fallbackCreateLink.vue CHANGED
@@ -24,7 +24,8 @@
24
24
  </template>
25
25
 
26
26
  <script>
27
- import { VcsTextField, VcsButton, setStateToUrl } from '@vcmap/ui';
27
+ import { VSheet } from 'vuetify/lib';
28
+ import { VcsTextField, VcsButton, setStateToUrl, NotificationType } from '@vcmap/ui';
28
29
  import { getCurrentInstance, inject, ref } from 'vue';
29
30
 
30
31
  export default {
@@ -38,6 +39,7 @@
38
39
  components: {
39
40
  VcsTextField,
40
41
  VcsButton,
42
+ VSheet,
41
43
  },
42
44
  setup(props) {
43
45
  const localLink = ref(props.link);
@@ -48,6 +50,7 @@
48
50
  const element = proxy.$el.querySelector('input');
49
51
  element.select();
50
52
  document.execCommand('copy');
53
+ app.notifier.add({ title: 'createLink.title', message: 'createLink.copied', type: NotificationType.SUCCESS });
51
54
  };
52
55
 
53
56
  const refresh = async () => {
package/plugins/@vcmap/create-link/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { ButtonLocation, setStateToUrl, WindowSlot } from '@vcmap/ui';
1
+ import { ButtonLocation, NotificationType, setStateToUrl, WindowSlot } from '@vcmap/ui';
2
2
  import FallbackCreateLink from './fallbackCreateLink.vue';
3
3
 
4
4
  const name = '@vcmap/create-link';
@@ -34,6 +34,7 @@ export default function createLink() {
34
34
  tooltip: 'Dialog zum kopieren des Applikationslinks anzeigen.',
35
35
  copyToClipboard: 'Applikationslink in Zwischenablage kopieren',
36
36
  refreshTooltip: 'Applikationslink aktualisieren',
37
+ copied: 'Applikationslink in Zwischenablage kopiert.'
37
38
  },
38
39
  },
39
40
  en: {
@@ -43,6 +44,7 @@ export default function createLink() {
43
44
  tooltip: 'Open dialog to copy application link to clipboard',
44
45
  copyToClipboard: 'Copy application link to clipboard',
45
46
  refreshTooltip: 'Refresh application link',
47
+ copied: 'Application link copied to clipboard.',
46
48
  },
47
49
  },
48
50
  },
@@ -69,6 +71,7 @@ export default function createLink() {
69
71
  setStateToUrl(state, url);
70
72
  if (navigator.clipboard) {
71
73
  await navigator.clipboard.writeText(url.toString());
74
+ app.notifier.add({ title: 'createLink.title', message: 'createLink.copied', type: NotificationType.SUCCESS });
72
75
  } else {
73
76
  createFallbackWindow(app, url.toString());
74
77
  }
package/plugins/@vcmap/pluginExample/exampleActions.js ADDED
@@ -0,0 +1,45 @@
1
+ import { reactive, ref } from 'vue';
2
+
3
+ export default function createExampleActions() {
4
+ const dense = ref(false);
5
+ const showSection = ref(true);
6
+
7
+ const actions = [
8
+ reactive({
9
+ name: 'denseSelection',
10
+ title: 'change row height',
11
+ icon: dense.value ? 'mdi-arrow-split-horizontal' : 'mdi-arrow-collapse-vertical',
12
+ callback() {
13
+ dense.value = !dense.value;
14
+ this.icon = dense.value ? 'mdi-arrow-split-horizontal' : 'mdi-arrow-collapse-vertical';
15
+ },
16
+ }),
17
+ { name: 'noIcon', title: 'another action without icon', callback: () => {} },
18
+ reactive({
19
+ name: 'toggleSection',
20
+ title: 'toggle section',
21
+ icon: showSection.value ? '$vcsMinus' : '$vcsPlus',
22
+ callback() {
23
+ showSection.value = !showSection.value;
24
+ this.icon = showSection.value ? '$vcsMinus' : '$vcsPlus';
25
+ },
26
+ }),
27
+ reactive({
28
+ name: 'toggleIcon',
29
+ title: 'toggle switch example',
30
+ icon: showSection.value ? 'mdi-toggle-switch' : 'mdi-toggle-switch-off',
31
+ active: showSection.value,
32
+ callback() {
33
+ showSection.value = !showSection.value;
34
+ this.active = showSection.value;
35
+ },
36
+ }),
37
+ {
38
+ name: 'alert',
39
+ icon: 'mdi-message-text',
40
+ callback() { alert('alert'); },
41
+ },
42
+ ];
43
+
44
+ return { actions, dense, showSection };
45
+ }
package/plugins/@vcmap/pluginExample/index.js CHANGED
@@ -7,6 +7,7 @@ import packageJSON from './package.json';
7
7
  import defaultConfig from './config.json';
8
8
  import { conditionalTest, isValidEmail, isValidText } from './validation.js';
9
9
  import pluginExampleComponent from './pluginExampleComponent.vue';
10
+ import createExampleActions from './exampleActions.js';
10
11
 
11
12
  /**
12
13
  * @returns {Logger}
@@ -25,6 +26,7 @@ function getLogger() {
25
26
  /**
26
27
  * @typedef PluginExampleState
27
28
  * @property {string} selected
29
+ * @property {Array<string>} selectedMultiple
28
30
  * @property {string} conditionalInput
29
31
  * @property {string} initialTextInput
30
32
  * @property {number} numberInput
@@ -74,11 +76,14 @@ export default function (config) {
74
76
  */
75
77
  const pluginState = reactive({
76
78
  selected: pluginConfig.selectOptions.value[0],
79
+ selectedMultiple: [],
77
80
  conditionalInput: '',
78
81
  initialTextInput: pluginConfig.initialTextInput.value,
79
82
  numberInput: 100.156,
80
- checkboxInput: false,
83
+ checkboxInput: true,
81
84
  email: '',
85
+ prependedInput: '',
86
+ files: [],
82
87
  });
83
88
 
84
89
 
@@ -148,6 +153,8 @@ export default function (config) {
148
153
  getSerializedState,
149
154
  setSerializedState,
150
155
  onVcsAppMounted(app) {
156
+ const { actions, showSection, dense } = createExampleActions();
157
+
151
158
  const { action, destroy } = createToggleAction(
152
159
  {
153
160
  name: 'Plugin Example',
@@ -159,8 +166,15 @@ export default function (config) {
159
166
  component: pluginExampleComponent,
160
167
  slot: WindowSlot.DYNAMIC_LEFT,
161
168
  state: {
162
- headerTitle: 'pluginExample.select',
169
+ headerTitle: 'pluginExample.title',
163
170
  headerIcon: '$vcsCircle',
171
+ headerActions: actions,
172
+ infoUrl: 'https://vc.systems',
173
+ },
174
+ props: {
175
+ actions,
176
+ showSection,
177
+ dense,
164
178
  },
165
179
  },
166
180
  app.windowManager,
@@ -194,6 +208,11 @@ export default function (config) {
194
208
  help2desc: 'InitialTextInput bleibt solange im Lade-Status, bis sich der Wert \'myInitialText\' ändert.',
195
209
  help3: 'Geben Sie eine Email Adresse ein',
196
210
  help3desc: 'Email Adressen werden validiert.',
211
+ numbers: {
212
+ one: 'eins',
213
+ two: 'zwei',
214
+ three: 'drei',
215
+ },
197
216
  },
198
217
  },
199
218
  en: {
@@ -208,6 +227,11 @@ export default function (config) {
208
227
  help2desc: 'InitialTextInput text field stays in loading state, as long as \'myInitialText\' is not changed.',
209
228
  help3: 'Enter an email address.',
210
229
  help3desc: 'Emails get validated.',
230
+ numbers: {
231
+ one: 'one',
232
+ two: 'two',
233
+ three: 'three',
234
+ },
211
235
  },
212
236
  },
213
237
  },
package/plugins/@vcmap/pluginExample/pluginExampleComponent.vue CHANGED
@@ -1,30 +1,9 @@
1
1
  <template>
2
2
  <v-form v-model="isValid">
3
3
  <VcsFormSection
4
- title="VcsFormSection Select & Text Inputs"
5
- :title-actions="[
6
- {
7
- name: 'denseSelection',
8
- title: 'change row height',
9
- icon: dense ? 'mdi-arrow-split-horizontal' : 'mdi-arrow-collapse-vertical',
10
- callback: () => this.dense = !this.dense
11
- },
12
- { name: 'noIcon', title: 'another action without icon', callback: () => {} },
13
- {
14
- name: 'toggleSection',
15
- title: 'toggle section',
16
- icon: showSection ? '$vcsMinus' : '$vcsPlus',
17
- callback: () => this.showSection = !this.showSection
18
- },
19
- {
20
- name: 'toggleIcon',
21
- title: 'toggle switch example',
22
- icon: showSection ? 'mdi-toggle-switch' : 'mdi-toggle-switch-off',
23
- active: showSection,
24
- callback: () => this.showSection = !this.showSection
25
- },
26
- { name: 'alert', icon: 'mdi-message-text', callback: alertAction },
27
- ]"
4
+ heading="VcsFormSection Select & Text Inputs"
5
+ :header-actions="actions"
6
+ :action-button-list-overflow-count="4"
28
7
  >
29
8
  <template #help>
30
9
  <ol>
@@ -131,11 +110,50 @@
131
110
  />
132
111
  </v-col>
133
112
  </v-row>
113
+ <v-row
114
+ :dense="dense"
115
+ no-gutters
116
+ align="center"
117
+ >
118
+ <v-col>
119
+ <VcsLabel html-for="prependedInput" :dense="dense">
120
+ String With Icon
121
+ </VcsLabel>
122
+ </v-col>
123
+ <v-col>
124
+ <VcsTextField
125
+ id="prependedInput"
126
+ :dense="dense"
127
+ prepend-icon="mdi-map-marker"
128
+ v-model="state.prependedInput"
129
+ />
130
+ </v-col>
131
+ </v-row>
132
+ <v-row
133
+ :dense="dense"
134
+ no-gutters
135
+ align="center"
136
+ >
137
+ <v-col>
138
+ <VcsLabel html-for="fileInput" :dense="dense">
139
+ Email
140
+ </VcsLabel>
141
+ </v-col>
142
+ <v-col>
143
+ <VcsTextField
144
+ id="fileInput"
145
+ :dense="dense"
146
+ type="file"
147
+ multiple
148
+ v-model="state.files"
149
+ />
150
+ </v-col>
151
+ </v-row>
134
152
  </v-container>
135
153
  </template>
136
154
  </VcsFormSection>
137
155
  <VcsFormSection
138
- title="VcsFormSection Number Inputs"
156
+ heading="VcsFormSection Number Inputs"
139
157
  help-text="pluginExample.help"
140
158
  >
141
159
  <template #default>
@@ -236,7 +254,7 @@
236
254
  </template>
237
255
  </VcsFormSection>
238
256
  <VcsFormSection
239
- title="VcsFormSection Radio & Checkbox"
257
+ heading="VcsFormSection Radio & Checkbox"
240
258
  >
241
259
  <template #default>
242
260
  <v-container>
@@ -286,34 +304,48 @@
286
304
  </template>
287
305
  </vcsformsection>
288
306
  <VcsFormSection
289
- title="VcsFormSection Mixed Inputs"
307
+ heading="VcsFormSection Mixed Inputs"
290
308
  >
309
+ <template #header="{ heading }">
310
+ <article class="pa-2 secondary text--primary">
311
+ {{ heading }}
312
+ <h3>This is a custom header using header slot</h3>
313
+ </article>
314
+ </template>
291
315
  <template #default>
292
316
  <v-container>
293
317
  <v-row
294
318
  :dense="dense"
295
- no-gutters
296
319
  align="center"
297
320
  >
298
- <v-col cols="1" class="px-1">
321
+ <v-col cols="1">
299
322
  <VcsLabel html-for="textInput" :dense="dense" class="text-caption">
300
323
  1
301
324
  </VcsLabel>
302
325
  </v-col>
303
- <v-col>
326
+ <v-col cols="3">
304
327
  <VcsSelect
305
- :items="['A', 'B', 'C']"
328
+ :items="[
329
+ {value: 'one', i18n: 'pluginExample.numbers.one'},
330
+ {value: 'two', i18n: 'pluginExample.numbers.two'},
331
+ {value: 'three', i18n: 'pluginExample.numbers.three'}]"
332
+ :item-text="item => item.i18n"
306
333
  :dense="dense"
307
334
  />
308
335
  </v-col>
309
- <v-col>
336
+ <v-col cols="3">
310
337
  <VcsSelect
311
- :items="['A', 'B', 'C']"
338
+ :items="[
339
+ {value: 'Anna', fullName: 'Annabella'},
340
+ {value: 'Bella', fullName: 'Belladonna'},
341
+ {value: 'Claudi', fullName: 'Claudine'}]"
342
+ :item-text="item => item.fullName"
312
343
  :dense="dense"
313
344
  multiple
345
+ v-model="state.selectedMultiple"
314
346
  />
315
347
  </v-col>
316
- <v-col>
348
+ <v-col cols="5">
317
349
  <VcsTextField
318
350
  id="textInput"
319
351
  clearable
@@ -374,9 +406,17 @@
374
406
  VContainer,
375
407
  },
376
408
  props: {
377
- windowId: {
378
- type: String,
379
- default: '',
409
+ actions: {
410
+ type: Array,
411
+ required: true,
412
+ },
413
+ dense: {
414
+ type: Object,
415
+ required: true,
416
+ },
417
+ showSection: {
418
+ type: Object,
419
+ required: true,
380
420
  },
381
421
  },
382
422
  setup() {
@@ -386,8 +426,6 @@
386
426
  watch(plugin.state, () => { newUpdate.value = true; });
387
427
 
388
428
  return {
389
- showSection: ref(true),
390
- dense: ref(true),
391
429
  // no object-destruction of reactive objects! or use toRef()
392
430
  state: plugin.state,
393
431
  // do not put the whole config here, since it would become reactive
@@ -403,9 +441,6 @@
403
441
  console.log(plugin.getSerializedState());
404
442
  newUpdate.value = false;
405
443
  },
406
- alertAction() {
407
- alert('alert');
408
- },
409
444
  };
410
445
  },
411
446
  };
package/plugins/@vcmap/search-nominatim/nominatim.js CHANGED
@@ -14,7 +14,7 @@ function createResultItem(item) {
14
14
  feature[featureInfoViewSymbol] = new AddressBalloonFeatureInfoView({
15
15
  type: 'AddressBalloonFeatureInfoView',
16
16
  name: 'NominatimSearchBalloon',
17
- subtitle: '',
17
+ balloonSubtitle: '',
18
18
  addressName: 'building',
19
19
  street: 'road',
20
20
  number: 'house_number',
package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue CHANGED
@@ -76,11 +76,12 @@
76
76
  VAvatar,
77
77
  VIcon,
78
78
  VDivider,
79
+ VSwitch,
79
80
  } from 'vuetify/lib';
80
81
 
81
82
  export default {
82
83
  name: 'ThemeChanger',
83
- components: [
84
+ components: {
84
85
  VCard,
85
86
  VCardText,
86
87
  VChip,
@@ -91,7 +92,8 @@
91
92
  VAvatar,
92
93
  VIcon,
93
94
  VDivider,
94
- ],
95
+ VSwitch,
96
+ },
95
97
  setup() {
96
98
  const app = inject('vcsApp');
97
99
  const plugin = app.plugins.getByKey('@vcmap/theme-changer');