@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
76 lines (75 loc) • 2.62 kB
JavaScript
import { defineComponent as L, inject as f, ref as c, reactive as T, toRef as B, computed as p, provide as E, watch as _, onMounted as $, onBeforeUnmount as w, resolveComponent as I, openBlock as i, createElementBlock as a, normalizeClass as u, unref as k, createElementVNode as V, normalizeStyle as z, withModifiers as H, renderSlot as v, Fragment as M, renderList as R, createBlock as j, withCtx as D, createTextVNode as F, toDisplayString as K, createCommentVNode as y } from "vue";
import { useNameHelper as O } from "@vexip-ui/config";
import { anchorLinkProps as P } from "./props.mjs";
import { ANCHOR_STATE as U, LINK_STATE as A, baseIndentWidth as W } from "./symbol.mjs";
const q = ["href", "title"], Z = /* @__PURE__ */ L({
name: "AnchorLink",
__name: "anchor-link",
props: P,
setup(C) {
const s = C, t = f(U, null), n = f(A, null), r = O("anchor"), d = c(n != null && n.indent ? (n == null ? void 0 : n.indent) + 1 : 1), m = c(!1), h = c(), l = T({
el: h,
to: B(s, "to"),
active: m,
indent: d
}), g = p(() => ({
[r.be("link")]: !0,
[r.bem("link", "active")]: l.active
})), b = p(() => ({
paddingInlineStart: `${W * d.value}px`
}));
E(A, l), t && (_(
() => t.currentActive,
(e) => {
m.value = e === s.to;
}
), $(() => {
t.increaseLink(l);
}), w(() => {
t.decreaseLink(l);
}));
function N() {
return t && t.handleActive(s.to), !1;
}
return (e, G) => {
const S = I("AnchorLink", !0);
return i(), a("li", {
class: u(k(r).be("item"))
}, [
V("a", {
ref_key: "link",
ref: h,
class: u(g.value),
href: e.to,
style: z(b.value),
title: e.title,
onClick: H(N, ["prevent"])
}, [
v(e.$slots, "default")
], 14, q),
e.$slots.group || e.children && e.children.length ? (i(), a("ul", {
key: 0,
class: u(k(r).be("list"))
}, [
v(e.$slots, "group", {}, () => [
e.children && e.children.length ? (i(!0), a(M, { key: 0 }, R(e.children, (o) => (i(), j(S, {
key: o.to,
to: o.to,
title: o.title,
children: o.children
}, {
default: D(() => [
F(K(o.label), 1)
]),
_: 2
}, 1032, ["to", "title", "children"]))), 128)) : y("", !0)
])
], 2)) : y("", !0)
], 2);
};
}
});
export {
Z as default
};
//# sourceMappingURL=anchor-link.vue2.mjs.map