feat: add isLessOrEquals function (#74)

README.md

@@ -257,6 +257,16 @@ viewport.isLessThan('desktopWide') // Result: true.
 viewport.isLessThan('mobile') // Result: false.
 ```
 
+### `viewport.isLessOrEquals`
+- Type: Boolean
+
+```js
+// Example: viewport.breakpoint is "tablet".
+
+viewport.isLessOrEquals('tablet') // Result: true.
+viewport.isLessOrEquals('mobile') // Result: false.
+```
+
 ### `viewport.match`
 - Type: Boolean
 

playground/pages/index.vue

@@ -19,6 +19,9 @@
       <p>
         <code>isLessThan</code> → <b>{{ $viewport.isLessThan(breakpoint) }}</b>
       </p>
+      <p>
+        <code>isLessOrEquals</code> → <b>{{ $viewport.isLessOrEquals(breakpoint) }}</b>
+      </p>
       <p>
         <code>isGreaterThan</code> → <b>{{ $viewport.isGreaterThan(breakpoint) }}</b>
       </p>

src/runtime/manager.ts

@@ -73,6 +73,7 @@ export function createViewportManager(options: ViewportOptions, state: Ref<strin
     isGreaterOrEquals,
 
     isLessThan,
+    isLessOrEquals,
 
     match,
     matches,
@@ -128,6 +129,14 @@ export function createViewportManager(options: ViewportOptions, state: Ref<strin
     return breakpointIndex < currentIndex
   }
 
+  /**
+   * Returns true, if searchBreakpoint is less or equals the current breakpoint.
+   * @param searchBreakpoint - Breakpoint to search.
+   */
+  function isLessOrEquals(searchBreakpoint: string) {
+    return isLessThan(searchBreakpoint) || match(searchBreakpoint)
+  }
+
   /**
    * Returns true if current breakpoint is matching the value.
    * @param breakpointToMatch - Breakpoint value to match.