@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 1.58 kB
JavaScript
;const e=require("vue"),s=require("./Icon.js"),u=require("./constants.js"),i=require("./_plugin-vue_export-helper.js"),d=e.defineComponent({name:"CdxThumbnail",components:{CdxIcon:s.CdxIcon},props:{thumbnail:{type:[Object,null],default:null},placeholderIcon:{type:[String,Object],default:s.t6}},setup:n=>{const l=e.ref(!1),c=e.ref({}),r=t=>{const o=t.replace(/([\\"\n])/g,"\\$1"),a=new Image;a.onload=()=>{c.value={backgroundImage:'url("'.concat(o,'")')},l.value=!0},a.onerror=()=>{l.value=!1},a.src=o};return e.onMounted(()=>{var t;(t=n.thumbnail)!=null&&t.url&&r(n.thumbnail.url)}),e.watch(e.toRef(n,"thumbnail"),(t,o)=>{if(!(t!=null&&t.url)){l.value=!1,c.value={};return}(o==null?void 0:o.url)!==t.url&&(l.value=!1,r(t.url))},{deep:!0}),{thumbnailStyle:c,thumbnailLoaded:l,NoInvertClass:u.NoInvertClass}}}),m={class:"cdx-thumbnail"},p={key:0,class:"cdx-thumbnail__placeholder"};function _(n,l,c,r,t,o){const a=e.resolveComponent("cdx-icon");return e.openBlock(),e.createElementBlock("span",m,[n.thumbnailLoaded?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createElementBlock("span",p,[e.createVNode(a,{icon:n.placeholderIcon,class:"cdx-thumbnail__placeholder__icon--vue"},null,8,["icon"])])),e.createVNode(e.Transition,{name:"cdx-thumbnail__image"},{default:e.withCtx(()=>[n.thumbnailLoaded?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle(n.thumbnailStyle),class:e.normalizeClass([n.NoInvertClass,"cdx-thumbnail__image"])},null,6)):e.createCommentVNode("v-if",!0)]),_:1})])}const f=i._export_sfc(d,[["render",_]]);module.exports=f;