feat(useBreakpoints): enable passing ref or getter to get breakpoints (…

…#3621)
vueuse · Feb 20, 2024 · d33176e · d33176e
1 parent 751683a
commit d33176e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/packages/core/useBreakpoints/demo.vue b/packages/core/useBreakpoints/demo.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { ref } from 'vue-demi'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const smWidth = breakpointsTailwind.sm
 
+const reactiveStuff = ref<keyof typeof breakpointsTailwind>('sm')
+const isGreaterThanBreakpoint = breakpoints.greaterOrEqual(() => reactiveStuff.value)
+
 const current = breakpoints.current()
 const xs = breakpoints.smaller('sm')
 const xse = breakpoints.smallerOrEqual('sm')
@@ -25,5 +29,6 @@ const xxl = breakpoints['2xl']
     <div> lg: <BooleanDisplay :value="lg" /></div>
     <div> xl: <BooleanDisplay :value="xl" /></div>
     <div>2xl: <BooleanDisplay :value="xxl" /></div>
+    <div>greaterThanBreakPoint: <BooleanDisplay :value="isGreaterThanBreakpoint" /></div>
   </div>
 </template>
diff --git a/packages/core/useBreakpoints/index.ts b/packages/core/useBreakpoints/index.ts
@@ -16,8 +16,8 @@ export type Breakpoints<K extends string = string> = Record<K, MaybeRefOrGetter<
  * @see https://vueuse.org/useBreakpoints
  */
 export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, options: ConfigurableWindow = {}) {
-  function getValue(k: K, delta?: number) {
-    let v = toValue(breakpoints[k])
+  function getValue(k: MaybeRefOrGetter<K>, delta?: number) {
+    let v = toValue(breakpoints[toValue(k)])
 
     if (delta != null)
       v = increaseWithUnit(v, delta)
@@ -36,7 +36,7 @@ export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, op
     return window.matchMedia(query).matches
   }
 
-  const greaterOrEqual = (k: K) => {
+  const greaterOrEqual = (k: MaybeRefOrGetter<K>) => {
     return useMediaQuery(() => `(min-width: ${getValue(k)})`, options)
   }
 
@@ -51,32 +51,32 @@ export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, op
     }, {} as Record<K, Ref<boolean>>)
 
   return Object.assign(shortcutMethods, {
-    greater(k: K) {
+    greater(k: MaybeRefOrGetter<K>) {
       return useMediaQuery(() => `(min-width: ${getValue(k, 0.1)})`, options)
     },
     greaterOrEqual,
-    smaller(k: K) {
+    smaller(k: MaybeRefOrGetter<K>) {
       return useMediaQuery(() => `(max-width: ${getValue(k, -0.1)})`, options)
     },
-    smallerOrEqual(k: K) {
+    smallerOrEqual(k: MaybeRefOrGetter<K>) {
       return useMediaQuery(() => `(max-width: ${getValue(k)})`, options)
     },
-    between(a: K, b: K) {
+    between(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) {
       return useMediaQuery(() => `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`, options)
     },
-    isGreater(k: K) {
+    isGreater(k: MaybeRefOrGetter<K>) {
       return match(`(min-width: ${getValue(k, 0.1)})`)
     },
-    isGreaterOrEqual(k: K) {
+    isGreaterOrEqual(k: MaybeRefOrGetter<K>) {
       return match(`(min-width: ${getValue(k)})`)
     },
-    isSmaller(k: K) {
+    isSmaller(k: MaybeRefOrGetter<K>) {
       return match(`(max-width: ${getValue(k, -0.1)})`)
     },
-    isSmallerOrEqual(k: K) {
+    isSmallerOrEqual(k: MaybeRefOrGetter<K>) {
       return match(`(max-width: ${getValue(k)})`)
     },
-    isInBetween(a: K, b: K) {
+    isInBetween(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) {
       return match(`(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`)
     },
     current() {