vue-screen - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "vue-screen",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Reactive window size and media query states for Vue components. Integrates with most UI frameworks.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -0,1 +1,2 @@
+[![npm version](https://badge.fury.io/js/vue-screen.svg)](https://badge.fury.io/js/vue-screen)
 [![Build Status](https://travis-ci.org/matteo-rigon/vue-screen.svg?branch=master)](https://travis-ci.org/matteo-rigon/vue-screen)
@@ -7,3 +8,3 @@ [![Build Status](https://img.shields.io/badge/vue-2.6.x-brightgreen.svg)](https://img.shields.io/badge/vue-2.x-brightgreen.svg)
 
-[https://matteo-rigon.github.io/vue-screen/](https://matteo-rigon.github.io/vue-screen/)
+[Demo](https://matteo-rigon.github.io/vue-screen/)
 
@@ -19,3 +20,3 @@ ## Features
 
-Vue 2.6+
+As the library uses Vue.Observable API internally, Vue 2.6+ is required.
 
@@ -90,5 +91,55 @@ ## Installation
 
-## Usage
+You can find default UI framework breakspoints [here](https://github.com/matteo-rigon/vue-screen/tree/develop/src/grids)
 
-After registering, the new property `$screen` will be injected on the Vue prototype. You can access it in every component using `this.$screen`.<br>
+## Basic usage
+
+After registering, the property `$screen` will be injected on the Vue prototype. You can access it in a component using `this.$screen`.
+
+#### In a template
+```html
+<template>
+    <div>
+        <p>Page width is {{ $screen.width }} px</p>
+        <p>Page height is {{ $screen.height }} px</p>
+    </div>
+</template>
+```
+
+#### As computed properties
+```html
+<template>
+    <div :class="media">
+        <p>VueScreen</p>
+    </div>
+</template>
+<script>
+export default {
+    computed: {
+        media() {
+            return {
+                'is-phone': this.$screen.sm,
+                'is-tablet': this.$screen.md,
+                'is-desktop': this.$screen.lg,
+                'can-touch': this.$screen.touch,
+            };
+        }
+    }
+}
+</script>
+```
+
+#### As watchers
+```js
+export default {
+    watch: {
+        '$screen.width'() {
+            alert('Width changed');
+        }
+    }
+}
+```
+
+Check out demo source code for more examples.
+
+## API
 Available properties on the `$screen` object:
@@ -117,3 +168,3 @@
 
-All browsers that support MatchMedia API
+All browsers that support matchMedia API
 
@@ -120,0 +171,0 @@ <p class="ciu_embed" data-feature="matchmedia" data-periods="current,past_1,past_2" data-accessible-colours="false">

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

704174

increased by1394.74%

Number of package files

47

increased by88%

Lines of code

913

increased by11.89%

Number of lines in readme file

177

increased by40.48%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes