vue-progressive-image - npm Package Compare versions

Comparing version 4.0.0-beta.5 to 4.0.0-beta.6

dist/vue-progressive-image.es.js

@@ -116,7 +116,8 @@ import { ref, computed, isRef, nextTick, onMounted, onUnmounted, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createElementVNode, withDirectives, vShow, createCommentVNode, createBlock, Transition, withCtx, renderSlot } from "vue";
     const rootRef = ref(null);
-    const mainImageRef = ref(null);
+    const imageRef = ref(null);
+    const placeholderRef = ref(null);
     const isMainImageRendered = ref(false);
     const isFallbackImageRendered = ref(false);
     const { isIntersected, watchIntersectionOnce } = useIntersect(rootRef);
-    const { loadImage, aspectRatio, width } = useImage(mainImageRef);
+    const { loadImage, aspectRatio, width } = useImage(imageRef);
     const isLoading = computed(() => !isMainImageRendered.value);
@@ -126,12 +127,2 @@ const paddingHack = computed(() => ({
     }));
-    const placeholderStyle = computed(() => {
-      const value = props.blur;
-      return {
-        top: `-${value}px`,
-        left: `-${value}px`,
-        width: `calc(100% + ${value * 2}px)`,
-        height: `calc(100% + ${value * 2}px)`,
-        filter: `blur(${value}px)`
-      };
-    });
     const componentStyle = computed(() => {
@@ -166,2 +157,6 @@ if (props.objectCover || width.value === 0) {
     onMounted(() => {
+      const blur = props.blur * 1;
+      if (props.placeholderSrc && blur !== IMAGE_BLUR) {
+        placeholderRef.value.style.setProperty("--blur", `${blur}px`);
+      }
       if (props.src) {
@@ -183,4 +178,4 @@ watchIntersectionOnce(onComponentIntersected);
             key: 0,
-            ref_key: "mainImageRef",
-            ref: mainImageRef,
+            ref_key: "imageRef",
+            ref: imageRef,
             class: "v-progressive-image-main",
@@ -200,7 +195,8 @@ src: isFallbackImageRendered.value ? __props.fallbackSrc : __props.src,
                 key: 0,
+                ref_key: "placeholderRef",
+                ref: placeholderRef,
                 class: "v-progressive-image-placeholder",
                 loading: "lazy",
-                style: normalizeStyle(unref(placeholderStyle)),
                 src: __props.placeholderSrc
-              }, null, 12, _hoisted_2)) : createCommentVNode("", true)
+              }, null, 8, _hoisted_2)) : createCommentVNode("", true)
             ]),
@@ -207,0 +203,0 @@ _: 1

dist/vue-progressive-image.umd.js

@@ -1,1 +0,1 @@
-(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.VueProgressiveImage={},a.Vue))})(this,function(a,e){"use strict";var M="";const h="success",I="error",y=o=>{const t=new Image,n=e.ref(0),c=e.ref(0),d=e.computed(()=>n.value?c.value/n.value:.5625),r=setInterval(()=>{t&&t.width&&(clearInterval(r),n.value=t.width,c.value=t.height)},10),m=i=>{const s=document.createElement("canvas");s.setAttribute("hidden",!0),s.setAttribute("data-src",i.src),s.width=1,s.height=1,document.body.appendChild(s),s.getContext("2d").drawImage(i,0,0),document.body.removeChild(s)};return{width:n,height:c,aspectRatio:d,loadImage:()=>{const i=e.isRef(o)?o.value:o,s=i.src;return t.src=s,t.complete?Promise.resolve():new Promise((p,g)=>{t.onload=()=>{m(i),e.nextTick(p)},t.onerror=g})}}};var R=o=>{const t=e.ref(!1),n={threshold:.2},c=new IntersectionObserver(r=>{r[0].isIntersecting&&(t.value=!0,c.disconnect())},n),d=r=>{const m=e.watch(t,f=>{f&&(e.nextTick().then(r),m())},{immediate:!0})};return e.onMounted(()=>{const r=e.isRef(o)?o.value:o;c.observe(r)}),e.onUnmounted(()=>{c.disconnect()}),{watchIntersectionOnce:d,isIntersected:t}};const b=["src","alt"],k=["src"],C={key:2,class:"v-progressive-image-slot-default"},u={props:{src:String,placeholderSrc:String,fallbackSrc:String,alt:String,customClass:String,blur:{type:[Number,String],default:40},delay:{type:[Number,String],default:0},objectCover:{type:Boolean,default:!1}},emits:[h,I],setup(o,{emit:t}){const n=o,c=e.ref(null),d=e.ref(null),r=e.ref(!1),m=e.ref(!1),{isIntersected:f,watchIntersectionOnce:i}=R(c),{loadImage:s,aspectRatio:p,width:g}=y(d),E=e.computed(()=>!r.value),_=e.computed(()=>({paddingBottom:`${p.value*100}%`})),A=e.computed(()=>{const l=n.blur;return{top:`-${l}px`,left:`-${l}px`,width:`calc(100% + ${l*2}px)`,height:`calc(100% + ${l*2}px)`,filter:`blur(${l}px)`}}),T=e.computed(()=>{if(!(n.objectCover||g.value===0))return{maxWidth:`${g.value}px`}}),w=e.computed(()=>[n.customClass,{"v-progressive-image-object-cover":n.objectCover}]),O=()=>{s().then(()=>{setTimeout(()=>{r.value=!0,t(h)},n.delay*1)}).catch(()=>{r.value=!0,m.value=!0,t(I,error)})};return e.onMounted(()=>{n.src&&i(O)}),(l,P)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootRef",ref:c,class:e.normalizeClass(["v-progressive-image",e.unref(w)]),style:e.normalizeStyle(e.unref(T))},[e.createElementVNode("div",{style:e.normalizeStyle(e.unref(_))},[e.unref(f)?e.withDirectives((e.openBlock(),e.createElementBlock("img",{key:0,ref_key:"mainImageRef",ref:d,class:"v-progressive-image-main",src:m.value?o.fallbackSrc:o.src,alt:o.alt},null,8,b)),[[e.vShow,r.value]]):e.createCommentVNode("",!0),o.placeholderSrc?(e.openBlock(),e.createBlock(e.Transition,{key:1,name:"v-progressive-image-fade",appear:""},{default:e.withCtx(()=>[e.unref(E)?(e.openBlock(),e.createElementBlock("img",{key:0,class:"v-progressive-image-placeholder",loading:"lazy",style:e.normalizeStyle(e.unref(A)),src:o.placeholderSrc},null,12,k)):e.createCommentVNode("",!0)]),_:1})):e.createCommentVNode("",!0),l.$slots.default?(e.openBlock(),e.createElementBlock("div",C,[e.renderSlot(l.$slots,"default",{isLoading:e.unref(E)})])):e.createCommentVNode("",!0)],4)],6))}},S=(o,t={})=>{Object.keys(t).forEach(n=>{u.props[n].default=t[n]}),o.component("ProgressiveImage",u)};a.ProgressiveImage=u,a.default=S,a.install=S,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.VueProgressiveImage={},a.Vue))})(this,function(a,e){"use strict";var w="";const h="success",I="error",y=r=>{const t=new Image,o=e.ref(0),s=e.ref(0),d=e.computed(()=>o.value?s.value/o.value:.5625),c=setInterval(()=>{t&&t.width&&(clearInterval(c),o.value=t.width,s.value=t.height)},10),l=i=>{const n=document.createElement("canvas");n.setAttribute("hidden",!0),n.setAttribute("data-src",i.src),n.width=1,n.height=1,document.body.appendChild(n),n.getContext("2d").drawImage(i,0,0),document.body.removeChild(n)};return{width:o,height:s,aspectRatio:d,loadImage:()=>{const i=e.isRef(r)?r.value:r,n=i.src;return t.src=n,t.complete?Promise.resolve():new Promise((u,p)=>{t.onload=()=>{l(i),e.nextTick(u)},t.onerror=p})}}};var b=r=>{const t=e.ref(!1),o={threshold:.2},s=new IntersectionObserver(c=>{c[0].isIntersecting&&(t.value=!0,s.disconnect())},o),d=c=>{const l=e.watch(t,m=>{m&&(e.nextTick().then(c),l())},{immediate:!0})};return e.onMounted(()=>{const c=e.isRef(r)?r.value:r;s.observe(c)}),e.onUnmounted(()=>{s.disconnect()}),{watchIntersectionOnce:d,isIntersected:t}};const k=["src","alt"],_=["src"],C={key:2,class:"v-progressive-image-slot-default"},g={props:{src:String,placeholderSrc:String,fallbackSrc:String,alt:String,customClass:String,blur:{type:[Number,String],default:40},delay:{type:[Number,String],default:0},objectCover:{type:Boolean,default:!1}},emits:[h,I],setup(r,{emit:t}){const o=r,s=e.ref(null),d=e.ref(null),c=e.ref(null),l=e.ref(!1),m=e.ref(!1),{isIntersected:i,watchIntersectionOnce:n}=b(s),{loadImage:u,aspectRatio:p,width:E}=y(d),R=e.computed(()=>!l.value),A=e.computed(()=>({paddingBottom:`${p.value*100}%`})),T=e.computed(()=>{if(!(o.objectCover||E.value===0))return{maxWidth:`${E.value}px`}}),M=e.computed(()=>[o.customClass,{"v-progressive-image-object-cover":o.objectCover}]),O=()=>{u().then(()=>{setTimeout(()=>{l.value=!0,t(h)},o.delay*1)}).catch(()=>{l.value=!0,m.value=!0,t(I,error)})};return e.onMounted(()=>{const f=o.blur*1;o.placeholderSrc&&f!==40&&c.value.style.setProperty("--blur",`${f}px`),o.src&&n(O)}),(f,G)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootRef",ref:s,class:e.normalizeClass(["v-progressive-image",e.unref(M)]),style:e.normalizeStyle(e.unref(T))},[e.createElementVNode("div",{style:e.normalizeStyle(e.unref(A))},[e.unref(i)?e.withDirectives((e.openBlock(),e.createElementBlock("img",{key:0,ref_key:"imageRef",ref:d,class:"v-progressive-image-main",src:m.value?r.fallbackSrc:r.src,alt:r.alt},null,8,k)),[[e.vShow,l.value]]):e.createCommentVNode("",!0),r.placeholderSrc?(e.openBlock(),e.createBlock(e.Transition,{key:1,name:"v-progressive-image-fade",appear:""},{default:e.withCtx(()=>[e.unref(R)?(e.openBlock(),e.createElementBlock("img",{key:0,ref_key:"placeholderRef",ref:c,class:"v-progressive-image-placeholder",loading:"lazy",src:r.placeholderSrc},null,8,_)):e.createCommentVNode("",!0)]),_:1})):e.createCommentVNode("",!0),f.$slots.default?(e.openBlock(),e.createElementBlock("div",C,[e.renderSlot(f.$slots,"default",{isLoading:e.unref(R)})])):e.createCommentVNode("",!0)],4)],6))}},S=(r,t={})=>{Object.keys(t).forEach(o=>{g.props[o].default=t[o]}),r.component("ProgressiveImage",g)};a.ProgressiveImage=g,a.default=S,a.install=S,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "vue-progressive-image",
-  "version": "4.0.0-beta.5",
+  "version": "4.0.0-beta.6",
   "description": "Vue progressive image loading plugin",
@@ -5,0 +5,0 @@ "main": "./dist/vue-progressive-image.umd.js",

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

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

18996

increased by0.08%

Worsened metrics

Lines of code

233

decreased by-1.27%

No dependency changes