feat(theme-default): improve css variable acquisition (#1322)

Author: zhaopan-pan

ecosystem/theme-default/src/client/components/Navbar.vue

@@ -3,8 +3,12 @@ import NavbarBrand from '@theme/NavbarBrand.vue'
 import NavbarItems from '@theme/NavbarItems.vue'
 import ToggleColorModeButton from '@theme/ToggleColorModeButton.vue'
 import ToggleSidebarButton from '@theme/ToggleSidebarButton.vue'
-import { computed, onMounted, ref } from 'vue'
-import { useThemeLocaleData } from '../composables/index.js'
+import { computed, ref } from 'vue'
+import {
+  DeviceType,
+  useThemeLocaleData,
+  useUpdateDeviceStatus,
+} from '../composables/index.js'
 
 defineEmits(['toggle-sidebar'])
 
@@ -23,16 +27,14 @@ const linksWrapperStyle = computed(() => {
   }
 })
 
-// avoid overlapping of long title and long navbar links
-onMounted(() => {
-  // TODO: migrate to css var
-  // refer to _variables.scss
-  const MOBILE_DESKTOP_BREAKPOINT = 719
-  const navbarHorizontalPadding =
-    getCssValue(navbar.value, 'paddingLeft') +
-    getCssValue(navbar.value, 'paddingRight')
-  const handleLinksWrapWidth = (): void => {
-    if (window.innerWidth < MOBILE_DESKTOP_BREAKPOINT) {
+useUpdateDeviceStatus(
+  DeviceType.MOBILE,
+  (mobileDesktopBreakpoint: number): void => {
+    // avoid overlapping of long title and long navbar links
+    const navbarHorizontalPadding =
+      getCssValue(navbar.value, 'paddingLeft') +
+      getCssValue(navbar.value, 'paddingRight')
+    if (window.innerWidth < mobileDesktopBreakpoint) {
       linksWrapperMaxWidth.value = 0
     } else {
       linksWrapperMaxWidth.value =
@@ -41,10 +43,7 @@ onMounted(() => {
         (navbarBrand.value?.offsetWidth || 0)
     }
   }
-  handleLinksWrapWidth()
-  window.addEventListener('resize', handleLinksWrapWidth, false)
-  window.addEventListener('orientationchange', handleLinksWrapWidth, false)
-})
+)
 
 function getCssValue(el: HTMLElement | null, property: string): number {
   // NOTE: Known bug, will return 'auto' if style value is 'auto'

ecosystem/theme-default/src/client/components/NavbarItems.vue

@@ -3,15 +3,20 @@ import AutoLink from '@theme/AutoLink.vue'
 import NavbarDropdown from '@theme/NavbarDropdown.vue'
 import { useRouteLocale, useSiteLocaleData } from '@vuepress/client'
 import { isLinkHttp, isString } from '@vuepress/shared'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { ComputedRef } from 'vue'
 import { useRouter } from 'vue-router'
 import type {
   NavbarGroup,
   NavbarItem,
   ResolvedNavbarItem,
 } from '../../shared/index.js'
-import { useNavLink, useThemeLocaleData } from '../composables/index.js'
+import {
+  DeviceType,
+  useNavLink,
+  useThemeLocaleData,
+  useUpdateDeviceStatus,
+} from '../composables/index.js'
 import { resolveRepoType } from '../utils/index.js'
 
 /**
@@ -152,23 +157,17 @@ const navbarLinks = computed(() => [
   ...navbarRepo.value,
 ])
 
-// avoid overlapping of long title and long navbar links
-onMounted(() => {
-  // TODO: migrate to css var
-  // refer to _variables.scss
-  const MOBILE_DESKTOP_BREAKPOINT = 719
-
-  const handleMobile = (): void => {
-    if (window.innerWidth < MOBILE_DESKTOP_BREAKPOINT) {
+useUpdateDeviceStatus(
+  DeviceType.MOBILE,
+  (mobileDesktopBreakpoint: number): void => {
+    // avoid overlapping of long title and long navbar links
+    if (window.innerWidth < mobileDesktopBreakpoint) {
       isMobile.value = true
     } else {
       isMobile.value = false
     }
   }
-  handleMobile()
-  window.addEventListener('resize', handleMobile, false)
-  window.addEventListener('orientationchange', handleMobile, false)
-})
+)
 </script>
 
 <template>

ecosystem/theme-default/src/client/composables/index.ts

@@ -4,3 +4,4 @@ export * from './useResolveRouteWithRedirect.js'
 export * from './useScrollPromise.js'
 export * from './useSidebarItems.js'
 export * from './useThemeData.js'
+export * from './useUpdateDeviceStatus.js'

ecosystem/theme-default/src/client/composables/useUpdateDeviceStatus.ts

@@ -0,0 +1,30 @@
+import { onMounted } from 'vue'
+import cssVars from '../styles/_variables.module.scss?module'
+
+export enum DeviceType {
+  MOBILE = 'mobile',
+}
+
+const DeviceTypeMap = {
+  [DeviceType.MOBILE]: Number.parseInt(cssVars.mobile?.replace('px', ''), 10),
+}
+
+/**
+ * add listener to detect screen though device type
+ */
+export const useUpdateDeviceStatus = (
+  deviceType: DeviceType,
+  callback: (width: number) => void
+): void => {
+  const width = DeviceTypeMap[deviceType]
+  if (!Number.isInteger(width)) {
+    if (__VUEPRESS_DEV__) throw new Error('device width must be a integer')
+    return
+  }
+
+  onMounted(() => {
+    callback(width)
+    window.addEventListener('resize', () => callback(width), false)
+    window.addEventListener('orientationchange', () => callback(width), false)
+  })
+}

ecosystem/theme-default/src/client/shim.d.ts

@@ -3,3 +3,8 @@ declare module '*.vue' {
   const comp: ComponentOptions
   export default comp
 }
+
+declare module '*.module.scss?module' {
+  const cssVars: Record<string, string>
+  export default cssVars
+}

ecosystem/theme-default/src/client/styles/_variables.module.scss

@@ -0,0 +1,5 @@
+@import '_variables';
+
+:export {
+  mobile: $MQMobile;
+}