feat(useBreakpoints): support greaterOrEqual etc. (#2148)

vueuse · Sep 4, 2022 · 48bf343 · 48bf343
1 parent d278f0b
commit 48bf343
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/packages/core/useBreakpoints/demo.vue b/packages/core/useBreakpoints/demo.vue
@@ -3,7 +3,10 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
+const smWidth = breakpointsTailwind.sm
+
 const sm = breakpoints.smaller('sm')
+const sme = breakpoints.smallerOrEqual('sm')
 const md = breakpoints.between('sm', 'md')
 const lg = breakpoints.between('md', 'lg')
 const xl = breakpoints.between('lg', 'xl')
@@ -13,7 +16,8 @@ const xxxl = breakpoints['2xl']
 
 <template>
   <div class="font-mono">
-    <div> sm: <BooleanDisplay :value="sm" /></div>
+    <div> sm(&lt;{{ smWidth }}px): <BooleanDisplay :value="sm" /></div>
+    <div> sm(&lt;={{ smWidth }}px): <BooleanDisplay :value="sme" /></div>
     <div> md: <BooleanDisplay :value="md" /></div>
     <div> lg: <BooleanDisplay :value="lg" /></div>
     <div> xl: <BooleanDisplay :value="xl" /></div>

diff --git a/packages/core/useBreakpoints/index.md b/packages/core/useBreakpoints/index.md
@@ -13,7 +13,10 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const smAndLarger = breakpoints.greater('sm')
+const smAndLarger = breakpoints.greaterOrEqual('sm') // sm and larger
+const largerThanSm = breakpoints.greater('sm') // only larger than sm
+const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
+const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg
 ```
 
 ```js

diff --git a/packages/core/useBreakpoints/index.ts b/packages/core/useBreakpoints/index.ts
@@ -34,34 +34,46 @@ export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, op
     return window.matchMedia(query).matches
   }
 
-  const greater = (k: K) => {
+  const greaterOrEqual = (k: K) => {
     return useMediaQuery(`(min-width: ${getValue(k)})`, options)
   }
 
   const shortcutMethods = Object.keys(breakpoints)
     .reduce((shortcuts, k) => {
       Object.defineProperty(shortcuts, k, {
-        get: () => greater(k as K),
+        get: () => greaterOrEqual(k as K),
         enumerable: true,
         configurable: true,
       })
       return shortcuts
     }, {} as Record<K, Ref<boolean>>)
 
   return {
-    greater,
+    greater(k: K) {
+      return useMediaQuery(`(min-width: ${getValue(k, 0.1)})`, options)
+    },
+    greaterOrEqual,
     smaller(k: K) {
       return useMediaQuery(`(max-width: ${getValue(k, -0.1)})`, options)
     },
+    smallerOrEqual(k: K) {
+      return useMediaQuery(`(max-width: ${getValue(k)})`, options)
+    },
     between(a: K, b: K) {
       return useMediaQuery(`(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`, options)
     },
     isGreater(k: K) {
+      return match(`(min-width: ${getValue(k, 0.1)})`)
+    },
+    isGreaterOrEqual(k: K) {
       return match(`(min-width: ${getValue(k)})`)
     },
     isSmaller(k: K) {
       return match(`(max-width: ${getValue(k, -0.1)})`)
     },
+    isSmallerOrEqual(k: K) {
+      return match(`(max-width: ${getValue(k)})`)
+    },
     isInBetween(a: K, b: K) {
       return match(`(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`)
     },
@@ -71,9 +83,13 @@ export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, op
 
 export type UseBreakpointsReturn<K extends string = string> = {
   greater: (k: K) => Ref<boolean>
+  greaterOrEqual: (k: K) => Ref<boolean>
   smaller(k: K): Ref<boolean>
+  smallerOrEqual: (k: K) => Ref<boolean>
   between(a: K, b: K): Ref<boolean>
   isGreater(k: K): boolean
+  isGreaterOrEqual(k: K): boolean
   isSmaller(k: K): boolean
+  isSmallerOrEqual(k: K): boolean
   isInBetween(a: K, b: K): boolean
 } & Record<K, Ref<boolean>>