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

package/stories/decorators/withChromaticForceScreenSize.d.ts

@@ -1,2 +0,0 @@
-/** Story decorator used to force a minimum screen size when running in chromatic */
-export declare const withChromaticForceScreenSize: () => (story: any) => any;

package/stories/decorators/withCombinations.d.ts

@@ -1,6 +0,0 @@
-import { CombinationsOptions } from '@lumx/core/stories/utils/combinations';
-export type { CombinationsOptions, Combination, PropEntry } from '@lumx/core/stories/utils/combinations';
-/**
- * SB decorator generating a tables of combination of props (max 3 levels of props)
- */
-export declare const withCombinations: (options: CombinationsOptions) => (story: any, ctx: any) => () => import("vue/jsx-runtime").JSX.Element;

package/stories/decorators/withNestedProps.d.ts

@@ -1,10 +0,0 @@
-/**
- * Convert flattened props into nested props
- *
- * @example: toNestedProps({ 'foo.bar': 4 }) => { foo: { bar: 4 } }
- */
-export declare function toNestedProps(flattenedProps: Record<string, any>): Record<string, any>;
-/**
- * SB decorator converting args from flattened props to nested props
- */
-export declare const withNestedProps: () => (story: any, context: any) => any;

package/stories/decorators/withResizableBox.d.ts

@@ -1,12 +0,0 @@
-/** Storybook decorator wrapping story in a resizable box  */
-export declare const withResizableBox: ({ width, height, ...style }?: {
-    width?: string;
-    height?: string;
-    [key: string]: any;
-}) => (story: any, context: any) => {
-    setup(): {
-        as: string | object;
-        overriddenProps: any;
-    };
-    template: string;
-};

package/stories/decorators/withThemedBackground.d.ts

@@ -1,12 +0,0 @@
-/**
- * SB decorator adding a background adapted to the current theme.
- */
-export declare const withThemedBackground: () => (story: any, { args }: any) => {
-    setup(): {
-        wrapperStyle: {
-            backgroundColor: string;
-            padding: string;
-        };
-    };
-    template: string;
-};

package/stories/decorators/withTheming.d.ts

@@ -1,26 +0,0 @@
-import { ThemeVariablesOptions } from '@lumx/core/stories/utils/themeVariables';
-export type { ThemeVariablesOptions, PropertyTree, Entry, Variables } from '@lumx/core/stories/utils/themeVariables';
-/**
- * Storybook decorator for theming CSS custom properties (Vue version).
- * Allows interactive editing of design tokens via an "Edit variables" panel.
- *
- * @param options - Configuration object with properties tree and initial values
- * @returns Storybook decorator function
- *
- * @example
- * import pick from 'lodash/pick';
- * import { DESIGN_TOKENS } from '@lumx/core/js/constants/_internal/design-tokens';
- *
- * export const Theming = {
- *     decorators: [
- *         withTheming({
- *             properties: pick(DESIGN_TOKENS, ['chip']),
- *             values: `
- *                 --lumx-chip-emphasis-selected-state-default-theme-light-border-color: red;
- *                 --lumx-chip-emphasis-selected-state-hover-theme-light-border-color: blue;
- *             `,
- *         }),
- *     ],
- * };
- */
-export declare function withTheming(options: ThemeVariablesOptions): (story: any, ctx: any) => () => import("vue/jsx-runtime").JSX.Element;

package/stories/decorators/withValueOnChange.d.ts

@@ -1,12 +0,0 @@
-/**
- * SB decorator managing a local reactive state for a value prop,
- * updating it via the onChange callback.
- *
- * This is the Vue equivalent of the React withValueOnChange decorator.
- */
-export declare const withValueOnChange: ({ valueProp, valueTransform, onChangeProp, valueExtract, }?: {
-    valueProp?: string;
-    valueTransform?: (v: any) => any;
-    onChangeProp?: string;
-    valueExtract?: (v: any) => any;
-}) => (story: any, ctx: any) => () => any;

package/stories/decorators/withWrapper.d.ts

@@ -1,10 +0,0 @@
-/**
- * SB decorator adding a wrapping div around the story
- */
-export declare const withWrapper: (props?: Record<string, any>, as?: string | object) => (story: any, context: any) => {
-    setup(): {
-        as: string | object;
-        overriddenProps: any;
-    };
-    template: string;
-};

package/stories/utils/CustomLink.vue.d.ts

@@ -1,29 +0,0 @@
-/**
- * Example custom link that can be used in linkAs props.
- */
-type __VLS_Props = {
-    to?: string;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        linkRef: HTMLAnchorElement;
-    };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
-    linkRef: import('vue').Ref<HTMLAnchorElement | undefined, HTMLAnchorElement | undefined>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    linkRef: HTMLAnchorElement;
-}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/stories/utils/useAttrsWithoutHandlers.d.ts

@@ -1,27 +0,0 @@
-import { ComputedRef } from 'vue';
-/**
- * Returns attrs with all event handler props filtered out.
- * Event handlers are identified as props that start with "on" AND are functions.
- * This is useful in story components where event handlers are managed via props
- * instead of being passed through attrs.
- *
- * Non-function props starting with "on" (like "online", "onboarding") are NOT filtered out.
- *
- * @returns Computed ref containing attrs without event handlers
- *
- * @example
- * ```vue
- * <script setup lang="ts">
- * import { useAttrsWithoutHandlers } from '@lumx/vue/stories/utils/useAttrsWithoutHandlers';
- *
- * const attrs = useAttrsWithoutHandlers();
- * </script>
- *
- * <template>
- *   <Button v-bind="attrs" @click="handleClick">
- *     <slot />
- *   </Button>
- * </template>
- * ```
- */
-export declare const useAttrsWithoutHandlers: () => ComputedRef<any>;

package/stories/utils/withRender.d.ts

@@ -1,54 +0,0 @@
-/**
- * Generate a template string for Storybook stories.
- *
- * @param componentName - The name of the Vue component (e.g., 'DefaultVue')
- * @param slot - Optional slot content (e.g., '{{ args.children }}', '{{ args.label }}')
- * @returns Template string for use in story render functions
- *
- * @example
- * // Self-closing component (no slot)
- * withTemplate('IconButtonBaseVue')
- * // Returns: '<IconButtonBaseVue v-bind="args" />'
- *
- * @example
- * // Component with children slot
- * withTemplate('DefaultVue', '{{ args.children }}')
- * // Returns: '<DefaultVue v-bind="args">{{ args.children }}</DefaultVue>'
- *
- * @example
- * // Component with label slot
- * withTemplate('DefaultVue', '{{ args.label }}')
- * // Returns: '<DefaultVue v-bind="args">{{ args.label }}</DefaultVue>'
- */
-export declare const withTemplate: (componentName: string, slot?: string) => string;
-/**
- * Generate a complete render function for Storybook stories.
- *
- * @param component - Object with component name as key and component as value (e.g., { DefaultVue })
- * @param slot - Optional slot content (e.g., '{{ args.children }}', '{{ args.label }}')
- * @returns Render function for use in story definitions
- *
- * @example
- * // Self-closing component (no slot)
- * import IconButtonBaseVue from './Stories/IconButtonBase.vue';
- * render: withRender({ IconButtonBaseVue })
- *
- * @example
- * // Component with children slot
- * import DefaultVue from './Stories/Default.vue';
- * render: withRender({ DefaultVue }, '{{ args.children }}')
- *
- * @example
- * // Component with label slot
- * import DefaultVue from './Stories/Default.vue';
- * render: withRender({ DefaultVue }, '{{ args.label }}')
- */
-export declare const withRender: (component: Record<string, any>, slot?: string) => (args: any) => {
-    components: {
-        [x: string]: any;
-    };
-    setup(): {
-        args: any;
-    };
-    template: string;
-};

package/utils/ClickAway/ClickAwayProvider.d.ts

@@ -1,21 +0,0 @@
-import { InjectionKey, Ref } from 'vue';
-import { ClickAwayCallback } from '@lumx/core/js/utils/ClickAway';
-interface ContextValue {
-    childrenRefs: Set<Ref<HTMLElement | undefined>>;
-    addRefs(...newChildrenRefs: Array<Ref<HTMLElement | undefined>>): void;
-}
-export declare const CLICK_AWAY_KEY: InjectionKey<ContextValue>;
-/**
- * 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.
- */
-export 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>;
-export {};

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

@@ -1,25 +0,0 @@
-declare const _default: {
-    component: any;
-    parameters: {
-        chromatic: {
-            disable: boolean;
-        };
-    };
-    tags: string[];
-    title: string;
-};
-export default _default;
-export declare const NestedClickAway: {
-    render: () => import("vue/jsx-runtime").JSX.Element;
-};
-export declare const InShadowDOM: {
-    render: () => import("vue/jsx-runtime").JSX.Element;
-};
-export declare const TestClickAwayCloses: {
-    render: () => import("vue/jsx-runtime").JSX.Element;
-    play(): Promise<void>;
-};
-export declare const TestNestedClickAway: {
-    render: () => import("vue/jsx-runtime").JSX.Element;
-    play(): Promise<void>;
-};

package/utils/ClickAway/index.d.ts

@@ -1,2 +0,0 @@
-export { ClickAwayProvider } from './ClickAwayProvider';
-export { useClickAway } from './useClickAway';

package/utils/ClickAway/useClickAway.d.ts

@@ -1,18 +0,0 @@
-import { Ref } from 'vue';
-import { ClickAwayCallback } from '@lumx/core/js/utils/ClickAway';
-export 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.
- */
-export declare function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void;

package/utils/InfiniteScroll/InfiniteScroll.d.ts

@@ -1,7 +0,0 @@
-import { InfiniteScrollProps } from '@lumx/core/js/utils/InfiniteScroll';
-export type { InfiniteScrollProps };
-/**
- * Handles basic callback pattern by using intersection observers.
- */
-export declare const InfiniteScroll: import('vue').DefineSetupFnComponent<InfiniteScrollProps, {}, {}, InfiniteScrollProps & {}, import('vue').PublicProps>;
-export default InfiniteScroll;

package/utils/InfiniteScroll/InfiniteScroll.test.stories.d.ts

@@ -1,39 +0,0 @@
-declare const _default: {
-    component: any;
-    tags: string[];
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-    args: {
-        callback: () => void;
-    };
-    title: string;
-};
-export default _default;
-export declare const TestRendersSentinelDiv: {
-    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
-    play({ canvasElement }: any): Promise<void>;
-};
-export declare const TestDetectsScrollEnd: {
-    render: ({ callback }: any) => import("vue/jsx-runtime").JSX.Element;
-    args: {
-        callback: import('storybook/test').Mock<(...args: any[]) => any>;
-    };
-    play({ canvas, args }: any): Promise<void>;
-};
-export declare const TestNoCallbackWithoutScroll: {
-    render: ({ callback }: any) => import("vue/jsx-runtime").JSX.Element;
-    args: {
-        callback: import('storybook/test').Mock<(...args: any[]) => any>;
-    };
-    play({ canvas, args }: any): Promise<void>;
-};
-export declare const TestRetriggersOnSubsequentScrolls: {
-    render: ({ callback }: any) => import("vue/jsx-runtime").JSX.Element;
-    args: {
-        callback: import('storybook/test').Mock<(...args: any[]) => any>;
-    };
-    play({ canvas, args }: any): Promise<void>;
-};

package/utils/InfiniteScroll/index.d.ts

@@ -1 +0,0 @@
-export { default as InfiniteScroll, type InfiniteScrollProps } from './InfiniteScroll';

package/utils/Portal/Portal.d.ts

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

package/utils/Portal/PortalProvider.d.ts

@@ -1,9 +0,0 @@
-import { InjectionKey } from 'vue';
-import { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';
-export type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';
-export declare const PORTAL_KEY: InjectionKey<PortalInit>;
-export declare const defaultPortalInit: PortalInit;
-/**
- * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
- */
-export declare const PortalProvider: import('vue').DefineSetupFnComponent<PortalProviderProps, {}, {}, PortalProviderProps & {}, import('vue').PublicProps>;

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

@@ -1,19 +0,0 @@
-declare const _default: {
-    component: any;
-    args: {
-        enabled: boolean;
-    };
-    parameters: {
-        chromatic: {
-            disable: boolean;
-        };
-    };
-    tags: string[];
-    title: string;
-};
-export default _default;
-export declare const RenderInShadowDOM: {
-    render: ({ enabled }: {
-        enabled: boolean;
-    }) => import("vue/jsx-runtime").JSX.Element;
-};

package/utils/Portal/index.d.ts

@@ -1,2 +0,0 @@
-export { type PortalInit, PortalProvider, type PortalProviderProps } from './PortalProvider';
-export { type PortalProps, Portal } from './Portal';

package/utils/VueToJSX.d.ts

@@ -1,40 +0,0 @@
-import { PropsToOverride } from '@lumx/core/js/types';
-/**
- * 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.
- */
-export 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)
- */
-export 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.
- */
-export type HyphenatedAriaProps = 'aria-expanded' | 'aria-haspopup' | 'aria-label' | 'aria-pressed';
-export declare const keysOf: <T>() => <K extends readonly (keyof T)[]>(...keys: [keyof T] extends [K[number]] ? K : [Error: "\u274C Missing keys in your list:", Exclude<keyof T, K[number]>]) => Record<K[number], {
-    required: false;
-}>;
-/**
- * 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>
- */
-export type EmitsOf<S> = {
-    [K in keyof S]: S[K] extends (...args: infer A) => any ? (...args: A) => void : never;
-};

package/utils/action-area/ActionArea.stories.d.ts

@@ -1,28 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const CardExample: {
-    render: ({ "data-lumx-hover": hover, "data-lumx-active": active, "data-focus-visible-added": focused, focusStyle, theme, hasOverlay, }: any) => import("vue/jsx-runtime").JSX.Element;
-    argTypes: {
-        onClick: {
-            action: boolean;
-        };
-        hasOverlay: {
-            control: string;
-        };
-        focusStyle: {
-            control: {
-                type: string;
-            };
-            options: (string | undefined)[];
-        };
-    };
-};
-export declare const OverlayStates: {
-    render: ({ "data-lumx-hover": hover, "data-lumx-active": active, "data-focus-visible-added": focused, focusStyle, theme, hasOverlay, }: any) => import("vue/jsx-runtime").JSX.Element;
-    args: {
-        hasOverlay: boolean;
-    };
-    decorators: ((story: any, context: any) => any)[];
-};

package/utils/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/ClickAway/useClickAway.ts"],"sourcesContent":["import { onBeforeUnmount, watchEffect, type Ref } from 'vue';\nimport { setupClickAway, type ClickAwayCallback } from '@lumx/core/js/utils/ClickAway';\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: ClickAwayCallback;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested Vue portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    let teardown: (() => void) | undefined;\n\n    watchEffect(() => {\n        // Clean up previous listener\n        teardown?.();\n\n        const getElements = () => {\n            const refs = childrenRefs.value;\n            if (!refs) return [];\n            return refs.map((ref) => ref?.value).filter(Boolean) as HTMLElement[];\n        };\n\n        teardown = setupClickAway(getElements, callback);\n    });\n\n    onBeforeUnmount(() => {\n        teardown?.();\n    });\n}\n"],"names":["useClickAway","callback","childrenRefs","teardown","watchEffect","setupClickAway","refs","ref","onBeforeUnmount"],"mappings":";;;AAmBO,SAASA,EAAa,EAAE,UAAAC,GAAU,cAAAC,KAA2C;AAChF,MAAIC;AAEJ,EAAAC,EAAY,MAAM;AAEd,IAAAD,IAAA,GAQAA,IAAWE,EANS,MAAM;AACtB,YAAMC,IAAOJ,EAAa;AAC1B,aAAKI,IACEA,EAAK,IAAI,CAACC,MAAQA,GAAK,KAAK,EAAE,OAAO,OAAO,IADjC,CAAA;AAAA,IAEtB,GAEuCN,CAAQ;AAAA,EACnD,CAAC,GAEDO,EAAgB,MAAM;AAClB,IAAAL,IAAA;AAAA,EACJ,CAAC;AACL;"}

package/utils/isComponentType.d.ts

@@ -1,6 +0,0 @@
-import { Component, VNode } from 'vue';
-/**
- * Returns a type guard that checks whether a VNode was created from a specific component.
- * Vue equivalent of `@lumx/react/utils/type/isComponentType`.
- */
-export declare const isComponentType: (type: Component) => (node: unknown) => node is VNode;

package/utils/theme/ResetTheme.d.ts

@@ -1,3 +0,0 @@
-export declare const ResetTheme: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/utils/theme/ThemeProvider.d.ts

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

package/utils/theme/index.d.ts

@@ -1,3 +0,0 @@
-export { useTheme, type UseTheme } from './useTheme';
-export { ThemeProvider } from './ThemeProvider';
-export { ResetTheme } from './ResetTheme';

package/utils/theme/useTheme.d.ts

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

package/utils/wrapChildrenIconWithSpaces.d.ts

@@ -1,3 +0,0 @@
-import { VNodeArrayChildren } from 'vue';
-/** Force wrap spaces around icons to make sure they are never stuck against text. */
-export declare function wrapChildrenIconWithSpaces(children: VNodeArrayChildren | undefined): VNodeArrayChildren | undefined;