@lumx/vue 4.9.0-next.8 → 4.9.0

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

@@ -1,28 +1,5 @@
 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: {
@@ -90,6 +67,27 @@ export declare const Default: {
                 mdiViewList: string;
             };
         };
+        '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;
     };
     render({ "list.itemPadding": itemPadding, "listItem.size": itemSize, ...args }: any): import("vue/jsx-runtime").JSX.Element;
 };

package/components/mosaic/Mosaic.d.ts

@@ -0,0 +1,30 @@
+import { MosaicProps as UIProps, MosaicPropsToOverride } from '@lumx/core/js/components/Mosaic';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+import { ThumbnailProps } from '../thumbnail/Thumbnail';
+export type MosaicThumbnailItem = Omit<ThumbnailProps, 'class'> & {
+    onClick?: (event: Event) => void;
+};
+export type MosaicProps = VueToJSXProps<UIProps, MosaicPropsToOverride> & {
+    /** Thumbnails. */
+    thumbnails: MosaicThumbnailItem[];
+};
+export declare const emitSchema: {
+    handleClick: (index: number) => boolean;
+};
+/**
+ * Mosaic component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Mosaic: import('vue').DefineSetupFnComponent<MosaicProps, {
+    handleClick: (index: number) => boolean;
+}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | MosaicPropsToOverride> & {
+    class?: string;
+} & {
+    /** Thumbnails. */
+    thumbnails: MosaicThumbnailItem[];
+} & {
+    onHandleClick?: ((index: number) => any) | undefined;
+}, import('vue').PublicProps>;
+export default Mosaic;

package/components/mosaic/Mosaic.stories.d.ts

@@ -0,0 +1,93 @@
+declare const _default: {
+    component: any;
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    args: Partial<import('@lumx/core/js/components/Mosaic').MosaicProps>;
+    argTypes: {};
+    decorators: ((story: any, context: any) => any)[];
+    title: string;
+};
+export default _default;
+export declare const OneThumbnail: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const OneThumbnailClickable: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const TwoThumbnail: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const TwoThumbnailClickable: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const ThreeThumbnail: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const ThreeThumbnailClickable: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const FourThumbnail: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const FourThumbnailClickable: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const FiveThumbnail: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const FiveThumbnailClickable: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const SixThumbnail: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};
+export declare const SixThumbnailClickable: {
+    args: {
+        thumbnails: {
+            image: string;
+        }[];
+    };
+};

package/components/mosaic/index.d.ts

@@ -0,0 +1 @@
+export { default as Mosaic, type MosaicProps, type MosaicThumbnailItem } from './Mosaic';

package/components/text-field/RawInputText.d.ts

@@ -3,6 +3,7 @@ import { VueToJSXProps } from '../../utils/VueToJSX';
 export type RawInputTextProps = VueToJSXProps<UIProps>;
 export declare const emitSchema: {
     change: (value: string, _name?: string, _event?: Event) => boolean;
+    input: (value: string, _name?: string, _event?: Event) => boolean;
 };
 /**
  * Raw input text component.
@@ -13,9 +14,11 @@ export declare const emitSchema: {
  */
 declare const RawInputText: import('vue').DefineSetupFnComponent<RawInputTextProps, {
     change: (value: string, _name?: string, _event?: Event) => boolean;
+    input: (value: string, _name?: string, _event?: Event) => boolean;
 }, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
     class?: string;
 } & {
+    onInput?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
     onChange?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
 }, import('vue').PublicProps>;
 export default RawInputText;

package/components/text-field/RawInputTextarea.d.ts

@@ -3,6 +3,7 @@ import { VueToJSXProps } from '../../utils/VueToJSX';
 export type RawInputTextareaProps = VueToJSXProps<UIProps>;
 export declare const emitSchema: {
     change: (value: string, _name?: string, _event?: Event) => boolean;
+    input: (value: string, _name?: string, _event?: Event) => boolean;
 };
 /**
  * Raw input textarea component.
@@ -13,9 +14,11 @@ export declare const emitSchema: {
  */
 declare const RawInputTextarea: import('vue').DefineSetupFnComponent<RawInputTextareaProps, {
     change: (value: string, _name?: string, _event?: Event) => boolean;
+    input: (value: string, _name?: string, _event?: Event) => boolean;
 }, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
     class?: string;
 } & {
+    onInput?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
     onChange?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
 }, import('vue').PublicProps>;
 export default RawInputTextarea;

package/components/text-field/TextField.d.ts

@@ -18,9 +18,14 @@ export type TextFieldProps = VueToJSXProps<UIProps, TextFieldPropsToOverride | '
     minimumRows?: number;
     /** Additional label props. */
     labelProps?: InputLabelProps;
+    /** Ref callback for the native input element. */
+    inputRef?: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
+    /** Ref callback for the text field wrapper element. */
+    textFieldRef?: (el: HTMLElement | null) => void;
 };
 export declare const emitSchema: {
     change: (value: string, _name?: string, _event?: Event) => boolean;
+    input: (value: string, _name?: string, _event?: Event) => boolean;
     focus: (_event?: FocusEvent) => boolean;
     blur: (_event?: FocusEvent) => boolean;
     clear: (_event?: MouseEvent) => boolean;
@@ -34,6 +39,7 @@ export { CLASSNAME, COMPONENT_NAME };
  */
 declare const TextField: import('vue').DefineSetupFnComponent<TextFieldProps, {
     change: (value: string, _name?: string, _event?: Event) => boolean;
+    input: (value: string, _name?: string, _event?: Event) => boolean;
     focus: (_event?: FocusEvent) => boolean;
     blur: (_event?: FocusEvent) => boolean;
     clear: (_event?: MouseEvent) => boolean;
@@ -55,7 +61,12 @@ declare const TextField: import('vue').DefineSetupFnComponent<TextFieldProps, {
     minimumRows?: number;
     /** Additional label props. */
     labelProps?: InputLabelProps;
+    /** Ref callback for the native input element. */
+    inputRef?: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
+    /** Ref callback for the text field wrapper element. */
+    textFieldRef?: (el: HTMLElement | null) => void;
 } & {
+    onInput?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
     onBlur?: ((_event?: FocusEvent | undefined) => any) | undefined;
     onChange?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
     onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;

package/composables/useWatchDisposable.d.ts

@@ -0,0 +1,19 @@
+import { WatchOptions, WatchSource } from 'vue';
+type Cleanup = void | (() => void);
+type MapSources<T> = {
+    [K in keyof T]: T[K] extends WatchSource<infer V> ? V : never;
+};
+type MultiWatchSources = (WatchSource<unknown> | object)[];
+/**
+ * Watch a reactive source and run an effect that can return a cleanup function.
+ * On each re-run the previous cleanup is called automatically.
+ * Stops and cleans up on unmount.
+ *
+ * @param source  One or more reactive sources to watch.
+ * @param effect  Effect callback receiving the new (and old) value; may return a cleanup function.
+ * @param options Watch options (defaults to `{ immediate: true }`).
+ * @returns A stop function that also runs the latest cleanup.
+ */
+export declare function useWatchDisposable<T extends MultiWatchSources>(source: [...T], effect: (value: MapSources<T>, oldValue: MapSources<T> | undefined) => Cleanup, options?: WatchOptions): () => void;
+export declare function useWatchDisposable<T>(source: WatchSource<T>, effect: (value: T, oldValue: T | undefined) => Cleanup, options?: WatchOptions): () => void;
+export {};

package/index.d.ts

@@ -1,12 +1,14 @@
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 export * from './components/avatar';
+export * from './components/combobox';
 export * from './components/badge';
 export * from './components/button';
 export * from './components/checkbox';
 export * from './components/chip';
 export * from './components/divider';
 export * from './components/drag-handle';
+export * from './components/expansion-panel';
 export * from './components/flag';
 export * from './components/flex-box';
 export * from './components/grid-column';
@@ -17,6 +19,7 @@ export * from './components/input-label';
 export * from './components/link';
 export * from './components/list';
 export * from './components/message';
+export * from './components/mosaic';
 export * from './components/popover';
 export * from './components/popover-dialog';
 export * from './components/progress';
@@ -26,6 +29,7 @@ export * from './components/switch';
 export * from './components/text-field';
 export * from './components/uploader';
 export * from './components/generic-block';
+export * from './components/image-block';
 export * from './components/inline-list';
 export * from './components/table';
 export * from './components/tabs';