vue-intersect - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

__tests__/index.js

@@ -8,3 +8,2 @@ import Vue from 'vue/dist/vue.js'
 
-
 test('It should be a function', () => {
@@ -69,3 +68,3 @@ expect(typeof Intersect.created).toBe('function')
 
-test('It should be possible to set the threshold in a property', async () => {
+test('It should be possible to set the threshold property', async () => {
   const mockedIntersect = Object.assign({}, Intersect)
@@ -82,2 +81,29 @@ const vm = new Vue({
 
+test('It should be possible to set the root property', async () => {
+  const mockedIntersect = Object.assign({}, Intersect)
+  const vm = new Vue({
+    template: `<intersect :root="viewPort"><div></div></intersect>`,
+    components: {Intersect: mockedIntersect},
+    data () {
+      return {
+        viewPort: document.body
+      }
+    }
+  }).$mount()
+
+  await vm.$nextTick()
+  expect(vm._vnode.componentInstance.$options.propsData.root).toBeInstanceOf(HTMLElement)
+})
+
+test('It should be possible to set the rootMargin property', async () => {
+  const mockedIntersect = Object.assign({}, Intersect)
+  const vm = new Vue({
+    template: `<intersect root-margin="1px 1px 1px 1px"><div></div></intersect>`,
+    components: {Intersect: mockedIntersect}
+  }).$mount()
+
+  await vm.$nextTick()
+  expect(vm._vnode.componentInstance.$options.propsData.rootMargin).toBe('1px 1px 1px 1px')
+})
+
 test('It should disconnect the IntersectionObserver when the component is destroyed', async () => {
@@ -84,0 +110,0 @@ const mockedIntersect = Object.assign({}, Intersect)

dist/index.js

@@ -19,2 +19,16 @@ import Vue from 'vue';
       }
+    },
+    root: {
+      type: HTMLElement,
+      required: false,
+      default: function _default() {
+        return null;
+      }
+    },
+    rootMargin: {
+      type: String,
+      required: false,
+      default: function _default() {
+        return '0px 0px 0px 0px';
+      }
     }
@@ -30,3 +44,7 @@ },
       }
-    }, { threshold: this.threshold });
+    }, {
+      threshold: this.threshold,
+      root: this.root,
+      rootMargin: this.rootMargin
+    });
   },
@@ -33,0 +51,0 @@ mounted: function mounted() {

package.json

 {
   "name": "vue-intersect",
-  "version": "1.0.1",
-  "description": "A Vue component to add intersection observe a Vue component or HTML element.",
+  "version": "1.0.2",
+  "description": "A Vue component to add intersection-observer to a Vue component or HTML element.",
   "main": "dist/index.js",
@@ -10,5 +10,6 @@ "repository": "[e-mail]:heavyy/vue-intersect.git",
   "scripts": {
-    "test": "./node_modules/.bin/jest",
+    "test": "./node_modules/.bin/jest --coverage --coverageDirectory coverage",
     "lint": "./node_modules/.bin/eslint -c ./.eslintrc.js src/**/*.js",
-    "lint:fix": "./node_modules/.bin/eslint -c ./.eslintrc.js src/**/*.js --fix"
+    "lint:fix": "./node_modules/.bin/eslint -c ./.eslintrc.js src/**/*.js --fix",
+    "build": "./node_modules/.bin/babel ./src -d ./dist/"
   },
@@ -24,2 +25,3 @@ "dependencies": {
     "babel-preset-env": "^1.6.0",
+    "coveralls": "^2.13.1",
     "eslint": "^4.4.1",
@@ -26,0 +28,0 @@ "eslint-config-standard": "^10.2.1",

README.md

@@ -6,2 +6,21 @@ # Vue Intersect
 
+
+
+## Table of content
+
+* [Introduction](#introduction)
+* [Installation](#installation)
+* [Usage](#usage)
+* [Properties](#properties)
+* [Events](#events)
+* [Polyfill](#polyfill)
+
+## Introduction
+
+The [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) is an amazing API which allows you to observe one or more HTMLElement for when it has enterede or left the viewport.
+
+This API has many use cases like, infinite-scroll, lazy-loading or animations when an element enters the viewport.
+
+
+
 ## Installation
@@ -22,2 +41,4 @@
 
+
+
 ## Usage
@@ -61,8 +82,22 @@
 
-| Property         | Type     | Default | Required | Description                              |
-| ---------------- | -------- | ------- | -------- | ---------------------------------------- |
-| threshold        | Array    | [0.2]   | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
-| v-on:intersected | Function | null    | *no*     | Event fired on intersected               |
+| Property   | Type        | Default           | Required | Description                              |
+| ---------- | ----------- | ----------------- | -------- | ---------------------------------------- |
+| threshold  | Array       | [0.2]             | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
+| root       | HTMLElement | null              | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
+| rootMargin | String      | *0px 0px 0px 0px* | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
 
 
 
+## Events
+
+| Name            | Arguments | Description                 |
+| --------------- | --------- | --------------------------- |
+| **intersected** | *none*    | Event fired on intersected. |
+
+
+
+## Polyfill
+
+The IntersectionObserver API is not currently available in all browsers ([IE11, Safari and iOS Safari](http://caniuse.com/#feat=intersectionobserver)). If you intend to support these browsers, you'll need to add a poylfill to your bundle.
+
+[WICG IntersectionObserver Polyfill](https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill) is higly recommended.

src/index.js

@@ -17,2 +17,12 @@ import Vue from 'vue'
       default: () => [0.2]
+    },
+    root: {
+      type: HTMLElement,
+      required: false,
+      default: () => null
+    },
+    rootMargin: {
+      type: String,
+      required: false,
+      default: () => '0px 0px 0px 0px'
     }
@@ -26,3 +36,7 @@ },
       }
-    }, {threshold: this.threshold})
+    }, {
+      threshold: this.threshold,
+      root: this.root,
+      rootMargin: this.rootMargin
+    })
   },
@@ -29,0 +43,0 @@ mounted () {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

178923

increased by1581.61%

Number of package files

23

increased by109.09%

Lines of code

695

increased by237.38%

Number of lines in readme file

100

increased by51.52%

Worsened metrics

Dev dependency count

13

increased by8.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes