feat: add global provide for screen and grid properties

packages/e2e/cypress/integration/plugin-inject-properties/example.spec.js

@@ -0,0 +1,119 @@
+/// <reference types="cypress" />
+
+import { grids } from '../../../../lib/dist/vue-screen.esm'
+const example = 'plugin-inject-properties'
+const height = 900
+const delay = 100
+
+describe(example, () => {
+  beforeEach(() => {
+    cy.visit(`/${example}/`)
+  })
+
+  describe('grid', () => {
+    const grid = grids.tailwind
+    Object.keys(grid).forEach(breakpoint => {
+
+      const width = parseInt(grid[breakpoint], 10)
+
+      context(`${breakpoint}`, () => {
+        it(`${breakpoint} is true at ${width}px`, () => {
+          cy.viewport(width, height)
+          cy.wait(delay)
+          cy.get(`.${breakpoint}`).should('have.text', 'true')
+          cy.get(`.breakpoint`).should('have.text', breakpoint)
+        })
+
+        it(`${breakpoint} is true above ${width}px`, () => {
+          cy.viewport(width + 1, height)
+          cy.wait(delay)
+          cy.get(`.${breakpoint}`).should('have.text', 'true')
+          cy.get(`.breakpoint`).should('have.text', breakpoint)
+        })
+
+        if (width > 0) {
+          it(`${breakpoint} is false below ${width}px`, () => {
+            cy.viewport(width - 1, height)
+            cy.wait(delay)
+            cy.get(`.${breakpoint}`).should('have.text', 'false')
+            cy.get(`.breakpoint`).should('not.have.text', breakpoint)
+          })
+        }
+      })
+
+    })
+  })
+
+  describe('screen', () => {
+    const viewports = [
+      {
+        preset: 'ipad-2',
+        width: 768,
+        height: 1024,
+        orientation: 'portrait',
+      },
+      {
+        preset: 'iphone-x',
+        width: 375,
+        height: 812,
+        orientation: 'portrait',
+      },
+      {
+        preset: 'iphone-x',
+        width: 812,
+        height: 375,
+        orientation: 'landscape',
+      },
+      {
+        preset: 'samsung-s10',
+        width: 360,
+        height: 760,
+        orientation: 'portrait',
+      },
+      {
+        preset: 'samsung-s10',
+        width: 760,
+        height: 360,
+        orientation: 'landscape',
+      },
+    ]
+
+    viewports.forEach((viewport) => {
+      context(`${viewport.preset} - ${viewport.orientation}`, () => {
+        const { width, height } = viewport
+
+        beforeEach(() => {
+          cy.viewport(viewport.preset, viewport.orientation)
+          cy.wait(delay)
+        })
+
+        it(`width is ${width}`, () => {
+          cy.get(`.width`).should('have.text', width)
+        })
+
+        it(`height is ${height}`, () => {
+          cy.get(`.height`).should('have.text', height)
+        })
+
+        it(`resolution is ${width}x${height}`, () => {
+          cy.get(`.resolution`).should('have.text', `${width}x${height}`)
+        })
+
+        it(`orientation is ${viewport.orientation}`, () => {
+          cy.get(`.orientation`).should('have.text', `${viewport.orientation}`)
+        })
+
+        it(`portrait is ${viewport.orientation === 'portrait' ? 'true' : 'false'}`, () => {
+          cy.get(`.portrait`).should('have.text', `${viewport.orientation === 'portrait' ? 'true' : 'false'}`)
+        })
+
+        it(`landscape is ${viewport.orientation === 'landscape' ? 'true' : 'false'}`, () => {
+          cy.get(`.landscape`).should('have.text', `${viewport.orientation === 'landscape' ? 'true' : 'false'}`)
+        })
+
+      })
+    })
+
+  })
+
+})

packages/examples/plugin-inject-properties/app.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { computed, inject } from 'vue'
+
+const grid = inject('grid')
+const screen = inject('screen')
+
+const gridKeys = computed(() => {
+  return Object.keys(grid)
+})
+
+const screenKeys = computed(() => {
+  return Object.keys(screen)
+})
+</script>
+<template>
+<table id="grid">
+  <tr v-for="key of gridKeys" :key="key">
+    <th>{{ key }}</th>
+    <td :class="key">{{ grid[key] }}</td>
+  </tr>
+</table>
+<table id="screen">
+  <tr v-for="key of screenKeys" :key="key">
+    <th>{{ key }}</th>
+    <td :class="key">{{ screen[key] }}</td>
+  </tr>
+</table>
+</template>

packages/examples/plugin-inject-properties/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <link rel="stylesheet" href="/reset.css">
+        <title>Plugin Inject properties | VueScreen examples</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="main.js"></script>
+  </body>
+</html>

packages/examples/plugin-inject-properties/main.js

@@ -0,0 +1,7 @@
+import { createApp } from "vue";
+import VueScreen from "vue-screen";
+import App from "./app.vue";
+
+createApp(App)
+  .use(VueScreen)
+  .mount("#app");

packages/lib/__tests__/plugin.ts

@@ -47,4 +47,15 @@ describe('plugin', () => {
     expect(app.config.globalProperties.$grid).toHaveProperty('small')
   })
 
+  it('provides screen and grid properties', () => {
+    const app = createApp({})
+    const provideMock = jest.spyOn(app, 'provide')
+    app.use({install});
+
+    expect(provideMock).toHaveBeenCalledTimes(2)
+    expect(provideMock).toHaveBeenCalledWith('screen', expect.any(Object))
+    expect(provideMock).toHaveBeenCalledWith('grid', expect.any(Object))
+
+    provideMock.mockReset();
+  })
 })

packages/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-screen",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "Reactive screen size and media query states for Vue. Integrates with most UI frameworks out of the box.",
   "main": "dist/vue-screen.cjs.js",
   "module": "dist/vue-screen.esm.js",

packages/lib/src/plugin.ts

@@ -25,6 +25,8 @@ export const install = (app: App, options: VueScreenConfig): void => {
 
   app.config.globalProperties.$screen = screen
   app.config.globalProperties.$grid = grid
+  app.provide('screen', screen);
+  app.provide('grid', grid);
 }
 
 export const plugin: Plugin = {