vexip-ui/lib/components/image/image.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../image-viewer/index.cjs");require("../renderer/index.cjs");require("../skeleton/index.cjs");const i=require("@vexip-ui/config"),j=require("@vexip-ui/hooks"),h=require("@vexip-ui/utils"),x=require("./props.cjs"),_=require("./symbol.cjs"),b=require("../renderer/renderer.cjs"),U=require("../skeleton/skeleton.cjs"),$=require("./image-viewer.vue2.cjs"),D=["src","alt","width","height","loading","aria-label"],F=e.defineComponent({name:"Image",__name:"image",props:x.imageProps,setup(C,{expose:q}){const g=h.supportImgLoading(),P=C,r=i.useProps("image",P,{src:{default:"",static:!0},fallbackSrc:"",alt:"",fit:{default:"cover",validator:t=>_.objectFitValues.includes(t)},width:"",height:"",imgAttrs:()=>({}),lazy:!1,root:{default:null,static:!0},rootMargin:"",preview:!1,skeleton:!1,placeholder:"",errorTip:"",radius:0,border:!1,previewSrc:"",viewerTransfer:null,viewerProps:()=>({}),slots:()=>({})}),B=e.useSlots(),a=e.inject(_.GROUP_STATE,null),o=i.useNameHelper("image"),S=i.useLocale("image"),u=e.ref(g),n=e.ref(u.value),l=e.ref(""),f=e.ref(!1),c=e.ref(!1),v=e.ref(!1),d=e.ref(!1),w=e.ref(),k=e.computed(()=>f.value&&(!r.fallbackSrc||c.value)),y=e.computed(()=>!a&&r.preview),z=e.computed(()=>[o.b(),o.bs("vars"),{[o.bm("inherit")]:r.inherit,[o.bm("border")]:r.border,[o.bm("loading")]:n.value,[o.bm("error")]:k.value,[o.bm("preview")]:(a==null?void 0:a.preview)||y.value}]),N=e.computed(()=>{const t={width:h.toCssSize(r.width),height:h.toCssSize(r.height),[o.cv("fit")]:r.fit,[o.cv("radius")]:r.radius?`${r.radius}px`:""};return r.border&&typeof r.border=="string"&&(t[o.cv("b-color")]=r.border),t}),E=e.computed(()=>{var t;return r.src||((t=r.imgAttrs)==null?void 0:t.src)}),V=e.computed(()=>d.value||g&&r.lazy?"lazy":void 0),I=e.computed(()=>typeof r.skeleton=="object"?Object.assign({activated:!0},r.skeleton):{activated:!0});e.watch(E,t=>{n.value=u.value,l.value=t,f.value=!1,c.value=!1}),e.watch(()=>r.fallbackSrc,t=>{c.value=!1,f.value&&(n.value=u.value,l.value=t)}),l.value=E.value;const p=e.reactive({src:e.computed(()=>r.previewSrc||l.value),index:0,total:0});if(a){a.increaseItem(p);const t=e.watchEffect(()=>{d.value=!a.showAll&&p.index>0});e.onBeforeUnmount(()=>{t(),a.decreaseItem(p)})}if(!g){let t;const m=e.watchEffect(()=>{if(t==null||t(),t=void 0,!h.isClient)return;const s=typeof r.root=="string"?document.querySelector(r.root):r.root;r.lazy&&(t=j.useIntersection({root:typeof s=="object"?s:document.documentElement,rootMargin:r.rootMargin,target:w,handler:()=>{t==null||t(),t=void 0,u.value=!0,n.value=!0}}).disconnect)});e.onBeforeUnmount(()=>{m(),t==null||t()})}q({loading:n,fallbackFail:c,viewerActive:v,hidden:d,wrapper:w});function L(t){n.value=!1,(!r.fallbackSrc||l.value!==r.fallbackSrc)&&i.emitEvent(r.onLoad,t)}function A(t){if(r.fallbackSrc){if(l.value===r.fallbackSrc){n.value=!1,c.value=!0;return}l.value=r.fallbackSrc}else n.value=!1;f.value=!0,i.emitEvent(r.onError,t)}function T(){if(!a){r.preview&&(v.value=!0),i.emitEvent(r.onPreview,r.previewSrc||l.value);return}a.handlePreview(p)}return(t,m)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:w,class:e.normalizeClass(z.value),role:"none",style:e.normalizeStyle(N.value)},[n.value?e.renderSlot(t.$slots,"placeholder",{key:0},()=>[e.createVNode(e.unref(b),{renderer:e.unref(r).slots.placeholder},{default:e.withCtx(()=>[e.unref(r).skeleton?(e.openBlock(),e.createBlock(e.unref(U),e.mergeProps({key:0},I.value,{class:e.unref(o).be("skeleton"),image:""}),null,16,["class"])):(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(e.unref(o).be("placeholder"))},e.toDisplayString(e.unref(r).placeholder||e.unref(S).placeholder),3))]),_:1},8,["renderer"])]):k.value?e.renderSlot(t.$slots,"error",{key:1},()=>[e.createVNode(e.unref(b),{renderer:e.unref(r).slots.error},{default:e.withCtx(()=>[e.createElementVNode("span",{class:e.normalizeClass(e.unref(o).be("error"))},e.toDisplayString(e.unref(r).errorTip||e.unref(r).alt||e.unref(S).error),3)]),_:1},8,["renderer"])]):e.createCommentVNode("",!0),u.value&&!k.value?(e.openBlock(),e.createElementBlock("img",e.mergeProps({key:2},e.unref(r).imgAttrs,{class:e.unref(o).be("img"),src:l.value,alt:e.unref(r).alt,width:e.unref(r).width||void 0,height:e.unref(r).height||void 0,loading:V.value,"aria-label":e.unref(r).alt,onLoad:L,onError:A,onClick:T}),null,16,D)):e.createCommentVNode("",!0),y.value?(e.openBlock(),e.createBlock(e.unref($),e.mergeProps({key:3},t.viewerProps,{active:v.value,"onUpdate:active":m[0]||(m[0]=s=>v.value=s),"src-list":e.unref(r).previewSrc||l.value,transfer:e.unref(r).viewerTransfer}),e.createSlots({_:2},[B.preview||e.unref(r).slots.preview?{name:"default",fn:e.withCtx(({src:s})=>[e.renderSlot(t.$slots,"preview",{src:s},()=>[e.createVNode(e.unref(b),{renderer:e.unref(r).slots.preview,data:{src:s}},null,8,["renderer","data"])])]),key:"0"}:void 0]),1040,["active","src-list","transfer"])):e.createCommentVNode("",!0)],6)),[[e.vShow,!d.value]])}});module.exports=F;
//# sourceMappingURL=image.vue2.cjs.map