@astryx-vue/core 0.1.1 → 0.2.0

package/dist/Outline-DQfEBxlc.js

@@ -0,0 +1,325 @@
+import { t as useListFocus } from "./useListFocus-D0iOJl39.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, toRef, unref, watch } from "vue";
+import "../styles/outline.css";
+//#region src/Outline/scrollGeometry.ts
+function getScrollableAncestor(element) {
+	let current = element?.parentElement ?? null;
+	while (current != null) {
+		const overflowY = getComputedStyle(current).overflowY;
+		if ((overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") && current.scrollHeight > current.clientHeight) return current;
+		current = current.parentElement;
+	}
+	return null;
+}
+function getScrollMarginTop(element) {
+	return Number.parseFloat(getComputedStyle(element).scrollMarginTop) || 0;
+}
+function getRootTop(scrollRoot) {
+	return scrollRoot != null ? scrollRoot.getBoundingClientRect().top : 0;
+}
+function getRestingTop(target, scrollRoot, offset) {
+	return getRootTop(scrollRoot) + offset + getScrollMarginTop(target);
+}
+function scrollToTarget(target, scrollRoot, scrollTarget, offset) {
+	const behavior = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
+	if (offset === 0) {
+		target.scrollIntoView({
+			behavior,
+			block: "start"
+		});
+		return;
+	}
+	const delta = target.getBoundingClientRect().top - getRestingTop(target, scrollRoot, offset);
+	scrollTarget.scrollBy({
+		top: delta,
+		behavior
+	});
+}
+function resolveActiveId(items, scrollRoot, offset) {
+	if (items.length === 0) return void 0;
+	if (scrollRoot != null ? scrollRoot.scrollTop + scrollRoot.clientHeight >= scrollRoot.scrollHeight - 2 : window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2) return items[items.length - 1].id;
+	let activeId = items[0].id;
+	for (const item of items) {
+		const element = document.getElementById(item.id);
+		if (element == null) continue;
+		if (element.getBoundingClientRect().top <= getRestingTop(element, scrollRoot, offset) + 1) activeId = item.id;
+		else break;
+	}
+	return activeId;
+}
+/** Heading levels 1 and 2 share the first indent. Levels 5 and 6 share the fourth. */
+function indentLevel(level) {
+	return Math.max(1, Math.min(4, level - 1 || 1));
+}
+//#endregion
+//#region src/Outline/useIndicator.ts
+/** Place the sliding bar on the active link, measured against the track. */
+function useOutlineIndicator(root, activeId) {
+	let frame = 0;
+	let observer = null;
+	function place() {
+		const nav = root.value;
+		const track = nav?.querySelector(".astryx-outline__track");
+		const active = nav?.querySelector("[aria-current=\"location\"]");
+		if (nav == null || track == null || active == null) return;
+		const trackRect = track.getBoundingClientRect();
+		const activeRect = active.getBoundingClientRect();
+		nav.style.setProperty("--astryx-outline-indicator-top", `${activeRect.top - trackRect.top}px`);
+		nav.style.setProperty("--astryx-outline-indicator-height", `${activeRect.height}px`);
+	}
+	function schedule() {
+		if (typeof requestAnimationFrame !== "function") {
+			place();
+			return;
+		}
+		if (frame !== 0) cancelAnimationFrame(frame);
+		frame = requestAnimationFrame(() => {
+			frame = 0;
+			place();
+		});
+	}
+	onMounted(() => {
+		schedule();
+		observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+		if (root.value != null) observer?.observe(root.value);
+		window.addEventListener("resize", schedule);
+	});
+	onBeforeUnmount(() => {
+		observer?.disconnect();
+		window.removeEventListener("resize", schedule);
+		if (frame !== 0 && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
+	});
+	watch(activeId, schedule);
+}
+//#endregion
+//#region src/Outline/useScrollSpy.ts
+const SCROLL_SETTLE_TIMEOUT_MS = 1200;
+const SCROLL_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"PageUp",
+	"PageDown",
+	"Home",
+	"End",
+	" ",
+	"Spacebar"
+]);
+function useScrollSpy(options) {
+	const isControlled = computed(() => options.activeId.value !== void 0);
+	const uncontrolledId = ref(options.items.value[0]?.id);
+	const resolvedId = computed(() => isControlled.value ? options.activeId.value : uncontrolledId.value);
+	const suppressed = ref(false);
+	let navigation = null;
+	function scrollRoot() {
+		const explicit = options.scrollContainer.value;
+		if (explicit) return explicit;
+		return getScrollableAncestor(options.root.value);
+	}
+	function sync() {
+		if (isControlled.value || suppressed.value) return;
+		const next = resolveActiveId(options.items.value, scrollRoot(), options.offset.value);
+		if (next != null && next !== uncontrolledId.value) {
+			uncontrolledId.value = next;
+			options.onActive(next);
+		}
+	}
+	function scrollTo(id) {
+		const target = typeof document === "undefined" ? null : document.getElementById(id);
+		if (target == null) return false;
+		navigation?.supersede();
+		options.onNavigateStart?.(id);
+		if (isControlled.value) options.onActive(id);
+		else suppressed.value = true;
+		const root = scrollRoot();
+		const targetScroller = root ?? window;
+		let settled = false;
+		let timer = 0;
+		function cleanup() {
+			targetScroller.removeEventListener("scrollend", onSettle);
+			targetScroller.removeEventListener("wheel", onManual);
+			targetScroller.removeEventListener("touchmove", onManual);
+			window.removeEventListener("keydown", onKeyDown);
+			if (timer !== 0) clearTimeout(timer);
+			navigation = null;
+		}
+		function finish(didArrive, shouldResume = true) {
+			if (settled) return;
+			settled = true;
+			cleanup();
+			if (!isControlled.value) {
+				suppressed.value = false;
+				if (didArrive) {
+					uncontrolledId.value = id;
+					options.onActive(id);
+				} else if (shouldResume) sync();
+			}
+			options.onNavigateEnd?.(id);
+		}
+		function onSettle() {
+			finish(true);
+		}
+		function onManual() {
+			finish(false);
+		}
+		function onKeyDown(event) {
+			if (!event.defaultPrevented && SCROLL_KEYS.has(event.key)) finish(false);
+		}
+		if (options.hasScrollOnClick.value) {
+			targetScroller.addEventListener("scrollend", onSettle);
+			targetScroller.addEventListener("wheel", onManual, { passive: true });
+			targetScroller.addEventListener("touchmove", onManual, { passive: true });
+			window.addEventListener("keydown", onKeyDown);
+			timer = window.setTimeout(onSettle, SCROLL_SETTLE_TIMEOUT_MS);
+			navigation = { supersede: () => finish(false, false) };
+			scrollToTarget(target, root, targetScroller, options.offset.value);
+		} else finish(true);
+		return true;
+	}
+	let listened = null;
+	onMounted(() => {
+		sync();
+		listened = scrollRoot() ?? window;
+		listened.addEventListener("scroll", sync, { passive: true });
+		window.addEventListener("resize", sync);
+	});
+	onBeforeUnmount(() => {
+		listened?.removeEventListener("scroll", sync);
+		window.removeEventListener("resize", sync);
+		navigation?.supersede();
+	});
+	watch(() => options.items.value.map((item) => item.id).join("\n"), () => {
+		if (!isControlled.value && (uncontrolledId.value == null || !options.items.value.some((item) => item.id === uncontrolledId.value))) uncontrolledId.value = options.items.value[0]?.id;
+		sync();
+	});
+	return {
+		resolvedId,
+		scrollTo
+	};
+}
+//#endregion
+//#region src/Outline/Outline.vue
+const _hoisted_1 = ["aria-label", "data-density"];
+const _hoisted_2 = [
+	"href",
+	"data-level",
+	"data-active",
+	"aria-current",
+	"onClick",
+	"onKeydown"
+];
+const _hoisted_3 = { class: "astryx-outline__label" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxOutline",
+	inheritAttrs: false,
+	__name: "Outline",
+	props: {
+		items: {},
+		activeId: {},
+		label: {},
+		density: { default: "default" },
+		offset: { default: 0 },
+		scrollContainer: { default: null },
+		hasScrollOnClick: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"navigateEnd",
+		"navigateStart",
+		"update:activeId"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const messages = useAstryxMessages();
+		const root = ref(null);
+		const regionLabel = computed(() => props.label ?? messages.value.outline.label);
+		const { resolvedId, scrollTo } = useScrollSpy({
+			activeId: toRef(props, "activeId"),
+			items: toRef(props, "items"),
+			root,
+			offset: toRef(props, "offset"),
+			scrollContainer: toRef(props, "scrollContainer"),
+			hasScrollOnClick: toRef(props, "hasScrollOnClick"),
+			onActive: (id) => emit("update:activeId", id),
+			onNavigateStart: (id) => emit("navigateStart", id),
+			onNavigateEnd: (id) => emit("navigateEnd", id)
+		});
+		const { handleFocus, handleKeyDown, listRef } = useListFocus({
+			hasRovingTabIndex: true,
+			itemSelector: "a[href]",
+			orientation: "vertical"
+		});
+		function seatTabStop() {
+			const list = listRef.value;
+			if (list == null || document.activeElement != null && list.contains(document.activeElement)) return;
+			const links = [...list.querySelectorAll("a[href]")];
+			const active = links.find((link) => link.getAttribute("aria-current") === "location");
+			if (active == null) return;
+			for (const link of links) link.tabIndex = link === active ? 0 : -1;
+		}
+		watch(resolvedId, () => {
+			nextTick(seatTabStop);
+		});
+		useOutlineIndicator(root, resolvedId);
+		function hasModifier(event) {
+			return event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
+		}
+		function navigate(id) {
+			if (scrollTo(id)) window.history.pushState(null, "", `#${id}`);
+		}
+		function onClick(id, event) {
+			if (event.defaultPrevented || hasModifier(event)) return;
+			if (document.getElementById(id) == null) return;
+			event.preventDefault();
+			navigate(id);
+		}
+		function onItemKeyDown(id, event) {
+			if (event.key !== " " && event.key !== "Spacebar") return;
+			if (event.defaultPrevented || hasModifier(event)) return;
+			event.preventDefault();
+			navigate(id);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["astryx-outline", _ctx.$attrs.class]),
+				style: normalizeStyle(_ctx.$attrs.style),
+				"aria-label": regionLabel.value,
+				"data-density": __props.density,
+				"data-component": "outline"
+			}, [
+				createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 方向键在链接之间移动焦点，列表本身不是另一个控件。 "),
+				createElementVNode("ul", {
+					ref_key: "listRef",
+					ref: listRef,
+					class: "astryx-outline__list",
+					onKeydown: _cache[0] || (_cache[0] = (...args) => unref(handleKeyDown) && unref(handleKeyDown)(...args)),
+					onFocus: _cache[1] || (_cache[1] = (...args) => unref(handleFocus) && unref(handleFocus)(...args))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+					return openBlock(), createElementBlock("li", {
+						key: item.id,
+						class: "astryx-outline__item"
+					}, [createElementVNode("a", {
+						class: "astryx-outline__link",
+						href: `#${item.id}`,
+						"data-level": unref(indentLevel)(item.level),
+						"data-active": item.id === unref(resolvedId) || void 0,
+						"aria-current": item.id === unref(resolvedId) ? "location" : void 0,
+						onClick: ($event) => onClick(item.id, $event),
+						onKeydown: ($event) => onItemKeyDown(item.id, $event)
+					}, [createElementVNode("span", _hoisted_3, toDisplayString(item.label), 1)], 40, _hoisted_2)]);
+				}), 128))], 544),
+				_cache[2] || (_cache[2] = createElementVNode("div", {
+					class: "astryx-outline__track",
+					"aria-hidden": "true"
+				}, [createElementVNode("span", { class: "astryx-outline__line" }), createElementVNode("span", { class: "astryx-outline__indicator" })], -1))
+			], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/OverflowList/index.d.ts

@@ -1,2 +1,2 @@
-import { _n as OverflowListEmits, gn as _default, vn as OverflowListItem, yn as OverflowListProps } from "../index-CQ9F1f_F.js";
+import { Cn as _default, En as OverflowListProps, Tn as OverflowListItem, wn as OverflowListEmits } from "../index-C6iJwTL0.js";
 export { _default as OverflowList, type OverflowListEmits, type OverflowListItem, type OverflowListProps };

package/dist/OverflowList/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../OverflowList-Kr4iJrNV.js";
+import { t as _sfc_main } from "../OverflowList-BU5VCntl.js";
 export { _sfc_main as OverflowList };

package/dist/{OverflowList-Kr4iJrNV.js → OverflowList-BU5VCntl.js}

@@ -1,8 +1,8 @@
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
 import { n as resolveNavRoot } from "./link-CdcUSxAj.js";
 import { t as _sfc_main$2 } from "./NavDisclosure-DHrSNRDR.js";
-import { n as _sfc_main$3, t as _sfc_main$4 } from "./NavMenuItem-mzNQESpB.js";
+import { n as _sfc_main$3, t as _sfc_main$4 } from "./NavMenuItem-B-k7olt5.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
 import "../styles/overflow-list.css";
 //#region src/OverflowList/OverflowMore.vue

package/dist/Overlay/index.d.ts

@@ -1,2 +1,2 @@
-import { a as OverlayContainerProps, c as OverlayScrimMode, d as OverlayShowOn, f as OverlaySlots, i as OverlayAlign, l as OverlayScrimProps, m as UseOverlayResult, n as _default$1, o as OverlayPosition, p as UseOverlayOptions, r as _default, s as OverlayProps, t as useOverlay, u as OverlayScrimSlots } from "../index-BDZCJ9ri.js";
+import { a as OverlayContainerProps, c as OverlayScrimMode, d as OverlayShowOn, f as OverlaySlots, i as OverlayAlign, l as OverlayScrimProps, m as UseOverlayResult, n as _default$1, o as OverlayPosition, p as UseOverlayOptions, r as _default, s as OverlayProps, t as useOverlay, u as OverlayScrimSlots } from "../index-BuubzuE8.js";
 export { _default as Overlay, type OverlayAlign, type OverlayContainerProps, type OverlayPosition, type OverlayProps, _default$1 as OverlayScrim, type OverlayScrimMode, type OverlayScrimProps, type OverlayScrimSlots, type OverlayShowOn, type OverlaySlots, type UseOverlayOptions, type UseOverlayResult, useOverlay };

package/dist/Pagination/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Pagination-BRStpeSB.js";
+import { t as _sfc_main } from "../Pagination-HdhtykeF.js";
 export { _sfc_main as Pagination };

package/dist/{Pagination-BRStpeSB.js → Pagination-HdhtykeF.js}

@@ -1,5 +1,5 @@
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
-import { t as _sfc_main$1 } from "./Selector-DvEUIVEC.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
+import { t as _sfc_main$1 } from "./Selector-Da-2BO3q.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, vShow, withDirectives } from "vue";
 import "../styles/pagination.css";
 /**

package/dist/Popover/index.d.ts

@@ -1,2 +1,3 @@
-import { a as PopoverProps, i as PopoverPlacement, n as PopoverAlignment, o as PopoverRole, r as PopoverPadding, t as _default } from "../index-Bovw9_8d.js";
+import { a as PopoverRole, i as PopoverProps, n as PopoverPadding, r as PopoverPlacement, t as PopoverAlignment } from "../types-Db3Owy8Q.js";
+import { t as _default } from "../index-Bu0Zd1uw.js";
 export { _default as Popover, type PopoverAlignment, type PopoverPadding, type PopoverPlacement, type PopoverProps, type PopoverRole };

package/dist/Radio/index.d.ts

@@ -1,2 +1,2 @@
-import { an as RadioGroupProps, cn as RadioOption, dn as RadioSize, fn as RadioSlots, hn as RadioValue, in as RadioGroupEmits, ln as RadioOrientation, mn as RadioStatusType, nn as _default, on as RadioGroupSlots, pn as RadioStatus, rn as RadioChangeEvent, tn as _default$1, un as RadioProps } from "../index-CQ9F1f_F.js";
+import { Sn as RadioValue, _n as RadioProps, bn as RadioStatus, cn as _default$1, dn as RadioGroupEmits, fn as RadioGroupProps, gn as RadioOrientation, hn as RadioOption, ln as _default, pn as RadioGroupSlots, un as RadioChangeEvent, vn as RadioSize, xn as RadioStatusType, yn as RadioSlots } from "../index-C6iJwTL0.js";
 export { _default as Radio, type RadioChangeEvent, _default$1 as RadioGroup, type RadioGroupEmits, type RadioGroupProps, type RadioGroupSlots, type RadioOption, type RadioOrientation, type RadioProps, type RadioSize, type RadioSlots, type RadioStatus, type RadioStatusType, type RadioValue };

package/dist/Radio/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../RadioGroup-DS6oTV_j.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../RadioGroup-BqjdSCfJ.js";
 export { _sfc_main as Radio, _sfc_main$1 as RadioGroup };

package/dist/{RadioGroup-DS6oTV_j.js → RadioGroup-BqjdSCfJ.js}

@@ -1,4 +1,4 @@
-import { t as _sfc_main$2 } from "./Field-VlTBsIEo.js";
+import { t as _sfc_main$2 } from "./Field-8zRxzDHE.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, inject, mergeModels, normalizeStyle, openBlock, provide, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, withCtx } from "vue";
 import "../styles/radio.css";
 //#region src/Radio/types.ts

package/dist/RadioList/index.d.ts

@@ -1,2 +1,2 @@
-import { $t as RadioListItemProps, Qt as _default$1, en as _default, sn as RadioListProps } from "../index-CQ9F1f_F.js";
+import { an as _default$1, mn as RadioListProps, on as RadioListItemProps, sn as _default } from "../index-C6iJwTL0.js";
 export { _default as RadioList, _default$1 as RadioListItem, type RadioListItemProps, type RadioListProps };

package/dist/RadioList/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../RadioList-pwr93I-z.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../RadioList-DI8ujXcT.js";
 export { _sfc_main as RadioList, _sfc_main$1 as RadioListItem };

package/dist/{RadioList-pwr93I-z.js → RadioList-DI8ujXcT.js}

@@ -1,4 +1,4 @@
-import { n as _sfc_main$3, t as _sfc_main$2 } from "./RadioGroup-DS6oTV_j.js";
+import { n as _sfc_main$3, t as _sfc_main$2 } from "./RadioGroup-BqjdSCfJ.js";
 import { createBlock, createSlots, defineComponent, mergeModels, openBlock, renderSlot, useModel, withCtx } from "vue";
 //#region src/Radio/RadioList.vue
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({

package/dist/Resizable/index.d.ts

@@ -0,0 +1,2 @@
+import { a as ResizePillPlacement, i as ResizeHandleSlots, n as ResizeDirection, o as ResizePosition, r as ResizeHandleProps, t as _default } from "../index-1uRMrk63.js";
+export { type ResizeDirection, _default as ResizeHandle, type ResizeHandleProps, type ResizeHandleSlots, type ResizePillPlacement, type ResizePosition };

package/dist/Resizable/index.js

@@ -0,0 +1,2 @@
+import { t as _sfc_main } from "../Resizable-BhSMfO5B.js";
+export { _sfc_main as ResizeHandle };