@vcmap/ui 6.1.0-rc.2 → 6.1.0-rc.4

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 (105) hide show
  1. package/config/base.config.json +6 -0
  2. package/config/clipping.config.json +384 -0
  3. package/config/cluster.config.json +106 -0
  4. package/config/concepts-show-case.config.json +4 -0
  5. package/config/projects.config.json +5 -2
  6. package/dist/assets/{cesium-57fbd309.js → cesium-bfb31a03.js} +438 -432
  7. package/dist/assets/cesium.js +1 -1
  8. package/dist/assets/{core-fd079400.js → core-28960288.js} +4913 -4516
  9. package/dist/assets/core.js +1 -1
  10. package/dist/assets/{ol-50dfef96.js → ol-338a87a3.js} +23518 -22404
  11. package/dist/assets/ol.js +1 -1
  12. package/dist/assets/ui-4ae4c67a.css +1 -0
  13. package/dist/assets/{ui-5135917c.js → ui-4ae4c67a.js} +13456 -12758
  14. package/dist/assets/ui.js +1 -1
  15. package/dist/assets/vue.js +1 -1
  16. package/dist/assets/{vuetify-f02b7bb9.css → vuetify-1f5b5c90.css} +2 -2
  17. package/dist/assets/{vuetify-f02b7bb9.js → vuetify-1f5b5c90.js} +8024 -7634
  18. package/dist/assets/vuetify.js +1 -1
  19. package/index.d.ts +38 -19
  20. package/index.js +35 -6
  21. package/lib/olLib.js +25 -3
  22. package/package.json +6 -6
  23. package/plugins/@vcmap-show-case/callback-tester/README.md +3 -0
  24. package/plugins/@vcmap-show-case/callback-tester/package.json +5 -0
  25. package/plugins/@vcmap-show-case/callback-tester/src/CallbackTester.vue +62 -0
  26. package/plugins/@vcmap-show-case/callback-tester/src/index.js +48 -0
  27. package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue +1 -0
  28. package/src/actions/actionHelper.d.ts +1 -0
  29. package/src/actions/actionHelper.js +70 -19
  30. package/src/application/VcsApp.vue +83 -50
  31. package/src/application/VcsApp.vue.d.ts +24 -2
  32. package/src/application/VcsContainer.vue.d.ts +8 -0
  33. package/src/application/VcsObliqueFooter.vue +9 -3
  34. package/src/application/VcsSplashScreen.vue +37 -0
  35. package/src/application/VcsSplashScreen.vue.d.ts +6 -0
  36. package/src/application/positionDisplayInteraction.js +1 -1
  37. package/src/callback/activateClippingPolygonCallback.d.ts +29 -0
  38. package/src/callback/activateClippingPolygonCallback.js +54 -0
  39. package/src/callback/closeSplashScreenCallback.d.ts +8 -0
  40. package/src/callback/closeSplashScreenCallback.js +33 -0
  41. package/src/callback/deactivateClippingPolygonCallback.d.ts +29 -0
  42. package/src/callback/deactivateClippingPolygonCallback.js +54 -0
  43. package/src/callback/openSplashScreenCallback.d.ts +8 -0
  44. package/src/callback/openSplashScreenCallback.js +35 -0
  45. package/src/callback/toggleNavbarButtonCallback.d.ts +36 -0
  46. package/src/callback/toggleNavbarButtonCallback.js +62 -0
  47. package/src/components/form-inputs-controls/VcsSelect.vue +1 -1
  48. package/src/components/form-inputs-controls/VcsTextArea.vue +12 -7
  49. package/src/components/form-output/markdownHelper.d.ts +0 -25
  50. package/src/components/form-output/markdownHelper.js +1 -386
  51. package/src/components/lists/VcsGroupedList.vue +178 -0
  52. package/src/components/lists/VcsGroupedList.vue.d.ts +17 -0
  53. package/src/components/lists/VcsList.vue +142 -396
  54. package/src/components/lists/VcsList.vue.d.ts +38 -168
  55. package/src/components/lists/VcsTreeview.vue +11 -12
  56. package/src/components/lists/listHelper.d.ts +87 -0
  57. package/src/components/lists/listHelper.js +348 -0
  58. package/src/components/section/VcsFormSection.vue +7 -2
  59. package/src/components/section/VcsFormSection.vue.d.ts +9 -0
  60. package/src/components/vector-properties/VcsVectorPropertiesComponent.vue.d.ts +1 -1
  61. package/src/contentTree/LayerTree.vue +2 -1
  62. package/src/contentTree/LayerTree.vue.d.ts +2 -0
  63. package/src/contentTree/contentTreeCollection.d.ts +1 -0
  64. package/src/contentTree/contentTreeCollection.js +7 -3
  65. package/src/contentTree/contentTreeItem.js +4 -2
  66. package/src/contentTree/groupContentTreeItem.js +5 -3
  67. package/src/featureInfo/ClusterFeatureComponent.vue +58 -0
  68. package/src/featureInfo/ClusterFeatureComponent.vue.d.ts +6 -0
  69. package/src/featureInfo/abstractFeatureInfoView.js +1 -2
  70. package/src/featureInfo/featureInfo.d.ts +87 -1
  71. package/src/featureInfo/featureInfo.js +350 -34
  72. package/src/featureInfo/featureInfoInteraction.js +18 -3
  73. package/src/featureInfo/iframeFeatureInfoView.js +1 -1
  74. package/src/featureInfo/markdownBalloonFeatureInfoView.js +2 -4
  75. package/src/featureInfo/markdownFeatureInfoView.js +1 -1
  76. package/src/i18n/de.d.ts +17 -4
  77. package/src/i18n/de.js +7 -0
  78. package/src/i18n/en.d.ts +17 -4
  79. package/src/i18n/en.js +7 -0
  80. package/src/legend/legendHelper.d.ts +1 -1
  81. package/src/legend/legendHelper.js +52 -9
  82. package/src/localStorage.d.ts +21 -0
  83. package/src/localStorage.js +51 -0
  84. package/src/manager/collectionManager/CollectionComponent.vue +1 -1
  85. package/src/manager/collectionManager/CollectionComponentContent.vue +2 -3
  86. package/src/manager/collectionManager/CollectionComponentList.vue +2 -3
  87. package/src/manager/collectionManager/CollectionComponentStandalone.vue +1 -1
  88. package/src/manager/navbarManager.js +9 -4
  89. package/src/manager/toolbox/ToolboxManagerComponent.vue +10 -8
  90. package/src/manager/toolbox/ToolboxManagerComponent.vue.d.ts +11 -0
  91. package/src/manager/window/windowHelper.d.ts +7 -3
  92. package/src/manager/window/windowHelper.js +30 -10
  93. package/src/navigation/overviewMap.d.ts +1 -0
  94. package/src/navigation/overviewMap.js +4 -3
  95. package/src/pluginHelper.d.ts +7 -0
  96. package/src/pluginHelper.js +18 -4
  97. package/src/search/ResultItem.vue.d.ts +1 -1
  98. package/src/search/search.js +1 -1
  99. package/src/state.d.ts +4 -2
  100. package/src/state.js +54 -31
  101. package/src/uiConfig.d.ts +27 -0
  102. package/src/uiConfig.js +16 -1
  103. package/src/vcsUiApp.js +7 -11
  104. package/dist/assets/ui-5135917c.css +0 -1
  105. /package/dist/assets/{vue-c3c55d88.js → vue-b5c1e81a.js} +0 -0
@@ -40,7 +40,7 @@
40
40
  :active="selected.includes(item)"
41
41
  @mousedown.shift="$event.preventDefault()"
42
42
  :draggable="isDraggable"
43
- @dragstart="drag($event, item, index)"
43
+ @dragstart="dragStart($event, item, index)"
44
44
  @dragover.prevent="dragOver($event, index)"
45
45
  @dragend="dragEnd($event)"
46
46
  @drop="drop($event, index)"
@@ -81,70 +81,21 @@
81
81
  </div>
82
82
  </template>
83
83
 
84
- <script>
85
- import {
86
- computed,
87
- getCurrentInstance,
88
- isReactive,
89
- reactive,
90
- ref,
91
- shallowRef,
92
- watch,
93
- } from 'vue';
84
+ <script setup>
85
+ import { computed, getCurrentInstance, ref, useSlots, watch } from 'vue';
94
86
  import {
87
+ VIcon,
95
88
  VList,
96
89
  VListItem,
97
- VIcon,
98
90
  VListItemTitle,
99
91
  VTooltip,
100
92
  } from 'vuetify/components';
93
+ import { setupDraggableList, setupSelectableList } from './listHelper.js';
101
94
  import VcsListItemComponent from './VcsListItemComponent.vue';
102
95
  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
103
96
  import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
104
97
  import { createEllipseTooltip } from '../composables.js';
105
98
 
106
- /**
107
- * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
108
- * @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
109
- * @param {function(string, ...any[]):void} emit
110
- * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
111
- */
112
- export function createSelectionActions(items, selected, emit) {
113
- const selectAllAction = reactive({
114
- name: 'list.selectAll',
115
- tooltip: 'list.selectAll',
116
- disabled: computed(() => items.value.length - selected.value.length < 1),
117
- callback() {
118
- const currentSelection = [...selected.value];
119
- selected.value = items.value.filter((item) => !item.disabled);
120
-
121
- selected.value.forEach((item) => {
122
- if (item.selectionChanged && !currentSelection.includes(item)) {
123
- item.selectionChanged(true);
124
- }
125
- });
126
- emit('update:modelValue', selected.value);
127
- },
128
- });
129
-
130
- const clearSelectionAction = reactive({
131
- name: 'list.clearSelection',
132
- tooltip: 'list.clearSelection',
133
- disabled: computed(() => selected.value.length < 1),
134
- callback() {
135
- [...selected.value].forEach((item) => {
136
- if (item.selectionChanged) {
137
- item.selectionChanged(false);
138
- }
139
- });
140
- selected.value = [];
141
- emit('update:modelValue', selected.value);
142
- },
143
- });
144
-
145
- return [selectAllAction, clearSelectionAction];
146
- }
147
-
148
99
  /**
149
100
  * @typedef {Object} ItemMovedEvent
150
101
  * @property {import("./VcsListItemComponent.vue").VcsListItem} item
@@ -153,7 +104,7 @@
153
104
 
154
105
  /**
155
106
  * @description
156
- * The VCS list is intended to render items. Items can be selectable (by default, more than one) or only a single item can
107
+ * The VcsList is intended to render items. Items can be selectable (by default, more than one) or only a single item can
157
108
  * be selected. If items are disabled they cannot be selected. Items which are not visible are not rendered. These items can
158
109
  * no longer be selected or deselected either. Making a selected item invisible can lead to undefined behavior
159
110
  * in the selection state.
@@ -167,7 +118,7 @@
167
118
  * @vue-prop {boolean} [draggable=false]
168
119
  * @vue-prop {boolean} [selectable=false]
169
120
  * @vue-prop {boolean} [singleSelect=false]
170
- * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [value=[]] - the initial items to be selected.
121
+ * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [modelValue=[]] - the initial items to be selected.
171
122
  * @vue-prop {boolean} [searchable=false] - if this list can have its items searched.
172
123
  * @vue-prop {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} [customFilter] - a function to customize filtering when searching.
173
124
  * @vue-prop {string} [searchbarPlaceholder] - placeholder to render inside the search field
@@ -177,366 +128,161 @@
177
128
  * @vue-prop {string} [icon] - icon to prepend to the list title
178
129
  * @vue-prop {string} [tooltip] - tooltip to render on the list title
179
130
  * @vue-prop {Array<import("../../actions/actionHelper.js").VcsAction>} [actions] - actions to render in the list title
180
- * @vue-event {ItemMovedEvent} item-moved - event triggered after item was dragged and is dropped
131
+ * @vue-event {ItemMovedEvent} itemMoved - event triggered after item was dragged and is dropped
181
132
  * @vue-data {slot} [#item.prepend] - A slot that forwads to v-list-item prepend slot. Binds v-list-item append slot props, item and item index.
182
133
  * @vue-data {slot} [#item.title] - A slot that forwards to v-list-item title slot. Binds v-list-item title slot props, item and item index.
183
134
  * @vue-data {slot} [#item.subtitle] - A slot that forwards to v-list-item subtitle slot. Binds v-list-item subtitle slot props, item and item index.
184
135
  * @vue-data {slot} [#item.append] - A slot that forwards to v-list-item append slot. Binds v-list-item append slot props, item and item index.
185
136
  * @vue-data {slot} [#item.intermediate] - A slot to introduce content, e.g. buttons between two list items. Binds item and item index.
186
137
  */
187
- export default {
188
- name: 'VcsList',
189
- components: {
190
- VcsListItemComponent,
191
- VcsTreeviewSearchbar,
192
- VcsActionButtonList,
193
- VTooltip,
194
- VList,
195
- VListItem,
196
- VIcon,
197
- VListItemTitle,
138
+
139
+ const props = defineProps({
140
+ items: {
141
+ type: Array,
142
+ required: true,
198
143
  },
199
- props: {
200
- items: {
201
- type: Array,
202
- required: true,
203
- },
204
- draggable: {
205
- type: Boolean,
206
- default: false,
207
- },
208
- selectable: {
209
- type: Boolean,
210
- default: false,
211
- },
212
- singleSelect: {
213
- type: Boolean,
214
- default: false,
215
- },
216
- modelValue: {
217
- type: Array,
218
- default: () => [],
219
- },
220
- searchable: {
221
- type: Boolean,
222
- default: false,
223
- },
224
- customFilter: {
225
- type: Function,
226
- default: undefined,
227
- },
228
- searchbarPlaceholder: {
229
- type: String,
230
- default: undefined,
231
- },
232
- showTitle: {
233
- type: Boolean,
234
- default: true,
235
- },
236
- actionButtonListOverflowCount: {
237
- type: Number,
238
- required: false,
239
- default: undefined,
240
- },
241
- title: {
242
- type: String,
243
- required: false,
244
- default: '',
245
- },
246
- icon: {
247
- type: String,
248
- required: false,
249
- default: undefined,
250
- },
251
- tooltip: {
252
- type: String,
253
- required: false,
254
- default: '',
255
- },
256
- actions: {
257
- type: Array,
258
- required: false,
259
- default: () => [],
260
- },
144
+ draggable: {
145
+ type: Boolean,
146
+ default: false,
261
147
  },
262
- setup(props, { emit, slots }) {
263
- /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
264
- const selected = shallowRef([]);
265
- /** @type {import("vue").Ref<string>} */
266
- const query = ref('');
267
- /** @type {import("vue").Ref<number|undefined>} */
268
- const hovering = ref(undefined);
269
- /** @type {import("vue").Ref<number|undefined>} */
270
- const dragging = ref(undefined);
271
- const borderBottom = (index) => {
272
- return (
273
- dragging.value !== undefined &&
274
- dragging.value < index &&
275
- index === hovering.value
276
- );
277
- };
278
- const borderTop = (index) => {
279
- return (
280
- dragging.value !== undefined &&
281
- dragging.value > index &&
282
- index === hovering.value
283
- );
284
- };
285
- const lightenEven = computed(() => {
286
- return !(!props.searchable && !props.showTitle);
287
- });
288
- let firstSelected = null;
289
- const listHeader = ref();
290
-
291
- watch(
292
- props,
293
- () => {
294
- if (selected.value !== props.modelValue) {
295
- selected.value = props.modelValue;
296
- }
297
- if (props.singleSelect && selected.value.length > 1) {
298
- selected.value
299
- .filter((i, index) => index && i.selectionChanged)
300
- .forEach((i) => i.selectionChanged(false));
301
- selected.value = [selected.value[0]];
302
- emit('update:modelValue', selected);
303
- }
304
- if (!props.selectable && selected.value.length > 0) {
305
- selected.value
306
- .filter((i) => i.selectionChanged)
307
- .forEach((i) => i.selectionChanged(false));
308
- selected.value = [];
309
- emit('update:modelValue', selected);
310
- }
311
- if (!props.searchable) {
312
- query.value = '';
313
- }
314
- },
315
- { immediate: true, deep: false },
316
- );
317
-
318
- const vm = getCurrentInstance().proxy;
319
- /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
320
- const filterPredicate = (item, queryString = '') => {
321
- if (props.customFilter) {
322
- return props.customFilter(item, queryString);
323
- }
324
- const translatedTitle = vm.$st(item.title);
325
- return translatedTitle
326
- .toLocaleLowerCase()
327
- .includes(queryString.toLocaleLowerCase());
328
- };
329
-
330
- /**
331
- * @type {import("./VcsListItemComponent.vue").VcsListItem|null}
332
- */
333
- let draggedItem = null;
148
+ selectable: {
149
+ type: Boolean,
150
+ default: false,
151
+ },
152
+ singleSelect: {
153
+ type: Boolean,
154
+ default: false,
155
+ },
156
+ selectFunction: {
157
+ type: Function,
158
+ default: undefined,
159
+ },
160
+ modelValue: {
161
+ type: Array,
162
+ default: () => [],
163
+ },
164
+ searchable: {
165
+ type: Boolean,
166
+ default: false,
167
+ },
168
+ customFilter: {
169
+ type: Function,
170
+ default: undefined,
171
+ },
172
+ searchbarPlaceholder: {
173
+ type: String,
174
+ default: undefined,
175
+ },
176
+ showTitle: {
177
+ type: Boolean,
178
+ default: true,
179
+ },
180
+ actionButtonListOverflowCount: {
181
+ type: Number,
182
+ required: false,
183
+ default: undefined,
184
+ },
185
+ title: {
186
+ type: String,
187
+ required: false,
188
+ default: '',
189
+ },
190
+ icon: {
191
+ type: String,
192
+ required: false,
193
+ default: undefined,
194
+ },
195
+ tooltip: {
196
+ type: String,
197
+ required: false,
198
+ default: '',
199
+ },
200
+ actions: {
201
+ type: Array,
202
+ required: false,
203
+ default: () => [],
204
+ },
205
+ });
334
206
 
335
- const isDraggable = computed(() => {
336
- return !query.value && props.draggable;
337
- });
207
+ const emit = defineEmits(['update:modelValue', 'itemMoved']);
338
208
 
339
- /**
340
- * @param {MouseEvent} e
341
- * @param {number} targetIndex
342
- */
343
- function drop(e, targetIndex) {
344
- if (isDraggable.value) {
345
- if (draggedItem !== null && targetIndex !== undefined) {
346
- emit('item-moved', { item: draggedItem, targetIndex });
347
- }
348
- draggedItem = null;
349
- dragging.value = undefined;
350
- hovering.value = undefined;
351
- }
352
- }
209
+ const slots = useSlots();
353
210
 
354
- /**
355
- * @param {MouseEvent} e
356
- * @param {import("./VcsListItemComponent.vue").VcsListItem} item
357
- * @param {number} index
358
- */
359
- function drag(e, item, index) {
360
- e.stopPropagation();
361
- if (isDraggable.value) {
362
- dragging.value = index;
363
- draggedItem = item;
364
- e.dataTransfer.effectAllowed = 'move';
365
- }
366
- }
211
+ const lightenEven = computed(() => {
212
+ return !(!props.searchable && !props.showTitle);
213
+ });
367
214
 
368
- function dragOver(e, index) {
369
- e.stopPropagation();
370
- e.preventDefault();
371
- hovering.value = index;
372
- }
215
+ /** @type {import("vue").Ref<string>} */
216
+ const query = ref('');
373
217
 
374
- function dragLeave(e) {
375
- e.stopPropagation();
376
- e.preventDefault();
377
- hovering.value = undefined;
218
+ watch(
219
+ () => props.searchable,
220
+ (searchable) => {
221
+ if (!searchable) {
222
+ query.value = '';
378
223
  }
224
+ },
225
+ { immediate: true },
226
+ );
379
227
 
380
- function dragEnd(e) {
381
- e.stopPropagation();
382
- dragging.value = undefined;
383
- hovering.value = undefined;
384
- }
228
+ const vm = getCurrentInstance().proxy;
229
+ /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
230
+ const filterPredicate = (item, queryString = '') => {
231
+ if (props.customFilter) {
232
+ return props.customFilter(item, queryString);
233
+ }
234
+ const translatedTitle = vm.$st(item.title);
235
+ return translatedTitle
236
+ .toLocaleLowerCase()
237
+ .includes(queryString.toLocaleLowerCase());
238
+ };
385
239
 
386
- /**
387
- * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
388
- */
389
- const renderingItems = computed(() => {
390
- let items = props.items.filter((i) => i.visible !== false);
391
- if (query.value) {
392
- items = items.filter((i) => filterPredicate(i, query.value));
393
- }
394
- return items;
395
- });
240
+ /**
241
+ * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
242
+ */
243
+ const renderingItems = computed(() => {
244
+ let items = props.items.filter((i) => i.visible !== false);
245
+ if (query.value) {
246
+ items = items.filter((i) => filterPredicate(i, query.value));
247
+ }
248
+ return items;
249
+ });
396
250
 
397
- const selectionActions = createSelectionActions(
398
- renderingItems,
399
- selected,
400
- emit,
401
- );
251
+ const {
252
+ dragging,
253
+ isDraggable,
254
+ borderBottom,
255
+ borderTop,
256
+ dragStart,
257
+ dragOver,
258
+ dragLeave,
259
+ dragEnd,
260
+ drop,
261
+ } = setupDraggableList(props, query, emit);
402
262
 
403
- /**
404
- * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
405
- */
406
- const renderingActions = computed(() => {
407
- if (props.selectable && !props.singleSelect) {
408
- return [...selectionActions, ...props.actions];
409
- }
410
- return props.actions;
411
- });
263
+ const { select, selected, selectionActions } = setupSelectableList(
264
+ props,
265
+ renderingItems,
266
+ emit,
267
+ );
412
268
 
413
- return {
414
- query,
415
- hovering,
416
- dragging,
417
- isDraggable,
418
- borderBottom,
419
- borderTop,
420
- lightenEven,
421
- /**
422
- * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
423
- */
424
- renderingActions,
425
- /**
426
- * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
427
- */
428
- renderingItems,
429
- /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
430
- selected,
431
- /**
432
- * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
433
- * @param {PointerEvent} event
434
- */
435
- select(item, event) {
436
- if (!props.selectable || item.disabled) {
437
- return;
438
- }
439
- if (!isReactive(item)) {
440
- throw new Error('Trying to select an unreactive item');
441
- }
442
- if (Array.isArray(item.clickedCallbacks)) {
443
- item.clickedCallbacks.forEach((cb) => cb(event));
444
- }
445
- if (props.singleSelect) {
446
- if (selected.value[0] === item) {
447
- item.selectionChanged?.(false);
448
- selected.value = [];
449
- firstSelected = null;
450
- } else {
451
- selected.value[0]?.selectionChanged?.(false);
452
- item.selectionChanged?.(true);
453
- selected.value = [item];
454
- firstSelected = item;
455
- }
456
- } else if (event.shiftKey) {
457
- let firstIndex = 0;
458
- if (firstSelected) {
459
- firstIndex = renderingItems.value.indexOf(firstSelected);
460
- }
461
- const currentIndex = renderingItems.value.indexOf(item);
462
- if (firstIndex > -1 && currentIndex > -1) {
463
- const currentSelection = [...selected.value];
464
- selected.value = renderingItems.value.slice(
465
- Math.min(firstIndex, currentIndex),
466
- Math.max(firstIndex, currentIndex) + 1,
467
- );
468
- currentSelection.forEach((oldItem) => {
469
- if (
470
- oldItem.selectionChanged &&
471
- !selected.value.includes(oldItem)
472
- ) {
473
- oldItem.selectionChanged(false);
474
- }
475
- });
476
- selected.value.forEach((newItem) => {
477
- if (
478
- newItem.selectionChanged &&
479
- !currentSelection.includes(newItem)
480
- ) {
481
- newItem.selectionChanged(true);
482
- }
483
- });
484
- } else {
485
- selected.value
486
- .filter((i) => i !== item && i.selectionChanged)
487
- .forEach((i) => i.selectionChanged(false));
488
- selected.value = [];
489
- firstSelected = null;
490
- }
491
- } else if (selected.value.includes(item)) {
492
- if (event.ctrlKey) {
493
- item.selectionChanged?.(false);
494
- selected.value = selected.value.filter((i) => i !== item);
495
- } else if (selected.value.length > 1) {
496
- selected.value
497
- .filter((i) => i !== item && i.selectionChanged)
498
- .forEach((i) => {
499
- i.selectionChanged(false);
500
- });
501
- selected.value = [item];
502
- firstSelected = item;
503
- } else {
504
- item.selectionChanged?.(false);
505
- selected.value = [];
506
- firstSelected = null;
507
- }
508
- } else if (event.ctrlKey) {
509
- item.selectionChanged?.(true);
510
- selected.value = [...selected.value, item];
511
- if (selected.value.length === 1) {
512
- firstSelected = item;
513
- }
514
- } else {
515
- selected.value
516
- .filter((i) => i !== item && i.selectionChanged)
517
- .forEach((i) => i.selectionChanged(false));
518
- item.selectionChanged?.(true);
519
- selected.value = [item];
520
- firstSelected = item;
521
- }
269
+ /**
270
+ * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
271
+ */
272
+ const renderingActions = computed(() => {
273
+ if (props.selectable && !props.singleSelect) {
274
+ return [...selectionActions, ...props.actions];
275
+ }
276
+ return props.actions;
277
+ });
522
278
 
523
- emit('update:modelValue', selected.value);
524
- },
525
- drag,
526
- drop,
527
- dragOver,
528
- dragLeave,
529
- dragEnd,
530
- listHeader,
531
- listHeaderTooltip: createEllipseTooltip(
532
- computed(() => listHeader.value?.$el),
533
- computed(() => props.tooltip),
534
- computed(() => props.title),
535
- ),
536
- hasIntermediateSlot: computed(() => !!slots['item.intermediate']),
537
- };
538
- },
539
- };
279
+ const listHeader = ref();
280
+ const listHeaderTooltip = createEllipseTooltip(
281
+ computed(() => listHeader.value?.$el),
282
+ computed(() => props.tooltip),
283
+ computed(() => props.title),
284
+ );
285
+ const hasIntermediateSlot = computed(() => !!slots['item.intermediate']);
540
286
  </script>
541
287
 
542
288
  <style lang="scss" scoped>