vxe-pc-ui/lib/anchor/src/anchor.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_anchorLink=_interopRequireDefault(require("./anchor-link"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeAnchor",props:{modelValue:String,options:Array,container:[String,Object,Function],showMarker:{type:Boolean,default:!0}},emits:["update:modelValue","change","click"],setup(n,e){let{slots:i,emit:u}=e;var t=_xeUtils.default.uniqueId();let a=(0,_vue.ref)(),l=(0,_vue.ref)(),o=(0,_vue.reactive)({activeHref:null,staticLinks:[],containerElem:null}),r={refElem:a},c=(0,_vue.computed)(()=>{let t=[];return _xeUtils.default.eachTree(o.staticLinks,e=>{t.push(e.href||"")},{children:"children"}),t}),s={},v={xID:t,props:n,context:e,reactData:o,getRefMaps:()=>r,getComputeMaps:()=>s},d={dispatchEvent(e,t,r){u(e,(0,_ui.createEvent)(r,{$anchor:v},t))}},f=()=>{var e=c.value,t=o.containerElem;if(t){var r=t.querySelectorAll(e.map(e=>""+e).join(","));for(let e=0;e<r.length;e++){var n=r[e];if(0<n.getBoundingClientRect().top){n=n.id;o.activeHref="#"+n;break}}}},h=()=>{var e=o.containerElem;e&&e.removeEventListener("scroll",f)},_=()=>{var e=(()=>{var e=n.container;if(e){if(_xeUtils.default.isElement(e))return e;if(_xeUtils.default.isString(e))return document.querySelector(e);if(_xeUtils.default.isFunction(e))return e({$anchor:v})}return null})();(o.containerElem=e)&&e.addEventListener("scroll",f,{passive:!1})},p=(Object.assign(v,d,{handleClickLink(e,t){e.preventDefault();var r=document.getElementById((""+t).replace("#",""));r&&r.scrollIntoView({behavior:"smooth"}),r=t,o.activeHref=r,u("update:modelValue",r),d.dispatchEvent("click",{href:t},e)}}),e=>{let r=[];return e&&e.forEach(e=>{let t=e.children;t&&t.length?r.push((0,_vue.h)(_anchorLink.default,{content:e.content,title:e.title,href:e.href},{sub:()=>p(t)})):r.push((0,_vue.h)(_anchorLink.default,{content:e.content,title:e.title,href:e.href}))}),r});return(0,_vue.watch)(()=>n.modelValue,e=>{o.activeHref=e}),(0,_vue.watch)(()=>o.activeHref,()=>{(0,_vue.nextTick)(()=>{var e=o.activeHref,t=a.value,r=l.value;t&&r&&e&&(e=t.querySelector(`[href="${e}"]`))&&(e=(0,_dom.getOffsetPos)(e,t).top,r.style.top=e+"px")})}),(0,_vue.watch)(()=>n.container,()=>{h(),_()}),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{_()})}),(0,_vue.onBeforeUnmount)(()=>{h()}),(0,_vue.provide)("$xeAnchor",v),v.renderVN=()=>{var{options:e,showMarker:t}=n,r=i.default;return(0,_vue.h)("div",{ref:a,class:["vxe-anchor",{"is--marker":t}]},[(0,_vue.h)("div",{class:"vxe-anchor--list"},r?r({}):p(e)),t?(0,_vue.h)("div",{ref:l,class:"vxe-anchor--marker"}):(0,_ui.renderEmptyElement)(v)])},v},render(){return this.renderVN()}});