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

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

@@ -1,136 +1,99 @@
-import { useMediaQuery } from '@vueuse/core';
-import { computed, onMounted, onUnmounted, ref, watch, watchEffect, watchPostEffect } from 'vue';
-import { isActive } from '../../shared';
-import { hasActiveLink as containsActiveLink, getSidebar, getSidebarGroups } from '../support/sidebar';
-import { useData } from './data';
-export function useSidebar() {
-    const { frontmatter, page, theme } = useData();
-    const is960 = useMediaQuery('(min-width: 960px)');
-    const isOpen = ref(false);
-    const _sidebar = computed(() => {
-        const sidebarConfig = theme.value.sidebar;
-        const relativePath = page.value.relativePath;
-        return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : [];
-    });
-    const sidebar = ref(_sidebar.value);
-    watch(_sidebar, (next, prev) => {
-        if (JSON.stringify(next) !== JSON.stringify(prev))
-            sidebar.value = _sidebar.value;
-    });
-    const hasSidebar = computed(() => {
-        return (frontmatter.value.sidebar !== false &&
-            sidebar.value.length > 0 &&
-            frontmatter.value.layout !== 'home');
-    });
-    const leftAside = computed(() => {
-        if (hasAside)
-            return frontmatter.value.aside == null
-                ? theme.value.aside === 'left'
-                : frontmatter.value.aside === 'left';
-        return false;
-    });
-    const hasAside = computed(() => {
-        if (frontmatter.value.layout === 'home')
-            return false;
-        if (frontmatter.value.aside != null)
-            return !!frontmatter.value.aside;
-        return theme.value.aside !== false;
-    });
-    const isSidebarEnabled = computed(() => hasSidebar.value && is960.value);
-    const sidebarGroups = computed(() => {
-        return hasSidebar.value ? getSidebarGroups(sidebar.value) : [];
-    });
-    function open() {
-        isOpen.value = true;
-    }
-    function close() {
-        isOpen.value = false;
-    }
-    function toggle() {
-        isOpen.value ? close() : open();
-    }
-    return {
-        isOpen,
-        sidebar,
-        sidebarGroups,
-        hasSidebar,
-        hasAside,
-        leftAside,
-        isSidebarEnabled,
-        open,
-        close,
-        toggle
-    };
-}
+import { isActive } from "../../shared.js";
+import { hasActiveLink } from "../support/sidebar.js";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
+import { useRoute } from "vitepress";
+//#region src/client/theme-default/composables/sidebar.ts
+const isOpen = ref(false);
 /**
- * a11y: cache the element that opened the Sidebar (the menu button) then
- * focus that button again when Menu is closed with Escape key.
- */
-export function useCloseSidebarOnEscape(isOpen, close) {
-    let triggerElement;
-    watchEffect(() => {
-        triggerElement = isOpen.value
-            ? document.activeElement
-            : undefined;
-    });
-    onMounted(() => {
-        window.addEventListener('keyup', onEscape);
-    });
-    onUnmounted(() => {
-        window.removeEventListener('keyup', onEscape);
-    });
-    function onEscape(e) {
-        if (e.key === 'Escape' && isOpen.value) {
-            close();
-            triggerElement?.focus();
-        }
-    }
+* a11y: cache the element that opened the Sidebar (the menu button) then
+* focus that button again when Menu is closed with Escape key.
+*/
+function useCloseSidebarOnEscape(close) {
+	let triggerElement;
+	watchEffect(() => {
+		triggerElement = isOpen.value ? document.activeElement : void 0;
+	});
+	onMounted(() => {
+		window.addEventListener("keyup", onEscape);
+	});
+	onUnmounted(() => {
+		window.removeEventListener("keyup", onEscape);
+	});
+	function onEscape(e) {
+		if (e.key === "Escape" && isOpen.value) {
+			close();
+			triggerElement?.focus();
+		}
+	}
+}
+function useSidebarControl() {
+	function open() {
+		isOpen.value = true;
+	}
+	function close() {
+		isOpen.value = false;
+	}
+	function toggle() {
+		isOpen.value ? close() : open();
+	}
+	return {
+		isOpen,
+		open,
+		close,
+		toggle
+	};
 }
-export function useSidebarControl(item) {
-    const { page, hash } = useData();
-    const collapsed = ref(false);
-    const collapsible = computed(() => {
-        return item.value.collapsed != null;
-    });
-    const isLink = computed(() => {
-        return !!item.value.link;
-    });
-    const isActiveLink = ref(false);
-    const updateIsActiveLink = () => {
-        isActiveLink.value = isActive(page.value.relativePath, item.value.link);
-    };
-    watch([page, item, hash], updateIsActiveLink);
-    onMounted(updateIsActiveLink);
-    const hasActiveLink = computed(() => {
-        if (isActiveLink.value) {
-            return true;
-        }
-        return item.value.items
-            ? containsActiveLink(page.value.relativePath, item.value.items)
-            : false;
-    });
-    const hasChildren = computed(() => {
-        return !!(item.value.items && item.value.items.length);
-    });
-    watchEffect(() => {
-        collapsed.value = !!(collapsible.value && item.value.collapsed);
-    });
-    watchPostEffect(() => {
-        ;
-        (isActiveLink.value || hasActiveLink.value) && (collapsed.value = false);
-    });
-    function toggle() {
-        if (collapsible.value) {
-            collapsed.value = !collapsed.value;
-        }
-    }
-    return {
-        collapsed,
-        collapsible,
-        isLink,
-        isActiveLink,
-        hasActiveLink,
-        hasChildren,
-        toggle
-    };
+function useSidebarItemControl(item) {
+	const route = useRoute();
+	const collapsed = ref(false);
+	const collapsible = computed(() => {
+		return item.value.collapsed != null;
+	});
+	const isLink = computed(() => {
+		return !!item.value.link;
+	});
+	const isActiveLink = ref(false);
+	const hasActiveLink$1 = ref(false);
+	function updateActiveLink(skipHashCheck = false) {
+		if (item.value.link) isActiveLink.value = isActive(route.data.relativePath, route.hash, item.value.link, false, skipHashCheck);
+		else isActiveLink.value = false;
+		if (isActiveLink.value) {
+			hasActiveLink$1.value = true;
+			nextTick(() => collapsed.value = false);
+			return;
+		}
+		if (!item.value.items) {
+			hasActiveLink$1.value = false;
+			return;
+		}
+		hasActiveLink$1.value = hasActiveLink(route.data.relativePath, route.hash, item.value.items, skipHashCheck);
+		if (hasActiveLink$1.value) nextTick(() => collapsed.value = false);
+	}
+	updateActiveLink(true);
+	watch([item, route], () => updateActiveLink());
+	onMounted(() => updateActiveLink());
+	const isCurrentLink = computed(() => {
+		return item.value.link ? isActive(route.data.relativePath, route.hash, item.value.link) : false;
+	});
+	const hasChildren = computed(() => {
+		return !!(item.value.items && item.value.items.length);
+	});
+	watchEffect(() => {
+		collapsed.value = !!(collapsible.value && item.value.collapsed);
+	});
+	function toggle() {
+		if (collapsible.value) collapsed.value = !collapsed.value;
+	}
+	return {
+		collapsed,
+		collapsible,
+		isLink,
+		isActiveLink,
+		isCurrentLink,
+		hasActiveLink: hasActiveLink$1,
+		hasChildren,
+		toggle
+	};
 }
+//#endregion
+export { useCloseSidebarOnEscape, useSidebarControl, useSidebarItemControl };

package/dist/client/theme-default/composables/sponsor-grid.d.ts

@@ -0,0 +1,10 @@
+import { TemplateRef } from "vue";
+//#region src/client/theme-default/composables/sponsor-grid.d.ts
+export type GridSetting = { [size in GridSize]: [number, number][]; };
+export type GridSize = 'xmini' | 'mini' | 'small' | 'medium' | 'big';
+export interface UseSponsorsGridOptions {
+  el: TemplateRef<HTMLElement>;
+  size?: GridSize;
+}
+export declare function useSponsorsGrid({ el, size }: UseSponsorsGridOptions): void;
+//#endregion

package/dist/client/theme-default/composables/sponsor-grid.js

@@ -1,94 +1,87 @@
-import { onMounted, onUnmounted } from 'vue';
-import { throttleAndDebounce } from '../support/utils';
+import { throttleAndDebounce } from "../support/utils.js";
+import { onMounted, onUnmounted } from "vue";
+//#region src/client/theme-default/composables/sponsor-grid.ts
 /**
- * Defines grid configuration for each sponsor size in tuple.
- *
- * [Screen width, Column size]
- *
- * It sets grid size on matching screen size. For example, `[768, 5]` will
- * set 5 columns when screen size is bigger or equal to 768px.
- *
- * Column will set only when item size is bigger than the column size. For
- * example, even we define 5 columns, if we only have 1 sponsor yet, we would
- * like to show it in 1 column to make it stand out.
- */
+* Defines grid configuration for each sponsor size in tuple.
+*
+* [Screen width (rem), Column size]
+*
+* It sets grid size on matching screen size. For example, `[48, 5]` will
+* set 5 columns when the screen is at least 48rem wide.
+*
+* Column will set only when item size is bigger than the column size. For
+* example, even we define 5 columns, if we only have 1 sponsor yet, we would
+* like to show it in 1 column to make it stand out.
+*/
 const GridSettings = {
-    xmini: [[0, 2]],
-    mini: [],
-    small: [
-        [920, 6],
-        [768, 5],
-        [640, 4],
-        [480, 3],
-        [0, 2]
-    ],
-    medium: [
-        [960, 5],
-        [832, 4],
-        [640, 3],
-        [480, 2]
-    ],
-    big: [
-        [832, 3],
-        [640, 2]
-    ]
+	xmini: [[0, 2]],
+	mini: [],
+	small: [
+		[57.5, 6],
+		[48, 5],
+		[40, 4],
+		[30, 3],
+		[0, 2]
+	],
+	medium: [
+		[60, 5],
+		[52, 4],
+		[40, 3],
+		[30, 2]
+	],
+	big: [[52, 3], [40, 2]]
 };
-export function useSponsorsGrid({ el, size = 'medium' }) {
-    const onResize = throttleAndDebounce(manage, 100);
-    onMounted(() => {
-        manage();
-        window.addEventListener('resize', onResize);
-    });
-    onUnmounted(() => {
-        window.removeEventListener('resize', onResize);
-    });
-    function manage() {
-        adjustSlots(el.value, size);
-    }
+function useSponsorsGrid({ el, size = "medium" }) {
+	const onResize = throttleAndDebounce(manage, 100);
+	onMounted(() => {
+		manage();
+		window.addEventListener("resize", onResize);
+	});
+	onUnmounted(() => {
+		window.removeEventListener("resize", onResize);
+	});
+	function manage() {
+		if (el.value) adjustSlots(el.value, size);
+	}
 }
 function adjustSlots(el, size) {
-    const tsize = el.children.length;
-    const asize = el.querySelectorAll('.vp-sponsor-grid-item:not(.empty)').length;
-    const grid = setGrid(el, size, asize);
-    manageSlots(el, grid, tsize, asize);
+	const tsize = el.children.length;
+	const asize = el.querySelectorAll(".vp-sponsor-grid-item:not(.empty)").length;
+	manageSlots(el, setGrid(el, size, asize), tsize, asize);
 }
 function setGrid(el, size, items) {
-    const settings = GridSettings[size];
-    const screen = window.innerWidth;
-    let grid = 1;
-    settings.some(([breakpoint, value]) => {
-        if (screen >= breakpoint) {
-            grid = items < value ? items : value;
-            return true;
-        }
-    });
-    setGridData(el, grid);
-    return grid;
+	const settings = GridSettings[size];
+	let grid = 1;
+	settings.some(([breakpoint, value]) => {
+		if (window.matchMedia(`(min-width: ${breakpoint}rem)`).matches) {
+			grid = items < value ? items : value;
+			return true;
+		}
+	});
+	setGridData(el, grid);
+	return grid;
 }
 function setGridData(el, value) {
-    el.dataset.vpGrid = String(value);
+	el.dataset.vpGrid = String(value);
 }
 function manageSlots(el, grid, tsize, asize) {
-    const diff = tsize - asize;
-    const rem = asize % grid;
-    const drem = rem === 0 ? rem : grid - rem;
-    neutralizeSlots(el, drem - diff);
+	const diff = tsize - asize;
+	const rem = asize % grid;
+	neutralizeSlots(el, (rem === 0 ? rem : grid - rem) - diff);
 }
 function neutralizeSlots(el, count) {
-    if (count === 0) {
-        return;
-    }
-    count > 0 ? addSlots(el, count) : removeSlots(el, count * -1);
+	if (count === 0) return;
+	count > 0 ? addSlots(el, count) : removeSlots(el, count * -1);
 }
 function addSlots(el, count) {
-    for (let i = 0; i < count; i++) {
-        const slot = document.createElement('div');
-        slot.classList.add('vp-sponsor-grid-item', 'empty');
-        el.append(slot);
-    }
+	for (let i = 0; i < count; i++) {
+		const slot = document.createElement("div");
+		slot.classList.add("vp-sponsor-grid-item", "empty");
+		el.append(slot);
+	}
 }
 function removeSlots(el, count) {
-    for (let i = 0; i < count; i++) {
-        el.removeChild(el.lastElementChild);
-    }
+	for (let i = 0; i < count; i++) el.removeChild(el.lastElementChild);
 }
+//#endregion
+export { useSponsorsGrid };

package/dist/client/theme-default/index.d.ts

@@ -0,0 +1,3 @@
+import { useLayout } from "./composables/layout.js";
+import theme, { VPBadge, VPButton, VPDocAsideSponsors, VPFeatures, VPHomeContent, VPHomeFeatures, VPHomeHero, VPHomeSponsors, VPIcon, VPImage, VPLink, VPNavBarSearch, VPSocialLink, VPSocialLinks, VPSponsors, VPTeamMembers, VPTeamPage, VPTeamPageSection, VPTeamPageTitle } from "./without-fonts.js";
+export { VPBadge, VPButton, VPDocAsideSponsors, VPFeatures, VPHomeContent, VPHomeFeatures, VPHomeHero, VPHomeSponsors, VPIcon, VPImage, VPLink, VPNavBarSearch, VPSocialLink, VPSocialLinks, VPSponsors, VPTeamMembers, VPTeamPage, VPTeamPageSection, VPTeamPageTitle, theme as default, useLayout };

package/dist/client/theme-default/index.js

@@ -1,3 +1,4 @@
-import './styles/fonts.css';
-export * from './without-fonts';
-export { default as default } from './without-fonts';
+import { useLayout } from "./composables/layout.js";
+import theme, { VPBadge, VPButton, VPDocAsideSponsors, VPFeatures, VPHomeContent, VPHomeFeatures, VPHomeHero, VPHomeSponsors, VPIcon, VPImage, VPLink, VPNavBarSearch, VPSocialLink, VPSocialLinks, VPSponsors, VPTeamMembers, VPTeamPage, VPTeamPageSection, VPTeamPageTitle } from "./without-fonts.js";
+import "./styles/fonts.css";
+export { VPBadge, VPButton, VPDocAsideSponsors, VPFeatures, VPHomeContent, VPHomeFeatures, VPHomeHero, VPHomeSponsors, VPIcon, VPImage, VPLink, VPNavBarSearch, VPSocialLink, VPSocialLinks, VPSponsors, VPTeamMembers, VPTeamPage, VPTeamPageSection, VPTeamPageTitle, theme as default, useLayout };