@lumx/vue 4.9.0-next.10 → 4.9.0-next.12

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

@@ -0,0 +1,39 @@
+import { ExpansionPanelProps as UIProps, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ExpansionPanelPropsToOverride } from '@lumx/core/js/components/ExpansionPanel';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ExpansionPanelProps = VueToJSXProps<UIProps, ExpansionPanelPropsToOverride> & {
+    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel). */
+    toggleButtonProps?: {
+        label: string;
+        [key: string]: any;
+    };
+};
+export declare const emitSchema: {
+    open: (event: MouseEvent) => boolean;
+    close: (event: MouseEvent) => boolean;
+    toggleOpen: (shouldOpen: boolean, event: MouseEvent) => boolean;
+};
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
+/**
+ * ExpansionPanel component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const ExpansionPanel: import('vue').DefineSetupFnComponent<ExpansionPanelProps, {
+    open: (event: MouseEvent) => boolean;
+    close: (event: MouseEvent) => boolean;
+    toggleOpen: (shouldOpen: boolean, event: MouseEvent) => boolean;
+}, {}, Omit<UIProps, "className" | "footer" | "ref" | "handleClick" | "handleChange" | "handleKeyPress" | "handleClose" | "handleFocus" | "handleBeforeClick" | "handleAfterClick" | "handleMouseEnter" | "handleMouseLeave" | "handleKeyDown" | "children" | "content" | "IconButton" | "handleOpen" | "toggleButtonProps" | "handleToggleOpen" | "wrapperRef" | "headerProps" | "headerContent" | "dragHandle" | "isChildrenVisible"> & {
+    class?: string;
+} & {
+    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel). */
+    toggleButtonProps?: {
+        label: string;
+        [key: string]: any;
+    };
+} & {
+    onClose?: ((event: MouseEvent) => any) | undefined;
+    onOpen?: ((event: MouseEvent) => any) | undefined;
+    onToggleOpen?: ((shouldOpen: boolean, event: MouseEvent) => any) | undefined;
+}, import('vue').PublicProps>;
+export default ExpansionPanel;

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

@@ -0,0 +1,54 @@
+declare const _default: {
+    component: any;
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        'toggleButtonProps.label': string;
+        label: string;
+        hasBackground?: boolean | undefined;
+        hasHeaderDivider?: boolean | undefined;
+        isOpen?: boolean | undefined;
+        handleOpen?: ((event: any) => void) | undefined;
+        handleClose?: ((event: any) => void) | undefined;
+        toggleButtonProps?: any;
+        handleToggleOpen?: ((shouldOpen: boolean, event: any) => void) | undefined;
+        children?: import('react').ReactNode;
+        ref?: import('../..').CommonRef;
+        wrapperRef?: import('../..').CommonRef;
+        headerProps?: import('../..').GenericProps | undefined;
+        headerContent?: import('react').ReactNode;
+        dragHandle?: import('react').ReactNode;
+        content?: import('react').ReactNode;
+        footer?: import('react').ReactNode;
+        IconButton?: any;
+        isChildrenVisible?: boolean | undefined;
+        className?: string | undefined;
+        closeMode?: "hide" | "unmount" | undefined;
+        theme?: import('../..').Theme | undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    title: string;
+};
+export default _default;
+export declare const Default: {};
+export declare const HasBackground: {
+    args: {
+        hasBackground: boolean;
+    };
+};
+export declare const HasHeaderDivider: {
+    args: {
+        isOpen: boolean;
+        hasBackground: boolean;
+        hasHeaderDivider: boolean;
+    };
+};
+export declare const Nested: {
+    args: {};
+    render: ({ children, isOpen, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const HideChildren: {
+    args: {
+        hasBackground: boolean;
+        closeMode: string;
+    };
+};

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

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

package/components/image-block/ImageBlock.d.ts

@@ -0,0 +1,20 @@
+import { ImageBlockProps as UIProps, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ImageBlockCaptionPosition } from '@lumx/core/js/components/ImageBlock';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ImageBlockProps = Omit<VueToJSXProps<UIProps, 'Thumbnail' | 'ImageCaption' | 'FlexBox' | 'Text' | 'titleProps' | 'descriptionProps' | 'captionStyle'>, never> & {
+    titleProps?: Record<string, any>;
+    descriptionProps?: Record<string, any>;
+    captionStyle?: Record<string, any>;
+};
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ImageBlockCaptionPosition };
+/**
+ * ImageBlock component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const ImageBlock: import('vue').DefineSetupFnComponent<ImageBlockProps, {}, {}, Omit<VueToJSXProps<UIProps, "Thumbnail" | "Text" | "FlexBox" | "titleProps" | "descriptionProps" | "captionStyle" | "ImageCaption">, never> & {
+    titleProps?: Record<string, any>;
+    descriptionProps?: Record<string, any>;
+    captionStyle?: Record<string, any>;
+} & {}, import('vue').PublicProps>;
+export default ImageBlock;

package/components/image-block/ImageBlock.stories.d.ts

@@ -0,0 +1,180 @@
+declare const _default: {
+    component: any;
+    argTypes: {
+        size: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("xl" | "xxl")[];
+            mapping: Record<string, "xl" | "xxl"> | undefined;
+        };
+        image: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: string[];
+            mapping: Record<string, string> | undefined;
+        };
+        captionPosition: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("over" | "below")[];
+            mapping: Record<string, "over" | "below"> | undefined;
+        };
+        'thumbnailProps.aspectRatio': {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free")[];
+            mapping: Record<string, "vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free"> | undefined;
+        };
+        align: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("center" | "right" | "left")[];
+            mapping: Record<string, "center" | "right" | "left"> | undefined;
+        };
+        tags: {
+            control: boolean;
+        };
+        actions: {
+            control: boolean;
+        };
+    };
+    args: {
+        image: string;
+        actions?: import('react').ReactNode;
+        align?: import('../..').HorizontalAlignment | undefined;
+        alt?: string | undefined;
+        captionPosition?: import('../..').ImageBlockCaptionPosition | undefined;
+        fillHeight?: boolean | undefined;
+        size?: import('@lumx/core/js/components/ImageBlock').ImageBlockSize | undefined;
+        thumbnailProps?: import('../..').GenericProps | undefined;
+        ref?: import('../..').CommonRef;
+        Thumbnail?: any;
+        ImageCaption?: any;
+        className?: string | undefined;
+        theme?: import('../..').Theme | undefined;
+        title?: string | undefined;
+        titleProps?: import('../..').GenericProps | undefined;
+        description?: import('react').ReactNode | {
+            __html: string;
+        };
+        descriptionProps?: import('../..').GenericProps | undefined;
+        tags?: import('react').ReactNode;
+        captionStyle?: import('../..').GenericProps | undefined;
+        FlexBox?: any;
+        Text?: any;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    title: string;
+};
+export default _default;
+export declare const WithCaptionBelow: {
+    args: {
+        captionPosition: "below";
+        size: "xxl";
+        title: string;
+        description: string;
+    };
+};
+export declare const WithCaptionOver: {
+    args: {
+        captionPosition: "over";
+        size: "xxl";
+        title: string;
+        description: string;
+    };
+};
+export declare const WithAlign: {
+    args: {
+        image: string;
+        size: undefined;
+        align: "center";
+        captionPosition: "below";
+        title: string;
+        description: string;
+    };
+};
+export declare const WithTags: {
+    render: ({ tags, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        size: "xxl";
+    };
+};
+export declare const WithActions: {
+    render: ({ actions, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        size: "xxl";
+    };
+};
+export declare const WithFocusPointHorizontal: {
+    args: {
+        size: "xxl";
+        'thumbnailProps.aspectRatio': "vertical";
+        'thumbnailProps.focusPoint.x': number;
+        'thumbnailProps.focusPoint.y': number;
+    };
+    argTypes: {
+        'thumbnailProps.focusPoint.x': {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        'thumbnailProps.focusPoint.y': {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+};
+export declare const WithFocusPointVertical: {
+    args: {
+        size: "xxl";
+        image: string;
+        'thumbnailProps.aspectRatio': "horizontal";
+        'thumbnailProps.focusPoint.x': number;
+        'thumbnailProps.focusPoint.y': number;
+    };
+    argTypes: {
+        'thumbnailProps.focusPoint.x': {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        'thumbnailProps.focusPoint.y': {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+};
+export declare const FullFeatured: {
+    render: ({ tags, actions, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        image: string;
+        size: undefined;
+        align: "center";
+        captionPosition: "below";
+        title: string;
+        description: string;
+        'thumbnailProps.aspectRatio': "horizontal";
+        'thumbnailProps.focusPoint.x': number;
+        'thumbnailProps.focusPoint.y': number;
+    };
+    decorators: ((story: any, context: any) => any)[];
+};

package/components/image-block/ImageCaption.d.ts

@@ -0,0 +1,18 @@
+import { HorizontalAlignment, Theme } from '@lumx/core/js/constants';
+type ImageCaptionProps = {
+    as?: 'div' | 'figcaption';
+    align?: HorizontalAlignment;
+    baseClassName?: string;
+    captionStyle?: Record<string, any>;
+    class?: string;
+    description?: any;
+    descriptionProps?: Record<string, any>;
+    tags?: any;
+    theme?: Theme;
+    title?: string;
+    titleProps?: Record<string, any>;
+    truncate?: boolean;
+};
+/** Internal component used to render image captions */
+declare const ImageCaption: import('vue').DefineSetupFnComponent<ImageCaptionProps, {}, {}, ImageCaptionProps & {}, import('vue').PublicProps>;
+export default ImageCaption;

package/components/image-block/index.d.ts

@@ -0,0 +1 @@
+export { default as ImageBlock, type ImageBlockProps, ImageBlockCaptionPosition } from './ImageBlock';

package/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/checkbox';
 export * from './components/chip';
 export * from './components/divider';
 export * from './components/drag-handle';
+export * from './components/expansion-panel';
 export * from './components/flag';
 export * from './components/flex-box';
 export * from './components/grid-column';
@@ -27,6 +28,7 @@ export * from './components/switch';
 export * from './components/text-field';
 export * from './components/uploader';
 export * from './components/generic-block';
+export * from './components/image-block';
 export * from './components/inline-list';
 export * from './components/table';
 export * from './components/tabs';