@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
233 lines (232 loc) • 7.73 kB
JavaScript
import { defineComponent as j, ref as y, provide as G, reactive as J, watch as I, onMounted as K, onBeforeUnmount as Q, getCurrentInstance as X, nextTick as Z, isVNode as ee, openBlock as b, createElementBlock as x, normalizeClass as S, unref as n, createElementVNode as q, renderSlot as z, createVNode as N, withCtx as C, Fragment as te, renderList as oe, createBlock as re, createTextVNode as ne, toDisplayString as ie, Transition as le, normalizeStyle as se, createCommentVNode as ae } from "vue";
import "../anchor-link/index.mjs";
import "../renderer/index.mjs";
import { useNameHelper as ce, useProps as fe, emitEvent as ue } from "@vexip-ui/config";
import { proxyExposed as me } from "@vexip-ui/hooks";
import { isClient as A, isElement as R } from "@vexip-ui/utils";
import { anchorProps as de } from "./props.mjs";
import { animateScrollTo as pe } from "./helper.mjs";
import { ANCHOR_STATE as ve } from "./symbol.mjs";
import D from "../renderer/renderer.mjs";
import he from "./anchor-link.vue2.mjs";
const Ne = /* @__PURE__ */ j({
name: "Anchor",
__name: "anchor",
props: de,
emits: ["update:active"],
setup(P, { emit: U }) {
const d = ce("anchor"), r = fe("anchor", P, {
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: () => ({})
}), W = U, f = y(r.active), h = y(!1), H = y(0), T = /* @__PURE__ */ new Set(), B = y();
let k, m = !1, l = null, u = null, E = 0;
A && !f.value && r.bindHash && (f.value = decodeURIComponent(location.hash)), G(
ve,
J({
currentActive: f,
increaseLink: Y,
decreaseLink: F,
handleActive: O
})
), I(
() => r.active,
(e) => {
f.value = e;
}
), I(() => r.viewer, M), K(() => {
M(), g();
}), Q(() => {
$(), clearTimeout(k);
});
function Y(e) {
T.add(e), e.active = f.value === e.to;
}
function F(e) {
T.delete(e);
}
const _ = X();
function M() {
$(), A && Z(() => {
var c, s, i, a;
const e = r.viewer;
E = 0;
let t = null, o = "scroll";
if (typeof e == "string" ? e.startsWith("ref:") ? (o = e.substring(4), o = o || "scroll") : ["window", "document", "html"].includes(e) ? t = window : e === "body" ? t = document.body : e === "root" ? t = _.root : t = document.querySelector(e) : typeof e == "function" ? t = e() : R(e) && (t = e), t === window || R(t) ? m = !0 : m = !1, m)
l = t, l.addEventListener("scroll", w);
else {
for (t = t, t = ee(t == null ? void 0 : t.vnode) ? t : _.parent; t; ) {
const p = (c = t.type) == null ? void 0 : c.name;
if (p === "Scroll" || p === "NativeScroll") {
u = me({ component: t });
break;
}
const v = (s = t.refs) == null ? void 0 : s[o];
if (v) {
R(v) ? (m = !0, l = v) : u = v;
break;
}
t = t.parent;
}
u ? (u.addScrollListener(w), l = u.$el) : l || (m = !0, l = (a = (i = _.parent) == null ? void 0 : i.proxy) == null ? void 0 : a.$el), m && l && l.addEventListener("scroll", w);
}
});
}
function V() {
return l ? l === window ? document.documentElement : l : null;
}
function L(e) {
if (!T.size || !l) return;
const t = V().offsetTop, o = [];
let c = e + r.offset;
m && (c += t), T.forEach((i) => {
const a = i.to;
if (!a.startsWith("#")) return;
const p = document.querySelector(a);
p && o.push({
link: a,
offset: p.offsetTop
});
}), o.sort((i, a) => i.offset - a.offset), o.push({
link: "",
offset: 1 / 0
});
let s = "";
for (let i = 0, a = o.length - 1; i < a; ++i) {
const p = o[i], v = o[i + 1];
if (p.offset <= c && v.offset > c) {
s = p.link;
break;
}
}
E = e, f.value !== s && (f.value = s, W("update:active", s), ue(r.onChange, s));
}
function w(e) {
if (h.value) return;
const t = m ? (e.target === window || e.target === document ? document.documentElement : e.target).scrollTop : e.clientY;
L(t), g();
}
function $() {
u && (u.removeScrollListener(w), u = null), l && l.removeEventListener("scroll", w);
}
function O(e) {
if (!r.forceActive && e === f.value || !e.startsWith("#") || e.length < 2)
return;
const t = document.querySelector(e);
if (!t) return;
clearTimeout(k), h.value = !0;
const o = t.offsetTop, c = Math.max(r.scrollDuration, 0);
if (m && l) {
const s = V(), i = Math.min(
o - s.offsetTop - r.offset,
s.scrollHeight - s.clientHeight
);
pe(s, E, i, c, () => {
k = setTimeout(() => {
h.value = !1;
}, 10);
}), L(i), g();
} else if (u) {
const [s, i] = u.getYScrollLimit(), a = Math.max(Math.min(o - r.offset, i), s);
u.scrollTo(0, a, c).then(() => {
k = setTimeout(() => {
h.value = !1;
}, c + 10);
}), L(a), g();
} else
h.value = !1;
A && r.bindHash && location && (location.hash = encodeURIComponent(f.value.replace(/^#/, "")));
}
function g() {
var t;
const e = Array.from(T).find(
(o) => o.to && o.to === f.value
);
if (e != null && e.el) {
const o = e.el.getBoundingClientRect(), c = ((t = B.value) == null ? void 0 : t.getBoundingClientRect().top) ?? 0;
H.value = o.top - c + o.height / 2 + 0.5;
}
}
return (e, t) => (b(), x("div", {
ref_key: "wrapper",
ref: B,
class: S({
[n(d).b()]: !0,
[n(d).bs("vars")]: !0,
[n(d).bm("inherit")]: n(r).inherit,
[n(d).bm("no-marker")]: !n(r).marker
})
}, [
q("ul", {
class: S(n(d).be("list"))
}, [
z(e.$slots, "default", {}, () => [
N(n(D), {
renderer: n(r).slots.default
}, {
default: C(() => [
(b(!0), x(te, null, oe(n(r).options, (o) => (b(), re(n(he), {
key: o.to,
to: o.to,
title: o.title,
children: o.children
}, {
default: C(() => [
ne(ie(o.label), 1)
]),
_: 2
}, 1032, ["to", "title", "children"]))), 128))
]),
_: 1
}, 8, ["renderer"])
])
], 2),
N(le, {
appear: "",
name: n(r).markerTransition
}, {
default: C(() => [
n(r).marker && f.value ? (b(), x("div", {
key: 0,
class: S(n(d).be("marker")),
style: se({ top: `${H.value}px` })
}, [
z(e.$slots, "marker", {}, () => [
N(n(D), {
renderer: n(r).slots.marker
}, {
default: C(() => [
q("div", {
class: S(n(d).be("pointer"))
}, null, 2)
]),
_: 1
}, 8, ["renderer"])
])
], 6)) : ae("", !0)
]),
_: 3
}, 8, ["name"])
], 2));
}
});
export {
Ne as default
};
//# sourceMappingURL=anchor.vue2.mjs.map