upgrade to Vue 3.4.3

package.json

@@ -22,7 +22,7 @@
     "highcharts": "^10.3.2",
     "mongodb": "^4.13.0",
     "sass": "^1.69.5",
-    "vue": "^3.3.8",
+    "vue": "^3.4.3",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
@@ -30,7 +30,7 @@
     "@types/express": "^4.17.21",
     "@types/node": "^20.9.0",
     "@vitejs/plugin-vue": "^4.4.1",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.4.0",
@@ -43,8 +43,8 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
-    "vitest": "^1.0.1",
+    "vitest": "^1.1.1",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^1.8.27"
   },
   "type": "module"
 }

src/components/Chart.vue

@@ -10,8 +10,7 @@ import * as Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'
-import type { Window } from '@/utils/types'
+import type { Window, NavType } from '@/utils/types'
-import type { navType } from '@/utils/types'
 import { typeApi } from '@/utils/types'
 import { useFetch } from '@vueuse/core'
 
@@ -23,7 +22,7 @@ Highcharts.setOptions({
 
 const props = defineProps<{
   activeWindow: Window
-  activeType: navType | null
+  activeType: NavType | undefined
 }>()
 
 const chart = ref<HTMLElement | null>(null)

src/components/Main.vue

@@ -1,31 +1,30 @@
 <template>
   <div id="app">
-    <NavBar :activeType="activeType" @set-type="setType"></NavBar>
+    <NavBar v-model="activeType"></NavBar>
     <section class="section">
-      <TimeWindows :windows="windows" :active-window="activeWindow" @set-window="setWindow"></TimeWindows>
+      <TimeWindows :windows="windows" v-model="activeWindow"></TimeWindows>
       <Chart :active-window="activeWindow" :active-type="activeType"></Chart>
     </section>
     <router-view></router-view>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import NavBar from '@/components/NavBar.vue'
 import TimeWindows from '@/components/TimeWindows.vue'
 import Chart from '@/components/Chart.vue'
 import { windows } from '@/utils/helpers'
-import type { Window } from '@/utils/types'
+import type { Window, NavType } from '@/utils/types'
-import type { navType } from '@/utils/types'
 
 const defaultWindow = windows[1]
 
-const activeType = ref<navType | null>(null)
+const activeType = ref<NavType>()
 const activeWindow = ref<Window>(defaultWindow)
 
 const router = useRouter()
 const route = useRoute()
-if (route.params.type) activeType.value = route.params.type as navType
+if (route.params.type) activeType.value = route.params.type as NavType
 if (route.params.window) {
   activeWindow.value = windows.find((w) => w.label === route.params.window) || defaultWindow
 }
@@ -43,14 +42,7 @@ const updateRoute = () => {
   }
 }
 
-const setType = (newType: navType) => {
+watch([activeWindow, activeType], () => updateRoute())
-  activeType.value = newType
-  updateRoute()
-}
-const setWindow = (newWindow: Window) => {
-  activeWindow.value = newWindow
-  updateRoute()
-}
 </script>
 <style scoped>
 #app {

src/components/NavBar.vue

@@ -34,24 +34,18 @@
 <script setup lang="ts">
 import { capitalizeFirstLetter } from '@/utils/helpers'
 import { ref } from 'vue'
-import type { navType } from '@/utils/types'
+import type { NavType } from '@/utils/types'
 
-const props = defineProps<{
+const activeType = defineModel<NavType>()
-  activeType: navType | null
-}>()
 
-const emit = defineEmits<{
+const setType = (type: NavType) => {
-  'set-type': [type: navType]
-}>()
-
-const setType = (type: navType) => {
   toggled.value = false
-  emit('set-type', type)
+  activeType.value = type
 }
 
 const toggled = ref(false)
-const navTypes: navType[] = ['temperatuur', 'luchtvochtigheid']
+const navTypes: NavType[] = ['temperatuur', 'luchtvochtigheid']
-if (!props.activeType) setType(navTypes[0])
+if (!activeType.value) setType(navTypes[0])
 const toggleMenu = () => (toggled.value = !toggled.value)
 </script>
 <style scoped lang="scss">

src/components/TimeWindows.vue

@@ -4,7 +4,7 @@
       <li
         v-for="window in props.windows"
         :key="window.label"
-        @click="emit('set-window', window)"
+        @click="activeWindow = window"
         :class="{ 'is-active': window.label === activeWindow?.label }"
       >
         <a>{{ window.label }}</a>
@@ -16,11 +16,8 @@
 import type { Window } from '@/utils/types'
 
 const props = defineProps<{
-  activeWindow: Window
   windows: Window[]
 }>()
 
-const emit = defineEmits<{
+const activeWindow = defineModel<Window>({ required: true })
-  'set-window': [window: Window]
-}>()
 </script>

src/utils/types.ts

@@ -11,4 +11,4 @@ export const typeApi = {
   luchtvochtigheid: 'humidity'
 }
 
-export type navType = keyof typeof typeApi
+export type NavType = keyof typeof typeApi

tests/components/TimeWindows.test.ts

@@ -7,7 +7,7 @@ import { windows } from '@/utils/helpers'
 const getWrapper = () => {
   return shallowMount(TimeWindows, {
     props: {
-      activeWindow: windows[1],
+      modelValue: windows[1],
       windows
     }
   })
@@ -25,7 +25,7 @@ describe('TimeWindows', () => {
     const wrapper = getWrapper()
     const listItems = wrapper.findAll('li')
     await listItems[0]?.trigger('click')
-    const event = (wrapper.emitted('set-window') || [])[0][0] as Window
+    const selectedWindow = (wrapper.emitted('update:modelValue') || [])[0][0] as Window
-    expect(event.label).toEqual('afgelopen uur')
+    expect(selectedWindow.label).toEqual('afgelopen uur')
   })
 })