@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.
- package/config/base.config.json +6 -0
- package/config/clipping.config.json +384 -0
- package/config/cluster.config.json +106 -0
- package/config/concepts-show-case.config.json +4 -0
- package/config/projects.config.json +5 -2
- package/dist/assets/{cesium-57fbd309.js → cesium-bfb31a03.js} +438 -432
- package/dist/assets/cesium.js +1 -1
- package/dist/assets/{core-fd079400.js → core-28960288.js} +4913 -4516
- package/dist/assets/core.js +1 -1
- package/dist/assets/{ol-50dfef96.js → ol-338a87a3.js} +23518 -22404
- package/dist/assets/ol.js +1 -1
- package/dist/assets/ui-4ae4c67a.css +1 -0
- package/dist/assets/{ui-5135917c.js → ui-4ae4c67a.js} +13456 -12758
- package/dist/assets/ui.js +1 -1
- package/dist/assets/vue.js +1 -1
- package/dist/assets/{vuetify-f02b7bb9.css → vuetify-1f5b5c90.css} +2 -2
- package/dist/assets/{vuetify-f02b7bb9.js → vuetify-1f5b5c90.js} +8024 -7634
- package/dist/assets/vuetify.js +1 -1
- package/index.d.ts +38 -19
- package/index.js +35 -6
- package/lib/olLib.js +25 -3
- package/package.json +6 -6
- package/plugins/@vcmap-show-case/callback-tester/README.md +3 -0
- package/plugins/@vcmap-show-case/callback-tester/package.json +5 -0
- package/plugins/@vcmap-show-case/callback-tester/src/CallbackTester.vue +62 -0
- package/plugins/@vcmap-show-case/callback-tester/src/index.js +48 -0
- package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue +1 -0
- package/src/actions/actionHelper.d.ts +1 -0
- package/src/actions/actionHelper.js +70 -19
- package/src/application/VcsApp.vue +83 -50
- package/src/application/VcsApp.vue.d.ts +24 -2
- package/src/application/VcsContainer.vue.d.ts +8 -0
- package/src/application/VcsObliqueFooter.vue +9 -3
- package/src/application/VcsSplashScreen.vue +37 -0
- package/src/application/VcsSplashScreen.vue.d.ts +6 -0
- package/src/application/positionDisplayInteraction.js +1 -1
- package/src/callback/activateClippingPolygonCallback.d.ts +29 -0
- package/src/callback/activateClippingPolygonCallback.js +54 -0
- package/src/callback/closeSplashScreenCallback.d.ts +8 -0
- package/src/callback/closeSplashScreenCallback.js +33 -0
- package/src/callback/deactivateClippingPolygonCallback.d.ts +29 -0
- package/src/callback/deactivateClippingPolygonCallback.js +54 -0
- package/src/callback/openSplashScreenCallback.d.ts +8 -0
- package/src/callback/openSplashScreenCallback.js +35 -0
- package/src/callback/toggleNavbarButtonCallback.d.ts +36 -0
- package/src/callback/toggleNavbarButtonCallback.js +62 -0
- package/src/components/form-inputs-controls/VcsSelect.vue +1 -1
- package/src/components/form-inputs-controls/VcsTextArea.vue +12 -7
- package/src/components/form-output/markdownHelper.d.ts +0 -25
- package/src/components/form-output/markdownHelper.js +1 -386
- package/src/components/lists/VcsGroupedList.vue +178 -0
- package/src/components/lists/VcsGroupedList.vue.d.ts +17 -0
- package/src/components/lists/VcsList.vue +142 -396
- package/src/components/lists/VcsList.vue.d.ts +38 -168
- package/src/components/lists/VcsTreeview.vue +11 -12
- package/src/components/lists/listHelper.d.ts +87 -0
- package/src/components/lists/listHelper.js +348 -0
- package/src/components/section/VcsFormSection.vue +7 -2
- package/src/components/section/VcsFormSection.vue.d.ts +9 -0
- package/src/components/vector-properties/VcsVectorPropertiesComponent.vue.d.ts +1 -1
- package/src/contentTree/LayerTree.vue +2 -1
- package/src/contentTree/LayerTree.vue.d.ts +2 -0
- package/src/contentTree/contentTreeCollection.d.ts +1 -0
- package/src/contentTree/contentTreeCollection.js +7 -3
- package/src/contentTree/contentTreeItem.js +4 -2
- package/src/contentTree/groupContentTreeItem.js +5 -3
- package/src/featureInfo/ClusterFeatureComponent.vue +58 -0
- package/src/featureInfo/ClusterFeatureComponent.vue.d.ts +6 -0
- package/src/featureInfo/abstractFeatureInfoView.js +1 -2
- package/src/featureInfo/featureInfo.d.ts +87 -1
- package/src/featureInfo/featureInfo.js +350 -34
- package/src/featureInfo/featureInfoInteraction.js +18 -3
- package/src/featureInfo/iframeFeatureInfoView.js +1 -1
- package/src/featureInfo/markdownBalloonFeatureInfoView.js +2 -4
- package/src/featureInfo/markdownFeatureInfoView.js +1 -1
- package/src/i18n/de.d.ts +17 -4
- package/src/i18n/de.js +7 -0
- package/src/i18n/en.d.ts +17 -4
- package/src/i18n/en.js +7 -0
- package/src/legend/legendHelper.d.ts +1 -1
- package/src/legend/legendHelper.js +52 -9
- package/src/localStorage.d.ts +21 -0
- package/src/localStorage.js +51 -0
- package/src/manager/collectionManager/CollectionComponent.vue +1 -1
- package/src/manager/collectionManager/CollectionComponentContent.vue +2 -3
- package/src/manager/collectionManager/CollectionComponentList.vue +2 -3
- package/src/manager/collectionManager/CollectionComponentStandalone.vue +1 -1
- package/src/manager/navbarManager.js +9 -4
- package/src/manager/toolbox/ToolboxManagerComponent.vue +10 -8
- package/src/manager/toolbox/ToolboxManagerComponent.vue.d.ts +11 -0
- package/src/manager/window/windowHelper.d.ts +7 -3
- package/src/manager/window/windowHelper.js +30 -10
- package/src/navigation/overviewMap.d.ts +1 -0
- package/src/navigation/overviewMap.js +4 -3
- package/src/pluginHelper.d.ts +7 -0
- package/src/pluginHelper.js +18 -4
- package/src/search/ResultItem.vue.d.ts +1 -1
- package/src/search/search.js +1 -1
- package/src/state.d.ts +4 -2
- package/src/state.js +54 -31
- package/src/uiConfig.d.ts +27 -0
- package/src/uiConfig.js +16 -1
- package/src/vcsUiApp.js +7 -11
- package/dist/assets/ui-5135917c.css +0 -1
- /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="
|
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
|
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>} [
|
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}
|
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
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
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
|
-
|
200
|
-
|
201
|
-
|
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
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
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
|
-
|
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
|
-
|
356
|
-
|
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
|
-
|
369
|
-
|
370
|
-
e.preventDefault();
|
371
|
-
hovering.value = index;
|
372
|
-
}
|
215
|
+
/** @type {import("vue").Ref<string>} */
|
216
|
+
const query = ref('');
|
373
217
|
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
218
|
+
watch(
|
219
|
+
() => props.searchable,
|
220
|
+
(searchable) => {
|
221
|
+
if (!searchable) {
|
222
|
+
query.value = '';
|
378
223
|
}
|
224
|
+
},
|
225
|
+
{ immediate: true },
|
226
|
+
);
|
379
227
|
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
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
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
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
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
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
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
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
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
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
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
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>
|