@lumx/vue 4.3.2-alpha.1 → 4.3.2-alpha.3

package/components/link/Link.d.ts

@@ -0,0 +1,21 @@
+import { LinkProps as UIProps, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from '@lumx/core/js/components/Link';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type LinkProps = VueToJSXProps<UIProps, 'label'>;
+export declare const emitSchema: {
+    click: (event: Event) => boolean;
+};
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
+/**
+ * Link component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Link: import('vue').DefineSetupFnComponent<LinkProps, {
+    click: (event: Event) => boolean;
+}, {}, Omit<UIProps, "className" | "label" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {
+    onClick?: ((event: Event) => any) | undefined;
+}, import('vue').PublicProps>;
+export default Link;

package/components/link/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Link } from './Link';
+export type { LinkProps } from './Link';

package/components/table/Table.d.ts

@@ -0,0 +1,7 @@
+import { TableProps as UIProps } from '@lumx/core/js/components/Table';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type TableProps = VueToJSXProps<UIProps>;
+declare const Table: import('vue').DefineSetupFnComponent<TableProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default Table;

package/components/table/TableBody.d.ts

@@ -0,0 +1,7 @@
+import { TableBodyProps as UIProps } from '@lumx/core/js/components/Table/TableBody';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type TableBodyProps = VueToJSXProps<UIProps>;
+declare const TableBody: import('vue').DefineSetupFnComponent<TableBodyProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default TableBody;

package/components/table/TableCell.d.ts

@@ -0,0 +1,16 @@
+import { TableCellProps as UIProps, ThOrder, TableCellVariant } from '@lumx/core/js/components/Table/TableCell';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export { ThOrder, TableCellVariant };
+export type { ThOrder as ThOrderType, TableCellVariant as TableCellVariantType, } from '@lumx/core/js/components/Table/TableCell';
+export type TableCellProps = VueToJSXProps<UIProps, 'onHeaderClick'>;
+export declare const emitSchema: {
+    headerClick: () => boolean;
+};
+declare const TableCell: import('vue').DefineSetupFnComponent<TableCellProps, {
+    headerClick: () => boolean;
+}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick" | "onHeaderClick"> & {
+    class?: string;
+} & {
+    onHeaderClick?: (() => any) | undefined;
+}, import('vue').PublicProps>;
+export default TableCell;

package/components/table/TableHeader.d.ts

@@ -0,0 +1,7 @@
+import { TableHeaderProps as UIProps } from '@lumx/core/js/components/Table/TableHeader';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type TableHeaderProps = VueToJSXProps<UIProps>;
+declare const TableHeader: import('vue').DefineSetupFnComponent<TableHeaderProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default TableHeader;

package/components/table/TableRow.d.ts

@@ -0,0 +1,13 @@
+import { TableRowProps as UIProps } from '@lumx/core/js/components/Table/TableRow';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type TableRowProps = VueToJSXProps<UIProps, 'tabIndex' | 'aria-disabled'> & {
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+};
+declare const TableRow: import('vue').DefineSetupFnComponent<TableRowProps, {}, {}, Omit<UIProps, "className" | "children" | "ref" | "onChange" | "onClick" | "aria-disabled" | "tabIndex"> & {
+    class?: string;
+} & {
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+} & {}, import('vue').PublicProps>;
+export default TableRow;

package/components/table/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Table } from './Table';
+export * from './Table';
+export { default as TableBody } from './TableBody';
+export * from './TableBody';
+export { default as TableCell } from './TableCell';
+export * from './TableCell';
+export { default as TableHeader } from './TableHeader';
+export * from './TableHeader';
+export { default as TableRow } from './TableRow';
+export * from './TableRow';

package/components/thumbnail/Stories/ThumbnailClickable.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    onClick?: (event: Event) => any;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        badge?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/thumbnail/Thumbnail.d.ts

@@ -0,0 +1,35 @@
+import { ThumbnailProps as UIProps, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from '@lumx/core/js/components/Thumbnail';
+import { FocusPoint } from '@lumx/core/js/components/Thumbnail/types';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ThumbnailProps = VueToJSXProps<Omit<UIProps, 'loadingState' | 'isAnyDisabled' | 'focusPointStyle' | 'disabledStateProps' | 'badge' | 'imgRef' | 'onKeyPress' | 'fallback'>> & {
+    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */
+    focusPoint?: FocusPoint;
+    /** ARIA disabled state */
+    'aria-disabled'?: boolean | 'true' | 'false';
+};
+export declare const emitSchema: {
+    click: (event: Event) => boolean;
+    keyPress: (event: Event) => boolean;
+};
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
+/**
+ * Thumbnail component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Thumbnail: import('vue').DefineSetupFnComponent<ThumbnailProps, {
+    click: (event: Event) => boolean;
+    keyPress: (event: Event) => boolean;
+}, {}, Omit<Omit<UIProps, "badge" | "isAnyDisabled" | "disabledStateProps" | "fallback" | "loadingState" | "imgRef" | "onKeyPress" | "focusPointStyle">, "className" | "children" | "ref" | "onChange" | "onClick"> & {
+    class?: string;
+} & {
+    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */
+    focusPoint?: FocusPoint;
+    /** ARIA disabled state */
+    'aria-disabled'?: boolean | "true" | "false";
+} & {
+    onClick?: ((event: Event) => any) | undefined;
+    onKeyPress?: ((event: Event) => any) | undefined;
+}, import('vue').PublicProps>;
+export default Thumbnail;

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

@@ -10,8 +10,11 @@ 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';