@hina-ui/vue 1.7.4 → 1.7.5

package/dist/index.js

@@ -7685,6 +7685,10 @@ function useLightboxPhase(options) {
 //#endregion
 //#region src/components/lightbox/composables/useLightboxHint.ts
 function useLightboxHint(options) {
+	if (typeof window === "undefined") return {
+		x: useMotionValue(0),
+		y: useMotionValue(0)
+	};
 	const { motion, frames, paging } = options;
 	function corner() {
 		const frame = frames.frameOf(options.current());
@@ -11401,7 +11405,7 @@ var PrevNext_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("nav", {
 				"aria-label": props.label ?? unref(t).pagination.navLabel,
-				class: normalizeClass(unref(cn)("grid gap-4 sm:grid-cols-2", props.class))
+				class: normalizeClass(unref(cn)("grid grid-cols-1 gap-4 sm:grid-cols-2", props.class))
 			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$104);
 		};
 	}
@@ -11426,7 +11430,7 @@ var prevNextEyebrow = tv({
 });
 //#endregion
 //#region src/components/prev-next/PrevNextLink.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$103 = { class: "text-fg font-medium" };
+var _hoisted_1$103 = { class: "text-fg max-w-full font-medium" };
 //#endregion
 //#region src/components/prev-next/PrevNextLink.vue
 var PrevNextLink_default = /* @__PURE__ */ defineComponent({
@@ -25991,11 +25995,12 @@ function useAnchor(items) {
 }
 //#endregion
 //#region src/components/anchor/composables/useAnchorFollow.ts
-function useAnchorFollow(root, current, enabled) {
+function useAnchorFollow(root, current, lastCovered, enabled) {
 	const viewport = shallowRef();
 	let mounted = false;
 	let frame = 0;
 	let lastCurrent;
+	let lastEnd;
 	function findViewport(nav, target) {
 		const doc = nav.ownerDocument;
 		const view = doc.defaultView;
@@ -26014,13 +26019,27 @@ function useAnchorFollow(root, current, enabled) {
 		if (!target || !link || !link.getClientRects().length) return;
 		const port = findViewport(nav, target);
 		viewport.value = port;
-		const changed = lastCurrent !== void 0 && lastCurrent !== id;
+		const endId = lastCovered.value ?? id;
+		const changed = lastCurrent !== void 0 && (lastCurrent !== id || lastEnd !== endId);
 		lastCurrent = id;
+		lastEnd = endId;
 		if (!port || port.clientHeight <= 0 || port.scrollHeight <= port.clientHeight) return;
 		const box = port.getBoundingClientRect();
-		const row = link.getBoundingClientRect();
+		let row = link.getBoundingClientRect();
 		const scale = port.offsetHeight ? box.height / port.offsetHeight : 1;
 		if (scale <= 0) return;
+		if (endId !== id) {
+			const end = nav.querySelector(`a[href="#${CSS.escape(endId)}"]`);
+			if (end?.getClientRects().length) {
+				const bottom = end.getBoundingClientRect().bottom;
+				const height = bottom - row.top;
+				if (height >= row.height && height <= port.clientHeight * scale) row = {
+					top: row.top,
+					bottom,
+					height
+				};
+			}
+		}
 		const top = box.top + port.clientTop * scale;
 		const bottom = top + port.clientHeight * scale;
 		if (row.top >= top && row.bottom <= bottom) return;
@@ -26044,6 +26063,7 @@ function useAnchorFollow(root, current, enabled) {
 	watch([
 		root,
 		current,
+		lastCovered,
 		enabled
 	], schedule, { flush: "post" });
 	useResizeObserver(() => [
@@ -26082,7 +26102,10 @@ var Anchor_default = /* @__PURE__ */ defineComponent({
 	props: {
 		items: {},
 		label: {},
-		autoScroll: { type: Boolean },
+		autoScroll: {
+			type: Boolean,
+			default: true
+		},
 		class: {}
 	},
 	emits: ["change"],
@@ -26090,9 +26113,10 @@ var Anchor_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const t = useUiLocale();
-		const { entries, visible, current, span, jump } = useAnchor(() => props.items);
+		const { entries, visible, covered, current, span, jump } = useAnchor(() => props.items);
+		const lastCovered = computed(() => covered.value.at(-1)?.id);
 		const root = useTemplateRef("root");
-		useAnchorFollow(root, current, () => props.autoScroll !== false);
+		useAnchorFollow(root, current, lastCovered, () => props.autoScroll);
 		watch(current, (id) => emit("change", id), { flush: "post" });
 		__expose({ current });
 		return (_ctx, _cache) => {