@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, createElementBlock as x, openBlock as b, normalizeClass as S, unref as n, createElementVNode as q, createVNode as N, renderSlot as z, withCtx as C, Fragment as te, renderList as oe, createBlock as re, createTextVNode as ne, toDisplayString as ie, Transition as le, createCommentVNode as se, normalizeStyle 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: ae({ 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)) : se("", !0)
]),
_: 3
}, 8, ["name"])
], 2));
}
});
export {
Ne as default
};
//# sourceMappingURL=anchor.vue2.mjs.map