@lumx/vue 4.11.0 → 4.12.0-alpha.0

package/components/select-text-field/SelectTextField.stories.d.ts

@@ -0,0 +1,203 @@
+declare const _default: {
+    component: any;
+    play({ canvas }: any): Promise<void>;
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithSelectedValue: {
+    args: {
+        value: {
+            id: string;
+            name: string;
+            icon: string;
+            category: string;
+            categoryIcon: string;
+            description: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const NoClearButton: {
+    args: {
+        value: {
+            id: string;
+            name: string;
+            icon: string;
+            category: string;
+            categoryIcon: string;
+            description: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithDescriptions: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithSections: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithIcon: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const Disabled: {
+    args: {
+        value: {
+            id: string;
+            name: string;
+            icon: string;
+            category: string;
+            categoryIcon: string;
+            description: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    play: any;
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithError: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithHelper: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const MultipleSelection: {
+    args: {
+        value: never[];
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const MultipleWithPreselected: {
+    args: {
+        value: {
+            id: string;
+            name: string;
+            icon: string;
+            category: string;
+            categoryIcon: string;
+            description: string;
+        }[];
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const MultipleWithManyChips: {
+    args: {
+        value: ({
+            id: string;
+            name: string;
+            icon: string;
+            category: string;
+            categoryIcon: string;
+            description: string;
+        } | {
+            id: string;
+            name: string;
+            category: string;
+        })[];
+    };
+    decorators: ((story: any, context: any) => any)[];
+    play: any;
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const MultipleDisabled: {
+    args: {
+        value: {
+            id: string;
+            name: string;
+            icon: string;
+            category: string;
+            categoryIcon: string;
+            description: string;
+        }[];
+    };
+    decorators: ((story: any, context: any) => any)[];
+    play: any;
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const Loading: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const LoadingMore: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ErrorState: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+/** SelectTextField with custom option, section title, and chip rendering via scoped slots */
+export declare const CustomRender: {
+    render: () => {
+        components: {
+            StoryCustomRender: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        };
+        template: string;
+    };
+};
+/** SelectTextField with a creatable option before the list */
+export declare const WithCreatableOptions: {
+    render: () => {
+        components: {
+            StoryWithCreatableOptions: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        };
+        template: string;
+    };
+};
+/** Single-select with consumer-controlled search (`filter="manual"` + `@search` listener) */
+export declare const WithSearch: {
+    render: () => {
+        components: {
+            StoryWithSearch: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        };
+        template: string;
+    };
+};
+/** Multi-select with consumer-controlled search (`filter="manual"` + `@search` listener) */
+export declare const MultipleWithSearch: {
+    render: () => {
+        components: {
+            StoryMultipleWithSearch: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        };
+        template: string;
+    };
+};

package/components/select-text-field/SelectTextField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/select-text-field/SelectTextField.test.stories.d.ts

@@ -0,0 +1,37 @@
+declare const _default: {
+    title: string;
+    component: any;
+    tags: string[];
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+};
+export default _default;
+export declare const ClickOutsideCloses: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    play({ canvas }: any): Promise<void>;
+};
+export declare const BlurResetsToSelectedValue: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    play({ canvas }: any): Promise<void>;
+};
+export declare const BlurResetsToEmpty: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    play({ canvas }: any): Promise<void>;
+};
+export declare const MultiBlurResetsSearch: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    play({ canvas }: any): Promise<void>;
+};
+/** Test infinite scroll loads more options when scrolling to the bottom */
+export declare const WithInfiniteScroll: {
+    render: () => {
+        components: {
+            StoryWithInfiniteScroll: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        };
+        template: string;
+    };
+    play({ canvas }: any): Promise<void>;
+};

package/components/select-text-field/Stories/CustomRender.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/select-text-field/Stories/MultipleWithSearch.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/select-text-field/Stories/WithCreatableOptions.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/select-text-field/Stories/WithInfiniteScroll.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/select-text-field/Stories/WithSearch.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/select-text-field/index.d.ts

@@ -0,0 +1,58 @@
+export { type SelectTextFieldProps, type SingleSelectTextFieldProps, type MultipleSelectTextFieldProps, } from './SelectTextField';
+export type { SelectTextFieldStatus, SelectTextFieldTranslations } from '@lumx/core/js/utils/select/types';
+/**
+ * SelectTextField compound component.
+ */
+export declare const SelectTextField: import('./SelectTextField').SelectTextFieldConstructor & import('vue').DefineSetupFnComponent<import('./SelectTextField').SelectTextFieldProps<any>, {
+    change: (_newValue?: unknown) => boolean;
+    search: (_searchText: string) => boolean;
+    'load-more': () => boolean;
+    blur: (_event?: FocusEvent) => boolean;
+    focus: (_event?: FocusEvent) => boolean;
+    keydown: (_event?: KeyboardEvent) => boolean;
+    clear: (_event?: MouseEvent) => boolean;
+    open: (_isOpen: boolean) => boolean;
+}, {}, import('./SelectTextField').SelectTextFieldProps<any> & {
+    onSearch?: ((_searchText: string) => any) | undefined;
+    onBlur?: ((_event?: FocusEvent | undefined) => any) | undefined;
+    onChange?: ((_newValue?: unknown) => any) | undefined;
+    onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;
+    onKeydown?: ((_event?: KeyboardEvent | undefined) => any) | undefined;
+    onClear?: ((_event?: MouseEvent | undefined) => any) | undefined;
+    onOpen?: ((_isOpen: boolean) => any) | undefined;
+    "onLoad-more"?: (() => any) | undefined;
+}, import('vue').PublicProps> & {
+    /** Selectable option within the dropdown list. */
+    Option: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxOptionProps, {
+        click: () => boolean;
+    }, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionPropsToOverride> & {
+        class?: string;
+    } & {
+        tooltipProps?: Partial<import('../tooltip').TooltipProps>;
+        actionProps?: Record<string, any>;
+    } & {
+        onClick?: (() => any) | undefined;
+    }, import('vue').PublicProps>;
+    /** Labelled group of options. */
+    Section: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxSectionProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxSection').ComboboxSectionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-hidden" | "hidden"> & {
+        class?: string;
+    } & {}, import('vue').PublicProps>;
+    /** Info icon on an option that reveals a popover with additional details. */
+    OptionMoreInfo: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxOptionMoreInfoProps, {
+        toggle: (isOpen: boolean) => boolean;
+    }, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOptionMoreInfo').ComboboxOptionMoreInfoProps, "className" | import('@lumx/core/js/types').PropsToOverride | "onMouseEnter" | "onMouseLeave" | "buttonProps" | import('@lumx/core/js/components/Combobox/ComboboxOptionMoreInfo').ComboboxOptionMoreInfoPropsToOverride> & {
+        class?: string;
+    } & {
+        onToggle?: (isOpen: boolean) => void;
+    } & {
+        onToggle?: ((isOpen: boolean) => any) | undefined;
+    }, import('vue').PublicProps>;
+    /** Skeleton loading placeholder for options being fetched. */
+    OptionSkeleton: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxOptionSkeletonProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOptionSkeleton').ComboboxOptionSkeletonProps, "className" | import('@lumx/core/js/types').PropsToOverride | import('@lumx/core/js/components/Combobox/ComboboxOptionSkeleton').ComboboxOptionSkeletonPropsToOverride> & {
+        class?: string;
+    } & {}, import('vue').PublicProps>;
+    /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
+    Divider: import('vue').DefineSetupFnComponent<import('../list').ListDividerProps, {}, {}, Omit<import('@lumx/core/js/components/List/ListDivider').ListDividerProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+        class?: string;
+    } & {}, import('vue').PublicProps>;
+};

package/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/button';
 export * from './components/checkbox';
 export * from './components/chip';
 export * from './components/dialog';
+export * from './components/lightbox';
 export * from './components/divider';
 export * from './components/drag-handle';
 export * from './components/expansion-panel';
@@ -41,3 +42,4 @@ export * from './components/thumbnail';
 export * from './components/toolbar';
 export * from './components/tooltip';
 export * from './components/user-block';
+export * from './components/select-text-field';