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

package/_internal/packages/lumx-core/src/js/utils/typeahead/index.js

@@ -0,0 +1,77 @@
+//#region ../lumx-core/src/js/utils/typeahead/index.ts
+/** Timeout in ms after which the accumulated search string is cleared. */
+var SEARCH_TIMEOUT = 500;
+/**
+* Create a typeahead controller for keyboard navigation in list-like widgets
+* (combobox, menu, listbox, tree, etc.).
+*
+* Accumulates typed characters and matches them against item labels.
+* Supports single-char cycling (e.g. pressing "a" repeatedly cycles through
+* items starting with "a") and multi-char prefix matching.
+*
+* Uses a {@link TreeWalker} for lazy DOM traversal — items are visited one
+* at a time without materializing the full list.
+*
+* @param getWalker Callback returning a fresh TreeWalker over navigable items, or null if unavailable.
+* @param getItemValue Callback extracting the text label from an item element.
+* @param signal AbortSignal for cleanup.
+* @returns Typeahead instance.
+*/
+function createTypeahead(getWalker, getItemValue, signal) {
+	let searchString = "";
+	let searchTimeout;
+	function reset() {
+		searchString = "";
+		if (searchTimeout !== void 0) {
+			clearTimeout(searchTimeout);
+			searchTimeout = void 0;
+		}
+	}
+	signal.addEventListener("abort", reset);
+	function match(currentItem) {
+		if (!searchString) return null;
+		const walker = getWalker();
+		if (!walker) return null;
+		const firstItem = walker.nextNode();
+		if (!firstItem) return null;
+		const allSameChar = searchString.split("").every((ch) => ch === searchString[0]);
+		const searchText = allSameChar ? searchString[0] : searchString;
+		const validCurrent = currentItem && walker.root.contains(currentItem) ? currentItem : null;
+		let startItem;
+		if (validCurrent) {
+			walker.currentNode = validCurrent;
+			if (allSameChar) startItem = walker.nextNode() ?? firstItem;
+			else startItem = validCurrent;
+		} else startItem = firstItem;
+		walker.currentNode = startItem;
+		let candidate = startItem;
+		while (true) {
+			if (getItemValue(candidate).toLowerCase().startsWith(searchText)) return candidate;
+			const next = walker.nextNode();
+			if (next) candidate = next;
+			else {
+				walker.currentNode = walker.root;
+				const wrapped = walker.nextNode();
+				if (!wrapped) return null;
+				candidate = wrapped;
+			}
+			if (candidate === startItem) return null;
+		}
+	}
+	function handle(key, currentItem) {
+		if (searchTimeout !== void 0) clearTimeout(searchTimeout);
+		searchString += key.toLowerCase();
+		searchTimeout = setTimeout(reset, SEARCH_TIMEOUT);
+		return match(currentItem);
+	}
+	function rematch(currentItem) {
+		return match(currentItem);
+	}
+	return {
+		handle,
+		rematch,
+		reset
+	};
+}
+//#endregion
+export { createTypeahead };

package/_internal/utils/ClickAway/ClickAwayProvider.d.ts

@@ -0,0 +1,19 @@
+import { ClickAwayCallback } from "../../packages/lumx-core/src/js/utils/ClickAway/index.js";
+import { Ref } from "vue";
+
+//#region src/utils/ClickAway/ClickAwayProvider.d.ts
+/**
+ * Component combining click away detection with Vue's provide/inject to hook into the component tree
+ * and take into account both the DOM tree and the component tree to detect click away.
+ */
+declare const ClickAwayProvider: import("vue").DefineSetupFnComponent<{
+  callback: ClickAwayCallback;
+  childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;
+  parentRef?: Ref<HTMLElement | undefined>;
+}, {}, {}, {
+  callback: ClickAwayCallback;
+  childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;
+  parentRef?: Ref<HTMLElement | undefined>;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { ClickAwayProvider };

package/_internal/utils/ClickAway/ClickAwayProvider.js

@@ -0,0 +1,58 @@
+import { setupClickAway } from "../../packages/lumx-core/src/js/utils/ClickAway/index.js";
+import { defineComponent, inject, onBeforeUnmount, onMounted, provide } from "vue";
+//#region src/utils/ClickAway/ClickAwayProvider.tsx
+var CLICK_AWAY_KEY = Symbol("LumxClickAway");
+/**
+* Component combining click away detection with Vue's provide/inject to hook into the component tree
+* and take into account both the DOM tree and the component tree to detect click away.
+*/
+var ClickAwayProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const parentContext = inject(CLICK_AWAY_KEY, null);
+	const contextChildrenRefs = /* @__PURE__ */ new Set();
+	const currentContext = {
+		childrenRefs: contextChildrenRefs,
+		addRefs(...newChildrenRefs) {
+			for (const newRef of newChildrenRefs) if (!contextChildrenRefs.has(newRef)) contextChildrenRefs.add(newRef);
+			if (parentContext) {
+				parentContext.addRefs(...newChildrenRefs);
+				if (props.parentRef) parentContext.addRefs(props.parentRef);
+			}
+		}
+	};
+	provide(CLICK_AWAY_KEY, currentContext);
+	let teardown;
+	onMounted(() => {
+		const refs = props.childrenRefs.value;
+		if (refs) currentContext.addRefs(...refs);
+		teardown = setupClickAway(() => Array.from(contextChildrenRefs).map((r) => r.value).filter((el) => el instanceof HTMLElement), (event) => {
+			const cb = props.callback;
+			if (typeof cb === "function") cb(event);
+		});
+	});
+	onBeforeUnmount(() => {
+		teardown?.();
+	});
+	return () => slots.default?.();
+}, {
+	name: "LumxClickAwayProvider",
+	props: {
+		callback: {
+			type: [
+				Function,
+				Boolean,
+				void 0
+			],
+			default: void 0
+		},
+		childrenRefs: {
+			type: Object,
+			required: true
+		},
+		parentRef: {
+			type: Object,
+			default: void 0
+		}
+	}
+});
+//#endregion
+export { ClickAwayProvider };

package/_internal/utils/ClickAway/index.d.ts

@@ -0,0 +1,2 @@
+import { ClickAwayProvider } from "./ClickAwayProvider.js";
+import { useClickAway } from "./useClickAway.js";

package/_internal/utils/ClickAway/useClickAway.d.ts

@@ -0,0 +1,25 @@
+import { ClickAwayCallback } from "../../packages/lumx-core/src/js/utils/ClickAway/index.js";
+import { Ref } from "vue";
+
+//#region src/utils/ClickAway/useClickAway.d.ts
+interface ClickAwayParameters {
+  /**
+   * A callback function to call when the user clicks away from the elements.
+   */
+  callback: ClickAwayCallback;
+  /**
+   * Elements considered within the click away context (clicking outside them will trigger the click away callback).
+   */
+  childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;
+}
+/**
+ * Listen to clicks away from the given elements and callback the passed in function.
+ *
+ * Warning: If you need to detect click away on nested Vue portals, please use the `ClickAwayProvider` component.
+ */
+declare function useClickAway({
+  callback,
+  childrenRefs
+}: ClickAwayParameters): void;
+//#endregion
+export { useClickAway };

package/_internal/utils/ClickAway/useClickAway.js

@@ -0,0 +1,25 @@
+import { setupClickAway } from "../../packages/lumx-core/src/js/utils/ClickAway/index.js";
+import { onBeforeUnmount, watchEffect } from "vue";
+//#region src/utils/ClickAway/useClickAway.ts
+/**
+* Listen to clicks away from the given elements and callback the passed in function.
+*
+* Warning: If you need to detect click away on nested Vue portals, please use the `ClickAwayProvider` component.
+*/
+function useClickAway({ callback, childrenRefs }) {
+	let teardown;
+	watchEffect(() => {
+		teardown?.();
+		const getElements = () => {
+			const refs = childrenRefs.value;
+			if (!refs) return [];
+			return refs.map((ref) => ref?.value).filter(Boolean);
+		};
+		teardown = setupClickAway(getElements, callback);
+	});
+	onBeforeUnmount(() => {
+		teardown?.();
+	});
+}
+//#endregion
+export { useClickAway };

package/_internal/utils/InfiniteScroll/InfiniteScroll.d.ts

@@ -0,0 +1,9 @@
+import { InfiniteScrollProps } from "../../packages/lumx-core/src/js/utils/InfiniteScroll/index.js";
+
+//#region src/utils/InfiniteScroll/InfiniteScroll.d.ts
+/**
+ * Handles basic callback pattern by using intersection observers.
+ */
+declare const InfiniteScroll: import("vue").DefineSetupFnComponent<InfiniteScrollProps, {}, {}, InfiniteScrollProps & {}, import("vue").PublicProps>;
+//#endregion
+export { InfiniteScroll };

package/_internal/utils/InfiniteScroll/InfiniteScroll.js

@@ -0,0 +1,23 @@
+import { keysOf } from "../VueToJSX.js";
+import { setupInfiniteScrollObserver } from "../../packages/lumx-core/src/js/utils/InfiniteScroll/setupInfiniteScrollObserver.js";
+import { InfiniteScroll as InfiniteScroll$1 } from "../../packages/lumx-core/src/js/utils/InfiniteScroll/index.js";
+import { defineComponent, ref, watchEffect } from "vue";
+//#region src/utils/InfiniteScroll/InfiniteScroll.tsx
+/**
+* Handles basic callback pattern by using intersection observers.
+*/
+var InfiniteScroll = /* @__PURE__ */ defineComponent((props) => {
+	const elementRef = ref(null);
+	watchEffect((onCleanup) => {
+		const element = elementRef.value;
+		if (!element) return;
+		onCleanup(setupInfiniteScrollObserver(element, props.callback, props.options));
+	});
+	return () => InfiniteScroll$1({ ref: elementRef });
+}, {
+	name: "LumxInfiniteScroll",
+	inheritAttrs: false,
+	props: keysOf()("callback", "options")
+});
+//#endregion
+export { InfiniteScroll as default };

package/_internal/utils/InfiniteScroll/index.d.ts

@@ -0,0 +1,2 @@
+import { InfiniteScrollProps } from "../../packages/lumx-core/src/js/utils/InfiniteScroll/index.js";
+import { InfiniteScroll } from "./InfiniteScroll.js";

package/_internal/utils/Portal/Portal.d.ts

@@ -0,0 +1,10 @@
+import { PortalProps } from "../../packages/lumx-core/src/js/utils/Portal/index.js";
+
+//#region src/utils/Portal/Portal.d.ts
+/**
+ * Render children in a portal outside the current DOM position
+ * (defaults to `document.body` but can be customized with the PortalProvider)
+ */
+declare const Portal: import("vue").DefineSetupFnComponent<PortalProps, {}, {}, PortalProps & {}, import("vue").PublicProps>;
+//#endregion
+export { Portal };

package/_internal/utils/Portal/Portal.js

@@ -0,0 +1,37 @@
+import { PORTAL_KEY, defaultPortalInit } from "./PortalProvider.js";
+import { Teleport, createVNode, defineComponent, inject, isVNode, onBeforeUnmount, ref, watch } from "vue";
+//#region src/utils/Portal/Portal.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Render children in a portal outside the current DOM position
+* (defaults to `document.body` but can be customized with the PortalProvider)
+*/
+var Portal = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const portalInit = inject(PORTAL_KEY, defaultPortalInit);
+	const context = ref(null);
+	const initializePortal = () => {
+		if (props.enabled) context.value = portalInit();
+		else context.value = null;
+	};
+	initializePortal();
+	watch(() => props.enabled, initializePortal);
+	onBeforeUnmount(() => {
+		context.value?.teardown?.();
+	});
+	return () => {
+		const content = slots.default?.();
+		const container = context.value?.container;
+		if (!props.enabled || !container) return content;
+		return createVNode(Teleport, { "to": container }, _isSlot(content) ? content : { default: () => [content] });
+	};
+}, {
+	name: "LumxPortal",
+	props: { enabled: {
+		type: Boolean,
+		default: true
+	} }
+});
+//#endregion
+export { Portal };

package/_internal/utils/Portal/PortalProvider.d.ts

@@ -0,0 +1,8 @@
+import { PortalInit, PortalProviderProps } from "../../packages/lumx-core/src/js/utils/Portal/index.js";
+//#region src/utils/Portal/PortalProvider.d.ts
+/**
+ * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
+ */
+declare const PortalProvider: import("vue").DefineSetupFnComponent<PortalProviderProps, {}, {}, PortalProviderProps & {}, import("vue").PublicProps>;
+//#endregion
+export { PortalProvider };

package/_internal/utils/Portal/PortalProvider.js

@@ -0,0 +1,19 @@
+import { defineComponent, provide } from "vue";
+//#region src/utils/Portal/PortalProvider.tsx
+var PORTAL_KEY = Symbol("LumxPortal");
+var defaultPortalInit = () => ({ container: "body" });
+/**
+* Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
+*/
+var PortalProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	provide(PORTAL_KEY, props.value);
+	return () => slots.default?.();
+}, {
+	name: "LumxPortalProvider",
+	props: { value: {
+		type: Function,
+		required: true
+	} }
+});
+//#endregion
+export { PORTAL_KEY, PortalProvider, defaultPortalInit };

package/_internal/utils/Portal/index.d.ts

@@ -0,0 +1,3 @@
+import { PortalInit, PortalProps, PortalProviderProps } from "../../packages/lumx-core/src/js/utils/Portal/index.js";
+import { PortalProvider } from "./PortalProvider.js";
+import { Portal } from "./Portal.js";

package/_internal/utils/VueToJSX.d.ts

@@ -0,0 +1,38 @@
+import { PropsToOverride } from "@lumx/core/js/types";
+
+//#region src/utils/VueToJSX.d.ts
+/**
+ * Mirrors the value types accepted by Vue's class binding (and `normalizeClass`):
+ * a string, an object mapping class names to booleans, an array of any of the above, or falsy.
+ */
+type ClassValue = string | number | boolean | null | undefined | ClassValue[] | Record<string, unknown>;
+/**
+ * Props interface for components wrapped with VueToJSX.
+ * It omits JSX-specific props like `children` and `className` and adds Vue's `class`.
+ *
+ * @template Props - The base props type
+ * @template OmitProps - Additional props to omit beyond the defaults (children, className, ref)
+ */
+type VueToJSXProps<Props, OmitProps extends keyof Props = never> = Omit<Props, PropsToOverride | 'children' | 'className' | OmitProps> & {
+  /** Class name forwarded to the root element of the component. */class?: ClassValue;
+};
+/**
+ * Hyphenated aria-* prop keys that must NOT be declared as Vue component props.
+ * When declared, Vue normalizes them to camelCase (e.g. aria-haspopup → ariaHaspopup),
+ * which breaks hyphenated key destructuring in core component templates.
+ * By excluding them from props, they flow through `attrs` with their original hyphenated keys.
+ */
+type HyphenatedAriaProps = 'aria-expanded' | 'aria-haspopup' | 'aria-label' | 'aria-pressed';
+/**
+ * Derive the typed Vue emits map from a runtime `emitSchema` object.
+ *
+ * @example
+ * export const emitSchema = {
+ *     change: (_newValue?: unknown) => true,
+ *     search: (_text: string) => true,
+ * };
+ * export type MyEmits<O> = EmitsOf<typeof emitSchema>
+ */
+type EmitsOf<S> = { [K in keyof S]: S[K] extends ((...args: infer A) => any) ? (...args: A) => void : never };
+//#endregion
+export { ClassValue, EmitsOf, HyphenatedAriaProps, VueToJSXProps };

package/_internal/utils/VueToJSX.js

@@ -0,0 +1,11 @@
+//#region src/utils/VueToJSX.ts
+var keysOf = () => {
+	return (...keys) => {
+		return keys.reduce((acc, key) => {
+			acc[key] = { required: false };
+			return acc;
+		}, {});
+	};
+};
+//#endregion
+export { keysOf };

package/_internal/utils/isComponentType.js

@@ -0,0 +1,9 @@
+import { isVNode } from "vue";
+//#region src/utils/isComponentType.ts
+/**
+* Returns a type guard that checks whether a VNode was created from a specific component.
+* Vue equivalent of `@lumx/react/utils/type/isComponentType`.
+*/
+var isComponentType = (type) => (node) => isVNode(node) && node.type === type;
+//#endregion
+export { isComponentType };

package/_internal/utils/theme/ResetTheme.js

@@ -0,0 +1,11 @@
+import { defineComponent, provide } from "vue";
+//#region src/utils/theme/ResetTheme.ts
+var ResetTheme = defineComponent({
+	name: "ResetTheme",
+	setup(_, { slots }) {
+		provide("theme", void 0);
+		return () => slots.default?.();
+	}
+});
+//#endregion
+export { ResetTheme };

package/_internal/utils/theme/ThemeProvider.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from "@lumx/core/js/constants";
+
+//#region src/utils/theme/ThemeProvider.d.ts
+/**
+ * ThemeProvider for Vue: wraps children with `provide('theme', value)` for theme isolation.
+ * Vue's `provide()` requires a component boundary, so this is a component.
+ */
+declare const ThemeProvider: import("vue").DefineSetupFnComponent<{
+  value: Theme | undefined;
+}, {}, {}, {
+  value: Theme | undefined;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { ThemeProvider };

package/_internal/utils/theme/ThemeProvider.js

@@ -0,0 +1,18 @@
+import { computed, defineComponent, provide } from "vue";
+//#region src/utils/theme/ThemeProvider.ts
+/**
+* ThemeProvider for Vue: wraps children with `provide('theme', value)` for theme isolation.
+* Vue's `provide()` requires a component boundary, so this is a component.
+*/
+var ThemeProvider = defineComponent((props, { slots }) => {
+	provide("theme", computed(() => props.value));
+	return () => slots.default?.();
+}, {
+	name: "LumxThemeProvider",
+	props: { value: {
+		type: String,
+		default: void 0
+	} }
+});
+//#endregion
+export { ThemeProvider };

package/_internal/utils/theme/index.d.ts

@@ -0,0 +1,2 @@
+import { UseTheme, useTheme } from "./useTheme.js";
+import { ThemeProvider } from "./ThemeProvider.js";

package/_internal/utils/theme/useTheme.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from "@lumx/core/js/constants";
+import { ComputedRef } from "vue";
+
+//#region src/utils/theme/useTheme.d.ts
+interface UseTheme {
+  defaultTheme?: Theme;
+}
+/**
+ * Retrieves the globally applied theme.
+ * @returns computed theme value (auto-updates when the provided theme changes)
+ */
+declare function useTheme(options?: UseTheme): ComputedRef<Theme | undefined>;
+//#endregion
+export { UseTheme, useTheme };

package/_internal/utils/theme/useTheme.js

@@ -0,0 +1,14 @@
+import { Theme } from "@lumx/core/js/constants";
+import { computed, inject, unref } from "vue";
+//#region src/utils/theme/useTheme.ts
+/**
+* Retrieves the globally applied theme.
+* @returns computed theme value (auto-updates when the provided theme changes)
+*/
+function useTheme(options = { defaultTheme: Theme.light }) {
+	const { defaultTheme } = options;
+	const injected = inject("theme", void 0);
+	return computed(() => unref(injected) || defaultTheme);
+}
+//#endregion
+export { useTheme };

package/_internal/utils/wrapChildrenIconWithSpaces.js

@@ -0,0 +1,37 @@
+import Icon from "../components/icon/Icon.js";
+import { Fragment, createVNode, isVNode } from "vue";
+//#region src/utils/wrapChildrenIconWithSpaces.ts
+/** Force wrap spaces around icons to make sure they are never stuck against text. */
+function wrapChildrenIconWithSpaces(children) {
+	if (!children) return void 0;
+	const wrappedChildren = [];
+	for (const child of children) {
+		if (!isVNode(child)) {
+			wrappedChildren.push(child);
+			continue;
+		}
+		if (child.type === Icon) {
+			wrappedChildren.push(" ");
+			wrappedChildren.push(child);
+			wrappedChildren.push(" ");
+			continue;
+		}
+		if (child.type === Fragment && Array.isArray(child.children)) {
+			const updated = wrapChildrenIconWithSpaces(child.children);
+			if (updated) wrappedChildren.push(...updated);
+			continue;
+		}
+		if (typeof child.type === "string" && Array.isArray(child.children)) {
+			const updated = wrapChildrenIconWithSpaces(child.children);
+			const props = { ...child.props || {} };
+			if (child.key != null) props.key = child.key;
+			if (child.ref != null) props.ref = child.ref;
+			wrappedChildren.push(createVNode(child.type, props, updated));
+			continue;
+		}
+		wrappedChildren.push(child);
+	}
+	return wrappedChildren;
+}
+//#endregion
+export { wrapChildrenIconWithSpaces };