@astryx-vue/core 0.2.5 → 0.3.0

package/dist/Tooltip-C4Vaqd3G.js

@@ -0,0 +1,320 @@
+import { r as isFocusable } from "./focus-CpficIgf.js";
+import { n as useLayer, t as useMergedRefs } from "./useMergedRefs-CfHHlCsn.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, mergeProps, nextTick, onMounted, onScopeDispose, onUpdated, openBlock, ref, renderSlot, shallowRef, toDisplayString, toValue, unref, useAttrs, vShow, watch, withDirectives } from "vue";
+import "../styles/tooltip.css";
+//#region src/Tooltip/useTooltip.ts
+const GAP = 4;
+/** 指针离开触发器到进入气泡之间的宽限时间。 */
+const HOVER_BRIDGE_DELAY = 100;
+const ACTION_TAGS = [
+	"A",
+	"BUTTON",
+	"INPUT",
+	"SELECT",
+	"TEXTAREA"
+];
+function matchesFocusVisible(element) {
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return false;
+	}
+}
+/**
+* 对应原版 Astryx 的 `hooks/useTooltip`：悬停和焦点触发的文字提示。
+* 负责延迟显示、焦点处理、`aria-describedby` 关联和定位，`Tooltip` 组件内部也用它。
+*
+* ```ts
+* const { triggerRef, contentRef, contentStyle, contentProps } = useTooltip()
+* ```
+*/
+function useTooltip(options = {}) {
+	const triggerRef = shallowRef(null);
+	const isControlled = computed(() => toValue(options.isOpen) !== void 0);
+	const isTouchPointer = ref(false);
+	const layer = useLayer({
+		mode: "context",
+		anchor: triggerRef,
+		placement: () => toValue(options.placement) ?? "above",
+		alignment: () => toValue(options.alignment) ?? "center",
+		gap: GAP,
+		onShow: () => options.onShow?.(),
+		onHide: () => options.onHide?.()
+	});
+	const isOpen = computed(() => toValue(options.isOpen) ?? layer.isOpen.value);
+	function isEnabled() {
+		return toValue(options.isEnabled) ?? true;
+	}
+	function focusTriggerMode() {
+		return toValue(options.focusTrigger) ?? "auto";
+	}
+	function touchTriggerMode() {
+		return toValue(options.touchTrigger) ?? "auto";
+	}
+	let showTimer;
+	let hideTimer;
+	function clearTimers() {
+		clearTimeout(showTimer);
+		clearTimeout(hideTimer);
+		showTimer = void 0;
+		hideTimer = void 0;
+	}
+	function showNow() {
+		clearTimers();
+		if (!isEnabled() || isControlled.value) return;
+		layer.show();
+	}
+	function hideNow() {
+		clearTimers();
+		if (isControlled.value) return;
+		layer.hide();
+	}
+	function scheduleShow() {
+		if (!isEnabled() || isControlled.value) return;
+		clearTimers();
+		showTimer = setTimeout(showNow, toValue(options.delay) ?? 200);
+	}
+	function scheduleHide() {
+		if (isControlled.value) return;
+		clearTimers();
+		const wait = toValue(options.hideDelay) ?? 0;
+		hideTimer = setTimeout(hideNow, wait > 0 ? wait : HOVER_BRIDGE_DELAY);
+	}
+	function cancelHide() {
+		clearTimeout(hideTimer);
+		hideTimer = void 0;
+	}
+	function onPointerEnter(event) {
+		isTouchPointer.value = event.pointerType === "touch";
+	}
+	function onMouseEnter() {
+		if (isTouchPointer.value) return;
+		scheduleShow();
+	}
+	function onMouseLeave() {
+		if (isTouchPointer.value) return;
+		scheduleHide();
+	}
+	function onTouchTap() {
+		if (!isEnabled() || isControlled.value || touchTriggerMode() === "none") return;
+		const trigger = triggerRef.value;
+		if (touchTriggerMode() === "auto" && trigger != null && ACTION_TAGS.includes(trigger.tagName)) return;
+		if (isOpen.value) hideNow();
+		else showNow();
+	}
+	function onPointerDown(event) {
+		if (event.pointerType === "touch") {
+			onTouchTap();
+			return;
+		}
+		if (isControlled.value) return;
+		hideNow();
+	}
+	function onFocusIn(event) {
+		if (!isEnabled() || isTouchPointer.value) return;
+		if (!matchesFocusVisible(event.target)) return;
+		showNow();
+	}
+	function onFocusOut() {
+		scheduleHide();
+	}
+	function onDocumentKeydown(event) {
+		if (event.key !== "Escape" || !isOpen.value) return;
+		clearTimers();
+		if (isControlled.value) {
+			options.onHide?.();
+			return;
+		}
+		layer.hide();
+	}
+	function shouldListenFocus(element) {
+		return focusTriggerMode() === "always" || focusTriggerMode() === "auto" && isFocusable(element);
+	}
+	let bound = null;
+	let describedByBefore = null;
+	function bind(element) {
+		if (bound === element) return;
+		unbind();
+		bound = element;
+		element.addEventListener("pointerenter", onPointerEnter);
+		element.addEventListener("mouseenter", onMouseEnter);
+		element.addEventListener("mouseleave", onMouseLeave);
+		element.addEventListener("pointerdown", onPointerDown);
+		if (shouldListenFocus(element)) {
+			element.addEventListener("focusin", onFocusIn);
+			element.addEventListener("focusout", onFocusOut);
+		}
+		describedByBefore = element.getAttribute("aria-describedby");
+		element.setAttribute("aria-describedby", [describedByBefore, layer.id].filter(Boolean).join(" "));
+	}
+	function unbind() {
+		if (bound == null) return;
+		bound.removeEventListener("pointerenter", onPointerEnter);
+		bound.removeEventListener("mouseenter", onMouseEnter);
+		bound.removeEventListener("mouseleave", onMouseLeave);
+		bound.removeEventListener("pointerdown", onPointerDown);
+		bound.removeEventListener("focusin", onFocusIn);
+		bound.removeEventListener("focusout", onFocusOut);
+		if (describedByBefore) bound.setAttribute("aria-describedby", describedByBefore);
+		else bound.removeAttribute("aria-describedby");
+		bound = null;
+		describedByBefore = null;
+	}
+	watch(triggerRef, (element) => {
+		if (element == null) unbind();
+		else bind(element);
+	}, { flush: "sync" });
+	watch(isOpen, (open) => {
+		if (typeof document === "undefined") return;
+		if (open) document.addEventListener("keydown", onDocumentKeydown);
+		else document.removeEventListener("keydown", onDocumentKeydown);
+	}, { immediate: true });
+	function syncControlled(open) {
+		layer.isOpen.value = open;
+	}
+	watch(() => toValue(options.isOpen), (open) => {
+		clearTimers();
+		if (open === void 0) return;
+		syncControlled(open);
+	});
+	onMounted(() => {
+		if (isControlled.value) {
+			if (toValue(options.isOpen) === true) syncControlled(true);
+			return;
+		}
+		if (options.isDefaultOpen === true) showNow();
+	});
+	onScopeDispose(() => {
+		clearTimers();
+		unbind();
+		if (typeof document !== "undefined") document.removeEventListener("keydown", onDocumentKeydown);
+	});
+	const contentProps = computed(() => ({
+		id: layer.id,
+		role: "tooltip",
+		onMouseenter: cancelHide,
+		onMouseleave: scheduleHide
+	}));
+	return {
+		isOpen,
+		triggerRef,
+		contentRef: layer.contentRef,
+		id: layer.id,
+		anchorId: layer.anchorId,
+		describedBy: layer.id,
+		contentStyle: layer.contentStyle,
+		resolvedPlacement: layer.resolvedPlacement,
+		contentProps
+	};
+}
+//#endregion
+//#region src/Tooltip/Tooltip.vue
+const _hoisted_1 = ["data-placement"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxTooltip",
+	inheritAttrs: false,
+	__name: "Tooltip",
+	props: {
+		content: { default: "" },
+		placement: { default: "above" },
+		alignment: { default: "center" },
+		delay: { default: 200 },
+		hideDelay: { default: 0 },
+		focusTrigger: { default: "auto" },
+		touchTrigger: { default: "auto" },
+		isEnabled: {
+			type: Boolean,
+			default: true
+		},
+		hasHoverIndication: {
+			type: [String, Boolean],
+			default: "auto"
+		},
+		isOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		isDefaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		anchorsOnSelf: {
+			type: Boolean,
+			default: false
+		},
+		anchor: { default: void 0 }
+	},
+	emits: ["openChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const instance = getCurrentInstance();
+		const { triggerRef, contentRef, isOpen, contentStyle: bubbleStyle, resolvedPlacement, contentProps } = useTooltip({
+			placement: () => props.placement,
+			alignment: () => props.alignment,
+			delay: () => props.delay,
+			hideDelay: () => props.hideDelay,
+			focusTrigger: () => props.focusTrigger,
+			touchTrigger: () => props.touchTrigger,
+			isEnabled: () => props.isEnabled,
+			isOpen: () => props.isOpen,
+			isDefaultOpen: props.isDefaultOpen,
+			onShow: () => emit("openChange", true),
+			onHide: () => emit("openChange", false)
+		});
+		const setContentRef = useMergedRefs([contentRef]);
+		const wrapperRef = ref(null);
+		const isTextTrigger = ref(false);
+		const showIndication = computed(() => props.hasHoverIndication === true || props.hasHoverIndication === "auto" && isTextTrigger.value);
+		function resolveTrigger() {
+			if (props.anchor) {
+				isTextTrigger.value = false;
+				return props.anchor;
+			}
+			const wrapper = wrapperRef.value;
+			if (!wrapper) return null;
+			if (props.anchorsOnSelf) {
+				isTextTrigger.value = false;
+				return wrapper;
+			}
+			const child = wrapper.firstElementChild;
+			isTextTrigger.value = child == null && (wrapper.textContent ?? "").trim() !== "";
+			if (child) return child;
+			if (isTextTrigger.value) {
+				wrapper.tabIndex = 0;
+				return wrapper;
+			}
+			return null;
+		}
+		function syncTrigger() {
+			if (props.anchorsOnSelf && !props.anchor) {
+				const el = instance?.vnode.el;
+				wrapperRef.value = el instanceof HTMLElement ? el : null;
+			}
+			triggerRef.value = resolveTrigger();
+		}
+		watch(() => props.anchor, () => {
+			nextTick(syncTrigger);
+		});
+		onMounted(syncTrigger);
+		onUpdated(syncTrigger);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [!__props.anchorsOnSelf && !__props.anchor ? (openBlock(), createElementBlock("span", mergeProps({
+				key: 0,
+				ref_key: "wrapperRef",
+				ref: wrapperRef
+			}, unref(attrs), { class: ["astryx-tooltip-trigger", {
+				"astryx-tooltip-trigger--text": isTextTrigger.value,
+				"astryx-tooltip-trigger--indicated": showIndication.value
+			}] }), [renderSlot(_ctx.$slots, "default")], 16)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1), (openBlock(), createBlock(Teleport, { to: "body" }, [createCommentVNode(" eslint-disable-next-line vue-a11y/mouse-events-have-key-events, vue-a11y/no-static-element-interactions -- 气泡上的鼠标事件仅用于指针移入气泡时保持显示；键盘焦点由触发元素的 focusin / focusout 处理。 "), withDirectives(createElementVNode("div", mergeProps({
+				ref: unref(setContentRef),
+				class: "astryx-tooltip",
+				"data-placement": unref(resolvedPlacement),
+				style: unref(bubbleStyle)
+			}, unref(contentProps)), [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(__props.content), 1)])], 16, _hoisted_1), [[vShow, unref(isOpen)]])]))], 64);
+		};
+	}
+});
+//#endregion
+export { useTooltip as n, _sfc_main as t };

package/dist/TopNav/index.d.ts

@@ -1,2 +1,2 @@
-import { S as TopNavProps, _ as TopNavMegaMenuItemProps, a as _default$6, b as TopNavMenuItem, c as _default$3, d as _default, f as TopNavHeadingProps, g as TopNavMegaMenuFeaturedCardProps, h as TopNavMegaMenuEmits, l as _default$2, m as TopNavItemProps, o as _default$5, p as TopNavItemEmits, s as _default$4, u as _default$1, v as TopNavMegaMenuProps, x as TopNavMenuProps, y as TopNavMenuEmits } from "../index-B9rqmYxh.js";
+import { C as TopNavMenuProps, S as TopNavMenuItem, _ as TopNavMegaMenuEmits, b as TopNavMegaMenuProps, c as _default$5, d as _default$2, f as _default$1, g as TopNavItemProps, h as TopNavItemEmits, l as _default$4, m as TopNavHeadingProps, p as _default, s as _default$6, u as _default$3, v as TopNavMegaMenuFeaturedCardProps, w as TopNavProps, x as TopNavMenuEmits, y as TopNavMegaMenuItemProps } from "../index-DUaLJO7l.js";
 export { _default as TopNav, _default$1 as TopNavHeading, type TopNavHeadingProps, _default$2 as TopNavItem, type TopNavItemEmits, type TopNavItemProps, _default$3 as TopNavMegaMenu, type TopNavMegaMenuEmits, _default$4 as TopNavMegaMenuFeaturedCard, type TopNavMegaMenuFeaturedCardProps, _default$5 as TopNavMegaMenuItem, type TopNavMegaMenuItemProps, type TopNavMegaMenuProps, _default$6 as TopNavMenu, type TopNavMenuEmits, type TopNavMenuItem, type TopNavMenuProps, type TopNavProps };

package/dist/TopNav/index.js

@@ -1,2 +1,2 @@
-import { a as _sfc_main$2, i as _sfc_main$3, n as _sfc_main$5, o as _sfc_main$1, r as _sfc_main$4, s as _sfc_main, t as _sfc_main$6 } from "../TopNav-arWFLTBM.js";
+import { a as _sfc_main$2, i as _sfc_main$3, n as _sfc_main$5, o as _sfc_main$1, r as _sfc_main$4, s as _sfc_main, t as _sfc_main$6 } from "../TopNav-Ciq0l1w7.js";
 export { _sfc_main as TopNav, _sfc_main$1 as TopNavHeading, _sfc_main$2 as TopNavItem, _sfc_main$3 as TopNavMegaMenu, _sfc_main$4 as TopNavMegaMenuFeaturedCard, _sfc_main$5 as TopNavMegaMenuItem, _sfc_main$6 as TopNavMenu };