@lumx/vue 4.4.1-alpha.1 → 4.4.1-alpha.2

package/_internal/CCjQX5wE.js

@@ -0,0 +1,47 @@
+import { defineComponent as l, provide as i, inject as d, ref as f, watch as s, onBeforeUnmount as p, createVNode as P, Teleport as m, isVNode as b } from "vue";
+const u = /* @__PURE__ */ Symbol("LumxPortal"), v = () => ({
+  container: "body"
+}), j = /* @__PURE__ */ l((e, {
+  slots: n
+}) => (i(u, e.value), () => n.default?.()), {
+  name: "LumxPortalProvider",
+  props: {
+    value: {
+      type: Function,
+      required: !0
+    }
+  }
+});
+function y(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !b(e);
+}
+const L = /* @__PURE__ */ l((e, {
+  slots: n
+}) => {
+  const c = d(u, v), t = f(null), r = () => {
+    e.enabled ? t.value = c() : t.value = null;
+  };
+  return r(), s(() => e.enabled, r), p(() => {
+    t.value?.teardown?.();
+  }), () => {
+    const o = n.default?.(), a = t.value?.container;
+    return !e.enabled || !a ? o : P(m, {
+      to: a
+    }, y(o) ? o : {
+      default: () => [o]
+    });
+  };
+}, {
+  name: "LumxPortal",
+  props: {
+    enabled: {
+      type: Boolean,
+      default: !0
+    }
+  }
+});
+export {
+  L as P,
+  j as a
+};
+//# sourceMappingURL=CCjQX5wE.js.map

package/_internal/CCjQX5wE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CCjQX5wE.js","sources":["../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import { defineComponent, provide, type PropType, type InjectionKey } from 'vue';\n\nexport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\nimport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\n\nexport const PORTAL_KEY: InjectionKey<PortalInit> = Symbol('LumxPortal');\n\nexport const defaultPortalInit: PortalInit = () => ({ container: 'body' });\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider = defineComponent(\n    (props: PortalProviderProps, { slots }) => {\n        provide(PORTAL_KEY, props.value);\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxPortalProvider',\n        props: {\n            value: {\n                type: Function as PropType<PortalInit>,\n                required: true,\n            },\n        },\n    },\n);\n","import { defineComponent, inject, onBeforeUnmount, Teleport, ref, watch } from 'vue';\nimport { PORTAL_KEY, defaultPortalInit } from './PortalProvider';\n\nexport type { PortalProps } from '@lumx/core/js/utils/Portal';\nimport type { PortalProps } from '@lumx/core/js/utils/Portal';\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalProvider)\n */\nexport const Portal = defineComponent(\n    (props: PortalProps, { slots }) => {\n        const portalInit = inject(PORTAL_KEY, defaultPortalInit);\n        const context = ref<ReturnType<typeof portalInit> | null>(null);\n\n        // Initialize portal context when enabled\n        const initializePortal = () => {\n            if (props.enabled) {\n                context.value = portalInit();\n            } else {\n                context.value = null;\n            }\n        };\n\n        // Initialize on mount and when enabled changes\n        initializePortal();\n        watch(() => props.enabled, initializePortal);\n\n        // Register teardown on unmount\n        onBeforeUnmount(() => {\n            context.value?.teardown?.();\n        });\n\n        return () => {\n            const content = slots.default?.();\n            const container = context.value?.container;\n\n            // If disabled or no container, render inline\n            if (!props.enabled || !container) {\n                return content;\n            }\n\n            // Render in portal using Teleport\n            return <Teleport to={container}>{content}</Teleport>;\n        };\n    },\n    {\n        name: 'LumxPortal',\n        props: {\n            enabled: {\n                type: Boolean,\n                default: true,\n            },\n        },\n    },\n);\n"],"names":["PORTAL_KEY","Symbol","defaultPortalInit","container","PortalProvider","props","slots","provide","value","default","name","type","Function","required","_isSlot","s","Object","prototype","toString","call","_isVNode","Portal","portalInit","inject","context","ref","initializePortal","enabled","watch","onBeforeUnmount","teardown","content","_createVNode","Teleport","Boolean"],"mappings":";AAKO,MAAMA,IAAuCC,uBAAO,YAAY,GAE1DC,IAAgCA,OAAO;AAAA,EAAEC,WAAW;AAAO,IAK3DC,sBACT,CAACC,GAA4B;AAAA,EAAEC,OAAAA;AAAM,OACjCC,EAAQP,GAAYK,EAAMG,KAAK,GACxB,MAAMF,EAAMG,UAAO,IAE9B;AAAA,EACIC,MAAM;AAAA,EACNL,OAAO;AAAA,IACHG,OAAO;AAAA,MACHG,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACd;AAAA,EACJ;AACJ,CACJ;ACzBiE,SAAAC,EAAAC,GAAA;AAAA,SAAA,OAAAA,KAAA,cAAAC,OAAAC,UAAAC,SAAAC,KAAAJ,CAAA,MAAA,qBAAA,CAAAK,EAAAL,CAAA;AAAA;MASpDM,sBACT,CAAChB,GAAoB;AAAA,EAAEC,OAAAA;AAAM,MAAM;AAC/B,QAAMgB,IAAaC,EAAOvB,GAAYE,CAAiB,GACjDsB,IAAUC,EAA0C,IAAI,GAGxDC,IAAmBA,MAAM;AAC3B,IAAIrB,EAAMsB,UACNH,EAAQhB,QAAQc,EAAU,IAE1BE,EAAQhB,QAAQ;AAAA,EAExB;AAGAkB,SAAAA,EAAgB,GAChBE,EAAM,MAAMvB,EAAMsB,SAASD,CAAgB,GAG3CG,EAAgB,MAAM;AAClBL,IAAAA,EAAQhB,OAAOsB,WAAQ;AAAA,EAC3B,CAAC,GAEM,MAAM;AACT,UAAMC,IAAUzB,EAAMG,UAAO,GACvBN,IAAYqB,EAAQhB,OAAOL;AAGjC,WAAI,CAACE,EAAMsB,WAAW,CAACxB,IACZ4B,IAIXC,EAAAC,GAAA;AAAA,MAAA,IAAqB9B;AAAAA,IAAS,GAAAW,EAAGiB,CAAO,IAAPA,IAAO;AAAA,MAAAtB,SAAAA,MAAA,CAAPsB,CAAO;AAAA,IAAA,CAAA;AAAA,EAC5C;AACJ,GACA;AAAA,EACIrB,MAAM;AAAA,EACNL,OAAO;AAAA,IACHsB,SAAS;AAAA,MACLhB,MAAMuB;AAAAA,MACNzB,SAAS;AAAA,IACb;AAAA,EACJ;AACJ,CACJ;"}

package/components/button/IconButton.d.ts

@@ -1,6 +1,15 @@
 import { IconButtonProps as UIProps } from '@lumx/core/js/components/Button/IconButton';
+import { TooltipProps } from '../tooltip/Tooltip';
 import { VueToJSXProps } from '../../utils/VueToJSX';
-export type IconButtonProps = VueToJSXProps<UIProps>;
+export type IconButtonProps = VueToJSXProps<UIProps> & {
+    /**
+     * Props to pass to the tooltip.
+     * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
+     */
+    tooltipProps?: Partial<TooltipProps>;
+    /** Whether the tooltip should be hidden or not. */
+    hideTooltip?: boolean;
+};
 export declare const emitSchema: {
     click: (event: MouseEvent) => boolean;
 };
@@ -14,6 +23,14 @@ declare const IconButton: import('vue').DefineSetupFnComponent<IconButtonProps,
     click: (event: MouseEvent) => boolean;
 }, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
     class?: string;
+} & {
+    /**
+     * Props to pass to the tooltip.
+     * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
+     */
+    tooltipProps?: Partial<TooltipProps>;
+    /** Whether the tooltip should be hidden or not. */
+    hideTooltip?: boolean;
 } & {
     onClick?: ((event: MouseEvent) => any) | undefined;
 }, import('vue').PublicProps>;

package/components/button/index.d.ts

@@ -1,7 +1,6 @@
-import { IconButtonProps } from '@lumx/core/js/components/Button/IconButton';
 import { ButtonGroupProps } from '@lumx/core/js/components/Button/ButtonGroup';
 import { default as Button, ButtonProps } from './Button';
-import { default as IconButton } from './IconButton';
+import { default as IconButton, IconButtonProps } from './IconButton';
 import { default as ButtonGroup } from './ButtonGroup';
 export { Button, ButtonGroup, IconButton };
 export type { ButtonProps, ButtonGroupProps, IconButtonProps };

package/components/grid-column/index.d.ts

@@ -1,3 +1,2 @@
 export { default as GridColumn } from './GridColumn';
 export type { GridColumnProps, GridColumnGapSize } from './GridColumn';
-export { CLASSNAME as GRID_COLUMN_CLASSNAME, COMPONENT_NAME as GRID_COLUMN_COMPONENT_NAME } from './GridColumn';

package/components/progress/index.d.ts

@@ -1,6 +1,4 @@
 export { default as ProgressCircular } from './ProgressCircular';
 export type { ProgressCircularProps, ProgressCircularSize } from './ProgressCircular';
-export { CLASSNAME as PROGRESS_CIRCULAR_CLASSNAME, COMPONENT_NAME as PROGRESS_CIRCULAR_COMPONENT_NAME } from './ProgressCircular';
 export { default as ProgressLinear } from './ProgressLinear';
 export type { ProgressLinearProps } from './ProgressLinear';
-export { CLASSNAME as PROGRESS_LINEAR_CLASSNAME, COMPONENT_NAME as PROGRESS_LINEAR_COMPONENT_NAME } from './ProgressLinear';

package/components/switch/index.d.ts

@@ -1,3 +1,2 @@
 export { default as Switch } from './Switch';
 export type { SwitchProps } from './Switch';
-export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from './Switch';

package/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import { TooltipProps as CoreTooltipProps, TooltipPlacement } from '@lumx/core/js/components/Tooltip';
+export type { TooltipPlacement };
+/**
+ * Defines the props of the component.
+ */
+export interface TooltipProps extends CoreTooltipProps {
+    /** Class name forwarded to the tooltip popup */
+    class?: string;
+}
+/**
+ * Vue Tooltip component.
+ * Wraps the shared core TooltipPopup with Vue-specific Floating UI, Portal, and slot injection.
+ */
+export declare const Tooltip: import('vue').DefineSetupFnComponent<TooltipProps, {}, {}, TooltipProps & {}, import('vue').PublicProps>;

package/components/tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,51 @@
+declare const _default: {
+    component: any;
+    argTypes: {
+        placement: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: string[];
+            mapping: Record<string, string> | undefined;
+        };
+        children: {
+            control: boolean;
+        };
+        closeMode: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
+        ariaLinkMode: {
+            control: {
+                type: "inline-radio";
+            };
+            options: readonly ["aria-describedby", "aria-labelledby"];
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    title: string;
+};
+export default _default;
+export declare const OnAButton: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const OnADisabledButton: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ForceOpen: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        forceOpen: boolean;
+    };
+};
+export declare const CloseModeHide: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        closeMode: string;
+    };
+};
+export declare const MultilineTooltip: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};

package/components/tooltip/Tooltip.test.stories.d.ts

@@ -0,0 +1,63 @@
+declare const _default: {
+    component: any;
+    tags: string[];
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const TestActivateOnHover: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        label: string;
+    };
+    play({ canvas, userEvent }: any): Promise<void>;
+};
+export declare const TestHoverAnchorThenTooltip: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        label: string;
+    };
+    play({ canvas, userEvent }: any): Promise<void>;
+};
+export declare const TestFocusVisibleAndEscape: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        label: string;
+    };
+    play({ canvas, userEvent }: any): Promise<void>;
+};
+export declare const TestNoActivateOnClickFocus: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        label: string;
+    };
+    play({ canvas, userEvent }: any): Promise<void>;
+};
+export declare const TestCloseModeHide: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        label: string;
+        closeMode: string;
+    };
+    play({ canvas, userEvent }: any): Promise<void>;
+};
+export declare const TestAriaDescribedByOnHover: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    play({ canvas, userEvent }: any): Promise<void>;
+};
+export declare const TestAriaDescribedByOnWrapperHover: {
+    render(props: any): import("vue/jsx-runtime").JSX.Element;
+    play({ canvasElement, userEvent }: any): Promise<void>;
+};
+export declare const TestAriaLabelledByOnHover: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    play({ canvas, userEvent }: any): Promise<void>;
+};
+export declare const TestAriaLabelledByOnWrapperHover: {
+    render(props: any): import("vue/jsx-runtime").JSX.Element;
+    play({ canvasElement, userEvent }: any): Promise<void>;
+};

package/components/tooltip/context.d.ts

@@ -0,0 +1,13 @@
+/** Empty object used as marker context value */
+type TooltipContextValue = NonNullable<unknown>;
+/**
+ * Provide tooltip context marker to child components.
+ * Used to detect when a component is inside a tooltip (e.g., to prevent nested tooltips).
+ */
+export declare function provideTooltipContext(): void;
+/**
+ * Inject tooltip context marker.
+ * Returns the context value if inside a tooltip, undefined otherwise.
+ */
+export declare function useTooltipContext(): TooltipContextValue | undefined;
+export {};

package/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip, type TooltipProps, type TooltipPlacement } from './Tooltip';

package/components/tooltip/useInjectTooltipRef.d.ts

@@ -0,0 +1,22 @@
+import { VNode } from 'vue';
+interface Options {
+    /** Slot content (default slot VNodes) */
+    slotContent: VNode[] | undefined;
+    /** Set tooltip anchor element */
+    setAnchorElement: (el: HTMLElement | null) => void;
+    /** Whether the tooltip is mounted */
+    isMounted: boolean;
+    /** Tooltip id */
+    id: string;
+    /** Tooltip label */
+    label?: string | null | false;
+    /** Choose how the tooltip text should link to the anchor */
+    ariaLinkMode: 'aria-describedby' | 'aria-labelledby';
+}
+/**
+ * Inject ref and ARIA attributes into tooltip anchor slot content.
+ * - For a single non-disabled element slot: clone with injected ref and ARIA attributes.
+ * - For text/fragment/multiple children/disabled elements: wrap in a div.
+ */
+export declare function useInjectTooltipRef(options: Options): VNode;
+export {};

package/components/tooltip/useTooltipOpen.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+import { TooltipOpenManager } from '@lumx/core/js/components/Tooltip/tooltipOpenManager';
+/**
+ * Vue composable controlling tooltip visibility using mouse hover the anchor and delay.
+ *
+ * @param delay         Delay in millisecond to display the tooltip.
+ * @param anchorElement Tooltip anchor element ref.
+ * @return whether or not to show the tooltip plus popper mount callback and manager ref.
+ */
+export declare function useTooltipOpen(delay: Ref<number | undefined>, anchorElement: Ref<HTMLElement | null>): {
+    isOpen: Ref<boolean, boolean>;
+    onPopperMount: (el: HTMLElement | null) => void;
+    manager: import('vue').ShallowRef<TooltipOpenManager | undefined, TooltipOpenManager | undefined>;
+};

package/composables/useCallbackOnEscape.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue';
+/**
+ * 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)
+ */
+export declare function useCallbackOnEscape(callbackRef: Ref<(() => void) | undefined> | (() => void) | undefined, closeOnEscapeRef?: Ref<boolean> | boolean): void;

package/index.d.ts

@@ -22,3 +22,4 @@ export * from './components/table';
 export * from './components/text';
 export * from './components/thumbnail';
 export * from './components/toolbar';
+export * from './components/tooltip';