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

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_core=require("@vxe-ui/core"),_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,_vue.defineComponent)({name:"VxeAnchor",props:{modelValue:String,options:Array,container:[String,Object,Function],showMarker:{type:Boolean,default:!0}},emits:["update:modelValue","change","click"],setup(n,e){const{slots:i,emit:a}=e;var t=_xeUtils.default.uniqueId();const o=(0,_vue.ref)(),u=(0,_vue.ref)(),l=(0,_vue.reactive)({activeHref:null,staticLinks:[],containerElem:null}),r={refElem:o},c=(0,_vue.computed)(()=>{const t=[];return _xeUtils.default.eachTree(l.staticLinks,e=>{t.push(e.href||"")},{children:"children"}),t}),s={},v={xID:t,props:n,context:e,reactData:l,getRefMaps:()=>r,getComputeMaps:()=>s},d={dispatchEvent(e,t,r){a(e,(0,_core.createEvent)(r,{$anchor:v},t))}},f=()=>{var e=c.value,t=l["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;l.activeHref="#"+n;break}}}},h=()=>{var e=l["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})();(l.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,l.activeHref=r,a("update:modelValue",r),d.dispatchEvent("click",{href:t},e)}}),e=>{const r=[];return e&&e.forEach(e=>{const 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=>{l.activeHref=e}),(0,_vue.watch)(()=>l.activeHref,()=>{(0,_vue.nextTick)(()=>{var e=l["activeHref"],t=o.value,r=u.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:o,class:["vxe-anchor",{"is--marker":t}]},[(0,_vue.h)("div",{class:"vxe-anchor--list"},r?r({}):p(e)),t?(0,_vue.h)("div",{ref:u,class:"vxe-anchor--marker"}):(0,_vue.createCommentVNode)()])},v},render(){return this.renderVN()}});