@lumx/vue 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/components/user-block/UserBlock.js

@@ -0,0 +1,120 @@
+import { __toESM } from "../../_virtual/_rolldown/runtime.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { require_isEmpty } from "../../node_modules/lodash/isEmpty.js";
+import Text$1 from "../text/Text.js";
+import { useHasEventListener } from "../../composables/useHasEventListener.js";
+import Avatar from "../avatar/Avatar.js";
+import Link from "../link/Link.js";
+import { require_set } from "../../node_modules/lodash/set.js";
+import { UserBlock as UserBlock$1, element, isUserBlockClickeable } from "../../packages/lumx-core/src/js/components/UserBlock/index.js";
+import { ColorPalette } from "@lumx/core/js/constants";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, toRaw, useAttrs } from "vue";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/user-block/UserBlock.tsx
+var import_isEmpty = /* @__PURE__ */ __toESM(require_isEmpty(), 1);
+var import_set = /* @__PURE__ */ __toESM(require_set(), 1);
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* UserBlock component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var UserBlock = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const handleClick = () => {
+		emit("click");
+	};
+	const handleMouseEnter = () => {
+		emit("mouseenter");
+	};
+	const handleMouseLeave = () => {
+		emit("mouseleave");
+	};
+	const hasOnClick = useHasEventListener("onClick");
+	const hasOnMouseEnter = useHasEventListener("onMouseenter");
+	const hasOnMouseLeave = useHasEventListener("onMouseleave");
+	/**
+	* This logic needs to occur on the wrapper level, since core templates cannot manage
+	* the render of dynamically determined components. So `NameComponent`, if moved to core,
+	* it will return an `undefined`
+	*/
+	const nameBlock = computed(() => {
+		const name = props.name || slots.name?.();
+		if ((0, import_isEmpty.default)(name)) return null;
+		const isClickable = isUserBlockClickeable({
+			linkAs: props.linkAs,
+			linkProps: props.linkProps,
+			handleClick: hasOnClick ? handleClick : void 0
+		});
+		let NameComponent = "span";
+		const nProps = {
+			...props.nameProps,
+			class: classNames.join(element("name"), props.linkProps?.class, props.nameProps?.class)
+		};
+		if (isClickable) {
+			NameComponent = Link;
+			Object.assign(nProps, {
+				...props.linkProps,
+				color: ColorPalette.dark
+			});
+		}
+		return createVNode(NameComponent, mergeProps(nProps, { "onClick": handleClick }), { default: () => [createVNode(Text$1, { "as": "span" }, _isSlot(name) ? name : { default: () => [name] })] });
+	});
+	const computedAvatarProps = computed(() => {
+		if (!props.avatarProps) return void 0;
+		if (isUserBlockClickeable({
+			linkAs: props.linkAs,
+			linkProps: props.linkProps,
+			handleClick
+		})) {
+			const modifiedProps = { ...props.avatarProps };
+			(0, import_set.default)(modifiedProps, ["thumbnailProps", "tabIndex"], -1);
+			return modifiedProps;
+		}
+		return props.avatarProps;
+	});
+	return () => {
+		const { linkAs, fields, ...restProps } = props;
+		const childrenContent = slots.default?.() || nameBlock.value;
+		return createVNode(UserBlock$1, mergeProps(restProps, attrs, {
+			"linkAs": toRaw(linkAs),
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"handleClick": hasOnClick ? handleClick : void 0,
+			"handleMouseEnter": hasOnMouseEnter ? handleMouseEnter : void 0,
+			"handleMouseLeave": hasOnMouseLeave ? handleMouseLeave : void 0,
+			"avatarProps": computedAvatarProps.value,
+			"fields": fields || slots.fields?.(),
+			"simpleAction": slots["simple-action"]?.() || slots.simpleAction?.(),
+			"multipleActions": slots["multiple-actions"]?.() || slots.multipleActions?.(),
+			"additionalFields": slots["additional-fields"]?.() || slots.additionalFields?.(),
+			"after": slots.after?.(),
+			"Avatar": (avProps) => {
+				const { badge, ...restAvatarProps } = avProps;
+				return createVNode(Avatar, restAvatarProps, { badge: badge ? () => badge : void 0 });
+			},
+			"Text": Text$1,
+			"children": childrenContent,
+			"mouseEnterProp": "onMouseenter",
+			"mouseLeaveProp": "onMouseleave"
+		}), null);
+	};
+}, {
+	name: "LumxUserBlock",
+	inheritAttrs: false,
+	props: keysOf()("avatarProps", "class", "fields", "linkAs", "linkProps", "name", "nameProps", "orientation", "size", "theme"),
+	emits: {
+		click: () => true,
+		mouseenter: () => true,
+		mouseleave: () => true
+	}
+});
+//#endregion
+export { UserBlock as default };

package/_internal/components/user-block/index.d.ts

@@ -0,0 +1,2 @@
+import { UserBlockSize } from "../../packages/lumx-core/src/js/components/UserBlock/index.js";
+import { UserBlock, UserBlockProps } from "./UserBlock.js";

package/_internal/composables/useAttrFallback.js

@@ -0,0 +1,39 @@
+import { computed, toValue, useAttrs } from "vue";
+//#region src/composables/useAttrFallback.ts
+/**
+* Composable that falls back to an `$attrs` value when the Vue prop is absent.
+*
+* When a core JSX component renders a Vue sub-component, it passes props using React naming
+* conventions (e.g. `className`, `tabIndex`). Since these names are not declared Vue props,
+* they land in `$attrs`. This composable reads the fallback attr and merges it with the
+* corresponding Vue prop value using a caller-supplied merge function (or `??` by default).
+*
+* Usage inside `defineComponent` setup:
+* ```tsx
+* // With default merge (vueProp ?? attrFallback):
+* const tabIndex = useAttrFallback(() => attrs.tabindex, 'tabIndex');
+*
+* // With custom merge function:
+* const className = useAttrFallback(
+*     () => props.class,
+*     'className',
+*     (vue, fallback) => classNames.join(vue, fallback as string | undefined) || undefined,
+* );
+* ```
+*
+* @param  vueProp      The Vue prop value (or a getter/ref returning it).
+* @param  attrFallback The attribute name to read from `$attrs` as the fallback.
+* @param  merge        Optional merge function. Defaults to `vueProp ?? attrFallback`.
+* @return Computed ref holding the merged value.
+*/
+function useAttrFallback(vueProp, attrFallback, merge) {
+	const attrs = useAttrs();
+	return computed(() => {
+		const vuePropValue = toValue(vueProp);
+		const attrFallbackValue = attrs[attrFallback];
+		if (merge) return merge(vuePropValue, attrFallbackValue);
+		return vuePropValue ?? attrFallbackValue;
+	});
+}
+//#endregion
+export { useAttrFallback };

package/_internal/composables/useCallbackOnEscape.js

@@ -0,0 +1,42 @@
+import { onEscapePressed } from "../packages/lumx-core/src/js/utils/events/keyboard.js";
+import { makeListenerTowerContext } from "../packages/lumx-core/src/js/utils/function/listenerTower.js";
+import { isRef, onUnmounted, watchEffect } from "vue";
+//#region src/composables/useCallbackOnEscape.ts
+var LISTENERS = makeListenerTowerContext();
+/**
+* Register a global listener on 'Escape' key pressed.
+*
+* If multiple listeners are registered, only the last one is maintained. When a listener is unregistered, the previous
+* one gets activated again.
+*
+* Supports both reactive refs and static values for callback and closeOnEscape.
+*
+* @param callbackRef      Callback (or ref to callback)
+* @param closeOnEscapeRef Disables the hook when false (or ref to boolean)
+*/
+function useCallbackOnEscape(callbackRef, closeOnEscapeRef = true) {
+	let listener;
+	watchEffect((onCleanup) => {
+		const callback = isRef(callbackRef) ? callbackRef.value : callbackRef;
+		if (!(isRef(closeOnEscapeRef) ? closeOnEscapeRef.value : closeOnEscapeRef) || !callback) return;
+		const onKeyDown = onEscapePressed(() => callback());
+		const newListener = {
+			enable: () => document.body.addEventListener("keydown", onKeyDown),
+			disable: () => document.body.removeEventListener("keydown", onKeyDown)
+		};
+		LISTENERS.register(newListener);
+		listener = newListener;
+		onCleanup(() => {
+			LISTENERS.unregister(newListener);
+			listener = void 0;
+		});
+	});
+	onUnmounted(() => {
+		if (listener) {
+			LISTENERS.unregister(listener);
+			listener = void 0;
+		}
+	});
+}
+//#endregion
+export { useCallbackOnEscape };

package/_internal/composables/useClassName.js

@@ -0,0 +1,21 @@
+import { useAttrFallback } from "./useAttrFallback.js";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/composables/useClassName.ts
+/**
+* Composable that merges the Vue `class` prop with the `className` attribute (for React compat).
+*
+* Usage inside `defineComponent` setup:
+* ```tsx
+* const className = useClassName(() => props.class);
+* // Then use className.value instead of props.class when forwarding to the core UI:
+* return () => <SomeUI {...props} className={className.value} />;
+* ```
+*
+* @param  classProp The Vue `class` prop value (or a getter/ref returning it).
+* @return Computed ref holding the merged class string (or undefined when empty).
+*/
+function useClassName(classProp) {
+	return useAttrFallback(classProp, "className", (vue, fallback) => classNames.join(vue, fallback) || void 0);
+}
+//#endregion
+export { useClassName };

package/_internal/composables/useDisableBodyScroll.js

@@ -0,0 +1,17 @@
+import { useScrollLock } from "../node_modules/@vueuse/core/dist/index.js";
+import { watch } from "vue";
+//#region src/composables/useDisableBodyScroll.ts
+/**
+* Disables body scroll when the dialog is open.
+* Uses @vueuse/core's useScrollLock which sets overflow:hidden on document.body.
+*
+* @param isActive Whether body scroll should be disabled.
+*/
+function useDisableBodyScroll(isActive) {
+	const isLocked = useScrollLock(typeof document !== "undefined" ? document.body : null);
+	watch(isActive, (active) => {
+		isLocked.value = active;
+	});
+}
+//#endregion
+export { useDisableBodyScroll };

package/_internal/composables/useDisableStateProps.js

@@ -0,0 +1,36 @@
+import { useDisabledStateContext } from "./useDisabledState.js";
+import { computed, unref } from "vue";
+import { getDisabledState } from "@lumx/core/js/utils/disabledState";
+//#region src/composables/useDisableStateProps.ts
+/**
+* Resolve disabled state from props.
+* (handles `disabled`, `isDisabled` and `aria-disabled`)
+*
+* @params component props
+*/
+function useDisableStateProps(props) {
+	const disabledStateContext = useDisabledStateContext();
+	const disabledStateProps = computed(() => {
+		const p = typeof props === "function" ? props() : unref(props);
+		return getDisabledState(disabledStateContext, {
+			disabled: p.disabled,
+			isDisabled: p.isDisabled,
+			"aria-disabled": p["aria-disabled"] ?? p.ariaDisabled
+		});
+	});
+	const isAnyDisabled = computed(() => disabledStateProps.value["aria-disabled"] || disabledStateProps.value.disabled || void 0);
+	return {
+		disabledStateProps,
+		isAnyDisabled,
+		otherProps: computed(() => {
+			const { disabled, isDisabled, "aria-disabled": _, ariaDisabled, onClick, onChange, ...rest } = typeof props === "function" ? props() : unref(props);
+			if (!isAnyDisabled.value) {
+				if (onClick) rest.onClick = onClick;
+				if (onChange) rest.onChange = onChange;
+			}
+			return rest;
+		})
+	};
+}
+//#endregion
+export { useDisableStateProps };

package/_internal/composables/useDisabledState.js

@@ -0,0 +1,8 @@
+import { inject } from "vue";
+//#region src/composables/useDisabledState.ts
+var DISABLED_STATE_KEY = Symbol("DISABLED_STATE_KEY");
+function useDisabledStateContext() {
+	return inject(DISABLED_STATE_KEY, { state: null });
+}
+//#endregion
+export { useDisabledStateContext };

package/_internal/composables/useFocus.js

@@ -0,0 +1,23 @@
+import { isRef, ref, watchEffect } from "vue";
+//#region src/composables/useFocus.ts
+/**
+* Composable focusing an element when defined and `shouldFocus` becomes `true`.
+* Only focuses once per transition to `true` (one-shot).
+*
+* @param elementRef     Element to focus (or ref to it).
+* @param shouldFocusRef Boolean flag to trigger the focus (or ref to it).
+*/
+function useFocus(elementRef, shouldFocusRef = true) {
+	const wasFocused = ref(false);
+	watchEffect(() => {
+		const element = isRef(elementRef) ? elementRef.value : elementRef;
+		const shouldFocus = isRef(shouldFocusRef) ? shouldFocusRef.value : shouldFocusRef;
+		if (shouldFocus && !wasFocused.value && element) {
+			element.focus();
+			wasFocused.value = true;
+		}
+		if (!shouldFocus) wasFocused.value = false;
+	});
+}
+//#endregion
+export { useFocus };

package/_internal/composables/useFocusTrap.js

@@ -0,0 +1,38 @@
+import { setupFocusTrap } from "../packages/lumx-core/src/js/utils/focus/setupFocusTrap.js";
+import { isRef, onScopeDispose, watchPostEffect } from "vue";
+//#region src/composables/useFocusTrap.ts
+/**
+* Trap 'Tab' focus switch inside the `focusZoneElement`.
+*
+* If multiple focus traps are activated, only the last one is maintained and when a focus trap closes, the previous one
+* gets activated again.
+*
+* If the zone has no focusable descendant, the zone element itself receives focus (with a fallback `tabindex="-1"`).
+*
+* @param focusZoneElementRef The element in which to trap the focus (or ref to it). Falsy disables the trap.
+* @param focusElementRef     The element to focus when the focus trap is activated (or ref to it).
+*/
+function useFocusTrap(focusZoneElementRef, focusElementRef) {
+	let currentController;
+	const tearDown = () => {
+		if (currentController) {
+			currentController.abort();
+			currentController = void 0;
+		}
+	};
+	watchPostEffect((onCleanup) => {
+		const focusZoneElement = isRef(focusZoneElementRef) ? focusZoneElementRef.value : focusZoneElementRef;
+		const focusElement = isRef(focusElementRef) ? focusElementRef.value : focusElementRef;
+		if (!focusZoneElement) return;
+		const controller = new AbortController();
+		currentController = controller;
+		setupFocusTrap({
+			focusZoneElement,
+			focusElement
+		}, controller.signal);
+		onCleanup(tearDown);
+	});
+	onScopeDispose(tearDown);
+}
+//#endregion
+export { useFocusTrap };

package/_internal/composables/useHasEventListener.js

@@ -0,0 +1,13 @@
+import { getCurrentInstance } from "vue";
+//#region src/composables/useHasEventListener.ts
+/**
+* Check if a specific event listener is attached to the current component instance.
+*
+* @param eventName - The event name to check (e.g., 'onClick', 'onKeyPress')
+* @returns true if the event listener exists, false otherwise
+*/
+var useHasEventListener = (eventName) => {
+	return getCurrentInstance()?.vnode.props?.[eventName] !== void 0;
+};
+//#endregion
+export { useHasEventListener };

package/_internal/composables/useId.js

@@ -0,0 +1,14 @@
+//#region src/composables/useId.ts
+var counter = 0;
+/**
+* Generate a unique ID for use in components.
+* This is a simple implementation that generates sequential IDs.
+*
+* @return A unique ID string.
+*/
+function useId() {
+	counter += 1;
+	return `:lumx${counter}:`;
+}
+//#endregion
+export { useId };

package/_internal/composables/useOverflowTooltipLabel.js

@@ -0,0 +1,28 @@
+import { useMutationObserver, useResizeObserver } from "../node_modules/@vueuse/core/dist/index.js";
+import { useTooltipContext } from "../components/tooltip/context.js";
+import { ref, watch } from "vue";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/composables/useOverflowTooltipLabel.ts
+/**
+* Compute a tooltip label based on a label element `innerText` if the text overflows.
+*/
+function useOverflowTooltipLabel(labelRef) {
+	const tooltipLabel = ref(void 0);
+	if (useTooltipContext()) return { tooltipLabel };
+	const updateLabel = () => {
+		const labelElement = labelRef.value;
+		if (labelElement && !labelElement.closest(`.${classNames.visuallyHidden()}`) && labelElement.offsetWidth < labelElement.scrollWidth) tooltipLabel.value = labelElement.innerText;
+		else tooltipLabel.value = void 0;
+	};
+	useMutationObserver(labelRef, updateLabel, {
+		childList: true,
+		attributes: true,
+		characterData: true,
+		subtree: true
+	});
+	useResizeObserver(labelRef, updateLabel);
+	watch(labelRef, updateLabel, { immediate: true });
+	return { tooltipLabel };
+}
+//#endregion
+export { useOverflowTooltipLabel };

package/_internal/composables/useRestoreFocusOnClose.js

@@ -0,0 +1,37 @@
+import { getFirstAndLastFocusable } from "../packages/lumx-core/src/js/utils/focus/getFirstAndLastFocusable.js";
+import { onBeforeUnmount, watch } from "vue";
+//#region src/composables/useRestoreFocusOnClose.ts
+/**
+* Restores focus to the anchor or parent element when the popover closes,
+* if focus was within the popover at the time it closed.
+*
+* Works both when `isOpen` toggles to false (before Vue re-renders)
+* and when the component unmounts entirely.
+*
+* @param focusAnchorOnClose Whether to restore focus on close.
+* @param anchorRef          Reference to the anchor element.
+* @param parentElementRef   Reference to the parent element (optional override for focus target).
+* @param popoverElementRef  Reference to the popover element.
+* @param isOpenRef          Whether the popover is open (used to detect close before DOM update).
+*/
+function useRestoreFocusOnClose(focusAnchorOnClose, anchorRef, parentElementRef, popoverElementRef, isOpenRef) {
+	const tryRestoreFocus = () => {
+		if (!focusAnchorOnClose.value) return;
+		const popoverElement = popoverElementRef.value;
+		if (!popoverElement) return;
+		if (!popoverElement.contains(document.activeElement)) return;
+		setTimeout(() => {
+			const anchorValue = anchorRef.value;
+			const anchor = anchorValue && "$el" in anchorValue ? anchorValue.$el : anchorValue;
+			(parentElementRef?.value || (anchor instanceof HTMLElement ? getFirstAndLastFocusable(anchor).first : void 0) || anchor)?.focus({ preventScroll: true });
+		}, 0);
+	};
+	if (isOpenRef) watch(isOpenRef, (isOpen, wasOpen) => {
+		if (wasOpen && !isOpen) tryRestoreFocus();
+	}, { flush: "sync" });
+	onBeforeUnmount(() => {
+		tryRestoreFocus();
+	});
+}
+//#endregion
+export { useRestoreFocusOnClose };

package/_internal/composables/useRovingTabIndexContainer.js

@@ -0,0 +1,26 @@
+import { setupRovingTabIndex } from "../packages/lumx-core/src/js/utils/focusNavigation/setupRovingTabIndex.js";
+import { watchEffect } from "vue";
+//#region src/composables/useRovingTabIndexContainer.ts
+/**
+* Vue composable equivalent of React's useRovingTabIndexContainer.
+* Sets up roving tab index keyboard navigation on a container element.
+* Automatically tears down when the container is removed or the composable is unmounted.
+*/
+function useRovingTabIndexContainer({ containerRef, itemSelector, onItemFocused, direction, itemDisabledSelector, itemSelectedAttr }) {
+	watchEffect((onCleanup) => {
+		const container = containerRef.value;
+		if (!container) return;
+		const abortController = new AbortController();
+		setupRovingTabIndex({
+			container,
+			itemSelector,
+			direction,
+			itemDisabledSelector,
+			itemSelectedAttr,
+			onItemFocused
+		}, abortController.signal);
+		onCleanup(() => abortController.abort());
+	});
+}
+//#endregion
+export { useRovingTabIndexContainer };

package/_internal/composables/useSlot.js

@@ -0,0 +1,15 @@
+import { useSlots } from "vue";
+//#region src/composables/useSlot.ts
+/**
+* Returns the slot casted as a JSXElement
+* @returns () => JSXElement | null
+*/
+var useSlot = (slot = "default") => {
+	const slots = useSlots();
+	return () => {
+		const slotFn = slots?.[slot];
+		return slotFn ? slotFn() : null;
+	};
+};
+//#endregion
+export { useSlot };

package/_internal/composables/useTransitionVisibility.js

@@ -0,0 +1,40 @@
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+//#region src/composables/useTransitionVisibility.ts
+/**
+* Returns true if the component is visible, tracking the opacity transition.
+* Keeps the component mounted during the close animation, then unmounts after the timeout.
+*
+* @param isOpen               Whether the component intends to be visible or not.
+* @param timeout              Duration of the close animation in ms.
+* @param onVisibilityChange   Callback called when the visibility changes.
+* @return ComputedRef<boolean> true if the component should be rendered (open or animating closed)
+*/
+function useTransitionVisibility(isOpen, timeout, onVisibilityChange) {
+	const isStillVisible = ref(isOpen.value);
+	let timer;
+	watch(isOpen, (open) => {
+		if (open) {
+			clearTimeout(timer);
+			isStillVisible.value = true;
+		} else {
+			const isReducedMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			if (!(typeof window !== "undefined" && window.TransitionEvent && !isReducedMotion)) isStillVisible.value = false;
+			else timer = setTimeout(() => {
+				isStillVisible.value = false;
+			}, timeout);
+		}
+	}, { immediate: false });
+	let previousIsVisible = isStillVisible.value;
+	watch(isStillVisible, (val) => {
+		if (val !== previousIsVisible) {
+			previousIsVisible = val;
+			onVisibilityChange?.value?.(val);
+		}
+	});
+	onBeforeUnmount(() => {
+		clearTimeout(timer);
+	});
+	return computed(() => isOpen.value || isStillVisible.value);
+}
+//#endregion
+export { useTransitionVisibility };

package/_internal/composables/useWatchDisposable.js

@@ -0,0 +1,24 @@
+import { onUnmounted, watch } from "vue";
+//#region src/composables/useWatchDisposable.ts
+function useWatchDisposable(source, effect, options = { immediate: true }) {
+	let cleanup;
+	const runCleanup = () => {
+		cleanup?.();
+		cleanup = void 0;
+	};
+	const stop = watch(source, (value, oldValue) => {
+		runCleanup();
+		const maybeCleanup = effect(value, oldValue);
+		if (typeof maybeCleanup === "function") cleanup = maybeCleanup;
+	}, options);
+	onUnmounted(() => {
+		stop();
+		runCleanup();
+	});
+	return () => {
+		stop();
+		runCleanup();
+	};
+}
+//#endregion
+export { useWatchDisposable };