import{t as e}from"./_plugin-vue_export-helper.dOX-z6IG.js";import{computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,mergeProps as a,normalizeStyle as o,onBeforeUnmount as s,onMounted as c,openBlock as l,ref as u,watch as d}from"/vue.js";var f={class:`nc-image`,ref:`root`},p=[`src`,`alt`],m=[`src`,`alt`];function h(e,t,s,c,u,d){return l(),r(`div`,f,[c.dataUrl?(l(),r(`div`,{key:0,class:`nc-img__placeholder`,style:o({background:s.background})},[i(`img`,a({src:s.placeholder||c.dataUrl,alt:c.attrs.alt||``},c.attrs,{loading:`lazy`,decoding:`async`}),null,16,p)],4)):n(``,!0),i(`img`,a({class:`nc-img__img`,src:s.src||c.dataUrl,alt:c.attrs.alt||``},c.attrs,{style:s.imageStyle,loading:`lazy`,decoding:`async`}),null,16,m)],512)}var g=e({name:`nc-image`,props:{src:{type:String,default:void 0,required:!1},srcset:{type:String,default:void 0,required:!1},placeholder:{type:String,default:void 0,required:!1},background:{type:String,default:void 0,required:!1},imageStyle:{type:[String,Object],default:void 0,required:!1}},setup(e,n){if(typeof window>`u`)return;let r=u(),i=t(()=>{let{width:e,height:t}=n.attrs;if(!e||!t)return``;let r=document.createElement(`canvas`);return r.width=100,r.height=t/e*100,r.toDataURL()}),a,o;return c(function(){let{src:t,srcset:i}=e,s=r.value;o=new IntersectionObserver(([e])=>{let r=s.querySelector(`.nc-img__img`),c=s.querySelector(`.nc-img__placeholder`);r.onload=function(){delete r.onload,s.classList.add(`nc-img--loaded`),c&&(a=setTimeout(()=>{c.remove()},85))},e.isIntersecting&&(console.debug(`* lazy load image src='${t}' ${i?`, srcset='`+i+`'`:``}, width=${n.attrs.width}, height=${n.attrs.height}`),i&&(r.srcset=i),r.src=t,o.disconnect())}),o.observe(s),d(()=>e,e=>{let{src:t,srcset:r}=e;console.debug(`* lazy load image changed, src='${t}' ${r?`, srcset='`+r+`'`:``}, width=${n.attrs.width}, height=${n.attrs.height}`);let i=s.querySelector(`.nc-img__img`);r&&(i.srcset=r),i.src=t},{deep:!0})}),s(function(){o&&o.disconnect(),a&&clearTimeout(a)}),{root:r,dataUrl:i,attrs:n.attrs}}},[[`render`,h]]);export{g as default};