import{createElementBlock as u,openBlock as f,createCommentVNode as y,createElementVNode as h,normalizeStyle as w,mergeProps as _,ref as S,computed as p,onMounted as b,watch as v,onBeforeUnmount as q}from"/vue.js";import{z as k}from"./nc-main.DEgIQeOo.js";import"./service-worker.DGZzV4eE.js";const z={class:"nc-image",ref:"root"},U=["src","alt"],B=["src","alt"];function E(g,r,n,e,l,i){return f(),u("div",z,[e.dataUrl?(f(),u("div",{key:0,class:"nc-img__placeholder",style:w({background:n.background})},[h("img",_({src:n.placeholder||e.dataUrl,alt:e.attrs.alt||""},e.attrs,{loading:"lazy",decoding:"async"}),null,16,U)],4)):y("",!0),h("img",_({class:"nc-img__img",src:n.src||e.dataUrl,alt:e.attrs.alt||""},e.attrs,{style:n.imageStyle,loading:"lazy",decoding:"async"}),null,16,B)],512)}const I={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(g,r){if(typeof window>"u")return;const n=S(),e=p(()=>{const{width:d,height:a}=r.attrs;if(!d||!a)return"";const t=100,c=document.createElement("canvas");return c.width=t,c.height=a/d*t,c.toDataURL()});let l,i;return b(function(){const{src:d,srcset:a}=g,t=n.value;i=new IntersectionObserver(([c])=>{const o=t.querySelector(".nc-img__img"),s=t.querySelector(".nc-img__placeholder");o.onload=function(){delete o.onload,t.classList.add("nc-img--loaded"),s&&(l=setTimeout(()=>{s.remove()},85))},c.isIntersecting&&(console.debug(`* lazy load image src='${d}' ${a?", srcset='"+a+"'":""}, width=${r.attrs.width}, height=${r.attrs.height}`),a&&(o.srcset=a),o.src=d,i.disconnect())}),i.observe(t),v(()=>g,c=>{const{src:o,srcset:s}=c;console.debug(`* lazy load image changed, src='${o}' ${s?", srcset='"+s+"'":""}, width=${r.attrs.width}, height=${r.attrs.height}`);const m=t.querySelector(".nc-img__img");s&&(m.srcset=s),m.src=o},{deep:!0})}),q(function(){i&&i.disconnect(),l&&clearTimeout(l)}),{root:n,dataUrl:e,attrs:r.attrs}}},T=k(I,[["render",E]]);export{T as default};
