Skip to content

Commit 2ab5add

Browse files
sronveauxsronveaux
authored
Merge pull request #411 from sronveaux/vue3-vuetify3
Migration to Vue3 and Vuetify3
2 parents ec7b0db + 6c5fccd commit 2ab5add

File tree

129 files changed

+10383
-20889
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+10383
-20889
lines changed

‎.browserslistrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
> 1%
22
last 2 versions
33
not dead
4+
not ie 11

‎.eslintrc.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ module.exports = {
44
node: true
55
},
66
extends: [
7-
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
8-
'plugin:vue/essential',
7+
// consider switching to `plugin:vue/vue3-strongly-recommended` or `plugin:vue/vue3-recommended` for stricter rules.
8+
'plugin:vue/vue3-essential',
99
'plugin:vuetify/recommended',
1010
'@vue/standard'
1111
],

‎app-starter/WguApp.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@
77

88
<script>
99
import WguAppTemplate from './WguAppTemplate.vue';
10+
1011
export default {
1112
name: 'my-wgu-app',
1213
components: {
1314
'wgu-app-tpl': WguAppTemplate
1415
}
1516
// add Vue methods and hooks here
16-
}
17+
};
1718
</script>

‎app-starter/WguAppTemplate.vue‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,17 @@
2525
<slot name="wgu-after-header" />
2626

2727
<wgu-app-sidebar v-if="sidebarWins.length" v-bind="sidebarConfig">
28-
<template v-for="(moduleWin, index) in sidebarWins">
28+
<template v-for="(moduleWin, index) in sidebarWins" :key="index">
2929
<component
30-
:is="moduleWin.type" :key="index"
3130
v-bind="moduleWin"
31+
:is="moduleWin.type"
3232
/>
3333
</template>
3434
</wgu-app-sidebar>
3535

3636
<slot name="wgu-before-content" />
3737
<v-main app>
38-
<v-container id="ol-map-container" fluid class="fill-height pa-0">
38+
<v-container id="ol-map-container" fluid class="fill-height pa-0 position-relative">
3939
<wgu-map />
4040
<!-- layer loading indicator -->
4141
<wgu-maploading-status />
@@ -50,10 +50,10 @@
5050
</v-container>
5151
</v-main>
5252

53-
<template v-for="(moduleWin, index) in floatingWins">
53+
<template v-for="(moduleWin, index) in floatingWins" :key="index">
5454
<component
55-
:is="moduleWin.type" :key="index"
5655
v-bind="moduleWin"
56+
:is="moduleWin.type"
5757
/>
5858
</template>
5959

@@ -77,25 +77,25 @@
7777
</template>
7878

7979
<script>
80-
import Vue from 'vue'
81-
import { WguEventBus } from '../src/WguEventBus'
82-
import OlMap from '../src/components/ol/Map'
83-
import HoverTooltip from '../src/components/ol/HoverTooltip'
84-
import AppHeader from './components/AppHeader'
85-
import AppFooter from './components/AppFooter'
86-
import AppSidebar from './components/AppSidebar'
87-
import AppLogo from '../src/components/AppLogo'
88-
import AppLoadingMask from '../src/components/AppLoadingMask'
89-
import BgLayerSwitcher from '../src/components/bglayerswitcher/BgLayerSwitcher.vue'
90-
import OverviewMap from '../src/components/overviewmap/OverviewMap.vue'
91-
import MeasureWin from '../src/components/measuretool/MeasureWin'
92-
import LayerListWin from '../src/components/layerlist/LayerListWin'
93-
import HelpWin from '../src/components/helpwin/HelpWin'
94-
import InfoClickWin from '../src/components/infoclick/InfoClickWin'
95-
import MapLoadingStatus from '../src/components/progress/MapLoadingStatus'
96-
import AttributeTableWin from '../src/components/attributeTable/AttributeTableWin.vue'
97-
import MapRecorderWin from '../src/components/maprecorder/MapRecorderWin'
98-
import SampleModuleWin from './components/SampleModule.vue'
80+
import { getCurrentInstance } from 'vue';
81+
import { WguEventBus } from '@/WguEventBus';
82+
import OlMap from '@/components/ol/Map';
83+
import HoverTooltip from '@/components/ol/HoverTooltip';
84+
import AppHeader from './components/AppHeader';
85+
import AppFooter from './components/AppFooter';
86+
import AppSidebar from './components/AppSidebar';
87+
import AppLogo from '@/components/AppLogo';
88+
import AppLoadingMask from '@/components/AppLoadingMask';
89+
import BgLayerSwitcher from '@/components/bglayerswitcher/BgLayerSwitcher.vue';
90+
import OverviewMap from '@/components/overviewmap/OverviewMap.vue';
91+
import MeasureWin from '@/components/measuretool/MeasureWin';
92+
import LayerListWin from '@/components/layerlist/LayerListWin';
93+
import HelpWin from '@/components/helpwin/HelpWin';
94+
import InfoClickWin from '@/components/infoclick/InfoClickWin';
95+
import MapLoadingStatus from '@/components/progress/MapLoadingStatus';
96+
import AttributeTableWin from '@/components/attributeTable/AttributeTableWin.vue';
97+
import MapRecorderWin from '@/components/maprecorder/MapRecorderWin';
98+
import SampleModuleWin from './components/SampleModule.vue';
9999
100100
export default {
101101
name: 'wgu-app-tpl',
@@ -118,14 +118,18 @@ export default {
118118
'wgu-maprecorder-win': MapRecorderWin,
119119
'sample-module-win': SampleModuleWin
120120
},
121+
setup () {
122+
const vueInstance = getCurrentInstance();
123+
return { vueInstance };
124+
},
121125
data () {
122126
return {
123127
isEmbedded: false,
124128
sidebarConfig: this.getSidebarConfig(),
125129
overviewMapConfig: this.getOverviewMapConfig(),
126130
floatingWins: this.getModuleWinData('floating'),
127131
sidebarWins: this.getModuleWinData('sidebar'),
128-
showCopyrightYear: Vue.prototype.$appConfig.showCopyrightYear
132+
showCopyrightYear: this.$appConfig.showCopyrightYear
129133
}
130134
},
131135
created () {
@@ -143,7 +147,7 @@ export default {
143147
for (const key of Object.keys(refs)) {
144148
cmpLookup[key] = refs[key][0];
145149
}
146-
Vue.prototype.cmpLookup = cmpLookup;
150+
this.vueInstance.appContext.config.globalProperties.cmpLookup = cmpLookup;
147151
// inform registered cmps that the app is mounted and the dynamic
148152
// components are available
149153
WguEventBus.$emit('app-mounted');
@@ -154,15 +158,15 @@ export default {
154158
* @return {Object} Sidebar configuration object.
155159
*/
156160
getSidebarConfig () {
157-
const appConfig = Vue.prototype.$appConfig || {};
161+
const appConfig = this.$appConfig || {};
158162
return appConfig.sidebar;
159163
},
160164
/**
161165
* Returns the configuration object for the overview map from app-config.
162166
* @return {Object} Overview map configuration object.
163167
*/
164168
getOverviewMapConfig () {
165-
const appConfig = Vue.prototype.$appConfig || {};
169+
const appConfig = this.$appConfig || {};
166170
return appConfig.overviewMap;
167171
},
168172
/**
@@ -175,7 +179,7 @@ export default {
175179
* @return {Array} module window configuration objects
176180
*/
177181
getModuleWinData (target) {
178-
const appConfig = Vue.prototype.$appConfig || {};
182+
const appConfig = this.$appConfig || {};
179183
const modulesConfs = appConfig.modules || {};
180184
const moduleWins = [];
181185
for (const key of Object.keys(modulesConfs)) {
@@ -199,7 +203,7 @@ export default {
199203
* Sets the current i18n language to the global app language lookup.
200204
*/
201205
setGlobalAppLang () {
202-
Vue.prototype.$appLanguage = this.$i18n.locale;
206+
this.vueInstance.appContext.config.globalProperties.$appLanguage = this.$i18n.locale;
203207
}
204208
},
205209
watch: {
@@ -211,5 +215,5 @@ export default {
211215
this.setDocumentTitle();
212216
}
213217
}
214-
}
218+
};
215219
</script>

‎app-starter/components/AppFooter.vue‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
11
<template>
2-
3-
<v-footer color="primary" class="onprimary--text" app>
2+
<v-footer color="primary" app>
43
<span class="wgu-footer-left" v-html="footerTextLeft"></span>
54
<v-spacer></v-spacer>
65
<div class="wgu-footer-right">
76
<span v-html="footerTextRight"></span>
87
<span v-if="showCopyrightYear" >&copy; {{ new Date().getFullYear() }}</span>
98
</div>
109
</v-footer>
11-
1210
</template>
1311

1412
<script>
15-
1613
export default {
1714
name: 'wgu-app-footer',
1815
props: {
1916
footerTextLeft: { type: String, required: true },
2017
footerTextRight: { type: String, required: true },
2118
showCopyrightYear: { type: Boolean, required: false, default: true }
2219
}
23-
}
20+
};
2421
</script>
2522

2623
<!-- Add "scoped" attribute to limit CSS to this component only -->

‎app-starter/components/AppHeader.vue‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
<template>
22
<v-app-bar
3-
class="wgu-app-toolbar onprimary--text"
3+
class="wgu-app-toolbar"
44
color="primary"
5-
fixed
6-
app
7-
clipped-left
8-
clipped-right
95
>
106

117
<!-- slot to inject components at the beginning (before title) -->
@@ -21,32 +17,31 @@
2117
<!-- slot to inject components before the auto-generated buttons (by config) -->
2218
<slot name="wgu-tb-before-auto-buttons"></slot>
2319

24-
<template v-for="(tbButton, index) in tbButtons">
20+
<template v-for="(tbButton, index) in tbButtons" :key="index">
2521
<component
26-
:is="tbButton.type" :key="index"
2722
v-bind="tbButton"
23+
:is="tbButton.type"
2824
/>
2925
</template>
3026

3127
<!-- slot to inject components after the auto-generated buttons (by config) -->
3228
<slot name="wgu-tb-after-auto-buttons"></slot>
3329

34-
<v-menu v-if="menuButtons.length" offset-y nudge-bottom="15">
35-
<template v-slot:activator="{on}">
30+
<v-menu v-if="menuButtons.length" eager offset="15">
31+
<template v-slot:activator="{props}">
3632

37-
<v-btn icon v-on="on"
33+
<v-btn v-bind="props"
3834
class="wgu-menu-button"
39-
color="onprimary"
40-
:title="$t('wgu-toolbar-menu.title')">
41-
<v-icon medium>menu</v-icon>
35+
:title="$t('wgu-toolbar-menu.title')"
36+
icon="md:menu">
4237
</v-btn>
4338
</template>
44-
<v-list color="primary">
45-
<template v-for="(tbButton, index) in menuButtons">
46-
<v-list-item :key="index">
39+
<v-list bg-color="primary">
40+
<template v-for="(tbButton, index) in menuButtons" :key="index">
41+
<v-list-item class="py-0">
4742
<component
48-
:is="tbButton.type" :key="index"
4943
v-bind="tbButton"
44+
:is="tbButton.type" :key="index"
5045
/>
5146
</v-list-item>
5247
</template>
@@ -60,14 +55,12 @@
6055
</template>
6156

6257
<script>
63-
64-
import Vue from 'vue'
65-
import ToggleButton from '../../src/components/modulecore/ToggleButton'
66-
import ZoomToMaxExtentButton from '../../src/components/maxextentbutton/ZoomToMaxExtentButton'
67-
import Geocoder from '../../src/components/geocoder/Geocoder'
68-
import Geolocator from '../../src/components/geolocator/Geolocator'
69-
import LocaleSwitcher from '../../src/components/localeswitcher/LocaleSwitcher'
70-
import ThemeSwitcher from '../../src/components/themeswitcher/ThemeSwitcher'
58+
import ToggleButton from '@/components/modulecore/ToggleButton';
59+
import ZoomToMaxExtentButton from '@/components/maxextentbutton/ZoomToMaxExtentButton';
60+
import Geocoder from '@/components/geocoder/Geocoder';
61+
import Geolocator from '@/components/geolocator/Geolocator';
62+
import LocaleSwitcher from '@/components/localeswitcher/LocaleSwitcher';
63+
import ThemeSwitcher from '@/components/themeswitcher/ThemeSwitcher';
7164
7265
export default {
7366
name: 'wgu-app-header',
@@ -101,7 +94,7 @@ export default {
10194
* @return {Array} module button configuration objects
10295
*/
10396
getModuleButtons (target) {
104-
const appConfig = Vue.prototype.$appConfig || {};
97+
const appConfig = this.$appConfig || {};
10598
const modulesConfs = appConfig.modules || {};
10699
const buttons = [];
107100
for (const key of Object.keys(modulesConfs)) {
@@ -117,7 +110,7 @@ export default {
117110
return buttons;
118111
}
119112
}
120-
}
113+
};
121114
</script>
122115

123116
<!-- Add "scoped" attribute to limit CSS to this component only -->

‎app-starter/components/AppSidebar.vue‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,20 @@
22
<v-navigation-drawer
33
class="wgu-app-sidebar"
44
ref="sidebar"
5-
app
6-
clipped
75
:width=sidebarWidth
86
v-model="sidebarOpen"
97
>
108
<!-- Forward the default slot for sidebar content. -->
119
<slot></slot>
1210
<!-- Sidebar toggle button -->
1311
<template v-slot:prepend>
14-
<v-btn small
15-
class="wgu-app-sidebar-toggle-btn px0"
16-
absolute
17-
top
12+
<v-btn size="small"
13+
class="wgu-app-sidebar-toggle-btn position-absolute px0"
14+
location="top right"
1815
color="secondary"
1916
@click="sidebarOpen = !sidebarOpen">
20-
<v-icon color="onsecondary" v-if="sidebarOpen">chevron_left</v-icon>
21-
<v-icon color="onsecondary" v-else>chevron_right</v-icon>
17+
<v-icon v-if="sidebarOpen">md:chevron_left</v-icon>
18+
<v-icon v-else>md:chevron_right</v-icon>
2219
</v-btn>
2320
</template>
2421
<!-- Invisible sidebar resizer -->
@@ -30,8 +27,8 @@
3027
</template>
3128

3229
<script>
33-
34-
import { WguEventBus } from '../../src/WguEventBus';
30+
import { WguEventBus } from '@/WguEventBus';
31+
import { useGoTo } from 'vuetify';
3532
3633
export default {
3734
name: 'wgu-app-sidebar',
@@ -44,6 +41,10 @@ export default {
4441
scrollDuration: { type: Number, required: false, default: 500 },
4542
resizable: { type: Boolean, required: false, default: false }
4643
},
44+
setup () {
45+
const goTo = useGoTo();
46+
return { goTo };
47+
},
4748
data () {
4849
return {
4950
sidebarOpen: this.visible,
@@ -73,7 +74,7 @@ export default {
7374
*/
7475
scrollTo (comp) {
7576
if (this.autoScroll) {
76-
this.$vuetify.goTo(comp, {
77+
this.goTo(comp, {
7778
container: '.wgu-app-sidebar > .v-navigation-drawer__content',
7879
duration: this.scrollDuration
7980
});
@@ -83,7 +84,7 @@ export default {
8384
* Resize the sidebar, if the 'resizable' option is enabled.
8485
*/
8586
onResize () {
86-
const sidebarEl = this.$refs.sidebar.$el;
87+
const sidebarEl = this.$refs.sidebar.$el.nextSibling;
8788
sidebarEl.style.transition = 'initial';
8889
8990
// Resize on mouse move
@@ -105,5 +106,5 @@ export default {
105106
document.addEventListener('mouseup', onMouseUp, { once: true });
106107
}
107108
}
108-
}
109+
};
109110
</script>

0 commit comments

Comments
 (0)