@wikimedia/codex/dist/modules/CdxImage.cjs

Codex Design System for Wikimedia

"use strict";const t=require("vue"),m=require("./Icon.js"),s=require("./constants.js"),S=require("./useSplitAttributes.cjs"),v=require("./_plugin-vue_export-helper.js"),b=t.defineComponent({name:"CdxImage",components:{CdxIcon:m.CdxIcon},inheritAttrs:!1,props:{src:{type:String,default:""},alt:{type:String,required:!0,default:""},aspectRatio:{type:String,validator:s.imageAspectRatioValidator,default:null},objectPosition:{type:String,validator:s.imagePositionValidator,default:"center"},objectFit:{type:String,validator:s.objectFitValidator,default:"cover"},position:{type:String,default:""},width:{type:[String,Number],default:void 0},height:{type:[String,Number],default:void 0},loadingPriority:{type:String,default:"lazy"}},emits:["error"],setup(e,{emit:i,attrs:c}){const d=t.ref(e.src),a=t.ref(!1),r=t.ref(!1),n=t.computed(()=>{var o;return{["cdx-image__image--".concat((o=e.aspectRatio)==null?void 0:o.split(":").join("-"))]:!!e.aspectRatio,["cdx-image__image--object-position-".concat(e.objectPosition)]:!!e.objectPosition,["cdx-image__image--object-fit-".concat(e.objectFit)]:!!e.objectFit,"cdx-image__image--is-broken":a.value,"cdx-image__image--is-loading":!r.value&&!a.value}}),l=t.computed(()=>({["cdx-image--".concat(e.position)]:!!e.position})),{rootClasses:g,rootStyle:u,otherAttrs:h}=S(c,l),p=t.computed(()=>({width:"".concat(e.width,"px"),height:"".concat(e.height,"px")})),_=t.computed(()=>{var o;return{["cdx-image__placeholder--".concat((o=e.aspectRatio)==null?void 0:o.split(":").join("-"))]:!!e.aspectRatio}}),f=o=>{a.value=!0,i("error",o)},y=()=>{r.value=!0},C=t.computed(()=>{const o=Number(e.width);return o<=32?"cdx-image__placeholder__icon--size-smallest":o<=180?"cdx-image__placeholder__icon--size-small":o<=280?"cdx-image__placeholder__icon--size-medium":"cdx-image__placeholder__icon--size-large"});return{imageSrc:d,isBroken:a,isLoaded:r,imageClasses:n,rootClasses:g,rootStyle:u,otherAttrs:h,placeholderStyles:p,handleError:f,handleLoad:y,cdxIconImage:m.j4,iconSizeClass:C,placeholderClasses:_}}}),j=["src","alt","width","height","loading"];function z(e,i,c,d,a,r){const n=t.resolveComponent("cdx-icon");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["cdx-image",e.rootClasses]),style:t.normalizeStyle(e.rootStyle)},[e.src?(t.openBlock(),t.createElementBlock("img",t.mergeProps({key:0},e.otherAttrs,{src:e.imageSrc,alt:e.alt,width:e.width,height:e.height,loading:e.loadingPriority,class:["cdx-image__image",e.imageClasses],onLoad:i[0]||(i[0]=(...l)=>e.handleLoad&&e.handleLoad(...l)),onError:i[1]||(i[1]=(...l)=>e.handleError&&e.handleError(...l))}),null,16,j)):t.createCommentVNode("v-if",!0),!e.src||!e.isLoaded&&!e.isBroken?(t.openBlock(),t.createElementBlock("div",{key:1,class:t.normalizeClass(["cdx-image__placeholder",e.placeholderClasses]),style:t.normalizeStyle(e.placeholderStyles)},[t.createVNode(n,{icon:e.cdxIconImage,class:t.normalizeClass(["cdx-image__placeholder__icon",[e.iconSizeClass]])},null,8,["icon","class"])],6)):t.createCommentVNode("v-if",!0)],6)}const k=v._export_sfc(b,[["render",z]]);module.exports=k;