@vcmap/ui 6.1.0-rc.6 → 6.1.0-rc.7
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/cluster.config.json +4 -13
- package/config/dev.config.json +6 -3
- package/config/splashscreen.config.json +6 -10
- package/dist/assets/{cesium-f5e8e354.js → cesium-6c6aa853.js} +53 -23
- package/dist/assets/cesium.js +1 -1
- package/dist/assets/{core-c134a524.js → core-52c2ef11.js} +5982 -5411
- package/dist/assets/core.js +1 -1
- package/dist/assets/{ol-2752311f.js → ol-b0589b0c.js} +87 -37
- package/dist/assets/ol.js +1 -1
- package/dist/assets/ui-dccb9009.css +1 -0
- package/dist/assets/{ui-83514586.js → ui-dccb9009.js} +16051 -15479
- package/dist/assets/ui.js +1 -1
- package/dist/assets/vue.js +1 -1
- package/dist/assets/{vuetify-5dbe2644.css → vuetify-43a20e18.css} +1 -1
- package/dist/assets/{vuetify-5dbe2644.js → vuetify-43a20e18.js} +5004 -4958
- package/dist/assets/vuetify.js +1 -1
- package/dist/index.html +1 -1
- package/index.d.ts +2 -0
- package/index.html +1 -1
- package/index.js +1 -0
- package/package.json +6 -3
- package/plugins/@vcmap-show-case/theming-example/src/index.js +1 -0
- package/src/application/MapsGroupMobileMenu.vue +105 -0
- package/src/application/MapsGroupMobileMenu.vue.d.ts +7 -0
- package/src/application/VcsApp.vue +48 -24
- package/src/application/VcsApp.vue.d.ts +5 -2
- package/src/application/VcsContainer.vue +35 -13
- package/src/application/VcsContainer.vue.d.ts +3 -0
- package/src/application/VcsMobileMenuList.vue +118 -0
- package/src/application/VcsMobileMenuList.vue.d.ts +2 -0
- package/src/application/VcsNavbar.vue +12 -3
- package/src/application/VcsNavbarMobile.vue +218 -0
- package/src/application/VcsNavbarMobile.vue.d.ts +43 -0
- package/src/application/VcsSplashScreen.vue +39 -7
- package/src/application/VcsSplashScreen.vue.d.ts +6 -0
- package/src/application/uiConfigHelper.d.ts +12 -0
- package/src/application/uiConfigHelper.js +37 -0
- package/src/components/buttons/VcsToolButton.vue +8 -1
- package/src/components/buttons/VcsToolButton.vue.d.ts +1 -0
- package/src/components/form-output/VcsTemplateMarkdown.vue +43 -0
- package/src/components/form-output/VcsTemplateMarkdown.vue.d.ts +9 -0
- package/src/components/lists/VcsTreeNode.vue +6 -1
- package/src/components/lists/VcsTreeview.vue +36 -2
- package/src/components/lists/VcsTreeview.vue.d.ts +1 -0
- package/src/components/lists/VcsTreeviewTitle.vue +8 -1
- package/src/contentTree/contentTreeCollection.js +1 -0
- package/src/contentTree/flightContentTreeItem.d.ts +8 -1
- package/src/contentTree/flightContentTreeItem.js +26 -3
- package/src/contentTree/groupContentTreeItem.d.ts +16 -0
- package/src/contentTree/groupContentTreeItem.js +31 -1
- package/src/contentTree/layerContentTreeItem.d.ts +8 -1
- package/src/contentTree/layerContentTreeItem.js +25 -3
- package/src/contentTree/layerGroupContentTreeItem.d.ts +6 -0
- package/src/contentTree/layerGroupContentTreeItem.js +27 -3
- package/src/contentTree/obliqueCollectionContentTreeItem.d.ts +6 -0
- package/src/contentTree/obliqueCollectionContentTreeItem.js +22 -2
- package/src/featureInfo/BalloonComponent.vue +6 -6
- package/src/featureInfo/MarkdownBalloonComponent.vue +3 -9
- package/src/featureInfo/MarkdownBalloonComponent.vue.d.ts +1 -11
- package/src/featureInfo/balloonHelper.js +1 -1
- package/src/featureInfo/featureInfo.js +2 -3
- package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts +0 -6
- package/src/featureInfo/markdownBalloonFeatureInfoView.js +5 -14
- package/src/featureInfo/markdownFeatureInfoView.d.ts +2 -8
- package/src/featureInfo/markdownFeatureInfoView.js +6 -15
- package/src/i18n/de.d.ts +58 -50
- package/src/i18n/de.js +5 -0
- package/src/i18n/en.d.ts +58 -50
- package/src/i18n/en.js +5 -0
- package/src/legend/VcsLegend.vue +21 -2
- package/src/legend/VcsLegend.vue.d.ts +1 -0
- package/src/legend/legendHelper.d.ts +0 -13
- package/src/legend/legendHelper.js +3 -27
- package/src/manager/navbarManager.d.ts +14 -1
- package/src/manager/navbarManager.js +22 -2
- package/src/manager/toolbox/GroupToolboxComponent.vue +16 -3
- package/src/manager/toolbox/GroupToolboxComponent.vue.d.ts +1 -0
- package/src/manager/toolbox/SelectToolboxComponent.vue +15 -3
- package/src/manager/toolbox/SelectToolboxComponent.vue.d.ts +1 -0
- package/src/manager/toolbox/ToolboxManagerComponent.vue +44 -14
- package/src/manager/toolbox/ToolboxManagerComponent.vue.d.ts +9 -0
- package/src/manager/toolbox/toolboxManager.d.ts +2 -1
- package/src/manager/toolbox/toolboxManager.js +13 -1
- package/src/manager/window/WindowComponent.vue +3 -2
- package/src/manager/window/WindowComponentHeader.vue +9 -1
- package/src/manager/window/WindowComponentHeader.vue.d.ts +1 -0
- package/src/manager/window/WindowManager.vue +175 -30
- package/src/manager/window/WindowManager.vue.d.ts +5 -0
- package/src/navigation/MapNavigation.vue +27 -19
- package/src/navigation/MapNavigation.vue.d.ts +1 -0
- package/src/search/ResultsComponent.vue +44 -17
- package/src/search/ResultsComponent.vue.d.ts +11 -1
- package/src/search/SearchComponent.vue +60 -9
- package/src/search/SearchComponent.vue.d.ts +2 -0
- package/src/vuePlugins/vuetify.d.ts +4 -0
- package/src/vuePlugins/vuetify.js +49 -3
- package/dist/assets/ui-83514586.css +0 -1
- /package/dist/assets/{vue-f8b1b5f8.js → vue-f7a0b088.js} +0 -0
@@ -61,16 +61,7 @@ export function getImageSrcFromShape(image: import("ol/style/Image.js").Options)
|
|
61
61
|
* @property {string} title - layer or entry name
|
62
62
|
* @property {boolean} [open=true] - panel state of entry
|
63
63
|
* @property {Array<LegendItem>} legend - legend properties
|
64
|
-
* @property {Array<import("../actions/actionHelper.js").VcsAction>} actions - popout actions
|
65
64
|
*/
|
66
|
-
/**
|
67
|
-
* creates a LegendEntry with title, options and optionally popout action to the entries array
|
68
|
-
* @param {string} key - layerName
|
69
|
-
* @param {string} title
|
70
|
-
* @param {Array<LegendItem>} legend
|
71
|
-
* @returns {LegendEntry}
|
72
|
-
*/
|
73
|
-
export function createLegendEntry(key: string, title: string, legend: Array<LegendItem>): LegendEntry;
|
74
65
|
/**
|
75
66
|
*
|
76
67
|
* @param {import("../vcsUiApp.js").default} app
|
@@ -165,8 +156,4 @@ export type LegendEntry = {
|
|
165
156
|
* - legend properties
|
166
157
|
*/
|
167
158
|
legend: Array<LegendItem>;
|
168
|
-
/**
|
169
|
-
* - popout actions
|
170
|
-
*/
|
171
|
-
actions: Array<import("../actions/actionHelper.js").VcsAction>;
|
172
159
|
};
|
@@ -107,31 +107,7 @@ export function getImageSrcFromShape(image) {
|
|
107
107
|
* @property {string} title - layer or entry name
|
108
108
|
* @property {boolean} [open=true] - panel state of entry
|
109
109
|
* @property {Array<LegendItem>} legend - legend properties
|
110
|
-
|
111
|
-
*/
|
112
|
-
|
113
|
-
/**
|
114
|
-
* creates a LegendEntry with title, options and optionally popout action to the entries array
|
115
|
-
* @param {string} key - layerName
|
116
|
-
* @param {string} title
|
117
|
-
* @param {Array<LegendItem>} legend
|
118
|
-
* @returns {LegendEntry}
|
119
|
-
*/
|
120
|
-
export function createLegendEntry(key, title, legend) {
|
121
|
-
const actions = [];
|
122
|
-
legend.forEach((item) => {
|
123
|
-
// XXX only one popout button allowed. Rethink if use case for multiple popout buttons comes up.
|
124
|
-
if (item.src && item.popoutBtn && actions.length < 1) {
|
125
|
-
actions.push({
|
126
|
-
name: 'legendPopoutAction',
|
127
|
-
icon: 'mdi-open-in-new',
|
128
|
-
title: 'legend.openInNew',
|
129
|
-
callback: () => window.open(item.src, '_blank'),
|
130
|
-
});
|
131
|
-
}
|
132
|
-
});
|
133
|
-
return { key, title, legend, actions, open: true };
|
134
|
-
}
|
110
|
+
*/
|
135
111
|
|
136
112
|
/**
|
137
113
|
*
|
@@ -176,7 +152,7 @@ export function getLegendEntries(app) {
|
|
176
152
|
const legend =
|
177
153
|
layer.style?.properties?.legend ?? layer.properties?.legend;
|
178
154
|
if (legend) {
|
179
|
-
const legendEntry =
|
155
|
+
const legendEntry = { key, title, legend, open: true };
|
180
156
|
entries.unshift(legendEntry);
|
181
157
|
}
|
182
158
|
if (layer.styleChanged) {
|
@@ -214,7 +190,7 @@ export function getLegendEntries(app) {
|
|
214
190
|
const title = group.properties.title || group.name;
|
215
191
|
const { legend } = group.properties;
|
216
192
|
if (!entries.some(({ key }) => key === group.name)) {
|
217
|
-
const legendEntry =
|
193
|
+
const legendEntry = { key: group.name, title, legend, open: true };
|
218
194
|
entries.unshift(legendEntry);
|
219
195
|
}
|
220
196
|
}
|
@@ -16,6 +16,7 @@ export function sortByOwner(ownerA: string | symbol, ownerB: string | symbol, or
|
|
16
16
|
*/
|
17
17
|
export function getActionsByLocation(buttonComponents: Array<import("./buttonManager.js").ButtonComponent>, location: ButtonLocation, order?: string[] | undefined, compareFn?: ((arg0: import("./buttonManager.js").ButtonComponent, arg1: import("./buttonManager.js").ButtonComponent) => number) | undefined): Array<import("../actions/actionHelper.js").VcsAction>;
|
18
18
|
export const locationSymbol: unique symbol;
|
19
|
+
export const deviceSymbol: unique symbol;
|
19
20
|
/**
|
20
21
|
* *
|
21
22
|
*/
|
@@ -30,9 +31,20 @@ export namespace ButtonLocation {
|
|
30
31
|
}
|
31
32
|
export default NavbarManager;
|
32
33
|
export type INavbarManager = import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent, import("./buttonManager.js").ButtonComponentOptions>;
|
34
|
+
export type DeviceOptions = {
|
35
|
+
desktop: boolean | null;
|
36
|
+
tablet: boolean | null;
|
37
|
+
mobile: boolean | null;
|
38
|
+
};
|
33
39
|
/**
|
34
40
|
* @typedef {import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
|
35
41
|
*/
|
42
|
+
/**
|
43
|
+
* @typedef {Object} DeviceOptions
|
44
|
+
* @property {boolean?} desktop
|
45
|
+
* @property {boolean?} tablet
|
46
|
+
* @property {boolean?} mobile
|
47
|
+
*/
|
36
48
|
/**
|
37
49
|
* @class NavbarManager
|
38
50
|
* @description Manages a set of Map Buttons in the Navbar
|
@@ -44,11 +56,12 @@ declare class NavbarManager extends ButtonManager implements INavbarManager {
|
|
44
56
|
* @param {import("./buttonManager.js").ButtonComponentOptions} buttonComponentOptions
|
45
57
|
* @param {string|symbol} owner pluginName or vcsAppSymbol
|
46
58
|
* @param {ButtonLocation} location Button render position
|
59
|
+
* @param {DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
|
47
60
|
* @throws {Error} if a buttonComponent with the same ID has already been added
|
48
61
|
* @returns {import("./buttonManager.js").ButtonComponent}
|
49
62
|
*/
|
50
63
|
// @ts-ignore
|
51
|
-
add(buttonComponentOptions: import("./buttonManager.js").ButtonComponentOptions, owner: string | symbol, location: ButtonLocation): import("./buttonManager.js").ButtonComponent;
|
64
|
+
add(buttonComponentOptions: import("./buttonManager.js").ButtonComponentOptions, owner: string | symbol, location: ButtonLocation, device?: DeviceOptions | undefined): import("./buttonManager.js").ButtonComponent;
|
52
65
|
/**
|
53
66
|
* Toggles a button of provided id by executing its callback.
|
54
67
|
* Use active flag to force a state to be applied.
|
@@ -1,8 +1,9 @@
|
|
1
|
-
import { check, ofEnum } from '@vcsuite/check';
|
1
|
+
import { check, ofEnum, optional } from '@vcsuite/check';
|
2
2
|
import ButtonManager, { sortByWeight } from './buttonManager.js';
|
3
3
|
import { vcsAppSymbol } from '../pluginHelper.js';
|
4
4
|
|
5
5
|
export const locationSymbol = Symbol('location');
|
6
|
+
export const deviceSymbol = Symbol('device');
|
6
7
|
|
7
8
|
/**
|
8
9
|
* sorts by owner and optionally plugin order
|
@@ -74,6 +75,13 @@ export const ButtonLocation = {
|
|
74
75
|
* @typedef {import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
|
75
76
|
*/
|
76
77
|
|
78
|
+
/**
|
79
|
+
* @typedef {Object} DeviceOptions
|
80
|
+
* @property {boolean?} desktop
|
81
|
+
* @property {boolean?} tablet
|
82
|
+
* @property {boolean?} mobile
|
83
|
+
*/
|
84
|
+
|
77
85
|
/**
|
78
86
|
* @class NavbarManager
|
79
87
|
* @description Manages a set of Map Buttons in the Navbar
|
@@ -85,13 +93,25 @@ class NavbarManager extends ButtonManager {
|
|
85
93
|
* @param {import("./buttonManager.js").ButtonComponentOptions} buttonComponentOptions
|
86
94
|
* @param {string|symbol} owner pluginName or vcsAppSymbol
|
87
95
|
* @param {ButtonLocation} location Button render position
|
96
|
+
* @param {DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
|
88
97
|
* @throws {Error} if a buttonComponent with the same ID has already been added
|
89
98
|
* @returns {import("./buttonManager.js").ButtonComponent}
|
90
99
|
*/
|
91
|
-
add(
|
100
|
+
add(
|
101
|
+
buttonComponentOptions,
|
102
|
+
owner,
|
103
|
+
location,
|
104
|
+
device = { desktop: true, tablet: true },
|
105
|
+
) {
|
92
106
|
check(location, ofEnum(ButtonLocation));
|
107
|
+
check(device, {
|
108
|
+
desktop: optional(Boolean),
|
109
|
+
tablet: optional(Boolean),
|
110
|
+
mobile: optional(Boolean),
|
111
|
+
});
|
93
112
|
const buttonComponent = super.add(buttonComponentOptions, owner);
|
94
113
|
buttonComponent[locationSymbol] = location;
|
114
|
+
buttonComponent[deviceSymbol] = device;
|
95
115
|
return buttonComponent;
|
96
116
|
}
|
97
117
|
|
@@ -3,8 +3,8 @@
|
|
3
3
|
<v-menu
|
4
4
|
v-model="open"
|
5
5
|
@update:model-value="$emit('toggle', open)"
|
6
|
-
location="bottom center"
|
7
|
-
z-index="
|
6
|
+
:location="xs ? 'top center' : 'bottom center'"
|
7
|
+
:z-index="xs ? 2 : undefined"
|
8
8
|
>
|
9
9
|
<template #activator="{ props }">
|
10
10
|
<VcsToolButton
|
@@ -22,7 +22,13 @@
|
|
22
22
|
</template>
|
23
23
|
|
24
24
|
<v-toolbar
|
25
|
-
class="vcs-toolbox-toolbar--secondary mx-auto
|
25
|
+
class="vcs-toolbox-toolbar--secondary mx-auto elevation-4 opacity-80 px-1"
|
26
|
+
:class="{
|
27
|
+
marginToTop: !xs,
|
28
|
+
marginToBottom: xs,
|
29
|
+
'rounded-t': xs,
|
30
|
+
'rounded-b': !xs,
|
31
|
+
}"
|
26
32
|
:height="toolboxHeight"
|
27
33
|
>
|
28
34
|
<v-toolbar-items class="w-100">
|
@@ -52,10 +58,14 @@
|
|
52
58
|
.marginToTop {
|
53
59
|
margin-top: 3px;
|
54
60
|
}
|
61
|
+
.marginToBottom {
|
62
|
+
margin-bottom: 3px;
|
63
|
+
}
|
55
64
|
</style>
|
56
65
|
<script>
|
57
66
|
import { computed, ref } from 'vue';
|
58
67
|
import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
|
68
|
+
import { useDisplay } from 'vuetify';
|
59
69
|
import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
|
60
70
|
import { getComponentsByOrder } from './toolboxManager.js';
|
61
71
|
import { useFontSize } from '../../vuePlugins/vuetify.js';
|
@@ -104,11 +114,14 @@
|
|
104
114
|
return fontSize.value * 3 + 1;
|
105
115
|
});
|
106
116
|
|
117
|
+
const { xs } = useDisplay();
|
118
|
+
|
107
119
|
return {
|
108
120
|
open,
|
109
121
|
orderedButtons,
|
110
122
|
hasActiveAction,
|
111
123
|
toolboxHeight,
|
124
|
+
xs,
|
112
125
|
};
|
113
126
|
},
|
114
127
|
};
|
@@ -8,6 +8,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
8
8
|
orderedButtons: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
|
9
9
|
hasActiveAction: import("vue").ComputedRef<boolean>;
|
10
10
|
toolboxHeight: import("vue").ComputedRef<number>;
|
11
|
+
xs: import("vue").Ref<boolean>;
|
11
12
|
}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
12
13
|
group: {
|
13
14
|
type: ObjectConstructor;
|
@@ -24,9 +24,9 @@
|
|
24
24
|
/>
|
25
25
|
<v-menu
|
26
26
|
v-model="open"
|
27
|
-
location="bottom center"
|
27
|
+
:location="xs ? 'top center' : 'bottom center'"
|
28
28
|
@update:model-value="$emit('toggle', open)"
|
29
|
-
z-index="
|
29
|
+
:z-index="xs ? 2 : undefined"
|
30
30
|
>
|
31
31
|
<template #activator="{ props }">
|
32
32
|
<VcsToolButton
|
@@ -42,7 +42,13 @@
|
|
42
42
|
</template>
|
43
43
|
|
44
44
|
<v-toolbar
|
45
|
-
class="vcs-toolbox-2 mx-auto
|
45
|
+
class="vcs-toolbox-2 mx-auto elevation-4 opacity-80 px-1"
|
46
|
+
:class="{
|
47
|
+
marginToTop: !xs,
|
48
|
+
marginToBottom: xs,
|
49
|
+
'rounded-t': xs,
|
50
|
+
'rounded-b': !xs,
|
51
|
+
}"
|
46
52
|
:height="toolboxHeight"
|
47
53
|
>
|
48
54
|
<v-toolbar-items class="w-100">
|
@@ -66,10 +72,14 @@
|
|
66
72
|
.marginToTop {
|
67
73
|
margin-top: 3px;
|
68
74
|
}
|
75
|
+
.marginToBottom {
|
76
|
+
margin-bottom: 3px;
|
77
|
+
}
|
69
78
|
</style>
|
70
79
|
<script>
|
71
80
|
import { ref, computed } from 'vue';
|
72
81
|
import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
|
82
|
+
import { useDisplay } from 'vuetify';
|
73
83
|
import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
|
74
84
|
import { useFontSize } from '../../vuePlugins/vuetify.js';
|
75
85
|
|
@@ -99,9 +109,11 @@
|
|
99
109
|
const toolboxHeight = computed(() => {
|
100
110
|
return fontSize.value * 3 + 1;
|
101
111
|
});
|
112
|
+
const { xs } = useDisplay();
|
102
113
|
return {
|
103
114
|
open,
|
104
115
|
toolboxHeight,
|
116
|
+
xs,
|
105
117
|
};
|
106
118
|
},
|
107
119
|
};
|
@@ -6,6 +6,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
6
6
|
}, {
|
7
7
|
open: import("vue").Ref<boolean>;
|
8
8
|
toolboxHeight: import("vue").ComputedRef<number>;
|
9
|
+
xs: import("vue").Ref<boolean>;
|
9
10
|
}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
10
11
|
group: {
|
11
12
|
type: ObjectConstructor;
|
@@ -1,13 +1,15 @@
|
|
1
1
|
<template>
|
2
2
|
<v-toolbar
|
3
|
-
v-if="toolboxOpen && orderedGroups.length > 0
|
3
|
+
v-if="toolboxOpen && orderedGroups.length > 0"
|
4
4
|
class="vcs-toolbox mx-auto elevation-4 opacity-80 toolbox-manager-component"
|
5
5
|
:class="{
|
6
|
-
'rounded-b': !open,
|
6
|
+
'rounded-b': !open && !xs,
|
7
|
+
'rounded-t': xs,
|
7
8
|
'vcs-toolbox__secondary': !isDefaultToolbox,
|
9
|
+
mobileToolbox: xs,
|
8
10
|
}"
|
9
11
|
:height="toolboxHeight"
|
10
|
-
:style="{ zIndex }"
|
12
|
+
:style="{ zIndex: xs ? zIndexMobile : zIndex }"
|
11
13
|
@click.stop="bringToTop"
|
12
14
|
>
|
13
15
|
<v-toolbar-items class="w-100 px-4 gc-1">
|
@@ -20,13 +22,19 @@
|
|
20
22
|
v-if="group.type === ToolboxType.GROUP"
|
21
23
|
:group="group"
|
22
24
|
@toggle="openGroup"
|
23
|
-
@click="
|
25
|
+
@click="
|
26
|
+
bringToTop;
|
27
|
+
xs && toolboxToggleAction.callback();
|
28
|
+
"
|
24
29
|
/>
|
25
30
|
<ToolboxActionSelect
|
26
31
|
v-else-if="group.type === ToolboxType.SELECT"
|
27
32
|
:group="group"
|
28
33
|
@toggle="openGroup"
|
29
|
-
@click="
|
34
|
+
@click="
|
35
|
+
bringToTop;
|
36
|
+
xs && toolboxToggleAction.callback();
|
37
|
+
"
|
30
38
|
/>
|
31
39
|
<VcsToolButton
|
32
40
|
v-else
|
@@ -37,6 +45,7 @@
|
|
37
45
|
:disabled="group.action.disabled"
|
38
46
|
@click.stop="
|
39
47
|
bringToTop();
|
48
|
+
xs && toolboxToggleAction.callback();
|
40
49
|
group.action.callback($event);
|
41
50
|
"
|
42
51
|
v-bind="{ ...$attrs }"
|
@@ -61,10 +70,16 @@
|
|
61
70
|
margin-top: 2px;
|
62
71
|
width: fit-content;
|
63
72
|
}
|
73
|
+
.mobileToolbox {
|
74
|
+
bottom: 0px !important;
|
75
|
+
position: absolute !important;
|
76
|
+
left: 50% !important;
|
77
|
+
transform: translateX(-50%) !important;
|
78
|
+
}
|
64
79
|
</style>
|
65
80
|
|
66
81
|
<script>
|
67
|
-
import { inject, ref, computed, watch, onUnmounted } from 'vue';
|
82
|
+
import { inject, ref, computed, watch, onUnmounted, reactive } from 'vue';
|
68
83
|
import { useDisplay } from 'vuetify';
|
69
84
|
import { VToolbar, VToolbarItems } from 'vuetify/components';
|
70
85
|
import {
|
@@ -76,7 +91,7 @@
|
|
76
91
|
import ToolboxActionGroup from './GroupToolboxComponent.vue';
|
77
92
|
import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
|
78
93
|
import { vcsAppSymbol } from '../../pluginHelper.js';
|
79
|
-
import { ButtonLocation } from '../navbarManager.js';
|
94
|
+
import { ButtonLocation, deviceSymbol } from '../navbarManager.js';
|
80
95
|
import { useFontSize } from '../../vuePlugins/vuetify.js';
|
81
96
|
|
82
97
|
/**
|
@@ -114,6 +129,8 @@
|
|
114
129
|
setup() {
|
115
130
|
const app = inject('vcsApp');
|
116
131
|
|
132
|
+
const { smAndUp, xs, sm, mdAndUp } = useDisplay();
|
133
|
+
|
117
134
|
const groups = computed(() => {
|
118
135
|
return app.toolboxManager.componentIds.map((id) =>
|
119
136
|
app.toolboxManager.get(id),
|
@@ -130,6 +147,8 @@
|
|
130
147
|
toolboxComponentId,
|
131
148
|
vcsAppSymbol,
|
132
149
|
);
|
150
|
+
// The zIndex of the mobile toolbox is two higher than the desktop toolbox because it needs to be above the windows
|
151
|
+
const zIndexMobile = computed(() => zIndex.value + 2);
|
133
152
|
|
134
153
|
/**
|
135
154
|
* To be rendered in Toolbox components must meet certain conditions:
|
@@ -139,13 +158,18 @@
|
|
139
158
|
* @param {SingleToolboxComponent|SelectToolboxComponent|GroupToolboxComponent} c
|
140
159
|
* @returns {boolean}
|
141
160
|
*/
|
161
|
+
|
142
162
|
function filterFunc(c) {
|
143
163
|
return (
|
144
|
-
c.type === ToolboxType.SINGLE ||
|
145
|
-
|
146
|
-
|
164
|
+
(c.type === ToolboxType.SINGLE ||
|
165
|
+
c?.action?.tools?.length > 1 ||
|
166
|
+
c.buttonManager?.componentIds?.length > 0) &&
|
167
|
+
((xs.value === true && c[deviceSymbol]?.mobile === true) ||
|
168
|
+
(sm.value === true && c[deviceSymbol]?.tablet === true) ||
|
169
|
+
(mdAndUp.value === true && c[deviceSymbol]?.desktop === true))
|
147
170
|
);
|
148
171
|
}
|
172
|
+
|
149
173
|
const orderedGroups = computed(() =>
|
150
174
|
getComponentsByOrder(groups.value)
|
151
175
|
.filter((comp) => comp.toolboxNames.includes(toolboxName.value))
|
@@ -153,16 +177,19 @@
|
|
153
177
|
);
|
154
178
|
|
155
179
|
const toolboxOpen = app.toolboxManager.open;
|
156
|
-
|
180
|
+
if (xs.value) {
|
181
|
+
toolboxOpen.value = false;
|
182
|
+
}
|
183
|
+
const toolboxToggleAction = reactive({
|
157
184
|
name: 'toolboxToggleAction',
|
158
185
|
icon: '$vcsTools',
|
159
186
|
title: 'toolbox.title',
|
160
|
-
active:
|
187
|
+
active: toolboxOpen.value,
|
161
188
|
callback() {
|
162
189
|
this.active = !this.active;
|
163
190
|
toolboxOpen.value = this.active;
|
164
191
|
},
|
165
|
-
};
|
192
|
+
});
|
166
193
|
|
167
194
|
function handleToolboxButton() {
|
168
195
|
if (orderedGroups.value.length > 0) {
|
@@ -174,6 +201,7 @@
|
|
174
201
|
},
|
175
202
|
vcsAppSymbol,
|
176
203
|
ButtonLocation.TOOL,
|
204
|
+
{ desktop: true, tablet: true, mobile: true },
|
177
205
|
);
|
178
206
|
}
|
179
207
|
} else {
|
@@ -201,7 +229,6 @@
|
|
201
229
|
app.windowManager.bringWindowToTop(toolboxComponentId);
|
202
230
|
};
|
203
231
|
|
204
|
-
const { smAndUp } = useDisplay();
|
205
232
|
const fontSize = useFontSize();
|
206
233
|
const toolboxHeight = computed(() => {
|
207
234
|
return fontSize.value * 3 + 1;
|
@@ -209,8 +236,10 @@
|
|
209
236
|
return {
|
210
237
|
smAndUp,
|
211
238
|
toolboxOpen,
|
239
|
+
toolboxToggleAction,
|
212
240
|
orderedGroups,
|
213
241
|
zIndex,
|
242
|
+
zIndexMobile,
|
214
243
|
isDefaultToolbox: computed(
|
215
244
|
() => toolboxName.value === defaultToolboxName,
|
216
245
|
),
|
@@ -224,6 +253,7 @@
|
|
224
253
|
}
|
225
254
|
},
|
226
255
|
toolboxHeight,
|
256
|
+
xs,
|
227
257
|
};
|
228
258
|
},
|
229
259
|
};
|
@@ -12,8 +12,16 @@ export const toolboxComponentId: "toolbox";
|
|
12
12
|
declare const _default: import("vue").DefineComponent<{}, {
|
13
13
|
smAndUp: import("vue").Ref<boolean>;
|
14
14
|
toolboxOpen: any;
|
15
|
+
toolboxToggleAction: {
|
16
|
+
name: string;
|
17
|
+
icon: string;
|
18
|
+
title: string;
|
19
|
+
active: any;
|
20
|
+
callback: () => void;
|
21
|
+
};
|
15
22
|
orderedGroups: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
|
16
23
|
zIndex: any;
|
24
|
+
zIndexMobile: import("vue").ComputedRef<any>;
|
17
25
|
isDefaultToolbox: import("vue").ComputedRef<boolean>;
|
18
26
|
ToolboxType: {
|
19
27
|
SINGLE: number;
|
@@ -24,6 +32,7 @@ declare const _default: import("vue").DefineComponent<{}, {
|
|
24
32
|
bringToTop: () => void;
|
25
33
|
openGroup(group: any): void;
|
26
34
|
toolboxHeight: import("vue").ComputedRef<number>;
|
35
|
+
xs: import("vue").Ref<boolean>;
|
27
36
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
28
37
|
export default _default;
|
29
38
|
export type ToolboxButtonGroup = {
|
@@ -159,11 +159,12 @@ declare class ToolboxManager implements IToolboxManager {
|
|
159
159
|
* adds a ToolboxComponent
|
160
160
|
* @param {SingleToolboxComponentOptions|SelectToolboxComponentOptions|GroupToolboxComponentOptions} toolboxComponentOptions
|
161
161
|
* @param {string|symbol} owner pluginName or vcsAppSymbol
|
162
|
+
* @param {import('../navbarManager.js').DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
|
162
163
|
* @throws {Error} if a toolboxComponent with the same ID has already been added
|
163
164
|
* @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
|
164
165
|
*/
|
165
166
|
// @ts-ignore
|
166
|
-
add(toolboxComponentOptions: SingleToolboxComponentOptions | SelectToolboxComponentOptions | GroupToolboxComponentOptions, owner: string | symbol): SingleToolboxComponent | SelectToolboxComponent | import("vue").ShallowReactive<GroupToolboxComponent>;
|
167
|
+
add(toolboxComponentOptions: SingleToolboxComponentOptions | SelectToolboxComponentOptions | GroupToolboxComponentOptions, owner: string | symbol, device?: import("../navbarManager.js").DeviceOptions | undefined): SingleToolboxComponent | SelectToolboxComponent | import("vue").ShallowReactive<GroupToolboxComponent>;
|
167
168
|
/**
|
168
169
|
* removes all {@link ToolboxComponent}s of a specific owner and fires removed Events
|
169
170
|
* @param {string|vcsAppSymbol} owner
|
@@ -6,6 +6,7 @@ import { vcsAppSymbol } from '../../pluginHelper.js';
|
|
6
6
|
import ButtonManager from '../buttonManager.js';
|
7
7
|
import { ActionPattern } from '../../components/lists/VcsActionList.vue';
|
8
8
|
import { getActionFromOptions } from '../../actions/actionHelper.js';
|
9
|
+
import { deviceSymbol } from '../navbarManager.js';
|
9
10
|
|
10
11
|
/**
|
11
12
|
* Possible group types. Define behaviour of group:
|
@@ -287,12 +288,22 @@ class ToolboxManager {
|
|
287
288
|
* adds a ToolboxComponent
|
288
289
|
* @param {SingleToolboxComponentOptions|SelectToolboxComponentOptions|GroupToolboxComponentOptions} toolboxComponentOptions
|
289
290
|
* @param {string|symbol} owner pluginName or vcsAppSymbol
|
291
|
+
* @param {import('../navbarManager.js').DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
|
290
292
|
* @throws {Error} if a toolboxComponent with the same ID has already been added
|
291
293
|
* @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
|
292
294
|
*/
|
293
|
-
add(
|
295
|
+
add(
|
296
|
+
toolboxComponentOptions,
|
297
|
+
owner,
|
298
|
+
device = { desktop: true, tablet: true },
|
299
|
+
) {
|
294
300
|
check(toolboxComponentOptions.id, maybe(String));
|
295
301
|
check(toolboxComponentOptions.type, ofEnum(ToolboxType));
|
302
|
+
check(device, {
|
303
|
+
desktop: optional(Boolean),
|
304
|
+
tablet: optional(Boolean),
|
305
|
+
mobile: optional(Boolean),
|
306
|
+
});
|
296
307
|
check(owner, oneOf(String, vcsAppSymbol));
|
297
308
|
|
298
309
|
if (toolboxComponentOptions.id && this.has(toolboxComponentOptions.id)) {
|
@@ -322,6 +333,7 @@ class ToolboxManager {
|
|
322
333
|
get toolboxNames() {
|
323
334
|
return toolboxNames;
|
324
335
|
},
|
336
|
+
[deviceSymbol]: device,
|
325
337
|
};
|
326
338
|
|
327
339
|
if (type === ToolboxType.SINGLE) {
|
@@ -9,7 +9,7 @@
|
|
9
9
|
:class="{
|
10
10
|
rounded: !isDocked,
|
11
11
|
marginToTop: isDocked || !isChild,
|
12
|
-
|
12
|
+
marginTablet: isTabletWithOpenToolbar,
|
13
13
|
'rounded-be': isDynamicLeft,
|
14
14
|
'rounded-bs': isDynamicRight,
|
15
15
|
}"
|
@@ -42,8 +42,9 @@
|
|
42
42
|
.marginToTop {
|
43
43
|
margin-top: 2px;
|
44
44
|
}
|
45
|
-
.
|
45
|
+
.marginTablet {
|
46
46
|
margin-top: calc(var(--v-vcs-font-size) * 3 + 6px);
|
47
|
+
margin-bottom: 2px;
|
47
48
|
}
|
48
49
|
</style>
|
49
50
|
|
@@ -22,7 +22,10 @@
|
|
22
22
|
{{ $st(headerTooltip) }}
|
23
23
|
</v-tooltip>
|
24
24
|
</h3>
|
25
|
-
<div
|
25
|
+
<div
|
26
|
+
class="d-flex justify-space-between align-center"
|
27
|
+
:class="{ 'gc-4': xs, 'mr-2': xs }"
|
28
|
+
>
|
26
29
|
<template v-if="windowState.headerActions?.length > 0">
|
27
30
|
<VcsActionButtonList
|
28
31
|
:actions="windowState.headerActions"
|
@@ -30,6 +33,7 @@
|
|
30
33
|
/>
|
31
34
|
<v-divider vertical inset class="mx-1 my-1" />
|
32
35
|
</template>
|
36
|
+
|
33
37
|
<VcsButton
|
34
38
|
v-if="infoAction"
|
35
39
|
@click.stop="infoAction.callback()"
|
@@ -80,6 +84,7 @@
|
|
80
84
|
<script>
|
81
85
|
import { VIcon, VDivider, VTooltip } from 'vuetify/components';
|
82
86
|
import { computed, getCurrentInstance, ref } from 'vue';
|
87
|
+
import { useDisplay } from 'vuetify';
|
83
88
|
import { createEllipseTooltip } from '../../components/composables.js';
|
84
89
|
import VcsButton from '../../components/buttons/VcsButton.vue';
|
85
90
|
import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
|
@@ -130,6 +135,8 @@
|
|
130
135
|
() => !props.windowState.hidePin && props.windowState.dockable,
|
131
136
|
);
|
132
137
|
|
138
|
+
const { xs } = useDisplay();
|
139
|
+
|
133
140
|
const vm = getCurrentInstance().proxy;
|
134
141
|
|
135
142
|
const translatedHeaderTitle = computed(() =>
|
@@ -166,6 +173,7 @@
|
|
166
173
|
translatedHeaderTitle,
|
167
174
|
),
|
168
175
|
infoAction,
|
176
|
+
xs,
|
169
177
|
};
|
170
178
|
},
|
171
179
|
};
|
@@ -21,6 +21,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
21
21
|
iconSize: import("vue").ComputedRef<number>;
|
22
22
|
headerTooltip: import("vue").ComputedRef<string>;
|
23
23
|
infoAction: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction | undefined;
|
24
|
+
xs: import("vue").Ref<boolean>;
|
24
25
|
}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
25
26
|
windowState: {
|
26
27
|
type: ObjectConstructor;
|