From 48bf343d5699ce71160f4848b395d62bd06bba15 Mon Sep 17 00:00:00 2001
From: azaleta <24407500@qq.com>
Date: Sun, 4 Sep 2022 18:02:12 +0800
Subject: [PATCH] feat(useBreakpoints): support `greaterOrEqual` etc. (#2148)

---
 packages/core/useBreakpoints/demo.vue |  6 +++++-
 packages/core/useBreakpoints/index.md |  5 ++++-
 packages/core/useBreakpoints/index.ts | 22 +++++++++++++++++++---
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/core/useBreakpoints/demo.vue b/packages/core/useBreakpoints/demo.vue
index 0f7ee3d1fe5..b648e36683e 100644
--- 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
index f00da928d37..4cc0870b543 100644
--- 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
index b93b3d2bc52..d65aecb4ad3 100644
--- a/packages/core/useBreakpoints/index.ts
+++ b/packages/core/useBreakpoints/index.ts
@@ -34,14 +34,14 @@ 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,
       })
@@ -49,19 +49,31 @@ export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, op
     }, {} 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>>