@vizejs/ui 0.387.0 → 0.388.0

package/dist/tooltip-Cgii5xMx.mjs

@@ -0,0 +1,485 @@
+import { a as useDeterministicId, n as deriveDeterministicId } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { createContext } from "./context.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { t as createDismissableLayer } from "./dismissable-layer-CpS07KUV.mjs";
+import { t as portal_default } from "./portal-DeHaLxGL.mjs";
+import { t as positioner_default } from "./positioner-DaPo2YxM.mjs";
+import { t as presence_default } from "./presence-CTG1EV3w.mjs";
+import { useHover } from "./hover.mjs";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onMounted, onUnmounted, openBlock, renderSlot, shallowRef, unref, useTemplateRef, watch, withCtx } from "vue";
+//#region src/families/overlays/tooltip/tooltip-context.ts
+const tooltipContext = createContext("Tooltip");
+//#endregion
+//#region src/families/overlays/tooltip/tooltip-root.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = [
+	"id",
+	"data-state",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/overlays/tooltip/tooltip-root.vue
+var tooltip_root_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "tooltip-root",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		delayDuration: {
+			type: Number,
+			required: false,
+			default: 700
+		},
+		skipDelayDuration: {
+			type: Number,
+			required: false,
+			default: 300
+		}
+	},
+	emits: ["update:open", "open-change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const openState = useControllableState({
+			value: () => __props.open,
+			defaultValue: () => __props.defaultOpen
+		});
+		const disabledState = computed(() => __props.disabled);
+		const isOpen = computed(() => openState.value.value && !disabledState.value);
+		const state = computed(() => isOpen.value ? "open" : "closed");
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "tooltip"
+		});
+		const triggerId = computed(() => deriveDeterministicId(baseId.value, "trigger"));
+		const contentId = computed(() => deriveDeterministicId(baseId.value, "content"));
+		const delayState = computed(() => normalizeDelay(__props.delayDuration));
+		const skipDelayState = computed(() => normalizeDelay(__props.skipDelayDuration));
+		const slotState = computed(() => ({
+			disabled: disabledState.value,
+			open: isOpen.value,
+			state: state.value
+		}));
+		const triggerElement = shallowRef(null);
+		const contentElement = shallowRef(null);
+		let openTimer = null;
+		let skipDelayUntil = 0;
+		function normalizeDelay(value) {
+			return Number.isFinite(value) && value > 0 ? value : 0;
+		}
+		function cancelOpen() {
+			if (openTimer == null) return false;
+			clearTimeout(openTimer);
+			openTimer = null;
+			return true;
+		}
+		function rememberSkipDelay() {
+			skipDelayUntil = skipDelayState.value > 0 ? Date.now() + skipDelayState.value : 0;
+		}
+		function commitOpen(value, nativeEvent = null, previous = isOpen.value) {
+			const next = value && !disabledState.value;
+			const changed = openState.set(next);
+			if (changed || previous !== next) {
+				emit("update:open", next);
+				emit("open-change", next, previous, nativeEvent);
+			}
+			return changed || previous !== next;
+		}
+		function openTooltip(nativeEvent = null) {
+			cancelOpen();
+			return commitOpen(true, nativeEvent);
+		}
+		function closeWithPrevious(nativeEvent, previous) {
+			const cancelled = cancelOpen();
+			if (previous || openState.value.value) rememberSkipDelay();
+			return commitOpen(false, nativeEvent, previous) || cancelled;
+		}
+		function close(nativeEvent = null) {
+			return closeWithPrevious(nativeEvent, isOpen.value);
+		}
+		function scheduleOpen(nativeEvent = null) {
+			if (disabledState.value || isOpen.value) return false;
+			if (delayState.value === 0 || Date.now() <= skipDelayUntil) return openTooltip(nativeEvent);
+			if (openTimer != null) return false;
+			openTimer = setTimeout(() => {
+				openTimer = null;
+				commitOpen(true, nativeEvent);
+			}, delayState.value);
+			return true;
+		}
+		function setOpen(value, nativeEvent = null) {
+			cancelOpen();
+			if (!value && isOpen.value) rememberSkipDelay();
+			return commitOpen(value, nativeEvent);
+		}
+		watch(disabledState, (next, previousDisabled) => {
+			if (next && openState.value.value) closeWithPrevious(null, !previousDisabled && openState.value.value);
+		});
+		onUnmounted(cancelOpen);
+		tooltipContext.provide({
+			id: baseId,
+			triggerId,
+			contentId,
+			open: isOpen,
+			disabled: disabledState,
+			state,
+			delayDuration: delayState,
+			skipDelayDuration: skipDelayState,
+			triggerElement,
+			contentElement,
+			setOpen,
+			openTooltip,
+			close,
+			scheduleOpen,
+			cancelOpen
+		});
+		__expose({
+			cancelOpen,
+			close,
+			contentId,
+			delayDuration: delayState,
+			disabled: disabledState,
+			id: baseId,
+			open: isOpen,
+			openTooltip,
+			scheduleOpen,
+			setOpen,
+			skipDelayDuration: skipDelayState,
+			state,
+			triggerId
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(baseId),
+				"data-vize-ui": "tooltip-root",
+				part: "root",
+				"data-state": state.value,
+				"data-disabled": __props.disabled ? "true" : void 0
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-979367be"]]);
+//#endregion
+//#region src/families/overlays/tooltip/tooltip-content.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = ["hidden", "data-state"];
+const _hoisted_2 = [
+	"id",
+	"aria-label",
+	"hidden",
+	"data-state",
+	"data-placement",
+	"data-top-layer"
+];
+//#endregion
+//#region src/families/overlays/tooltip/tooltip-content.vue
+var tooltip_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "tooltip-content",
+	props: {
+		forceMount: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		to: {
+			type: null,
+			required: false,
+			default: "body"
+		},
+		portalDisabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		defer: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		placement: {
+			type: String,
+			required: false,
+			default: "top"
+		},
+		strategy: {
+			type: String,
+			required: false,
+			default: "fixed"
+		},
+		offset: {
+			type: Number,
+			required: false,
+			default: 6
+		},
+		collisionPadding: {
+			type: Number,
+			required: false,
+			default: 4
+		},
+		flip: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		hide: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		updateOnScroll: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		updateOnResize: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		viewport: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		closeOnEscape: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["escape-key-down", "dismiss"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = tooltipContext.use();
+		const element = useTemplateRef("element");
+		const present = computed(() => context.open.value || __props.forceMount);
+		const contentSlotState = computed(() => ({
+			disabled: context.disabled.value,
+			open: context.open.value,
+			placement: __props.placement,
+			state: context.state.value
+		}));
+		const positionerProps = computed(() => {
+			const base = {
+				collisionPadding: __props.collisionPadding,
+				flip: __props.flip,
+				hide: __props.hide,
+				offset: __props.offset,
+				placement: __props.placement,
+				reference: context.triggerElement.value,
+				shift: __props.shift,
+				strategy: __props.strategy,
+				updateOnResize: __props.updateOnResize,
+				updateOnScroll: __props.updateOnScroll
+			};
+			return __props.viewport === void 0 ? base : {
+				...base,
+				viewport: __props.viewport
+			};
+		});
+		const dismissableLayer = createDismissableLayer({
+			root: element,
+			branches: () => [context.triggerElement.value].filter((value) => !!value),
+			enabled: () => context.open.value,
+			escapeKey: () => __props.closeOnEscape,
+			outsideFocus: false,
+			outsidePointerDown: false,
+			onEscapeKeyDown: (event) => emit("escape-key-down", event),
+			onDismiss: (event) => {
+				emit("dismiss", event);
+				context.close(event.originalEvent);
+			}
+		});
+		let mounted = false;
+		function syncDismissableLayer() {
+			if (!mounted || !context.open.value || !element.value) {
+				dismissableLayer.deactivate();
+				return;
+			}
+			dismissableLayer.activate();
+		}
+		watch(element, (next, previous) => {
+			if (previous && context.contentElement.value === previous) context.contentElement.value = null;
+			if (next) context.contentElement.value = next;
+			syncDismissableLayer();
+		}, { flush: "post" });
+		watch(() => context.open.value, syncDismissableLayer, { flush: "post" });
+		onMounted(() => {
+			mounted = true;
+			syncDismissableLayer();
+		});
+		onUnmounted(() => {
+			mounted = false;
+			dismissableLayer.dispose();
+			if (context.contentElement.value === element.value) context.contentElement.value = null;
+		});
+		__expose({
+			disabled: context.disabled,
+			element,
+			open: context.open,
+			state: context.state
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-vize-ui": "tooltip-content-host",
+				part: "content-host",
+				hidden: present.value && unref(context).open.value ? void 0 : true,
+				"data-state": unref(context).state.value
+			}, [present.value ? (openBlock(), createBlock(portal_default, {
+				key: 0,
+				to: __props.to,
+				disabled: __props.portalDisabled,
+				defer: __props.defer
+			}, {
+				default: withCtx(() => [createVNode(presence_default, {
+					present: unref(context).open.value,
+					"force-mount": __props.forceMount
+				}, {
+					default: withCtx(() => [createVNode(positioner_default, normalizeProps(guardReactiveProps(positionerProps.value)), {
+						default: withCtx(() => [createElementVNode("div", mergeProps({
+							id: unref(context).contentId.value,
+							ref_key: "element",
+							ref: element
+						}, unref(dismissableLayer).layerProps, {
+							role: "tooltip",
+							"aria-label": __props.ariaLabel,
+							"data-vize-ui": "tooltip-content",
+							part: "content",
+							hidden: unref(context).open.value ? void 0 : true,
+							"data-state": unref(context).state.value,
+							"data-placement": __props.placement,
+							"data-top-layer": unref(dismissableLayer).isTopLayer.value ? "true" : "false"
+						}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(contentSlotState.value)), void 0, true)], 16, _hoisted_2)]),
+						_: 3
+					}, 16)]),
+					_: 3
+				}, 8, ["present", "force-mount"])]),
+				_: 3
+			}, 8, [
+				"to",
+				"disabled",
+				"defer"
+			])) : createCommentVNode("v-if", true)], 8, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-1de0291b"]]);
+//#endregion
+//#region src/families/overlays/tooltip/tooltip-trigger.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"type",
+	"disabled",
+	"aria-label",
+	"aria-describedby",
+	"data-state",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/overlays/tooltip/tooltip-trigger.vue
+var tooltip_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "tooltip-trigger",
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: "button"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = tooltipContext.use();
+		const element = useTemplateRef("element");
+		const disabledState = computed(() => __props.disabled || context.disabled.value);
+		const hover = useHover({
+			isDisabled: disabledState,
+			onHoverStart: (event) => context.scheduleOpen(event.originalEvent),
+			onHoverEnd: (event) => context.close(event.originalEvent)
+		});
+		onMounted(() => {
+			context.triggerElement.value = element.value;
+		});
+		onUnmounted(() => {
+			if (context.triggerElement.value === element.value) context.triggerElement.value = null;
+		});
+		function onFocus(event) {
+			if (!disabledState.value) context.scheduleOpen(event);
+		}
+		function onBlur(event) {
+			context.close(event);
+		}
+		function onPointerDown(event) {
+			context.close(event);
+		}
+		function onKeydown(event) {
+			if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+			if (context.close(event)) event.preventDefault();
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		__expose({
+			element,
+			focus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", mergeProps({
+				id: unref(context).triggerId.value,
+				ref_key: "element",
+				ref: element
+			}, unref(hover).hoverProps, {
+				type: __props.type,
+				disabled: disabledState.value,
+				"aria-label": __props.ariaLabel,
+				"aria-describedby": unref(context).open.value ? unref(context).contentId.value : void 0,
+				"data-vize-ui": "tooltip-trigger",
+				part: "trigger",
+				"data-state": unref(context).state.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				onFocus,
+				onBlur,
+				onPointerdown: onPointerDown,
+				onKeydown
+			}), [renderSlot(_ctx.$slots, "default", {
+				disabled: disabledState.value,
+				open: unref(context).open.value,
+				state: unref(context).state.value
+			}, void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-7b699ad4"]]);
+//#endregion
+export { tooltip_content_default as n, tooltip_root_default as r, tooltip_trigger_default as t };

package/dist/tooltip.d.mts

@@ -0,0 +1,2 @@
+import { _i as TooltipSlotState, bi as TooltipViewport, ci as _default$1, di as TooltipContentSlotState, fi as TooltipDismissEvent, gi as TooltipRootExpose, hi as TooltipPositionerStrategy, li as _default, mi as TooltipPlacement, pi as TooltipEscapeKeyDownEvent, si as _default$2, ui as TooltipContentExpose, vi as TooltipState, yi as TooltipTriggerExpose } from "./announcer-DGr2Iz0i.mjs";
+export { _default as Tooltip, _default as TooltipRoot, _default$1 as TooltipContent, type TooltipContentExpose, type TooltipContentSlotState, type TooltipDismissEvent, type TooltipEscapeKeyDownEvent, type TooltipPlacement, type TooltipPositionerStrategy, type TooltipRootExpose, type TooltipSlotState, type TooltipState, _default$2 as TooltipTrigger, type TooltipTriggerExpose, type TooltipViewport };

package/dist/tooltip.mjs

@@ -0,0 +1,2 @@
+import { n as tooltip_content_default, r as tooltip_root_default, t as tooltip_trigger_default } from "./tooltip-Cgii5xMx.mjs";
+export { tooltip_root_default as Tooltip, tooltip_root_default as TooltipRoot, tooltip_content_default as TooltipContent, tooltip_trigger_default as TooltipTrigger };

package/dist/transition-BmgFyzA6.mjs

@@ -0,0 +1,168 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { t as createPresence } from "./presence-runtime-CYwCafSh.mjs";
+import { computed, createCommentVNode, createElementBlock, defineComponent, getCurrentScope, mergeProps, onMounted, onScopeDispose, onUpdated, openBlock, renderSlot, toRef, toValue, unref, useTemplateRef, watch } from "vue";
+//#region src/families/overlays/transition/transition-runtime.ts
+const invalidOptionDiagnostic = "VIZE_UI_TRANSITION_OPTION";
+const disposedDiagnostic = "VIZE_UI_TRANSITION_DISPOSED";
+const setupDiagnostic = "VIZE_UI_TRANSITION_SETUP";
+function readPadding(value) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return 0;
+	if (typeof resolved !== "number" || !Number.isFinite(resolved) || resolved < 0) throw new TypeError(`${invalidOptionDiagnostic}: timeoutPadding must resolve to a non-negative number`);
+	return resolved;
+}
+function parseTimes(value) {
+	return value.split(",").map((part) => {
+		const trimmed = part.trim();
+		if (trimmed.endsWith("ms")) return Number.parseFloat(trimmed) || 0;
+		if (trimmed.endsWith("s")) return (Number.parseFloat(trimmed) || 0) * 1e3;
+		return 0;
+	});
+}
+function pairedMax(durations, delays) {
+	const count = Math.max(durations.length, delays.length, 1);
+	let max = 0;
+	for (let index = 0; index < count; index += 1) {
+		const duration = durations[index] ?? durations[0] ?? 0;
+		const delay = delays[index] ?? delays[0] ?? 0;
+		max = Math.max(max, duration + delay);
+	}
+	return max;
+}
+/** Longest animation or transition time on `element`, including delay. */
+function motionDurationMs(element) {
+	if (typeof globalThis.getComputedStyle !== "function") return 0;
+	const style = globalThis.getComputedStyle(element);
+	return Math.max(pairedMax(parseTimes(style.transitionDuration), parseTimes(style.transitionDelay)), pairedMax(parseTimes(style.animationDuration), parseTimes(style.animationDelay)));
+}
+function validateOptions(options) {
+	if (typeof options.timeoutPadding !== "function") readPadding(options.timeoutPadding);
+}
+/** Create an SSR-safe transition that auto-completes from CSS motion duration. */
+function createTransition(options = {}) {
+	validateOptions(options);
+	const presence = createPresence(options);
+	let disposed = false;
+	let element = null;
+	let timer = 0;
+	const assertAlive = () => {
+		if (disposed) throw new Error(`${disposedDiagnostic}: the controller has been disposed`);
+	};
+	const clearTimer = () => {
+		if (timer === 0) return;
+		globalThis.clearTimeout(timer);
+		timer = 0;
+	};
+	const schedule = () => {
+		clearTimer();
+		const status = presence.status.value;
+		if (status !== "entering" && status !== "exiting") return;
+		const duration = (element === null ? 0 : motionDurationMs(element)) + readPadding(options.timeoutPadding);
+		timer = globalThis.setTimeout(() => {
+			timer = 0;
+			if (!disposed) presence.completeAnimation();
+		}, duration);
+	};
+	const stopWatch = watch(() => presence.status.value, schedule, { flush: "sync" });
+	return Object.freeze({
+		completeAnimation: () => {
+			assertAlive();
+			clearTimer();
+			presence.completeAnimation();
+		},
+		dispose: () => {
+			if (disposed) return;
+			disposed = true;
+			clearTimer();
+			stopWatch();
+			presence.dispose();
+		},
+		isPresent: presence.isPresent,
+		presenceProps: presence.presenceProps,
+		setElement: (node) => {
+			assertAlive();
+			element = node;
+			schedule();
+		},
+		status: presence.status
+	});
+}
+/** Create a transition controller disposed with the current Vue effect scope. */
+function useTransition(options = {}) {
+	if (!getCurrentScope()) throw new Error(`${setupDiagnostic}: use inside component setup or an active effect scope`);
+	const controller = createTransition(options);
+	onScopeDispose(controller.dispose);
+	return controller;
+}
+//#endregion
+//#region src/families/overlays/transition/transition.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { "data-vize-ui": "transition-host" };
+const _hoisted_2 = ["data-vize-motion", "data-vize-transition"];
+//#endregion
+//#region src/families/overlays/transition/transition.vue
+var transition_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "transition",
+	props: {
+		present: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		forceMount: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		respectReducedMotion: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		timeoutPadding: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		motion: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const transition = useTransition({
+			present: toRef(() => __props.present),
+			respectReducedMotion: toRef(() => __props.respectReducedMotion),
+			timeoutPadding: toRef(() => __props.timeoutPadding)
+		});
+		const show = computed(() => transition.isPresent.value || __props.forceMount);
+		const element = useTemplateRef("element");
+		onMounted(() => {
+			transition.setElement(element.value);
+		});
+		onUpdated(() => {
+			transition.setElement(element.value);
+		});
+		__expose({
+			completeAnimation: transition.completeAnimation,
+			element,
+			isPresent: transition.isPresent,
+			status: transition.status
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [show.value ? (openBlock(), createElementBlock("div", mergeProps({
+				key: 0,
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "transition",
+				"data-vize-motion": __props.motion,
+				"data-vize-transition": unref(transition).status.value
+			}, unref(transition).presenceProps), [renderSlot(_ctx.$slots, "default", {
+				present: unref(transition).isPresent.value,
+				status: unref(transition).status.value
+			}, void 0, true)], 16, _hoisted_2)) : createCommentVNode("v-if", true)]);
+		};
+	}
+}), [["__scopeId", "data-v-078d5f63"]]);
+//#endregion
+export { useTransition as i, createTransition as n, motionDurationMs as r, transition_default as t };