vue-cloudimage-responsive - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

CHANGELOG.md

@@ -28,2 +28,6 @@ # Changelog
 -------------
+## 2.0.2 - 2024-01-02
+### Fixed
+- apiVersion config
+
 ## 2.0.1 - 2022-08-30
@@ -30,0 +34,0 @@ ### Changed

dist/index.js

 /*
- * vue-cloudimage-responsive v2.0.1
+ * vue-cloudimage-responsive v2.0.2
  *
@@ -8,2 +8,2 @@ * @license
  */
-import{isServer as e,generateAlt as i,imgStyles as o,processReactNode as t,backgroundStyles as s,processParams as r,CONSTANTS as a}from"cloudimage-responsive-utils";import{resolveComponent as d,openBlock as l,createBlock as p,withCtx as n,createElementBlock as g,normalizeStyle as c,normalizeClass as m,createElementVNode as h,createCommentVNode as u,Fragment as v,renderSlot as y}from"vue";import{debounce as w}from"throttle-debounce";const I=({config:e={},alt:i="",className:o="",src:t,sizes:s,width:r,height:a,params:d,ratio:l})=>({config:e,alt:i,className:o,src:t||void 0,sizes:s||void 0,imgNodeWidth:r,imgNodeHeight:a,params:d||void 0,ratio:l||void 0});var f={inject:["cloudProvider"],props:{src:{type:String,default:void 0,required:!0},width:{type:String,default:void 0},height:{type:String,default:void 0},params:{type:String,default:void 0},sizes:{type:Object,default:void 0},ratio:{type:Number},alt:{type:String},className:{type:String},onImgLoad:{type:Function,default:void 0},doNotReplaceURL:{type:Boolean,default:!1},disableAnimation:{type:Boolean,default:!1}},data(){return{server:e(),lazyLoadActive:!0,cloudimgURL:"",processed:!1,loaded:!1,loadedImageWidth:"",loadedImageHeight:"",loadedImageRatio:"",processedImage:{operation:"",ratio:1,preview:"",cloudimgSRCSET:[]},properties:{src:this.src,width:this.width,height:this.height,params:this.params,sizes:this.sizes,ratio:this.ratio,alt:this.alt||i(this.src),className:this.className,config:this.cloudProvider.config,onImgLoad:this.onImgLoad,doNotReplaceURL:this.doNotReplaceURL,disableAnimation:this.disableAnimation},preserveSize:"",imgNodeWidth:"",imgNodeHeight:"",otherProps:"",cloudimgSRCSET:"",imgStyle:"",picture:"",previewWrapper:"",previewImg:"",loadedStyle:""}},mounted(){if(this.server)return;const e=this.processedImage.operation,i=this.processedImage.preview,t=this.loaded,s=this.previewLoaded,r=this.cloudProvider.config.placeholderBackground,{preserveSize:a,imgNodeWidth:d,imgNodeHeight:l,...p}=I(this.properties);console.log(p);const{delay:n}=this.properties.config;void 0!==n?setTimeout((()=>{this.processImg()}),n):this.processImg(),this.loadedStyle=`${this.className} cloudimage-background loading`.trim(),this.previewWrapper=o.previewWrapper(),this.previewImg=o.previewImg({loaded:t,operation:e}),this.imgStyle=o.img({preview:i,loaded:t,operation:e}),this.imgStyles=o.image({preserveSize:a,imgNodeWidth:d,imgNodeHeight:l,operation:e}),this.picture=o.picture({preserveSize:a,imgNodeWidth:d,imgNodeHeight:l,ratio:this.processedImage.ratio||this.loadedImageRatio,previewLoaded:s,loaded:t,placeholderBackground:r,operation:e}),this.preserveSize=a,this.imgNodeWidth=d,this.imgNodeHeight=l,this.otherProps={...p}},updated(){if(this.processedImage.cloudimgSRCSET){const e=this.processedImage.cloudimgSRCSET.map((({dpr:e,url:i})=>`${i} ${e}x`)).join(", ");this.cloudimgSRCSET=e}},methods:{handler(){setTimeout((()=>{this.lazyLoadActive=!1}),100)},processImg(e,i){const o=this.$el,s=t(this.properties,o,e,i);s&&(this.processedImage=s)},onPreviewLoaded(e){this.previewLoaded||(this.updateLoadedImageSize(e.target),this.previewLoaded=!0)},updateLoadedImageSize(e){this.loadedImageWidth=e.naturalWidth,this.loadedImageHeight=e.naturalHeight,this.loadedImageRatio=e.naturalWidth/e.naturalHeight},_onImgLoad(e){this.updateLoadedImageSize(e.target),this.loaded=!0;const{onImgLoad:i}=this.properties;"function"==typeof i&&i(e)}},watch:{"properties.config.innerWidth":function(e,i){if(this.server)return;const t=this.processedImage.operation,s=this.processedImage.preview,r=this.loaded,{preserveSize:a,imgNodeWidth:d,imgNodeHeight:l}=I(this.properties),p=this.previewLoaded,n=this.cloudProvider.config.placeholderBackground,{config:{innerWidth:g}}=this.properties;i!==g&&this.processImg(!0,g>i),this.previewWrapper=o.previewWrapper(),this.previewImg=o.previewImg({loaded:r,operation:t}),this.imgStyle=o.img({preview:s,loaded:r,operation:t}),this.picture=o.picture({preserveSize:a,imgNodeWidth:d,imgNodeHeight:l,ratio:this.processedImage.ratio||this.loadedImageRatio,previewLoaded:p,loaded:r,placeholderBackground:n,operation:t})},"properties.src":function(e,i){const{src:o}=this.properties;o!==i.src&&this.processImg()},loaded:function(e){const i=this.processedImage.operation,t=this.processedImage.preview,s=e,{preserveSize:r,imgNodeWidth:a,imgNodeHeight:d}=I(this.properties),l=this.previewLoaded,p=this.cloudProvider.config.placeholderBackground;s&&(this.previewWrapper=o.previewWrapper(),this.previewImg=o.previewImg({loaded:s,operation:i}),this.imgStyle=o.img({preview:t,loaded:s,operation:i}),this.picture=o.picture({preserveSize:r,imgNodeWidth:a,imgNodeHeight:d,ratio:this.processedImage.ratio||this.loadedImageRatio,previewLoaded:l,loaded:s,placeholderBackground:p,operation:i})),this.loadedStyle=`${this.className} cloudimage-background ${s?"loaded":"loading"}`.trim()}}};const L=["src","srcset","alt","ratio"],S=["src","alt"],R=["alt","src","ratio","srcset"],W=["src","srcset","alt","ratio"],N=["src","alt"],z=["alt","src","ratio","srcset"];f.render=function(e,i,o,t,s,r){const a=d("lazy-component");return!s.server&&s.properties.config.lazyLoading&&s.lazyLoadActive?(l(),p(a,{key:0,onShow:r.handler},{default:n((()=>[s.properties.disableAnimation?(l(),g("img",{key:0,src:s.processedImage.cloudimgURL,srcset:s.cloudimgSRCSET,alt:s.properties.alt,style:c(e.imgStyles),ratio:s.otherProps.ratio,onLoad:i[0]||(i[0]=(...e)=>r._onImgLoad&&r._onImgLoad(...e))},null,44,L)):(l(),g("div",{key:1,class:m(s.loadedStyle),style:c(s.picture)},[s.processedImage.preview&&"bound"!==s.processedImage.operation?(l(),g("div",{key:0,style:c(s.previewWrapper)},[h("img",{style:c(s.previewImg),src:s.processedImage.previewCloudimgURL,alt:"low quality preview for "+s.properties.alt,onLoad:i[1]||(i[1]=(...e)=>r.onPreviewLoaded&&r.onPreviewLoaded(...e))},null,44,S)],4)):u("v-if",!0),h("img",{alt:s.properties.alt,style:c(s.imgStyle),src:s.processedImage.cloudimgURL,ratio:s.otherProps.ratio,onLoad:i[2]||(i[2]=(...e)=>r._onImgLoad&&r._onImgLoad(...e)),srcset:s.cloudimgSRCSET},null,44,R)],6))])),_:1},8,["onShow"])):s.server?u("v-if",!0):(l(),g(v,{key:1},[s.properties.disableAnimation?(l(),g("img",{key:0,src:s.processedImage.cloudimgURL,srcset:s.cloudimgSRCSET,alt:s.properties.alt,style:c(e.imgStyles),ratio:s.otherProps.ratio,onLoad:i[3]||(i[3]=(...e)=>r._onImgLoad&&r._onImgLoad(...e))},null,44,W)):(l(),g("div",{key:1,class:m(s.loadedStyle),style:c(s.picture)},[s.processedImage.preview&&"bound"!==s.processedImage.operation?(l(),g("div",{key:0,style:c(s.previewWrapper)},[h("img",{style:c(s.previewImg),src:s.processedImage.previewCloudimgURL,alt:"low quality preview for "+s.properties.alt,onLoad:i[4]||(i[4]=(...e)=>r.onPreviewLoaded&&r.onPreviewLoaded(...e))},null,44,N)],4)):u("v-if",!0),h("img",{alt:s.properties.alt,style:c(s.imgStyle),src:s.processedImage.cloudimgURL,ratio:s.otherProps.ratio,onLoad:i[5]||(i[5]=(...e)=>r._onImgLoad&&r._onImgLoad(...e)),srcset:s.cloudimgSRCSET},null,44,z)],6))],64))},f.__file="src/Img.vue";var C={inject:["cloudProvider"],props:{src:{type:String,default:void 0,required:!0},width:{type:String,default:void 0},height:{type:String,default:void 0},params:{type:String,default:void 0},sizes:{type:Object,default:void 0},ratio:{type:Number},alt:{type:String},className:{type:String},styles:{type:Object},onImgLoad:{type:Function,default:void 0},doNotReplaceURL:{type:Boolean,default:!1}},data(){return{server:e(),lazyLoadActive:!0,cloudimgURL:"",processed:!1,loaded:!1,processedImage:{},properties:{src:this.src,params:this.params,config:this.cloudProvider.config,style:this.styles,width:this.width,height:this.height,sizes:this.sizes,ratio:this.ratio,alt:this.alt,className:this.className,onImgLoad:this.onImgLoad,doNotReplaceURL:this.doNotReplaceURL},container:{},previewBgWrapper:{},previewBg:"",lazyLoadConfig:{},otherProps:{},loadedStyle:{}}},mounted(){if(this.server)return;const e=this.loaded;this.loadedStyle=[this.className,"cloudimage-background","loading"],this.previewBgWrapper=s.previewBgWrapper({loaded:e}),this.processBg()},methods:{handler(){const e=this.properties.style,i=this.processedImage.cloudimgURL,o=this.processedImage.previewCloudimgURL;this.lazyLoadActive=!1,this.container=s.container({style:e,cloudimgURL:i}),this.previewBg=s.previewBg({previewCloudimgURL:o})},processBg(e,i){const o=this.$el,s=t(this.properties,o,e,i);s&&(this.processedImage=s)},preLoadImg(e){const i=new Image;i.onload=this._onImgLoad,i.src=e},_onImgLoad(e){this.loaded=!0;const{onImgLoad:i}=this.properties;"function"==typeof i&&i(e)}},watch:{"properties.config.innerWidth":function(e,i){const o=this.properties.style,t=this.processedImage.cloudimgURL,r=this.processedImage.previewCloudimgURL,a=this.loaded;if(this.server)return;const{config:{innerWidth:d}}=this.properties;i!==d&&this.processBg(!0,d>i),this.container=s.container({style:o,cloudimgURL:t}),this.previewBgWrapper=s.previewBgWrapper({loaded:a}),this.previewBg=s.previewBg({previewCloudimgURL:r})},"properties.src":function(e,i){const{src:o}=this.properties;o!==i.src&&this.processBg()},loaded:function(e){const i=e,o=this.properties.style,t=this.processedImage.cloudimgURL,r=this.processedImage.previewCloudimgURL;i?(this.loadedStyle=[this.className,"cloudimage-background","loaded"].join(" ").trim(),this.container=s.container({style:o,cloudimgURL:t}),this.previewBgWrapper=s.previewBgWrapper({loaded:i}),this.previewBg=s.previewBg({previewCloudimgURL:r})):this.loadedStyle=[this.className,"cloudimage-background","loading"]},lazyLoadActive:function(){if(!this.lazyLoadActive){const{config:{delay:e}}=this.cloudProvider;void 0!==e?setTimeout((()=>{this.preLoadImg(this.processedImage.cloudimgURL)}),e):this.preLoadImg(this.processedImage.cloudimgURL)}}}};const k={key:0},B={key:1,class:"cloudimage-background-content",style:{position:"relative"}},U={key:1,class:"cloudimage-background-content",style:{position:"relative"}};C.render=function(e,i,o,t,s,r){const a=d("lazy-component");return s.processed?(l(),g("div",k,[y(e.$slots,"default")])):s.properties.config.lazyLoading&&s.lazyLoadActive?(l(),p(a,{key:1,onShow:r.handler},{default:n((()=>[h("div",{class:m(s.loadedStyle),style:c(s.container)},[s.processedImage.preview?(l(),g("div",{key:0,style:c(s.previewBgWrapper)},[h("div",{style:c(s.previewBg)},null,4)],4)):u("v-if",!0),s.processedImage.preview?(l(),g("div",B,[y(e.$slots,"default")])):y(e.$slots,"default",{key:2})],6)])),_:3},8,["onShow"])):(l(),g("div",{key:2,class:m(s.loadedStyle),style:c(s.container)},[s.processedImage.preview?(l(),g("div",{key:0,style:c(s.previewBgWrapper)},[h("div",{style:c(s.previewBg)},null,4)],4)):u("v-if",!0),s.processedImage.preview?(l(),g("div",U,[y(e.$slots,"default")])):y(e.$slots,"default",{key:2})],6))},C.__file="src/Background.vue";var b={props:{cloudImageConfig:Object},data(){return{config:{token:this.cloudImageConfig.token||"",domain:this.cloudImageConfig.customDomain||"cloudimg.io",customDomain:this.cloudImageConfig.customDomain||!1,lazyLoading:this.cloudImageConfig.lazyLoading||!0,lazyLoadOffset:this.cloudImageConfig.lazyLoadOffset||100,placeholderBackground:this.cloudImageConfig.placeholderBackground||"#f4f4f4",baseURL:this.cloudImageConfig.baseUrl||this.cloudImageConfig.baseURL,ratio:1.5,delay:this.cloudImageConfig.delay||0,exactSize:!1,presets:this.cloudImageConfig.presets?this.cloudImageConfig.presets:{xs:"(max-width: 575px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)"},params:this.cloudImageConfig.params?r(this.cloudImageConfig.params):"org_if_sml=1",apiVersion:"v7",imageSizeAttributes:this.cloudImageConfig.imageSizeAttributes||"use",innerWidth:"undefined"!=typeof window?window.innerWidth:null,previewQualityFactor:10,doNotReplaceURL:this.cloudImageConfig.doNotReplaceURL||!1,devicePixelRatioList:this.cloudImageConfig.devicePixelRatioList||a.DEVICE_PIXEL_RATIO_LIST,limitFactor:this.cloudImageConfig.limitFactor||100,minLowQualityWidth:this.cloudImageConfig.lowQualityPreview.minImgWidth,xs:"(max-width: 575px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)"}}},created(){"undefined"!=typeof window&&window.addEventListener("resize",w(100,(()=>{this.config.innerWidth=window.innerWidth})))},beforeUnmount(){window.removeEventListener("resize",w(100,(()=>{this.config.innerWidth=window.innerWidth})))},provide(){const e={};return Object.defineProperty(e,"config",{enumerable:!0,get:()=>this.config}),{cloudProvider:e}}};b.render=function(e,i,o,t,s,r){return l(),g("div",null,[y(e.$slots,"default")])},b.__file="src/CloudImageProvider.vue";export{C as BackgroundImg,b as CloudImageProvider,f as Img,f as default};
+import{isServer as e,generateAlt as i,imgStyles as o,processReactNode as t,backgroundStyles as s,processParams as r,CONSTANTS as a}from"cloudimage-responsive-utils";import{resolveComponent as d,openBlock as l,createBlock as p,withCtx as n,createElementBlock as g,normalizeStyle as c,normalizeClass as m,createElementVNode as h,createCommentVNode as u,Fragment as v,renderSlot as y}from"vue";import{debounce as I}from"throttle-debounce";const w=({config:e={},alt:i="",className:o="",src:t,sizes:s,width:r,height:a,params:d,ratio:l})=>({config:e,alt:i,className:o,src:t||void 0,sizes:s||void 0,imgNodeWidth:r,imgNodeHeight:a,params:d||void 0,ratio:l||void 0});var f={inject:["cloudProvider"],props:{src:{type:String,default:void 0,required:!0},width:{type:String,default:void 0},height:{type:String,default:void 0},params:{type:String,default:void 0},sizes:{type:Object,default:void 0},ratio:{type:Number},alt:{type:String},className:{type:String},onImgLoad:{type:Function,default:void 0},doNotReplaceURL:{type:Boolean,default:!1},disableAnimation:{type:Boolean,default:!1}},data(){return{server:e(),lazyLoadActive:!0,cloudimgURL:"",processed:!1,loaded:!1,loadedImageWidth:"",loadedImageHeight:"",loadedImageRatio:"",processedImage:{operation:"",ratio:1,preview:"",cloudimgSRCSET:[]},properties:{src:this.src,width:this.width,height:this.height,params:this.params,sizes:this.sizes,ratio:this.ratio,alt:this.alt||i(this.src),className:this.className,config:this.cloudProvider.config,onImgLoad:this.onImgLoad,doNotReplaceURL:this.doNotReplaceURL,disableAnimation:this.disableAnimation},preserveSize:"",imgNodeWidth:"",imgNodeHeight:"",otherProps:"",cloudimgSRCSET:"",imgStyle:"",picture:"",previewWrapper:"",previewImg:"",loadedStyle:""}},mounted(){if(this.server)return;const e=this.processedImage.operation,i=this.processedImage.preview,t=this.loaded,s=this.previewLoaded,r=this.cloudProvider.config.placeholderBackground,{preserveSize:a,imgNodeWidth:d,imgNodeHeight:l,...p}=w(this.properties),{delay:n}=this.properties.config;void 0!==n?setTimeout((()=>{this.processImg()}),n):this.processImg(),this.loadedStyle=`${this.className} cloudimage-background loading`.trim(),this.previewWrapper=o.previewWrapper(),this.previewImg=o.previewImg({loaded:t,operation:e}),this.imgStyle=o.img({preview:i,loaded:t,operation:e}),this.imgStyles=o.image({preserveSize:a,imgNodeWidth:d,imgNodeHeight:l,operation:e}),this.picture=o.picture({preserveSize:a,imgNodeWidth:d,imgNodeHeight:l,ratio:this.processedImage.ratio||this.loadedImageRatio,previewLoaded:s,loaded:t,placeholderBackground:r,operation:e}),this.preserveSize=a,this.imgNodeWidth=d,this.imgNodeHeight=l,this.otherProps={...p}},updated(){if(this.processedImage.cloudimgSRCSET){const e=this.processedImage.cloudimgSRCSET.map((({dpr:e,url:i})=>`${i} ${e}x`)).join(", ");this.cloudimgSRCSET=e}},methods:{handler(){setTimeout((()=>{this.lazyLoadActive=!1}),100)},processImg(e,i){const o=this.$el,s=t(this.properties,o,e,i);s&&(this.processedImage=s)},onPreviewLoaded(e){this.previewLoaded||(this.updateLoadedImageSize(e.target),this.previewLoaded=!0)},updateLoadedImageSize(e){this.loadedImageWidth=e.naturalWidth,this.loadedImageHeight=e.naturalHeight,this.loadedImageRatio=e.naturalWidth/e.naturalHeight},_onImgLoad(e){this.updateLoadedImageSize(e.target),this.loaded=!0;const{onImgLoad:i}=this.properties;"function"==typeof i&&i(e)}},watch:{"properties.config.innerWidth":function(e,i){if(this.server)return;const t=this.processedImage.operation,s=this.processedImage.preview,r=this.loaded,{preserveSize:a,imgNodeWidth:d,imgNodeHeight:l}=w(this.properties),p=this.previewLoaded,n=this.cloudProvider.config.placeholderBackground,{config:{innerWidth:g}}=this.properties;i!==g&&this.processImg(!0,g>i),this.previewWrapper=o.previewWrapper(),this.previewImg=o.previewImg({loaded:r,operation:t}),this.imgStyle=o.img({preview:s,loaded:r,operation:t}),this.picture=o.picture({preserveSize:a,imgNodeWidth:d,imgNodeHeight:l,ratio:this.processedImage.ratio||this.loadedImageRatio,previewLoaded:p,loaded:r,placeholderBackground:n,operation:t})},"properties.src":function(e,i){const{src:o}=this.properties;o!==i.src&&this.processImg()},loaded:function(e){const i=this.processedImage.operation,t=this.processedImage.preview,s=e,{preserveSize:r,imgNodeWidth:a,imgNodeHeight:d}=w(this.properties),l=this.previewLoaded,p=this.cloudProvider.config.placeholderBackground;s&&(this.previewWrapper=o.previewWrapper(),this.previewImg=o.previewImg({loaded:s,operation:i}),this.imgStyle=o.img({preview:t,loaded:s,operation:i}),this.picture=o.picture({preserveSize:r,imgNodeWidth:a,imgNodeHeight:d,ratio:this.processedImage.ratio||this.loadedImageRatio,previewLoaded:l,loaded:s,placeholderBackground:p,operation:i})),this.loadedStyle=`${this.className} cloudimage-background ${s?"loaded":"loading"}`.trim()}}};const L=["src","srcset","alt","ratio"],S=["src","alt"],R=["alt","src","ratio","srcset"],W=["src","srcset","alt","ratio"],N=["src","alt"],z=["alt","src","ratio","srcset"];f.render=function(e,i,o,t,s,r){const a=d("lazy-component");return!s.server&&s.properties.config.lazyLoading&&s.lazyLoadActive?(l(),p(a,{key:0,onShow:r.handler},{default:n((()=>[s.properties.disableAnimation?(l(),g("img",{key:0,src:s.processedImage.cloudimgURL,srcset:s.cloudimgSRCSET,alt:s.properties.alt,style:c(e.imgStyles),ratio:s.otherProps.ratio,onLoad:i[0]||(i[0]=(...e)=>r._onImgLoad&&r._onImgLoad(...e))},null,44,L)):(l(),g("div",{key:1,class:m(s.loadedStyle),style:c(s.picture)},[s.processedImage.preview&&"bound"!==s.processedImage.operation?(l(),g("div",{key:0,style:c(s.previewWrapper)},[h("img",{style:c(s.previewImg),src:s.processedImage.previewCloudimgURL,alt:"low quality preview for "+s.properties.alt,onLoad:i[1]||(i[1]=(...e)=>r.onPreviewLoaded&&r.onPreviewLoaded(...e))},null,44,S)],4)):u("v-if",!0),h("img",{alt:s.properties.alt,style:c(s.imgStyle),src:s.processedImage.cloudimgURL,ratio:s.otherProps.ratio,onLoad:i[2]||(i[2]=(...e)=>r._onImgLoad&&r._onImgLoad(...e)),srcset:s.cloudimgSRCSET},null,44,R)],6))])),_:1},8,["onShow"])):s.server?u("v-if",!0):(l(),g(v,{key:1},[s.properties.disableAnimation?(l(),g("img",{key:0,src:s.processedImage.cloudimgURL,srcset:s.cloudimgSRCSET,alt:s.properties.alt,style:c(e.imgStyles),ratio:s.otherProps.ratio,onLoad:i[3]||(i[3]=(...e)=>r._onImgLoad&&r._onImgLoad(...e))},null,44,W)):(l(),g("div",{key:1,class:m(s.loadedStyle),style:c(s.picture)},[s.processedImage.preview&&"bound"!==s.processedImage.operation?(l(),g("div",{key:0,style:c(s.previewWrapper)},[h("img",{style:c(s.previewImg),src:s.processedImage.previewCloudimgURL,alt:"low quality preview for "+s.properties.alt,onLoad:i[4]||(i[4]=(...e)=>r.onPreviewLoaded&&r.onPreviewLoaded(...e))},null,44,N)],4)):u("v-if",!0),h("img",{alt:s.properties.alt,style:c(s.imgStyle),src:s.processedImage.cloudimgURL,ratio:s.otherProps.ratio,onLoad:i[5]||(i[5]=(...e)=>r._onImgLoad&&r._onImgLoad(...e)),srcset:s.cloudimgSRCSET},null,44,z)],6))],64))},f.__file="src/Img.vue";var C={inject:["cloudProvider"],props:{src:{type:String,default:void 0,required:!0},width:{type:String,default:void 0},height:{type:String,default:void 0},params:{type:String,default:void 0},sizes:{type:Object,default:void 0},ratio:{type:Number},alt:{type:String},className:{type:String},styles:{type:Object},onImgLoad:{type:Function,default:void 0},doNotReplaceURL:{type:Boolean,default:!1}},data(){return{server:e(),lazyLoadActive:!0,cloudimgURL:"",processed:!1,loaded:!1,processedImage:{},properties:{src:this.src,params:this.params,config:this.cloudProvider.config,style:this.styles,width:this.width,height:this.height,sizes:this.sizes,ratio:this.ratio,alt:this.alt,className:this.className,onImgLoad:this.onImgLoad,doNotReplaceURL:this.doNotReplaceURL},container:{},previewBgWrapper:{},previewBg:"",lazyLoadConfig:{},otherProps:{},loadedStyle:{}}},mounted(){if(this.server)return;const e=this.loaded;this.loadedStyle=[this.className,"cloudimage-background","loading"],this.previewBgWrapper=s.previewBgWrapper({loaded:e}),this.processBg()},methods:{handler(){const e=this.properties.style,i=this.processedImage.cloudimgURL,o=this.processedImage.previewCloudimgURL;this.lazyLoadActive=!1,this.container=s.container({style:e,cloudimgURL:i}),this.previewBg=s.previewBg({previewCloudimgURL:o})},processBg(e,i){const o=this.$el,s=t(this.properties,o,e,i);s&&(this.processedImage=s)},preLoadImg(e){const i=new Image;i.onload=this._onImgLoad,i.src=e},_onImgLoad(e){this.loaded=!0;const{onImgLoad:i}=this.properties;"function"==typeof i&&i(e)}},watch:{"properties.config.innerWidth":function(e,i){const o=this.properties.style,t=this.processedImage.cloudimgURL,r=this.processedImage.previewCloudimgURL,a=this.loaded;if(this.server)return;const{config:{innerWidth:d}}=this.properties;i!==d&&this.processBg(!0,d>i),this.container=s.container({style:o,cloudimgURL:t}),this.previewBgWrapper=s.previewBgWrapper({loaded:a}),this.previewBg=s.previewBg({previewCloudimgURL:r})},"properties.src":function(e,i){const{src:o}=this.properties;o!==i.src&&this.processBg()},loaded:function(e){const i=e,o=this.properties.style,t=this.processedImage.cloudimgURL,r=this.processedImage.previewCloudimgURL;i?(this.loadedStyle=[this.className,"cloudimage-background","loaded"].join(" ").trim(),this.container=s.container({style:o,cloudimgURL:t}),this.previewBgWrapper=s.previewBgWrapper({loaded:i}),this.previewBg=s.previewBg({previewCloudimgURL:r})):this.loadedStyle=[this.className,"cloudimage-background","loading"]},lazyLoadActive:function(){if(!this.lazyLoadActive){const{config:{delay:e}}=this.cloudProvider;void 0!==e?setTimeout((()=>{this.preLoadImg(this.processedImage.cloudimgURL)}),e):this.preLoadImg(this.processedImage.cloudimgURL)}}}};const k={key:0},B={key:1,class:"cloudimage-background-content",style:{position:"relative"}},U={key:1,class:"cloudimage-background-content",style:{position:"relative"}};C.render=function(e,i,o,t,s,r){const a=d("lazy-component");return s.processed?(l(),g("div",k,[y(e.$slots,"default")])):s.properties.config.lazyLoading&&s.lazyLoadActive?(l(),p(a,{key:1,onShow:r.handler},{default:n((()=>[h("div",{class:m(s.loadedStyle),style:c(s.container)},[s.processedImage.preview?(l(),g("div",{key:0,style:c(s.previewBgWrapper)},[h("div",{style:c(s.previewBg)},null,4)],4)):u("v-if",!0),s.processedImage.preview?(l(),g("div",B,[y(e.$slots,"default")])):y(e.$slots,"default",{key:2})],6)])),_:3},8,["onShow"])):(l(),g("div",{key:2,class:m(s.loadedStyle),style:c(s.container)},[s.processedImage.preview?(l(),g("div",{key:0,style:c(s.previewBgWrapper)},[h("div",{style:c(s.previewBg)},null,4)],4)):u("v-if",!0),s.processedImage.preview?(l(),g("div",U,[y(e.$slots,"default")])):y(e.$slots,"default",{key:2})],6))},C.__file="src/Background.vue";var b={props:{cloudImageConfig:Object},data(){return{config:{token:this.cloudImageConfig.token||"",domain:this.cloudImageConfig.customDomain||"cloudimg.io",customDomain:this.cloudImageConfig.customDomain||!1,lazyLoading:this.cloudImageConfig.lazyLoading||!0,lazyLoadOffset:this.cloudImageConfig.lazyLoadOffset||100,placeholderBackground:this.cloudImageConfig.placeholderBackground||"#f4f4f4",baseURL:this.cloudImageConfig.baseUrl||this.cloudImageConfig.baseURL,ratio:1.5,delay:this.cloudImageConfig.delay||0,exactSize:!1,presets:this.cloudImageConfig.presets?this.cloudImageConfig.presets:{xs:"(max-width: 575px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)"},params:this.cloudImageConfig.params?r(this.cloudImageConfig.params):"org_if_sml=1",apiVersion:void 0===this.cloudImageConfig.apiVersion?"v7":this.cloudImageConfig.apiVersion,imageSizeAttributes:this.cloudImageConfig.imageSizeAttributes||"use",innerWidth:"undefined"!=typeof window?window.innerWidth:null,previewQualityFactor:10,doNotReplaceURL:this.cloudImageConfig.doNotReplaceURL||!1,devicePixelRatioList:this.cloudImageConfig.devicePixelRatioList||a.DEVICE_PIXEL_RATIO_LIST,limitFactor:this.cloudImageConfig.limitFactor||100,minLowQualityWidth:this.cloudImageConfig.lowQualityPreview.minImgWidth,xs:"(max-width: 575px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)"}}},created(){"undefined"!=typeof window&&window.addEventListener("resize",I(100,(()=>{this.config.innerWidth=window.innerWidth})))},beforeUnmount(){window.removeEventListener("resize",I(100,(()=>{this.config.innerWidth=window.innerWidth})))},provide(){const e={};return Object.defineProperty(e,"config",{enumerable:!0,get:()=>this.config}),{cloudProvider:e}}};b.render=function(e,i,o,t,s,r){return l(),g("div",null,[y(e.$slots,"default")])},b.__file="src/CloudImageProvider.vue";export{C as BackgroundImg,b as CloudImageProvider,f as Img,f as default};

package.json

 {
   "name": "vue-cloudimage-responsive",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.js",

README.md

@@ -20,2 +20,7 @@ [![Release](https://img.shields.io/github/v/release/scaleflex/vue-cloudimage-responsive)](https://github.com/scaleflex/vue-cloudimage-responsive/releases)
 	</a>
+  <a href="https://www.cloudimage.io/#gh-dark-mode-only">
+    <img
+      alt="The Lounge"
+      src="https://scaleflex.cloudimg.io/v7/cloudimage.io/cloudimage-logo-light.png?vh=b798ab&w=350">
+  </a>
 </p>
@@ -37,3 +42,3 @@
 		•
-		<a href="https://codesandbox.io/s/vue-cloudimage-responsive-example-b64iq4" target="_blank">Code Sandbox</a>
+		<a href="https://codesandbox.io/s/vue-cloudimage-responsive-example-hwmgbs" target="_blank">Code Sandbox</a>
 		•
@@ -220,3 +225,3 @@ <a href="https://medium.com/@dmitry_82269/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074" target="_blank">Why?</a>
 
-<a href="https://codesandbox.io/s/vue-cloudimage-responsive-example-b64iq4"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/vue-cloudimage-responsive-example-hwmgbs"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
@@ -233,3 +238,3 @@ ### BackgroundImg component:
 
-<a href="https://codesandbox.io/s/vue-cloudimage-responsive-example-7dyqso"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/vue-cloudimage-responsive-backgroundimg-example-5v97tw"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
@@ -447,2 +452,8 @@ ## <a name="configuration"></a> Config
 
+### doNotReplaceURL
+
+###### Type: **bool** | Default: **false**
+
+If set to **true** the plugin will only add query params to the given source of image.
+
 ### width
@@ -470,8 +481,3 @@
 ```
-### doNotReplaceURL
 
-###### Type: **bool** | Default: **false**
-
-If set to **true** the plugin will only add query params to the given source of image.
-
 #### alternative syntax: type: **Object**
@@ -478,0 +484,0 @@

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

36813

increased by0.88%

Lines of code

57

increased by1.79%

Number of lines in readme file

562

increased by1.08%

No dependency changes