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

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

"use strict";const e=require("vue");require("../anchor-link/index.cjs");require("../renderer/index.cjs");const S=require("@vexip-ui/config"),I=require("@vexip-ui/hooks"),v=require("@vexip-ui/utils"),D=require("./props.cjs"),P=require("./helper.cjs"),U=require("./symbol.cjs"),B=require("../renderer/renderer.cjs"),W=require("./anchor-link.vue2.cjs"),Y=e.defineComponent({name:"Anchor",__name:"anchor",props:D.anchorProps,emits:["update:active"],setup(V,{emit:A}){const d=S.useNameHelper("anchor"),H=V,o=S.useProps("anchor",H,{active:{default:"",static:!0},viewer:{default:null,static:!0},offset:8,marker:!1,scrollDuration:500,markerTransition:()=>d.ns("fade"),options:{default:()=>[],static:!0},bindHash:!1,forceActive:!1,slots:()=>({})}),R=A,u=e.ref(o.active),k=e.ref(!1),_=e.ref(0),w=new Set,q=e.ref();let T,m=!1,i=null,f=null,y=0;v.isClient&&!u.value&&o.bindHash&&(u.value=decodeURIComponent(location.hash)),e.provide(U.ANCHOR_STATE,e.reactive({currentActive:u,increaseLink:z,decreaseLink:M,handleActive:$})),e.watch(()=>o.active,t=>{u.value=t}),e.watch(()=>o.viewer,x),e.onMounted(()=>{x(),g()}),e.onBeforeUnmount(()=>{N(),clearTimeout(T)});function z(t){w.add(t),t.active=u.value===t.to}function M(t){w.delete(t)}const E=e.getCurrentInstance();function x(){N(),v.isClient&&e.nextTick(()=>{var c,s,l,a;const t=o.viewer;y=0;let r=null,n="scroll";if(typeof t=="string"?t.startsWith("ref:")?(n=t.substring(4),n=n||"scroll"):["window","document","html"].includes(t)?r=window:t==="body"?r=document.body:t==="root"?r=E.root:r=document.querySelector(t):typeof t=="function"?r=t():v.isElement(t)&&(r=t),r===window||v.isElement(r)?m=!0:m=!1,m)i=r,i.addEventListener("scroll",C);else{for(r=r,r=e.isVNode(r==null?void 0:r.vnode)?r:E.parent;r;){const p=(c=r.type)==null?void 0:c.name;if(p==="Scroll"||p==="NativeScroll"){f=I.proxyExposed({component:r});break}const h=(s=r.refs)==null?void 0:s[n];if(h){v.isElement(h)?(m=!0,i=h):f=h;break}r=r.parent}f?(f.addScrollListener(C),i=f.$el):i||(m=!0,i=(a=(l=E.parent)==null?void 0:l.proxy)==null?void 0:a.$el),m&&i&&i.addEventListener("scroll",C)}})}function L(){return i?i===window?document.documentElement:i:null}function b(t){if(!w.size||!i)return;const r=L().offsetTop,n=[];let c=t+o.offset;m&&(c+=r),w.forEach(l=>{const a=l.to;if(!a.startsWith("#"))return;const p=document.querySelector(a);p&&n.push({link:a,offset:p.offsetTop})}),n.sort((l,a)=>l.offset-a.offset),n.push({link:"",offset:1/0});let s="";for(let l=0,a=n.length-1;l<a;++l){const p=n[l],h=n[l+1];if(p.offset<=c&&h.offset>c){s=p.link;break}}y=t,u.value!==s&&(u.value=s,R("update:active",s),S.emitEvent(o.onChange,s))}function C(t){if(k.value)return;const r=m?(t.target===window||t.target===document?document.documentElement:t.target).scrollTop:t.clientY;b(r),g()}function N(){f&&(f.removeScrollListener(C),f=null),i&&i.removeEventListener("scroll",C)}function $(t){if(!o.forceActive&&t===u.value||!t.startsWith("#")||t.length<2)return;const r=document.querySelector(t);if(!r)return;clearTimeout(T),k.value=!0;const n=r.offsetTop,c=Math.max(o.scrollDuration,0);if(m&&i){const s=L(),l=Math.min(n-s.offsetTop-o.offset,s.scrollHeight-s.clientHeight);P.animateScrollTo(s,y,l,c,()=>{T=setTimeout(()=>{k.value=!1},10)}),b(l),g()}else if(f){const[s,l]=f.getYScrollLimit(),a=Math.max(Math.min(n-o.offset,l),s);f.scrollTo(0,a,c).then(()=>{T=setTimeout(()=>{k.value=!1},c+10)}),b(a),g()}else k.value=!1;v.isClient&&o.bindHash&&location&&(location.hash=encodeURIComponent(u.value.replace(/^#/,"")))}function g(){var r;const t=Array.from(w).find(n=>n.to&&n.to===u.value);if(t!=null&&t.el){const n=t.el.getBoundingClientRect(),c=((r=q.value)==null?void 0:r.getBoundingClientRect().top)??0;_.value=n.top-c+n.height/2+.5}}return(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:q,class:e.normalizeClass({[e.unref(d).b()]:!0,[e.unref(d).bs("vars")]:!0,[e.unref(d).bm("inherit")]:e.unref(o).inherit,[e.unref(d).bm("no-marker")]:!e.unref(o).marker})},[e.createElementVNode("ul",{class:e.normalizeClass(e.unref(d).be("list"))},[e.renderSlot(t.$slots,"default",{},()=>[e.createVNode(e.unref(B),{renderer:e.unref(o).slots.default},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o).options,n=>(e.openBlock(),e.createBlock(e.unref(W),{key:n.to,to:n.to,title:n.title,children:n.children},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.label),1)]),_:2},1032,["to","title","children"]))),128))]),_:1},8,["renderer"])])],2),e.createVNode(e.Transition,{appear:"",name:e.unref(o).markerTransition},{default:e.withCtx(()=>[e.unref(o).marker&&u.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(d).be("marker")),style:e.normalizeStyle({top:`${_.value}px`})},[e.renderSlot(t.$slots,"marker",{},()=>[e.createVNode(e.unref(B),{renderer:e.unref(o).slots.marker},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(d).be("pointer"))},null,2)]),_:1},8,["renderer"])])],6)):e.createCommentVNode("",!0)]),_:3},8,["name"])],2))}});module.exports=Y;
//# sourceMappingURL=anchor.vue2.cjs.map