@vcmap/ui 6.1.0-rc.2 → 6.1.0-rc.3
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-87d5e72d.js} +438 -432
- package/dist/assets/cesium.js +1 -1
- package/dist/assets/{core-fd079400.js → core-72f9f393.js} +4907 -4514
- package/dist/assets/core.js +1 -1
- package/dist/assets/{ol-50dfef96.js → ol-e468ba43.js} +23518 -22404
- package/dist/assets/ol.js +1 -1
- package/dist/assets/ui-73257b15.css +1 -0
- package/dist/assets/{ui-5135917c.js → ui-73257b15.js} +13440 -12742
- package/dist/assets/ui.js +1 -1
- package/dist/assets/vue.js +1 -1
- package/dist/assets/{vuetify-f02b7bb9.css → vuetify-2437380c.css} +2 -2
- package/dist/assets/{vuetify-f02b7bb9.js → vuetify-2437380c.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 +342 -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-ff37ea23.js} +0 -0
@@ -1,182 +1,52 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
* @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
|
4
|
-
* @param {function(string, ...any[]):void} emit
|
5
|
-
* @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
|
6
|
-
*/
|
7
|
-
export function createSelectionActions(items: import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>, selected: import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>, emit: (arg0: string, ...args: any[][]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
|
8
|
-
declare const _default: import("vue").DefineComponent<{
|
9
|
-
items: {
|
10
|
-
type: ArrayConstructor;
|
11
|
-
required: true;
|
12
|
-
};
|
13
|
-
draggable: {
|
14
|
-
type: BooleanConstructor;
|
15
|
-
default: boolean;
|
16
|
-
};
|
17
|
-
selectable: {
|
18
|
-
type: BooleanConstructor;
|
19
|
-
default: boolean;
|
20
|
-
};
|
21
|
-
singleSelect: {
|
22
|
-
type: BooleanConstructor;
|
23
|
-
default: boolean;
|
24
|
-
};
|
25
|
-
modelValue: {
|
26
|
-
type: ArrayConstructor;
|
27
|
-
default: () => never[];
|
28
|
-
};
|
29
|
-
searchable: {
|
30
|
-
type: BooleanConstructor;
|
31
|
-
default: boolean;
|
32
|
-
};
|
33
|
-
customFilter: {
|
34
|
-
type: FunctionConstructor;
|
35
|
-
default: undefined;
|
36
|
-
};
|
37
|
-
searchbarPlaceholder: {
|
38
|
-
type: StringConstructor;
|
39
|
-
default: undefined;
|
40
|
-
};
|
41
|
-
showTitle: {
|
42
|
-
type: BooleanConstructor;
|
43
|
-
default: boolean;
|
44
|
-
};
|
45
|
-
actionButtonListOverflowCount: {
|
46
|
-
type: NumberConstructor;
|
47
|
-
required: false;
|
48
|
-
default: undefined;
|
49
|
-
};
|
50
|
-
title: {
|
51
|
-
type: StringConstructor;
|
52
|
-
required: false;
|
53
|
-
default: string;
|
54
|
-
};
|
55
|
-
icon: {
|
56
|
-
type: StringConstructor;
|
57
|
-
required: false;
|
58
|
-
default: undefined;
|
59
|
-
};
|
60
|
-
tooltip: {
|
61
|
-
type: StringConstructor;
|
62
|
-
required: false;
|
63
|
-
default: string;
|
64
|
-
};
|
65
|
-
actions: {
|
66
|
-
type: ArrayConstructor;
|
67
|
-
required: false;
|
68
|
-
default: () => never[];
|
69
|
-
};
|
70
|
-
}, {
|
71
|
-
query: import("vue").Ref<string>;
|
72
|
-
hovering: import("vue").Ref<number | undefined>;
|
73
|
-
dragging: import("vue").Ref<number | undefined>;
|
74
|
-
isDraggable: import("vue").ComputedRef<boolean>;
|
75
|
-
borderBottom: (index: any) => boolean;
|
76
|
-
borderTop: (index: any) => boolean;
|
77
|
-
lightenEven: import("vue").ComputedRef<boolean>;
|
78
|
-
/**
|
79
|
-
* @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
|
80
|
-
*/
|
81
|
-
renderingActions: import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>;
|
82
|
-
/**
|
83
|
-
* @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
|
84
|
-
*/
|
85
|
-
renderingItems: import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
|
86
|
-
/** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
|
87
|
-
selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
|
88
|
-
/**
|
89
|
-
* @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
|
90
|
-
* @param {PointerEvent} event
|
91
|
-
*/
|
92
|
-
select(item: any, event: PointerEvent): void;
|
93
|
-
drag: (e: MouseEvent, item: import("./VcsListItemComponent.vue").VcsListItem, index: number) => void;
|
94
|
-
drop: (e: MouseEvent, targetIndex: number) => void;
|
95
|
-
dragOver: (e: any, index: any) => void;
|
96
|
-
dragLeave: (e: any) => void;
|
97
|
-
dragEnd: (e: any) => void;
|
98
|
-
listHeader: import("vue").Ref<any>;
|
99
|
-
listHeaderTooltip: import("vue").ComputedRef<string>;
|
100
|
-
hasIntermediateSlot: import("vue").ComputedRef<boolean>;
|
101
|
-
}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
102
|
-
items: {
|
103
|
-
type: ArrayConstructor;
|
104
|
-
required: true;
|
105
|
-
};
|
106
|
-
draggable: {
|
107
|
-
type: BooleanConstructor;
|
108
|
-
default: boolean;
|
109
|
-
};
|
110
|
-
selectable: {
|
111
|
-
type: BooleanConstructor;
|
112
|
-
default: boolean;
|
113
|
-
};
|
114
|
-
singleSelect: {
|
115
|
-
type: BooleanConstructor;
|
116
|
-
default: boolean;
|
117
|
-
};
|
118
|
-
modelValue: {
|
119
|
-
type: ArrayConstructor;
|
120
|
-
default: () => never[];
|
121
|
-
};
|
122
|
-
searchable: {
|
123
|
-
type: BooleanConstructor;
|
124
|
-
default: boolean;
|
125
|
-
};
|
126
|
-
customFilter: {
|
127
|
-
type: FunctionConstructor;
|
128
|
-
default: undefined;
|
129
|
-
};
|
130
|
-
searchbarPlaceholder: {
|
131
|
-
type: StringConstructor;
|
132
|
-
default: undefined;
|
133
|
-
};
|
134
|
-
showTitle: {
|
135
|
-
type: BooleanConstructor;
|
136
|
-
default: boolean;
|
137
|
-
};
|
138
|
-
actionButtonListOverflowCount: {
|
139
|
-
type: NumberConstructor;
|
140
|
-
required: false;
|
141
|
-
default: undefined;
|
142
|
-
};
|
143
|
-
title: {
|
144
|
-
type: StringConstructor;
|
145
|
-
required: false;
|
146
|
-
default: string;
|
147
|
-
};
|
148
|
-
icon: {
|
149
|
-
type: StringConstructor;
|
150
|
-
required: false;
|
151
|
-
default: undefined;
|
152
|
-
};
|
153
|
-
tooltip: {
|
154
|
-
type: StringConstructor;
|
155
|
-
required: false;
|
156
|
-
default: string;
|
157
|
-
};
|
158
|
-
actions: {
|
159
|
-
type: ArrayConstructor;
|
160
|
-
required: false;
|
161
|
-
default: () => never[];
|
162
|
-
};
|
163
|
-
}>>, {
|
1
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
|
2
|
+
$emit: (event: "update:modelValue" | "itemMoved", ...args: any[]) => void;
|
164
3
|
title: string;
|
165
|
-
icon: string;
|
166
4
|
modelValue: unknown[];
|
167
5
|
draggable: boolean;
|
168
6
|
tooltip: string;
|
7
|
+
items: unknown[];
|
169
8
|
selectable: boolean;
|
170
9
|
actions: unknown[];
|
171
|
-
customFilter: Function;
|
172
|
-
searchbarPlaceholder: string;
|
173
|
-
actionButtonListOverflowCount: number;
|
174
10
|
singleSelect: boolean;
|
175
11
|
searchable: boolean;
|
176
12
|
showTitle: boolean;
|
177
|
-
|
13
|
+
icon?: string | undefined;
|
14
|
+
customFilter?: Function | undefined;
|
15
|
+
searchbarPlaceholder?: string | undefined;
|
16
|
+
actionButtonListOverflowCount?: number | undefined;
|
17
|
+
selectFunction?: Function | undefined;
|
18
|
+
$props: {
|
19
|
+
readonly title?: string | undefined;
|
20
|
+
readonly modelValue?: unknown[] | undefined;
|
21
|
+
readonly draggable?: boolean | undefined;
|
22
|
+
readonly tooltip?: string | undefined;
|
23
|
+
readonly items?: unknown[] | undefined;
|
24
|
+
readonly selectable?: boolean | undefined;
|
25
|
+
readonly actions?: unknown[] | undefined;
|
26
|
+
readonly singleSelect?: boolean | undefined;
|
27
|
+
readonly searchable?: boolean | undefined;
|
28
|
+
readonly showTitle?: boolean | undefined;
|
29
|
+
readonly icon?: string | undefined;
|
30
|
+
readonly customFilter?: Function | undefined;
|
31
|
+
readonly searchbarPlaceholder?: string | undefined;
|
32
|
+
readonly actionButtonListOverflowCount?: number | undefined;
|
33
|
+
readonly selectFunction?: Function | undefined;
|
34
|
+
};
|
35
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
|
36
|
+
"item.append"?(_: any): any;
|
37
|
+
"item.title"?(_: any): any;
|
38
|
+
"item.subtitle"?(_: any): any;
|
39
|
+
"item.prepend"?(_: any): any;
|
40
|
+
"item.intermediate"?(_: {
|
41
|
+
item: import("./VcsListItemComponent.vue").VcsListItem;
|
42
|
+
index: number;
|
43
|
+
}): any;
|
44
|
+
}>;
|
178
45
|
export default _default;
|
179
46
|
export type ItemMovedEvent = {
|
180
47
|
item: import("./VcsListItemComponent.vue").VcsListItem;
|
181
48
|
targetIndex: number;
|
182
49
|
};
|
50
|
+
type __VLS_WithTemplateSlots<T, S> = T & (new () => {
|
51
|
+
$slots: S;
|
52
|
+
});
|
@@ -104,18 +104,17 @@
|
|
104
104
|
const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
|
105
105
|
const localOpenedItems = useProxiedComplexModel(props, 'opened', emit);
|
106
106
|
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
()
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
}
|
107
|
+
watch(
|
108
|
+
[() => props.items, () => props.openAll],
|
109
|
+
() => {
|
110
|
+
if (props.openAll) {
|
111
|
+
localOpenedItems.value = [...props.items.map((item) => item.name)];
|
112
|
+
}
|
113
|
+
},
|
114
|
+
{
|
115
|
+
immediate: true,
|
116
|
+
},
|
117
|
+
);
|
119
118
|
|
120
119
|
function itemToggled(itemName) {
|
121
120
|
const idx = localOpenedItems.value.indexOf(itemName);
|
@@ -0,0 +1,87 @@
|
|
1
|
+
/**
|
2
|
+
* @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
|
3
|
+
* @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
|
4
|
+
* @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
|
5
|
+
* @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
|
6
|
+
*/
|
7
|
+
export function createSelectionActions(items: import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>, selected: import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>, emit: (event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
|
8
|
+
/**
|
9
|
+
* @typedef {Object & {
|
10
|
+
* selectable?: boolean,
|
11
|
+
* singleSelect?: boolean,
|
12
|
+
* selectFunction?: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
|
13
|
+
* modelValue?: Array<import("./VcsListItemComponent.vue").VcsListItem> }
|
14
|
+
* } SelectableListProps
|
15
|
+
* @property {boolean?} selectable
|
16
|
+
* @property {boolean?} singleSelect
|
17
|
+
* @property {(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void} selectFunction
|
18
|
+
* @property {Array<import("./VcsListItemComponent.vue").VcsListItem>?} modelValue
|
19
|
+
*/
|
20
|
+
/**
|
21
|
+
* @typedef {{
|
22
|
+
* selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>,
|
23
|
+
* select: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
|
24
|
+
* selectionActions:Array<import("../../actions/actionHelper.js").VcsAction>
|
25
|
+
* }} SelectableListSetup
|
26
|
+
*/
|
27
|
+
/**
|
28
|
+
* Function setting up selection logic for lists. Use only in setup function of components!
|
29
|
+
* This requires VcsListItems with unique keys (name property).
|
30
|
+
* @param {Object & SelectableListProps} props
|
31
|
+
* @param {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} renderingItems
|
32
|
+
* @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
|
33
|
+
* @returns {SelectableListSetup}
|
34
|
+
*/
|
35
|
+
export function setupSelectableList(props: Object & SelectableListProps, renderingItems: import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>, emit: (event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void): SelectableListSetup;
|
36
|
+
/**
|
37
|
+
* @typedef {{
|
38
|
+
* hovering: import("vue").Ref<number|undefined>,
|
39
|
+
* dragging: import("vue").Ref<number|undefined>,
|
40
|
+
* isDraggable: import("vue").ComputedRef<boolean>,
|
41
|
+
* borderBottom: (index: number) => boolean,
|
42
|
+
* borderTop: (index: number) => boolean,
|
43
|
+
* dragStart: (
|
44
|
+
* e: MouseEvent,
|
45
|
+
* item: import('./VcsListItemComponent.vue').VcsListItem,
|
46
|
+
* index: number,
|
47
|
+
* ) => void;
|
48
|
+
* dragOver: (e: MouseEvent, index: number) => void;
|
49
|
+
* dragLeave: (e: MouseEvent) => void;
|
50
|
+
* dragEnd: (e: MouseEvent) => void;
|
51
|
+
* drop: (e: MouseEvent, targetIndex: number) => void;
|
52
|
+
* }} DraggableListSetup
|
53
|
+
*/
|
54
|
+
/**
|
55
|
+
* Function setting up drag logic for lists. Use only in setup function of components!
|
56
|
+
* This requires VcsListItems with unique keys (name property).
|
57
|
+
* @param {Object & { draggable: boolean }} props
|
58
|
+
* @param {import("vue").Ref<string>} query
|
59
|
+
* @param {(event: 'itemMoved', value: import("./VcsList.vue").ItemMovedEvent) => void} emit
|
60
|
+
* @returns {DraggableListSetup}
|
61
|
+
*/
|
62
|
+
export function setupDraggableList(props: Object & {
|
63
|
+
draggable: boolean;
|
64
|
+
}, query: import("vue").Ref<string>, emit: (event: 'itemMoved', value: import("./VcsList.vue").ItemMovedEvent) => void): DraggableListSetup;
|
65
|
+
export type SelectableListProps = Object & {
|
66
|
+
selectable?: boolean;
|
67
|
+
singleSelect?: boolean;
|
68
|
+
selectFunction?: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void;
|
69
|
+
modelValue?: Array<import("./VcsListItemComponent.vue").VcsListItem>;
|
70
|
+
};
|
71
|
+
export type SelectableListSetup = {
|
72
|
+
selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
|
73
|
+
select: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void;
|
74
|
+
selectionActions: Array<import("../../actions/actionHelper.js").VcsAction>;
|
75
|
+
};
|
76
|
+
export type DraggableListSetup = {
|
77
|
+
hovering: import("vue").Ref<number | undefined>;
|
78
|
+
dragging: import("vue").Ref<number | undefined>;
|
79
|
+
isDraggable: import("vue").ComputedRef<boolean>;
|
80
|
+
borderBottom: (index: number) => boolean;
|
81
|
+
borderTop: (index: number) => boolean;
|
82
|
+
dragStart: (e: MouseEvent, item: import('./VcsListItemComponent.vue').VcsListItem, index: number) => void;
|
83
|
+
dragOver: (e: MouseEvent, index: number) => void;
|
84
|
+
dragLeave: (e: MouseEvent) => void;
|
85
|
+
dragEnd: (e: MouseEvent) => void;
|
86
|
+
drop: (e: MouseEvent, targetIndex: number) => void;
|
87
|
+
};
|
@@ -0,0 +1,348 @@
|
|
1
|
+
import { computed, isReactive, reactive, ref, shallowRef, watch } from 'vue';
|
2
|
+
|
3
|
+
/**
|
4
|
+
* @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
|
5
|
+
* @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
|
6
|
+
* @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
|
7
|
+
* @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
|
8
|
+
*/
|
9
|
+
export function createSelectionActions(items, selected, emit) {
|
10
|
+
const selectAllAction = reactive({
|
11
|
+
name: 'list.selectAll',
|
12
|
+
tooltip: 'list.selectAll',
|
13
|
+
disabled: computed(() => items.value.length - selected.value.length < 1),
|
14
|
+
callback() {
|
15
|
+
const currentSelection = [...selected.value];
|
16
|
+
selected.value = items.value.filter((item) => !item.disabled);
|
17
|
+
|
18
|
+
selected.value.forEach((item) => {
|
19
|
+
if (item.selectionChanged && !currentSelection.includes(item)) {
|
20
|
+
item.selectionChanged(true);
|
21
|
+
}
|
22
|
+
});
|
23
|
+
emit('update:modelValue', selected.value);
|
24
|
+
},
|
25
|
+
});
|
26
|
+
|
27
|
+
const clearSelectionAction = reactive({
|
28
|
+
name: 'list.clearSelection',
|
29
|
+
tooltip: 'list.clearSelection',
|
30
|
+
disabled: computed(() => selected.value.length < 1),
|
31
|
+
callback() {
|
32
|
+
[...selected.value].forEach((item) => {
|
33
|
+
if (item.selectionChanged) {
|
34
|
+
item.selectionChanged(false);
|
35
|
+
}
|
36
|
+
});
|
37
|
+
selected.value = [];
|
38
|
+
emit('update:modelValue', selected.value);
|
39
|
+
},
|
40
|
+
});
|
41
|
+
|
42
|
+
return [selectAllAction, clearSelectionAction];
|
43
|
+
}
|
44
|
+
|
45
|
+
/**
|
46
|
+
* @typedef {Object & {
|
47
|
+
* selectable?: boolean,
|
48
|
+
* singleSelect?: boolean,
|
49
|
+
* selectFunction?: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
|
50
|
+
* modelValue?: Array<import("./VcsListItemComponent.vue").VcsListItem> }
|
51
|
+
* } SelectableListProps
|
52
|
+
* @property {boolean?} selectable
|
53
|
+
* @property {boolean?} singleSelect
|
54
|
+
* @property {(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void} selectFunction
|
55
|
+
* @property {Array<import("./VcsListItemComponent.vue").VcsListItem>?} modelValue
|
56
|
+
*/
|
57
|
+
|
58
|
+
/**
|
59
|
+
* @typedef {{
|
60
|
+
* selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>,
|
61
|
+
* select: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
|
62
|
+
* selectionActions:Array<import("../../actions/actionHelper.js").VcsAction>
|
63
|
+
* }} SelectableListSetup
|
64
|
+
*/
|
65
|
+
|
66
|
+
/**
|
67
|
+
* Function setting up selection logic for lists. Use only in setup function of components!
|
68
|
+
* This requires VcsListItems with unique keys (name property).
|
69
|
+
* @param {Object & SelectableListProps} props
|
70
|
+
* @param {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} renderingItems
|
71
|
+
* @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
|
72
|
+
* @returns {SelectableListSetup}
|
73
|
+
*/
|
74
|
+
export function setupSelectableList(props, renderingItems, emit) {
|
75
|
+
/** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
|
76
|
+
const selected = shallowRef([]);
|
77
|
+
|
78
|
+
watch(
|
79
|
+
props,
|
80
|
+
() => {
|
81
|
+
if (selected.value !== props.modelValue) {
|
82
|
+
selected.value = props.modelValue;
|
83
|
+
}
|
84
|
+
if (props.singleSelect && selected.value.length > 1) {
|
85
|
+
selected.value
|
86
|
+
.filter((i, index) => index && i.selectionChanged)
|
87
|
+
.forEach((i) => i.selectionChanged(false));
|
88
|
+
selected.value = [selected.value[0]];
|
89
|
+
emit('update:modelValue', selected);
|
90
|
+
}
|
91
|
+
if (!props.selectable && selected.value.length > 0) {
|
92
|
+
selected.value
|
93
|
+
.filter((i) => i.selectionChanged)
|
94
|
+
.forEach((i) => i.selectionChanged(false));
|
95
|
+
selected.value = [];
|
96
|
+
emit('update:modelValue', selected);
|
97
|
+
}
|
98
|
+
},
|
99
|
+
{ immediate: true, deep: false },
|
100
|
+
);
|
101
|
+
|
102
|
+
const selectionActions = createSelectionActions(
|
103
|
+
renderingItems,
|
104
|
+
selected,
|
105
|
+
emit,
|
106
|
+
);
|
107
|
+
|
108
|
+
let firstSelected;
|
109
|
+
|
110
|
+
return {
|
111
|
+
selected,
|
112
|
+
select:
|
113
|
+
props.selectFunction ||
|
114
|
+
((item, event) => {
|
115
|
+
if (!props.selectable || item.disabled) {
|
116
|
+
return;
|
117
|
+
}
|
118
|
+
if (!isReactive(item)) {
|
119
|
+
throw new Error('Trying to select an unreactive item');
|
120
|
+
}
|
121
|
+
if (Array.isArray(item.clickedCallbacks)) {
|
122
|
+
item.clickedCallbacks.forEach((cb) => cb(event));
|
123
|
+
}
|
124
|
+
if (props.singleSelect) {
|
125
|
+
if (selected.value[0] === item) {
|
126
|
+
item.selectionChanged?.(false);
|
127
|
+
selected.value = [];
|
128
|
+
firstSelected = null;
|
129
|
+
} else {
|
130
|
+
selected.value[0]?.selectionChanged?.(false);
|
131
|
+
item.selectionChanged?.(true);
|
132
|
+
selected.value = [item];
|
133
|
+
firstSelected = item;
|
134
|
+
}
|
135
|
+
} else if (event.shiftKey) {
|
136
|
+
let firstIndex = 0;
|
137
|
+
if (firstSelected) {
|
138
|
+
firstIndex = renderingItems.value.indexOf(firstSelected);
|
139
|
+
}
|
140
|
+
const currentIndex = renderingItems.value.indexOf(item);
|
141
|
+
if (firstIndex > -1 && currentIndex > -1) {
|
142
|
+
const currentSelection = [...selected.value];
|
143
|
+
selected.value = renderingItems.value.slice(
|
144
|
+
Math.min(firstIndex, currentIndex),
|
145
|
+
Math.max(firstIndex, currentIndex) + 1,
|
146
|
+
);
|
147
|
+
currentSelection.forEach((oldItem) => {
|
148
|
+
if (
|
149
|
+
oldItem.selectionChanged &&
|
150
|
+
!selected.value.includes(oldItem)
|
151
|
+
) {
|
152
|
+
oldItem.selectionChanged(false);
|
153
|
+
}
|
154
|
+
});
|
155
|
+
selected.value.forEach((newItem) => {
|
156
|
+
if (
|
157
|
+
newItem.selectionChanged &&
|
158
|
+
!currentSelection.includes(newItem)
|
159
|
+
) {
|
160
|
+
newItem.selectionChanged(true);
|
161
|
+
}
|
162
|
+
});
|
163
|
+
} else {
|
164
|
+
selected.value
|
165
|
+
.filter((i) => i !== item && i.selectionChanged)
|
166
|
+
.forEach((i) => i.selectionChanged(false));
|
167
|
+
selected.value = [];
|
168
|
+
firstSelected = null;
|
169
|
+
}
|
170
|
+
} else if (selected.value.includes(item)) {
|
171
|
+
if (event.ctrlKey) {
|
172
|
+
item.selectionChanged?.(false);
|
173
|
+
selected.value = selected.value.filter((i) => i !== item);
|
174
|
+
} else if (selected.value.length > 1) {
|
175
|
+
selected.value
|
176
|
+
.filter((i) => i !== item && i.selectionChanged)
|
177
|
+
.forEach((i) => {
|
178
|
+
i.selectionChanged(false);
|
179
|
+
});
|
180
|
+
selected.value = [item];
|
181
|
+
firstSelected = item;
|
182
|
+
} else {
|
183
|
+
item.selectionChanged?.(false);
|
184
|
+
selected.value = [];
|
185
|
+
firstSelected = null;
|
186
|
+
}
|
187
|
+
} else if (event.ctrlKey) {
|
188
|
+
item.selectionChanged?.(true);
|
189
|
+
selected.value = [...selected.value, item];
|
190
|
+
if (selected.value.length === 1) {
|
191
|
+
firstSelected = item;
|
192
|
+
}
|
193
|
+
} else {
|
194
|
+
selected.value
|
195
|
+
.filter((i) => i !== item && i.selectionChanged)
|
196
|
+
.forEach((i) => i.selectionChanged(false));
|
197
|
+
item.selectionChanged?.(true);
|
198
|
+
selected.value = [item];
|
199
|
+
firstSelected = item;
|
200
|
+
}
|
201
|
+
|
202
|
+
emit('update:modelValue', selected.value);
|
203
|
+
}),
|
204
|
+
selectionActions,
|
205
|
+
};
|
206
|
+
}
|
207
|
+
|
208
|
+
/**
|
209
|
+
* @typedef {{
|
210
|
+
* hovering: import("vue").Ref<number|undefined>,
|
211
|
+
* dragging: import("vue").Ref<number|undefined>,
|
212
|
+
* isDraggable: import("vue").ComputedRef<boolean>,
|
213
|
+
* borderBottom: (index: number) => boolean,
|
214
|
+
* borderTop: (index: number) => boolean,
|
215
|
+
* dragStart: (
|
216
|
+
* e: MouseEvent,
|
217
|
+
* item: import('./VcsListItemComponent.vue').VcsListItem,
|
218
|
+
* index: number,
|
219
|
+
* ) => void;
|
220
|
+
* dragOver: (e: MouseEvent, index: number) => void;
|
221
|
+
* dragLeave: (e: MouseEvent) => void;
|
222
|
+
* dragEnd: (e: MouseEvent) => void;
|
223
|
+
* drop: (e: MouseEvent, targetIndex: number) => void;
|
224
|
+
* }} DraggableListSetup
|
225
|
+
*/
|
226
|
+
|
227
|
+
/**
|
228
|
+
* Function setting up drag logic for lists. Use only in setup function of components!
|
229
|
+
* This requires VcsListItems with unique keys (name property).
|
230
|
+
* @param {Object & { draggable: boolean }} props
|
231
|
+
* @param {import("vue").Ref<string>} query
|
232
|
+
* @param {(event: 'itemMoved', value: import("./VcsList.vue").ItemMovedEvent) => void} emit
|
233
|
+
* @returns {DraggableListSetup}
|
234
|
+
*/
|
235
|
+
export function setupDraggableList(props, query, emit) {
|
236
|
+
/** @type {import("vue").Ref<number|undefined>} */
|
237
|
+
const hovering = ref(undefined);
|
238
|
+
/** @type {import("vue").Ref<number|undefined>} */
|
239
|
+
const dragging = ref(undefined);
|
240
|
+
|
241
|
+
/**
|
242
|
+
* @param {number} index
|
243
|
+
* @returns {boolean}
|
244
|
+
*/
|
245
|
+
function borderBottom(index) {
|
246
|
+
return (
|
247
|
+
dragging.value !== undefined &&
|
248
|
+
dragging.value < index &&
|
249
|
+
index === hovering.value
|
250
|
+
);
|
251
|
+
}
|
252
|
+
|
253
|
+
/**
|
254
|
+
* @param {number} index
|
255
|
+
* @returns {boolean}
|
256
|
+
*/
|
257
|
+
function borderTop(index) {
|
258
|
+
return (
|
259
|
+
dragging.value !== undefined &&
|
260
|
+
dragging.value > index &&
|
261
|
+
index === hovering.value
|
262
|
+
);
|
263
|
+
}
|
264
|
+
|
265
|
+
/**
|
266
|
+
* @type {import("./VcsListItemComponent.vue").VcsListItem|null}
|
267
|
+
*/
|
268
|
+
let draggedItem = null;
|
269
|
+
|
270
|
+
/**
|
271
|
+
* @type {import("vue").ComputedRef<boolean>}
|
272
|
+
*/
|
273
|
+
const isDraggable = computed(() => {
|
274
|
+
return !query.value && props.draggable;
|
275
|
+
});
|
276
|
+
|
277
|
+
/**
|
278
|
+
* @param {MouseEvent} e
|
279
|
+
* @param {number} targetIndex
|
280
|
+
*/
|
281
|
+
function drop(e, targetIndex) {
|
282
|
+
if (isDraggable.value) {
|
283
|
+
if (draggedItem !== null && targetIndex !== undefined) {
|
284
|
+
emit('itemMoved', { item: draggedItem, targetIndex });
|
285
|
+
}
|
286
|
+
draggedItem = null;
|
287
|
+
dragging.value = undefined;
|
288
|
+
hovering.value = undefined;
|
289
|
+
}
|
290
|
+
}
|
291
|
+
|
292
|
+
/**
|
293
|
+
* @param {MouseEvent} e
|
294
|
+
* @param {import("./VcsListItemComponent.vue").VcsListItem} item
|
295
|
+
* @param {number} index
|
296
|
+
*/
|
297
|
+
function dragStart(e, item, index) {
|
298
|
+
e.stopPropagation();
|
299
|
+
if (isDraggable.value) {
|
300
|
+
dragging.value = index;
|
301
|
+
draggedItem = item;
|
302
|
+
e.dataTransfer.effectAllowed = 'move';
|
303
|
+
}
|
304
|
+
}
|
305
|
+
|
306
|
+
/**
|
307
|
+
* @param {MouseEvent} e
|
308
|
+
* @param {number} index
|
309
|
+
*/
|
310
|
+
function dragOver(e, index) {
|
311
|
+
e.stopPropagation();
|
312
|
+
e.preventDefault();
|
313
|
+
if (isDraggable.value) {
|
314
|
+
hovering.value = index;
|
315
|
+
}
|
316
|
+
}
|
317
|
+
|
318
|
+
/**
|
319
|
+
* @param {MouseEvent} e
|
320
|
+
*/
|
321
|
+
function dragLeave(e) {
|
322
|
+
e.stopPropagation();
|
323
|
+
e.preventDefault();
|
324
|
+
hovering.value = undefined;
|
325
|
+
}
|
326
|
+
|
327
|
+
/**
|
328
|
+
* @param {MouseEvent} e
|
329
|
+
*/
|
330
|
+
function dragEnd(e) {
|
331
|
+
e.stopPropagation();
|
332
|
+
dragging.value = undefined;
|
333
|
+
hovering.value = undefined;
|
334
|
+
}
|
335
|
+
|
336
|
+
return {
|
337
|
+
hovering,
|
338
|
+
dragging,
|
339
|
+
isDraggable,
|
340
|
+
borderBottom,
|
341
|
+
borderTop,
|
342
|
+
dragStart,
|
343
|
+
dragOver,
|
344
|
+
dragLeave,
|
345
|
+
dragEnd,
|
346
|
+
drop,
|
347
|
+
};
|
348
|
+
}
|