@lumx/vue 4.8.0-alpha.0 → 4.8.0-next.1

package/components/drag-handle/DragHandle.d.ts

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

package/components/drag-handle/index.d.ts

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

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

@@ -3,6 +3,12 @@ import { VueToJSXProps } from '../../utils/VueToJSX';
 export type FlexBoxProps = VueToJSXProps<UIProps, 'vAlign' | 'hAlign'> & {
     /** Customize the root element. */
     as?: string;
+    /**
+     * @deprecated please use `class`
+     * custom class name, used for compatibility when using
+     * FlexBox as a nested component.
+     */
+    className?: string;
     /** FlexBox vertical alignment */
     verticalAlign?: UIProps['vAlign'];
     /** FlexBox horizontal alignment */
@@ -20,6 +26,12 @@ declare const FlexBox: import('vue').DefineSetupFnComponent<FlexBoxProps, {}, {}
 } & {
     /** Customize the root element. */
     as?: string;
+    /**
+     * @deprecated please use `class`
+     * custom class name, used for compatibility when using
+     * FlexBox as a nested component.
+     */
+    className?: string;
     /** FlexBox vertical alignment */
     verticalAlign?: UIProps["vAlign"];
     /** FlexBox horizontal alignment */

package/components/generic-block/GenericBlock.d.ts

@@ -0,0 +1,57 @@
+import { GenericBlockProps as UIProps, GenericBlockPropsToOverride } from '@lumx/core/js/components/GenericBlock';
+import { FlexBoxProps } from '../flex-box';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type GenericBlockProps = VueToJSXProps<UIProps, GenericBlockPropsToOverride | 'figure' | 'actions' | 'vAlign' | 'hAlign' | 'actionsProps' | 'contentProps' | 'figureProps'> & {
+    /** Customize the root element tag. */
+    as?: string;
+    /** Vertical alignment (maps to core's vAlign). */
+    verticalAlign?: UIProps['vAlign'];
+    /** Horizontal alignment (maps to core's hAlign). */
+    horizontalAlign?: UIProps['hAlign'];
+    /**
+     * The props to forward to the content.
+     * By default, the content will have the same alignment as wrapper.
+     */
+    contentProps?: FlexBoxProps;
+    /**
+     * props to forward to the actions element.
+     */
+    actionsProps?: FlexBoxProps;
+    /**
+     * props to forward to the figure element.
+     */
+    figureProps?: FlexBoxProps;
+};
+/**
+ * The GenericBlock is a layout component made of 3 sections that can be
+ * displayed either horizontally or vertically with the same gap between each section.
+ *
+ * The sections are provided via named slots:
+ * - `figure` slot => A visual element to display before the main content.
+ * - default slot => The main content displayed.
+ * - `actions` slot => One or more actions to set after the element.
+ */
+declare const GenericBlock: import('vue').DefineSetupFnComponent<GenericBlockProps, {}, {}, Omit<UIProps, "className" | "figure" | import('@lumx/core/js/types').PropsToOverride | "actions" | "children" | "hAlign" | "vAlign" | GenericBlockPropsToOverride | "contentProps" | "actionsProps" | "figureProps"> & {
+    class?: string;
+} & {
+    /** Customize the root element tag. */
+    as?: string;
+    /** Vertical alignment (maps to core's vAlign). */
+    verticalAlign?: UIProps["vAlign"];
+    /** Horizontal alignment (maps to core's hAlign). */
+    horizontalAlign?: UIProps["hAlign"];
+    /**
+     * The props to forward to the content.
+     * By default, the content will have the same alignment as wrapper.
+     */
+    contentProps?: FlexBoxProps;
+    /**
+     * props to forward to the actions element.
+     */
+    actionsProps?: FlexBoxProps;
+    /**
+     * props to forward to the figure element.
+     */
+    figureProps?: FlexBoxProps;
+} & {}, import('vue').PublicProps>;
+export default GenericBlock;

package/components/generic-block/GenericBlock.stories.d.ts

@@ -0,0 +1,65 @@
+declare const _default: {
+    component: any;
+    title: string;
+};
+export default _default;
+export declare const SectionsInProps: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const SectionsInChildren: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const Vertical: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        orientation: string;
+    };
+};
+export declare const VerticalAlignCenter: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        orientation: string;
+        vAlign: string;
+    };
+};
+export declare const VerticalOverflow: {
+    args: {
+        orientation: string;
+        style: {
+            width: string;
+        };
+    };
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const Horizontal: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        orientation: string;
+    };
+};
+export declare const HorizontalAlignRightBottom: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        orientation: string;
+        vAlign: string;
+        hAlign: string;
+    };
+};
+export declare const HorizontalOverflow: {
+    args: {
+        orientation: string;
+        style: {
+            width: string;
+        };
+    };
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const GapSizes: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const AsAFigure: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const AsAnArticle: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};

package/components/generic-block/index.d.ts

@@ -0,0 +1,4 @@
+import { default as GenericBlock, GenericBlockProps } from './GenericBlock';
+export { GenericBlock };
+export type { GenericBlockProps };
+export { GenericBlockGapSize } from '@lumx/core/js/components/GenericBlock/constants';

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/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/button';
 export * from './components/checkbox';
 export * from './components/chip';
 export * from './components/divider';
+export * from './components/drag-handle';
 export * from './components/flag';
 export * from './components/flex-box';
 export * from './components/grid-column';
@@ -23,6 +24,8 @@ export * from './components/skeleton';
 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';