@vcmap/ui 5.0.0 → 5.0.2

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 (35) hide show
  1. package/config/base.config.json +12 -2
  2. package/config/www.config.json +58 -16
  3. package/dist/assets/cesium.js +1 -1
  4. package/dist/assets/{core.306872.js → core.bb64ed.js} +15 -9
  5. package/dist/assets/core.js +1 -1
  6. package/dist/assets/index-661636d9.js +1 -0
  7. package/dist/assets/ol.js +1 -1
  8. package/dist/assets/{ui.e84ce9.css → ui.aeb2ec.css} +1 -1
  9. package/dist/assets/{ui.e84ce9.js → ui.aeb2ec.js} +4815 -4378
  10. package/dist/assets/ui.js +1 -1
  11. package/dist/assets/vue.js +2 -2
  12. package/dist/assets/{vuetify.008fac.js → vuetify.3ed426.js} +1 -1
  13. package/dist/assets/vuetify.js +2 -2
  14. package/dist/index.html +2 -2
  15. package/index.html +1 -1
  16. package/package.json +8 -8
  17. package/plugins/@vcmap-show-case/table-example/src/DataTableExample.vue +5 -0
  18. package/src/actions/StyleSelector.vue +24 -9
  19. package/src/actions/actionHelper.js +31 -3
  20. package/src/components/lists/VcsList.vue +5 -2
  21. package/src/components/lists/VcsTreeview.vue +6 -6
  22. package/src/components/style/VcsImageSelector.vue +423 -14
  23. package/src/components/tables/VcsDataTable.vue +29 -1
  24. package/src/manager/buttonManager.js +3 -1
  25. package/src/manager/collectionManager/CollectionComponent.vue +4 -0
  26. package/src/manager/collectionManager/CollectionComponentList.vue +28 -9
  27. package/src/manager/toolbox/toolboxManager.js +5 -2
  28. package/src/manager/window/windowManager.js +4 -1
  29. package/src/navigation/MapNavigation.vue +31 -46
  30. package/src/vcsUiApp.js +1 -1
  31. package/dist/assets/index-cfed33b1.js +0 -1
  32. /package/dist/assets/{cesium.4137c8.js → cesium.a3a1dc.js} +0 -0
  33. /package/dist/assets/{ol.328bbf.js → ol.833fa9.js} +0 -0
  34. /package/dist/assets/{vue.1c8696.js → vue.8e1850.js} +0 -0
  35. /package/dist/assets/{vuetify.008fac.css → vuetify.3ed426.css} +0 -0
package/dist/assets/ui.js CHANGED
@@ -1 +1 @@
1
- export * from "./ui.e84ce9.js";
1
+ export * from "./ui.aeb2ec.js";
package/dist/assets/vue.js CHANGED
@@ -1,5 +1,5 @@
1
- export * from "./vue.1c8696.js";
2
- import { default as f } from "./vue.1c8696.js";
1
+ export * from "./vue.8e1850.js";
2
+ import { default as f } from "./vue.8e1850.js";
3
3
  export {
4
4
  f as default
5
5
  };
package/dist/assets/{vuetify.008fac.js → vuetify.3ed426.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.008fac.css');import v from "./vue.1c8696.js";
16
+ } await loadCss('./assets/vuetify.3ed426.css');import v from "./vue.8e1850.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.008fac.js";
2
- import { default as f } from "./vuetify.008fac.js";
1
+ export * from "./vuetify.3ed426.js";
2
+ import { default as f } from "./vuetify.3ed426.js";
3
3
  export {
4
4
  f as default
5
5
  };
package/dist/index.html CHANGED
@@ -91,9 +91,9 @@
91
91
  }
92
92
  }
93
93
  </style>
94
- <script type="module" crossorigin src="./assets/index-cfed33b1.js"></script>
94
+ <script type="module" crossorigin src="./assets/index-661636d9.js"></script>
95
95
  </head>
96
- <body style="height: 100vh">
96
+ <body style="height: 100vh; margin: 0;">
97
97
  <noscript>
98
98
  <strong>...</strong>
99
99
  </noscript>
package/index.html CHANGED
@@ -92,7 +92,7 @@
92
92
  }
93
93
  </style>
94
94
  </head>
95
- <body style="height: 100vh">
95
+ <body style="height: 100vh; margin: 0;">
96
96
  <noscript>
97
97
  <strong>...</strong>
98
98
  </noscript>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vcmap/ui",
3
- "version": "5.0.0",
3
+ "version": "5.0.2",
4
4
  "author": "Virtual City Systems",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -45,8 +45,8 @@
45
45
  "vue-i18n": "^8.24.1"
46
46
  },
47
47
  "peerDependencies": {
48
- "@vcmap-cesium/engine": "^4.0.0",
49
- "@vcmap/core": "^5.0.0",
48
+ "@vcmap-cesium/engine": "^4.0.3",
49
+ "@vcmap/core": "^5.0.2",
50
50
  "ol": "^7.5.2",
51
51
  "vue": "~2.7.3",
52
52
  "vuetify": "~2.6.7"
@@ -120,19 +120,19 @@
120
120
  "prettier": "@vcsuite/eslint-config/prettier.js",
121
121
  "browserslist": [
122
122
  "last 2 Chrome versions",
123
- "not Chrome < 97",
123
+ "not Chrome < 116",
124
124
  "last 2 Safari versions",
125
125
  "not Safari < 15",
126
126
  "last 2 iOS versions",
127
127
  "not iOS < 15",
128
128
  "last 2 Firefox versions",
129
- "not Firefox < 91",
129
+ "not Firefox < 114",
130
130
  "last 2 Edge versions",
131
- "not Edge < 97"
131
+ "not Edge < 116"
132
132
  ],
133
133
  "engines": {
134
- "node": "^18.12.0",
135
- "npm": "^9.0.0"
134
+ "node": ">=18.12.0",
135
+ "npm": ">=9.0.0"
136
136
  },
137
137
  "type": "module",
138
138
  "exports": {
package/plugins/@vcmap-show-case/table-example/src/DataTableExample.vue CHANGED
@@ -26,6 +26,7 @@
26
26
  :rules="required"
27
27
  />
28
28
  <vcs-text-field v-model="newItem.date" type="date" label="date" />
29
+ <vcs-checkbox label="disabled" v-model="newItem.disabled" />
29
30
  <vcs-form-button type="submit" variant="filled">
30
31
  Add
31
32
  </vcs-form-button>
@@ -61,6 +62,7 @@
61
62
  VcsDataTable,
62
63
  VcsFormButton,
63
64
  VcsTextField,
65
+ VcsCheckbox,
64
66
  VcsActionButtonList,
65
67
  } from '@vcmap/ui';
66
68
  import { VSwitch, VSheet, VDialog, VCard, VForm } from 'vuetify/lib';
@@ -119,6 +121,7 @@
119
121
  VcsDataTable,
120
122
  VcsFormButton,
121
123
  VcsTextField,
124
+ VcsCheckbox,
122
125
  VcsActionButtonList,
123
126
  VSwitch,
124
127
  VSheet,
@@ -137,6 +140,7 @@
137
140
  name: 'foo',
138
141
  type: 'foo',
139
142
  date: new Date(),
143
+ disabled: false,
140
144
  });
141
145
  const dialog = ref(false);
142
146
 
@@ -158,6 +162,7 @@
158
162
  name: newItem.value.name,
159
163
  type: newItem.value.type,
160
164
  date: newItem.value.date,
165
+ disabled: newItem.value.disabled,
161
166
  id: items.value.length,
162
167
  };
163
168
 
package/src/actions/StyleSelector.vue CHANGED
@@ -9,7 +9,7 @@
9
9
  <v-list-item-title
10
10
  :class="{ 'primary--text': item.value === currentStyleName }"
11
11
  >
12
- {{ item.text }}
12
+ {{ $t(item.text) }}
13
13
  </v-list-item-title>
14
14
  </v-list-item>
15
15
  </v-list>
@@ -23,7 +23,7 @@
23
23
  <v-chip :color="entry.color" />
24
24
  </v-list-item-icon>
25
25
  <v-list-item-content>
26
- {{ entry.title }}
26
+ {{ $t(entry.title) }}
27
27
  </v-list-item-content>
28
28
  </v-list-item>
29
29
  </v-list>
@@ -74,7 +74,7 @@
74
74
  const app = inject('vcsApp');
75
75
  /** @type {import("@vcmap/core").FeatureLayer} */
76
76
  const layer = app.layers.getByKey(props.layerName);
77
- const currentStyleName = ref(layer.style.name);
77
+ const currentStyleName = ref(layer.style.name || layer.defaultStyle.name);
78
78
  const currentStyleLegend = ref([]);
79
79
  const defaultStyle = layer.defaultStyle.name;
80
80
 
@@ -93,17 +93,32 @@
93
93
  });
94
94
 
95
95
  const items = computed(() => {
96
+ const styles = props.availableStyles
97
+ .filter((name) => app.styles.hasKey(name))
98
+ .map((name) => ({
99
+ text: app.styles.getByKey(name)?.properties?.title || name,
100
+ value: name,
101
+ }));
102
+ if (props.availableStyles.indexOf(defaultStyle) < 0) {
103
+ return [
104
+ {
105
+ text: 'Default',
106
+ value: defaultStyle,
107
+ },
108
+ ...styles,
109
+ ];
110
+ }
111
+ const firstStyle = styles.find(({ value }) => value === defaultStyle);
96
112
  return [
97
- { text: 'Default', value: defaultStyle },
98
- ...props.availableStyles.map((s) => ({ text: s, value: s })),
113
+ firstStyle,
114
+ ...styles.filter(({ value }) => value !== defaultStyle),
99
115
  ];
100
116
  });
101
117
 
102
118
  function select(styleName) {
103
- const style =
104
- styleName === defaultStyle
105
- ? layer.defaultStyle
106
- : app.styles.getByKey(styleName);
119
+ const style = app.styles.hasKey(styleName)
120
+ ? app.styles.getByKey(styleName)
121
+ : layer.defaultStyle;
107
122
  layer.setStyle(style);
108
123
  app.windowManager.remove(attrs['window-state'].id);
109
124
  }
package/src/actions/actionHelper.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { v4 as uuid } from 'uuid';
2
- import { check } from '@vcsuite/check';
2
+ import { check, checkMaybe } from '@vcsuite/check';
3
3
  import {
4
4
  Collection,
5
5
  Extent,
@@ -9,9 +9,13 @@ import {
9
9
  } from '@vcmap/core';
10
10
  import { Feature } from 'ol';
11
11
  import { reactive, ref } from 'vue';
12
+ import { parseBoolean } from '@vcsuite/parsers';
12
13
  import { vcsAppSymbol } from '../pluginHelper.js';
13
14
  import { WindowSlot } from '../manager/window/windowManager.js';
14
- import { getWindowPositionOptions } from '../manager/window/windowHelper.js';
15
+ import {
16
+ getFittedWindowPositionOptionsFromMapEvent,
17
+ getTargetSize,
18
+ } from '../manager/window/windowHelper.js';
15
19
  import SearchComponent from '../search/SearchComponent.vue';
16
20
 
17
21
  /**
@@ -21,6 +25,23 @@ import SearchComponent from '../search/SearchComponent.vue';
21
25
  * @property {string} [icon]
22
26
  */
23
27
 
28
+ /**
29
+ * merges action options with defaults
30
+ * @param {VcsAction|ActionOptions & { callback: Function}} options
31
+ * @returns {VcsAction}
32
+ */
33
+ export function getActionFromOptions(options) {
34
+ check(options.name, String);
35
+ checkMaybe(options.title, String);
36
+ checkMaybe(options.icon, String);
37
+ check(options.callback, Function);
38
+ options.active = parseBoolean(options.active, false);
39
+ options.hasUpdate = parseBoolean(options.hasUpdate, false);
40
+ options.background = parseBoolean(options.background, false);
41
+ options.disabled = parseBoolean(options.disabled, false);
42
+ return options;
43
+ }
44
+
24
45
  /**
25
46
  * @param {ActionOptions} actionOptions
26
47
  * @param {string} mapName
@@ -250,9 +271,16 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
250
271
  event.currentTarget.getBoundingClientRect();
251
272
  modalActivator = event.currentTarget;
252
273
  const position = {
253
- ...getWindowPositionOptions(left + width, top, app.maps.target),
274
+ ...getFittedWindowPositionOptionsFromMapEvent(
275
+ { x: left + width, y: top - getTargetSize(app.maps.target).top },
276
+ windowPositionOptions?.width || 320,
277
+ windowPositionOptions?.height || 0,
278
+ app.maps.target,
279
+ ),
254
280
  ...windowPositionOptions,
255
281
  };
282
+ position.maxWidth = 320;
283
+ position.width = windowPositionOptions?.width || -1; // unset width magic. dont touch.
256
284
  const state = { ...modalComponent?.state, hideHeader: true };
257
285
  app.windowManager.add({ position, ...component, id, state }, owner);
258
286
  document.addEventListener('mousedown', handleMouseDown);
package/src/components/lists/VcsList.vue CHANGED
@@ -10,7 +10,10 @@
10
10
  <v-list-item-action v-if="selectable">
11
11
  <v-spacer v-if="singleSelect" />
12
12
  <v-icon
13
- v-else-if="selected.length === renderingItems.length"
13
+ v-else-if="
14
+ selected.length ===
15
+ renderingItems.filter((item) => !item.disabled).length
16
+ "
14
17
  @click="clear"
15
18
  >
16
19
  mdi-check-circle
@@ -489,7 +492,7 @@
489
492
  },
490
493
  selectAll() {
491
494
  const currentSelection = [...selected.value];
492
- selected.value = this.renderingItems.slice(0);
495
+ selected.value = this.renderingItems.filter((item) => !item.disabled);
493
496
  selected.value.forEach((item) => {
494
497
  if (item.selectionChanged && !currentSelection.includes(item)) {
495
498
  item.selectionChanged(true);
package/src/components/lists/VcsTreeview.vue CHANGED
@@ -35,12 +35,12 @@
35
35
  > .v-treeview-node:not(:last-child) {
36
36
  border-bottom: 1px solid var(--v-base-lighten2);
37
37
  }
38
- // Only Root Entries have a bold font
39
- > .v-treeview-node
40
- > .v-treeview-node__root
41
- > .v-treeview-node__content
42
- > .v-treeview-node__label {
43
- font-weight: 700;
38
+ // Only Group Entries have a bold font
39
+ .v-treeview-node__root
40
+ button
41
+ + .v-treeview-node__content
42
+ .v-treeview-node__label {
43
+ font-weight: 700 !important;
44
44
  }
45
45
  // remove ripple effect from expand icon
46
46
  .v-icon.v-icon {