@lumx/vue 4.4.0 → 4.4.1-alpha.1

package/components/avatar/Avatar.d.ts

@@ -0,0 +1,32 @@
+import { AvatarProps as UIProps, AvatarSize } from '@lumx/core/js/components/Avatar';
+import { GenericProps } from '@lumx/core/js/types';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+import { ThumbnailProps } from '../thumbnail';
+export type { AvatarSize };
+export type AvatarProps = VueToJSXProps<UIProps, 'image' | 'actions' | 'badge'> & {
+    /** Image URL. */
+    image: string;
+    /** Image alternative text. */
+    alt: string;
+    /** Props to pass to the link wrapping the thumbnail. */
+    linkProps?: GenericProps;
+    /** Custom component for the link (can be used to inject vue-router RouterLink). */
+    linkAs?: 'a' | any;
+    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
+    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'alt' | 'size' | 'theme' | 'aspectRatio'>;
+};
+declare const Avatar: import('vue').DefineSetupFnComponent<AvatarProps, {}, {}, Omit<UIProps, "className" | "image" | import('@lumx/core/js/types').PropsToOverride | "actions" | "badge" | "children"> & {
+    class?: string;
+} & {
+    /** Image URL. */
+    image: string;
+    /** Image alternative text. */
+    alt: string;
+    /** Props to pass to the link wrapping the thumbnail. */
+    linkProps?: GenericProps;
+    /** Custom component for the link (can be used to inject vue-router RouterLink). */
+    linkAs?: "a" | any;
+    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
+    thumbnailProps?: Omit<ThumbnailProps, "image" | "alt" | "size" | "theme" | "aspectRatio">;
+} & {}, import('vue').PublicProps>;
+export default Avatar;

package/components/avatar/Avatar.stories.d.ts

@@ -0,0 +1,146 @@
+declare const _default: {
+    component: any;
+    argTypes: {
+        image: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: string[];
+            mapping: Record<string, string> | undefined;
+        };
+        size: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: import('../..').AvatarSize[];
+            mapping: Record<string, import('../..').AvatarSize> | undefined;
+        };
+    };
+    args: {
+        image: string;
+        alt: string;
+    };
+    title: string;
+};
+export default _default;
+export declare const Default: {};
+export declare const AvatarButton: {
+    argTypes: {
+        onClick: {
+            action: boolean;
+        };
+    };
+};
+export declare const AvatarLink: {
+    args: {
+        href: string;
+        target: string;
+        linkAs: string;
+    };
+};
+export declare const AllSizes: {
+    argTypes: {
+        size: {
+            control: boolean;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+};
+/**
+ * Avatar with actions
+ */
+export declare const WithActions: {
+    args: {
+        size: "xl";
+    };
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+/**
+ * All sizes with badge
+ */
+export declare const AllSizesWithBadge: {
+    args: {
+        'badge.color': "blue";
+        'badge.icon': string;
+    };
+    argTypes: {
+        'badge.color': {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined)[];
+            mapping: Record<string, "light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined> | undefined;
+        };
+        'badge.icon': {
+            control: {
+                type: string;
+            };
+            options: {
+                undefined: undefined;
+                mdiAbTesting: string;
+                mdiAbjadArabic: string;
+                mdiAccount: string;
+                mdiAccountBox: string;
+                mdiAlert: string;
+                mdiAlertCircle: string;
+                mdiArrowDown: string;
+                mdiArrowUp: string;
+                mdiAtom: string;
+                mdiBee: string;
+                mdiBell: string;
+                mdiBullhornOutline: string;
+                mdiCheck: string;
+                mdiCheckCircle: string;
+                mdiChevronDown: string;
+                mdiChevronLeft: string;
+                mdiChevronRight: string;
+                mdiChevronUp: string;
+                mdiClose: string;
+                mdiCloseCircle: string;
+                mdiDelete: string;
+                mdiDotsHorizontal: string;
+                mdiDragVertical: string;
+                mdiEarth: string;
+                mdiEmail: string;
+                mdiEye: string;
+                mdiFileEdit: string;
+                mdiFlag: string;
+                mdiFolder: string;
+                mdiFolderGoogleDrive: string;
+                mdiFoodApple: string;
+                mdiGoogleCirclesExtended: string;
+                mdiHeart: string;
+                mdiHome: string;
+                mdiImageBroken: string;
+                mdiInformation: string;
+                mdiLink: string;
+                mdiMagnifyMinusOutline: string;
+                mdiMagnifyPlusOutline: string;
+                mdiMenuDown: string;
+                mdiMessageTextOutline: string;
+                mdiMinus: string;
+                mdiOpenInNew: string;
+                mdiPauseCircleOutline: string;
+                mdiPencil: string;
+                mdiPlay: string;
+                mdiPlayCircleOutline: string;
+                mdiPlus: string;
+                mdiRadioboxBlank: string;
+                mdiRadioboxMarked: string;
+                mdiReply: string;
+                mdiSend: string;
+                mdiStar: string;
+                mdiTextBox: string;
+                mdiTextBoxPlus: string;
+                mdiTram: string;
+                mdiTranslate: string;
+                mdiViewList: string;
+            };
+        };
+        size: {
+            control: boolean;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ badge, ...props }: any) => import("vue/jsx-runtime").JSX.Element;
+};

package/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export { default as Avatar, type AvatarProps, type AvatarSize } from './Avatar';

package/components/flex-box/FlexBox.d.ts

@@ -1,8 +1,12 @@
 import { FlexBoxProps as UIProps, CLASSNAME, COMPONENT_NAME } from '@lumx/core/js/components/FlexBox';
 import { VueToJSXProps } from '../../utils/VueToJSX';
-export type FlexBoxProps = VueToJSXProps<UIProps> & {
+export type FlexBoxProps = VueToJSXProps<UIProps, 'vAlign' | 'hAlign'> & {
     /** Customize the root element. */
     as?: string;
+    /** FlexBox vertical alignment */
+    verticalAlign?: UIProps['vAlign'];
+    /** FlexBox horizontal alignment */
+    horizontalAlign?: UIProps['hAlign'];
 };
 export { CLASSNAME, COMPONENT_NAME };
 /**
@@ -11,10 +15,14 @@ export { CLASSNAME, COMPONENT_NAME };
  * @param  props Component props.
  * @return Vue element.
  */
-declare const FlexBox: import('vue').DefineSetupFnComponent<FlexBoxProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+declare const FlexBox: import('vue').DefineSetupFnComponent<FlexBoxProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "hAlign" | "vAlign"> & {
     class?: string;
 } & {
     /** Customize the root element. */
     as?: string;
+    /** FlexBox vertical alignment */
+    verticalAlign?: UIProps["vAlign"];
+    /** FlexBox horizontal alignment */
+    horizontalAlign?: UIProps["hAlign"];
 } & {}, import('vue').PublicProps>;
 export default FlexBox;

package/components/thumbnail/Thumbnail.d.ts

@@ -21,7 +21,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
 declare const Thumbnail: import('vue').DefineSetupFnComponent<ThumbnailProps, {
     click: (event: Event) => boolean;
     keyPress: (event: Event) => boolean;
-}, {}, Omit<Omit<UIProps, "badge" | "isAnyDisabled" | "disabledStateProps" | "fallback" | "loadingState" | "imgRef" | "focusPointStyle">, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+}, {}, Omit<Omit<UIProps, "badge" | "fallback" | "loadingState" | "imgRef" | "focusPointStyle" | "disabledStateProps" | "isAnyDisabled">, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
     class?: string;
 } & {
     /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
+export * from './components/avatar';
 export * from './components/badge';
 export * from './components/button';
 export * from './components/checkbox';