feat(useBreakpoints): add active getter, add breakpoints for Vuetif…

…y v3 (#3687)

Co-authored-by: Doctorwu <44631608+Doctor-wu@users.noreply.github.com>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/core/useBreakpoints/breakpoints.ts

@@ -28,15 +28,37 @@ export const breakpointsBootstrapV5 = {
 /**
  * Breakpoints from Vuetify V2
  *
- * @see https://vuetifyjs.com/en/features/breakpoints
+ * @see https://v2.vuetifyjs.com/en/features/breakpoints/
  */
-export const breakpointsVuetify = {
-  xs: 600,
-  sm: 960,
-  md: 1264,
-  lg: 1904,
+export const breakpointsVuetifyV2 = {
+  xs: 0,
+  sm: 600,
+  md: 960,
+  lg: 1264,
+  xl: 1904,
+}
+
+/**
+ * Breakpoints from Vuetify V3
+ *
+ * @see https://vuetifyjs.com/en/styles/float/#overview
+ */
+export const breakpointsVuetifyV3 = {
+  xs: 0,
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920,
+  xxl: 2560,
 }
 
+/**
+ * Alias to `breakpointsVuetifyV2`
+ *
+ * @deprecated explictly use `breakpointsVuetifyV2` or `breakpointsVuetifyV3` instead
+ */
+export const breakpointsVuetify = breakpointsVuetifyV2
+
 /**
  * Breakpoints from Ant Design
  *
@@ -57,10 +79,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 +120,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

@@ -10,6 +10,7 @@ const reactiveStuff = ref<keyof typeof breakpointsTailwind>('sm')
 const isGreaterThanBreakpoint = breakpoints.greaterOrEqual(() => reactiveStuff.value)
 
 const current = breakpoints.current()
+const active = breakpoints.active()
 const xs = breakpoints.smaller('sm')
 const xse = breakpoints.smallerOrEqual('sm')
 const sm = breakpoints.between('sm', 'md')
@@ -22,6 +23,7 @@ const xxl = breakpoints['2xl']
 <template>
   <div class="font-mono">
     <div> Current breakpoints: {{ current }} </div>
+    <div> Active breakpoint: {{ active }} </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

@@ -19,14 +19,27 @@ const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
 const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg
 ```
 
-```js
+```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 activeBreakpoint = breakpoints.active()
+
+// true or false
 const laptop = breakpoints.between('laptop', 'desktop')
+</script>
+
+<template>
+  <div :class="activeBreakpoint">
+    ...
+  </div>
+</template>
 ```

packages/core/useBreakpoints/index.ts

@@ -71,6 +71,11 @@ export function useBreakpoints<K extends string>(
       return shortcuts
     }, {} as Record<K, Ref<boolean>>)
 
+  function current() {
+    const points = Object.keys(breakpoints).map(i => [i, greaterOrEqual(i as K)] as const)
+    return computed(() => points.filter(([, v]) => v.value).map(([k]) => k))
+  }
+
   return Object.assign(shortcutMethods, {
     greaterOrEqual,
     smallerOrEqual,
@@ -98,9 +103,10 @@ export function useBreakpoints<K extends string>(
     isInBetween(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) {
       return match(`(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`)
     },
-    current() {
-      const points = Object.keys(breakpoints).map(i => [i, greaterOrEqual(i as K)] as const)
-      return computed(() => points.filter(([, v]) => v.value).map(([k]) => k))
+    current,
+    active() {
+      const bps = current()
+      return computed(() => bps.value.length === 0 ? '' : bps.value.at(-1))
     },
   })
 }
@@ -117,4 +123,5 @@ export type UseBreakpointsReturn<K extends string = string> = {
   isSmallerOrEqual: (k: MaybeRefOrGetter<K>) => boolean
   isInBetween: (a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) => boolean
   current: () => ComputedRef<string[]>
+  active: ComputedRef<string>
 } & Record<K, ComputedRef<boolean>>