@lumx/vue 4.11.0-next.2 → 4.11.0-next.3

package/components/dialog/Dialog.d.ts

@@ -0,0 +1,66 @@
+import { Ref } from 'vue';
+import { BaseDialogProps, DialogSizes } from '@lumx/core/js/components/Dialog';
+import { GenericProps, HasCloseMode } from '@lumx/core/js/types';
+export type DialogProps = Pick<BaseDialogProps, 'forceFooterDivider' | 'forceHeaderDivider' | 'isLoading'> & HasCloseMode & {
+    /** Additional class name. */
+    class?: string;
+    /** Whether the dialog is open. */
+    isOpen?: boolean;
+    /** Size variant. */
+    size?: DialogSizes;
+    /** Z-axis position. */
+    zIndex?: number;
+    /** Additional props for the dialog container element. */
+    dialogProps?: GenericProps;
+    /** Reference to the parent element that triggered modal opening (gets focus back on close). */
+    parentElement?: HTMLElement;
+    /** Element that should receive focus when the dialog opens. By default the first focusable child. */
+    focusElement?: HTMLElement;
+    /** Reference to the dialog content element. */
+    contentRef?: Ref<HTMLDivElement>;
+    /** Whether to keep the dialog open on clickaway or escape press. */
+    preventAutoClose?: boolean;
+    /** Whether to keep the dialog open on escape press. */
+    preventCloseOnEscape?: boolean;
+    /** Whether to keep the dialog open on clickaway. */
+    preventCloseOnClick?: boolean;
+    /** Whether to disable body scroll when the dialog is open. */
+    disableBodyScroll?: boolean;
+};
+export declare const emitSchema: {
+    close: () => boolean;
+    visibilityChange: (isVisible: boolean) => boolean;
+};
+declare const Dialog: import('vue').DefineSetupFnComponent<DialogProps, {
+    close: () => boolean;
+    visibilityChange: (isVisible: boolean) => boolean;
+}, {}, Pick<BaseDialogProps, "isLoading" | "forceFooterDivider" | "forceHeaderDivider"> & HasCloseMode & {
+    /** Additional class name. */
+    class?: string;
+    /** Whether the dialog is open. */
+    isOpen?: boolean;
+    /** Size variant. */
+    size?: DialogSizes;
+    /** Z-axis position. */
+    zIndex?: number;
+    /** Additional props for the dialog container element. */
+    dialogProps?: GenericProps;
+    /** Reference to the parent element that triggered modal opening (gets focus back on close). */
+    parentElement?: HTMLElement;
+    /** Element that should receive focus when the dialog opens. By default the first focusable child. */
+    focusElement?: HTMLElement;
+    /** Reference to the dialog content element. */
+    contentRef?: Ref<HTMLDivElement>;
+    /** Whether to keep the dialog open on clickaway or escape press. */
+    preventAutoClose?: boolean;
+    /** Whether to keep the dialog open on escape press. */
+    preventCloseOnEscape?: boolean;
+    /** Whether to keep the dialog open on clickaway. */
+    preventCloseOnClick?: boolean;
+    /** Whether to disable body scroll when the dialog is open. */
+    disableBodyScroll?: boolean;
+} & {
+    onClose?: (() => any) | undefined;
+    onVisibilityChange?: ((isVisible: boolean) => any) | undefined;
+}, import('vue').PublicProps>;
+export default Dialog;

package/components/dialog/Dialog.stories.d.ts

@@ -0,0 +1,106 @@
+declare const _default: {
+    component: any;
+    render: any;
+    parameters: {
+        chromatic: {
+            pauseAnimationAtEnd: boolean;
+            delay: number;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    args: Partial<import('@lumx/core/js/components/Dialog').DialogProps>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("big" | "tiny" | "regular" | "huge")[];
+            mapping: Record<string, "big" | "tiny" | "regular" | "huge"> | undefined;
+        };
+        onVisibilityChange: {
+            action: boolean;
+        };
+        children: {
+            control: boolean;
+        };
+        closeMode: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        children: string;
+    };
+};
+export declare const Loading: {
+    args: {
+        isLoading: boolean;
+        children: string;
+    };
+};
+export declare const WithHeaderFooter: {
+    args: {
+        header: string;
+        footer: string;
+        children: string;
+    };
+};
+export declare const ForceDivider: {
+    args: {
+        forceFooterDivider: boolean;
+        forceHeaderDivider: boolean;
+        header: string;
+        footer: string;
+        children: string;
+    };
+};
+export declare const LongContent: {
+    args: {
+        children: string;
+        header: string;
+        footer: string;
+    };
+};
+export declare const PreventAutoClose: {
+    args: {
+        preventAutoClose: boolean;
+        children: string;
+    };
+};
+export declare const PreventCloseOnEscape: {
+    args: {
+        preventCloseOnEscape: boolean;
+        children: string;
+    };
+};
+export declare const PreventCloseOnClick: {
+    args: {
+        preventCloseOnClick: boolean;
+        children: string;
+    };
+};
+/**
+ * More complex header/footer using Vue named slots
+ */
+export declare const WithHeaderFooterChildren: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};
+/**
+ * Dialog needing a confirmation before close using a nested Dialog
+ */
+export declare const WithConfirmClose: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};
+/**
+ * Test dialog focus trap (focus is contained inside the dialog) with all kinds of focusable and non-focusable items
+ */
+export declare const FocusTrap: {
+    tags: string[];
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};

package/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dialog, type DialogProps } from './Dialog';
+export type { DialogSizes } from '@lumx/core/js/components/Dialog';

package/components/expansion-panel/ExpansionPanel.d.ts

@@ -23,7 +23,7 @@ declare const ExpansionPanel: import('vue').DefineSetupFnComponent<ExpansionPane
     open: (event: MouseEvent) => boolean;
     close: (event: MouseEvent) => boolean;
     toggleOpen: (shouldOpen: boolean, event: MouseEvent) => boolean;
-}, {}, Omit<UIProps, "className" | "footer" | "ref" | "handleClick" | "handleChange" | "handleInput" | "handleKeyPress" | "handleClose" | "handleFocus" | "handleBeforeClick" | "handleAfterClick" | "handleMouseEnter" | "handleMouseLeave" | "handleKeyDown" | "children" | "content" | "IconButton" | "toggleButtonProps" | "handleOpen" | "handleToggleOpen" | "wrapperRef" | "headerProps" | "headerContent" | "dragHandle" | "isChildrenVisible"> & {
+}, {}, Omit<UIProps, "className" | "footer" | "ref" | "handleClick" | "handleChange" | "handleInput" | "handleKeyPress" | "handleClose" | "handleFocus" | "handleBeforeClick" | "handleAfterClick" | "handleMouseEnter" | "handleMouseLeave" | "handleKeyDown" | "children" | "content" | "IconButton" | "toggleButtonProps" | "wrapperRef" | "handleOpen" | "handleToggleOpen" | "headerProps" | "headerContent" | "dragHandle" | "isChildrenVisible"> & {
     class?: string;
 } & {
     /** Props to pass to the toggle button (minus those already set by the ExpansionPanel). */

package/composables/useDisableBodyScroll.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue';
+/**
+ * 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.
+ */
+export declare function useDisableBodyScroll(isActive: Ref<boolean>): void;

package/composables/useTransitionVisibility.d.ts

@@ -0,0 +1,11 @@
+import { ComputedRef, Ref } from 'vue';
+/**
+ * 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)
+ */
+export declare function useTransitionVisibility(isOpen: Ref<boolean>, timeout: number, onVisibilityChange?: Ref<((isVisible: boolean) => void) | undefined>): ComputedRef<boolean>;

package/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/badge';
 export * from './components/button';
 export * from './components/checkbox';
 export * from './components/chip';
+export * from './components/dialog';
 export * from './components/divider';
 export * from './components/drag-handle';
 export * from './components/expansion-panel';