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

packages/core/useBreakpoints/demo.vue

@@ -6,6 +6,7 @@ const breakpoints = useBreakpoints(breakpointsTailwind)
 const smWidth = breakpointsTailwind.sm
 
 const current = breakpoints.current()
+const screenFactor = breakpoints.screenFactor()
 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 screenFactor: {{ screenFactor }} </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 screenFactor = breakpoints.screenFactor()
+
+// true or false
 const laptop = breakpoints.between('laptop', 'desktop')
+</script>
+
+<template>
+  <div :class="screenFactor">
+    ...
+  </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))
     },
+    screenFactor() {
+      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[]>
+  screenFactor(): ComputedRef<string>
 } & Record<K, ComputedRef<boolean>>