@lumx/vue 4.3.2-alpha.0 → 4.3.2-alpha.10

package/components/thumbnail/Thumbnail.stories.d.ts

@@ -0,0 +1,161 @@
+import { AspectRatio } from '../..';
+import { ThumbnailObjectFit } from '@lumx/core/js/components/Thumbnail/types';
+declare const _default: {
+    component: any;
+    render: any;
+    argTypes: {
+        image: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: string[];
+            mapping: Record<string, string> | undefined;
+        };
+        align: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("center" | "right" | "left")[];
+            mapping: Record<string, "center" | "right" | "left"> | undefined;
+        };
+        variant: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("squared" | "rounded")[];
+            mapping: Record<string, "squared" | "rounded"> | undefined;
+        };
+        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;
+        };
+        fallback: {
+            control: boolean;
+        };
+        'focusPoint.x': {
+            control: {
+                type: string;
+                max: number;
+                min: number;
+                step: number;
+            };
+        };
+        'focusPoint.y': {
+            control: {
+                type: string;
+                max: number;
+                min: number;
+                step: number;
+            };
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    args: {
+        align?: import('../..').HorizontalAlignment | undefined;
+        alt?: string | undefined;
+        aspectRatio?: AspectRatio | undefined;
+        badge?: import('react').ReactNode;
+        crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+        fallback?: import('react').ReactNode;
+        fillHeight?: boolean | undefined;
+        image?: string | undefined;
+        loadingState?: string | undefined;
+        imgProps?: import('react').ImgHTMLAttributes<HTMLImageElement> | undefined;
+        imgRef?: import('../..').CommonRef;
+        ref?: import('../..').CommonRef;
+        isLoading?: boolean | undefined;
+        objectFit?: ThumbnailObjectFit | undefined;
+        size?: import('../..').ThumbnailSize | undefined;
+        loading?: "eager" | "lazy" | undefined;
+        loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement> | undefined;
+        onClick?: ((event: any) => void) | undefined;
+        onKeyPress?: ((event: any) => void) | undefined;
+        variant?: import('../..').ThumbnailVariant | undefined;
+        linkProps?: import('../..').GenericProps | undefined;
+        focusPointStyle?: import('../..').GenericProps | undefined;
+        disabledStateProps?: import('../..').GenericProps | undefined;
+        isAnyDisabled?: boolean | undefined;
+        linkAs?: "a" | any;
+        'aria-label'?: string | undefined;
+        theme?: import('../..').Theme | undefined;
+        className?: string | undefined;
+    };
+    title: string;
+};
+export default _default;
+export declare const Simple: {
+    [x: string]: any;
+};
+export declare const IsLoading: {
+    args: {
+        image: string;
+        isLoading: boolean;
+    };
+};
+export declare const WithoutSource: {
+    args: {
+        image: string;
+        size: "xxl";
+        aspectRatio: "square";
+    };
+};
+export declare const FocusPointVertical: {
+    args: {
+        aspectRatio: "vertical";
+        size: "xxl";
+        image: string;
+        'focusPoint.x': number;
+    };
+};
+export declare const FocusPointHorizontal: {
+    args: {
+        aspectRatio: "horizontal";
+        size: "xxl";
+        image: string;
+        'focusPoint.y': number;
+    };
+};
+export declare const AsButton: {
+    render: (args: any) => {
+        components: {
+            [x: string]: any;
+        };
+        setup(): {
+            args: any;
+        };
+        template: string;
+    };
+    args: {
+        image: string;
+    };
+    argTypes: {
+        onClick: {
+            action: boolean;
+        };
+    };
+};
+export declare const AsLink: {
+    args: {
+        image: string;
+        linkProps: {
+            href: string;
+        };
+    };
+};
+export declare const FillHeightAndRatio: {
+    [x: string]: any;
+};
+export declare const WithSvgImages: {
+    args: {
+        image: string;
+        size: "xxl";
+        fillHeight: boolean;
+        'focusPoint.x': number;
+    };
+};
+export declare const ObjectFit: {
+    [x: string]: any;
+};

package/components/thumbnail/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Thumbnail } from './Thumbnail';
+export type { ThumbnailProps } from './Thumbnail';
+export { ThumbnailVariant, ThumbnailObjectFit } from '@lumx/core/js/components/Thumbnail/types';
+export type { ThumbnailSize, FocusPoint, LoadingState } from '@lumx/core/js/components/Thumbnail/types';

package/components/thumbnail/useFocusPointStyle.d.ts

@@ -0,0 +1,20 @@
+import { Ref, ComputedRef, CSSProperties } from 'vue';
+import { AspectRatio } from '@lumx/core/js/constants';
+import { FocusPoint } from '@lumx/core/js/components/Thumbnail/types';
+interface FocusPointStyleParams {
+    image: Ref<string>;
+    aspectRatio: Ref<AspectRatio | undefined>;
+    focusPoint: Ref<FocusPoint | undefined>;
+    width: Ref<number | undefined>;
+    height: Ref<number | undefined>;
+    element: Ref<HTMLImageElement | undefined>;
+    isLoaded: Ref<boolean>;
+}
+/**
+ * Vue composable to compute CSS properties for focus point positioning.
+ *
+ * @param params - Focus point style parameters
+ * @returns Computed CSS properties for the image
+ */
+export declare function useFocusPointStyle(params: FocusPointStyleParams): ComputedRef<CSSProperties>;
+export {};

package/components/thumbnail/useImageLoad.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+import { LoadingState } from '@lumx/core/js/components/Thumbnail/types';
+/**
+ * Vue composable to track image loading state.
+ *
+ * @param imageURL - The URL of the image to track
+ * @param imgRef - Reference to the HTML image element
+ * @returns The current loading state ('hasError', 'isLoading', or 'isLoaded')
+ */
+export declare function useImageLoad(imageURL: Ref<string>, imgRef: Ref<HTMLImageElement | undefined>): Ref<LoadingState>;

package/composables/useTheme.d.ts

@@ -1,9 +1,10 @@
+import { ComputedRef } from 'vue';
 import { Theme } from '@lumx/core/js/constants';
 export interface UseTheme {
     defaultTheme?: Theme;
 }
 /**
- * Retrives the globally applied theme.
- * @returns theme
+ * Retrieves the globally applied theme.
+ * @returns computed theme value (auto-updates when the provided theme changes)
  */
-export declare function useTheme(options?: UseTheme): Theme | undefined;
+export declare function useTheme(options?: UseTheme): ComputedRef<Theme | undefined>;

package/index.d.ts

@@ -1,12 +1,21 @@
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
+export * from './components/badge';
 export * from './components/button';
 export * from './components/checkbox';
+export * from './components/divider';
 export * from './components/flag';
 export * from './components/flex-box';
+export * from './components/grid-column';
 export * from './components/heading';
 export * from './components/icon';
 export * from './components/input-helper';
 export * from './components/input-label';
+export * from './components/link';
 export * from './components/message';
+export * from './components/radio-button';
+export * from './components/skeleton';
+export * from './components/switch';
+export * from './components/table';
 export * from './components/text';
+export * from './components/thumbnail';