chore: update breakpoints

packages/core/useBreakpoints/breakpoints.ts

@@ -30,7 +30,7 @@ export const breakpointsBootstrapV5 = {
  *
  * @see https://v2.vuetifyjs.com/en/features/breakpoints/
  */
-export const breakpointsVuetify = {
+export const breakpointsVuetifyV2 = {
   xs: 0,
   sm: 600,
   md: 960,
@@ -52,6 +52,13 @@ export const breakpointsVuetifyV3 = {
   xxl: 2560,
 }
 
+/**
+ * Alias to `breakpointsVuetifyV2`
+ *
+ * @deprecated explictly use `breakpointsVuetifyV2` or `breakpointsVuetifyV3` instead
+ */
+export const breakpointsVuetify = breakpointsVuetifyV2
+
 /**
  * Breakpoints from Ant Design
  *

packages/core/useBreakpoints/demo.vue

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

@@ -87,9 +87,7 @@ export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, op
     current,
     active() {
       const bps = current()
-      return computed(() => {
-        return bps.value.length === 0 ? '' : bps.value.at(-1)
-      })
+      return computed(() => bps.value.length === 0 ? '' : bps.value.at(-1))
     },
   })
 }