@astryx-vue/core 0.2.5 → 0.3.0

package/dist/HoverCard-ycY50pRN.js

@@ -0,0 +1,492 @@
+import { r as isFocusable } from "./focus-CpficIgf.js";
+import { n as useLayer, t as useMergedRefs } from "./useMergedRefs-CfHHlCsn.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, onMounted, onScopeDispose, onUpdated, openBlock, ref, renderSlot, shallowRef, toDisplayString, toValue, unref, vShow, watch, withCtx, withDirectives } from "vue";
+import "../styles/hover-card.css";
+//#region src/HoverCard/useHoverCard.ts
+const GAP = 4;
+const TOUCH_POINTER_TYPES = /* @__PURE__ */ new Set(["touch", "pen"]);
+const EXPANDABLE_ROLES = /* @__PURE__ */ new Set([
+	"application",
+	"button",
+	"checkbox",
+	"columnheader",
+	"combobox",
+	"gridcell",
+	"link",
+	"listbox",
+	"menuitem",
+	"menuitemcheckbox",
+	"menuitemradio",
+	"row",
+	"rowheader",
+	"switch",
+	"tab",
+	"treeitem"
+]);
+const BUTTON_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"button",
+	"submit",
+	"reset",
+	"image"
+]);
+const ACTION_ROLES = /* @__PURE__ */ new Set([
+	"button",
+	"checkbox",
+	"combobox",
+	"link",
+	"menuitem",
+	"menuitemcheckbox",
+	"menuitemradio",
+	"option",
+	"radio",
+	"searchbox",
+	"slider",
+	"spinbutton",
+	"switch",
+	"tab",
+	"textbox"
+]);
+function supportsAriaExpanded(element) {
+	const explicit = element.getAttribute("role")?.trim().split(/\s+/)[0];
+	if (explicit) return EXPANDABLE_ROLES.has(explicit);
+	switch (element.tagName) {
+		case "BUTTON":
+		case "SUMMARY": return true;
+		case "A":
+		case "AREA": return element.hasAttribute("href");
+		case "INPUT": return BUTTON_INPUT_TYPES.has(element.type?.toLowerCase());
+		case "SELECT": return true;
+		default: return false;
+	}
+}
+function isEditable(element) {
+	if (element.isContentEditable === true) return true;
+	const attribute = element.getAttribute("contenteditable");
+	return attribute != null && attribute !== "false";
+}
+function isActionTrigger(element) {
+	const role = element.getAttribute("role");
+	if (role != null && role !== "") return ACTION_ROLES.has(role);
+	switch (element.tagName) {
+		case "BUTTON":
+		case "INPUT":
+		case "LABEL":
+		case "SELECT":
+		case "SUMMARY":
+		case "TEXTAREA": return true;
+		case "A":
+		case "AREA": return element.hasAttribute("href");
+		default: return isEditable(element);
+	}
+}
+function mergeIds(...ids) {
+	const kept = ids.filter(Boolean);
+	return kept.length > 0 ? kept.join(" ") : void 0;
+}
+/**
+* 对应原版 Astryx 的 `hooks/useHoverCard`：悬停触发的浮层卡片。
+* 负责悬停意图与延迟、指针从触发器移进卡片的宽限、触摸轻点、`aria-describedby` /
+* `role="dialog"` 的关系和定位，`HoverCard` 组件内部也用它。
+*
+* ```ts
+* const { triggerRef, contentRef, contentStyle, contentProps } = useHoverCard()
+* ```
+*/
+function useHoverCard(options = {}) {
+	const triggerRef = shallowRef(null);
+	const isControlled = computed(() => toValue(options.isOpen) !== void 0);
+	const isDialog = computed(() => {
+		const label = toValue(options.label);
+		return label != null && label !== "";
+	});
+	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 = layer.isOpen;
+	function isEnabled() {
+		return toValue(options.isEnabled) ?? true;
+	}
+	let lastModality = "keyboard";
+	let isTouchPointer = false;
+	let isHoveringContent = false;
+	let isEscapeDismissing = false;
+	let showTimer;
+	let hideTimer;
+	function onModalityPointerDown() {
+		lastModality = "pointer";
+	}
+	function onModalityKeyDown(event) {
+		if (event.metaKey || event.altKey || event.ctrlKey) return;
+		lastModality = "keyboard";
+	}
+	function clearTimers() {
+		clearTimeout(showTimer);
+		clearTimeout(hideTimer);
+		showTimer = void 0;
+		hideTimer = void 0;
+	}
+	function showNow() {
+		clearTimers();
+		if (!isEnabled()) return;
+		layer.show();
+	}
+	function hideNow() {
+		clearTimers();
+		isHoveringContent = false;
+		if (isControlled.value) return;
+		layer.hide();
+	}
+	function scheduleShow() {
+		if (!isEnabled() || isControlled.value) return;
+		clearTimers();
+		showTimer = setTimeout(() => {
+			showTimer = void 0;
+			layer.show();
+		}, toValue(options.delay) ?? 300);
+	}
+	function scheduleHide() {
+		if (isControlled.value) return;
+		clearTimers();
+		hideTimer = setTimeout(() => {
+			hideTimer = void 0;
+			if (!isHoveringContent) layer.hide();
+		}, toValue(options.hideDelay) ?? 200);
+	}
+	function onPointerEnter(event) {
+		isTouchPointer = event.pointerType === "touch";
+	}
+	function onMouseEnter() {
+		if (isTouchPointer) return;
+		scheduleShow();
+	}
+	function onMouseLeave() {
+		if (isTouchPointer) return;
+		scheduleHide();
+	}
+	function onPointerDown(event) {
+		const isTouch = TOUCH_POINTER_TYPES.has(event.pointerType);
+		isTouchPointer = isTouch;
+		if (!isTouch || isControlled.value) return;
+		const trigger = triggerRef.value;
+		const mode = toValue(options.touchTrigger) ?? "auto";
+		if ((mode === "auto" ? trigger != null && isActionTrigger(trigger) ? "none" : "tap" : mode) === "none" || !isEnabled()) {
+			hideNow();
+			return;
+		}
+		if (isOpen.value) hideNow();
+		else showNow();
+	}
+	function onFocusIn() {
+		if (!isEnabled()) return;
+		if (isTouchPointer && lastModality === "pointer") return;
+		if (isEscapeDismissing) {
+			isEscapeDismissing = false;
+			return;
+		}
+		showNow();
+	}
+	function onFocusOut(event) {
+		const related = event.relatedTarget;
+		if (related && layer.contentRef.value?.contains(related)) return;
+		scheduleHide();
+	}
+	function onContentMouseEnter() {
+		if (isTouchPointer) return;
+		isHoveringContent = true;
+		clearTimers();
+	}
+	function onContentMouseLeave() {
+		if (isTouchPointer) return;
+		isHoveringContent = false;
+		scheduleHide();
+	}
+	function onContentFocusOut(event) {
+		const related = event.relatedTarget;
+		if (related && layer.contentRef.value?.contains(related)) return;
+		if (related && triggerRef.value?.contains(related)) return;
+		scheduleHide();
+	}
+	function onDocumentKeydown(event) {
+		if (event.key !== "Escape" || !isOpen.value) return;
+		clearTimers();
+		isHoveringContent = false;
+		if (isControlled.value) {
+			options.onHide?.();
+			return;
+		}
+		const hadFocus = layer.contentRef.value?.contains(document.activeElement) ?? false;
+		layer.hide();
+		if (hadFocus && triggerRef.value) {
+			isEscapeDismissing = true;
+			triggerRef.value.focus();
+		}
+	}
+	function onDocumentPointerDown(event) {
+		if (!TOUCH_POINTER_TYPES.has(event.pointerType) || !isOpen.value || isControlled.value) return;
+		const target = event.target;
+		if (triggerRef.value?.contains(target) || layer.contentRef.value?.contains(target)) return;
+		hideNow();
+	}
+	let bound = null;
+	let describedByBefore = null;
+	let haspopupBefore = null;
+	let controlsBefore = null;
+	let expandedBefore = null;
+	let canExpand = false;
+	function applyTriggerAttributes() {
+		const active = triggerRef.value;
+		if (!active) return;
+		if (isDialog.value) {
+			active.setAttribute("aria-haspopup", "dialog");
+			if (isOpen.value) active.setAttribute("aria-controls", mergeIds(controlsBefore, layer.id) ?? "");
+			else if (controlsBefore) active.setAttribute("aria-controls", controlsBefore);
+			else active.removeAttribute("aria-controls");
+			if (canExpand) active.setAttribute("aria-expanded", String(isOpen.value));
+			else if (expandedBefore) active.setAttribute("aria-expanded", expandedBefore);
+			else active.removeAttribute("aria-expanded");
+			return;
+		}
+		active.setAttribute("aria-describedby", mergeIds(describedByBefore, layer.id) ?? "");
+	}
+	function restoreTriggerAttributes() {
+		const active = bound;
+		if (!active) return;
+		if (describedByBefore) active.setAttribute("aria-describedby", describedByBefore);
+		else active.removeAttribute("aria-describedby");
+		if (haspopupBefore) active.setAttribute("aria-haspopup", haspopupBefore);
+		else active.removeAttribute("aria-haspopup");
+		if (controlsBefore) active.setAttribute("aria-controls", controlsBefore);
+		else active.removeAttribute("aria-controls");
+		if (expandedBefore) active.setAttribute("aria-expanded", expandedBefore);
+		else active.removeAttribute("aria-expanded");
+	}
+	function shouldListenFocus(element) {
+		const mode = toValue(options.focusTrigger) ?? "auto";
+		return mode === "always" || mode === "auto" && isFocusable(element);
+	}
+	function bind(element) {
+		if (bound === element) return;
+		unbind();
+		bound = element;
+		describedByBefore = element.getAttribute("aria-describedby");
+		haspopupBefore = element.getAttribute("aria-haspopup");
+		controlsBefore = element.getAttribute("aria-controls");
+		expandedBefore = element.getAttribute("aria-expanded");
+		canExpand = supportsAriaExpanded(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);
+		}
+		applyTriggerAttributes();
+	}
+	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);
+		restoreTriggerAttributes();
+		bound = null;
+		describedByBefore = null;
+		haspopupBefore = null;
+		controlsBefore = null;
+		expandedBefore = null;
+		canExpand = false;
+	}
+	watch(triggerRef, (element) => {
+		if (element == null) unbind();
+		else bind(element);
+	}, { flush: "sync" });
+	watch(isOpen, (visible) => {
+		applyTriggerAttributes();
+		if (typeof document === "undefined") return;
+		if (visible) {
+			document.addEventListener("keydown", onDocumentKeydown);
+			document.addEventListener("pointerdown", onDocumentPointerDown, true);
+			return;
+		}
+		document.removeEventListener("keydown", onDocumentKeydown);
+		document.removeEventListener("pointerdown", onDocumentPointerDown, true);
+	}, { immediate: true });
+	watch(() => toValue(options.isOpen), (open) => {
+		clearTimers();
+		if (open === void 0) return;
+		layer.isOpen.value = open;
+	});
+	watch(() => toValue(options.isEnabled), (enabled) => {
+		if (!enabled) hideNow();
+	});
+	onMounted(() => {
+		if (typeof document === "undefined") return;
+		document.addEventListener("pointerdown", onModalityPointerDown, {
+			capture: true,
+			passive: true
+		});
+		document.addEventListener("keydown", onModalityKeyDown, {
+			capture: true,
+			passive: true
+		});
+		if (isControlled.value) {
+			if (toValue(options.isOpen) === true) layer.isOpen.value = true;
+			return;
+		}
+		if (options.isDefaultOpen === true) showNow();
+	});
+	onScopeDispose(() => {
+		clearTimers();
+		unbind();
+		if (typeof document === "undefined") return;
+		document.removeEventListener("pointerdown", onModalityPointerDown, true);
+		document.removeEventListener("keydown", onModalityKeyDown, true);
+		document.removeEventListener("keydown", onDocumentKeydown);
+		document.removeEventListener("pointerdown", onDocumentPointerDown, true);
+	});
+	function show() {
+		showNow();
+	}
+	function hide() {
+		clearTimers();
+		isHoveringContent = false;
+		layer.hide();
+	}
+	const contentProps = computed(() => {
+		const props = {
+			id: layer.id,
+			role: isDialog.value ? "dialog" : "group",
+			onMouseenter: onContentMouseEnter,
+			onMouseleave: onContentMouseLeave,
+			onFocusout: onContentFocusOut
+		};
+		if (isDialog.value) props["aria-label"] = toValue(options.label);
+		return props;
+	});
+	return {
+		isOpen,
+		triggerRef,
+		contentRef: layer.contentRef,
+		id: layer.id,
+		anchorId: layer.anchorId,
+		describedBy: layer.id,
+		contentStyle: layer.contentStyle,
+		resolvedPlacement: layer.resolvedPlacement,
+		isDialog,
+		contentProps,
+		show,
+		hide
+	};
+}
+//#endregion
+//#region src/HoverCard/HoverCard.vue
+const _hoisted_1 = ["data-placement"];
+const _hoisted_2 = { class: "astryx-hover-card__content" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxHoverCard",
+	inheritAttrs: false,
+	__name: "HoverCard",
+	props: {
+		content: { default: "" },
+		placement: { default: "above" },
+		alignment: { default: "center" },
+		delay: { default: 300 },
+		hideDelay: { default: 200 },
+		focusTrigger: { default: "auto" },
+		touchTrigger: { default: "auto" },
+		isEnabled: {
+			type: Boolean,
+			default: true
+		},
+		label: { default: void 0 },
+		hasHoverIndication: {
+			type: [String, Boolean],
+			default: "auto"
+		},
+		isOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		isDefaultOpen: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["openChange"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { triggerRef, contentRef: surfaceRef, isOpen: isVisible, contentStyle: surfaceStyle, resolvedPlacement, contentProps, show, hide } = useHoverCard({
+			placement: () => props.placement,
+			alignment: () => props.alignment,
+			delay: () => props.delay,
+			hideDelay: () => props.hideDelay,
+			focusTrigger: () => props.focusTrigger,
+			touchTrigger: () => props.touchTrigger,
+			isEnabled: () => props.isEnabled,
+			label: () => props.label,
+			isOpen: () => props.isOpen,
+			isDefaultOpen: props.isDefaultOpen,
+			onShow: () => emit("openChange", true),
+			onHide: () => emit("openChange", false)
+		});
+		const setContentRef = useMergedRefs([surfaceRef]);
+		const wrapperRef = ref(null);
+		const isTextTrigger = ref(false);
+		const showIndication = computed(() => props.hasHoverIndication === true || props.hasHoverIndication === "auto" && isTextTrigger.value);
+		const element = computed(() => surfaceRef.value);
+		function resolveTrigger() {
+			const wrapper = wrapperRef.value;
+			if (!wrapper) return null;
+			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() {
+			triggerRef.value = resolveTrigger();
+		}
+		onMounted(syncTrigger);
+		onUpdated(syncTrigger);
+		__expose({
+			element,
+			show,
+			hide
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", mergeProps({
+				ref_key: "wrapperRef",
+				ref: wrapperRef
+			}, _ctx.$attrs, { class: ["astryx-hover-card__trigger", {
+				"astryx-hover-card__trigger--text": isTextTrigger.value,
+				"astryx-hover-card__trigger--indicated": isTextTrigger.value && showIndication.value
+			}] }), [renderSlot(_ctx.$slots, "default")], 16), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
+				name: "astryx-hover-card",
+				persisted: ""
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps({
+					ref: unref(setContentRef),
+					class: "astryx-hover-card",
+					"data-placement": unref(resolvedPlacement),
+					style: unref(surfaceStyle)
+				}, unref(contentProps)), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(__props.content), 1)])])], 16, _hoisted_1), [[vShow, unref(isVisible)]])]),
+				_: 3
+			})]))], 64);
+		};
+	}
+});
+//#endregion
+export { useHoverCard as n, _sfc_main as t };

package/dist/IconButton/index.js

@@ -1,4 +1,4 @@
-import { t as _sfc_main } from "../IconButton-BNQuz9W_.js";
+import { t as _sfc_main } from "../IconButton-DDNgNl7B.js";
 //#region src/IconButton/index.ts
 var IconButton_default = _sfc_main;
 //#endregion

package/dist/{IconButton-BNQuz9W_.js → IconButton-DDNgNl7B.js}

@@ -1,4 +1,4 @@
-import { t as _sfc_main$1 } from "./Button-DrqeomlE.js";
+import { t as _sfc_main$1 } from "./Button-B6Hj_O_s.js";
 import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, useAttrs, useTemplateRef, withCtx } from "vue";
 //#region src/IconButton/IconButton.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({

package/dist/InputGroup/index.d.ts

@@ -1,2 +1,2 @@
-import { a as InputGroupSlots, c as INPUT_GROUP_KEY, i as InputGroupSize, l as InputGroupContext, n as _default, o as InputGroupTextProps, r as InputGroupProps, s as InputGroupTextSlots, t as _default$1 } from "../index-BPwD6aBv.js";
+import { a as InputGroupSlots, c as INPUT_GROUP_KEY, i as InputGroupSize, l as InputGroupContext, n as _default, o as InputGroupTextProps, r as InputGroupProps, s as InputGroupTextSlots, t as _default$1 } from "../index-B3Fomy15.js";
 export { INPUT_GROUP_KEY, _default as InputGroup, type InputGroupContext, type InputGroupProps, type InputGroupSize, type InputGroupSlots, _default$1 as InputGroupText, type InputGroupTextProps, type InputGroupTextSlots };

package/dist/InputGroup/index.js

@@ -1,3 +1,3 @@
 import { t as INPUT_GROUP_KEY } from "../context-D5-MwxnN.js";
-import { n as _sfc_main, t as _sfc_main$1 } from "../InputGroup-BzR6JRZb.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../InputGroup-CA03Smrs.js";
 export { INPUT_GROUP_KEY, _sfc_main as InputGroup, _sfc_main$1 as InputGroupText };

package/dist/{InputGroup-BzR6JRZb.js → InputGroup-CA03Smrs.js}

@@ -1,4 +1,4 @@
-import { t as _sfc_main$2 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$2 } from "./Field-D5gUEGw4.js";
 import { t as INPUT_GROUP_KEY } from "./context-D5-MwxnN.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, provide, renderSlot, useId, withCtx } from "vue";
 import "../styles/input-group.css";

package/dist/InternationalizationProvider/index.d.ts

@@ -0,0 +1,2 @@
+import { a as useLocaleDirection, c as ProviderMessagesByLocale, i as astryxDirectionKey, l as ProviderOverrides, n as InternationalizationProviderProps, o as TextDirection, r as InternationalizationProviderSlots, s as getLocaleDirection, t as _default, u as resolveProviderMessages } from "../index-Cyb9Du5Z.js";
+export { _default as InternationalizationProvider, type InternationalizationProviderProps, type InternationalizationProviderSlots, type ProviderMessagesByLocale, type ProviderOverrides, type TextDirection, astryxDirectionKey, getLocaleDirection, resolveProviderMessages, useLocaleDirection };

package/dist/InternationalizationProvider/index.js

@@ -0,0 +1,2 @@
+import { a as resolveProviderMessages, i as getLocaleDirection, n as astryxDirectionKey, r as useLocaleDirection, t as _sfc_main } from "../InternationalizationProvider-DJay_w3B.js";
+export { _sfc_main as InternationalizationProvider, astryxDirectionKey, getLocaleDirection, resolveProviderMessages, useLocaleDirection };