vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/client/theme-default/composables/outline.js

@@ -1,178 +1,156 @@
-import { getScrollOffset } from 'vitepress';
-import { onMounted, onUnmounted, onUpdated } from 'vue';
-import { throttleAndDebounce } from '../support/utils';
-import { useAside } from './aside';
+import { throttleAndDebounce } from "../support/utils.js";
+import { onMounted, onUnmounted, onUpdated } from "vue";
+import { useMediaQuery } from "@vueuse/core";
+//#region src/client/theme-default/composables/outline.ts
 const ignoreRE = /\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/;
-// cached list of anchor elements from resolveHeaders
 const resolvedHeaders = [];
-export function resolveTitle(theme) {
-    return ((typeof theme.outline === 'object' &&
-        !Array.isArray(theme.outline) &&
-        theme.outline.label) ||
-        theme.outlineTitle ||
-        'On this page');
+function resolveTitle(theme) {
+	return typeof theme.outline === "object" && !Array.isArray(theme.outline) && theme.outline.label || "On this page";
 }
-export function getHeaders(range) {
-    const headers = [
-        ...document.querySelectorAll('.VPDoc :where(h1,h2,h3,h4,h5,h6)')
-    ]
-        .filter((el) => el.id && el.hasChildNodes())
-        .map((el) => {
-        const level = Number(el.tagName[1]);
-        return {
-            element: el,
-            title: serializeHeader(el),
-            link: '#' + el.id,
-            level
-        };
-    });
-    return resolveHeaders(headers, range);
+function getHeaders(range) {
+	return resolveHeaders([...document.querySelectorAll(".VPDoc h1, .VPDoc h2, .VPDoc h3, .VPDoc h4, .VPDoc h5, .VPDoc h6")].filter((el) => el.id && el.hasChildNodes()).map((el) => {
+		const level = Number(el.tagName[1]);
+		return {
+			element: el,
+			title: serializeHeader(el),
+			link: "#" + el.id,
+			level
+		};
+	}), range);
 }
 function serializeHeader(h) {
-    let ret = '';
-    for (const node of h.childNodes) {
-        if (node.nodeType === 1) {
-            if (ignoreRE.test(node.className))
-                continue;
-            ret += node.textContent;
-        }
-        else if (node.nodeType === 3) {
-            ret += node.textContent;
-        }
-    }
-    return ret.trim();
+	let ret = "";
+	for (const node of h.childNodes) if (node.nodeType === 1) {
+		if (ignoreRE.test(node.className)) continue;
+		ret += node.textContent;
+	} else if (node.nodeType === 3) ret += node.textContent;
+	return ret.trim();
 }
-export function resolveHeaders(headers, range) {
-    if (range === false) {
-        return [];
-    }
-    const levelsRange = (typeof range === 'object' && !Array.isArray(range)
-        ? range.level
-        : range) || 2;
-    const [high, low] = typeof levelsRange === 'number'
-        ? [levelsRange, levelsRange]
-        : levelsRange === 'deep'
-            ? [2, 6]
-            : levelsRange;
-    return buildTree(headers, high, low);
+function resolveHeaders(headers, range) {
+	if (range === false) return [];
+	const levelsRange = (typeof range === "object" && !Array.isArray(range) ? range.level : range) || 2;
+	const [high, low] = typeof levelsRange === "number" ? [levelsRange, levelsRange] : levelsRange === "deep" ? [2, 6] : levelsRange;
+	return buildTree(headers, high, low);
 }
-export function useActiveAnchor(container, marker) {
-    const { isAsideEnabled } = useAside();
-    const onScroll = throttleAndDebounce(setActiveLink, 100);
-    let prevActiveLink = null;
-    onMounted(() => {
-        requestAnimationFrame(setActiveLink);
-        window.addEventListener('scroll', onScroll);
-    });
-    onUpdated(() => {
-        // sidebar update means a route change
-        activateLink(location.hash);
-    });
-    onUnmounted(() => {
-        window.removeEventListener('scroll', onScroll);
-    });
-    function setActiveLink() {
-        if (!isAsideEnabled.value) {
-            return;
-        }
-        const scrollY = window.scrollY;
-        const innerHeight = window.innerHeight;
-        const offsetHeight = document.body.offsetHeight;
-        const isBottom = Math.abs(scrollY + innerHeight - offsetHeight) < 1;
-        // resolvedHeaders may be repositioned, hidden or fix positioned
-        const headers = resolvedHeaders
-            .map(({ element, link }) => ({
-            link,
-            top: getAbsoluteTop(element)
-        }))
-            .filter(({ top }) => !Number.isNaN(top))
-            .sort((a, b) => a.top - b.top);
-        // no headers available for active link
-        if (!headers.length) {
-            activateLink(null);
-            return;
-        }
-        // page top
-        if (scrollY < 1) {
-            activateLink(null);
-            return;
-        }
-        // page bottom - highlight last link
-        if (isBottom) {
-            activateLink(headers[headers.length - 1].link);
-            return;
-        }
-        // find the last header above the top of viewport
-        let activeLink = null;
-        for (const { link, top } of headers) {
-            if (top > scrollY + getScrollOffset() + 4) {
-                break;
-            }
-            activeLink = link;
-        }
-        activateLink(activeLink);
-    }
-    function activateLink(hash) {
-        if (prevActiveLink) {
-            prevActiveLink.classList.remove('active');
-        }
-        if (hash == null) {
-            prevActiveLink = null;
-        }
-        else {
-            prevActiveLink = container.value.querySelector(`a[href="${decodeURIComponent(hash)}"]`);
-        }
-        const activeLink = prevActiveLink;
-        if (activeLink) {
-            activeLink.classList.add('active');
-            marker.value.style.top = activeLink.offsetTop + 39 + 'px';
-            marker.value.style.opacity = '1';
-        }
-        else {
-            marker.value.style.top = '33px';
-            marker.value.style.opacity = '0';
-        }
-    }
+function useActiveAnchor(container, marker) {
+	const isAsideVisible = useMediaQuery("(min-width: 80rem)");
+	const onScroll = throttleAndDebounce(setActiveLink, 100);
+	let prevActiveLink = null;
+	let ignoreScrollOnce = false;
+	onMounted(() => {
+		requestAnimationFrame(setActiveLink);
+		window.addEventListener("scroll", onScroll);
+		container.value?.addEventListener("click", onClick);
+	});
+	onUpdated(() => {
+		activateLink(location.hash);
+	});
+	onUnmounted(() => {
+		window.removeEventListener("scroll", onScroll);
+	});
+	function onClick(e) {
+		if (!isAsideVisible.value) return;
+		const hash = e.target instanceof Element ? e.target.closest("a")?.hash : null;
+		if (hash) {
+			ignoreScrollOnce = true;
+			activateLink(hash);
+		}
+	}
+	function setActiveLink() {
+		if (!isAsideVisible.value) return;
+		if (ignoreScrollOnce) {
+			ignoreScrollOnce = false;
+			return;
+		}
+		const scrollY = window.scrollY;
+		const innerHeight = window.innerHeight;
+		const offsetHeight = document.body.offsetHeight;
+		const isBottom = scrollY + innerHeight - offsetHeight >= 0;
+		const headers = resolvedHeaders.map(({ element, link }) => ({
+			link,
+			top: getAbsoluteTop(element),
+			scrollMarginTop: Number.parseFloat(getComputedStyle(element).scrollMarginTop) || 0
+		})).filter(({ top }) => !Number.isNaN(top)).sort((a, b) => a.top - b.top);
+		if (!headers.length) {
+			activateLink(null);
+			return;
+		}
+		if (scrollY < 1) {
+			activateLink(null);
+			return;
+		}
+		if (isBottom) {
+			activateLink(headers.at(-1)?.link ?? null);
+			return;
+		}
+		let activeLink = null;
+		for (const { link, top, scrollMarginTop } of headers) {
+			if (top > scrollY + scrollMarginTop + 4) break;
+			activeLink = link;
+		}
+		activateLink(activeLink);
+	}
+	function activateLink(hash) {
+		const activeLink = hash != null ? container.value?.querySelector(`a[href$="${decodeURIComponent(hash)}"]`) ?? null : null;
+		if (activeLink === prevActiveLink) return;
+		prevActiveLink?.classList.remove("active");
+		prevActiveLink = activeLink;
+		if (activeLink) {
+			activeLink.classList.add("active");
+			if (marker.value) {
+				marker.value.style.top = activeLink.offsetTop + (activeLink.offsetParent?.offsetTop ?? 0) + (activeLink.offsetHeight - marker.value.offsetHeight) / 2 + "px";
+				marker.value.style.opacity = "1";
+			}
+			activeLink.scrollIntoView({
+				block: "nearest",
+				behavior: "smooth"
+			});
+		} else if (marker.value) {
+			marker.value.style.top = "";
+			marker.value.style.opacity = "0";
+		}
+	}
 }
 function getAbsoluteTop(element) {
-    let offsetTop = 0;
-    while (element !== document.body) {
-        if (element === null) {
-            // child element is:
-            // - not attached to the DOM (display: none)
-            // - set to fixed position (not scrollable)
-            // - body or html element (null offsetParent)
-            return NaN;
-        }
-        offsetTop += element.offsetTop;
-        element = element.offsetParent;
-    }
-    return offsetTop;
+	let offsetTop = 0;
+	while (element !== document.body) {
+		if (element === null) return NaN;
+		offsetTop += element.offsetTop;
+		element = element.offsetParent;
+	}
+	return offsetTop;
 }
 function buildTree(data, min, max) {
-    resolvedHeaders.length = 0;
-    const result = [];
-    const stack = [];
-    data.forEach((item) => {
-        const node = { ...item, children: [] };
-        let parent = stack[stack.length - 1];
-        while (parent && parent.level >= node.level) {
-            stack.pop();
-            parent = stack[stack.length - 1];
-        }
-        if (node.element.classList.contains('ignore-header') ||
-            (parent && 'shouldIgnore' in parent)) {
-            stack.push({ level: node.level, shouldIgnore: true });
-            return;
-        }
-        if (node.level > max || node.level < min)
-            return;
-        resolvedHeaders.push({ element: node.element, link: node.link });
-        if (parent)
-            parent.children.push(node);
-        else
-            result.push(node);
-        stack.push(node);
-    });
-    return result;
+	resolvedHeaders.length = 0;
+	const result = [];
+	const stack = [];
+	data.forEach((item) => {
+		const node = {
+			...item,
+			children: []
+		};
+		let parent = stack[stack.length - 1];
+		while (parent && parent.level >= node.level) {
+			stack.pop();
+			parent = stack[stack.length - 1];
+		}
+		if (node.element.classList.contains("ignore-header") || parent && "shouldIgnore" in parent) {
+			stack.push({
+				level: node.level,
+				shouldIgnore: true
+			});
+			return;
+		}
+		if (node.level > max || node.level < min) return;
+		resolvedHeaders.push({
+			element: node.element,
+			link: node.link
+		});
+		if (parent) parent.children.push(node);
+		else result.push(node);
+		stack.push(node);
+	});
+	return result;
 }
+//#endregion
+export { getHeaders, resolveHeaders, resolveTitle, useActiveAnchor };

package/dist/client/theme-default/composables/prev-next.d.ts

@@ -0,0 +1,16 @@
+//#region src/client/theme-default/composables/prev-next.d.ts
+export declare function usePrevNext(): import("vue").ComputedRef<{
+  prev?: {
+    text?: string;
+    link?: string;
+    target?: string;
+    rel?: string;
+  };
+  next?: {
+    text?: string;
+    link?: string;
+    target?: string;
+    rel?: string;
+  };
+}>;
+//#endregion

package/dist/client/theme-default/composables/prev-next.js

@@ -1,57 +1,35 @@
-import { computed } from 'vue';
-import { isActive } from '../../shared';
-import { getFlatSideBarLinks, getSidebar } from '../support/sidebar';
-import { useData } from './data';
-export function usePrevNext() {
-    const { page, theme, frontmatter } = useData();
-    return computed(() => {
-        const sidebar = getSidebar(theme.value.sidebar, page.value.relativePath);
-        const links = getFlatSideBarLinks(sidebar);
-        // ignore inner-page links with hashes
-        const candidates = uniqBy(links, (link) => link.link.replace(/[?#].*$/, ''));
-        const index = candidates.findIndex((link) => {
-            return isActive(page.value.relativePath, link.link);
-        });
-        const hidePrev = (theme.value.docFooter?.prev === false && !frontmatter.value.prev) ||
-            frontmatter.value.prev === false;
-        const hideNext = (theme.value.docFooter?.next === false && !frontmatter.value.next) ||
-            frontmatter.value.next === false;
-        return {
-            prev: hidePrev
-                ? undefined
-                : {
-                    text: (typeof frontmatter.value.prev === 'string'
-                        ? frontmatter.value.prev
-                        : typeof frontmatter.value.prev === 'object'
-                            ? frontmatter.value.prev.text
-                            : undefined) ??
-                        candidates[index - 1]?.docFooterText ??
-                        candidates[index - 1]?.text,
-                    link: (typeof frontmatter.value.prev === 'object'
-                        ? frontmatter.value.prev.link
-                        : undefined) ?? candidates[index - 1]?.link
-                },
-            next: hideNext
-                ? undefined
-                : {
-                    text: (typeof frontmatter.value.next === 'string'
-                        ? frontmatter.value.next
-                        : typeof frontmatter.value.next === 'object'
-                            ? frontmatter.value.next.text
-                            : undefined) ??
-                        candidates[index + 1]?.docFooterText ??
-                        candidates[index + 1]?.text,
-                    link: (typeof frontmatter.value.next === 'object'
-                        ? frontmatter.value.next.link
-                        : undefined) ?? candidates[index + 1]?.link
-                }
-        };
-    });
-}
-function uniqBy(array, keyFn) {
-    const seen = new Set();
-    return array.filter((item) => {
-        const k = keyFn(item);
-        return seen.has(k) ? false : seen.add(k);
-    });
+import { isActive, normalize } from "../../shared.js";
+import { useData } from "./data.js";
+import { uniqBy } from "../support/utils.js";
+import { getFlatSideBarLinks, getSidebar } from "../support/sidebar.js";
+import { computed } from "vue";
+//#region src/client/theme-default/composables/prev-next.ts
+function usePrevNext() {
+	const { theme, page, frontmatter } = useData();
+	return computed(() => {
+		const sidebar = getSidebar(theme.value.sidebar, page.value.relativePath);
+		const links = getFlatSideBarLinks(sidebar);
+		const candidates = uniqBy(links, (link) => normalize(link.link));
+		const index = candidates.findIndex((link) => {
+			return isActive(page.value.relativePath, "", link.link, false, true);
+		});
+		const hidePrev = theme.value.docFooter?.prev === false && !frontmatter.value.prev || frontmatter.value.prev === false;
+		const hideNext = theme.value.docFooter?.next === false && !frontmatter.value.next || frontmatter.value.next === false;
+		return {
+			prev: hidePrev ? void 0 : {
+				text: (typeof frontmatter.value.prev === "string" ? frontmatter.value.prev : typeof frontmatter.value.prev === "object" ? frontmatter.value.prev.text : void 0) ?? candidates[index - 1]?.docFooterText ?? candidates[index - 1]?.text,
+				link: (typeof frontmatter.value.prev === "object" ? frontmatter.value.prev.link : void 0) ?? candidates[index - 1]?.link,
+				target: (typeof frontmatter.value.prev === "object" ? frontmatter.value.prev.target : void 0) ?? candidates[index - 1]?.target,
+				rel: (typeof frontmatter.value.prev === "object" ? frontmatter.value.prev.rel : void 0) ?? candidates[index - 1]?.rel
+			},
+			next: hideNext ? void 0 : {
+				text: (typeof frontmatter.value.next === "string" ? frontmatter.value.next : typeof frontmatter.value.next === "object" ? frontmatter.value.next.text : void 0) ?? candidates[index + 1]?.docFooterText ?? candidates[index + 1]?.text,
+				link: (typeof frontmatter.value.next === "object" ? frontmatter.value.next.link : void 0) ?? candidates[index + 1]?.link,
+				target: (typeof frontmatter.value.next === "object" ? frontmatter.value.next.target : void 0) ?? candidates[index + 1]?.target,
+				rel: (typeof frontmatter.value.next === "object" ? frontmatter.value.next.rel : void 0) ?? candidates[index + 1]?.rel
+			}
+		};
+	});
 }
+//#endregion
+export { usePrevNext };

package/dist/client/theme-default/composables/scroll-lock.d.ts

@@ -0,0 +1,4 @@
+import { WritableComputedRef } from "vue";
+//#region src/client/theme-default/composables/scroll-lock.d.ts
+export declare function useBodyScrollLock(): WritableComputedRef<boolean>;
+//#endregion

package/dist/client/theme-default/composables/scroll-lock.js

@@ -0,0 +1,95 @@
+import { computed, onScopeDispose, shallowRef } from "vue";
+import { inBrowser } from "vitepress";
+//#region src/client/theme-default/composables/scroll-lock.ts
+const isIOS = inBrowser && (/iP(?:ad|hone|od)/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+const scrollKeys = /* @__PURE__ */ new Set([
+	" ",
+	"PageUp",
+	"PageDown",
+	"Home",
+	"End",
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+]);
+const listenerOptions = {
+	capture: true,
+	passive: false
+};
+function isScrollable(target) {
+	let el = target instanceof Element ? target : null;
+	while (el && el !== document.body) {
+		const { overflowX, overflowY } = getComputedStyle(el);
+		if ((overflowY === "auto" || overflowY === "scroll") && el.scrollHeight > el.clientHeight || (overflowX === "auto" || overflowX === "scroll") && el.scrollWidth > el.clientWidth) return true;
+		el = el.parentElement;
+	}
+	return false;
+}
+function blockScroll(e) {
+	if ("touches" in e && e.touches.length > 1) return;
+	if (!isScrollable(e.target)) e.preventDefault();
+}
+function blockScrollKeys(e) {
+	if (e.metaKey || e.ctrlKey || e.altKey || !scrollKeys.has(e.key)) return;
+	const el = e.target;
+	if (el instanceof HTMLElement && (el.isContentEditable || el.matches("input, textarea, select"))) return;
+	blockScroll(e);
+}
+let overflowLockCount = 0;
+let eventLockCount = 0;
+let initialOverflow;
+let initialGutter;
+function lockOverflow(reserveGutter) {
+	if (++overflowLockCount > 1) return;
+	const html = document.documentElement;
+	if (reserveGutter && !getComputedStyle(html).scrollbarGutter.includes("stable")) {
+		initialGutter = html.style.scrollbarGutter;
+		html.style.scrollbarGutter = "stable";
+	}
+	initialOverflow = document.body.style.overflow;
+	document.body.style.overflow = "hidden";
+	if (isIOS) document.addEventListener("touchmove", blockScroll, listenerOptions);
+}
+function unlockOverflow() {
+	if (--overflowLockCount > 0) return;
+	if (isIOS) document.removeEventListener("touchmove", blockScroll, listenerOptions);
+	document.body.style.overflow = initialOverflow ?? "";
+	if (initialGutter !== void 0) document.documentElement.style.scrollbarGutter = initialGutter;
+	initialOverflow = initialGutter = void 0;
+}
+function lockEvents() {
+	if (++eventLockCount > 1) return;
+	document.addEventListener("wheel", blockScroll, listenerOptions);
+	document.addEventListener("touchmove", blockScroll, listenerOptions);
+	document.addEventListener("keydown", blockScrollKeys, listenerOptions);
+}
+function unlockEvents() {
+	if (--eventLockCount > 0) return;
+	document.removeEventListener("wheel", blockScroll, listenerOptions);
+	document.removeEventListener("touchmove", blockScroll, listenerOptions);
+	document.removeEventListener("keydown", blockScrollKeys, listenerOptions);
+}
+function useBodyScrollLock() {
+	const isLocked = shallowRef(false);
+	let useEvents = false;
+	function lock() {
+		if (isLocked.value) return;
+		const scrollbarTakesSpace = window.innerWidth > document.documentElement.clientWidth;
+		useEvents = scrollbarTakesSpace && !CSS.supports("scrollbar-gutter", "stable");
+		useEvents ? lockEvents() : lockOverflow(scrollbarTakesSpace);
+		isLocked.value = true;
+	}
+	function unlock() {
+		if (!isLocked.value) return;
+		useEvents ? unlockEvents() : unlockOverflow();
+		isLocked.value = false;
+	}
+	onScopeDispose(unlock);
+	return computed({
+		get: () => isLocked.value,
+		set: (value) => value ? lock() : unlock()
+	});
+}
+//#endregion
+export { useBodyScrollLock };

package/dist/client/theme-default/composables/sidebar.d.ts

@@ -0,0 +1,25 @@
+import { ComputedRef } from "vue";
+import { DefaultTheme } from "vitepress/theme";
+//#region src/client/theme-default/composables/sidebar.d.ts
+/**
+ * a11y: cache the element that opened the Sidebar (the menu button) then
+ * focus that button again when Menu is closed with Escape key.
+ */
+export declare function useCloseSidebarOnEscape(close: () => void): void;
+export declare function useSidebarControl(): {
+  isOpen: import("vue").Ref<boolean, boolean>;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+};
+export declare function useSidebarItemControl(item: ComputedRef<DefaultTheme.SidebarItem>): {
+  collapsed: import("vue").Ref<boolean, boolean>;
+  collapsible: ComputedRef<boolean>;
+  isLink: ComputedRef<boolean>;
+  isActiveLink: ComputedRef<boolean>;
+  isCurrentLink: ComputedRef<boolean>;
+  hasActiveLink: ComputedRef<boolean>;
+  hasChildren: ComputedRef<boolean>;
+  toggle: () => void;
+};
+//#endregion