@lumx/vue 4.8.0-next.0 → 4.8.0-next.2

package/components/inline-list/InlineList.d.ts

@@ -0,0 +1,13 @@
+import { InlineListProps as UIProps } from '@lumx/core/js/components/InlineList';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type InlineListProps = VueToJSXProps<UIProps, 'items'>;
+/**
+ * InlineList component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const InlineList: import('vue').DefineSetupFnComponent<InlineListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "items"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default InlineList;

package/components/inline-list/InlineList.stories.d.ts

@@ -0,0 +1,53 @@
+declare const _default: {
+    component: any;
+    argTypes: {
+        typography: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button")[];
+            mapping: Record<string, "caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button"> | undefined;
+        };
+        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;
+        };
+        colorVariant: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N")[];
+            mapping: Record<string, "D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N"> | undefined;
+        };
+        children: {
+            control: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const WithElements: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const MixedNoWrapAndTruncate: {
+    args: {
+        typography: string;
+        color: string;
+        colorVariant: string;
+        style: {
+            width: string;
+        };
+    };
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    decorators: ((story: any, context: any) => any)[];
+};
+export declare const Wrap: {
+    args: {
+        wrap: boolean;
+    };
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    decorators: ((story: any, context: any) => any)[];
+};

package/components/inline-list/index.d.ts

@@ -0,0 +1,3 @@
+import { default as InlineList, InlineListProps } from './InlineList';
+export { InlineList };
+export type { InlineListProps };

package/components/list/List.d.ts

@@ -0,0 +1,13 @@
+import { ListProps as UIProps } from '@lumx/core/js/components/List';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ListProps = VueToJSXProps<UIProps>;
+/**
+ * List component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const List: import('vue').DefineSetupFnComponent<ListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default List;

package/components/list/List.stories.d.ts

@@ -0,0 +1,24 @@
+declare const _default: {
+    component: any;
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    argTypes: {
+        itemPadding: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("big" | "huge" | undefined)[];
+            mapping: Record<string, "big" | "huge" | undefined> | undefined;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Default: {};
+export declare const ItemPadding: {
+    argTypes: {
+        itemPadding: {
+            control: boolean;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+};

package/components/list/ListDivider.d.ts

@@ -0,0 +1,13 @@
+import { ListDividerProps as UIProps } from '@lumx/core/js/components/List/ListDivider';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ListDividerProps = VueToJSXProps<UIProps>;
+/**
+ * ListDivider component.
+ * Purely decorative, consider a `ListSection` with label for a better list structure.
+ *
+ * @return Vue element.
+ */
+declare const ListDivider: import('vue').DefineSetupFnComponent<ListDividerProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default ListDivider;

package/components/list/ListDivider.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    component: any;
+    decorators: ((story: any, context: any) => any)[];
+    title: string;
+};
+export default _default;
+export declare const Default: {};

package/components/list/ListItem.d.ts

@@ -0,0 +1,26 @@
+import { ListItemProps as UIProps, ListItemSize } from '@lumx/core/js/components/List/ListItem';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type { ListItemSize };
+export type ListItemProps = VueToJSXProps<UIProps, 'after' | 'before' | 'linkRef'>;
+export declare const emitSchema: {
+    click: (event: MouseEvent) => boolean;
+};
+declare const _default: import('vue').DefineSetupFnComponent<ListItemProps, {
+    click: (event: MouseEvent) => boolean;
+}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "after" | "before" | "linkRef"> & {
+    class?: string;
+} & {
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}, import('vue').PublicProps> & {
+    Action: import('vue').DefineSetupFnComponent<import('./ListItemAction').ListItemActionProps, {
+        click: (event: MouseEvent) => boolean;
+    }, {}, Omit<import('@lumx/core/js/components/RawClickable').BaseClickableProps & import('@lumx/core/js/types').HasClassName, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+        class?: string;
+    } & {
+        as?: import('@lumx/core/js/components/RawClickable').ClickableElement;
+        href?: string;
+    } & {
+        onClick?: ((event: MouseEvent) => any) | undefined;
+    }, import('vue').PublicProps>;
+};
+export default _default;

package/components/list/ListItem.stories.d.ts

@@ -0,0 +1,80 @@
+declare const _default: {
+    args: Partial<import('@lumx/core/js/components/List/ListItem').ListItemProps>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: import('../..').ListItemSize[];
+            mapping: Record<string, import('../..').ListItemSize> | undefined;
+        };
+    };
+    render?: any;
+    component: any;
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        children: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+};
+export declare const AllStates: {
+    args: {
+        children: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+};
+export declare const ActionArea: {
+    argTypes: {
+        onClick: {
+            action: boolean;
+        };
+    };
+    render({ onClick, size }: any): import("vue/jsx-runtime").JSX.Element;
+};
+/** Inject a custom link component */
+export declare const CustomLink_: {
+    args: {
+        linkAs: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+                to?: string;
+            }> & Readonly<{}>, {
+                linkRef: import('vue').Ref<HTMLAnchorElement | undefined, HTMLAnchorElement | undefined>;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+                linkRef: HTMLAnchorElement;
+            }, any, import('vue').ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<{
+                to?: string;
+            }> & Readonly<{}>, {
+                linkRef: import('vue').Ref<HTMLAnchorElement | undefined, HTMLAnchorElement | undefined>;
+            }, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import('vue').ComponentOptionsBase<Readonly<{
+            to?: string;
+        }> & Readonly<{}>, {
+            linkRef: import('vue').Ref<HTMLAnchorElement | undefined, HTMLAnchorElement | undefined>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: {
+                default?(_: {}): any;
+            };
+        });
+        children: string;
+    };
+    decorators: ((story: any, context: any) => {
+        setup(): {
+            as: string | object;
+            overriddenProps: any;
+        };
+        template: string;
+    })[];
+};

package/components/list/ListItemAction.d.ts

@@ -0,0 +1,31 @@
+import { BaseClickableProps, ClickableElement } from '@lumx/core/js/components/RawClickable';
+import { HasClassName } from '@lumx/core/js/types';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ListItemActionProps = VueToJSXProps<BaseClickableProps & HasClassName> & {
+    /** Customize the rendered element. */
+    as?: ClickableElement;
+    /** Link href. */
+    href?: string;
+};
+export declare const emitSchema: {
+    click: (event: MouseEvent) => boolean;
+};
+/**
+ * ListItemAction component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const ListItemAction: import('vue').DefineSetupFnComponent<ListItemActionProps, {
+    click: (event: MouseEvent) => boolean;
+}, {}, Omit<BaseClickableProps & HasClassName, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+    class?: string;
+} & {
+    /** Customize the rendered element. */
+    as?: ClickableElement;
+    /** Link href. */
+    href?: string;
+} & {
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}, import('vue').PublicProps>;
+export default ListItemAction;

package/components/list/ListSection.d.ts

@@ -0,0 +1,13 @@
+import { ListSectionProps as UIProps } from '@lumx/core/js/components/List/ListSection';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ListSectionProps = VueToJSXProps<UIProps, 'id' | 'Text'>;
+/**
+ * ListSection component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const ListSection: import('vue').DefineSetupFnComponent<ListSectionProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "Text" | "id"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default ListSection;

package/components/list/ListSection.stories.d.ts

@@ -0,0 +1,114 @@
+declare const _default: {
+    component: any;
+    argTypes: {
+        'list.itemPadding': {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("big" | "huge" | undefined)[];
+            mapping: Record<string, "big" | "huge" | undefined> | undefined;
+        };
+        'listItem.size': {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("big" | "tiny" | "regular" | undefined)[];
+            mapping: Record<string, "big" | "tiny" | "regular" | undefined> | undefined;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        label: string;
+    };
+    argTypes: {
+        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;
+            };
+        };
+    };
+    render({ "list.itemPadding": itemPadding, "listItem.size": itemSize, ...args }: any): import("vue/jsx-runtime").JSX.Element;
+};
+export declare const AutoDividerEdgeCases: {
+    render({ "list.itemPadding": itemPadding, "listItem.size": itemSize }: any): import("vue/jsx-runtime").JSX.Element;
+};
+export declare const LabelVariants: {
+    render({ "list.itemPadding": itemPadding, "listItem.size": itemSize }: any): import("vue/jsx-runtime").JSX.Element;
+    decorators: ((story: any, context: any) => any)[];
+};
+export declare const ClickableItems: {
+    argTypes: {
+        onClick: {
+            action: boolean;
+        };
+    };
+    args: {
+        'list.itemPadding': "big";
+        'listItem.size': "tiny";
+    };
+    render({ onClick, "list.itemPadding": itemPadding, "listItem.size": itemSize }: any): import("vue/jsx-runtime").JSX.Element;
+};

package/components/list/index.d.ts

@@ -0,0 +1,5 @@
+export { default as List, type ListProps } from './List';
+export { default as ListDivider, type ListDividerProps } from './ListDivider';
+export { default as ListItem, type ListItemProps, type ListItemSize } from './ListItem';
+export { default as ListItemAction, type ListItemActionProps } from './ListItemAction';
+export { default as ListSection, type ListSectionProps } from './ListSection';

package/index.d.ts

@@ -15,6 +15,7 @@ export * from './components/icon';
 export * from './components/input-helper';
 export * from './components/input-label';
 export * from './components/link';
+export * from './components/list';
 export * from './components/message';
 export * from './components/popover';
 export * from './components/popover-dialog';
@@ -25,6 +26,7 @@ export * from './components/switch';
 export * from './components/text-field';
 export * from './components/uploader';
 export * from './components/generic-block';
+export * from './components/inline-list';
 export * from './components/table';
 export * from './components/text';
 export * from './components/thumbnail';