buefy/dist/components/image/index.min.js

Lightweight UI components for Vue.js (v3) based on Bulma

/*! Buefy v3.0.2 | MIT License | github.com/buefy/buefy */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Image={},e.Vue)}(this,(function(e,t){"use strict";let i=null,s=!0,r=!0,o=null;var a=Object.defineProperty,n=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,h=(e,t,i)=>t in e?a(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i;const d=["square","1by1","5by4","4by3","3by2","5by3","16by9","b2y1","3by1","4by5","3by4","2by3","3by5","9by16","1by2","1by3"];function p(e){return-1!==d.indexOf(e)}var u=t.defineComponent({name:"BImage",props:{src:String,alt:String,srcFallback:String,webpFallback:{type:String,default:()=>i},lazy:{type:Boolean,default:()=>s},responsive:{type:Boolean,default:()=>r},ratio:{type:String,default:()=>o},placeholder:String,srcset:String,srcsetSizes:Array,srcsetFormatter:{type:Function,default:(e,t,i)=>i.formatSrcset(e,t)},rounded:{type:Boolean,default:!1},captionFirst:{type:Boolean,default:!1},customClass:String},emits:{load:(e,t)=>!0,error:(e,t)=>!0},data:()=>({clientWidth:0,webpSupportVerified:!1,webpSupported:!1,useNativeLazy:!1,observer:null,inViewPort:!1,loaded:!1,failed:!1}),computed:{ratioPattern:()=>/([0-9]+)by([0-9]+)/,hasRatio(){return null!=this.ratio&&this.ratioPattern.test(this.ratio)},figureClasses(){const e={image:this.responsive};return this.hasRatio&&p(this.ratio)&&(e[`is-${this.ratio}`]=!0),e},figureStyles(){if(this.hasRatio&&!p(this.ratio)){const e=this.ratioPattern.exec(this.ratio);return{paddingTop:+e[2]/+e[1]*100+"%"}}},imgClasses(){return((e,t)=>{for(var i in t||(t={}))l.call(t,i)&&h(e,i,t[i]);if(n)for(var i of n(t))c.call(t,i)&&h(e,i,t[i]);return e})({"is-rounded":this.rounded,"has-ratio":this.hasRatio},this.customClass?{[this.customClass]:!!this.customClass}:{})},srcExt(){return this.getExt(this.src)},isWepb(){return"webp"===this.srcExt},computedSrc(){let e=this.src;return this.failed&&this.srcFallback&&(e=this.srcFallback),!this.webpSupported&&this.isWepb&&this.webpFallback?this.webpFallback.startsWith(".")?e.replace(/\.webp/gi,`${this.webpFallback}`):this.webpFallback:e},computedWidth(){if(this.responsive&&this.clientWidth>0)return this.clientWidth},computedNativeLazy(){if(this.lazy&&this.useNativeLazy)return"lazy"},isDisplayed(){return(this.webpSupportVerified||!this.isWepb)&&(!this.lazy||this.useNativeLazy||this.inViewPort)},placeholderExt(){if(this.placeholder)return this.getExt(this.placeholder)},isPlaceholderWepb(){return!!this.placeholder&&"webp"===this.placeholderExt},computedPlaceholder(){return!this.webpSupported&&this.isPlaceholderWepb&&this.webpFallback&&this.webpFallback.startsWith(".")?this.placeholder.replace(/\.webp/gi,`${this.webpFallback}`):this.placeholder},isPlaceholderDisplayed(){return!this.loaded&&(this.$slots.placeholder||this.placeholder&&(this.webpSupportVerified||!this.isPlaceholderWepb))},computedSrcset(){return this.srcset?!this.webpSupported&&this.isWepb&&this.webpFallback&&this.webpFallback.startsWith(".")?this.srcset.replace(/\.webp/gi,`${this.webpFallback}`):this.srcset:this.srcsetSizes&&Array.isArray(this.srcsetSizes)&&this.srcsetSizes.length>0?this.srcsetSizes.map((e=>`${this.srcsetFormatter(this.computedSrc,e,this)} ${e}w`)).join(","):void 0},computedSizes(){if(this.computedSrcset&&this.computedWidth)return`${this.computedWidth}px`},isCaptionFirst(){return this.$slots.caption&&this.captionFirst},isCaptionLast(){return this.$slots.caption&&!this.captionFirst}},methods:{getExt(e,t=!0){if(e){return(t?e.split("?")[0]:e).split(".").pop()}return""},setWidth(){this.clientWidth=this.$el.clientWidth},formatSrcset(e,t){const i=this.getExt(e,!1);return`${e.split(".").slice(0,-1).join(".")}-${t}.${i}`},onLoad(e){this.loaded=!0,this.emitSrc(e,(t=>this.$emit("load",e,t)))},onError(e){this.emitSrc(e,(t=>this.$emit("error",e,t))),this.failed||(this.failed=!0)},emitSrc(e,t){const i=e.target;t(i.currentSrc||i.src||this.computedSrc)}},created(){if(this.isWepb&&new Promise((e=>{const t=new Image;t.onerror=()=>e(!1),t.onload=()=>e(1===t.width),t.src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA="})).catch((()=>!1)).then((e=>{this.webpSupportVerified=!0,this.webpSupported=e})),this.lazy){const e="undefined"!=typeof window&&"HTMLImageElement"in window&&"loading"in HTMLImageElement.prototype,t="undefined"!=typeof window&&"IntersectionObserver"in window;!e&&t?this.observer=new IntersectionObserver((e=>{const{target:t,isIntersecting:i}=e[0];i&&!this.inViewPort&&(this.inViewPort=!0,this.observer.unobserve(t))})):this.useNativeLazy=!0}},mounted(){this.lazy&&this.observer&&this.observer.observe(this.$el),this.setWidth(),"undefined"!=typeof window&&window.addEventListener("resize",this.setWidth)},beforeUnmount(){this.observer&&this.observer.disconnect(),"undefined"!=typeof window&&window.removeEventListener("resize",this.setWidth)}});const b={key:0},m=["srcset","src","alt","width","sizes","loading"],f=["src","alt"],y={key:1};var w=((e,t)=>{const i=e.__vccOpts||e;for(const[e,s]of t)i[e]=s;return i})(u,[["render",function(e,i,s,r,o,a){return t.openBlock(),t.createElementBlock("figure",{class:t.normalizeClass(["b-image-wrapper",e.figureClasses]),style:t.normalizeStyle(e.figureStyles)},[e.isCaptionFirst?(t.openBlock(),t.createElementBlock("figcaption",b,[t.renderSlot(e.$slots,"caption")])):t.createCommentVNode("v-if",!0),t.createVNode(t.Transition,{name:"fade"},{default:t.withCtx((()=>[e.isDisplayed?(t.openBlock(),t.createElementBlock("img",{key:0,srcset:e.computedSrcset,src:e.computedSrc,alt:e.alt,class:t.normalizeClass(e.imgClasses),width:e.computedWidth,sizes:e.computedSizes,loading:e.computedNativeLazy,onLoad:i[0]||(i[0]=(...t)=>e.onLoad&&e.onLoad(...t)),onError:i[1]||(i[1]=(...t)=>e.onError&&e.onError(...t))},null,42,m)):t.createCommentVNode("v-if",!0)])),_:1}),t.createVNode(t.Transition,{name:"fade"},{default:t.withCtx((()=>[e.isPlaceholderDisplayed?t.renderSlot(e.$slots,"placeholder",{key:0},(()=>[t.createElementVNode("img",{src:e.computedPlaceholder,alt:e.alt,class:t.normalizeClass([e.imgClasses,"placeholder"])},null,10,f)])):t.createCommentVNode("v-if",!0)])),_:3}),e.isCaptionLast?(t.openBlock(),t.createElementBlock("figcaption",y,[t.renderSlot(e.$slots,"caption")])):t.createCommentVNode("v-if",!0)],6)}]]);const g={install(e){((e,t)=>{const i=t.name;if(null==i)throw new Error("Buefy.registerComponent: missing component name");e.component(i,t)})(e,w)}};e.BImage=w,e.default=g,Object.defineProperty(e,"__esModule",{value:!0})}));