@lumx/vue 4.9.0-next.11 → 4.9.0-next.13

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

@@ -28,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';