v-lazy-image - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

dist/v-lazy-image.js

@@ -1,1 +0,1 @@
-var b=Object.defineProperty,h=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var l=(e,r,t)=>r in e?b(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,u=(e,r)=>{for(var t in r||(r={}))I.call(r,t)&&l(e,t,r[t]);if(a)for(var t of a(r))O.call(r,t)&&l(e,t,r[t]);return e},A=(e,r)=>h(e,y(r));(function(e,r){typeof exports=="object"&&typeof module!="undefined"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(e=typeof globalThis!="undefined"?globalThis:e||self,e.VLazyImage=r(e.Vue))})(this,function(e){"use strict";var r={props:{src:{type:String,required:!0},srcPlaceholder:{type:String,default:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"},srcset:{type:String},intersectionOptions:{type:Object,default:()=>({})},usePicture:{type:Boolean,default:!1}},inheritAttrs:!1,setup(t,{attrs:c,slots:f,emit:o}){const n=e.ref(null),s=e.reactive({observer:null,intersected:!1,loaded:!1}),g=e.computed(()=>s.intersected&&t.src?t.src:t.srcPlaceholder),v=e.computed(()=>s.intersected&&t.srcset?t.srcset:!1),d=()=>{n.value&&n.value.getAttribute("src")!==t.srcPlaceholder&&(s.loaded=!0,o("load",this.$el))},m=()=>o("error",n.value);return e.onMounted(()=>{"IntersectionObserver"in window&&(s.observer=new IntersectionObserver(i=>{i[0].isIntersecting&&(s.intersected=!0,s.observer.disconnect(),o("intersect"))},t.intersectionOptions),s.observer.observe(n.value))}),e.onBeforeUnmount(()=>{"IntersectionObserver"in window&&s.observer&&s.observer.disconnect()}),()=>{const i=e.h("img",A(u({ref:n,src:g.value,srcset:v.value||null},c),{class:[c.class,"v-lazy-image",{"v-lazy-image-loaded":s.loaded}],onLoad:d,onError:m}));return t.usePicture?e.h("picture",{ref:n,onLoad:d},s.intersected?[f.default,i]:[i]):i}}};return r});
+var b=Object.defineProperty,y=Object.defineProperties;var h=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var l=(e,r,t)=>r in e?b(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,u=(e,r)=>{for(var t in r||(r={}))I.call(r,t)&&l(e,t,r[t]);if(d)for(var t of d(r))O.call(r,t)&&l(e,t,r[t]);return e},A=(e,r)=>y(e,h(r));(function(e,r){typeof exports=="object"&&typeof module!="undefined"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(e=typeof globalThis!="undefined"?globalThis:e||self,e.VLazyImage=r(e.Vue))})(this,function(e){"use strict";var r={props:{src:{type:String,required:!0},srcPlaceholder:{type:String,default:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"},srcset:{type:String},intersectionOptions:{type:Object,default:()=>({})},usePicture:{type:Boolean,default:!1}},inheritAttrs:!1,setup(t,{attrs:c,slots:f,emit:o}){const s=e.ref(null),n=e.reactive({observer:null,intersected:!1,loaded:!1}),v=e.computed(()=>n.intersected&&t.src?t.src:t.srcPlaceholder),g=e.computed(()=>n.intersected&&t.srcset?t.srcset:!1),a=()=>{s.value&&s.value.getAttribute("src")!==t.srcPlaceholder&&(n.loaded=!0,o("load",s.value))},m=()=>o("error",s.value);return e.onMounted(()=>{"IntersectionObserver"in window&&(n.observer=new IntersectionObserver(i=>{i[0].isIntersecting&&(n.intersected=!0,n.observer.disconnect(),o("intersect"))},t.intersectionOptions),n.observer.observe(s.value))}),e.onBeforeUnmount(()=>{"IntersectionObserver"in window&&n.observer&&n.observer.disconnect()}),()=>{const i=e.h("img",A(u({ref:s,src:v.value,srcset:g.value||null},c),{class:[c.class,"v-lazy-image",{"v-lazy-image-loaded":n.loaded}],onLoad:a,onError:m}));return t.usePicture?e.h("picture",{ref:s,onLoad:a},n.intersected?[f.default,i]:[i]):i}}};return r});

package.json

 {
   "name": "v-lazy-image",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "scripts": {
@@ -14,5 +14,5 @@ "build": "vite build && vite build -m v2",
     "@babel/core": "^7.15.0",
-    "@cypress/vite-dev-server": "^2.0.7",
-    "@cypress/vue": "^3.0.3",
-    "@vitejs/plugin-vue": "^1.3.0",
+    "@cypress/vite-dev-server": "^2.2.2",
+    "@cypress/vue": "^3.1.1",
+    "@vitejs/plugin-vue": "^2.2.0",
     "@vue/babel-preset-app": "^4.5.13",
@@ -22,6 +22,6 @@ "@vue/compiler-sfc": "^3.2.1",
     "babel-jest": "^26.6.3",
-    "cypress": "^8.3.0",
+    "cypress": "^9.4.1",
     "jest": "^26.6.3",
-    "vite": "^2.4.4",
-    "vue": "^3.0.0",
+    "vite": "^2.8.1",
+    "vue": "^3.2.31",
     "vue-jest": "next"
@@ -28,0 +28,0 @@ },

README.md

@@ -23,3 +23,3 @@ # v-lazy-image
 <script setup>
-import VLazyImage from "v-lazy-image";
+  import VLazyImage from "v-lazy-image";
 </script>
@@ -32,3 +32,2 @@ ```
 import VLazyImage from "v-lazy-image/v2";
-// in case of problems, replace with this: import VLazyImage from 'v-lazy-image/v2/v-lazy-image.es.js'
 
@@ -72,3 +71,3 @@ export default {
 
-Aside from the following API, you can pass any *img* attribute, such as `alt`, and they'll be added to the rendered `<img>` tag.
+Aside from the following API, you can pass any _img_ attribute, such as `alt`, and they'll be added to the rendered `<img>` tag.
 
@@ -79,19 +78,18 @@ _Fields marked as (\*) are required._
 
-| Name                   | Type          | Default       | Description                                                                                                                                               |
-| ---------------------- | ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `src`                  | String _(\*)_ |       -       | Image `src` to lazy load when it intersects with the viewport                                                                                             |
-| `src-placeholder`      | String        | ' '           | If defined, it will be shown until the `src` image is loaded. <br> Useful for progressive image loading, [see demo](https://codesandbox.io/s/9l3n6j5944)  |
-| `srcset`               | String        |       -       | Images to be used for different resolutions                                                                                                               |
-| `intersection-options` | Object        | () => ({})    | The [Intersection Observer options object](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer). |
-| `use-picture`          | Boolean       | false         | Wrap the img in a picture tag. |
+| Name                   | Type          | Default    | Description                                                                                                                                               |
+| ---------------------- | ------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src`                  | String _(\*)_ | -          | Image `src` to lazy load when it intersects with the viewport                                                                                             |
+| `src-placeholder`      | String        | ' '        | If defined, it will be shown until the `src` image is loaded. <br> Useful for progressive image loading, [see demo](https://codesandbox.io/s/9l3n6j5944)  |
+| `srcset`               | String        | -          | Images to be used for different resolutions                                                                                                               |
+| `intersection-options` | Object        | () => ({}) | The [Intersection Observer options object](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer). |
+| `use-picture`          | Boolean       | false      | Wrap the img in a picture tag.                                                                                                                            |
 
 ### Events
 
-| Name        | Description                                              |
-| ----------- | -------------------------------------------------------- |
-| `intersect` | Triggered when the image intersects the viewport         |
-| `load`      | Triggered when the lazy image defined in `src` is loaded |
+| Name        | Description                                                  |
+| ----------- | ------------------------------------------------------------ |
+| `intersect` | Triggered when the image intersects the viewport             |
+| `load`      | Triggered when the lazy image defined in `src` is loaded     |
 | `error`     | Triggered when the lazy image defined in `src` fails to load |
 
-
 <!-- 
@@ -104,2 +102,1 @@ * [Simple demo](https://codesandbox.io/s/r5wmj970wm)
 ## Progressive Loading
-

Fixed 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

15232

increased by0.11%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

98

decreased by-2.97%

No dependency changes