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

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

"use strict";const e=require("vue"),p=require("@vexip-ui/config"),V=require("./props.cjs"),m=require("@vexip-ui/utils"),q=require("./helpers.cjs"),F=e.defineComponent({name:"Affix",__name:"affix",props:V.affixProps,setup(B,{expose:I}){const T=B,t=p.useProps("affix",T,{offset:0,zIndex:100,position:"top",target:null}),z=p.useNameHelper("affix"),H=e.getCurrentInstance(),d=e.shallowRef(),a=e.shallowRef(),o=e.shallowRef();let g=!1,s=null;const r=e.ref(!1),h=e.ref(0),x=e.ref(0),w=e.ref(0),E=e.ref(0),c=e.ref(0),N=e.computed(()=>({height:r.value?`${h.value}px`:"",width:r.value?`${x.value}px`:""})),k=e.computed(()=>{if(!r.value)return{};let l=t.offset,n=t.offset;return m.isElement(o.value)&&(t.target&&t.position==="top"?l+=c.value:n+=c.value),{height:`${h.value}px`,width:`${x.value}px`,top:t.position==="top"?`${l}px`:"",bottom:t.position==="bottom"?`${n}px`:"",zIndex:t.zIndex}});e.watchEffect(S),e.watch(r,l=>{p.emitEvent(t.onChange,l)}),I({update:S}),e.onMounted(()=>{if(t.target){const l=m.callIfFunc(t.target);if(typeof l=="string"){if(a.value=document.querySelector(l)??void 0,!a.value)throw new Error(`[vexip-ui:Affix] target not exists: ${t.target}`)}else a.value=l}else a.value=document.documentElement;A()}),e.onBeforeUnmount(()=>{L()});function S(){if(!d.value||!a.value||!o.value)return;const l=d.value.getBoundingClientRect(),n=a.value.getBoundingClientRect();h.value=l.height,x.value=l.width,w.value=o.value===window?document.documentElement.scrollTop:o.value.scrollY||0,w.value=document.documentElement.scrollTop,E.value=document.documentElement.clientHeight,t.position==="top"?t.target?(c.value=n.top,r.value=l.top<n.top+t.offset):r.value=t.offset>l.top:t.target?(c.value=E.value-n.bottom,r.value=n.bottom<t.offset+l.bottom):r.value=E.value-t.offset<l.bottom}function u(){q.handleLastScroller(a),S(),p.emitEvent(t.onScroll,{scrollTop:w.value,fixed:r.value})}function A(){var l,n,R;if(L(),!!m.isClient)if(t.target)o.value=a.value,o.value.addEventListener("scroll",u);else{let i=H.parent;const P="scroll";for(;i;){const y=(l=i.type)==null?void 0:l.name;if(y==="Scroll"||y==="NativeScroll"){const{exposeProxy:b,exposed:_,proxy:C}=i,v=new Proxy({},{get(U,$){return(C==null?void 0:C[$])??(b==null?void 0:b[$])??(_==null?void 0:_[$])}});if(!((n=(v==null?void 0:v.$el).getAttribute("class"))!=null&&n.includes("vxp-native-scroll--horizontal"))){s=v;break}}const f=(R=i.refs)==null?void 0:R[P];if(f){m.isElement(f)?(g=!0,o.value=f):s=f;break}i=i.parent}s?(s.addScrollListener(u),o.value=s.$el):o.value||(g=!0,o.value=window),g&&o.value&&o.value.addEventListener("scroll",u)}}function L(){s&&(s.removeScrollListener(u),s=null),o.value&&(o.value.removeEventListener("scroll",u),o.value=void 0),q.clearLastScroller(a)}return(l,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:d,class:e.normalizeClass(e.unref(z).b()),style:e.normalizeStyle(N.value)},[e.createElementVNode("div",{class:e.normalizeClass({[e.unref(z).bm("fixed")]:r.value}),style:e.normalizeStyle(k.value)},[e.renderSlot(l.$slots,"default")],6)],6))}});module.exports=F;
//# sourceMappingURL=affix.vue2.cjs.map