@astryx-vue/core 0.2.5 → 0.3.0

package/dist/Tooltip-C2fh9anJ.js

@@ -1,271 +0,0 @@
-import { r as isFocusable } from "./focus-CpficIgf.js";
-import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, mergeProps, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, toDisplayString, unref, useAttrs, useId, vShow, watch, withDirectives } from "vue";
-import "../styles/tooltip.css";
-//#region src/Tooltip/Tooltip.vue
-const _hoisted_1 = ["data-placement"];
-const HOVER_BRIDGE_DELAY = 100;
-const GAP = 4;
-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
-		}
-	},
-	emits: ["openChange"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const attrs = useAttrs();
-		const instance = getCurrentInstance();
-		const ACTION_TAGS = [
-			"A",
-			"BUTTON",
-			"INPUT",
-			"SELECT",
-			"TEXTAREA"
-		];
-		const tooltipId = `astryx-tooltip-${useId()}`;
-		const wrapperRef = ref(null);
-		const bubbleRef = ref(null);
-		const triggerRef = ref(null);
-		const isVisible = ref(false);
-		const isTextTrigger = ref(false);
-		const isControlled = computed(() => props.isOpen !== void 0);
-		const showIndication = computed(() => props.hasHoverIndication === true || props.hasHoverIndication === "auto" && isTextTrigger.value);
-		const { position, detach: detachPosition } = usePositionedLayer({
-			anchor: triggerRef,
-			layer: bubbleRef,
-			isOpen: isVisible,
-			placement: computed(() => props.placement),
-			alignment: computed(() => props.alignment),
-			gap: GAP
-		});
-		const bubbleStyle = computed(() => ({
-			top: `${position.value.top}px`,
-			left: `${position.value.left}px`
-		}));
-		let trigger = null;
-		let describedByBefore = null;
-		let showTimer;
-		let hideTimer;
-		let isTouchPointer = false;
-		function clearTimers() {
-			clearTimeout(showTimer);
-			clearTimeout(hideTimer);
-			showTimer = void 0;
-			hideTimer = void 0;
-		}
-		function applyVisible(next) {
-			if (isVisible.value === next) return false;
-			isVisible.value = next;
-			return true;
-		}
-		function setOpen(next) {
-			if (applyVisible(next)) emit("openChange", next);
-		}
-		function showNow() {
-			clearTimers();
-			if (!props.isEnabled || isControlled.value) return;
-			setOpen(true);
-		}
-		function hideNow() {
-			clearTimers();
-			if (isControlled.value) return;
-			setOpen(false);
-		}
-		function scheduleShow() {
-			if (!props.isEnabled || isControlled.value) return;
-			clearTimers();
-			showTimer = setTimeout(setOpen, props.delay, true);
-		}
-		function scheduleHide() {
-			if (isControlled.value) return;
-			clearTimers();
-			const wait = props.hideDelay > 0 ? props.hideDelay : HOVER_BRIDGE_DELAY;
-			hideTimer = setTimeout(setOpen, wait, false);
-		}
-		function cancelHide() {
-			clearTimeout(hideTimer);
-			hideTimer = void 0;
-		}
-		function matchesFocusVisible(element) {
-			try {
-				return element.matches(":focus-visible");
-			} catch {
-				return false;
-			}
-		}
-		function onPointerEnter(event) {
-			isTouchPointer = event.pointerType === "touch";
-		}
-		function onMouseEnter() {
-			if (isTouchPointer) return;
-			scheduleShow();
-		}
-		function onMouseLeave() {
-			if (isTouchPointer) return;
-			scheduleHide();
-		}
-		function onTouchTap() {
-			if (!props.isEnabled || isControlled.value || props.touchTrigger === "none") return;
-			if (props.touchTrigger === "auto" && trigger && ACTION_TAGS.includes(trigger.tagName)) return;
-			if (isVisible.value) hideNow();
-			else showNow();
-		}
-		function onPointerDown(event) {
-			if (event.pointerType === "touch") {
-				onTouchTap();
-				return;
-			}
-			if (isControlled.value) return;
-			hideNow();
-		}
-		function onFocusIn(event) {
-			if (!props.isEnabled || isTouchPointer) return;
-			const target = event.target;
-			if (!matchesFocusVisible(target)) return;
-			showNow();
-		}
-		function onFocusOut() {
-			scheduleHide();
-		}
-		function onKeydown(event) {
-			if (event.key !== "Escape") return;
-			if (isControlled.value) {
-				emit("openChange", false);
-				return;
-			}
-			clearTimers();
-			setOpen(false);
-		}
-		function shouldListenFocus(element) {
-			return props.focusTrigger === "always" || props.focusTrigger === "auto" && isFocusable(element);
-		}
-		function resolveTrigger() {
-			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 bindTrigger() {
-			if (props.anchorsOnSelf) {
-				const el = instance?.vnode.el;
-				wrapperRef.value = el instanceof HTMLElement ? el : null;
-			}
-			const next = resolveTrigger();
-			if (next === trigger) return;
-			unbindTrigger();
-			trigger = next;
-			triggerRef.value = next;
-			if (!next) return;
-			next.addEventListener("pointerenter", onPointerEnter);
-			next.addEventListener("mouseenter", onMouseEnter);
-			next.addEventListener("mouseleave", onMouseLeave);
-			next.addEventListener("pointerdown", onPointerDown);
-			if (shouldListenFocus(next)) {
-				next.addEventListener("focusin", onFocusIn);
-				next.addEventListener("focusout", onFocusOut);
-			}
-			describedByBefore = next.getAttribute("aria-describedby");
-			next.setAttribute("aria-describedby", [describedByBefore, tooltipId].filter(Boolean).join(" "));
-		}
-		function unbindTrigger() {
-			if (!trigger) return;
-			trigger.removeEventListener("pointerenter", onPointerEnter);
-			trigger.removeEventListener("mouseenter", onMouseEnter);
-			trigger.removeEventListener("mouseleave", onMouseLeave);
-			trigger.removeEventListener("pointerdown", onPointerDown);
-			trigger.removeEventListener("focusin", onFocusIn);
-			trigger.removeEventListener("focusout", onFocusOut);
-			if (describedByBefore) trigger.setAttribute("aria-describedby", describedByBefore);
-			else trigger.removeAttribute("aria-describedby");
-			trigger = null;
-			triggerRef.value = null;
-			describedByBefore = null;
-		}
-		watch(isVisible, (visible) => {
-			if (visible) document.addEventListener("keydown", onKeydown);
-			else document.removeEventListener("keydown", onKeydown);
-		});
-		watch(() => props.isOpen, (open) => {
-			clearTimers();
-			if (open === void 0) return;
-			applyVisible(open);
-		});
-		watch(() => props.isEnabled, (enabled) => {
-			if (!enabled) hideNow();
-		});
-		onMounted(() => {
-			bindTrigger();
-			if (props.isOpen !== void 0) applyVisible(props.isOpen);
-			else if (props.isDefaultOpen) setOpen(true);
-		});
-		onUpdated(bindTrigger);
-		onBeforeUnmount(() => {
-			clearTimers();
-			unbindTrigger();
-			detachPosition();
-			document.removeEventListener("keydown", onKeydown);
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [!__props.anchorsOnSelf ? (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", {
-				id: tooltipId,
-				ref_key: "bubbleRef",
-				ref: bubbleRef,
-				class: "astryx-tooltip",
-				role: "tooltip",
-				"data-placement": unref(position).placement,
-				style: normalizeStyle(bubbleStyle.value),
-				onMouseenter: cancelHide,
-				onMouseleave: scheduleHide
-			}, [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(__props.content), 1)])], 44, _hoisted_1), [[vShow, isVisible.value]])]))], 64);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };