@lumx/vue 4.5.2-alpha.3 → 4.5.2-alpha.5

package/components/chip/Chip.d.ts

@@ -0,0 +1,30 @@
+import { ChipProps as UIProps, ChipPropsToOverride, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from '@lumx/core/js/components/Chip';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ChipProps = VueToJSXProps<UIProps, ChipPropsToOverride>;
+export declare const emitSchema: {
+    click: (event: MouseEvent) => boolean;
+    afterClick: (event: MouseEvent) => boolean;
+    beforeClick: (event: MouseEvent) => boolean;
+    keydown: (event: KeyboardEvent) => boolean;
+};
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
+/**
+ * Chip component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Chip: import('vue').DefineSetupFnComponent<ChipProps, {
+    click: (event: MouseEvent) => boolean;
+    afterClick: (event: MouseEvent) => boolean;
+    beforeClick: (event: MouseEvent) => boolean;
+    keydown: (event: KeyboardEvent) => boolean;
+}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | ChipPropsToOverride> & {
+    class?: string;
+} & {
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+    onAfterClick?: ((event: MouseEvent) => any) | undefined;
+    onBeforeClick?: ((event: MouseEvent) => any) | undefined;
+}, import('vue').PublicProps>;
+export default Chip;

package/components/chip/Chip.stories.d.ts

@@ -0,0 +1,121 @@
+declare const _default: {
+    component: any;
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: import('lodash').Omit<Partial<import('@lumx/core/js/components/Chip').ChipProps>, "theme">;
+    argTypes: {
+        size: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("s" | "m")[];
+            mapping: Record<string, "s" | "m"> | undefined;
+        };
+        before: {
+            control: boolean;
+        };
+        after: {
+            control: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        children: string;
+    };
+};
+export declare const ChipButton: {
+    args: {
+        children: string;
+    };
+    argTypes: {
+        onClick: {
+            action: boolean;
+        };
+    };
+};
+export declare const ChipLink: {
+    args: {
+        children: string;
+        href: string;
+        target: string;
+    };
+};
+export declare const WithAfterAndBefore: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    argTypes: {
+        onBeforeClick: {
+            action: boolean;
+        };
+        onClick: {
+            action: boolean;
+        };
+        onAfterClick: {
+            action: boolean;
+        };
+    };
+    args: {
+        children: string;
+    };
+};
+export declare const ColorVariants: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    argTypes: {
+        onBeforeClick: {
+            action: boolean;
+        };
+        onClick: {
+            action: boolean;
+        };
+        onAfterClick: {
+            action: boolean;
+        };
+    };
+    args: {
+        children: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+};
+export declare const SelectedVariants: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    argTypes: {
+        onBeforeClick: {
+            action: boolean;
+        };
+        onClick: {
+            action: boolean;
+        };
+        onAfterClick: {
+            action: boolean;
+        };
+    };
+    args: {
+        children: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+};
+export declare const Disabled: {
+    args: {
+        children: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+};
+export declare const Theming: {
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    decorators: ((story: any, context: any) => any)[];
+    argTypes: {
+        onBeforeClick: {
+            action: boolean;
+        };
+        onClick: {
+            action: boolean;
+        };
+        onAfterClick: {
+            action: boolean;
+        };
+    };
+    args: {
+        children: string;
+    };
+};

package/components/chip/index.d.ts

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

package/components/popover-dialog/PopoverDialog.d.ts

@@ -0,0 +1,27 @@
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, PopoverDialogProps as CorePopoverDialogProps } from '@lumx/core/js/components/PopoverDialog';
+import { PopoverProps as CorePopoverProps } from '@lumx/core/js/components/Popover';
+import { PopoverProps } from '../popover/Popover';
+/**
+ * Vue PopoverDialog props.
+ * Extends the Vue Popover props with dialog-specific accessible label props from core.
+ */
+export type PopoverDialogProps = PopoverProps & Omit<CorePopoverDialogProps, keyof CorePopoverProps>;
+export declare const emitSchema: {
+    close: () => boolean;
+};
+declare const PopoverDialog: import('vue').DefineSetupFnComponent<PopoverDialogProps, {
+    close: () => boolean;
+}, {}, Omit<CorePopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "isOpen" | "anchorRef" | "boundaryRef" | "focusElement" | "parentElement" | "focusTrapZoneElement"> & {
+    class?: string;
+} & {
+    anchorRef?: import('vue').Ref<HTMLElement | undefined> | HTMLElement;
+    boundaryRef?: import('vue').Ref<HTMLElement | undefined> | HTMLElement;
+    focusElement?: HTMLElement;
+    isOpen?: boolean;
+    parentElement?: HTMLElement;
+    focusTrapZoneElement?: HTMLElement;
+} & Omit<CorePopoverDialogProps, keyof CorePopoverProps> & {
+    onClose?: (() => any) | undefined;
+}, import('vue').PublicProps>;
+export default PopoverDialog;
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };

package/components/popover-dialog/PopoverDialog.stories.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    component: any;
+    render: any;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+    tags: string[];
+    argTypes: {
+        anchorRef: {
+            control: boolean;
+        };
+        children: {
+            control: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const WithIconButtonTrigger: {
+    args: {
+        label: string;
+    };
+};

package/components/popover-dialog/PopoverDialog.test.stories.d.ts

@@ -0,0 +1,75 @@
+declare const _default: {
+    title: string;
+    component: import('vue').DefineSetupFnComponent<import('../..').PopoverDialogProps, {
+        close: () => boolean;
+    }, {}, Omit<import('@lumx/core/js/components/Popover').PopoverProps, "className" | import('../..').PropsToOverride | "children" | "isOpen" | "anchorRef" | "boundaryRef" | "focusElement" | "parentElement" | "focusTrapZoneElement"> & {
+        class?: string;
+    } & {
+        anchorRef?: import('vue').Ref<HTMLElement | undefined> | HTMLElement;
+        boundaryRef?: import('vue').Ref<HTMLElement | undefined> | HTMLElement;
+        focusElement?: HTMLElement;
+        isOpen?: boolean;
+        parentElement?: HTMLElement;
+        focusTrapZoneElement?: HTMLElement;
+    } & Omit<import('@lumx/core/js/components/PopoverDialog').PopoverDialogProps, keyof import('@lumx/core/js/components/Popover').PopoverProps> & {
+        onClose?: (() => any) | undefined;
+    }, import('vue').PublicProps>;
+    tags: string[];
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+    render: (args: any) => () => import("vue/jsx-runtime").JSX.Element;
+};
+export default _default;
+/** Test: popover dialog opens and focuses the first button */
+export declare const TestOpenAndInitFocus: {
+    args: {
+        label: string;
+    };
+    play({ userEvent }: any): Promise<void>;
+};
+/** Test: popover dialog works with aria-label */
+export declare const TestAriaLabel: {
+    args: {
+        'aria-label': string;
+    };
+    play({ userEvent }: any): Promise<void>;
+};
+/** Test: focus is trapped within the popover dialog */
+export declare const TestTrapFocus: {
+    args: {
+        label: string;
+    };
+    play({ userEvent }: any): Promise<void>;
+};
+/** Test: escape closes the dialog and restores focus to trigger */
+export declare const TestCloseOnEscape: {
+    args: {
+        label: string;
+    };
+    play({ userEvent }: any): Promise<void>;
+};
+/** Test: closing via the Close button restores focus to trigger */
+export declare const TestCloseExternally: {
+    args: {
+        label: string;
+    };
+    play({ userEvent }: any): Promise<void>;
+};
+/** Test: escape closes dialog with icon button trigger and restores focus */
+export declare const TestCloseEscapeWithTooltip: {
+    args: {
+        label: string;
+    };
+    play({ userEvent }: any): Promise<void>;
+};
+/** Test: heading level context is reset inside the popover dialog */
+export declare const TestHeadingLevelReset: {
+    render({ children, ...args }: any): () => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        children: import("vue/jsx-runtime").JSX.Element;
+    };
+    play({ userEvent }: any): Promise<void>;
+};

package/components/popover-dialog/index.d.ts

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

package/composables/useRestoreFocusOnClose.d.ts

@@ -1,11 +1,15 @@
 import { Ref } from 'vue';
 /**
- * Restores focus to the anchor or parent element when the popover is unmounted,
- * if focus was within the popover at the time of unmount.
+ * 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).
  */
-export declare function useRestoreFocusOnClose(focusAnchorOnClose: Ref<boolean | undefined>, anchorRef: Ref<HTMLElement | undefined>, parentElementRef: Ref<HTMLElement | undefined> | undefined, popoverElementRef: Ref<HTMLElement | undefined>): void;
+export declare function useRestoreFocusOnClose(focusAnchorOnClose: Ref<boolean | undefined>, anchorRef: Ref<HTMLElement | undefined>, parentElementRef: Ref<HTMLElement | undefined> | undefined, popoverElementRef: Ref<HTMLElement | undefined>, isOpenRef?: Ref<boolean>): void;

package/index.d.ts

@@ -4,6 +4,7 @@ export * from './components/avatar';
 export * from './components/badge';
 export * from './components/button';
 export * from './components/checkbox';
+export * from './components/chip';
 export * from './components/divider';
 export * from './components/flag';
 export * from './components/flex-box';
@@ -15,6 +16,7 @@ export * from './components/input-label';
 export * from './components/link';
 export * from './components/message';
 export * from './components/popover';
+export * from './components/popover-dialog';
 export * from './components/progress';
 export * from './components/radio-button';
 export * from './components/skeleton';