Update Vueuse

frontend/package.json

@@ -70,7 +70,7 @@
     "@pinia/nuxt": "0.2.1",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/typography": "^0.5.9",
-    "@vueuse/core": "^9.3.0",
+    "@vueuse/core": "^10.2.1",
     "@wordpress/is-shallow-equal": "^4.6.0",
     "async-mutex": "^0.3.2",
     "axios": "^0.27.0",

frontend/src/components/VHomeGallery/VHomeGallery.vue

@@ -49,7 +49,7 @@
 import { computed, defineComponent, PropType, ref } from "vue"
 import { useContext, useRouter } from "@nuxtjs/composition-api"
 
-import { useReducedMotion } from "~/composables/use-media-query"
+import { useReducedMotion } from "~/composables/use-reduced-motion"
 import { useAnalytics } from "~/composables/use-analytics"
 import useResizeObserver from "~/composables/use-resize-observer"
 

frontend/src/components/VLogoLoader/VLogoLoader.vue

@@ -43,7 +43,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
-import { useReducedMotion } from "~/composables/use-media-query"
+import { useReducedMotion } from "~/composables/use-reduced-motion"
 
 export default defineComponent({
   name: "VLogoLoader",

frontend/src/composables/use-dialog-control.ts

@@ -9,7 +9,7 @@ import {
   watch,
 } from "vue"
 
-import { MaybeComputedRef, resolveUnref } from "@vueuse/core"
+import { MaybeRefOrGetter, toValue } from "@vueuse/core"
 
 import { useBodyScrollLock } from "~/composables/use-body-scroll-lock"
 
@@ -25,7 +25,7 @@ export function useDialogControl({
   nodeRef?: Ref<HTMLElement | null>
   lockBodyScroll?: ComputedRef<boolean> | boolean
   emit: SetupContext["emit"]
-  deactivateFocusTrap?: MaybeComputedRef<Fn | undefined>
+  deactivateFocusTrap?: MaybeRefOrGetter<Fn | undefined>
 }) {
   const internallyControlled = typeof visibleRef === "undefined"
   const internalVisibleRef = internallyControlled ? ref(false) : visibleRef
@@ -71,7 +71,7 @@ export function useDialogControl({
   const open = () => (internalVisibleRef.value = true)
 
   const close = () => {
-    const fn = resolveUnref(deactivateFocusTrap)
+    const fn = toValue(deactivateFocusTrap)
     if (fn) fn()
     internalVisibleRef.value = false
   }

frontend/src/composables/use-reduced-motion.ts

@@ -0,0 +1,7 @@
+import { useMediaQuery } from "@vueuse/core"
+/**
+ * Check if the user prefers reduced motion or not.
+ */
+export function useReducedMotion() {
+  return useMediaQuery("(prefers-reduced-motion: reduce)")
+}

frontend/src/composables/use-window-scroll.ts

@@ -1,9 +1,9 @@
 // code taken from Vueuse
 import { throttle } from "throttle-debounce"
 import { ref } from "vue"
+import { useEventListener } from "@vueuse/core"
 
 import { defaultWindow } from "~/constants/window"
-import { useEventListener } from "~/composables/use-event-listener"
 
 /**
  * Whether the page has been scrolled down at all.

frontend/src/pages/index.vue

@@ -7,11 +7,10 @@
       :handle-search="handleSearch"
       :search-type="searchType"
       :set-search-type="setSearchType"
-      :is-sm="isSm"
     />
 
     <!-- Image carousel -->
-    <VHomeGallery class="hidden h-full flex-grow xl:flex" />
+    <VHomeGallery v-if="isXl" class="flex h-full flex-grow" />
   </main>
 </template>
 
@@ -69,8 +68,7 @@ export default defineComponent({
       updateBreakpoint()
     })
 
-    const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
-    const isSm = computed(() => uiStore.isBreakpoint("sm"))
+    const isXl = computed(() => uiStore.isBreakpoint("xl"))
 
     const searchType = ref<SupportedSearchType>(ALL_MEDIA)
 
@@ -93,8 +91,7 @@ export default defineComponent({
     }
 
     return {
-      isDesktopLayout,
-      isSm,
+      isXl,
 
       searchType,
       setSearchType,

frontend/test/unit/specs/components/v-logo-loader.spec.js

@@ -2,7 +2,7 @@ import { screen } from "@testing-library/vue"
 
 import { render } from "~~/test/unit/test-utils/render"
 
-import { useReducedMotion } from "~/composables/use-media-query"
+import { useReducedMotion } from "~/composables/use-reduced-motion"
 
 import VLogoLoader from "~/components/VLogoLoader/VLogoLoader.vue"
 
@@ -11,7 +11,7 @@ jest.mock("~/utils/console", () => ({
   log: jest.fn(),
 }))
 
-jest.mock("~/composables/use-media-query", () => ({
+jest.mock("~/composables/use-reduced-motion", () => ({
   useReducedMotion: jest.fn(),
 }))