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

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

"use strict";const e=require("vue");require("../icon/index.cjs");require("../masker/index.cjs");require("../renderer/index.cjs");require("../viewer/index.cjs");const s=require("@vexip-ui/config"),p=require("@vexip-ui/utils"),S=require("./props.cjs"),L=require("../masker/masker.vue2.cjs"),A=require("../viewer/viewer.vue2.cjs"),d=require("../renderer/renderer.cjs"),h=require("../icon/icon.cjs"),B=["src"],D=e.defineComponent({name:"ImageViewer",__name:"image-viewer",props:S.imageViewerProps,emits:["update:active","update:index"],setup(_,{expose:C,emit:x}){const N=_,r=s.useProps("imageViewer",N,{active:!1,index:0,srcList:{default:"",static:!0},transfer:!1,viewerProps:()=>({}),slots:()=>({})}),g=x,a=s.useNameHelper("image-viewer"),u=s.useIcons(),o=e.ref(r.active),n=e.ref(r.index),v=e.ref(),V=e.computed(()=>[a.b(),a.ns("image-vars"),r.inherit&&a.bm("inherit")]),l=e.computed(()=>p.ensureArray(p.isDefined(r.srcList)?r.srcList:"")),i=e.computed(()=>n.value<=0),c=e.computed(()=>n.value>=l.value.length-1);e.watch(()=>r.active,t=>{o.value=t}),e.watch(()=>r.index,t=>{n.value=t}),e.watch(()=>l.value.length,f),C({currentActive:o,currentIndex:n,prevDisabled:i,nextDisabled:c,viewer:v});function b(t){o.value!==t&&(o.value=t,g("update:active",t),s.emitEvent(r.onToggle,t))}function f(){n.value=p.boundRange(n.value,0,l.value.length-1)}function w(){var m;const t=n.value;(m=v.value)==null||m.handleReset(),g("update:index",t),s.emitEvent(r.onChange,t,l.value[t])}function E(){if(i.value)return;const t=n.value;n.value--,f(),n.value!==t&&w(),s.emitEvent(r.onPrev,n.value,l.value[n.value])}function q(){if(c.value)return;const t=n.value;n.value++,f(),n.value!==t&&w(),s.emitEvent(r.onNext,n.value,l.value[n.value])}function k(){b(!1),s.emitEvent(r.onClose)}function y(){s.emitEvent(r.onShow)}function P(){s.emitEvent(r.onHide)}return(t,m)=>(e.openBlock(),e.createBlock(e.unref(L),{active:o.value,inherit:e.unref(r).inherit,class:e.normalizeClass(V.value),closable:"","auto-remove":"",transfer:e.unref(r).transfer,onShow:y,onHide:P,onToggle:b},{default:e.withCtx(({show:z})=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).be("wrapper"))},[e.createVNode(e.unref(A),e.mergeProps(e.unref(r).viewerProps,{ref_key:"viewer",ref:v}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{src:l.value[n.value]},()=>[e.createVNode(e.unref(d),{renderer:e.unref(r).slots.default,data:{src:l.value[n.value]}},{default:e.withCtx(()=>[e.createElementVNode("img",{src:l.value[n.value]},null,8,B)]),_:1},8,["renderer","data"])])]),_:3},16),l.value.length>1?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("button",{type:"button",class:e.normalizeClass([e.unref(a).be("prev"),i.value&&e.unref(a).bem("prev","disabled")]),onClick:e.withModifiers(E,["stop"])},[e.renderSlot(t.$slots,"prev",{disabled:i.value},()=>[e.createVNode(e.unref(d),{renderer:e.unref(r).slots.prev,data:{disabled:i.value}},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).be("prev-handler"))},[e.createVNode(e.unref(h),e.mergeProps(e.unref(u).angleLeft,{scale:+(e.unref(u).angleLeft.scale||1)*1.4,label:"prev"}),null,16,["scale"])],2)]),_:1},8,["renderer","data"])])],2),e.createElementVNode("button",{type:"button",class:e.normalizeClass([e.unref(a).be("next"),c.value&&e.unref(a).bem("next","disabled")]),onClick:e.withModifiers(q,["stop"])},[e.renderSlot(t.$slots,"next",{disabled:c.value},()=>[e.createVNode(e.unref(d),{renderer:e.unref(r).slots.next,data:{disabled:c.value}},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).be("next-handler"))},[e.createVNode(e.unref(h),e.mergeProps(e.unref(u).angleRight,{scale:+(e.unref(u).angleRight.scale||1)*1.4,label:"next"}),null,16,["scale"])],2)]),_:1},8,["renderer","data"])])],2)],64)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",class:e.normalizeClass(e.unref(a).be("close")),onClick:e.withModifiers(k,["stop"])},[e.renderSlot(t.$slots,"close",{},()=>[e.createVNode(e.unref(d),{renderer:e.unref(r).slots.close},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).be("close-handler"))},[e.createVNode(e.unref(h),e.mergeProps(e.unref(u).close,{scale:+(e.unref(u).close.scale||1)*1.4,label:"close"}),null,16,["scale"])],2)]),_:1},8,["renderer"])])],2)],2),[[e.vShow,z]])]),_:3},8,["active","inherit","class","transfer"]))}});module.exports=D;
//# sourceMappingURL=image-viewer.vue2.cjs.map