feat(useBreakpoints): add active getter, add breakpoints for Vuetify v3

packages/core/useBreakpoints/breakpoints.ts

@@ -26,15 +26,17 @@ export const breakpointsBootstrapV5 = {
 }
 
 /**
- * Breakpoints from Vuetify V2
+ * Breakpoints from Vuetify V3
  *
- * @see https://vuetifyjs.com/en/features/breakpoints
+ * @see https://vuetifyjs.com/en/styles/float/#overview
  */
 export const breakpointsVuetify = {
-  xs: 600,
-  sm: 960,
-  md: 1264,
-  lg: 1904,
+  xs: 0,
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920,
+  xxl: 2560,
 }
 
 /**
@@ -57,10 +59,11 @@ export const breakpointsAntDesign = {
  * @see https://quasar.dev/style/breakpoints
  */
 export const breakpointsQuasar = {
-  xs: 600,
-  sm: 1024,
-  md: 1440,
-  lg: 1920,
+  xs: 0,
+  sm: 600,
+  md: 1024,
+  lg: 1440,
+  xl: 1920,
 }
 
 /**
@@ -97,7 +100,7 @@ export const breakpointsMasterCss = {
 /**
  * Breakpoints from PrimeFlex
  *
- * @see https://www.primefaces.org/primeflex/setup
+ * @see https://primeflex.org/installation
  */
 export const breakpointsPrimeFlex = {
   sm: 576,

packages/core/useBreakpoints/demo.vue

@@ -6,6 +6,7 @@ const breakpoints = useBreakpoints(breakpointsTailwind)
 const smWidth = breakpointsTailwind.sm
 
 const current = breakpoints.current()
+const mode = breakpoints.mode()
 const xs = breakpoints.smaller('sm')
 const xse = breakpoints.smallerOrEqual('sm')
 const sm = breakpoints.between('sm', 'md')
@@ -18,6 +19,7 @@ const xxl = breakpoints['2xl']
 <template>
   <div class="font-mono">
     <div> Current breakpoints: {{ current }} </div>
+    <div> Current screen mode: {{ mode }} </div>
     <div> xs(&lt;{{ smWidth }}px): <BooleanDisplay :value="xs" /></div>
     <div> xs(&lt;={{ smWidth }}px): <BooleanDisplay :value="xse" /></div>
     <div> sm: <BooleanDisplay :value="sm" /></div>

packages/core/useBreakpoints/index.md

@@ -4,7 +4,7 @@ category: Browser
 
 # useBreakpoints
 
-Reactive viewport breakpoints.
+Reactive viewport breakpoints and screen factor.
 
 ## Usage
 
@@ -19,14 +19,29 @@ const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
 const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg
 ```
 
-```js
+To set reactive screen factor CSS class globally in the `App.vue`:
+
+```vue
+<script setup lang="ts">
 import { useBreakpoints } from '@vueuse/core'
 
 const breakpoints = useBreakpoints({
+  mobile: 0, // optional
   tablet: 640,
   laptop: 1024,
   desktop: 1280,
 })
 
+// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
+const mode = breakpoints.mode()
+
+// true or false
 const laptop = breakpoints.between('laptop', 'desktop')
+</script>
+
+<template>
+  <div :class="mode">
+    ...
+  </div>
+</template>
 ```

packages/core/useBreakpoints/index.ts

@@ -83,6 +83,12 @@ export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, op
       const points = Object.keys(breakpoints).map(i => [i, greaterOrEqual(i as K)] as const)
       return computed(() => points.filter(([, v]) => v.value).map(([k]) => k))
     },
+    mode() {
+      const bps = this.current()
+      return computed(() => {
+        return bps.value.length === 0 ? '' : bps.value.at(-1)
+      })
+    },
   })
 }
 
@@ -98,4 +104,5 @@ export type UseBreakpointsReturn<K extends string = string> = {
   isSmallerOrEqual(k: K): boolean
   isInBetween(a: K, b: K): boolean
   current(): ComputedRef<string[]>
+  mode(): ComputedRef<string>
 } & Record<K, ComputedRef<boolean>>