feat: add computed breakpoints

Author: reegodev

.github/workflows/node.js.yml

@@ -21,12 +21,19 @@ jobs:
 
     steps:
     - uses: actions/checkout@v2
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
+
     - run: npm install -g lerna start-server-and-test
     - run: lerna bootstrap
     - run: lerna run --scope vue-screen build --stream
     - run: lerna run --scope vue-screen test --stream
     - run: start-server-and-test "lerna run --scope vue-screen-examples serve --stream" http://localhost:8081 "lerna run --scope vue-screen-e2e cy:run  --stream"
+
+    - name: Coverage
+      uses: codecov/codecov-action@v1
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -3,4 +3,5 @@ dist
 !packages/docs/src/.vitepress/dist
 .nuxt
 packages/e2e/cypress/screenshots
-.DS_Store
+.DS_Store
+coverage

README.md

@@ -2,6 +2,7 @@
 [![Build Status](https://github.com/reegodev/vue-screen/workflows/Node.js%20CI/badge.svg)](https://github.com/reegodev/vue-screen/actions)
 [![npm version](https://img.shields.io/npm/v/vue-screen/next)](https://www.npmjs.com/package/vue-screen)
 [![npm downloads](https://img.shields.io/npm/dm/vue-screen)](https://www.npmjs.com/package/vue-screen)
+[![codecov](https://codecov.io/gh/reegodev/vue-screen/branch/master/graph/badge.svg?token=KTHOOUSHFJ)](https://codecov.io/gh/reegodev/vue-screen)
 
 <br>
 

packages/docs/src/.vitepress/config.js

@@ -16,7 +16,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 module.exports = {
-  base: '/vue-screen/',
+  // base: '/vue-screen/',
   lang: 'en-US',
   title: 'Vue-Screen',
   description: '"Reactive screen size and media query states for Vue components. Integrates with most UI frameworks out of the box.',

packages/docs/src/guide/configuration/composition-api.md

@@ -57,16 +57,50 @@ The value can either be a string literal, with one of the supported UI framework
 or an object that specifies a custom grid:
 
 ```ts
-Record<string, number | string>
+Record<string, number | string | ComputedBreakpoint>
 ```
 
 For example:
 ```js
+import { useGrid } from 'vue-screen'
+
 useGrid({
   phone: '340px',
   tablet: 768,
   desktop: '32em',
 })
 ```
+<br>
+
+#### Computed breakpoints
+
+Aside from using direct breakpoint values, you can also specify breakpoints that depend on other breakpoints, for example:
+
+```js
+import { useGrid } from 'vue-screen'
 
+useGrid({
+  phone: '340px',
+  tablet: 768,
+  desktop: '32em',
+  tabletAndDown: grid => !grid.desktop,
+})
+```
+
+In this example, the breakpoint `tabletAndDown` will be recalculated everytime `desktop` breakpoint changes.
+
+<br>
+
+#### Extending default UI frameworks breakpoints
+
+Sometimes it's useful to add new breakpoints to the default configuration of one of the supported UI frameworks.<br>
+You can do that by using the `extendGrid` helper:
+
+```js
+import { useGrid, extendGrid } from 'vue-screen'
+
+useGrid(extendGrid('tailwind', {
+  mdAndDown: grid => !grid.lg
+}))
+```
 

packages/docs/src/guide/upgrading.md

@@ -6,8 +6,7 @@ editLink: true
 
 ## Configuration
 v2 has brought a few breaking changes on the configuration.
-To see how to configure the libary please refer to the [configuration section](/vue-screen/guide/configuration/composition-api).<br>
-Callbacks have been removed and there is no plan on adding them back at the moment.
+To see how to configure the library please refer to the [configuration section](/vue-screen/guide/configuration/composition-api).<br>
 
 ## API
 

packages/docs/src/index.md

@@ -3,7 +3,7 @@ editLink: true
 title: Reactive screen size and media query states for VueJs
 ---
 ::: warning
-Version 2.0 only supports Vue 3 and is in early alpha version. There might still be API changes before final release.<br> v1 docs are available [here](https://github.com/reegodev/vue-screen/tree/v1.5.3#vuescreen)
+Version 2.0 only supports Vue 3 and is still in alpha.<br> v1 docs are available [here](https://github.com/reegodev/vue-screen/tree/v1.5.3#vuescreen)
 :::
 <br>
 <div style="text-align: center">

packages/lib/__tests__/useGrid.ts

@@ -1,7 +1,9 @@
 import {
   createGridObject,
   createConfigFromLiteral,
-  useGrid
+  useGrid,
+  extendGrid,
+  getCurrentBreakpoint
 } from '../src/useGrid'
 
 import { GridDefinitionLiteral } from '../src/types/grid'
@@ -38,7 +40,7 @@ describe('useGrid', () => {
     expect(Object.values(gridObject).every(value => value === false)).toBe(true)
   })
 
-  it('creates a reactive grid object', async () => {
+  it('creates a reactive grid object from a literal', async () => {
     const grid = useGrid('bulma')
 
     expect(grid.tablet).toBe(false)
@@ -51,4 +53,62 @@ describe('useGrid', () => {
     expect(grid.tablet).toBe(true)
   })
 
+  it('creates a reactive grid object from a custom config', async () => {
+    const grid = useGrid({
+      a: 0,
+      b: 1,
+      c: 2,
+    })
+
+    expect(grid.a).toBe(false)
+
+    await new Promise((resolve) => {
+      grid.a = true
+      watchEffect(() => resolve(grid))
+    })
+
+    expect(grid.a).toBe(true)
+  })
+
+  it('extends a grid literal config', async () => {
+    const grid = useGrid(extendGrid('bulma', {
+      tabletAndBelow: grid => !grid.desktop
+    }))
+
+    const allBreakpoints = Object.keys(grids['bulma']).concat(['breakpoint', 'tabletAndBelow'])
+    expect(Object.keys(grid).every(key => allBreakpoints.includes(key))).toBe(true)
+  })
+
+})
+
+describe('getCurrentBreakpoint', () => {
+  it('returns an empty value if no breakpoint is active', () => {
+    const config = {
+      a: 0,
+      b: 1,
+      c: 2
+    }
+    const gridObject = {
+      a: false,
+      b: false,
+      c: false,
+    }
+
+    expect(getCurrentBreakpoint(config, gridObject)).toBe('')
+  })
+
+  it('returns the currently active breakpoint', () => {
+    const config = {
+      a: 0,
+      b: 1,
+      c: 2
+    }
+    const gridObject = {
+      a: false,
+      b: true,
+      c: true,
+    }
+
+    expect(getCurrentBreakpoint(config, gridObject)).toBe('c')
+  })
 })

packages/lib/__tests__/useScreen.ts

@@ -33,7 +33,7 @@ describe('useScreen', () => {
       touch: false,
     } as ScreenConfig
 
-    const screen = useScreen(config)
+    const screen = useScreen(config, 300)
 
     expect(screen).toStrictEqual({
       resolution: `${config.width}x${config.height}`,

packages/lib/jest.config.js

@@ -10,4 +10,7 @@ module.exports = {
     "^.+\\.(ts|tsx)$": "ts-jest"
   },
   "testEnvironment": "node",
+  collectCoverage: true,
+  coveragePathIgnorePatterns: ['src/utils.ts', 'src/grids'],
+  coverageReporters: ['lcov', 'html', 'text'],
 }